/* =========================
   BRAND VARIABLES
   (single source of truth — every color below now reads from here
   instead of six different hardcoded reds/blues scattered through
   the old file)
========================= */
:root {
    --navy: #1D659F;
    --navy-2: #124A75;
    --teal: #D93752;
    --teal-deep: #D93752;
    --amber: #E8A33D;
    --text-muted: #5A6B78;
    --border: #DCE3E8;
}
.navbar .nav-link{
    font-family:'Space Grotesk';
}
.contain-sub-1__title {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: .775rem;
    color: var(--bs-body-color);
}
.logo {
    --logo-height: 50px;
    height: var(--logo-height);
    display: flex;
    flex-shrink: 0;
}

/* =========================
   HERO
========================= */

.hero-2.gradient-hero {
    position: relative;
    height: 90vh;
    min-height: 650px;
    padding-top: 0;
    background-color: #ffffff;
    overflow: hidden;
}

/* Swiper's default pagination renders round dots. This overrides them to
   look like short horizontal dashes, with the active one colored red —
   matching the reference: [====][--][--] centered under the image. */

.hero-slider-pagination {
    position: static;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 80% !important;
    margin-left: auto;
}

.hero-slider-pagination .swiper-pagination-bullet {
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: #16213e;
    opacity: 1;
    margin: 0;
    transition: background 0.25s ease, width 0.25s ease;
    cursor: pointer;
}

.hero-slider-pagination .swiper-pagination-bullet-active {
    background: var(--teal);
    width: 24px;
}

/* =========================
   ACCORDION
========================= */
.accordion-home-5 .accordion-header {
    margin-bottom: 0;
    padding: 10px 0;
}

.accordion.accordion-home-5 .accordion-item {
    background: transparent;
    border: 0 !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

.accordion-button::after {
    display: none;
}

.custom-accordion-arrow {
    width: 18px;
    height: 18px;
    position: relative;
    margin-left: auto;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.custom-accordion-arrow::before {
    content: "";
    position: absolute;
    width: 17px;
    height: 1px;
    background: #52627a;
    top: 9px;
    left: 0;
}

.custom-accordion-arrow::after {
    content: "";
    position: absolute;
    width: 7px;
    height: 7px;
    border-top: 1px solid #52627a;
    border-right: 1px solid #52627a;
    transform: rotate(45deg);
    top: 6px;
    right: 0;
}

.accordion-button:not(.collapsed) .custom-accordion-arrow {
    transform: rotate(90deg);
}

.accordion-button:not(.collapsed) h5 {
    color: var(--teal) !important;
}

.accordion-button:not(.collapsed) p {
    color: #000 !important;
}

.accordion-button:not(.collapsed) .custom-accordion-arrow::before {
    background: var(--teal);
}

.accordion-button:not(.collapsed) .custom-accordion-arrow::after {
    border-color: var(--teal);
}

/* NOTE: this filter recolors a black source icon to match the OLD red
   (#cf0001). Swapping the brand red to var(--teal) (#D93752) means this
   filter will render slightly off — recomputing the exact filter() value
   for the new hex needs to be tuned visually against the real icon asset,
   which isn't available here. Left as-is; revisit once icons are in hand. */
.accordion-button:not(.collapsed) img {
    filter: brightness(0) saturate(100%) invert(38%) sepia(96%) saturate(1800%) hue-rotate(355deg) brightness(96%);
}

.accordion-item:has(.accordion-button:not(.collapsed)) .accordion-body {
    color: var(--teal);
}

.accordion-item:has(.accordion-button:not(.collapsed)) .accordion-body p {
    color: #000;
}

.accordion-home-5 .accordion-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--navy);
    flex-shrink: 0;
}

