/* =====================================================
   CONTACT PAGE
===================================================== */

:root {

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

    --ja-contact-bg-deep: #040912;

    --ja-contact-card: #0c1929;

    --ja-contact-card-light: #102238;

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

    --ja-contact-text: #f5f7fb;

    --ja-contact-muted: #91a0b5;

    --ja-contact-accent: #00e5ff;

    --ja-contact-accent-two: #8b5cf6;

    --ja-contact-success: #27e38b;

    --ja-contact-radius: 22px;

    --ja-contact-transition: all .35s ease;

}


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

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

    background:

        radial-gradient(

            circle at 10% 10%,

            rgba(0,229,255,.08),

            transparent 30%

        ),

        var(--ja-contact-bg);

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

    line-height: 1.6;

}


body.ja-contact-light {

    --ja-contact-bg: #f4f7fb;

    --ja-contact-bg-deep: #ffffff;

    --ja-contact-card: #ffffff;

    --ja-contact-card-light: #f1f5f9;

    --ja-contact-border: rgba(0,0,0,.1);

    --ja-contact-text: #101827;

    --ja-contact-muted: #5f6b7b;

}


a {

    color: inherit;

    text-decoration: none;

}


button,

input,

textarea,

select {

    font: inherit;

}


button {

    cursor: pointer;

}


/* =====================================================
   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-contact-header {

    position: sticky;

    top: 0;

    z-index: 1000;

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

    background: rgba(4,9,18,.86);

    backdrop-filter: blur(20px);

}


.ja-contact-header-inner {

    max-width: 1400px;

    min-height: 78px;

    margin: auto;

    padding: 0 5%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 30px;

}


.ja-contact-brand {

    display: flex;

    align-items: center;

    gap: 12px;

    font-family: "Space Grotesk", sans-serif;

    font-size: 18px;

    font-weight: 800;

    white-space: nowrap;

}


.ja-contact-brand-logo {

    width: 42px;

    height: 42px;

    padding: 2px;

    border-radius: 50%;

    background: linear-gradient(

        135deg,

        var(--ja-contact-accent),

        var(--ja-contact-accent-two)

    );

}


.ja-contact-brand-logo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    border-radius: 50%;

}


.ja-contact-desktop-nav {

    display: flex;

    align-items: center;

    gap: 25px;

}


.ja-contact-desktop-nav a {

    position: relative;

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

    font-size: 13px;

    font-weight: 600;

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

}


.ja-contact-desktop-nav a:hover,

.ja-contact-desktop-nav a.ja-contact-active {

    color: var(--ja-contact-accent);

}


.ja-contact-desktop-nav a.ja-contact-active::after {

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: -10px;

    height: 2px;

    background: var(--ja-contact-accent);

}


.ja-contact-header-actions {

    display: flex;

    align-items: center;

    gap: 12px;

}


.ja-contact-theme,

.ja-contact-menu {

    width: 40px;

    height: 40px;

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

    border-radius: 12px;

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

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

}


.ja-contact-theme:hover {

    color: var(--ja-contact-accent);

}


.ja-contact-menu {

    display: none;

    padding: 9px;

}


.ja-contact-menu span {

    display: block;

    height: 2px;

    margin: 4px 0;

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

}


.ja-contact-mobile-nav {

    display: none;

}


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

.ja-contact-hero {

    max-width: 1400px;

    margin: auto;

    padding: 110px 5% 100px;

}


.ja-contact-hero-grid {

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    align-items: center;

    gap: 80px;

}


.ja-contact-eyebrow,

.ja-contact-section-heading > span,

.ja-contact-form-label,

.ja-contact-ai-intro > span,

.ja-contact-final-cta > span {

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: var(--ja-contact-accent);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;

}


.ja-contact-hero h1 {

    max-width: 750px;

    margin: 25px 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(48px, 6vw, 88px);

    line-height: 1.02;

    letter-spacing: -4px;

}


.ja-contact-hero h1 span,

.ja-contact-section-heading h2 span,

.ja-contact-form-wrapper h2 span,

.ja-contact-ai-intro h2 span,

.ja-contact-final-cta h2 span {

    color: var(--ja-contact-accent);

}


.ja-contact-hero-content > p {

    max-width: 650px;

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

    font-size: 17px;

}


.ja-contact-hero-status {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 10px;

    margin: 28px 0;

}


.ja-contact-online-dot {

    width: 10px;

    height: 10px;

    border-radius: 50%;

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

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

}


.ja-contact-hero-status strong {

    font-size: 13px;

}


.ja-contact-hero-status small {

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

}


.ja-contact-hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 15px;

}


.ja-contact-primary-button,

.ja-contact-whatsapp-button,

.ja-contact-map-button,

.ja-contact-final-cta a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 12px;

    padding: 14px 22px;

    border-radius: 12px;

    font-size: 13px;

    font-weight: 800;

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

}


.ja-contact-primary-button,

.ja-contact-final-cta a {

    background: var(--ja-contact-accent);

    color: #031019;

}


.ja-contact-primary-button:hover,

.ja-contact-final-cta a:hover {

    transform: translateY(-4px);

    box-shadow: 0 15px 35px rgba(0,229,255,.2);

}


.ja-contact-whatsapp-button {

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

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

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

}


.ja-contact-whatsapp-button:hover {

    border-color: var(--ja-contact-success);

    color: var(--ja-contact-success);

}


.ja-contact-profile-area {

    position: relative;

}


.ja-contact-profile-glow {

    position: absolute;

    inset: 10%;

    background: var(--ja-contact-accent);

    opacity: .12;

    filter: blur(80px);

}


.ja-contact-profile-card {

    position: relative;

    overflow: hidden;

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

    border-radius: 30px;

    background: linear-gradient(

        145deg,

        var(--ja-contact-card),

        var(--ja-contact-bg-deep)

    );

    box-shadow: 0 30px 80px rgba(0,0,0,.3);

}


.ja-contact-profile-image-wrap {

    position: relative;

    height: 440px;

    overflow: hidden;

}


.ja-contact-profile-image {

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center top;

}


.ja-contact-profile-online {

    position: absolute;

    right: 20px;

    bottom: 20px;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    border: 1px solid rgba(39,227,139,.3);

    border-radius: 30px;

    background: rgba(4,9,18,.85);

    color: var(--ja-contact-success);

    font-size: 10px;

    font-weight: 800;

}


.ja-contact-profile-online i {

    font-size: 7px;

}


.ja-contact-profile-info {

    padding: 28px;

}


.ja-contact-profile-info > span {

    color: var(--ja-contact-accent);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

}


.ja-contact-profile-info h2 {

    margin: 5px 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: 32px;

}


.ja-contact-profile-info p {

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

    font-size: 14px;

}


.ja-contact-profile-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    margin-top: 20px;

}


.ja-contact-profile-tags span {

    padding: 7px 10px;

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

    border-radius: 8px;

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

    font-size: 10px;

}


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

.ja-contact-info-section,

.ja-contact-form-section,

.ja-contact-location-section,

.ja-contact-ai-section {

    max-width: 1400px;

    margin: auto;

    padding: 100px 5%;

}


.ja-contact-section-heading {

    max-width: 700px;

    margin-bottom: 45px;

}


.ja-contact-section-heading h2,

.ja-contact-form-wrapper h2,

.ja-contact-ai-intro h2 {

    margin: 15px 0;

    font-family: "Space Grotesk", sans-serif;

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

    line-height: 1.1;

}


.ja-contact-section-heading p,

.ja-contact-form-wrapper > p,

.ja-contact-ai-intro p {

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

}


/* =====================================================
   INFO CARDS
===================================================== */

