/* ==========================================
   CUSTOM CTA BANNER
   ========================================== */

.cta-banner-container {
    margin: 0 auto;
    width: 95%;
    max-width: 1260px;
    display: flex;
}


/* ==========================================
   COLUMNS CONTAINER
   ========================================== */

.cta-banner-container .columns-container {
    display: flex;
    width: 100%;
    gap: 20px;
    padding: 0;
    min-height: 33.33vh;
    align-items: stretch;
    position: relative;
    background-size: cover;
    background-position: center;
}


/* Background-image overlay from original module */

.cta-banner-container .columns-container.column-image::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 0;
    background: linear-gradient(
        270deg,
        rgba(17, 22, 54, 0.74) 0%,
        rgba(17, 22, 54, 0.68) 18%,
        rgba(17, 22, 54, 0.1) 84%
    );
}


/* ==========================================
   INDIVIDUAL COLUMNS
   ========================================== */

.cta-banner-container .columns-container > .left-column,
.cta-banner-container .columns-container > .right-column {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;

    padding: 40px;

    border-radius: 25px;
    overflow: hidden;

    position: relative;
    z-index: 1;
}


/* ==========================================
   COLUMN WIDTHS
   ========================================== */

.cta-banner-container.same .columns-container > .left-column,
.cta-banner-container.same .columns-container > .right-column {
    width: 50%;
}

.cta-banner-container.left .columns-container > .left-column {
    width: 60%;
}

.cta-banner-container.left .columns-container > .right-column {
    width: 40%;
}

.cta-banner-container.right .columns-container > .left-column {
    width: 40%;
}

.cta-banner-container.right .columns-container > .right-column {
    width: 60%;
}


/* ==========================================
   STANDARD CONTENT
   ========================================== */

.cta-banner-container .left-content,
.cta-banner-container .right-content {
    color: #ffffff;
}

.cta-banner-container .left-content h2,
.cta-banner-container .right-content h2 {
    font-size: 50px !important;
    color: #ffffff;
}

.cta-banner-container .left-content h3,
.cta-banner-container .right-content h3 {
    font-size: 40px !important;
    color: #ffffff;
}

.cta-banner-container .left-content p,
.cta-banner-container .right-content p {
    color: #ffffff;
    font-size: 19px !important;
    font-weight: 300;
    line-height: 1.5;
}


/* ==========================================
   DARK BACKGROUND CONTENT
   ========================================== */

.custom_cta_banner.background-dark .left-content h2,
.custom_cta_banner.background-dark .right-content h2 {
    color: #ff5900;
}

.custom_cta_banner.background-dark .left-content h1,
.custom_cta_banner.background-dark .left-content h3,
.custom_cta_banner.background-dark .left-content h4,
.custom_cta_banner.background-dark .left-content h5,
.custom_cta_banner.background-dark .left-content h6,
.custom_cta_banner.background-dark .left-content p,
.custom_cta_banner.background-dark .left-content ul,
.custom_cta_banner.background-dark .left-content ol,
.custom_cta_banner.background-dark .left-content li,
.custom_cta_banner.background-dark .right-content h1,
.custom_cta_banner.background-dark .right-content h3,
.custom_cta_banner.background-dark .right-content h4,
.custom_cta_banner.background-dark .right-content h5,
.custom_cta_banner.background-dark .right-content h6,
.custom_cta_banner.background-dark .right-content p,
.custom_cta_banner.background-dark .right-content ul,
.custom_cta_banner.background-dark .right-content ol,
.custom_cta_banner.background-dark .right-content li {
    color: #ffffff;
    font-weight: 400;
    margin: 0;
}


/* ==========================================
   WHITE BACKGROUND CONTENT
   ========================================== */

.custom_cta_banner.background-white .left-content h1,
.custom_cta_banner.background-white .left-content h2,
.custom_cta_banner.background-white .left-content h3,
.custom_cta_banner.background-white .left-content h4,
.custom_cta_banner.background-white .left-content h5,
.custom_cta_banner.background-white .left-content h6,
.custom_cta_banner.background-white .left-content p,
.custom_cta_banner.background-white .left-content ul,
.custom_cta_banner.background-white .left-content ol,
.custom_cta_banner.background-white .left-content li,
.custom_cta_banner.background-white .right-content h1,
.custom_cta_banner.background-white .right-content h2,
.custom_cta_banner.background-white .right-content h3,
.custom_cta_banner.background-white .right-content h4,
.custom_cta_banner.background-white .right-content h5,
.custom_cta_banner.background-white .right-content h6,
.custom_cta_banner.background-white .right-content p,
.custom_cta_banner.background-white .right-content ul,
.custom_cta_banner.background-white .right-content ol,
.custom_cta_banner.background-white .right-content li {
    color: #100F34;
    font-weight: 400;
    margin: 0;
}

