/* ---------------------------------------------------------
   Dark expandable accordion cards — shared component
   Markup: .ac-wrap > .ac-eyebrow, .ac-title, .ac-list > .ac-item
           > .ac-trigger(.ac-question,.ac-icon svg) + .ac-body > .ac-answer
   Accent uses the site's brand blue (#296199), not the reference's red,
   to stay on the site's single-accent rule.
--------------------------------------------------------- */

.ac-wrap {
    background-color: #296199;
    border-radius: 20px;
    padding: 40px 32px;
    height: 100%;
    box-sizing: border-box;
}

.ac-title {
    color: #ffffff !important;
    padding-bottom: 28px !important;
}

.ac-trigger:hover {
    background-color: #296199 !important;
}

.ac-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ac-item {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ac-item:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.ac-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: none;
    color: #ffffff;
    padding: 20px 0;
    cursor: pointer;
    text-align: right;
    font-family: inherit;
}

.ac-question {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
}

.ac-icon {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}
.ac-icon svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.3s ease;
}

.ac-item.is-open .ac-icon {
    background-color: #296199;
    border-color: #296199;
}
.ac-item.is-open .ac-icon svg {
    transform: rotate(180deg);
}

.ac-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.3s ease;
}
.ac-item.is-open .ac-body {
    opacity: 1;
}

.ac-answer {
    color: rgba(255, 255, 255, 0.65);
    font-size: 15px;
    line-height: 1.75;
    margin: 0 0 16px;
}
.ac-answer:last-child {
    margin-bottom: 0;
    padding-bottom: 22px;
}

.ac-answer-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    color: rgba(255, 255, 255, 0.65);
    font-size: 15px;
    line-height: 1.9;
}
.ac-answer-list li {
    position: relative;
    padding-right: 18px;
}
.ac-answer-list li::before {
    content: "";
    position: absolute;
    right: 0;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #296199;
}

@media (max-width: 767px) {
    .ac-wrap {
        padding: 28px 22px;
    }
    .ac-title {
        font-size: 22px;
    }
}
/* ---------------------------------------------------------
   rs-accordion widget — force the toggle icon to the left
   site-wide, active or collapsed, overriding icon_align=right.
   Elementor writes a per-widget rule for this
   (.elementor-<postId> .elementor-element-<id> ... .elementor-accordion-icon
   { right: 0 !important }) on every page, which outweighs a
   normal selector here — the repeated class below matches its
   specificity so this rule wins regardless of page/widget id.
--------------------------------------------------------- */
div.rs-accordion-area .accordion-header .elementor-accordion-icon-right.elementor-accordion-icon-right.elementor-accordion-icon-right.elementor-accordion-icon-right.elementor-accordion-icon-right.elementor-accordion-icon-right {
    left: 0 !important;
    right: auto !important;
}
/* ---------------------------------------------------------
   iconbox-top-center — assign to an rs-iconbox widget in
   Elementor (Advanced > CSS Classes) for a top icon, centered
   title layout.
--------------------------------------------------------- */
.iconbox-top-center .rs-iconbox-area .box-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 16px !important;
}
.iconbox-top-center .rs-iconbox-area .box-inner .icon-area {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    background-color: #EEF3FA !important;
    color: #296199 !important;
    transition: background-color 0.25s ease, color 0.25s ease !important;
}
.iconbox-top-center .rs-iconbox-area .box-inner .icon-area svg {
    width: 28px !important;
    height: 28px !important;
}
.iconbox-top-center .rs-iconbox-area .box-inner .icon-area svg path {
    fill: currentColor !important;
}
.iconbox-top-center .rs-iconbox-area .box-inner .icon-area i {
    font-size: 28px !important;
    color: currentColor !important;
}
.iconbox-top-center .rs-iconbox-area .box-inner:hover .icon-area {
    background-color: #296199 !important;
    color: #ffffff !important;
}
.iconbox-top-center .rs-iconbox-area .box-inner .text-area .title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #121933 !important;
}
.iconbox-top-center .rs-iconbox-area .box-inner .text-area p {
    text-align: center !important;
}
/* ---------------------------------------------------------
   iconbox-card — assign to an rs-iconbox widget in Elementor
   (Advanced > CSS Classes) for a horizontal rounded card with
   a small rounded-square icon badge next to title + text.
--------------------------------------------------------- */
.iconbox-card .rs-iconbox-area .box-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    background-color: #EBF0FF !important;
    border-radius: 12px !important;
    padding: 20px !important;
}
.iconbox-card .rs-iconbox-area .box-inner .icon-area {
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 12px !important;
    background-color: #296199 !important;
    color: #ffffff !important;
}
.iconbox-card .rs-iconbox-area .box-inner .icon-area svg {
    width: 20px !important;
    height: 20px !important;
}
.iconbox-card .rs-iconbox-area .box-inner .icon-area svg path {
    fill: currentColor !important;
}
.iconbox-card .rs-iconbox-area .box-inner .icon-area i {
    font-size: 20px !important;
    color: currentColor !important;
}
.iconbox-card .rs-iconbox-area .box-inner .text-area .title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #121933 !important;
    margin-bottom: 6px !important;
}
.iconbox-card .rs-iconbox-area .box-inner .text-area p {
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #5C6B85 !important;
    margin: 0 !important;
}
/* ---------------------------------------------------------
   iconbox-dark-card — assign to an rs-iconbox widget in
   Elementor (Advanced > CSS Classes). Dark card, small icon
   at the top (right side in RTL), title + description below.
--------------------------------------------------------- */
.iconbox-dark-card .rs-iconbox-area .box-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    background-color: #0D173F !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
}
.iconbox-dark-card .rs-iconbox-area .box-inner .icon-area {
    width: 32px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
    color: #296199 !important;
}
.iconbox-dark-card .rs-iconbox-area .box-inner .icon-area svg {
    width: 30px !important;
    height: 30px !important;
}
.iconbox-dark-card .rs-iconbox-area .box-inner .icon-area svg path {
    fill: currentColor !important;
}
.iconbox-dark-card .rs-iconbox-area .box-inner .icon-area i {
    font-size: 28px !important;
    color: currentColor !important;
}
.iconbox-dark-card .rs-iconbox-area .box-inner .text-area .title {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin-bottom: 8px !important;
}
.iconbox-dark-card .rs-iconbox-area .box-inner .text-area p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    color: rgba(255, 255, 255, 0.65) !important;
    margin: 0 !important;
}
/* ---------------------------------------------------------
   image-overlay-card / image-overlay-card-content — assign in
   Elementor (Advanced > CSS Classes):
   - image-overlay-card: on the outer Container that has a
     background image set (Elementor's own Background control).
   - image-overlay-card-content: on the inner Container that
     follows it (its Position:Absolute setting is cancelled
     below — it now sits in normal flow, pinned to the bottom
     as a solid content block under the visible photo, not a
     glass overlay on top of it).
--------------------------------------------------------- */
.image-overlay-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 16px !important;
    min-height: 420px !important;
    background-size: cover !important;
    background-position: center top !important;
    border: 1px solid #E8E9FF !important;
    box-shadow: 0 8px 24px rgba(18, 25, 51, 0.1) !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}