.ja-contact-cards {

    display: grid;

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

    gap: 18px;

}


.ja-contact-info-card {

    position: relative;

    min-height: 210px;

    padding: 25px;

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

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

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

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

}


.ja-contact-info-card:hover {

    transform: translateY(-8px);

    border-color: var(--ja-contact-accent);

}


.ja-contact-info-icon {

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border-radius: 15px;

    background: rgba(0,229,255,.1);

    color: var(--ja-contact-accent);

    font-size: 21px;

}


.ja-contact-info-card span {

    color: var(--ja-contact-accent);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.ja-contact-info-card h3 {

    margin: 8px 0;

    font-size: 17px;

    word-break: break-word;

}


.ja-contact-info-card p {

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

    font-size: 12px;

}


.ja-contact-card-arrow {

    position: absolute;

    top: 25px;

    right: 25px;

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

    font-size: 12px;

}


.ja-contact-whatsapp-card:hover {

    border-color: var(--ja-contact-success);

}


.ja-contact-whatsapp-card:hover .ja-contact-info-icon {

    color: var(--ja-contact-success);

}


/* =====================================================
   FORM
===================================================== */

.ja-contact-form-grid {

    display: grid;

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

    gap: 35px;

}


.ja-contact-form-wrapper,

.ja-contact-why-card {

    padding: 40px;

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

    border-radius: 25px;

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

}


.ja-contact-form-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 15px;

}


.ja-contact-input-group {

    margin-top: 22px;

}


.ja-contact-input-group label {

    display: block;

    margin-bottom: 8px;

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

    font-size: 12px;

    font-weight: 700;

}


.ja-contact-input-group input,

.ja-contact-input-group select,