.custom_cta_banner.background-white .left-content h2,
.custom_cta_banner.background-dark .left-content h2,
.custom_cta_banner.background-white .right-content h2,
.custom_cta_banner.background-dark .right-content h2 {
    font-weight: 800;
    margin: 0;
}

.custom_cta_banner.background-white .left-content p,
.custom_cta_banner.background-dark .left-content p,
.custom_cta_banner.background-white .right-content p,
.custom_cta_banner.background-dark .right-content p {
    font-weight: 300 !important;
}

.custom_cta_banner .right-content > *:not(:last-child),
.custom_cta_banner .left-content > *:not(:last-child) {
    margin-bottom: 10px !important;
}


/* ==========================================
   CONTENT IMAGES
   ========================================== */

.cta-banner-container .left-content img.aligncenter,
.cta-banner-container .right-content img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================
   MODULE BACKGROUND
   ========================================== */

.custom_cta_banner.background-dark {
    background: #100F34;
}

.custom_cta_banner.background-white {
    background: #ffffff;
}


/* ==========================================
   STANDARD BUTTONS
   ========================================== */

.cta-banner-container .columns-container > div a.sbtn {
    margin-top: 20px;
}

.custom_cta_banner.background-dark .left-column .sbtn,
.custom_cta_banner.background-dark .right-column .sbtn {
    background-color: #ff5900;
    border: 1px solid #ff5900;
    color: #100F34;
}

.custom_cta_banner.background-white .left-column .sbtn,
.custom_cta_banner.background-white .right-column .sbtn {
    background-color: #100F34;
    border: 1px solid #100F34;
    color: #ffffff;
}

.custom_cta_banner.background-dark .left-column .sbtn:hover,
.custom_cta_banner.background-dark .right-column .sbtn:hover {
    background-color: transparent;
    border: 1px solid #ff5900;
    color: #ff5900;
}

.custom_cta_banner.background-white .left-column .sbtn:hover,
.custom_cta_banner.background-white .right-column .sbtn:hover {
    background-color: transparent;
    border: 1px solid #100F34;
    color: #100F34;
}


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

.custom_cta_banner .cta-video-section {
    width: 100%;
    position: relative;
}


/* Video title */

.custom_cta_banner .cta-column-title {
    margin: 0 0 20px;

    color: #100F34;

    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;
}


/* Thumbnail */

.custom_cta_banner .cta-video-thumbnail {
    display: block;
    position: relative;

    width: 100%;
    margin: 0 0 16px;

    border-radius: 8px;
    overflow: hidden;

    text-decoration: none;
}

.custom_cta_banner .cta-video-thumbnail img {
    display: block;

    width: 100%;
    height: auto;

    aspect-ratio: 16 / 9;

    object-fit: cover;
}


/* Large play button */

.custom_cta_banner .cta-video-play {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 58px;
    height: 58px;

    transform: translate(-50%, -50%);

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: rgba(16, 15, 52, 0.35);

    box-sizing: border-box;

    transition:
        background-color 0.25s ease,
        transform 0.25s ease;
}

.custom_cta_banner .cta-video-play::after {
    content: '';

    position: absolute;

    top: 50%;
    left: 53%;

    transform: translate(-40%, -50%);

    width: 0;
    height: 0;

    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #ffffff;
}

.custom_cta_banner .cta-video-thumbnail:hover .cta-video-play {
    background: rgba(255, 89, 0, 0.9);
    transform: translate(-50%, -50%) scale(1.06);
}


/* Video description */

.custom_cta_banner .cta-video-description {
    margin: 0 0 5px;

    color: #100F34;

    font-size: 17px;
    line-height: 1.45;
    font-weight: 400;
}


/* Video text link */

.custom_cta_banner .cta-video-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    width: fit-content;

    margin-top: 0;

    color: #100F34;

    font-size: 17px;
    line-height: 1.2;
    font-weight: 700;

    text-decoration: underline;
}

.custom_cta_banner .cta-video-link:hover {
    color: #100F34;
    text-decoration: none;
}


/* Small circular play icon */

.custom_cta_banner .cta-video-link-icon {
    position: relative;

    display: inline-block;

    width: 18px;
    height: 18px;

    border: 2px solid #100F34;
    border-radius: 50%;

    box-sizing: border-box;

    flex: 0 0 18px;
}

.custom_cta_banner .cta-video-link-icon::after {
    content: '';

    position: absolute;

    top: 50%;
    left: 54%;

    transform: translate(-40%, -50%);

    width: 0;
    height: 0;

    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #100F34;
}


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

.custom_cta_banner .cta-form-section {
    width: 100%;
    position: relative;
}


/*
 * When an image is present, split the inside of
 * the column into form/content + image.
 */

.custom_cta_banner .cta-form-section.has-image {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 45%;
    gap: 20px;
    align-items: center;
}


