.about-page { background: #fff; }
    /* Breadcrumb / navigation: restrained text interaction */
    .category-banner {
        padding: 20px 0;
        background: #172033;
        color: #fff
    }

        .category-banner .mini-nav {
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
            color: #cdd5df
        }

        .category-banner a {
            position: relative;
            display: inline-block;
            color: #cdd5df;
            text-decoration: none;
            transition: color .25s ease
        }

            .category-banner a:after {
                content: "";
                position: absolute;
                left: 0;
                right: 100%;
                bottom: -3px;
                height: 1px;
                background: #fff;
                transition: right .25s ease
            }
    .about-hero {
        padding: 55px 0 60px;        
        background:#efefef;
        border-bottom: 1px solid #e8ebef;
    }
    .about-hero h1 {
        margin: 0 0 18px;
        font-size: 38px;
        line-height: 1.2;
        font-weight: 700;
    }
    .about-hero h1 .color { color: #2FADDE; }
    .about-hero .lead {
        max-width: 850px;
        margin: 0 auto 24px;
        font-size: 18px;
        line-height: 1.75;
        color: #5f6873;
    }
    .about-section { padding: 55px 0; }
        .about-section.alt {
            background: #dfdfdf;
        }
    .about-section.compact { padding: 42px 0; }
    .section-heading {
        margin-bottom: 32px;
        text-align: center;
    }
    .section-heading h2 {
        margin: 0 0 12px;
        font-size: 28px;
        font-weight: 700;
    }
    .section-heading p {
        max-width: 820px;
        margin: 0 auto;
        color: #68727d;
        line-height: 1.7;
    }
    .about-card {
        height: 100%;
        margin-bottom: 25px;
        padding: 28px 25px;
        background: #fff;
        border: 1px solid #e5e9ee;
        border-radius: 4px;
        box-shadow: 0 4px 18px rgba(0,0,0,.05);
    }
    .about-card h3 {
        margin: 0 0 13px;
        font-size: 20px;
        font-weight: 600;
    }
    .about-card h4 {
        margin-top: 0;
        font-size: 18px;
        font-weight: 600;
    }
    .about-card p,
    .about-card li,
    .about-copy p,
    .about-copy li {
        color: #5f6873;
        line-height: 1.75;
    }
    .about-card ul { padding-left: 20px; margin-bottom: 0; }
    .icon-circle {
        width: 52px;
        height: 52px;
        margin-bottom: 18px;
        display: inline-block;
        border-radius: 50%;
        background: #2FADDE;
        color: #fff;
        text-align: center;
        line-height: 52px;
        font-size: 20px;
        font-weight: 700;
    }
    .mission-card {
        min-height: 220px;
        padding: 32px;
        margin-bottom: 25px;
        background: #fff;
        border: 1px solid #e5e9ee;
        border-top: 4px solid #2FADDE;
        box-shadow: 0 4px 18px rgba(0,0,0,.05);
    }
    .mission-card h3 { margin-top: 0; font-weight: 700; }
    .mission-card p { color: #5f6873; line-height: 1.8; }
    .process-step {
        position: relative;
        min-height: 245px;
        padding: 28px 22px;
        margin-bottom: 25px;
        background: #fff;
        border: 1px solid #e5e9ee;
        text-align: center;
    }
    .process-step h3 { margin: 0 0 12px; font-size: 19px; }
    .process-step p { color: #5f6873; line-height: 1.7; }
    .team-member {
        margin-bottom: 30px;
        background: #fff;
        border: 1px solid #e5e9ee;
        box-shadow: 0 4px 18px rgba(0,0,0,.05);
        text-align: center;
        overflow: hidden;
    }
    .team-member img { width: 100%; }
    .team-member .team-info { padding: 18px 15px 20px; }
    .team-member h4 { margin: 0 0 6px; font-weight: 600; }
    .team-member .deg { color: #2FADDE; font-size: 13px; }
    .cta-section {
        padding: 55px 0;
        background: #2f3a45;
        color: #fff;
        text-align: center;
    }
    .cta-section h2 { margin-top: 0; font-weight: 700; }
    .cta-section p {
        max-width: 800px;
        margin: 0 auto 25px;
        color: #dce2e7;
        line-height: 1.75;
    }
    .btn-about {
        display: inline-block;
        padding: 12px 24px;
        border-radius: 3px;
        background: #2FADDE;
        border: 1px solid #2FADDE;
        color: #fff !important;
        font-weight: 600;
        text-decoration: none !important;
    }
        .btn-about:hover,
        .btn-about:focus {
            background: #3276b1;
            border-color: #285e8e;
        }
    .about-list {
        padding-left: 20px;
    }
    .about-list li { margin-bottom: 8px; }
    .value-card { min-height: 205px; }
    @media (max-width: 991px) {
        .about-hero { padding: 45px 0; }
        .about-hero h1 { font-size: 32px; }
        .about-section { padding: 45px 0; }
    }
    @media (max-width: 767px) {
        .about-hero { padding: 38px 0; }
        .about-hero h1 { font-size: 28px; }
        .about-hero .lead { font-size: 16px; }
        .about-section { padding: 38px 0; }
        .section-heading h2 { font-size: 24px; }
        .about-card,
        .mission-card,
        .process-step { min-height: 0; }
    }

.about-page{background:#fff;overflow:hidden}
.about-page .about-card,.about-page .mission-card,.about-page .process-step,.about-page .team-member{transition:box-shadow .25s ease,border-color .25s ease,transform .25s ease}
.about-page .about-card:hover,.about-page .mission-card:hover,.about-page .process-step:hover{box-shadow:0 8px 22px rgba(23,32,51,.07);border-color:#cbd3de}
.about-page a:not(.btn){transition:color .2s ease}
.about-page .row{margin-left:-15px;margin-right:-15px}
.about-page .about-section [class*="col-"]{margin-bottom:25px}
.about-page .about-section .about-card{height:100%;margin-bottom:0}
.about-page .about-section .mission-card{height:100%;margin-bottom:0}
.about-page .about-section .process-step{height:100%;margin-bottom:0}
.about-page .team-member{height:100%;margin-bottom:0}
.about-page .team-member:hover{box-shadow:0 8px 22px rgba(23,32,51,.07)}
.about-page .team-member img{width:100%;height:auto;display:block}
.about-page .btn-about{transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.about-page .btn-about:hover,.about-page .btn-about:focus{transform:translateY(-1px);box-shadow:0 5px 14px rgba(0,0,0,.16)}
.about-page .btn-about:focus-visible{outline:3px solid rgba(242,140,40,.35);outline-offset:2px}
@media(max-width:767px){
 .about-page .about-section [class*="col-"]{margin-bottom:20px}
 .about-page .about-card,.about-page .mission-card,.about-page .process-step,.about-page .team-member{height:auto}
}

/* ============================================================
   Section-specific interaction system
   Bootstrap 3 compatible; no universal card transform.
   ============================================================ */

/* 1. Service / solution cards: lift + controlled accent */
.service-card,
.service-card-rich {
    position: relative;
    overflow: hidden;
}
.service-card:before,
.service-card-rich:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 0;
    background: #337ab7;
    transition: height .25s ease;
}
.service-card:hover:before,
.service-card:focus:before,
.service-card-rich:hover:before,
.service-card-rich:focus-within:before {
    height: 100%;
}
.service-card:hover,
.service-card:focus {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(23,32,51,.10);
    border-color: #c9d4df;
}
.service-card-rich:hover,
.service-card-rich:focus-within {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(23,32,51,.11);
    border-color: #c9d4df;
}
.service-card .learn:after {
    content: " \2192";
    display: inline-block;
    transition: transform .2s ease;
}
.service-card:hover .learn:after,
.service-card:focus .learn:after {
    transform: translateX(4px);
}

/* 2. Technology / capability blocks: highlight instead of lift */
.capability {
    position: relative;
    padding: 18px 20px;
    border: 1px solid transparent;
    border-radius: 3px;
    transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
.capability:hover,
.capability:focus-within {
    border-color: #dce4ec;
    background: #fff;
    box-shadow: 0 6px 18px rgba(23,32,51,.06);
}
.capability h3 {
    transition: color .2s ease;
}
.capability:hover h3,
.capability:focus-within h3 {
    color: #337ab7;
}

/* 3. Portfolio/project pattern when such components exist */
.project-card,
.portfolio-card {
    position: relative;
    overflow: hidden;
}
.project-card img,
.portfolio-card img {
    transition: transform .4s ease;
}
.project-card:hover img,
.project-card:focus-within img,
.portfolio-card:hover img,
.portfolio-card:focus-within img {
    transform: scale(1.035);
}
.project-card .overlay,
.portfolio-card .overlay {
    opacity: 0;
    transition: opacity .3s ease;
}
.project-card:hover .overlay,
.project-card:focus-within .overlay,
.portfolio-card:hover .overlay,
.portfolio-card:focus-within .overlay {
    opacity: 1;
}
.project-card .view-project:after,
.portfolio-card .view-project:after {
    content: " \2192";
    display: inline-block;
    transition: transform .2s ease;
}
.project-card:hover .view-project:after,
.project-card:focus-within .view-project:after,
.portfolio-card:hover .view-project:after,
.portfolio-card:focus-within .view-project:after {
    transform: translateX(4px);
}

/* 4. Blog/article pattern */
.blog-card,
.article-card {
    overflow: hidden;
}
.blog-card img,
.article-card img {
    transition: transform .4s ease;
}
.blog-card:hover img,
.blog-card:focus-within img,
.article-card:hover img,
.article-card:focus-within img {
    transform: scale(1.03);
}
.blog-card h3 a,
.article-card h3 a {
    transition: color .2s ease;
}
.blog-card:hover h3 a,
.blog-card:focus-within h3 a,
.article-card:hover h3 a,
.article-card:focus-within h3 a {
    color: #337ab7;
}
.blog-card .read-more:after,
.article-card .read-more:after {
    content: " \2192";
    display: inline-block;
    transition: transform .2s ease;
}
.blog-card:hover .read-more:after,
.blog-card:focus-within .read-more:after,
.article-card:hover .read-more:after,
.article-card:focus-within .read-more:after {
    transform: translateX(4px);
}

/* 5. Buttons / CTAs: purpose-based, restrained */
.btn {
    transition: color .2s ease, background-color .2s ease, border-color .2s ease,
                box-shadow .2s ease, transform .2s ease;
}
.btn-primary:hover,
.btn-primary:focus {
    box-shadow: 0 4px 12px rgba(51,122,183,.20);
    transform: translateY(-1px);
}
.btn-default:hover,
.btn-default:focus {
    color: #337ab7;
    border-color: #b9c7d6;
    box-shadow: 0 3px 9px rgba(23,32,51,.07);
}
.btn-about:hover,
.btn-about:focus {
    box-shadow: 0 4px 12px rgba(242,140,40,.22);
    transform: translateY(-1px);
}
.btn .fa,
.btn [class*="icon-"] {
    transition: transform .2s ease;
}
.btn:hover .fa,
.btn:focus .fa,
.btn:hover [class*="icon-"],
.btn:focus [class*="icon-"] {
    transform: translateX(2px);
}

/* 7. Feature / benefit sections: accent emphasis */
.feature-card,
.benefit-card {
    transition: border-color .25s ease, background-color .25s ease;
}
.feature-card:hover,
.feature-card:focus-within,
.benefit-card:hover,
.benefit-card:focus-within {
    border-color: #d5dfe9;
    background: #fbfcfd;
}
.feature-card .icon,
.benefit-card .icon,
.feature-card i,
.benefit-card i {
    transition: color .25s ease, transform .25s ease;
}
.feature-card:hover .icon,
.feature-card:hover i,
.feature-card:focus-within .icon,
.feature-card:focus-within i,
.benefit-card:hover .icon,
.benefit-card:hover i,
.benefit-card:focus-within .icon,
.benefit-card:focus-within i {
    color: #337ab7;
    transform: scale(1.06);
}

/* 8. Statistics / metrics: highlight, no large movement */
.stat,
.stat-card,
.metric-card {
    transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.stat:hover,
.stat-card:hover,
.metric-card:hover,
.stat:focus-within,
.stat-card:focus-within,
.metric-card:focus-within {
    background: #fbfcfe;
    border-color: #d8e1ea;
    box-shadow: 0 5px 16px rgba(23,32,51,.06);
}
.stat strong,{
    transition: color .25s ease;
}
.stat:hover strong,{
    color: #337ab7;
}

/* 9. Testimonials: softer elevation */
.testimonial,
.testimonial-card,
.quote-card {
    transition: box-shadow .3s ease, border-color .3s ease;
}
.testimonial:hover,
.testimonial-card:hover,
.quote-card:hover,
.testimonial:focus-within,
.testimonial-card:focus-within,
.quote-card:focus-within {
    box-shadow: 0 8px 24px rgba(23,32,51,.08);
    border-color: #d5dde6;
}
.testimonial .quote-icon,
.testimonial-card .quote-icon,
.quote-card .quote-icon {
    transition: color .25s ease, opacity .25s ease;
}
.testimonial:hover .quote-icon,
.testimonial-card:hover .quote-icon,
.quote-card:hover .quote-icon {
    color: #337ab7;
    opacity: .9;
}

/* 10. Team/profile cards: image treatment + social reveal */
.team-member {
    overflow: hidden;
}
.team-member img {
    transition: transform .4s ease;
}
.team-member:hover img,
.team-member:focus-within img {
    transform: scale(1.025);
}
.team-member .social,
.team-member .social-links {
    opacity: .72;
    transition: opacity .25s ease, transform .25s ease;
}
.team-member:hover .social,
.team-member:focus-within .social,
.team-member:hover .social-links,
.team-member:focus-within .social-links {
    opacity: 1;
    transform: translateY(-2px);
}
.team-member h4 {
    transition: color .2s ease;
}
.team-member:hover h4,
.team-member:focus-within h4 {
    color: #337ab7;
}

/* 11. Contact / CTA: background stays stable; controls respond */
/*.final-cta,
.cta-section {
    position: relative;
}
.final-cta .btn,
.cta-section .btn {
    position: relative;
    z-index: 1;
}
.cta-section .icon,
.final-cta .icon {
    transition: opacity .25s ease, transform .25s ease;
}
.cta-section:hover .icon,
.final-cta:hover .icon {
    opacity: .95;
    transform: scale(1.04);
}*/

    .final-cta {
        padding: 64px 0;
        background: #172033;
        text-align: center
    }

        .final-cta h2 {
            margin: 0 0 18px;
            font-size: 34px;
            line-height: 1.25;
            color: #fff
        }

        .final-cta p {
            max-width: 780px;
            margin: 0 auto 28px;
            font-size: 16px;
            line-height: 1.75;
            color: #d7dde6
        }

        .final-cta .btn {
            transition: background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease
        }

            .final-cta .btn:hover, .final-cta .btn:focus {
                transform: translateY(-1px);
                box-shadow: 0 5px 14px rgba(0,0,0,.18)
            }

            .final-cta .btn:focus-visible {
                outline: 3px solid rgba(255,255,255,.45);
                outline-offset: 2px
            }

/* General interactive link micro-interaction */
a {
    transition: color .2s ease;
}
a.arrow-link:after,
a.link-arrow:after {
    content: " \2192";
    display: inline-block;
    transition: transform .2s ease;
}
a.arrow-link:hover:after,
a.arrow-link:focus:after,
a.link-arrow:hover:after,
a.link-arrow:focus:after {
    transform: translateX(4px);
}

/* Explicit keyboard accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(51,122,183,.28);
    outline-offset: 2px;
}

/* Do not animate non-interactive structural sections by default. */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *:before,
    *:after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}


/* Shared-site typography inheritance: do not introduce a new font family here. */
.about-page,
.about-page * {
    font-family: inherit;
}

.about-page a:focus,
.about-page button:focus {
    outline: 3px solid rgba(242, 92, 39, .28);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .about-page .about-card,
    .about-page .mission-card,
    .about-page .process-step,
    .about-page .team-member,
    .about-page .btn-about {
        transition: border-color .25s ease, box-shadow .25s ease,
                    color .25s ease, background-color .25s ease, transform .25s ease;
    }

    .about-page .about-card:hover,
    .about-page .mission-card:hover,
    .about-page .process-step:hover,
    .about-page .team-member:hover {
        transform: translateY(-2px);
        border-color: #d8dee5;
        box-shadow: 0 9px 25px rgba(0,0,0,.07);
    }

    .about-page .btn-about:hover,
    .about-page .btn-about:focus {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(242,92,39,.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-page *,
    .about-page *::before,
    .about-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}



.about-page a:focus,
.about-page button:focus {
    outline: 3px solid rgba(242, 92, 39, .28);
    outline-offset: 3px;
}

@media (hover: hover) and (pointer: fine) {
    .about-page .about-card,
    .about-page .mission-card,
    .about-page .process-step,
    .about-page .team-member,
    .about-page .btn-about {
        transition: border-color .25s ease, box-shadow .25s ease,
                    color .25s ease, background-color .25s ease, transform .25s ease;
    }

    .about-page .about-card:hover,
    .about-page .mission-card:hover,
    .about-page .process-step:hover,
    .about-page .team-member:hover {
        transform: translateY(-2px);
        border-color: #d8dee5;
        box-shadow: 0 9px 25px rgba(0,0,0,.07);
    }

    .about-page .btn-about:hover,
    .about-page .btn-about:focus {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(242,92,39,.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-page *,
    .about-page *::before,
    .about-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}



@media (hover: hover) and (pointer: fine) {
    .about-page .about-card,
    .about-page .mission-card,
    .about-page .process-step,
    .about-page .team-member,
    .about-page .btn-about {
        transition: border-color .25s ease, box-shadow .25s ease,
                    color .25s ease, background-color .25s ease, transform .25s ease;
    }

    .about-page .about-card:hover,
    .about-page .mission-card:hover,
    .about-page .process-step:hover,
    .about-page .team-member:hover {
        transform: translateY(-2px);
        border-color: #d8dee5;
        box-shadow: 0 9px 25px rgba(0,0,0,.07);
    }

    .about-page .btn-about:hover,
    .about-page .btn-about:focus {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(242,92,39,.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .about-page *,
    .about-page *::before,
    .about-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}



@media (prefers-reduced-motion: reduce) {
    .about-page *,
    .about-page *::before,
    .about-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}