.image-overlay-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 36px rgba(18, 25, 51, 0.16) !important;
}
.image-overlay-card-content {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 160px !important;
    margin-top: auto !important;
    background-color: #ffffff !important;
    border-radius: 15px !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: 0 -4px 16px rgba(18, 25, 51, 0.06) !important;
    padding: 20px 24px !important;
}
/* Both the global heading component rules and Elementor's own
   per-widget-instance CSS set font-size/margin on .title with
   !important at higher specificity than a plain selector here —
   the repeated class matches/beats both regardless of widget id. */
.image-overlay-card-content .title-inner .title.title.title.title.title.title {
    color: #0D1F30 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
}
.image-overlay-card-content .description.description.description.description.description.description {
    color: #6E7D91 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
}
.elementor-17137 .elementor-element.elementor-element-b777a36 .prelements-heading,
.elementor-17137 .elementor-element.elementor-element-1fe032f .prelements-heading,
.elementor-17137 .elementor-element.elementor-element-34fee06 .prelements-heading {
    display: flex !important;
    justify-content: space-evenly !important;
    align-items: center !important;
    flex-direction: column !important;
    height: 100% !important;
}
/* ---------------------------------------------------------
   card-offer — services grid, shared across all service pages
--------------------------------------------------------- */
.card-offer .rs-addon-services {
    height: 100% !important;
}
.card-offer .rs-addon-services .services-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 260px !important;
    background-color: #ffffff !important;
    border: 1px solid #E8E9FF !important;
    /* border-top: 3px solid #296199 !important; */
    border-radius: 16px !important;
    box-shadow: 0 4px 16px rgba(18, 25, 51, 0.05) !important;
    padding: 36px 30px !important;
    text-align: center !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}
.card-offer .rs-addon-services .services-inner:hover {
    box-shadow: 0 4px 12px rgba(18, 25, 51, 0.12) !important;
}
.card-offer .rs-addon-services .content_part {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex: 1 1 auto !important;
}
.card-offer .rs-addon-services .media_wrap .icon_style {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    background-color: #EEF3FA !important;
    color: #296199 !important;
    margin-bottom: 20px !important;
    transition: background-color 0.25s ease, color 0.25s ease !important;
}
.card-offer .rs-addon-services .services-inner:hover .media_wrap .icon_style {
    background-color: #296199 !important;
    color: #ffffff !important;
}
.card-offer .rs-addon-services .media_wrap .icon_style svg {
    width: 30px !important;
    height: 30px !important;
    fill: currentColor !important;
}
.card-offer .rs-addon-services .media_wrap .icon_style svg path {
    fill: currentColor !important;
}
.card-offer .rs-addon-services .services-title .title {
    font-size: 19px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
}
.card-offer .rs-addon-services .services-title .title a {
    color: inherit !important;
}
.card-offer .rs-addon-services .desc-text {
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #5C6B85 !important;
    margin-top: auto !important;
}

