/* ============================================================
   CREATIVE IDEA
   ABOUT PAGE
   DARK BLUE / BLUE / PURPLE DESIGN
   ============================================================ */


/* ============================================================
   VARIABLES
   ============================================================ */

:root {

    --ci-bg:
        #050816;

    --ci-bg-secondary:
        #050c26;

    --ci-bg-section:
        #070f2b;

    --ci-card:
        #071238;

    --ci-card-light:
        #09163f;

    --ci-border:
        #17305d;

    --ci-blue:
        #2b7cff;

    --ci-blue-bright:
        #3188ff;

    --ci-purple:
        #8b3dff;

    --ci-purple-bright:
        #a34cff;

    --ci-gradient:
        linear-gradient(
            100deg,
            #386bff 0%,
            #8e35ff 100%
        );

    --ci-white:
        #ffffff;

    --ci-text:
        #d4d9e8;

    --ci-text-muted:
        #8f9bb5;

    --ci-heading:
        #ffffff;

    --ci-container:
        1180px;

}


/* ============================================================
   RESET
   ============================================================ */

.ci-about-page,
.ci-about-page *,
.ci-about-page *::before,
.ci-about-page *::after {

    box-sizing: border-box;

}


.ci-about-page {

    margin: 0;

    width: 100%;

    color: var(--ci-text);

    background:
        var(--ci-bg);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow: hidden;

}


.ci-about-page img {

    max-width: 100%;

    height: auto;

}


.ci-about-page a {

    text-decoration: none;

}


.ci-about-page h1,
.ci-about-page h2,
.ci-about-page h3,
.ci-about-page p {

    margin-top: 0;

}


/* ============================================================
   CONTAINER
   ============================================================ */

.about-container {

    width:
        calc(100% - 80px);

    max-width:
        var(--ci-container);

    margin-left: auto;
    margin-right: auto;

}


/* ============================================================
   LABEL
   ============================================================ */

.about-label {

    display: inline-flex;

    align-items: center;

    padding:
        5px 10px;

    color:
        #a95cff;

    background:
        rgba(125, 55, 255, .08);

    border:
        1px solid rgba(143, 66, 255, .45);

    border-radius:
        50px;

    font-size:
        10px;

    line-height:
        1.3;

    font-weight:
        600;

    letter-spacing:
        .5px;

    text-transform:
        uppercase;

}


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

.about-hero {

    position: relative;

    padding:
        125px 0 85px;

    background:

        radial-gradient(
            circle at 78% 35%,
            rgba(80, 42, 190, .17),
            transparent 32%
        ),

        radial-gradient(
            circle at 15% 20%,
            rgba(20, 86, 190, .08),
            transparent 30%
        ),

        var(--ci-bg);

}


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

.about-hero-grid {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    align-items: center;

    gap:
        70px;

}


/* ============================================================
   BREADCRUMB
   ============================================================ */

.about-breadcrumb {

    display: flex;

    align-items: center;

    gap:
        9px;

    margin-bottom:
        24px;

    color:
        #66738e;

    font-size:
        12px;

}


.about-breadcrumb a {

    color:
        #71809a;

}


.about-breadcrumb a:hover {

    color:
        var(--ci-blue);

}


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

.about-hero h1 {

    max-width:
        620px;

    margin:
        18px 0 20px;

    color:
        var(--ci-white);

    font-size:
        clamp(42px, 5vw, 62px);

    line-height:
        1.04;

    letter-spacing:
        -1.8px;

    font-weight:
        750;

}


