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

:root {

    --ja-home-bg: #07111f;

    --ja-home-bg-secondary: #0b1728;

    --ja-home-card: #101d30;

    --ja-home-card-light: #14243a;

    --ja-home-border: rgba(255,255,255,0.09);

    --ja-home-text: #f4f7fb;

    --ja-home-muted: #8c9bb0;

    --ja-home-primary: #00e5ff;

    --ja-home-secondary: #7c5cff;

    --ja-home-success: #39e58c;

    --ja-home-gradient:
        linear-gradient(
            135deg,
            #00e5ff,
            #7c5cff
        );

    --ja-home-radius: 18px;

    --ja-home-transition: 0.35s ease;

}


body.ja-home-light-mode {

    --ja-home-bg: #f4f7fb;

    --ja-home-bg-secondary: #ffffff;

    --ja-home-card: #ffffff;

    --ja-home-card-light: #f1f5fa;

    --ja-home-border: rgba(0,0,0,0.08);

    --ja-home-text: #0b1728;

    --ja-home-muted: #637083;

}


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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    background: var(--ja-home-bg);

    color: var(--ja-home-text);

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

    line-height: 1.6;

    transition:
        background 0.35s ease,
        color 0.35s ease;

}


a {

    color: inherit;

    text-decoration: none;

}


img {

    max-width: 100%;

    display: block;

}


button {

    font: inherit;

}


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

.ja-home-container {

    width: min(1180px, 92%);

    margin: auto;

}


/* =====================================================
   CONTACT PAGE — DIGITAL AI LOADER
===================================================== */

.ja-contact-loader {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:

        radial-gradient(
            circle at center,
            rgba(0, 255, 170, 0.08),
            transparent 30%
        ),

        #050708;

    color: #ffffff;

    transition:

        opacity 0.8s ease,

        visibility 0.8s ease;

}


.ja-contact-loader.ja-contact-loader-hidden {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}


/* LOADER CORE */

.ja-contact-loader-core {

    position: relative;

    width: 190px;

    height: 190px;

    display: flex;

    align-items: center;

    justify-content: center;

}


/* ROTATING RINGS */

.ja-contact-loader-ring {

    position: absolute;

    border-radius: 50%;

    border: 1px solid transparent;

}


.ja-contact-ring-one {

    width: 190px;

    height: 190px;

    border-top-color: #00ffaa;

    border-right-color: rgba(0, 255, 170, 0.25);

    animation: jaContactRotate 3s linear infinite;

}


.ja-contact-ring-two {

    width: 145px;

    height: 145px;

    border-bottom-color: #00d9ff;

    border-left-color: rgba(0, 217, 255, 0.25);

    animation: jaContactRotateReverse 2.5s linear infinite;

}


.ja-contact-ring-three {

    width: 105px;

    height: 105px;

    border-top-color: #ffffff;

    opacity: 0.6;

    animation: jaContactRotate 1.8s linear infinite;

}


/* IMAGE */

.ja-contact-loader-avatar {

    position: relative;

    width: 72px;

    height: 72px;

    padding: 4px;

    border-radius: 50%;

    background:

        linear-gradient(
            135deg,
            #00ffaa,
            #00d9ff
        );

    box-shadow:

        0 0 25px rgba(0, 255, 170, 0.5),

        0 0 60px rgba(0, 217, 255, 0.15);

    animation: jaContactPulse 2s ease-in-out infinite;

}


.ja-contact-loader-avatar img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    display: block;

}


/* INFORMATION */

.ja-contact-loader-info {

    margin-top: 35px;

    text-align: center;

}


.ja-contact-loader-status {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-size: 10px;

    letter-spacing: 2px;

    color: #00ffaa;

}


.ja-contact-loader-status i {

    font-size: 7px;

    animation: jaContactBlink 1s infinite;

}


.ja-contact-loader-info h2 {

    margin: 14px 0 5px;

    font-size: 25px;

    font-weight: 800;

    letter-spacing: -0.5px;

}