@media (max-width: 767px) {
    .card-offer .rs-addon-services .services-inner {
        min-height: 0 !important;
        padding: 28px 24px !important;
    }
}

/* style7 — numbered differentiator cards, equal height in a row */
.elementor-widget-rs-service-grid,
.elementor-widget-rs-service-grid > .elementor-widget-container {
    height: 100% !important;
}
.rs-addon-services.style7 {
    height: 100% !important;
}
.rs-addon-services.style7 .services-inner {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}
.rs-addon-services.style7 .content_part {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}/* ---------------------------------------------------------
   Horizontal connected stepper — shared component
   Markup: .hstep-wrap > .hstep-item* > .hstep-circle(.hstep-num,.hstep-check)
           + .hstep-title + .hstep-desc
   Steps fill in sequence (brand blue) as the section scrolls into view.
--------------------------------------------------------- */

.hstep-wrap {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.hstep-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 12px;
}

.hstep-item:not(:first-child)::before {
    content: "";
    position: absolute;
    top: 24px;
    right: -50%;
    width: 100%;
    height: 2px;
    background: #E3E8F2;
    z-index: 0;
    transition: background-color 0.4s ease;
}
.hstep-item.is-done:not(:first-child)::before {
    background: #296199;
}

.hstep-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #E3E8F2;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 17px;
    color: #8B93A7;
    position: relative;
    z-index: 1;
    flex: 0 0 48px;
    transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.hstep-item.is-active .hstep-circle {
    border-color: #296199;
    color: #296199;
}
.hstep-item.is-done .hstep-circle {
    background: #296199;
    border-color: #296199;
    color: #ffffff;
}

.hstep-check {
    display: none;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.hstep-item.is-done .hstep-num {
    display: none;
}
.hstep-item.is-done .hstep-check {
    display: block;
}

.hstep-title {
    margin: 16px 0 6px;
    font-size: 16px;
    font-weight: 700;
    color: #8B93A7;
    transition: color 0.35s ease;
}
.hstep-item.is-active .hstep-title,
.hstep-item.is-done .hstep-title {
    color: #0D1F30;
}

.hstep-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #6E7D91;
    max-width: 190px;
    margin: 0;
}

@media (max-width: 767px) {
    .hstep-wrap {
        flex-direction: column;
        align-items: stretch;
    }
    .hstep-item {
        flex-direction: row;
        text-align: right;
        align-items: flex-start;
        padding: 0 0 28px;
        gap: 16px;
    }
    .hstep-item:not(:first-child)::before {
        top: 48px;
        right: 23px;
        width: 2px;
        height: calc(100% - 20px);
    }
    .hstep-title,
    .hstep-desc {
        margin: 0 0 4px;
        max-width: none;
    }
}

/* ---------------------------------------------------------
   Global heading component spacing + sizing (rs-heading /
   .prelements-heading). Hero has its own heading markup and
   is intentionally excluded — stays full-width, its own scale.
   Elementor writes a per-widget-instance rule for spacing
   (margin-bottom on subtitle/title) with !important at higher
   specificity than a plain selector, so the repeated class
   below matches its specificity to win regardless of widget id.
--------------------------------------------------------- */

/* .prelements-heading .title-inner h2.title {
    font-size: 34px !important;
}
.prelements-heading .title-inner .title.title.title.title {
    margin-bottom: 18px !important;
} */

.prelements-heading.center .description {
    max-width: 700px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 1024px) {
    .prelements-heading .title-inner .title {
        font-size: 30px !important;
    }
}
@media (max-width: 767px) {
    .prelements-heading .title-inner .title {
        font-size: 24px !important;
    }
    .prelements-heading .description {
        font-size: 14px !important;
    }
}

/* ---------------------------------------------------------
   full-height-image — assign to an rs-image (or native Image)
   widget's Container in Elementor (Advanced > CSS Classes) to
   make it fill the full height of its row, matching a sibling
   column (e.g. an accordion, a taller text block). Works on any
   page, no per-instance CSS needed.

   Elementor's flex rows don't reliably stretch children with
   plain align-items:stretch (seen repeatedly across pages) —
   :has() switches the row itself to grid, which does stretch
   correctly, the moment it contains a .full-height-image child.
--------------------------------------------------------- */
.e-con:has(> .full-height-image) {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: stretch !important;
}
.full-height-image,
.full-height-image .elementor-widget-container,
.full-height-image .elementor-widget-rs-image,
.full-height-image .elementor-widget-image,
.full-height-image .rs-image {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
.full-height-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}