/* =========================================================================
   Testimonials.

   Built to the reference: the heading holds the left, the quote runs beside
   it — a round portrait, then the words, the name and the role. Flat on the
   page, no card, no banner.

   What was there: a red banner angled across the top of each card with the
   name, role and stars on it, a portrait in a thick red ring hanging off the
   corner, and the quote itself in the white below — the person named twice
   as loudly as the thing they said.

   Nothing here moves markup. The portrait is ordered ahead of the words
   rather than lifted out of them, and the banner is unpinned rather than
   deleted.
   ========================================================================= */

.testimonial-wrapper-all {
    background: #fff;
    padding: 84px 0;
}

/* -------------------------------------------------------------------------
   Two columns: what the section is, and what somebody said.
   ------------------------------------------------------------------------- */

.testimonial-wrapper-all > .container {
    display: flex;
    align-items: center;
    gap: 60px;
}

.testimonial-wrapper-all .quote-wrapper-all {
    flex: 0 0 320px;
    max-width: 320px;
    text-align: left;
}

.testimonial-wrapper-all .testimonial-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.testimonial-wrapper-all .quote-wrapper-all h2 {
    margin: 0 0 18px;
    font-size: 44px;
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--elite-navy, #02135b);
    text-align: left;
}

.testimonial-wrapper-all .heading-divider {
    display: block;
    width: 54px;
    height: 3px;
    margin: 0;
    border: 0;
    border-radius: 3px;
    background: var(--elite-red, #e80719);
}

/* -------------------------------------------------------------------------
   The quote.

   The card, the banner and the ring all go. What is left is a portrait, the
   words, and who said them.
   ------------------------------------------------------------------------- */

/* Grid, not flex. The three parts are siblings, so a row put the quote, the
   portrait and the name side by side as three columns; the portrait needs to
   span both rows with the words stacked beside it, and there is no wrapper
   to do that with. */
.testimonial-wrapper-all .testimonial-new-section {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
        "portrait quote"
        "portrait who";
    align-items: center;
    column-gap: 30px;
    row-gap: 14px;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

/* The notch that pointed at the banner's corner. */
.testimonial-wrapper-all .testimonial-new-section::after {
    display: none;
}

/* The portrait, ahead of the words rather than hanging off a corner. */
.testimonial-wrapper-all .testimonial-new {
    grid-area: portrait;
    align-self: center;
    position: static;
    width: 104px;
    height: 104px;
    margin: 0;
    border: 0;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 14px 30px -14px rgba(2, 19, 91, .4);
}

.testimonial-wrapper-all .testimonial-new img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.testimonial-wrapper-all .testimonial-quote-content {
    grid-area: quote;
    align-self: end;
    padding: 0;
}

.testimonial-wrapper-all .testimonial-quote-content p {
    margin: 0;
    font-size: 19px;
    line-height: 1.6;
    color: #2a3350;
    font-weight: 500;
}

/* The quote mark sits with the words rather than above them. */
.testimonial-wrapper-all .testimonial-new-section .la.la-quote-left {
    display: block;
    margin-bottom: 10px;
    font-size: 26px;
    color: var(--elite-red, #e80719);
    opacity: .5;
}

/* -------------------------------------------------------------------------
   Who said it.

   The banner was pinned above the card at a negative offset with a fixed
   300x110 box. Unpinned, it becomes a line of text under the quote.
   ------------------------------------------------------------------------- */

.testimonial-wrapper-all .testimonial-info {
    grid-area: who;
    align-self: start;
    position: static;
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin-top: 16px;
    padding: 0;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    /* The original says space-between, which held the name and the stars at
       opposite ends of a 300px banner. Across the width of a slide it threw
       the stars against the edge and cut the last one in half. */
    justify-content: flex-start;
    gap: 18px;
    flex-wrap: wrap;
}

.testimonial-wrapper-all .testimonial-info h4 {
    margin: 0;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--elite-navy, #02135b);
}

/* The role is marked up as an h2, which is why it needs naming here to stop
   it shouting over the name above it. */
.testimonial-wrapper-all .testimonial-info h2 {
    margin: 2px 0 0;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8a92a8;
}

.testimonial-wrapper-all .testimonial-info .tour_star {
    color: #f5a623;
    font-size: 13px;
    letter-spacing: 1px;
    white-space: nowrap;
}

/* The stars sit next to the name, not at the far end of the row. Given the
   gap to grow into they were pushed against the edge of the slide and the
   last one was cut in half. */
.testimonial-wrapper-all .testimonial-info > div:first-child {
    flex: 0 0 auto;
}

.testimonial-wrapper-all .testimonial-info > div + div {
    padding-bottom: 2px;
}

/* -------------------------------------------------------------------------
   The slide itself.

   Owl gives each item a width it worked out at load. The card inside had a
   fixed height and margins of its own; without them the item is only as
   tall as the quote.
   ------------------------------------------------------------------------- */

.testimonial-wrapper-all .owl-item > div {
    padding: 0;
}

.testimonial-wrapper-all .testimonial-wrap {
    padding: 0;
}

/* -------------------------------------------------------------------------
   Narrower screens: the heading goes back on top.
   ------------------------------------------------------------------------- */

@media (max-width: 991px) {
    .testimonial-wrapper-all > .container {
        display: block;
    }

    .testimonial-wrapper-all .quote-wrapper-all {
        max-width: none;
        margin-bottom: 34px;
        text-align: center;
    }

    .testimonial-wrapper-all .quote-wrapper-all h2 {
        text-align: center;
        font-size: 34px;
    }

    .testimonial-wrapper-all .heading-divider {
        margin: 0 auto;
    }
}

@media (max-width: 575px) {
    .testimonial-wrapper-all {
        padding: 58px 0;
    }

    /* Still a grid, one column. display: block would hand it back to the
       order in the markup, which puts the quote before the face. */
    .testimonial-wrapper-all .testimonial-new-section {
        grid-template-columns: 1fr;
        grid-template-areas:
            "portrait"
            "quote"
            "who";
        justify-items: center;
        text-align: center;
        row-gap: 18px;
    }

    .testimonial-wrapper-all .testimonial-new {
        margin: 0;
    }

    .testimonial-wrapper-all .testimonial-quote-content,
    .testimonial-wrapper-all .testimonial-info {
        align-self: auto;
        margin-top: 0;
    }

    .testimonial-wrapper-all .testimonial-info {
        justify-content: center;
        text-align: center;
    }

    .testimonial-wrapper-all .testimonial-quote-content p {
        font-size: 17px;
    }
}

/* -------------------------------------------------------------------------
   The dots.

   Owl draws them as empty spans and leaves the look to the theme; nothing
   here styled them, so they computed to width: auto on a transparent ground
   — invisible, and with no difference between the active one and the rest.
   ------------------------------------------------------------------------- */

.testimonial-wrapper-all .owl-dots {
    margin-top: 26px;
    text-align: center;
}

.testimonial-wrapper-all .owl-dots .owl-dot span {
    display: block;
    width: 9px;
    height: 9px;
    margin: 0 4px;
    background: #d4d9e6;
    border-radius: 50%;
    transition: background .2s ease, width .2s ease;
}

.testimonial-wrapper-all .owl-dots .owl-dot.active span {
    width: 24px;
    border-radius: 6px;
    background: var(--elite-red, #e80719);
}