.ja-contact-loader-info p {

    margin: 0;

    color: #8c9898;

    font-size: 13px;

}


/* PROGRESS */

.ja-contact-loader-progress {

    width: 230px;

    height: 2px;

    margin: 22px auto 12px;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.1);

}


.ja-contact-loader-progress span {

    display: block;

    width: 40%;

    height: 100%;

    background:

        linear-gradient(
            90deg,
            transparent,
            #00ffaa,
            #00d9ff,
            transparent
        );

    animation: jaContactProgress 1.4s ease-in-out infinite;

}


.ja-contact-loader-info small {

    color: #596363;

    font-size: 10px;

    letter-spacing: 0.5px;

}


/* ANIMATIONS */

@keyframes jaContactRotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}


@keyframes jaContactRotateReverse {

    from {

        transform: rotate(360deg);

    }

    to {

        transform: rotate(0deg);

    }

}


@keyframes jaContactPulse {

    0%,

    100% {

        transform: scale(1);

        box-shadow:

            0 0 25px rgba(0, 255, 170, 0.5);

    }

    50% {

        transform: scale(1.08);

        box-shadow:

            0 0 45px rgba(0, 255, 170, 0.8);

    }

}


@keyframes jaContactProgress {

    0% {

        transform: translateX(-150%);

    }

    100% {

        transform: translateX(350%);

    }

}


@keyframes jaContactBlink {

    0%,

    100% {

        opacity: 1;

    }

    50% {

        opacity: 0.25;

    }

}


/* MOBILE */

@media (max-width: 600px) {

    .ja-contact-loader-core {

        width: 155px;

        height: 155px;

    }


    .ja-contact-ring-one {

        width: 155px;

        height: 155px;

    }


    .ja-contact-ring-two {

        width: 120px;

        height: 120px;

    }


    .ja-contact-ring-three {

        width: 88px;

        height: 88px;

    }


    .ja-contact-loader-info h2 {

        font-size: 22px;

    }


    .ja-contact-loader-progress {

        width: 200px;

    }

}


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

.ja-home-header {

    position: sticky;

    top: 0;

    z-index: 1000;

    border-bottom: 1px solid var(--ja-home-border);

    background:
        rgba(7,17,31,0.88);

    backdrop-filter: blur(18px);

}


body.ja-home-light-mode
.ja-home-header {

    background:
        rgba(255,255,255,0.88);

}


.ja-home-header-container {

    width: min(1240px, 94%);

    min-height: 78px;

    margin: auto;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.ja-home-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    font-weight: 800;

}


.ja-home-brand-image {

    width: 42px;

    height: 42px;

    padding: 2px;

    border-radius: 50%;

    background: var(--ja-home-gradient);

}


.ja-home-brand-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

}


.ja-home-brand-name {

    font-size: 17px;

}


.ja-home-desktop-nav {

    display: flex;

    align-items: center;

    gap: 24px;

}


.ja-home-desktop-nav a {

    position: relative;

    color: var(--ja-home-muted);

    font-size: 13px;

    transition: var(--ja-home-transition);

}


.ja-home-desktop-nav a:hover {

    color: var(--ja-home-primary);

}


.ja-home-header-actions {

    display: flex;

    align-items: center;

    gap: 12px;

}


.ja-home-theme-button {

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

    cursor: pointer;

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

    border-radius: 50%;

    background: var(--ja-home-card);

    color: var(--ja-home-text);

}


.ja-home-mobile-button {

    display: none;

    width: 40px;

    height: 40px;

    cursor: pointer;

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

    border-radius: 8px;

    background: var(--ja-home-card);

}


.ja-home-mobile-button span {

    display: block;

    width: 20px;

    height: 2px;

    margin: 4px auto;

    background: var(--ja-home-text);

}


.ja-home-mobile-nav {

    display: none;

}


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

.ja-home-hero {

    min-height: 720px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 80% 20%,
            rgba(0,229,255,0.08),
            transparent 35%
        );

}


.ja-home-hero-container {

    width: min(1180px, 92%);

    margin: auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: 80px;

}


