:root{--navy-950:#0c2b5e;--navy-900:#0c2b5e;--navy-850:#0c2b5e;--navy-800:#0c2b5e;--navy-700:#0c2b5e;--steel-500:#c0c5ce;--steel-300:#c0c5ce;--steel-100:#dce6f0;--ember-600:#1363a6;--ember-500:#1363a6;--ember-400:#1363a6;--ember-300:#fde047;--paper-0:#fff;--paper-50:#f6f8fa;--paper-100:#eceff4;--paper-200:#dde3ec;--ink-900:#0a1322;--ink-700:#2c3a4f;--ink-600:#48586f;--ink-400:#c0c5ce;--line-dark:hsla(0,0%,100%,.12);--line-light:rgba(12, 43, 94,.1);--font-display:var(--font-space-grotesk),sans-serif;--font-stencil:var(--font-big-shoulders),sans-serif;--font-body:var(--font-inter),sans-serif;--maxw:1240px;--gutter:clamp(1.25rem,4vw,3rem);--radius-sm:8px;--radius-md:14px;--radius-lg:22px;--ease:cubic-bezier(0.16,0.84,0.32,1);--ease-soft:cubic-bezier(0.22,0.61,0.36,1);--dur-1:0.6s;--dur-2:0.9s}


/* ==========================================================================
   Refined JK Forge Site Theme Color Palette & Component Styling
   ========================================================================== */

/* Hide WhatsApp Floating Icon */
.whatsapp-float, a.whatsapp-float, a[href*="wa.me"], a[aria-label*="WhatsApp"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Rich Navy Section Backgrounds & Gradients */
.bg-navy, .section-pad.bg-navy, hero, .hero-section {
    background: linear-gradient(135deg, #050914 0%, #0c2b5e 55%, #081d3d 100%) !important;
    color: #ffffff !important;
}

/* Button Color Combination */
.btn--ember, .btn-primary, button.bg-secondary, a.bg-secondary {
    background: linear-gradient(135deg, #1363a6 0%, #0f4f85 100%) !important;
    border: 1px solid #1363a6 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(19, 99, 166, 0.35) !important;
}

.btn--ember:hover, .btn-primary:hover, button.bg-secondary:hover, a.bg-secondary:hover {
    background: linear-gradient(135deg, #0c2b5e 0%, #050914 100%) !important;
    border-color: #0c2b5e !important;
    box-shadow: 0 6px 20px rgba(12, 43, 94, 0.5) !important;
}

/* Card Styling & Theme Borders */
.info-card, .card-dark {
    background: rgba(5, 9, 20, 0.95) !important;
    border: 1px solid rgba(19, 99, 166, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

.eyebrow, .eyebrow--light {
    color: #1363a6 !important;
}


/* ==========================================================================
   JK Forge Official Website Theme - Typography, Buttons & Card Styles
   ========================================================================== */

/* 1. Global Typography */
body, p, li, span, a, input, select, textarea {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .heading {
    font-family: 'Inter', sans-serif !important;
    font-weight: 700 !important;
    color: #0c2b5e;
    letter-spacing: -0.02em;
}

.eyebrow, .eyebrow--light, .badge, .tag, .mono-text {
    font-family: 'Roboto Mono', monospace !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
}

/* 2. Official Website Button Styling */
button, .btn, .btn-primary, .btn--ember, a.btn, a.button, input[type="submit"] {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    border-radius: 0.5rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    items-center: center !important;
    justify-content: center !important;
}

.btn-primary, .btn--ember, button.bg-blue-600, button.bg-secondary, a.bg-secondary, a.bg-blue-600 {
    background-color: #1363a6 !important;
    color: #ffffff !important;
    border: 1px solid #1363a6 !important;
    box-shadow: 0 4px 14px 0 rgba(19, 99, 166, 0.39) !important;
}

.btn-primary:hover, .btn--ember:hover, button.bg-blue-600:hover, button.bg-secondary:hover, a.bg-secondary:hover {
    background-color: #0c2b5e !important;
    border-color: #0c2b5e !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px 0 rgba(12, 43, 94, 0.45) !important;
}

.btn-outline, button.border-secondary, a.border-secondary {
    background-color: transparent !important;
    color: #1363a6 !important;
    border: 2px solid #1363a6 !important;
}

.btn-outline:hover, button.border-secondary:hover, a.border-secondary:hover {
    background-color: #1363a6 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* 3. Official Website Card Styling */
.card, .info-card, .feature-card, .product-card, .industry-card, .service-card {
    border-radius: 0.75rem !important;
    border: 1px solid rgba(19, 99, 166, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background-color: #ffffff;
}

.card:hover, .info-card:hover, .feature-card:hover, .product-card:hover, .industry-card:hover, .service-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(19, 99, 166, 0.4) !important;
    box-shadow: 0 12px 30px -10px rgba(12, 43, 94, 0.15) !important;
}

/* Metallic Dark Card Override */
.card-dark, .info-card-dark {
    background: #050914 !important;
    border: 1px solid rgba(19, 99, 166, 0.3) !important;
    color: #ffffff !important;
}

/* Links Hover */
a.link-hover, article a, main p a {
    color: #1363a6;
    transition: color 0.2s ease;
}
a.link-hover:hover, article a:hover, main p a:hover {
    color: #0c2b5e;
}

/* Custom Styles for JK Forge Clone */

/* Base Layout & Logo Constraints */
#main-header-container img {
    max-height: 80px !important;
    width: auto !important;
    object-fit: contain !important;
}
#main-footer-container img {
    max-height: 90px !important;
    width: auto !important;
    object-fit: contain !important;
}
img {
    max-width: 100%;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
    background: #c1c1c1; 
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8; 
}

/* Micro-animations and utility classes */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Hero Section Overlay */
.hero-overlay {
    background: linear-gradient(to right, rgba(10, 25, 47, 0.9) 0%, rgba(10, 25, 47, 0.5) 100%);
}

/* Emphasize text styling */
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #1363a6, #c0c5ce);
}

/* Dropdown menu arrow rotation */
.group:hover .fa-chevron-down {
    transform: rotate(180deg);
}

/* Navbar active state */
.nav-item.nav-active {
    color: #1363a6 !important;
}
.nav-item.nav-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: #1363a6;
}

/* Industry Card specific hover */
.industry-card .icon-container {
    transition: all 0.3s ease;
}
.industry-card:hover .icon-container {
    background-color: #1363a6;
    color: white;
}
.industry-card:hover h3 {
    color: #1363a6;
}

/* Website Official Theme Palette Overrides */
:root {
    --color-primary: #0c2b5e;
    --color-secondary: #1363a6;
    --color-accent: #c0c5ce;
    --color-dark: #050914;
}

.bg-primary {
    background-color: #0c2b5e !important;
}
.bg-secondary {
    background-color: #1363a6 !important;
}
.text-primary {
    color: #0c2b5e !important;
}
.text-secondary {
    color: #1363a6 !important;
}
.border-primary {
    border-color: #0c2b5e !important;
}
.border-secondary {
    border-color: #1363a6 !important;
}
.hover\:bg-secondary:hover {
    background-color: #0c2b5e !important;
}
.hover\:text-secondary:hover {
    color: #1363a6 !important;
}

/* Product Card */
.product-card {
    overflow: hidden;
}
.product-card img {
    transition: transform 0.5s ease;
}
.product-card:hover img {
    transform: scale(1.05);
}

/* Page Transitions */
.page-enter {
    animation: fadeInScale 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInScale {
    0% { opacity: 0; transform: scale(0.98) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* Floating animation for elements */
.animate-float {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* Animated Gradient Text */
.text-gradient-animated {
    background: linear-gradient(-45deg, #1363a6, #c0c5ce, #ffffff, #0c2b5e);
    background-size: 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientText 4s ease infinite;
}

@keyframes gradientText {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Pulse Glow for buttons */
.btn-glow {
    position: relative;
}
.btn-glow::after {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    background: linear-gradient(90deg, #1363a6, #c0c5ce, #1363a6);
    background-size: 200% auto;
    z-index: -1;
    border-radius: inherit;
    animation: pulseGlow 3s linear infinite;
    opacity: 0.5;
}

/* Metallic Hover Effect */
.hover-metallic {
    transition: all 0.4s ease;
}
.hover-metallic:hover {
    background: linear-gradient(135deg, rgba(19, 99, 166, 0.2) 0%, rgba(12, 43, 94, 0.4) 100%);
    box-shadow: 0 0 20px rgba(19, 99, 166, 0.6), inset 0 0 10px rgba(192, 197, 206, 0.3);
    border-color: #1363a6 !important;
}

@keyframes pulseGlow {
    0% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.05); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}

/* Transparent Nav on Home Page Hero */
header.nav-transparent {
    background-color: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
header.nav-transparent .nav-item {
    color: white !important;
}
header.nav-transparent .nav-item:hover {
    color: #c0c5ce !important; 
}
header.nav-transparent #mobile-menu-btn {
    color: white !important;
}
header.nav-transparent .fa-chevron-down {
    color: white !important;
}
header.nav-transparent img[alt="JK Forge Logo"] {
    filter: brightness(0) invert(1) drop-shadow(0 0 15px rgba(255,255,255,0.4)) !important;
}


/* ==========================================================================
   Mobile Drawer Menu Custom Styling (Standardized Navigation)
   ========================================================================== */
.nav__mobile {position:fixed;top:0;right:0;bottom:0;left:0;z-index:101;background:linear-gradient(160deg,#0c2b5e,#0c2b5e 50%,#0c2b5e);transform:translateX(100%);transition:transform .5s var(--ease);display:flex;flex-direction:column;overflow:hidden}
.nav__mobile.is-open {transform:translateX(0)}
.nav__mob-header {display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem;border-bottom:1px solid hsla(0,0%,100%,.07);flex-shrink:0;background:rgba(12, 43, 94,.7);backdrop-filter:blur(12px)}
.nav__mob-close {width:40px;height:40px;border-radius:50%;background:hsla(0,0%,100%,.06);border:1px solid hsla(0,0%,100%,.1);display:flex;align-items:center;justify-content:center;color:var(--paper-0) !important;transition:background .25s var(--ease),border-color .25s var(--ease),transform .3s var(--ease);cursor:pointer}
.nav__mob-close:hover {background:rgba(19, 99, 166,.2);border-color:var(--ember-500);transform:rotate(90deg)}
.nav__mob-body {flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:.75rem 1rem 1.5rem;display:flex;flex-direction:column;gap:.15rem;scrollbar-width:thin;scrollbar-color:hsla(0,0%,100%,.1) transparent}
.nav__mob-direct {display:flex;align-items:center;gap:.7rem;padding:.75rem .9rem;border-radius:12px;font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--paper-0) !important;transition:background .2s var(--ease),color .2s var(--ease)}
.nav__mob-direct:hover {background:hsla(0,0%,100%,.05)}
.nav__mob-direct.is-active {color:var(--ember-400)}
.nav__mob-direct.is-active .nav__mob-badge {box-shadow:0 0 0 2px rgba(19, 99, 166,.4)}
.nav__mob-badge {width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--font-stencil);font-weight:800;font-size:.78rem;color:#fff;flex-shrink:0;letter-spacing:0;transition:box-shadow .2s}
.nav__mob-badge svg {width:13px;height:13px}
.nav__mob-section {display:flex;flex-direction:column}
.nav__mob-trigger {display:flex;align-items:center;justify-content:space-between;width:100%;padding:.75rem .9rem;border-radius:12px;font-family:var(--font-display);font-size:1.05rem;font-weight:600;color:var(--paper-0) !important;background:none;border:none;text-align:left;cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.nav__mob-trigger:hover {background:hsla(0,0%,100%,.05)}
.nav__mob-trigger.is-open {background:hsla(0,0%,100%,.04);color:var(--ember-300)}
.nav__mob-trigger svg {transition:transform .28s var(--ease);color:var(--steel-500);flex-shrink:0}
.nav__mob-trigger.is-open svg {transform:rotate(180deg);color:var(--ember-400)}
.nav__mob-trigger-inner {display:flex;align-items:center;gap:.7rem}
.nav__mob-children {overflow:hidden;max-height:0;opacity:0;transition:max-height .5s var(--ease),opacity .3s;padding:0 .5rem}
.nav__mob-children.is-open {max-height:9999px;opacity:1;padding-bottom:.6rem}
.nav__mob-sub-head {font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;color:var(--ember-400);font-family:var(--font-stencil);padding:.8rem .4rem .3rem;display:flex;align-items:center;gap:.5em}
.nav__mob-sub-head:after {content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(19, 99, 166,.3),transparent)}
.nav__mob-grid {display:grid;grid-template-columns:1fr 1fr;gap:.05rem}
.nav__mob-grid--single {grid-template-columns:1fr}
.nav__mob-grid a {font-size:.83rem;color:var(--steel-300);font-weight:500;padding:.32rem .5rem;border-radius:7px;transition:color .15s,background .15s;line-height:1.45;white-space:normal}
.nav__mob-grid a:hover {color:var(--ember-300);background:hsla(0,0%,100%,.04)}
.nav__mob-grid a.is-active {color:var(--ember-400)}
.nav__mob-footer {padding:.9rem 1rem 2rem;border-top:1px solid hsla(0,0%,100%,.07);flex-shrink:0;background:rgba(12, 43, 94,.7);backdrop-filter:blur(12px)}
.nav__mobile.is-open .nav__mob-body>:first-child {animation:mob-item-in .38s var(--ease) .04s both}
.nav__mobile.is-open .nav__mob-body>:nth-child(2) {animation:mob-item-in .38s var(--ease) .07s both}
.nav__mobile.is-open .nav__mob-body>:nth-child(3) {animation:mob-item-in .38s var(--ease) .1s both}
.nav__mobile.is-open .nav__mob-body>:nth-child(4) {animation:mob-item-in .38s var(--ease) .13s both}
.nav__mobile.is-open .nav__mob-body>:nth-child(5) {animation:mob-item-in .38s var(--ease) .16s both}
.nav__mobile.is-open .nav__mob-body>:nth-child(6) {animation:mob-item-in .38s var(--ease) .19s both}
.nav__mobile.is-open .nav__mob-body>:nth-child(7) {animation:mob-item-in .38s var(--ease) .22s both}
.nav__mobile.is-open .nav__mob-body>:nth-child(8) {animation:mob-item-in .38s var(--ease) .25s both}
.nav__mobile.is-open .nav__mob-body>:nth-child(9) {animation:mob-item-in .38s var(--ease) .28s both}
@keyframes mob-item-in{0%{opacity:0;transform:translateX(24px)}}

.nav__brand,.nav__row {display:flex;align-items:center}
.nav__brand {gap:.65rem;flex-shrink:0}
.nav__brand img {height:52px !important;width:auto !important;background:#fff !important;border-radius:10px !important;padding:4px 8px !important;box-sizing:border-box !important;}
.nav__brand-text {font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--paper-0) !important;letter-spacing:.01em;white-space:nowrap}


/* Explicit Mobile Menu Drawer Color Overrides for High Contrast */
.nav__mobile, 
.nav__mobile * {
    color: #ffffff !important;
}
.nav__brand-text {
    color: #ffffff !important;
}
.nav__mob-close,
.nav__mob-close svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}
.nav__mob-trigger {
    color: #ffffff !important;
}
.nav__mob-trigger.is-open {
    color: var(--ember-300, #fde047) !important;
}
.nav__mob-trigger.is-open svg {
    color: var(--ember-400, #1363a6) !important;
    stroke: var(--ember-400, #1363a6) !important;
}
.nav__mob-direct {
    color: #ffffff !important;
}
.nav__mob-direct.is-active {
    color: var(--ember-400, #1363a6) !important;
}
.nav__mob-sub-head {
    color: var(--ember-400, #1363a6) !important;
}
.nav__mob-grid a {
    color: var(--steel-300, #c0c5ce) !important;
}
.nav__mob-grid a:hover {
    color: var(--ember-300, #fde047) !important;
}
.nav__mob-grid a.is-active {
    color: var(--ember-400, #1363a6) !important;
}
.nav__mob-badge {
    color: #ffffff !important;
}


/* Mobile Drawer Footer and Button Style Overrides */
.nav__mob-footer {
    padding: 1.5rem 1rem !important;
    border-top: 1px solid var(--line-dark, hsla(0,0%,100%,.12)) !important;
    margin-top: auto !important;
    display: block !important;
}

.nav__mob-footer .btn.btn--ember {
    display: inline-flex !important;
    align-items: center !important;
    gap: .55em !important;
    padding: .95rem 1.7rem !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: .95rem !important;
    width: 100% !important;
    justify-content: center !important;
    background: linear-gradient(135deg, var(--ember-500, #1363a6), var(--ember-600, #0c2b5e)) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px -8px rgba(19, 99, 166, .55) !important;
    border: 1px solid transparent !important;
    transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease) !important;
    text-decoration: none !important;
}

.nav__mob-footer .btn.btn--ember:hover {
    box-shadow: 0 16px 30px -8px rgba(19, 99, 166, .65) !important;
    transform: translateY(-2px) !important;
    background: linear-gradient(135deg, var(--ember-600, #0c2b5e), #050914) !important;
}

.nav__mob-footer .btn.btn--ember svg {
    width: 16px !important;
    height: 16px !important;
    transition: transform .35s var(--ease) !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.nav__mob-footer .btn.btn--ember:hover svg {
    transform: translateX(4px) !important;
}


/* Unification Flex and Button overrides */
.nav__brand {
    display: flex !important;
    align-items: center !important;
    gap: .65rem !important;
    flex-shrink: 0 !important;
}
.btn--block {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Homepage Hero Laptop Desktop Transparent Navbar Styles */
@media (min-width: 1024px) {
    #navbar.nav-transparent {
        background-color: transparent !important;
        background: transparent !important;
        border-bottom-color: transparent !important;
        box-shadow: none !important;
    }
    #navbar.nav-transparent .nav-item {
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }
    #navbar.nav-transparent .nav-item:hover {
        color: #38bdf8 !important;
    }
}