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

:root {

    --navy: #050816;
    --navy-light: #0b1b3d;

    --white: #ffffff;

    --background: #ffffff;
    --light: #f7f9fc;
    --soft: #f1f5f9;

    --heading: #07152f;
    --text: #344054;
    --muted: #667085;

    --blue: #1264d8;
    --blue2: #075bd9;
    --cyan: #12bce8;

    --green: #58b52b;

    --border: #e4e9f0;

    --max-width: 1240px;

    --shadow:
        0 12px 35px
        rgba(15, 23, 42, .07);

}


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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family:
        "DM Sans",
        sans-serif;

    background:
        #ffffff;

    color:
        var(--text);

    line-height:
        1.6;

    overflow-x:
        hidden;
}


img {
    display: block;
    max-width: 100%;
}


a {
    color: inherit;
    text-decoration: none;
}


button {
    font-family: inherit;
}


.container {

    width:
        min(
            var(--max-width),
            calc(100% - 40px)
        );

    margin:
        auto;

}


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

header {

    position:
        fixed;

    top:
        0;

    left:
        0;

    width:
        100%;

    z-index:
        9999;

    padding:
        14px 0;

    background:
        linear-gradient(
            135deg,
            #050816,
            #0b1938
        );

    border-bottom:
        1px solid
        rgba(255,255,255,.08);

    transition:
        .3s ease;
    height: 102px;
}


header.scrolled {

    background:
        rgba(5,8,22,.96);

    backdrop-filter:
        blur(20px);

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.2);
}


.nav {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


/* =====================================================
   LOGO
===================================================== */

.logo {

    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    font-family:
        "Manrope",
        sans-serif;

    font-weight:
        800;

    color:
        #ffffff;
}


.logo-image {

    width:
        47px;

    height:
        47px;

    padding:
        3px;

    object-fit:
        contain;

    background:
        #ffffff;

    border-radius:
        12px;

    box-shadow:
        0 6px 20px
        rgba(0,0,0,.18);
}


.logo-name {

    font-size:
        20px;

    line-height:
        1;
}


.logo-name span {

    color:
        #aeb9d3;
}


/* =====================================================
   NAVIGATION
===================================================== */

.nav-links {

    display:
        flex;

    align-items:
        center;

    gap:
        28px;
}


.nav-links a {

    color:
        #b9c3d8;

    font-size:
        14px;

    font-weight:
        500;

    transition:
        .25s;
}


.nav-links a:hover {

    color:
        #ffffff;
}


.nav-button {

    padding:
        10px 20px;

    border-radius:
        10px;

    background:
        linear-gradient(
            135deg,
            #1264d8,
            #12a9e8
        );

    color:
        #ffffff !important;

    font-weight:
        700 !important;
}


.nav-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 25px
        rgba(18,100,216,.35);
}


.menu-button {

    display:
        none;

    border:
        none;

    background:
        transparent;

    color:
        #ffffff;

    font-size:
        27px;

    cursor:
        pointer;
}


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

.hero {

    min-height:
        100vh;

    padding:
        160px 0 100px;

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    overflow:
        hidden;

    background:
        linear-gradient(
            180deg,
            #f7fbff,
            #ffffff
        );
}


.hero-glow {

    position:
        absolute;

    width:
        500px;

    height:
        500px;

    right:
        -200px;

    top:
        -200px;

    border-radius:
        50%;

    background:
        rgba(18,100,216,.08);

    filter:
        blur(80px);
}


.hero-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    align-items:
        center;

    position:
        relative;

    z-index:
        2;
}


.eyebrow {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    padding:
        7px 14px;

    border:
        1px solid
        #dce6f4;

    border-radius:
        50px;

    background:
        #ffffff;

    color:
        #52617a;

    font-size:
        12px;

    font-weight:
        600;

    margin-bottom:
        25px;
}


.status-dot {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--green);

    box-shadow:
        0 0 10px
        rgba(88,181,43,.7);
}