.ja-home-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 8px 14px;

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

    border-radius: 50px;

    color: var(--ja-home-muted);

    font-size: 12px;

}


.ja-home-status-dot {

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--ja-home-success);

    box-shadow:
        0 0 15px var(--ja-home-success);

}


.ja-home-hero h1 {

    max-width: 650px;

    margin-top: 25px;

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

    line-height: 1.05;

    letter-spacing: -3px;

}


.ja-home-hero h1 span {

    display: block;

    background: var(--ja-home-gradient);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

}


.ja-home-hero-content > p {

    max-width: 590px;

    margin-top: 28px;

    color: var(--ja-home-muted);

    font-size: 16px;

}


.ja-home-hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-top: 35px;

}


.ja-home-primary-button,
.ja-home-secondary-button,
.ja-home-outline-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 14px 20px;

    border-radius: 10px;

    font-size: 13px;

    font-weight: 700;

    transition: var(--ja-home-transition);

}


.ja-home-primary-button {

    background: var(--ja-home-gradient);

    color: #06101e;

}


.ja-home-primary-button:hover {

    transform: translateY(-4px);

}


.ja-home-secondary-button,
.ja-home-outline-button {

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

    color: var(--ja-home-text);

}


.ja-home-secondary-button:hover,
.ja-home-outline-button:hover {

    border-color: var(--ja-home-primary);

    color: var(--ja-home-primary);

}


.ja-home-hero-socials {

    display: flex;

    gap: 10px;

    margin-top: 35px;

}


.ja-home-hero-socials a {

    width: 38px;

    height: 38px;

    display: grid;

    place-items: center;

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

    border-radius: 50%;

    color: var(--ja-home-muted);

    transition: var(--ja-home-transition);

}


.ja-home-hero-socials a:hover {

    color: var(--ja-home-primary);

    border-color: var(--ja-home-primary);

    transform: translateY(-4px);

}


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

.ja-home-hero-visual {

    position: relative;

    min-height: 540px;

    display: grid;

    place-items: center;

}


.ja-home-profile-wrapper {

    position: relative;

    z-index: 2;

    width: 330px;

    height: 330px;

    padding: 10px;

    border-radius: 50%;

    background: var(--ja-home-gradient);

}


.ja-home-profile-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

    border: 8px solid var(--ja-home-bg);

}


.ja-home-orbit {

    position: absolute;

    border: 1px solid rgba(0,229,255,0.18);

    border-radius: 50%;

}


.ja-home-orbit-one {

    width: 480px;

    height: 480px;

}


.ja-home-orbit-two {

    width: 600px;

    height: 600px;

    border-color: rgba(124,92,255,0.14);

}


.ja-home-floating-card {

    position: absolute;

    z-index: 4;

    min-width: 145px;

    padding: 15px;

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

    border-radius: 14px;

    background:
        rgba(16,29,48,0.9);

    backdrop-filter: blur(15px);

    box-shadow:
        0 20px 50px rgba(0,0,0,0.25);

    animation:
        jaHomeFloat 4s ease-in-out infinite;

}


.ja-home-floating-card strong {

    display: block;

    color: var(--ja-home-primary);

    font-size: 25px;

}


.ja-home-floating-card span {

    display: block;

    color: var(--ja-home-muted);

    font-size: 11px;

}


.ja-home-card-experience {

    top: 15%;

    left: 0;

}


.ja-home-card-skills {

    top: 55%;

    right: 0;

    animation-delay: 0.8s;

}


.ja-home-card-clients {

    bottom: 8%;

    left: 12%;

    animation-delay: 1.5s;

}


@keyframes jaHomeFloat {

    0%,
    100% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

}


/* =====================================================
   SECTION GENERAL
===================================================== */

.ja-home-introduction,
.ja-home-services,
.ja-home-projects,
.ja-home-recent-work,
.ja-home-skills,
.ja-home-clients,
.ja-home-social {

    padding: 110px 0;

}


