/***
=============================================
    Content section fixes
    Loaded after responsive.css so these win.

    Overrides for template sections that we have filled with more content
    than the original demo markup carried. Keep template files untouched and
    add adjustments here.
=============================================
***/
.slogan-left-content {
    padding: 34px 30px;
}

.slogan-left-content h5,
.slogan-left-content h3,
.slogan-left-content p {
    color: #ffffff;
}

.slogan-left-content h5 {
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    opacity: 0.92;
}

/* Base rule is `padding: 41px 0 41px 30px`, which only centres a lone
   heading. With copy above and below it, the block owns the spacing. */
.slogan-left-content h3 {
    font-size: 26px;
    line-height: 36px;
    padding: 0;
    margin-bottom: 12px;
}

.slogan-left-content p {
    font-size: 15px;
    line-height: 26px;
    margin-bottom: 0;
}

/* Two buttons where the template had one: lay them out as a wrapping row so
   they sit side by side when there is room and stack when there is not. */
.slogan-area .inner-content .right-content .button {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Trimmed from `18px 40px` so both buttons fit the 370px (and, further down,
   310px) action box without wrapping. */
.slogan-area .inner-content .right-content .button .btn-one {
    padding: 14px 24px;
    font-size: 13px;
}



@media only screen and (min-width: 1200px) {

    .slogan-left-content {
        padding-right: 130px;
    }


    .slogan-area .inner-content .right-content.with-btn {
        top: 50%;
        transform: translateY(-50%);
        padding: 32px 0 32px 29px;
    }
}


/***
=============================================
    Project detail: video section
=============================================
***/

.project-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
    overflow: hidden;
}

.project-video iframe,
.project-video video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.project-video video {
    object-fit: contain;
}


/***
=============================================
    Centered hero slide
=============================================
***/
/* The template caps the bracket image at the demo copy's 970x247 and pins it
   to the left edge, so a longer CMS title ran out past its right side. Keep
   the caption at the bracket's width so the copy wraps, and stretch the
   bracket to whatever height the wrapped copy needs. The bottom offset keeps
   the button sitting in the gap of the bracket's bottom edge. */
.rev_slider_wrapper .slide-content.middle-slide {
    box-sizing: border-box;
    width: 970px !important;
    max-width: calc(100vw - 40px);
    white-space: normal !important;
}

.rev_slider_wrapper .slide-content.middle-slide:before {
    right: 0;
    bottom: 62px;
    max-width: none;
    max-height: none;
    width: auto;
    height: auto;
}


/***
=============================================
    Focus area cards (below the homepage slider)
=============================================
***/
.call-toaction-area ul.focus-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.call-toaction-area ul.focus-cards li.focus-card {
    float: none;
    flex: 1 1 0;
    max-width: 360px;
    min-width: 0;
    overflow: hidden;
}

/* The uploaded photo sits behind the card text, blurred and washed out with
   white so it reads as a misty backdrop rather than competing with the text.
   Shared by the focus-area cards and the impact-stat cards. The parent needs
   position: relative and a z-index so the -1 layer stays inside the card. */
.misty-bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
}

.misty-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: blur(2px) saturate(0.85);
    transform: scale(1.08);
    transition: transform 600ms ease, filter 600ms ease;
}

.misty-bg::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255, 255, 255, 0.72);
}

.focus-card:hover .misty-bg img,
.stat-card:hover .misty-bg img {
    transform: scale(1.14);
    filter: blur(3px) saturate(0.85);
}

/* Title sits in the vertical middle of the card instead of relying on the
   old 128px icon glyph for its height. */
.call-toaction-area ul li.focus-card .content-box,
.call-toaction-area ul li.focus-card .content-box .icon-holder {
    height: 100%;
}

.call-toaction-area ul li.focus-card .content-box .icon-holder .title {
    display: flex;
    align-items: center;
    justify-content: center;
}

.call-toaction-area ul li.focus-card .content-box .icon-holder h3 {
    padding: 0;
    margin: 0;
}

/* The hover panel stays translucent so the misty photo still shows through. */
.call-toaction-area ul li.focus-card .content-box .overlay-box {
    background: rgba(255, 255, 255, 0.911);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-width: 767px) {
    .call-toaction-area ul.focus-cards {
        flex-direction: column;
        align-items: center;
    }

    .call-toaction-area ul.focus-cards li.focus-card {
        flex: none;
        width: 100%;
        max-width: 320px;
    }
}


/***
=============================================
    Impact stat cards
=============================================
***/

.landscape-steps ul.stat-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

.landscape-steps ul.stat-cards li.stat-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    float: none;
    flex: 1 1 0;
    max-width: 360px;
    min-width: 0;
    margin: 0;
    padding: 36px 20px;
    border: 1px solid #f2f2f2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.landscape-steps ul.stat-cards li.stat-card h3 {
    margin-top: 13px;
}

.landscape-steps ul.stat-cards li.stat-card p {
    margin: 0;
}

@media only screen and (max-width: 767px) {
    .landscape-steps ul.stat-cards {
        flex-direction: column;
        align-items: center;
    }

    .landscape-steps ul.stat-cards li.stat-card {
        flex: none;
        width: 100%;
        max-width: 320px;
    }
}

/***
=============================================
    News & Updates filter
    Active states take the theme colour from .thm-clr / .thm-bg-clr in the
    markup, so the colour themes keep working.
=============================================
***/
.news-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 30px;
    padding: 14px 20px;
    background: #f9f9f9;
    border-radius: 6px;
    font-size: 15px;
}

.news-filter-bar a {
    font-weight: 600;
    white-space: nowrap;
}

.single-sidebar .categories li.active a,
.single-sidebar .categories li.active a:before {
    color: inherit;
    font-weight: 600;
}

.single-sidebar .popular-tag li a.active {
    color: #ffffff;
    border-color: transparent;
}

.single-sidebar .popular-tag li a.active i {
    margin-left: 4px;
    font-size: 12px;
}

.news-tags {
    margin: 20px -3px 0;
}

.news-tags li {
    display: inline-block;
    margin: 0 3px 10px;
}

.news-tags li a {
    display: block;
    padding: 4px 12px;
    color: #848484;
    font-size: 15px;
    border: 1px solid #f0f0f0;
    border-radius: 2px;
    transition: all 300ms ease;
}

.news-tags li a:hover {
    color: #222222;
    border-color: #c5c5c5;
}

#blog-area .pagination {
    flex-wrap: wrap;
    margin-top: 10px;
}

#blog-area .pagination .page-item.active .page-link {
    color: #ffffff;
    background-color: #222222;
    border-color: #222222;
}

#blog-area .pagination .page-link {
    color: #222222;
}

/* News & Updates video: reuses the .project-video 16:9 frame */
.news-video {
    margin-bottom: 30px;
}

.news-video-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    z-index: 2;
    padding: 5px 12px;
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-radius: 3px;
    pointer-events: none;
}

.news-video-badge i {
    margin-right: 5px;
    font-size: 11px;
}