/**
 * cta-bar.php
 */

.post-cta-box-wrapper {
    display: flex;
    flex-direction: column;
    background-size: auto, contain;
    background-color: #0b5067;
    width: 100%;
    border-radius: var(--rounded-m);
    padding-top: 2rem;
    padding-right: 2.8rem;
    padding-bottom: 2rem;
    padding-left: 2.8rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    background-repeat: no-repeat;
    background-position: 100% 0px;
    box-shadow: var(--box-shadow);
}

.post-cta-box-heading {
    font-size: var(--font-s);
    font-weight: var(--bold);
    line-height: var(--line-height-s);
    color: #ffffff;
    margin-bottom: 1.5rem;
}

.post-cta-box-heading-icon {
    color: #30bfc3;
}

.post-cta-box-heading-icon svg {
    width: 42px !important;
    height: 42px !important;
}

.post-cta-box-text {
    color: #fff;
    margin-bottom: var(--pm-s) !important;
}

.post-cta-box-link {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    width: auto;
    max-width: max-content;
    gap: 8px;
    justify-content: center;
    align-items: center;
    position: relative;
    font-family: var(--font-family-display);
    font-size: 16px;
    font-weight: var(--bold);
    background-color: #30bfc3;
    color: #fff;
    border: none;
    border-radius: var(--rounded-m);
    text-align: center;
    text-decoration: none;
    padding: .8rem 1.8rem;
    -webkit-transition: var(--transition-speed-normal);
    -moz-transition: var(--transition-speed-normal);
    -webkit-transition: var(--transition-speed-normal);
    transition: var(--transition-speed-normal);
    cursor: pointer;
}

.post-cta-box-link:hover {
    background-color: #fff;
    color: #30bfc3;
    text-decoration: none;
}

.post-cta-box-link-icon svg {
    width: 16px !important;
    height: 16px !important;
}


/**
 * blockquote-bar.php
 */

.post-blockquote-box-wrapper {
    position: relative;
    padding: 0 2rem;
    margin-top: 2.8rem;
    margin-right: 0;
    margin-bottom: 1.4rem;
    margin-left: 0;
}

.post-blockquote-box-text {
    position: relative;
    display: block;
    width: 100%;
    font-family: var(--font-family-display);
    font-size: var(--font-m);
    line-height: var(--line-height-s);
    color: #0b5067;
}

.post-blockquote-box-text::before {
    content: "";
    display: block;
    position: absolute;
    left: -2rem;
    bottom: -1rem;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 310"><path d="M231 167.84c6.02 0 11.42-.28 16.25-.81-7.1 29.03-22.95 44.36-45.88 56.04-5.33 2.71-7.63 9.1-5.23 14.57l6.04 13.77c2.59 5.91 9.62 8.44 15.38 5.53 22.1-11.11 37.39-23.92 48.76-40.63C281.58 193.89 289 164.4 289 126.17v-16.52c0-31.95-.11-57.81-58-57.81-58 0-58 25.97-58 58s-.38 58 58 58zm-152 0c6.02 0 11.42-.28 16.25-.81-7.1 29.03-22.95 44.36-45.88 56.04-5.33 2.71-7.63 9.1-5.23 14.57l6.04 13.77c2.59 5.91 9.62 8.44 15.38 5.53 22.1-11.11 37.39-23.92 48.76-40.63C129.58 193.89 137 164.4 137 126.17v-16.52c0-31.95-.11-57.81-58-57.81-58 0-58 25.97-58 58s-.38 58 58 58z" fill="%23a0dee0"></path></svg>');
    background-size: contain;
    background-position: center center;
    width: 3rem;
    height: 3rem;
    opacity: .4;
    z-index: -1;
}

.post-blockquote-box-text::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: -2rem;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 310 310"><path d="M79 142.16c-6.02 0-11.42.28-16.25.81 7.1-29.03 22.95-44.36 45.88-56.04 5.33-2.71 7.63-9.1 5.23-14.57l-6.04-13.77c-2.59-5.91-9.62-8.44-15.38-5.53-22.1 11.11-37.39 23.92-48.76 40.63C28.42 116.11 21 145.6 21 183.83v16.52c0 31.95.11 57.81 58 57.81 58 0 58-25.97 58-58s.38-58-58-58zm152 0c-6.02 0-11.42.28-16.25.81 7.1-29.03 22.95-44.36 45.88-56.04 5.33-2.71 7.63-9.1 5.23-14.57l-6.04-13.77c-2.59-5.91-9.62-8.44-15.38-5.53-22.1 11.11-37.39 23.92-48.76 40.63C180.42 116.11 173 145.6 173 183.83v16.52c0 31.95.11 57.81 58 57.81 58 0 58-25.97 58-58s.38-58-58-58z" fill="%23a0dee0"></path></svg>');
    background-size: contain;
    background-position: center center;
    width: 3rem;
    height: 3rem;
    opacity: .4;
    z-index: -1;
}

.post-blockquote-box-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 1rem;
}

.post-blockquote-box-name {
    margin-bottom: 0;
}

.post-blockquote-box-name::before {
    content: "";
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 1rem;
    height: 2px;
    background: #30bfc3;
    margin-right: 6px;

}

.post-blockquote-box-link {
    text-decoration: none;
}