.accordion-home-5 .accordion-icon-wrap img {
    width: 35px;
    height: 35px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.accordion-button h5 {
    color: var(--navy);
}

.gradient-hero .position-relative {
    position: relative;
    height: 100%;
    z-index: 1;
}

.gradient-hero .swiper {
    width: 100%;
    height: 100%;
    padding: 100px 0;
}

.gradient-hero .swiper-wrapper {
    width: 100%;
    height: 100%;
}

.gradient-hero .swiper-slide {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gradient-hero .swiper-slide .container {
    height: 100%;
}

.gradient-hero .swiper-slide .row {
    height: 100%;
    align-items: center;
}

/* =========================
   TEXT
========================= */

.performance-title {
    margin-bottom: 0;
}

.performance-title .typing-text {
    display: inline-block;
    color: var(--teal);
    min-width: 10px;
}

.performance-title .typing-text::after,
.typing-text::after {
    content: "|";
    display: inline-block;
    margin-left: 3px;
    animation: blink 0.9s step-end infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* Generic .typing-text fallback for any typed element outside .performance-title.
   (Previously this was a stray unrelated cyan (#7ee8fa) that didn't match the
   brand palette anywhere on the page — now it inherits the brand navy.) */
.typing-text {
    color: var(--navy);
    display: inline-block;
    min-height: 1.2em;
}

/* =========================
   HERO IMAGE
========================= */

.hero-two-img-group {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.hero-two-img-group img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 200px 0 200px 0;
}

.gradient-hero {
    background: linear-gradient(100deg, #ffffff 0%, #ffffff 30%, #4888ba17 55%, #f9d9b7 75%, #d9375266 100%);
}

/* =========================
   MOBILE
========================= */

@media (max-width: 991.98px) {

    .hero-2.gradient-hero {
        height: auto;
        min-height: 90vh;
        padding-top: 100px;
        padding-bottom: 60px;
    }

    .gradient-hero .position-relative,
    .gradient-hero .swiper,
    .gradient-hero .swiper-wrapper,
    .gradient-hero .swiper-slide,
    .gradient-hero .swiper-slide .container,
    .gradient-hero .swiper-slide .row {
        height: auto;
    }

    .hero-two-img-group {
        height: auto;
        margin-top: 40px;
    }

    .hero-two-img-group img {
        width: 100%;
        height: 500px;
        object-fit: cover;
    }
}

.accordion.accordion-home-5 .border-0 {
    border: 0 solid rgba(8, 15, 44, .15) !important
}

.text-danger {
    --bs-text-opacity: 1;
    color: var(--teal) !important;
}

.expertise-section img {
    width: 100%;
}

.expertise-img-1 {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    border-radius: 120px 0 0 0;
}

.expertise-img-2 {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    border-radius: 0 120px 0 0 !important;
}

.expertise-img-3 {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
    border-radius: 0 0 0 120px !important;
}

.feedback-slider {
    width: 100% !important;
}

.feedback-slider .swiper-slide {
    width: 100% !important;
}

.feedback-slider .swiper-slide>.row {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.feedback-slider-wrap {
    position: relative;
}

.feedback-navs {
    position: absolute !important;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: 100%;
    z-index: 20;
    pointer-events: none;
}

.feedback-button-prev,
.feedback-button-next {
    pointer-events: auto;
    cursor: pointer;
}

.md-contents {
    font-style: italic;
    color: var(--teal) !important;
    font-size: 20px;
    margin-top: 40px;
}

.tech-partner {
    padding: 20px 35px;
}

.tech-partner:hover {
    box-shadow: none !important;
}

.tech-slide .col {
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
    background: #fff !important;
}

.tech-slide .col::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(358deg, transparent 0%, rgb(217 55 82 / 10%) 50%, rgb(179 43 66 / 10%) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    box-shadow: none;
}

.tech-slide .col:hover::before {
    opacity: 1;
}

.hover\:text-danger:hover {
    color: var(--teal) !important;
}

.pr-5 {
    padding-right: 150px;
}

.btn-theme {
    border-radius: 15px 0;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 30px;
}

.btn-theme-sm {
    border-radius: 10px 0;
    font-weight: 600;
    padding: 6px 15px;
    font-size: 12px;
}

.btn-outline-danger {
    border: 1px solid var(--teal);
}

.btn-outline-dark {
    border: 1px solid #000;
}

.solutionsGrid img, .blog-section img {
    object-fit: cover;
    filter: grayscale(100%);
    transition: border-radius 1s ease;
    height: 200px;
}

.solutionsGrid .card {
    background-color: rgb(241 245 249);
    border: 0;
    margin-bottom: 50px;
}

.solutionsGrid .card-header {
    padding: 0;
    background-color: rgb(241 245 249);
    border-bottom: 0;
}

.service-card {
    height: 200px;
}

.solutionsGrid .col-md-4:hover img, .blog-section .card:hover img {
    border-radius: 60px 0;
}

.solutionsGrid .col-md-4:hover h6 a, .blog-section .card:hover h6 a {
    color: var(--teal) !important;
    cursor: pointer;
}

.solutionsGrid .col-md-4:hover .btn-theme, .blog-section .card:hover .btn-theme {
    background-color: var(--teal);
    border: 1px solid var(--teal);
    color: #fff;
}

.solutionsGrid .card-body .title {
    height: 60px;
    margin-bottom: 10px;
}

.feature-list__card {
    transition: border-radius 1s ease, background-color .3s ease;
}

.feature-list__card:hover {
    border-radius: 60px 0;
    background-color: var(--navy);
}

.feature-list__card:hover p, .feature-list__card:hover h6 {
    color: #fff;
}

.MdMessage img {
    border-radius: 110px 0;
}

.contact-gradient {
    background-color: #ffffff;
    background-image:
        radial-gradient(circle at 0% 120%, rgba(29, 101, 159, 0.35) 0%, transparent 40%),
        radial-gradient(circle at 45% 110%, rgba(217, 55, 82, 0.25) 0%, transparent 45%);
}

.mini-title {
    margin-bottom: 2rem !important;
}

/* =========================
   BUSINESS VALUE FLOW LABEL
========================= */
.bv-flow {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 1.6rem 0 0;
}

.bv-flow .fword {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #fff;
    letter-spacing: .02em;
}

.bv-flow .arrow {
    color: var(--text-muted);
    font-size: 1.1rem;
}

/* Pill tabs — single definition (a duplicate, conflicting rule for this
   same selector used to exist further down the file and always won on
   the cascade, silently overriding this one; removed so there's one
   source of truth). */
.tab_11_pill .nav-link {
    background-color: #ffffff;
    border: 1px solid #eee;
    color: #000;
    position: relative;
    overflow: hidden;
}

.tab_11_pill .nav-link.active {
    background-color: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

.white-icons {
    filter: brightness(0) invert(1);
}

.w-80 {
    width: 80% !important;
}

/* =========================
   CONNECT/PROTECT/OPERATE/GROW
   — fixed light-theme interactive panel
========================= */
.vp-shell {
    background: #fff;
    border-radius: 16px;
    padding: 2.2rem;
}
.vp-tabs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vp-tab {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
    background: #FFFFFF;
    border: 1px solid #E3E8EE;
    border-left: 1px solid #E3E8EE;
    border-radius: 8px;
    padding: 1.15rem 1.3rem;
    cursor: pointer;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #1B2733;
    transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
    width: 100%;
}

.vp-tab:hover {
    transform: translateX(2px);
}

.vp-tab.active {
    border-left-color: var(--teal);
    box-shadow: 0 10px 26px -16px rgba(15, 30, 45, .28);
    background-color: #ffffff;
    color: #2969a0;
}

.vp-ic {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #e9f8fb;
    color: var(--teal);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vp-ic svg {
    width: 22px;
    height: 22px;
}
.vp-panel {
    background: transparent;
    border: 0;
    border-radius: 12px;
    padding: 2rem 2rem;
    min-height: 100%;
}

.vp-panel-content {
    display: none;
}

.vp-panel-content.active {
    display: block;
    animation: vpFade .35s ease;
}

@keyframes vpFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vp-num {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: .85rem;
    color: #377aaf;
    letter-spacing: .04em;
    display: block;
    margin-bottom: .8rem;
}
.vp-panel-content h3 {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #da3751;
    margin-bottom: 1.7rem;
}

.vp-block {
    margin-bottom: 1.9rem;
}

.vp-block:last-child {
    margin-bottom: 0;
}

.vp-label {
    font-size: 16px;
    font-weight: 700;
    font-family: "Space Grotesk", sans-serif;
    text-transform: uppercase;
    color: #26343f;
    margin-bottom: .6rem;
    display: block;
}

.vp-block p {
    font-size: .95rem;
    color: #4B5B67;
    line-height: 1.65;
    margin: 0;
    max-width: 640px;
}

.vp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

.vp-tag {
    font-size: .82rem;
    font-weight: 600;
    padding: 10px 25px;
    border-radius: 6px;
    background: #fff;
    border: 1px solid #eee;
    color: #12202f;
    display: inline;
    margin-bottom: 76px !important;
    height: 45px;
    line-height: 45px;
}
/* "Business value" tags now consistently use the navy half of the
   brand pair (previously a one-off blue, #24679f, that didn't match
   --navy anywhere else on the page). */
.vp-block.value .vp-tag {
    background: #EAF1F7;
    color: #12202f;
    border: 1px solid #D7E4EE;
}

@media (max-width: 991px) {
    .vp-tabs {
        flex-direction: row;
        overflow-x: auto;
        gap: .7rem;
    }

    .vp-tab {
        flex: 0 0 auto;
        white-space: nowrap;
        border-left: none;
        border-bottom: 4px solid transparent;
    }

    .vp-tab.active {
        border-left-color: transparent;
        border-bottom-color: var(--teal);
    }

    .vp-panel {
        margin-top: 1.2rem;
    }
}

:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

/* =========================
   LIFECYCLE STEPS (Assess → Optimise)
========================= */
.price-card-item-one:last-child {
    border-right: 0 !important;
}

/* SCROLL REVEAL */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .8s cubic-bezier(.16, .8, .3, 1), transform .8s cubic-bezier(.16, .8, .3, 1);
    transition-delay: var(--reveal-delay, 0s);
}

.reveal.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* HERO ENTRANCE */
.hero-anim {
    opacity: 0;
    transform: translateY(18px);
    animation: heroIn .8s cubic-bezier(.16, .8, .3, 1) forwards;
    animation-delay: var(--hero-delay, 0s);
}

@keyframes heroIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* nav underline hover */
.nav-link.custom {
    position: relative;
}

.nav-link.custom::after {
    content: "";
    position: absolute;
    left: .9rem;
    right: .9rem;
    bottom: .15rem;
    height: 2px;
    background: var(--teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
}

.nav-link.custom:hover::after {
    transform: scaleX(1);
}

.sol-card, .seg-card {
    transition: border-color .25s ease, transform .35s cubic-bezier(.16, .8, .3, 1), box-shadow .35s ease;
}

.sol-card:hover {
    box-shadow: 0 14px 30px -18px rgba(11, 30, 51, .35);
}

/* wheel node draw-in */
#wheelSteps .wnode {
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(.4);
    transition: opacity .5s ease, transform .5s cubic-bezier(.34, 1.56, .64, 1);
    transition-delay: var(--n-delay, 0s);
}

#wheelSteps .wnode.in-view {
    opacity: 1;
    transform: scale(1);
}

.wheel-ring {
    stroke-dasharray: 960;
    stroke-dashoffset: 960;
    transition: stroke-dashoffset 1.4s cubic-bezier(.16, .8, .3, 1);
}

.wheel-ring.in-view {
    stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }

    .reveal, .hero-anim {
        opacity: 1 !important;
        transform: none !important;
    }

    .wheel-ring {
        stroke-dashoffset: 0 !important;
    }

    #wheelSteps .wnode {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media screen and (max-width: 768px) {
    .gradient-hero .swiper {
        padding: 0;
    }

    .hero-two-img-group img {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 100px 0 100px 0;
    }

    .hero-2.gradient-hero {
        height: auto;
        min-height: 80vh;
        padding-top: 100px;
        padding-bottom: 0;
    }

    .expertise-img-1 {
        width: 100%;
        height: 250px;
        object-fit: cover;
        display: block;
        border-radius: 120px 0 0 0;
    }

    .expertise-img-2, .expertise-img-3 {
        height: 250px;
    }

    .partner-section-3__vertical-text {
        text-align: center;
    }

    .tech-partner {
        padding: 15px;
    }

    .justify-content-endss {
        justify-content: space-between !important;
    }

    .contact-gradient .pr-5 {
        padding-right: 0;
    }

    .mini-title {
        margin-bottom: 0.5rem !important;
    }
}

.text-primary {
    --bs-text-opacity: 1;
    color: var(--navy) !important;
}

.price-card-item-one:last-child {
    border-right: 1px solid #eee !important;
}

.why-item {
    display: flex;
    gap: 1.4rem;
    padding: 0.9rem 0;
}

.why-item .chk {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--teal) 16%, transparent);
    color: var(--teal-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: .1rem;
}

.why-item h4 {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .25rem;
}

.why-item p {
    color: var(--text-muted);
    font-size: .9rem;
    margin: 0;
}

.mv-band {
    background: linear-gradient(120deg, #fff 0%, #fff 100%);
    color: #fff;
    border-radius: 14px;
    padding: 2rem;
}

/* COMMITMENT PILLS */
.pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 0.2rem;
}

.pill {
    border: 1px solid #f1f1f1cf;
    border-radius: 999px;
    padding: .5rem 1.1rem;
    font-size: .87rem;
    font-weight: 600;
    color: #eeeeeecf;
    background: #143659;
}

.why-area-one .row.g-4>div {
    display: flex;
}

.why-area-one .why-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.why-card:hover h5 {
    color: var(--teal)  !important;
}
/* VALUE SERVICES */
.vs-alt {
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.vs-item {
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 1.8rem;
}

.vs-item:last-child {
    border-bottom: none;
}

.vs-item .idx {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    color: var(--teal);
    font-size: 1.6rem;
    min-width: 2.2rem;
}

.vs-item h6 {
  
    margin-bottom: .3rem;
    font-family:'Space Grotesk', sans-serif;
}

.vs-item p {
    color: var(--text-muted);
    font-size: 1.05rem;
    margin: 0;
    max-width: 560px;
}
.btn-dark {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1c65a1;
    --bs-btn-border-color: #1c65a1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #2d334c;
    --bs-btn-hover-border-color: #212741;
    --bs-btn-focus-shadow-rgb: 45, 51, 76;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #393f56;
    --bs-btn-active-border-color: #212741;
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #080f2c;
    --bs-btn-disabled-border-color: #080f2c;
}
.btn-outline-dark {
    border: 1px solid #1c65a1;
    --bs-btn-color: #1c65a1;
    --bs-btn-border-color: #1c65a1;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1c65a1;
    --bs-btn-hover-border-color: #1c65a1;
    --bs-btn-focus-shadow-rgb: 8, 15, 44;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1c65a1;
    --bs-btn-active-border-color: #1c65a1;
    --bs-btn-active-shadow: unset;
    --bs-btn-disabled-color: #1c65a1;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #1c65a1;
    --bs-gradient: none;
}
.text-dark {
    --bs-text-opacity: 1;
    color: rgb(28 101 161) !important;
}
h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 900;
    line-height: 1.2;
    color: #1c65a1;
}
.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgb(19 58 91) !important;
}


.service-details__image {
  height: 400px;
  overflow: hidden;
  border-radius: 10px;
}

.service-details__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.service-details__content {
  max-width: 1000px;
}

.service-details__content p {
  line-height: 1.8;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .service-details__image {
    height: 280px;
  }
}