.hero h1 {

    font-family:
        "Manrope",
        sans-serif;

    color:
        var(--heading);

    font-size:
        clamp(
            45px,
            6vw,
            76px
        );

    line-height:
        1.04;

    letter-spacing:
        -3px;

    margin-bottom:
        25px;
}


.gradient-text {

    background:
        linear-gradient(
            90deg,
            #1264d8,
            #12a9e8,
            #58b52b
        );

    -webkit-background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

    background-clip:
        text;
}


.hero-description {

    max-width:
        630px;

    color:
        var(--muted);

    font-size:
        18px;

    line-height:
        1.8;

    margin-bottom:
        32px;
}


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

.hero-buttons {

    display:
        flex;

    gap:
        13px;

    flex-wrap:
        wrap;

    align-items:
        center;
}


.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    padding:
        14px 22px;

    border-radius:
        11px;

    font-size:
        14px;

    font-weight:
        700;

    transition:
        .3s;
}


.btn-primary {

    color:
        #ffffff;

    background:
        linear-gradient(
            135deg,
            #1264d8,
            #1598ed
        );

    box-shadow:
        0 12px 30px
        rgba(18,100,216,.20);
}


.btn-primary:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 18px 35px
        rgba(18,100,216,.30);
}


.btn-secondary {

    background:
        #ffffff;

    border:
        1px solid
        #dce3ec;

    color:
        #344054;
}


.btn-secondary:hover {

    color:
        var(--blue);

    border-color:
        var(--blue);

    transform:
        translateY(-2px);
}


.btn-outline-white {

    color:
        #ffffff;

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

    background:
        rgba(255,255,255,.05);
}


.btn-outline-white:hover {

    background:
        rgba(255,255,255,.12);
}


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

.hero-stats {

    display:
        flex;

    gap:
        35px;

    margin-top:
        40px;
}


.hero-stats div {

    display:
        flex;

    flex-direction:
        column;
}


.hero-stats strong {

    color:
        var(--heading);

    font-family:
        "Manrope";

    font-size:
        22px;
}


.hero-stats span {

    color:
        #8994a7;

    font-size:
        11px;
}


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

.hero-visual {
    position: relative;
}


.dashboard {

    padding:
        22px;

    background:
        #ffffff;

    border:
        1px solid
        #e1e7ef;

    border-radius:
        28px;

    box-shadow:
        0 30px 80px
        rgba(15,23,42,.13);

    transform:
        perspective(1000px)
        rotateY(-5deg)
        rotateX(2deg);
}


.dashboard-header {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        20px;
}


.dashboard-label {

    display:
        block;

    color:
        #98a2b3;

    font-size:
        9px;

    letter-spacing:
        1.4px;

    font-weight:
        700;
}


.dashboard-header h3 {

    color:
        var(--heading);

    font-family:
        "Manrope";

    font-size:
        18px;

    margin-top:
        3px;
}


.live-badge {

    padding:
        5px 9px;

    border-radius:
        50px;

    background:
        #eaf8ed;

    color:
        #218739;

    font-size:
        9px;

    font-weight:
        800;
}


.chart {

    height:
        220px;

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        17px;

    background:
        #f9fbfd;
}


.chart-grid {

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            #e8edf3 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            #e8edf3 1px,
            transparent 1px
        );

    background-size:
        40px 40px;
}


.chart svg {

    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;
}


.metrics {

    display:
        grid;

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

    gap:
        12px;

    margin-top:
        14px;
}


.metric {

    padding:
        15px;

    background:
        #f7f9fc;

    border:
        1px solid
        #e8edf3;

    border-radius:
        14px;
}


.metric span {

    display:
        block;

    color:
        #7a869d;

    font-size:
        10px;
}


.metric strong {

    color:
        var(--heading);

    font-size:
        21px;
}


/* =====================================================
   FLOATING CARDS
===================================================== */

.floating-card {

    position:
        absolute;

    padding:
        14px 17px;

    background:
        #ffffff;

    border:
        1px solid
        #e0e6ef;

    border-radius:
        15px;

    box-shadow:
        0 18px 45px
        rgba(15,23,42,.13);
}


