/* =========================================================================
   What we offer.

   Built to the reference: a plain card — picture on top, a badge overlapping
   its lower edge, the label, the title, then a bordered footer carrying the
   way in.

   What was there fought itself. A teal band cut diagonally across every card
   at an angle, the picture bled past the card's own edges, a ringed circle
   sat over the join, and the arrow was a red flag notched into the bottom
   corner. Four shapes, no two agreeing on where the card ended.

   Nothing here moves markup. The band, the notch and the flag are drawn by
   pseudo-elements, and pseudo-elements can be switched off.
   ========================================================================= */

.pad-all-bt {
    padding: 78px 0 84px;
}

/* -------------------------------------------------------------------------
   The heading.
   ------------------------------------------------------------------------- */

.pad-all-bt .quote-wrapper-all h2 {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--elite-navy, #02135b);
    margin-bottom: 14px;
}

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

/* -------------------------------------------------------------------------
   The card.
   ------------------------------------------------------------------------- */

.ft-service-innerbox-3 {
    background: #fff;
    border: 1px solid #e6e9f2;
    border-radius: 14px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.ft-service-innerbox-3:hover {
    transform: translateY(-6px);
    border-color: transparent;
    box-shadow: 0 26px 50px -28px rgba(2, 19, 91, .45);
}

/* The picture, kept inside the card at one shape for every card. */
.ft-service-innerbox-3 .ft-service-img {
    height: 210px;
    margin: 0;
    overflow: hidden;
}

.ft-service-innerbox-3 .ft-service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.ft-service-innerbox-3:hover .ft-service-img img {
    transform: scale(1.05);
}

/* The same utility sits on the picture and the body; neither should be
   taken out of the flow now the card is a plain stack. */
.ft-service-innerbox-3 .ft-service-img,
.ft-service-innerbox-3 .ft-service-text-icon,
.ft-service-innerbox-3 .ft-service-text {
    position: relative !important;
}

/* The diagonal band, and the notch that carried it. */
.ft-service-innerbox-3 .ft-service-img::before,
.ft-service-innerbox-3 .ft-service-text-icon::before,
.ft-service-innerbox-3 .ft-service-text-icon::after {
    display: none;
}

/* -------------------------------------------------------------------------
   The body.
   ------------------------------------------------------------------------- */

.ft-service-innerbox-3 .ft-service-text-icon {
    position: relative;
    /* top, not just margin. The original pulls this block 70px up over the
       picture and gives back the space with a negative margin below; clearing
       the margin alone left the title sitting on the photograph. */
    top: auto;
    max-width: none;
    margin: 0;
    padding: 26px 24px 20px;
    background: transparent;
    box-shadow: none;
    transform: none;
    clip-path: none;
}

/* The round mark, lifted to straddle the picture's edge the way the
   reference's date badge does, rather than floating over the middle of a
   band that no longer exists. */
.ft-service-innerbox-3 .ft-service-icon {
    position: absolute !important;
    top: -34px;
    left: 24px;
    right: auto;
    width: 68px;
    height: 68px;
    margin: 0;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 10px 24px -12px rgba(2, 19, 91, .5);
    transition: transform .3s ease;
}

.ft-service-innerbox-3:hover .ft-service-icon {
    transform: translateY(-4px);
}

.ft-service-innerbox-3 .ft-service-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.ft-service-innerbox-3 .ft-service-text {
    padding: 12px 0 0;
}

.ft-service-innerbox-3 .ft-service-text h3 {
    margin: 0 0 6px;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}

.ft-service-innerbox-3 .ft-service-text h3 a {
    color: var(--elite-navy, #02135b);
    transition: color .2s ease;
}

.ft-service-innerbox-3:hover .ft-service-text h3 a {
    color: var(--elite-red, #e80719);
}

.ft-service-innerbox-3 .ft-service-text p {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: #5b6478;
}

/* -------------------------------------------------------------------------
   The footer.

   The reference rules a line under the card and puts what you do next below
   it. Ours was a red flag notched into the corner, hanging off the card.
   ------------------------------------------------------------------------- */

.ft-service-innerbox-3 .more-btn {
    /* !important, because the element carries Bootstrap's .position-absolute
       in the markup and that utility is declared !important. Without it the
       arrow floated in the middle of the card, above its own title. */
    position: static !important;
    width: auto;
    height: auto;
    margin: 18px 24px 0;
    padding: 14px 0 18px;
    border-top: 1px solid #eef0f6;
    background: transparent;
}

.ft-service-innerbox-3 .more-btn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    background: #f4f6fa;
    color: var(--elite-navy, #02135b);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

/* The flag's notch. */
.ft-service-innerbox-3 .more-btn a::before,
.ft-service-innerbox-3 .more-btn a::after {
    display: none;
}

.ft-service-innerbox-3 .more-btn a:hover {
    background: var(--elite-red, #e80719);
    color: #fff;
    transform: translateX(4px);
}

.ft-service-innerbox-3 .more-btn a i {
    font-size: 14px;
    margin: 0;
    color: inherit;
}

/* -------------------------------------------------------------------------
   The carousel.
   ------------------------------------------------------------------------- */

.pad-all-bt .service-slider .owl-item > div {
    padding: 6px 0 14px;
}

.pad-all-bt .owl-dots {
    margin-top: 18px;
}

.pad-all-bt .owl-dots .owl-dot span {
    width: 9px;
    height: 9px;
    background: #d4d9e6;
    transition: background .2s ease, width .2s ease;
}

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

@media (max-width: 575px) {
    .pad-all-bt {
        padding: 56px 0 60px;
    }

    .pad-all-bt .quote-wrapper-all h2 {
        font-size: 30px;
    }
}