.ja-home-companies,
.ja-home-timeline {

    padding: 110px 0;

    background: var(--ja-home-bg-secondary);

}


.ja-home-section-heading {

    max-width: 650px;

    margin-bottom: 50px;

}


.ja-home-section-heading span {

    color: var(--ja-home-primary);

    font-size: 11px;

    letter-spacing: 2px;

    font-weight: 800;

}


.ja-home-section-heading h2 {

    margin-top: 12px;

    font-size: clamp(30px, 4vw, 48px);

    line-height: 1.1;

}


/* =====================================================
   INTRODUCTION
===================================================== */

.ja-home-introduction-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 70px;

}


.ja-home-large-text {

    font-size: 30px;

    line-height: 1.3;

}


.ja-home-introduction-grid p:not(.ja-home-large-text) {

    color: var(--ja-home-muted);

}


.ja-home-text-link {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 25px;

    color: var(--ja-home-primary);

    font-weight: 700;

}


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

.ja-home-stats {

    padding: 35px 0;

    border-top: 1px solid var(--ja-home-border);

    border-bottom: 1px solid var(--ja-home-border);

}


.ja-home-stats-grid {

    display: grid;

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

}


.ja-home-stat-item {

    padding: 20px;

    text-align: center;

    border-right: 1px solid var(--ja-home-border);

}


.ja-home-stat-item:last-child {

    border-right: none;

}


.ja-home-stat-item strong {

    display: block;

    font-size: 40px;

    color: var(--ja-home-primary);

}


.ja-home-stat-item span {

    color: var(--ja-home-muted);

    font-size: 13px;

}


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

.ja-home-services-grid {

    display: grid;

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

    gap: 20px;

}


.ja-home-service-card {

    padding: 28px;

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

    border-radius: var(--ja-home-radius);

    background: var(--ja-home-card);

    transition: var(--ja-home-transition);

}


.ja-home-service-card:hover {

    transform: translateY(-10px);

    border-color: var(--ja-home-primary);

}


.ja-home-service-icon {

    width: 52px;

    height: 52px;

    display: grid;

    place-items: center;

    border-radius: 14px;

    background: var(--ja-home-gradient);

    color: #07111f;

    font-size: 20px;

}


.ja-home-service-card h3 {

    margin-top: 25px;

    font-size: 18px;

}


.ja-home-service-card p {

    margin-top: 12px;

    color: var(--ja-home-muted);

    font-size: 13px;

}


.ja-home-service-card a {

    display: inline-flex;

    gap: 8px;

    margin-top: 20px;

    color: var(--ja-home-primary);

    font-size: 12px;

    font-weight: 700;

}


/* =====================================================
   COMPANIES
===================================================== */

.ja-home-companies-grid {

    display: grid;

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

    gap: 20px;

}


.ja-home-company-card {

    padding: 25px;

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

    border-radius: var(--ja-home-radius);

    background: var(--ja-home-card);

    transition: var(--ja-home-transition);

}


.ja-home-company-card:hover {

    transform: translateY(-8px);

    border-color: var(--ja-home-primary);

}


.ja-home-company-logo {

    width: 60px;

    height: 60px;

    padding: 6px;

    border-radius: 14px;

    background: var(--ja-home-gradient);

}


.ja-home-company-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

    border-radius: 9px;

}


.ja-home-company-card h3 {

    margin-top: 20px;

}


.ja-home-company-card p {

    margin: 8px 0 18px;

    color: var(--ja-home-muted);

    font-size: 13px;

}


.ja-home-company-card a {

    color: var(--ja-home-primary);

    font-size: 12px;

}


/* =====================================================
   PROJECTS
===================================================== */

.ja-home-projects-grid {

    display: grid;

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

    gap: 20px;

}


.ja-home-project-card {

    position: relative;

    padding: 32px;

    min-height: 260px;

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

    border-radius: var(--ja-home-radius);

    background: var(--ja-home-card);

    transition: var(--ja-home-transition);

}


.ja-home-project-card:hover {

    transform: translateY(-8px);

}