.floating-card strong {

    display:
        block;

    color:
        var(--blue);

    font-family:
        "Manrope";

    font-size:
        22px;
}


.floating-card span {

    color:
        #7a869d;

    font-size:
        9px;
}


.floating-one {

    left:
        -35px;

    bottom:
        35px;
}


.floating-two {

    right:
        -30px;

    top:
        35px;
}


/* =====================================================
   TRUST
===================================================== */

.trust {

    padding:
        20px 0 80px;
}


.trust-inner {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    gap:
        20px;

    padding:
        25px 0;

    border-top:
        1px solid
        #e7ebf1;

    border-bottom:
        1px solid
        #e7ebf1;
}


.trust-title {

    color:
        #98a2b3;

    font-size:
        10px;

    letter-spacing:
        1.5px;

    font-weight:
        800;
}


.trust-items {

    display:
        flex;

    gap:
        35px;

    flex-wrap:
        wrap;
}


.trust-items span {

    color:
        #667085;

    font-size:
        13px;

    font-weight:
        700;
}


/* =====================================================
   SECTIONS
===================================================== */

section {
    padding:
        105px 0;
}


.section-heading {

    max-width:
        750px;

    margin-bottom:
        55px;
}


.section-heading.center {

    text-align:
        center;

    margin-left:
        auto;

    margin-right:
        auto;
}


.section-label {

    color:
        var(--blue);

    font-size:
        11px;

    font-weight:
        800;

    letter-spacing:
        2px;

    text-transform:
        uppercase;

    margin-bottom:
        14px;
}


.section-heading h2 {

    font-family:
        "Manrope",
        sans-serif;

    color:
        var(--heading);

    font-size:
        clamp(
            33px,
            4vw,
            52px
        );

    line-height:
        1.1;

    letter-spacing:
        -2px;

    margin-bottom:
        17px;
}


.section-heading p {

    color:
        var(--muted);

    font-size:
        17px;

    line-height:
        1.7;
}


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

.services-section {

    background:
        #ffffff;
}


.services-grid {

    display:
        grid;

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

    gap:
        26px;
}


/* =====================================================
   BLUE GRADIENT SERVICE CARD
===================================================== */

.service-card {

    position:
        relative;

    min-height:
        375px;

    padding:
        42px;

    overflow:
        hidden;

    border-radius:
        25px;

    background:
        linear-gradient(
            135deg,
            #063aa8 0%,
            #8aaaec 45%,
            #12bce8 100%
        );

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

    box-shadow:
        0 18px 45px
        rgba(7,78,190,.15);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


/* BIG CIRCULAR DESIGN */

.service-card::before {

    content:
        "";

    position:
        absolute;

    width:
        280px;

    height:
        280px;

    right:
        -145px;

    bottom:
        -145px;

    border-radius:
        50%;

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

    box-shadow:
        0 0 0 45px
        rgba(255,255,255,.025),
        0 0 0 90px
        rgba(255,255,255,.018);

    pointer-events:
        none;
}


/* SECOND GLOW */

.service-card::after {

    content:
        "";

    position:
        absolute;

    width:
        190px;

    height:
        190px;

    right:
        -110px;

    bottom:
        -90px;

    border-radius:
        50%;

    background:
        rgba(255,255,255,.09);

    filter:
        blur(25px);

    pointer-events:
        none;
}


/* HOVER */

.service-card:hover {

    transform:
        translateY(-9px);

    box-shadow:
        0 28px 65px
        rgba(7,78,190,.28);
}


/* =====================================================
   SERVICE ICON
===================================================== */

.service-icon {

    position:
        relative;

    z-index:
        2;

    width:
        75px;

    height:
        75px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    margin-bottom:
        38px;

    border-radius:
        20px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.19),
            rgba(255,255,255,.06)
        );

    border:
        1px solid
        rgba(255,255,255,.23);

    box-shadow:
        inset 0 1px 1px
        rgba(255,255,255,.20),

        0 8px 25px
        rgba(0,0,0,.10);

    backdrop-filter:
        blur(10px);
}


