.project-inline-detail:hover * {
    color: rgb(99, 110, 134);

}

/* Keep every service introduction visually connected to the page banner. */
.service_page .service-introduction {
    margin: 0;
    padding: 1.75rem 0 1.25rem;
}

.service_page .service-introduction .intro-section {
    padding: 0;
}

.service_page .service-introduction .title:first-child {
    margin-top: 0;
}

.service_page .service-introduction .intro-description > :last-child,
.service_page .service-introduction .intro-body > :last-child {
    margin-bottom: 0;
}

.service-rationale,
.service-rationale__toggle {
    margin-top: 1.25rem;
}

.service-rationale__toggle {
    align-items: center;
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: var(--border-radius);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: .875rem;
    font-weight: 700;
    justify-content: center;
    list-style: none;
    min-height: 2.75rem;
    padding: .65rem 1.1rem;
    transition: background-color .2s ease, color .2s ease;
}

.service-rationale__toggle:hover,
.service-rationale__toggle:focus-visible {
    background: #fff;
    color: var(--primary-color);
    outline: none;
}

.service-rationale__toggle:focus-visible {
    box-shadow: 0 0 0 3px var(--primary-color-light);
}

.service-rationale__hide {
    display: none;
}

.service-rationale__toggle[aria-expanded="true"] .service-rationale__show {
    display: none;
}

.service-rationale__toggle[aria-expanded="true"] .service-rationale__hide {
    display: inline;
}

.service-rationale__content {
    background: color-mix(in srgb, var(--primary-color) 4%, #fff);
    border-left: 4px solid var(--primary-color);
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    color: var(--text-color);
    line-height: 1.75;
    margin-top: 1rem;
    padding: 1.25rem 1.4rem;
}

.intro-section > .service-rationale__content {
    margin-top: 1.5rem;
}

.service-rationale__content h3 {
    color: var(--primary-color);
    font-size: 1.15rem;
    margin: 0 0 .75rem;
}

.service-rationale__content > :last-child {
    margin-bottom: 0;
}

/* The first content block should follow the introduction without a large void. */
.service_page .service-introduction + section {
    margin-top: 0;
    padding-top: 2rem;
}

@media screen and (max-width: 768px) {
    .service_page .service-introduction {
        padding: 1.25rem 0 1rem;
    }

    .service_page .service-introduction + section {
        padding-top: 1.5rem;
    }
}

.more-container {
    display: flex;;
    justify-content: space-between;
    align-items: center;
}


.application-item-detail {
    background-color: rgba(99, 110, 134, .5);
}


.application-item-title {
    background-color: rgba(99, 110, 134, .7);
}

.product-card {
    background: #102f2b;
    box-shadow: 0 8px 24px rgb(15 45 41 / 18%);
    height: 250px;
    border-radius: var(--border-radius);
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

.product-card:hover,
.product-card:focus-within {
    box-shadow: 0 14px 32px rgb(15 45 41 / 28%);
    transform: translateY(-3px);
}

.product-image {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
}

.product-content {
    background: linear-gradient(180deg, rgb(3 22 19 / 8%) 12%, rgb(3 22 19 / 58%) 58%, rgb(3 22 19 / 95%) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-end;
    padding: 1.25rem !important;
}

.product-content .icon {
    align-items: center;
    background: #fff;
    border-radius: 50%;
    color: var(--primary-color);
    display: inline-flex;
    font-size: 16px;
    height: 2rem;
    justify-content: center;
    margin: .8rem 0 0;
    padding: .5rem;
    width: 2rem;
}

.product-title {
    align-self: flex-start;
    background: rgb(3 27 24 / 82%);
    border-left: 4px solid #49c89a;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
    box-shadow: 0 6px 18px rgb(0 0 0 / 22%);
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.3;
    padding: .65rem .8rem;
    text-shadow: 0 1px 2px rgb(0 0 0 / 70%);
}

@media screen and (max-width: 768px) {
    .product-card {
        height: 280px;
    }

    .product-title {
        font-size: 1.1rem;
    }
}


.accordion__item.js-accordion-item {
    background-color: white;
    margin: 20px 0;
}

.accordion__item.js-accordion-item.active {
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02);
}


.accordion-header.js-accordion-header {
    display: flex;
    background: white;
    width: 100%;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 16px;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02);
}

.accordion-header.js-accordion-header:hover {
    color: #1a1a1a;

}

.accordion__item.js-accordion-item.active .accordion-header.js-accordion-header {
    background: #004a54;
    width: 100%;
    color: white;
}

.accordion__item.active .arrow-icon {
    transform: rotate(180deg);
    transition: transform 0.5s ease-in-out;
}

.accordion__item:not(.active) .arrow-icon {
    transform: rotate(0deg);
    transition: transform 0.5s ease-in-out;
}


.accordion-body.js-accordion-body {
    padding: 20px 30px;
    color: #4a4a4a;
}

.accordion-body.js-accordion-body .rich-text ul,
.accordion-body.js-accordion-body .rich-text ol {
    padding-left: 40px;
}

.accordion-body.js-accordion-body p,
.accordion-body.js-accordion-body li {
    font-size: 16px;
}

.accordion-body.js-accordion-body .rich-text li {
    list-style: square;
}

.accordion__item .icon {
    height: 20px;
    width: 20px;
}

.accordion__item .icon svg {
    height: 100%;
    width: 100%;
    fill: var(--text-color);
}


.accordion__item.js-accordion-item.active .icon svg {
    fill: #fff;
}