.ja-home-project-number {

    color: var(--ja-home-primary);

    font-size: 13px;

}


.ja-home-project-card h3 {

    margin-top: 40px;

}


.ja-home-project-card p {

    margin-top: 15px;

    color: var(--ja-home-muted);

    font-size: 13px;

}


.ja-home-project-card a {

    display: inline-block;

    margin-top: 20px;

    color: var(--ja-home-primary);

    font-size: 12px;

}


/* =====================================================
   RECENT POSTS
===================================================== */

.ja-home-posts-grid {

    display: grid;

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

    gap: 20px;

}


.ja-home-post-card {

    padding: 28px;

    border-left: 2px solid var(--ja-home-primary);

    background: var(--ja-home-card);

}


.ja-home-post-card > span {

    color: var(--ja-home-primary);

    font-size: 11px;

}


.ja-home-post-card h3 {

    margin-top: 18px;

}


.ja-home-post-card p {

    margin-top: 12px;

    color: var(--ja-home-muted);

    font-size: 13px;

}


.ja-home-post-card a {

    display: inline-block;

    margin-top: 20px;

    color: var(--ja-home-primary);

    font-size: 12px;

}


/* =====================================================
   SKILLS
===================================================== */

.ja-home-skills-cloud {

    display: flex;

    flex-wrap: wrap;

    gap: 12px;

}


.ja-home-skills-cloud span {

    padding: 11px 16px;

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

    border-radius: 50px;

    color: var(--ja-home-muted);

    font-size: 12px;

    transition: var(--ja-home-transition);

}


.ja-home-skills-cloud span:hover {

    color: var(--ja-home-primary);

    border-color: var(--ja-home-primary);

    transform: translateY(-4px);

}


/* =====================================================
   TIMELINE
===================================================== */

.ja-home-timeline-list {

    max-width: 800px;

}


.ja-home-timeline-item {

    display: grid;

    grid-template-columns: 70px 1fr;

    gap: 25px;

    padding: 25px 0;

    border-bottom: 1px solid var(--ja-home-border);

}


.ja-home-timeline-item > span {

    color: var(--ja-home-primary);

    font-weight: 800;

}


.ja-home-timeline-item p {

    margin-top: 8px;

    color: var(--ja-home-muted);

    font-size: 13px;

}


/* =====================================================
   CLIENTS
===================================================== */

.ja-home-clients-grid {

    display: grid;

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

    gap: 20px;

}


.ja-home-client-card {

    padding: 30px;

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

    border-radius: var(--ja-home-radius);

    background: var(--ja-home-card);

}


.ja-home-client-stars {

    color: #ffc107;

    letter-spacing: 3px;

}


.ja-home-client-card p {

    margin: 20px 0;

    color: var(--ja-home-muted);

    font-size: 14px;

}


.ja-home-client-card strong {

    display: block;

}


.ja-home-client-card span {

    color: var(--ja-home-primary);

    font-size: 12px;

}


/* =====================================================
   SOCIAL
===================================================== */

.ja-home-social-grid {

    display: grid;

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

    gap: 15px;

}


.ja-home-social-card {

    display: flex;

    flex-direction: column;

    gap: 8px;

    padding: 22px;

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

    border-radius: 14px;

    background: var(--ja-home-card);

    transition: var(--ja-home-transition);

}


.ja-home-social-card:hover {

    border-color: var(--ja-home-primary);

    transform: translateY(-6px);

}


.ja-home-social-card i {

    color: var(--ja-home-primary);

    font-size: 22px;

}


.ja-home-social-card span {

    color: var(--ja-home-muted);

    font-size: 12px;

}


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

.ja-home-contact-cta {

    padding: 80px 0;

}


.ja-home-contact-box {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

    padding: 55px;

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

    border-radius: 24px;

    background:

        radial-gradient(
            circle at 90% 10%,
            rgba(0,229,255,0.15),
            transparent 35%
        ),

        var(--ja-home-card);

}


.ja-home-contact-box > div > span {

    color: var(--ja-home-primary);

    font-size: 11px;

    letter-spacing: 2px;

}