.service-icon span {

    color:
        #ffffff;

    font-size:
        31px;

    line-height:
        1;

    text-shadow:
        0 2px 8px
        rgba(0,0,0,.15);
}


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

.service-card h3 {

    position:
        relative;

    z-index:
        2;

    color:
        #ffffff;

    font-family:
        "Manrope",
        sans-serif;

    font-size:
        22px;

    line-height:
        1.3;

    letter-spacing:
        -.5px;

    margin-bottom:
        13px;
}


.service-card p {

    position:
        relative;

    z-index:
        2;

    color:
        rgba(255,255,255,.91);

    font-size:
        15px;

    line-height:
        1.7;

    margin-bottom:
        18px;
}


.card-link {

    position:
        relative;

    z-index:
        3;

    display:
        inline-block;

    color:
        #ffffff;

    font-size:
        13px;

    font-weight:
        700;

    opacity:
        .9;

    transition:
        .25s;
}


.card-link:hover {

    opacity:
        1;

    transform:
        translateX(4px);
}


/* =====================================================
   ABOUT
===================================================== */

.about-section {

    background:
        #f7f9fc;
}


.about-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        70px;

    align-items:
        center;
}


.about-content h2 {

    font-family:
        "Manrope";

    color:
        var(--heading);

    font-size:
        clamp(34px,4vw,50px);

    line-height:
        1.1;

    letter-spacing:
        -2px;

    margin-bottom:
        22px;
}


.about-content p {

    color:
        var(--muted);

    font-size:
        15px;

    margin-bottom:
        17px;
}


.stats-grid {

    display:
        grid;

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

    gap:
        15px;
}


.stat-card {

    padding:
        30px;

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        20px;

    box-shadow:
        0 7px 25px
        rgba(15,23,42,.04);

    transition:
        .3s;
}


.stat-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        0 15px 35px
        rgba(15,23,42,.08);
}


.stat-card strong {

    display:
        block;

    color:
        var(--blue);

    font-family:
        "Manrope";

    font-size:
        40px;

    line-height:
        1;

    margin-bottom:
        9px;
}


.stat-card span {

    color:
        var(--muted);

    font-size:
        13px;
}


/* =====================================================
   SOLUTIONS
===================================================== */

.solutions-section {

    background:
        #ffffff;
}


.solution-grid {

    display:
        grid;

    grid-template-columns:
        1.3fr .7fr;

    gap:
        18px;
}


.solution-main,
.solution-small {

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        23px;

    padding:
        35px;

    box-shadow:
        var(--shadow);

    position:
        relative;

    overflow:
        hidden;
}


.solution-main {

    min-height:
        390px;
}


.solution-icon {

    width:
        55px;

    height:
        55px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        15px;

    background:
        linear-gradient(
            135deg,
            #edf5ff,
            #eefbf0
        );

    color:
        var(--blue);

    font-size:
        23px;

    margin-bottom:
        20px;
}


.solution-main h3 {

    color:
        var(--heading);

    font-family:
        "Manrope";

    font-size:
        30px;

    margin-bottom:
        12px;
}


.solution-small h3 {

    color:
        var(--heading);

    font-family:
        "Manrope";

    font-size:
        20px;

    margin-bottom:
        8px;
}


.solution-main p,
.solution-small p {

    color:
        var(--muted);

    font-size:
        14px;
}


.solution-list {

    display:
        grid;

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

    gap:
        12px;

    margin-top:
        30px;
}


.solution-list div {

    padding:
        13px;

    border:
        1px solid
        #e7ebf1;

    border-radius:
        11px;

    background:
        #f7f9fc;

    color:
        #344054;

    font-size:
        13px;
}


.solution-side {

    display:
        grid;

    gap:
        18px;
}


.solution-small {

    min-height:
        186px;
}


/* =====================================================
   TECHNOLOGY
===================================================== */

.technology-section {

    background:
        #f7f9fc;
}


.tech-grid {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;
}


