
/* ==========================================================================
   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;
}
