/* ==========================================================
   PREMIER POINT MORTGAGE
   FLORIDA HOMEPAGE ANNOUNCEMENT
   ELEMENTOR CONTROLLED FINAL VERSION
   ========================================================== */


/* ==========================================================
   ROOT
   ========================================================== */

.pp-florida-62f8172f {
    --pp-florida-navy: #0B1C33;
    --pp-florida-cyan: #16D9F3;
    --pp-florida-blue: #4FA8FF;
    --pp-florida-purple: #8B4DFF;
    --pp-florida-pink: #FF2A93;
    --pp-media-y: 50%;

    position: relative;

    width: 100vw;
    max-width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    padding: 0;

    /*
     * Only the OUTER banner clips.
     * This keeps everything inside the full banner.
     */
    overflow: hidden;

    background: var(--pp-florida-navy);

    font-family: "Poppins", sans-serif;

    border: 0;
    border-radius: 0 !important;
}


/* ==========================================================
   FORCE SQUARE EDGES
   ========================================================== */

.pp-florida-62f8172f,
.pp-florida-62f8172f *,
.pp-florida-62f8172f *::before,
.pp-florida-62f8172f *::after {
    box-sizing: border-box;
    border-radius: 0 !important;
}


/* ==========================================================
   MAIN INNER WRAPPER
   ========================================================== */

.pp-florida-62f8172f__inner {
    position: relative;

    display: flex;
    flex-direction: row;
    align-items: stretch;

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

    min-height: inherit;

    margin: 0 auto;
    padding: 0;

    /*
     * CRITICAL FIX:
     * FLORIDA must be able to extend across the
     * diagonal into the media side.
     */
    overflow: visible;

    background: var(--pp-florida-navy);
}


/* ==========================================================
   LEFT TEXT PANEL
   ========================================================== */

.pp-florida-62f8172f__text {
    position: relative;

    z-index: 10;

    display: flex;
    align-items: center;

    width: 47%;
    min-width: 0;

    overflow: visible;

    background: var(--pp-florida-navy);
}


/* ==========================================================
   DIAGONAL NAVY EDGE
   ========================================================== */

.pp-florida-62f8172f__text::after {
    content: "";

    position: absolute;

    z-index: 2;

    top: 0;
    right: -105px;
    bottom: 0;

    width: 160px;

    background: var(--pp-florida-navy);

    clip-path: polygon(
        0 0,
        100% 0,
        35% 100%,
        0 100%
    );

    pointer-events: none;
}


/* ==========================================================
   TEXT INNER
   ========================================================== */

.pp-florida-62f8172f__text-inner {
    position: relative;

    z-index: 20;

    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;

    overflow: visible;

    padding:
        28px
        78px
        28px
        60px;
}


/* ==========================================================
   EYEBROW
   ========================================================== */

.pp-florida-62f8172f__eyebrow {
    position: relative;

    z-index: 30;

    margin: 0 0 12px;

    color: var(--pp-florida-pink);

    font-family: "Poppins", sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 3.6px;

    text-transform: uppercase;
}


/* ==========================================================
   FLORIDA DISPLAY WORD
   ========================================================== */