.tech {

    padding:
        14px 19px;

    background:
        #ffffff;

    border:
        1px solid
        #e0e6ee;

    border-radius:
        12px;

    color:
        #344054;

    font-size:
        13px;

    font-weight:
        600;

    transition:
        .25s;
}


.tech:hover {

    color:
        var(--blue);

    border-color:
        var(--blue);

    transform:
        translateY(-3px);

    box-shadow:
        0 8px 20px
        rgba(18,100,216,.08);
}


/* =====================================================
   PROCESS
===================================================== */

.process-section {

    background:
        #ffffff;
}


.process-grid {

    display:
        grid;

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

    gap:
        12px;
}


.process-card {

    padding:
        25px 18px;

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    box-shadow:
        0 5px 20px
        rgba(15,23,42,.04);

    transition:
        .3s;
}


.process-card:hover {

    transform:
        translateY(-5px);

    border-color:
        #c9daf4;
}


.process-card > span {

    display:
        block;

    color:
        var(--blue);

    font-size:
        12px;

    font-weight:
        800;

    margin-bottom:
        24px;
}


.process-card h3 {

    color:
        var(--heading);

    font-size:
        16px;

    margin-bottom:
        7px;
}


.process-card p {

    color:
        var(--muted);

    font-size:
        12px;
}


/* =====================================================
   INDUSTRIES
===================================================== */

.industries-section {

    background:
        #f7f9fc;
}


.industry-grid {

    display:
        grid;

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

    gap:
        15px;
}


.industry-card {

    padding:
        27px;

    background:
        #ffffff;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    text-align:
        center;

    box-shadow:
        0 5px 20px
        rgba(15,23,42,.04);

    transition:
        .3s;
}


.industry-card:hover {

    transform:
        translateY(-5px);

    border-color:
        var(--blue);

    color:
        var(--blue);

    box-shadow:
        0 12px 30px
        rgba(18,100,216,.09);
}


.industry-icon {

    display:
        block;

    font-size:
        28px;

    margin-bottom:
        8px;
}


.industry-card span {

    font-weight:
        600;

    color:
        #344054;
}


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

.contact-section {

    padding:
        55px 0 110px;

    background:
        #ffffff;
}


.cta-box {
    background: linear-gradient(
        135deg,
        #061b49 0%,
        #0a3d91 50%,
        #087bb5 100%
    );

    border-radius: 24px;
    padding: 60px;
    box-shadow: 0 20px 50px rgba(6, 58, 168, 0.18);
}


.cta-box::before {

    content:
        "";

    position:
        absolute;

    width:
        400px;

    height:
        400px;

    top:
        -250px;

    left:
        50%;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        rgba(18,100,216,.22);

    filter:
        blur(70px);
}


.cta-box > * {

    position:
        relative;

    z-index:
        2;
}


.cta-box .section-label {

    color:
        #55b5ff;
}


.cta-box h2 {

    color:
        #ffffff;

    font-family:
        "Manrope";

    font-size:
        clamp(
            35px,
            5vw,
            58px
        );

    line-height:
        1.08;

    letter-spacing:
        -2px;

    margin-bottom:
        16px;
}


.cta-box p {

    max-width:
        650px;

    margin:
        0 auto 30px;

    color:
        #aeb9d3;
}


/* =====================================================
   FOOTER
===================================================== */

footer {

    padding:
        70px 0 25px;

    background:
        #050816;

    color:
        #ffffff;
}


.footer-grid {

    display:
        grid;

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

    gap:
        50px;
}


.footer-brand p {

    max-width:
        370px;

    margin-top:
        18px;

    color:
        #8994ad;

    font-size:
        13px;
}


.footer-column h4 {

    color:
        #ffffff;

    font-size:
        14px;

    margin-bottom:
        18px;
}


.footer-column a {

    display:
        block;

    color:
        #8994ad;

    font-size:
        13px;

    margin-bottom:
        10px;

    transition:
        .2s;
}


.footer-column a:hover {

    color:
        #ffffff;
}


.footer-bottom {

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    margin-top:
        55px;

    padding-top:
        22px;

    border-top:
        1px solid
        rgba(255,255,255,.08);

    color:
        #68728b;

    font-size:
        12px;
}