.ja-contact-input-group textarea {

    width: 100%;

    padding: 14px 16px;

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

    border-radius: 10px;

    outline: none;

    background: var(--ja-contact-bg-deep);

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

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

}


.ja-contact-input-group textarea {

    resize: vertical;

}


.ja-contact-input-group input:focus,

.ja-contact-input-group select:focus,

.ja-contact-input-group textarea:focus {

    border-color: var(--ja-contact-accent);

    box-shadow: 0 0 0 3px rgba(0,229,255,.08);

}


.ja-contact-submit-button {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-top: 25px;

    padding: 14px 22px;

    border: none;

    border-radius: 10px;

    background: var(--ja-contact-accent);

    color: #031019;

    font-weight: 800;

}


.ja-contact-form-message {

    margin-top: 15px;

    color: var(--ja-contact-success);

    font-size: 13px;

}


.ja-contact-why-card {

    background:

        linear-gradient(

            145deg,

            rgba(0,229,255,.12),

            var(--ja-contact-card)

        );

}


.ja-contact-why-header {

    display: flex;

    justify-content: space-between;

    color: var(--ja-contact-accent);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.ja-contact-why-card h3 {

    margin: 35px 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: 30px;

    line-height: 1.2;

}


.ja-contact-why-list {

    display: grid;

    gap: 18px;

}


.ja-contact-why-list div {

    display: flex;

    align-items: center;

    gap: 12px;

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

    font-size: 13px;

}


.ja-contact-why-list i {

    color: var(--ja-contact-success);

}


.ja-contact-why-bottom {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-top: 40px;

    padding-top: 25px;

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

}


.ja-contact-why-bottom strong {

    color: var(--ja-contact-accent);

    font-size: 32px;

}


.ja-contact-why-bottom span {

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

    font-size: 12px;

}


/* =====================================================
   LOCATION
===================================================== */

.ja-contact-location-grid {

    display: grid;

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

    gap: 25px;

}


.ja-contact-location-details {

    padding: 35px;

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

    border-radius: 25px;

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

}


.ja-contact-location-icon {

    width: 60px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 25px;

    border-radius: 18px;

    background: rgba(139,92,246,.15);

    color: var(--ja-contact-accent-two);

    font-size: 25px;

}


.ja-contact-location-details > span {

    color: var(--ja-contact-accent);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.ja-contact-location-details h3 {

    margin: 12px 0;

    font-family: "Space Grotesk", sans-serif;

    font-size: 25px;

}


.ja-contact-location-details p {

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

}


.ja-contact-map-button {

    margin-top: 25px;

    background: var(--ja-contact-accent);

    color: #031019;

}


.ja-contact-map {

    min-height: 430px;

    overflow: hidden;

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

    border-radius: 25px;

}


.ja-contact-map iframe {

    width: 100%;

    height: 100%;

    min-height: 430px;

    border: 0;

    filter: grayscale(.8) contrast(1.1);

}


/* =====================================================
   AI CHAT
===================================================== */

.ja-contact-ai-section {

    display: grid;

    grid-template-columns: .8fr 1.2fr;

    align-items: center;

    gap: 60px;

}


.ja-contact-ai-chat {

    overflow: hidden;

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

    border-radius: 25px;

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

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

}


.ja-contact-ai-header {

    display: flex;

    align-items: center;

    gap: 12px;

    padding: 20px;

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

}


.ja-contact-ai-avatar,

.ja-contact-ai-message-avatar {

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(

        135deg,

        var(--ja-contact-accent),

        var(--ja-contact-accent-two)

    );

    color: #06101b;

}


.ja-contact-ai-avatar {

    width: 42px;

    height: 42px;

}


.ja-contact-ai-header strong {

    display: block;

    font-size: 14px;

}


.ja-contact-ai-header span {

    color: var(--ja-contact-success);

    font-size: 10px;

}


.ja-contact-ai-header span i {

    font-size: 7px;

}


.ja-contact-ai-sparkle {

    margin-left: auto;

    color: var(--ja-contact-accent);

}


.ja-contact-ai-messages {

    height: 300px;

    padding: 20px;

    overflow-y: auto;

}


.ja-contact-ai-message {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 15px;

}


.ja-contact-ai-message-avatar {

    flex: 0 0 28px;

    width: 28px;

    height: 28px;

    font-size: 11px;

}


.ja-contact-ai-message p {

    max-width: 80%;

    padding: 11px 14px;

    border-radius: 12px;

    background: var(--ja-contact-card-light);

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

    font-size: 12px;

}


.ja-contact-ai-user {

    justify-content: flex-end;

}


.ja-contact-ai-user p {

    background: var(--ja-contact-accent);

    color: #031019;

}


.ja-contact-ai-suggestions {

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

    padding: 0 20px 15px;

}


.ja-contact-ai-suggestions button {

    padding: 8px 11px;

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

    border-radius: 8px;

    background: transparent;

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

    font-size: 10px;

}


.ja-contact-ai-suggestions button:hover {

    border-color: var(--ja-contact-accent);

    color: var(--ja-contact-accent);

}


.ja-contact-ai-form {

    display: flex;

    gap: 10px;

    padding: 15px 20px 20px;

}


.ja-contact-ai-form input {

    flex: 1;

    min-width: 0;

    padding: 13px;

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

    border-radius: 10px;

    outline: none;

    background: var(--ja-contact-bg-deep);

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

}


.ja-contact-ai-form button {

    width: 45px;

    border: none;

    border-radius: 10px;

    background: var(--ja-contact-accent);

    color: #031019;

}


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

.ja-contact-final-cta {

    max-width: 1000px;

    margin: 50px auto 100px;

    padding: 80px 30px;

    text-align: center;

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

    border-radius: 30px;

    background:

        radial-gradient(

            circle at center,

            rgba(0,229,255,.13),

            transparent 60%

        );

}


.ja-contact-final-cta h2 {

    margin: 20px auto 30px;

    max-width: 700px;

    font-family: "Space Grotesk", sans-serif;

    font-size: clamp(38px, 5vw, 65px);

    line-height: 1.05;

}


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

.ja-contact-footer {

    padding: 70px 5% 25px;

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

    background: var(--ja-contact-bg-deep);

}


.ja-contact-footer-grid {

    max-width: 1400px;

    margin: auto;

    display: grid;

    grid-template-columns: 1.5fr 1fr 1.2fr 1fr;

    gap: 50px;

}


.ja-contact-footer-logo {

    display: flex;

    align-items: center;

    gap: 10px;

    font-family: "Space Grotesk", sans-serif;

    font-weight: 800;

}


.ja-contact-footer-logo img {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

}


.ja-contact-footer-brand p {

    max-width: 300px;

    margin-top: 18px;

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

    font-size: 13px;

}


.ja-contact-footer h4 {

    margin-bottom: 20px;

    color: var(--ja-contact-accent);

    font-size: 12px;

    letter-spacing: 1px;

}


.ja-contact-footer-grid > div:not(:first-child) {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.ja-contact-footer-grid a,

.ja-contact-footer-grid span {

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

    font-size: 12px;

}


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

    color: var(--ja-contact-accent);

}


.ja-contact-footer-socials {

    display: flex;

    flex-direction: row !important;

    gap: 10px !important;

}


.ja-contact-footer-socials a {

    width: 38px;

    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

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

    border-radius: 10px;

}


.ja-contact-footer-bottom {

    max-width: 1400px;

    margin: 60px auto 0;

    padding-top: 20px;

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

    display: flex;

    justify-content: space-between;

    gap: 20px;

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

    font-size: 11px;

}


.ja-contact-footer-bottom i {

    color: #ff5470;

}


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

@media (max-width: 1100px) {


    .ja-contact-desktop-nav {

        gap: 14px;

    }


    .ja-contact-cards {

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

    }


    .ja-contact-hero-grid,

    .ja-contact-form-grid,

    .ja-contact-location-grid,

    .ja-contact-ai-section {

        grid-template-columns: 1fr;

    }


    .ja-contact-profile-area {

        max-width: 600px;

        margin: auto;

    }


    .ja-contact-footer-grid {

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

    }

}


@media (max-width: 800px) {


    .ja-contact-desktop-nav {

        display: none;

    }


    .ja-contact-menu {

        display: block;

    }


    .ja-contact-mobile-nav {

        display: none;

        padding: 20px 5%;

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

        background: var(--ja-contact-bg-deep);

    }


    .ja-contact-mobile-nav.ja-contact-mobile-open {

        display: grid;

        gap: 5px;

    }


    .ja-contact-mobile-nav a {

        padding: 12px;

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

    }


    .ja-contact-mobile-nav a:hover {

        color: var(--ja-contact-accent);

    }


    .ja-contact-hero {

        padding-top: 75px;

    }


    .ja-contact-form-row {

        grid-template-columns: 1fr;

    }

}


@media (max-width: 600px) {


    .ja-contact-cards,

    .ja-contact-footer-grid {

        grid-template-columns: 1fr;

    }


    .ja-contact-hero h1 {

        letter-spacing: -2px;

    }


    .ja-contact-profile-image-wrap {

        height: 350px;

    }


    .ja-contact-form-wrapper,

    .ja-contact-why-card,

    .ja-contact-location-details {

        padding: 25px;

    }


    .ja-contact-footer-bottom {

        flex-direction: column;

    }

}