.pp-florida-62f8172f__display {
    position: relative;

    /*
     * Above diagonal and photo.
     */
    z-index: 100;

    display: block;

    /*
     * Never constrain FLORIDA to the 47% text column.
     */
    width: max-content;
    max-width: none;

    margin: 0;
    padding: 0;

    overflow: visible;

    color: transparent;

    /*
     * These are DEFAULTS only.
     *
     * No !important here because Elementor must
     * be able to override them.
     */
    font-family: "Poppins", sans-serif;

    font-size: clamp(
        82px,
        9.2vw,
        138px
    );

    font-weight: 800;

    line-height: 0.84;

    letter-spacing: -5px;

    text-transform: uppercase;

    white-space: nowrap;

    /*
     * PHP supplies --pp-florida-gradient inline.
     * This restores the Elementor gradient controls.
     */
    background:
        var(
            --pp-florida-gradient,
            linear-gradient(
                90deg,
                #16D9F3 0%,
                #8B4DFF 55%,
                #FF2A93 100%
            )
        );

    background-clip: text;
    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* ==========================================================
   GRADIENT ACCENT LINE
   ========================================================== */

.pp-florida-62f8172f__line {
    position: relative;

    z-index: 30;

    width: 220px;
    max-width: 42%;

    height: 3px;

    margin:
        20px
        0
        24px;

    flex: 0 0 3px;

    /*
     * DO NOT add a background here.
     *
     * PHP applies the Elementor-controlled
     * gradient directly to this element.
     */
}


/* ==========================================================
   SECONDARY HEADING
   ========================================================== */

.pp-florida-62f8172f__heading {
    position: relative;

    z-index: 30;

    display: block;

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

    margin: 0 0 14px;
    padding: 0;

    color: #FFFFFF;

    font-family: "Poppins", sans-serif;

    font-size: 26px;
    font-weight: 700;
    line-height: 1.22;

    letter-spacing: -0.65px;
}


.pp-florida-62f8172f__heading-line {
    display: block;
}


.pp-florida-62f8172f__heading-accent {
    color: var(--pp-florida-cyan);

    font-weight: inherit;
}


/* ==========================================================
   BODY
   ========================================================== */

.pp-florida-62f8172f__body {
    position: relative;

    z-index: 30;

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

    margin: 0;
    padding: 0;

    color: rgba(
        255,
        255,
        255,
        0.96
    );

    font-family: "Poppins", sans-serif;

    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;

    letter-spacing: -0.05px;
}


/* ==========================================================
   RIGHT MEDIA PANEL
   ========================================================== */

.pp-florida-62f8172f__media {
    position: relative;

    z-index: 1;

    width: 53%;
    min-width: 0;

    min-height: 0;

    overflow: hidden;

    background: var(--pp-florida-navy);
}


/* ==========================================================
   IMAGE
   ========================================================== */

.pp-florida-62f8172f__image {
    position: absolute;

    z-index: 1;

    inset: 0;

    width: 100%;
    height: 100%;

    background-color: var(--pp-florida-navy);

    background-repeat: no-repeat;

    background-position:
        58%
        50%;

    background-size: cover;
}


/* ==========================================================
   VIDEO
   ========================================================== */

.pp-florida-62f8172f__video {
    position: absolute;

    z-index: 1;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    object-fit: cover;

    object-position:
        58%
        var(--pp-media-y, 50%);
}


/* ==========================================================
   MOBILE VIDEO POSTER
   ========================================================== */

.pp-florida-62f8172f__mobile-poster {
    position: absolute;

    z-index: 1;

    inset: 0;

    display: none;

    width: 100%;
    height: 100%;

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


/* ==========================================================
   COLOR BACKGROUND
   ========================================================== */

.pp-florida-62f8172f__color {
    position: absolute;

    z-index: 1;

    inset: 0;

    width: 100%;
    height: 100%;
}


/* ==========================================================
   ELEMENTOR FULL WIDTH PROTECTION
   ========================================================== */

.elementor-widget-container:has(
    .pp-florida-62f8172f
) {
    overflow: visible;
}


.elementor-widget:has(
    .pp-florida-62f8172f
) {
    max-width: none;
}


.pp-florida-62f8172f__inner,
.pp-florida-62f8172f__text,
.pp-florida-62f8172f__media {
    border-radius: 0 !important;
}


/* ==========================================================
   LARGE DESKTOP
   ========================================================== */

@media (min-width: 1600px) {

    .pp-florida-62f8172f__text-inner {
        padding-left:
            max(
                60px,
                calc(
                    (100vw - 1500px) / 2 + 60px
                )
            );
    }


    .pp-florida-62f8172f__display {
        font-size: 138px;
    }

}


/* ==========================================================
   DESKTOP BELOW 1300
   ========================================================== */

@media (max-width: 1300px) {

    .pp-florida-62f8172f__text-inner {
        padding-right: 62px;
        padding-left: 46px;
    }


    .pp-florida-62f8172f__display {
        font-size: clamp(
            72px,
            8.4vw,
            112px
        );

        letter-spacing: -4px;
    }


    .pp-florida-62f8172f__heading {
        font-size: 23px;
    }


    .pp-florida-62f8172f__body {
        font-size: 13px;
    }

}


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

@media (max-width: 1024px) {

    .pp-florida-62f8172f__text {
        width: 50%;
    }


    .pp-florida-62f8172f__media {
        width: 50%;
    }


    .pp-florida-62f8172f__text-inner {
        padding:
            28px
            52px
            28px
            36px;
    }


    .pp-florida-62f8172f__text::after {
        right: -82px;

        width: 128px;
    }


    .pp-florida-62f8172f__eyebrow {
        margin-bottom: 10px;

        font-size: 10px;

        letter-spacing: 3px;
    }


    .pp-florida-62f8172f__display {
        width: max-content;
        max-width: none;

        font-size: clamp(
            56px,
            7.7vw,
            82px
        );

        letter-spacing: -3px;
    }


    .pp-florida-62f8172f__line {
        width: 185px;

        margin-top: 16px;
        margin-bottom: 19px;
    }


    .pp-florida-62f8172f__heading {
        font-size: 20px;

        margin-bottom: 10px;
    }


    .pp-florida-62f8172f__body {
        font-size: 12px;

        line-height: 1.6;
    }

}


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

@media (max-width: 767px) {

    .pp-florida-62f8172f {
        width: 100%;
        max-width: 100%;

        margin-left: 0;
        margin-right: 0;

        min-height: 0 !important;
    }


    .pp-florida-62f8172f__inner {
        display: flex;
        flex-direction: column;

        width: 100%;
        max-width: 100%;

        min-height: 0 !important;

        /*
         * On mobile there is no side-by-side overlap.
         */
        overflow: hidden;
    }


    .pp-florida-62f8172f__text {
        width: 100% !important;

        min-height: 0;

        overflow: hidden;
    }


    .pp-florida-62f8172f__text::after {
        display: none;
    }


    .pp-florida-62f8172f__text-inner {
        width: 100%;

        overflow: hidden;

        padding:
            34px
            24px
            32px;
    }


    .pp-florida-62f8172f__media {
        width: 100% !important;

        height: 230px;

        min-height: 230px;
    }


    .pp-florida-62f8172f__eyebrow {
        margin-bottom: 10px;

        font-size: 10px;

        letter-spacing: 3px;
    }


    .pp-florida-62f8172f__display {
        width: max-content;
        max-width: 100%;

        font-size: clamp(
            48px,
            14vw,
            70px
        );

        line-height: 0.9;

        letter-spacing: -2.5px;
    }


    .pp-florida-62f8172f__line {
        width: 175px;

        max-width: 48%;

        margin:
            16px
            0
            19px;
    }


    .pp-florida-62f8172f__heading {
        max-width: 100%;

        margin-bottom: 11px;

        font-size: 20px;

        line-height: 1.28;
    }


    .pp-florida-62f8172f__body {
        max-width: 100%;

        font-size: 12.5px;

        line-height: 1.62;
    }


    .pp-florida-62f8172f__video--disable-mobile {
        display: none;
    }


    .pp-florida-62f8172f__video--disable-mobile
    + .pp-florida-62f8172f__mobile-poster {
        display: block;
    }

}


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

@media (max-width: 480px) {

    .pp-florida-62f8172f__text-inner {
        padding:
            32px
            20px
            29px;
    }


    .pp-florida-62f8172f__display {
        font-size: 47px;

        letter-spacing: -2px;
    }


    .pp-florida-62f8172f__line {
        width: 155px;
    }


    .pp-florida-62f8172f__heading {
        font-size: 18px;
    }


    .pp-florida-62f8172f__body {
        font-size: 12px;
    }


    .pp-florida-62f8172f__media {
        height: 210px;

        min-height: 210px;
    }

}


/* ==========================================================
   COMPACT DESKTOP HEIGHT SUPPORT
   ========================================================== */

@media (min-width: 768px) {

    .pp-florida-62f8172f__text,
    .pp-florida-62f8172f__media {
        min-height: inherit;
    }

}


/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    .pp-florida-62f8172f__video {
        display: none;
    }


    .pp-florida-62f8172f__mobile-poster {
        display: block;
    }

}