.footer-bottom a:hover {

    color:
        #ffffff;
}


/* =====================================================
   SCROLL REVEAL
===================================================== */

.reveal {

    opacity:
        0;

    transform:
        translateY(25px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}


.reveal.active {

    opacity:
        1;

    transform:
        translateY(0);
}


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

@media (max-width: 1100px) {


    .hero-grid {

        grid-template-columns:
            1fr;

    }


    .hero-visual {

        width:
            100%;

        max-width:
            700px;

        margin:
            auto;
    }


    .services-grid {

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


    .process-grid {

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


    .industry-grid {

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


    .footer-grid {

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

}


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

@media (max-width: 700px) {


    .container {

        width:
            calc(100% - 28px);
    }


    /* NAV */

    .menu-button {

        display:
            block;
    }


    .nav-links {

        display:
            none;

        position:
            absolute;

        top:
            75px;

        left:
            14px;

        right:
            14px;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            3px;

        padding:
            15px;

        background:
            rgba(5,8,22,.98);

        border:
            1px solid
            rgba(255,255,255,.10);

        border-radius:
            17px;

        box-shadow:
            0 20px 50px
            rgba(0,0,0,.3);
    }


    .nav-links.active {

        display:
            flex;
    }


    .nav-links a {

        padding:
            10px;
    }


    .nav-button {

        text-align:
            center;
    }


    /* HERO */

    .hero {

        padding:
            130px 0 70px;
    }


    .hero h1 {

        font-size:
            45px;

        letter-spacing:
            -2px;
    }


    .hero-description {

        font-size:
            16px;
    }


    .dashboard {

        transform:
            none;

        padding:
            16px;
    }


    .floating-one {

        left:
            0;

        bottom:
            -25px;
    }


    .floating-two {

        right:
            0;

        top:
            -25px;
    }


    .hero-stats {

        gap:
            25px;
    }


    /* SECTIONS */

    section {

        padding:
            75px 0;
    }


    .section-heading h2 {

        font-size:
            35px;

        letter-spacing:
            -1.5px;
    }


    /* TRUST */

    .trust-inner {

        flex-direction:
            column;

        align-items:
            flex-start;
    }


    .trust-items {

        gap:
            18px;
    }


    /* SERVICES */

    .services-grid {

        grid-template-columns:
            1fr;

        gap:
            18px;
    }


    .service-card {

        min-height:
            340px;

        padding:
            30px;
    }


    .service-icon {

        width:
            65px;

        height:
            65px;

        margin-bottom:
            30px;
    }


    .service-card h3 {

        font-size:
            20px;
    }


    .service-card p {

        font-size:
            14px;
    }


    /* ABOUT */

    .about-grid {

        grid-template-columns:
            1fr;

        gap:
            40px;
    }


    .stats-grid {

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


    /* SOLUTIONS */

    .solution-grid {

        grid-template-columns:
            1fr;
    }


    .solution-list {

        grid-template-columns:
            1fr;
    }


    /* PROCESS */

    .process-grid {

        grid-template-columns:
            1fr;
    }


    /* INDUSTRIES */

    .industry-grid {

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


    /* TECHNOLOGY */

    .tech-grid {

        gap:
            8px;
    }


    .tech {

        padding:
            10px 13px;
    }


    /* CTA */

    .cta-box {

        padding:
            55px 20px;
    }


    /* FOOTER */

    .footer-grid {

        grid-template-columns:
            1fr;

        gap:
            35px;
    }


    .footer-bottom {

        flex-direction:
            column;

        gap:
            10px;
    }

}


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

@media (max-width: 420px) {


    .logo-name {

        font-size:
            17px;
    }


    .logo-image {

        width:
            42px;

        height:
            42px;
    }


    .hero h1 {

        font-size:
            39px;
    }


    .metrics {

        grid-template-columns:
            1fr;
    }


    .stats-grid {

        grid-template-columns:
            1fr;
    }


    .industry-grid {

        grid-template-columns:
            1fr;
    }
    

}