.ja-home-contact-box h2 {

    max-width: 650px;

    margin-top: 12px;

    font-size: clamp(28px, 4vw, 48px);

    line-height: 1.1;

}


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

.ja-home-footer {

    padding: 70px 0 20px;

    border-top: 1px solid var(--ja-home-border);

    background: var(--ja-home-bg-secondary);

}


.ja-home-footer-grid {

    display: grid;

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

    gap: 50px;

}


.ja-home-footer-brand {

    font-size: 22px;

    font-weight: 800;

}


.ja-home-footer-grid p {

    max-width: 300px;

    margin-top: 15px;

    color: var(--ja-home-muted);

    font-size: 13px;

}


.ja-home-footer-grid h3 {

    margin-bottom: 18px;

    font-size: 15px;

}


.ja-home-footer-grid a:not(.ja-home-footer-brand) {

    display: block;

    margin: 10px 0;

    color: var(--ja-home-muted);

    font-size: 13px;

}


.ja-home-footer-grid a:hover {

    color: var(--ja-home-primary);

}


.ja-home-footer-bottom {

    display: flex;

    justify-content: space-between;

    gap: 20px;

    margin-top: 50px;

    padding-top: 20px;

    border-top: 1px solid var(--ja-home-border);

    color: var(--ja-home-muted);

    font-size: 11px;

}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1050px) {


    .ja-home-desktop-nav {

        gap: 14px;

    }


    .ja-home-services-grid,
    .ja-home-companies-grid {

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

    }


}


@media (max-width: 850px) {


    .ja-home-desktop-nav {

        display: none;

    }


    .ja-home-mobile-button {

        display: block;

    }


    .ja-home-mobile-nav {

        display: none;

        padding: 15px 5%;

        border-top: 1px solid var(--ja-home-border);

        background: var(--ja-home-bg-secondary);

    }


    .ja-home-mobile-nav.ja-home-mobile-nav-active {

        display: block;

    }


    .ja-home-mobile-nav a {

        display: flex;

        align-items: center;

        gap: 12px;

        padding: 14px 0;

        color: var(--ja-home-muted);

        border-bottom: 1px solid var(--ja-home-border);

    }


    .ja-home-hero-container {

        grid-template-columns: 1fr;

        gap: 40px;

        padding: 80px 0;

    }


    .ja-home-hero-visual {

        min-height: 480px;

        order: -1;

    }


    .ja-home-introduction-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .ja-home-stats-grid {

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

    }


    .ja-home-stat-item:nth-child(2) {

        border-right: none;

    }


    .ja-home-projects-grid,
    .ja-home-posts-grid,
    .ja-home-clients-grid {

        grid-template-columns: 1fr;

    }


    .ja-home-social-grid {

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

    }


    .ja-home-contact-box {

        flex-direction: column;

        align-items: flex-start;

    }


}


@media (max-width: 600px) {


    .ja-home-header-container {

        min-height: 68px;

    }


    .ja-home-brand-name {

        font-size: 15px;

    }


    .ja-home-hero h1 {

        font-size: 42px;

        letter-spacing: -2px;

    }


    .ja-home-profile-wrapper {

        width: 240px;

        height: 240px;

    }


    .ja-home-orbit-one {

        width: 350px;

        height: 350px;

    }


    .ja-home-orbit-two {

        width: 430px;

        height: 430px;

    }


    .ja-home-floating-card {

        min-width: 120px;

        padding: 11px;

    }


    .ja-home-card-experience {

        left: 0;

    }


    .ja-home-card-skills {

        right: 0;

    }


    .ja-home-services-grid,
    .ja-home-companies-grid {

        grid-template-columns: 1fr;

    }


    .ja-home-social-grid {

        grid-template-columns: 1fr;

    }


    .ja-home-large-text {

        font-size: 25px;

    }


    .ja-home-contact-box {

        padding: 30px;

    }


    .ja-home-footer-grid {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .ja-home-footer-bottom {

        flex-direction: column;

    }

}