.about-hero h1 span {

    display: block;

    background:
        var(--ci-gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.about-hero-content > p {

    max-width:
        575px;

    margin:
        0 0 28px;

    color:
        #9ca7bd;

    font-size:
        15px;

    line-height:
        1.75;

}


/* ============================================================
   BUTTONS
   ============================================================ */

.about-hero-buttons {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    flex-wrap:
        wrap;

}


.ci-btn {

    min-height:
        38px;

    padding:
        10px 17px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    border-radius:
        5px;

    font-size:
        11px;

    font-weight:
        600;

    transition:
        .25s ease;

}


.ci-btn-primary {

    color:
        #ffffff;

    background:
        var(--ci-gradient);

    box-shadow:
        0 8px 25px
        rgba(102, 55, 255, .24);

}


.ci-btn-primary:hover {

    color:
        #ffffff;

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(116, 59, 255, .38);

}


.ci-btn-outline {

    color:
        #ffffff;

    background:
        rgba(8, 16, 43, .8);

    border:
        1px solid #34476e;

}


.ci-btn-outline:hover {

    color:
        #ffffff;

    border-color:
        #7654ff;

    background:
        rgba(76, 45, 175, .12);

}


/* ============================================================
   HERO MINI POINTS
   ============================================================ */

.hero-mini-points {

    margin-top:
        23px;

    display:
        flex;

    align-items:
        center;

    gap:
        25px;

    flex-wrap:
        wrap;

}


.hero-mini-points > div {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    color:
        #8d98ad;

    font-size:
        10px;

}


.mini-icon {

    color:
        var(--ci-purple-bright);

    font-size:
        14px;

}


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

.about-hero-visual {

    position:
        relative;

    min-height:
        390px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


/* ============================================================
   GLOWS
   ============================================================ */

.glow {

    position:
        absolute;

    border-radius:
        50%;

    filter:
        blur(45px);

    pointer-events:
        none;

}


.glow-purple {

    width:
        230px;

    height:
        230px;

    background:
        rgba(113, 40, 255, .18);

    right:
        30px;

    top:
        60px;

}


.glow-blue {

    width:
        160px;

    height:
        160px;

    background:
        rgba(24, 96, 255, .13);

    left:
        35px;

    bottom:
        30px;

}


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

.hero-orbit {

    position:
        absolute;

    border:
        1px solid rgba(101, 61, 255, .18);

    border-radius:
        50%;

    transform:
        rotate(-18deg);

}


.orbit-one {

    width:
        440px;

    height:
        230px;

}


.orbit-two {

    width:
        350px;

    height:
        185px;

}


/* ============================================================
   TEAM CARD
   ============================================================ */

.about-team-card {

    position:
        relative;

    z-index:
        3;

    width:
        min(460px, 100%);

    height:
        290px;

    overflow:
        hidden;

    background:
        #080f28;

    border:
        1px solid #4831a0;

    border-radius:
        9px;

    box-shadow:

        0 0 0 1px
        rgba(97, 48, 255, .08),

        0 0 35px
        rgba(86, 43, 255, .18);

}


/* ============================================================
   WINDOW HEADER
   ============================================================ */

.team-window-top {

    height:
        38px;

    padding:
        0 15px;

    display:
        flex;

    align-items:
        center;

    border-bottom:
        1px solid #17234a;

}


.window-dots {

    display:
        flex;

    gap:
        5px;

}


.window-dots span {

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #3e4a69;

}


.window-title {

    margin-left:
        auto;
    margin-right:
        auto;

    color:
        #66738f;

    font-size:
        10px;

}


/* ============================================================
   DASHBOARD
   ============================================================ */

.team-window-content {

    display:
        flex;

    height:
        calc(100% - 38px);

}


.team-sidebar {

    width:
        75px;

    padding:
        27px 12px;

    border-right:
        1px solid #17234a;

}


.side-line {

    width:
        45px;

    height:
        5px;

    margin-bottom:
        12px;

    background:
        #2a3c68;

    border-radius:
        5px;

}


.side-line.active {

    width:
        52px;

    background:
        var(--ci-gradient);

}


.side-line.short {

    width:
        30px;

}


.team-main {

    flex:
        1;

    padding:
        25px;

}


.team-heading-line {

    width:
        120px;

    height:
        7px;

    margin-bottom:
        10px;

    background:
        #7037ff;

    border-radius:
        5px;

}


.team-heading-line.small {

    width:
        190px;

    background:
        #253968;

}


/* ============================================================
   DASHBOARD CARDS
   ============================================================ */

.team-dashboard {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        8px;

    margin-top:
        25px;

}


.dashboard-card {

    padding:
        13px 7px;

    text-align:
        center;

    background:
        #0b1736;

    border:
        1px solid #1c3260;

    border-radius:
        5px;

}


.dashboard-card strong {

    display:
        block;

    color:
        #ffffff;

    font-size:
        16px;

}


.dashboard-card small {

    color:
        #687895;

    font-size:
        8px;

}


/* ============================================================
   CHART
   ============================================================ */

.dashboard-chart {

    position:
        relative;

    height:
        85px;

    margin-top:
        17px;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 20px,
            rgba(35, 57, 95, .4) 21px
        );

}


.chart-line {

    position:
        absolute;

    height:
        3px;

    border-radius:
        3px;

    background:
        var(--ci-gradient);

    transform-origin:
        left center;

}


.line-a {

    width:
        90px;

    left:
        15px;

    top:
        58px;

    transform:
        rotate(-12deg);

}


.line-b {

    width:
        90px;

    left:
        103px;

    top:
        39px;

    transform:
        rotate(16deg);

}


.line-c {

    width:
        95px;

    left:
        190px;

    top:
        65px;

    transform:
        rotate(-25deg);

}


.chart-point {

    position:
        absolute;

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        #9b4cff;

    box-shadow:
        0 0 10px
        rgba(155, 76, 255, .8);

}


.point-a {

    left:
        100px;

    top:
        37px;

}


.point-b {

    left:
        190px;

    top:
        63px;

}


.point-c {

    left:
        283px;

    top:
        21px;

}


/* ============================================================
   FLOATING BADGES
   ============================================================ */

.floating-badge {

    position:
        absolute;

    z-index:
        5;

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

    padding:
        8px 11px;

    color:
        #dbe3f5;

    background:
        rgba(7, 14, 39, .94);

    border:
        1px solid #3c3180;

    border-radius:
        7px;

    font-size:
        9px;

    box-shadow:
        0 10px 30px rgba(0,0,0,.25);

}


.floating-badge span {

    color:
        #a24bff;

}


.badge-one {

    top:
        37px;

    right:
        0;

}


.badge-two {

    left:
        0;

    top:
        130px;

}


.badge-three {

    right:
        28px;

    bottom:
        35px;

}


/* ============================================================
   SERVICES
   ============================================================ */

.about-services {

    padding:
        75px 0;

    background:
        var(--ci-bg-secondary);

}


.about-section-heading {

    text-align:
        center;

    max-width:
        680px;

    margin:
        0 auto 40px;

}


.about-section-heading h2 {

    margin:
        14px 0 13px;

    color:
        #ffffff;

    font-size:
        34px;

    line-height:
        1.2;

    letter-spacing:
        -.8px;

}


.about-section-heading h2 span {

    background:
        var(--ci-gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.about-section-heading p {

    margin:
        0;

    color:
        #7f8ba4;

    font-size:
        13px;

    line-height:
        1.7;

}


/* ============================================================
   SERVICE GRID
   ============================================================ */

.about-service-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        12px;

}


.about-service-card {

    min-height:
        330px;

    padding:
        23px 19px;

    background:
        linear-gradient(
            180deg,
            #071238 0%,
            #06102d 100%
        );

    border:
        1px solid #18305a;

    border-radius:
        7px;

    transition:
        .25s ease;

}


.about-service-card:hover {

    transform:
        translateY(-4px);

    border-color:
        #3a4da1;

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.22);

}


.service-icon {

    width:
        38px;

    height:
        38px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        17px;

    color:
        #a24cff;

    background:
        rgba(82, 48, 255, .15);

    border:
        1px solid rgba(114, 73, 255, .35);

    border-radius:
        7px;

    font-size:
        16px;

    font-weight:
        700;

}


.about-service-card h3 {

    margin:
        0 0 10px;

    color:
        #ffffff;

    font-size:
        16px;

}


.about-service-card > p {

    min-height:
        67px;

    margin:
        0 0 14px;

    color:
        #8793aa;

    font-size:
        11px;

    line-height:
        1.65;

}


.about-service-card ul {

    margin:
        0 0 17px;

    padding:
        0;

    list-style:
        none;

}


.about-service-card li {

    position:
        relative;

    padding-left:
        13px;

    margin-bottom:
        7px;

    color:
        #929db3;

    font-size:
        10px;

}


.about-service-card li::before {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    color:
        #b04bff;

}


.about-service-card > a {

    color:
        #a54cff;

    font-size:
        10px;

    font-weight:
        600;

}


/* ============================================================
   STATS
   ============================================================ */

.about-stats-section {

    padding:
        25px 0 70px;

    background:
        var(--ci-bg-secondary);

}


.about-stats {

    display:
        grid;

    grid-template-columns:
        1fr
        1px
        1fr
        1px
        1fr
        1px
        1fr;

    align-items:
        center;

    padding:
        25px 35px;

    background:
        #071238;

    border:
        1px solid #172e58;

    border-radius:
        8px;

}


.about-stat {

    text-align:
        center;

}


.about-stat strong {

    display:
        block;

    margin-bottom:
        5px;

    color:
        #ffffff;

    font-size:
        26px;

}


.about-stat span {

    color:
        #7f8ba4;

    font-size:
        10px;

}


.stat-separator {

    width:
        1px;

    height:
        48px;

    background:
        #1d3155;

}


/* ============================================================
   WHY
   ============================================================ */

.about-why {

    position:
        relative;

    padding:
        80px 0;

    background:
        #050816;

}


.about-why-grid {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        75px;

    align-items:
        center;

}


.why-content h2 {

    max-width:
        500px;

    margin:
        16px 0 20px;

    color:
        #ffffff;

    font-size:
        38px;

    line-height:
        1.15;

}


.why-content h2 span {

    display:
        block;

    background:
        var(--ci-gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.why-content > p {

    max-width:
        520px;

    margin:
        0 0 15px;

    color:
        #8792a8;

    font-size:
        13px;

    line-height:
        1.75;

}


.text-link {

    display:
        inline-block;

    margin-top:
        10px;

    color:
        #a14cff;

    font-size:
        11px;

    font-weight:
        600;

}


/* ============================================================
   WHY FEATURE GRID
   ============================================================ */

.why-feature-grid {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        12px;

}


.why-feature {

    padding:
        21px 18px;

    background:
        #071238;

    border:
        1px solid #18305b;

    border-radius:
        7px;

    transition:
        .25s ease;

}


.why-feature:hover {

    border-color:
        #3c3a90;

    transform:
        translateY(-3px);

}


.why-icon {

    width:
        37px;

    height:
        37px;

    margin-bottom:
        13px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #a34cff;

    background:
        rgba(87, 46, 255, .13);

    border:
        1px solid rgba(111, 67, 255, .28);

    border-radius:
        7px;

    font-size:
        15px;

}


.why-feature h3 {

    margin:
        0 0 7px;

    color:
        #ffffff;

    font-size:
        13px;

}


.why-feature p {

    margin:
        0;

    color:
        #7e8aa2;

    font-size:
        10px;

    line-height:
        1.6;

}


/* ============================================================
   MISSION
   ============================================================ */

.about-mission {

    padding:
        80px 0;

    background:
        #050c26;

}


.mission-grid {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        75px;

    align-items:
        center;

}


/* ============================================================
   MISSION VISUAL
   ============================================================ */

.mission-visual {

    position:
        relative;

    min-height:
        320px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

}


.mission-glow {

    position:
        absolute;

    width:
        240px;

    height:
        240px;

    border-radius:
        50%;

    background:
        rgba(90, 39, 255, .17);

    filter:
        blur(55px);

}


.mission-screen {

    position:
        relative;

    z-index:
        2;

    width:
        400px;

    height:
        250px;

    overflow:
        hidden;

    background:
        #080f2b;

    border:
        1px solid #4a3aa1;

    border-radius:
        9px;

    box-shadow:
        0 0 45px
        rgba(95, 49, 255, .18);

}


.mission-screen-header {

    height:
        30px;

    display:
        flex;

    align-items:
        center;

    gap:
        5px;

    padding:
        0 12px;

    border-bottom:
        1px solid #172651;

}


.mission-screen-header span {

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        #485777;

}


.mission-screen-body {

    height:
        calc(100% - 30px);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

}


.mission-logo-mark {

    width:
        52px;

    height:
        52px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #ffffff;

    background:
        var(--ci-gradient);

    border-radius:
        12px;

    font-size:
        16px;

    font-weight:
        800;

    box-shadow:
        0 0 30px
        rgba(108, 50, 255, .4);

}


.mission-screen-title {

    margin-top:
        15px;

    color:
        #ffffff;

    font-size:
        18px;

    font-weight:
        700;

}


.mission-screen-subtitle {

    margin-top:
        5px;

    color:
        #7785a2;

    font-size:
        10px;

}


.mission-progress {

    width:
        160px;

    height:
        4px;

    margin-top:
        20px;

    background:
        #1b2c51;

    border-radius:
        5px;

}


.mission-progress span {

    display:
        block;

    width:
        72%;

    height:
        100%;

    background:
        var(--ci-gradient);

    border-radius:
        inherit;

}


/* ============================================================
   MISSION CONTENT
   ============================================================ */

.mission-content h2 {

    max-width:
        520px;

    margin:
        16px 0 20px;

    color:
        #ffffff;

    font-size:
        35px;

    line-height:
        1.2;

}


.mission-content h2 span {

    background:
        var(--ci-gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.mission-content > p {

    max-width:
        530px;

    color:
        #8793aa;

    font-size:
        13px;

    line-height:
        1.75;

}


.mission-points {

    margin-top:
        22px;

}


.mission-points > div {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    margin-bottom:
        11px;

}


.mission-points span {

    width:
        20px;

    height:
        20px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #b14cff;

    background:
        rgba(126, 53, 255, .12);

    border:
        1px solid rgba(136, 64, 255, .25);

    border-radius:
        50%;

    font-size:
        10px;

}


.mission-points p {

    margin:
        0;

    color:
        #9aa5b9;

    font-size:
        11px;

}


/* ============================================================
   FINAL CTA
   ============================================================ */

.about-final-cta {

    padding:
        0 0 75px;

    background:
        #050816;

}


.final-cta-box {

    position:
        relative;

    min-height:
        260px;

    overflow:
        hidden;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        40px;

    padding:
        42px 45px;

    background:

        radial-gradient(
            circle at 85% 50%,
            rgba(111, 44, 255, .28),
            transparent 35%
        ),

        linear-gradient(
            110deg,
            #081f68,
            #24105d
        );

    border:
        1px solid #5542b3;

    border-radius:
        8px;

}


.final-cta-content {

    position:
        relative;

    z-index:
        2;

    max-width:
        650px;

}


.final-cta-content h2 {

    margin:
        13px 0 12px;

    color:
        #ffffff;

    font-size:
        30px;

    line-height:
        1.2;

}


.final-cta-content h2 span {

    background:
        var(--ci-gradient);

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


.final-cta-content p {

    max-width:
        560px;

    margin:
        0 0 20px;

    color:
        #b0b8ca;

    font-size:
        11px;

    line-height:
        1.65;

}


.final-cta-buttons {

    display:
        flex;

    gap:
        9px;

    flex-wrap:
        wrap;

}


/* ============================================================
   CTA DEVICES
   ============================================================ */

.final-cta-visual {

    position:
        relative;

    width:
        280px;

    height:
        180px;

    flex:
        0 0 auto;

}


.cta-device {

    position:
        absolute;

    background:
        #071238;

    border:
        2px solid #566db1;

    box-shadow:
        0 0 25px
        rgba(92, 56, 255, .2);

}


.desktop-device {

    width:
        145px;

    height:
        100px;

    top:
        20px;

    right:
        35px;

    border-radius:
        6px;

}


.desktop-device::after {

    content:
        "";

    position:
        absolute;

    width:
        50px;

    height:
        7px;

    left:
        50%;

    bottom:
        -9px;

    transform:
        translateX(-50%);

    background:
        #576aa6;

    border-radius:
        0 0 5px 5px;

}


.desktop-device div {

    position:
        absolute;

    width:
        70%;

    height:
        5px;

    top:
        30px;

    left:
        15%;

    background:
        var(--ci-gradient);

    border-radius:
        4px;

}


.tablet-device {

    width:
        62px;

    height:
        92px;

    left:
        40px;

    bottom:
        20px;

    border-radius:
        8px;

    transform:
        rotate(5deg);

}


.tablet-device div {

    position:
        absolute;

    width:
        70%;

    height:
        4px;

    left:
        15%;

    top:
        25px;

    background:
        #355aa4;

}


.phone-device {

    width:
        38px;

    height:
        68px;

    right:
        15px;

    bottom:
        15px;

    border-radius:
        6px;

}


.phone-device div {

    position:
        absolute;

    width:
        60%;

    height:
        3px;

    left:
        20%;

    top:
        20px;

    background:
        #8750ff;

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1000px) {

    .about-container {

        width:
            calc(100% - 50px);

    }


    .about-hero-grid {

        gap:
            40px;

    }


    .about-service-grid {

        grid-template-columns:
            1fr 1fr;

    }


    .about-why-grid,
    .mission-grid {

        gap:
            45px;

    }


    .final-cta-visual {

        transform:
            scale(.85);

    }

}


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

@media (max-width: 700px) {

    .about-container {

        width:
            calc(100% - 32px);

    }


    .about-hero {

        padding:
            125px 0 60px;

    }


    .about-hero-grid {

        grid-template-columns:
            1fr;

        text-align:
            center;

        gap:
            45px;

    }


    .about-breadcrumb {

        justify-content:
            center;

    }


    .about-hero h1 {

        font-size:
            40px;

        letter-spacing:
            -1px;

    }


    .about-hero-content > p {

        margin-left:
            auto;

        margin-right:
            auto;

        font-size:
            14px;

    }


    .about-hero-buttons {

        justify-content:
            center;

    }


    .hero-mini-points {

        justify-content:
            center;

        gap:
            15px;

    }


    .hero-mini-points > div {

        font-size:
            9px;

    }


    .about-hero-visual {

        min-height:
            310px;

    }


    .about-team-card {

        width:
            100%;

        max-width:
            390px;

        height:
            245px;

    }


    .team-sidebar {

        width:
            55px;

    }


    .team-main {

        padding:
            17px;

    }


    .dashboard-card strong {

        font-size:
            13px;

    }


    .badge-one {

        right:
            -2px;

    }


    .badge-two {

        left:
            -3px;

    }


    .badge-three {

        right:
            5px;

        bottom:
            15px;

    }


    /* SERVICES */

    .about-services {

        padding:
            60px 0;

    }


    .about-section-heading h2 {

        font-size:
            30px;

    }


    .about-service-grid {

        grid-template-columns:
            1fr;

    }


    .about-service-card {

        min-height:
            auto;

    }


    /* STATS */

    .about-stats-section {

        padding:
            0 0 60px;

    }


    .about-stats {

        grid-template-columns:
            1fr 1fr;

        gap:
            25px 10px;

        padding:
            25px 12px;

    }


    .stat-separator {

        display:
            none;

    }


    .about-stat strong {

        font-size:
            23px;

    }


    /* WHY */

    .about-why {

        padding:
            60px 0;

    }


    .about-why-grid {

        grid-template-columns:
            1fr;

        text-align:
            center;

    }


    .why-content h2 {

        margin-left:
            auto;

        margin-right:
            auto;

        font-size:
            33px;

    }


    .why-content > p {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .why-feature-grid {

        text-align:
            left;

    }


    /* MISSION */

    .about-mission {

        padding:
            60px 0;

    }


    .mission-grid {

        grid-template-columns:
            1fr;

    }


    .mission-content {

        text-align:
            center;

    }


    .mission-content h2 {

        font-size:
            30px;

    }


    .mission-content > p {

        margin-left:
            auto;

        margin-right:
            auto;

    }


    .mission-points {

        display:
            inline-block;

        text-align:
            left;

    }


    .mission-screen {

        width:
            100%;

        max-width:
            380px;

        height:
            230px;

    }


    /* CTA */

    .about-final-cta {

        padding-bottom:
            55px;

    }


    .final-cta-box {

        min-height:
            auto;

        padding:
            30px 24px;

        flex-direction:
            column;

        align-items:
            flex-start;

    }


    .final-cta-content h2 {

        font-size:
            26px;

    }


    .final-cta-visual {

        align-self:
            center;

        transform:
            scale(.78);

        margin-top:
            -15px;

    }

}


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

@media (max-width: 420px) {

    .about-hero h1 {

        font-size:
            35px;

    }


    .about-label {

        font-size:
            9px;

    }


    .about-hero-buttons {

        flex-direction:
            column;

    }


    .about-hero-buttons .ci-btn {

        width:
            100%;

    }


    .hero-mini-points {

        gap:
            10px;

    }


    .hero-mini-points > div {

        font-size:
            8px;

    }


    .about-hero-visual {

        min-height:
            260px;

    }


    .about-team-card {

        height:
            205px;

    }


    .team-dashboard {

        margin-top:
            15px;

    }


    .dashboard-chart {

        height:
            55px;

    }


    .floating-badge {

        padding:
            6px 8px;

        font-size:
            8px;

    }


    .why-feature-grid {

        grid-template-columns:
            1fr;

    }


    .about-stats {

        grid-template-columns:
            1fr 1fr;

    }


    .about-stat span {

        font-size:
            9px;

    }


    .final-cta-buttons {

        flex-direction:
            column;

        width:
            100%;

    }


    .final-cta-buttons .ci-btn {

        width:
            100%;

    }

}