/* Form content */

.custom_cta_banner .cta-form-section__content {
    position: relative;
    z-index: 2;

    min-width: 0;
}


/* Description */

.custom_cta_banner .cta-form-description {
    margin: 0 0 20px;

    color: #100F34;

    font-size: 17px;
    line-height: 1.45;
    font-weight: 400;
}


/* Form */

.custom_cta_banner .cta-column-form {
    position: relative;
    z-index: 2;

    width: 100%;
}

.custom_cta_banner .cta-column-form .gform_wrapper,
.custom_cta_banner .columns-container .right-form .gform_wrapper,
.custom_cta_banner .columns-container .left-form .gform_wrapper {
    margin: 0;
    width: 100%;
}


/* Hide Gravity Forms description */

.cta-banner-container .columns-container .gform_description {
    display: none;
}


/* Reduce spacing between fields */

.custom_cta_banner .column-type-form .gform_fields {
    row-gap: 10px;
}


/* Inputs */

.custom_cta_banner .column-type-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.custom_cta_banner .column-type-form textarea,
.custom_cta_banner .column-type-form select {
    background: #ffffff;
}


/* Footer / submit area */

.custom_cta_banner .column-type-form .gform_footer {
    margin-top: 10px;
    padding: 0;
}


/* ==========================================
   FORM SECTION IMAGE
   ========================================== */

.custom_cta_banner .cta-form-section__image {
    display: flex;
    align-items: center;
    justify-content: center;

    position: relative;
    z-index: 1;

    min-width: 0;
}

.custom_cta_banner .cta-form-section__image img {
    display: block;

    width: 125%;
    max-width: none;
    height: auto;

    object-fit: contain;
}


/* ==========================================
   DARK FORM LABELS
   ========================================== */

.form-label-dark .gform_wrapper,
.form-label-dark .gform_wrapper.gravity-theme {
    --gf-label-color: #000;
}


/* Labels & headings */

.form-label-dark .gform_wrapper .gfield > .gfield_label,
.form-label-dark .gform_wrapper .ginput_complex label,
.form-label-dark .gform_wrapper .gsection_title,
.form-label-dark .gform_wrapper .gform_title,
.form-label-dark .gform_wrapper .gform_subtitle,
.form-label-dark .gform_wrapper .gfield_consent_label,
.form-label-dark .gform_wrapper .gform_required_legend,
.form-label-dark .gform_wrapper .gfield_required {
    color: var(--gf-label-color);
}


/* Descriptions, instructions, help text */

.form-label-dark .gform_wrapper .gfield_description,
.form-label-dark .gform_wrapper .instruction,
.form-label-dark .gform_wrapper .gform_description,
.form-label-dark .gform_wrapper .gform_fields .description {
    color: var(--gf-label-color);
}


/* Validation summary */

.form-label-dark .gform_wrapper .gform_validation_errors,
.form-label-dark .gform_wrapper .gform_validation_errors h2,
.form-label-dark .gform_wrapper .gform_submission_error {
    color: var(--gf-label-color);
}


/* Field validation */

.form-label-dark .gform_wrapper .gfield_validation_message,
.form-label-dark .gform_wrapper .validation_message {
    color: var(--gf-label-color);
}


/* Checkbox / radio */

.form-label-dark .gform_wrapper .gfield_checkbox label,
.form-label-dark .gform_wrapper .gfield_radio label,
.form-label-dark .gform_wrapper .ginput_container_consent .gfield_consent_label {
    color: var(--gf-label-color);
}


/* Placeholders */

.form-label-dark .gform_wrapper input::placeholder,
.form-label-dark .gform_wrapper textarea::placeholder {
    color: #000;
    opacity: 0.7;
}


/* Links */

.form-label-dark .gform_wrapper a {
    color: var(--gf-label-color);
}


/* ==========================================
   LIGHT FORM LABELS
   ========================================== */

.form-label-light .gform_wrapper,
.form-label-light .gform_wrapper.gravity-theme {
    --gf-label-color: #ffffff;
}


/* Labels & headings */

.form-label-light .gform_wrapper .gfield > .gfield_label,
.form-label-light .gform_wrapper .ginput_complex label,
.form-label-light .gform_wrapper .gsection_title,
.form-label-light .gform_wrapper .gform_title,
.form-label-light .gform_wrapper .gform_subtitle,
.form-label-light .gform_wrapper .gfield_consent_label,
.form-label-light .gform_wrapper .gform_required_legend,
.form-label-light .gform_wrapper .gfield_required {
    color: var(--gf-label-color) !important;
}


/* Descriptions */

.form-label-light .gform_wrapper .gfield_description,
.form-label-light .gform_wrapper .instruction,
.form-label-light .gform_wrapper .gform_description,
.form-label-light .gform_wrapper .gform_fields .description {
    color: var(--gf-label-color) !important;
}


/* Validation summary */

.form-label-light .gform_wrapper .gform_validation_errors,
.form-label-light .gform_wrapper .gform_validation_errors h2,
.form-label-light .gform_wrapper .gform_submission_error {
    color: var(--gf-label-color) !important;
}


/* Field validation */

.form-label-light .gform_wrapper .gfield_validation_message,
.form-label-light .gform_wrapper .validation_message {
    color: var(--gf-label-color) !important;
}


/* Checkbox / radio */

.form-label-light .gform_wrapper .gfield_checkbox label,
.form-label-light .gform_wrapper .gfield_radio label,
.form-label-light .gform_wrapper .ginput_container_consent .gfield_consent_label {
    color: var(--gf-label-color) !important;
}


/* Placeholders */

.form-label-light .gform_wrapper input::placeholder,
.form-label-light .gform_wrapper textarea::placeholder {
    color: #ffffff !important;
    opacity: 0.8;
}


/* Links */

.form-label-light .gform_wrapper a {
    color: var(--gf-label-color) !important;
}


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

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

    .cta-banner-container .columns-container {
        flex-direction: column;
        gap: 20px;
    }

    .cta-banner-container .columns-container > .left-column,
    .cta-banner-container .columns-container > .right-column {
        width: 100% !important;
        padding: 35px;
    }

    .cta-banner-container .left-content {
        margin-bottom: 20px;
    }


    /*
     * Once the outer columns stack, the form section
     * can still keep the text/form and image side-by-side.
     */

    .custom_cta_banner .cta-form-section.has-image {
        grid-template-columns: minmax(0, 1fr) 40%;
        gap: 30px;
    }

    .custom_cta_banner .cta-form-section__image img {
        width: 110%;
    }

}


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

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

    .cta-banner-container {
        width: 90%;
    }

    .cta-banner-container .columns-container {
        gap: 20px;
    }

    .cta-banner-container .columns-container > .left-column,
    .cta-banner-container .columns-container > .right-column {
        padding: 25px;
        border-radius: 20px;
    }


    /* Column titles */

    .custom_cta_banner .cta-column-title {
        margin-bottom: 16px;
        font-size: 25px;
    }


    /* Video */

    .custom_cta_banner .cta-video-description {
        font-size: 16px;
    }

    .custom_cta_banner .cta-video-link {
        font-size: 16px;
    }

    .custom_cta_banner .cta-video-play {
        width: 52px;
        height: 52px;
    }

    .custom_cta_banner .cta-video-play::after {
        border-top-width: 9px;
        border-bottom-width: 9px;
        border-left-width: 14px;
    }


    /*
     * On mobile the form image moves underneath
     * the form rather than sitting beside it.
     */

    .custom_cta_banner .cta-form-section.has-image {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    .custom_cta_banner .cta-form-section__content {
        width: 100%;
    }

    .custom_cta_banner .cta-form-description {
        font-size: 16px;
    }

    .custom_cta_banner .cta-form-section__image {
        width: 100%;
    }

    .custom_cta_banner .cta-form-section__image img {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }

}


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

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

    .cta-banner-container {
        width: 92%;
    }

    .cta-banner-container .columns-container > .left-column,
    .cta-banner-container .columns-container > .right-column {
        padding: 22px 20px;
        border-radius: 18px;
    }

    .custom_cta_banner .cta-column-title {
        font-size: 23px;
    }

    .custom_cta_banner .cta-video-play {
        width: 46px;
        height: 46px;
        border-width: 2px;
    }

    .custom_cta_banner .cta-video-play::after {
        border-top-width: 8px;
        border-bottom-width: 8px;
        border-left-width: 12px;
    }

}



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

.cta-video-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: none;
    align-items: center;
    justify-content: center;

    padding: 30px;
}

.cta-video-modal.is-open {
    display: flex;
}

.cta-video-modal__overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.82);
}

.cta-video-modal__dialog {
    position: relative;
    z-index: 2;

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

    background: #000000;

    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.4);
}

.cta-video-modal__content {
    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    background: #000000;
}

.cta-video-modal__content iframe,
.cta-video-modal__content video {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}

.cta-video-modal__close {
    position: absolute;

    top: -45px;
    right: 0;

    z-index: 3;

    width: 40px;
    height: 40px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #ffffff;
    color: #100F34;

    font-size: 30px;
    line-height: 36px;

    cursor: pointer;
}

.cta-video-modal__close:hover {
    background: #ff5900;
    color: #ffffff;
}

.cta-video-modal__close:focus {
    outline: 3px solid #ff5900;
    outline-offset: 3px;
}

body.cta-video-modal-open {
    overflow: hidden;
}


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

    .cta-video-modal {
        padding: 20px;
    }

    .cta-video-modal__close {
        top: -42px;
    }

}