/*
Theme Name: KUMI Tech Theme
Theme URI: https://kumitech.com
Author: KUMI Tech Solutions
Author URI: https://kumitech.com
Description: Custom Astra child theme for KUMI Tech Solutions - Fully editable with Elementor. Professional IT solutions company theme with pixel-perfect design.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Template: astra
Text Domain: kumitech-theme

This theme, like WordPress, is licensed under the GPL.
*/

/* ==========================================================================
   KUMI Tech Design System
   Converted from React/Tailwind - Pixel Perfect Match
   ========================================================================== */

:root {
    /* Primary Brand Colors */
    --kumi-primary-navy: #003366;
    --kumi-primary-cyan: #00AEEF;
    --kumi-primary-dark: #001529;
    --kumi-text-primary: #1A1A1A;
    --kumi-text-secondary: #717182;
    
    /* Background Colors */
    --kumi-bg-white: #FFFFFF;
    --kumi-bg-light: #F4F7FA;
    --kumi-bg-gray: #F9FAFB;
    
    /* Gray Scale */
    --kumi-gray-100: #F3F3F5;
    --kumi-gray-200: #E5E7EB;
    --kumi-gray-400: #9CA3AF;
    --kumi-gray-500: #6B7280;
    --kumi-gray-600: #4B5563;
    --kumi-gray-800: #1F2937;
    
    /* Accent Colors */
    --kumi-yellow: #FFB800;
    --kumi-blue-light: #E0F2FE;
    
    /* Typography */
    --kumi-font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    
    /* Spacing */
    --kumi-radius-sm: 0.375rem;
    --kumi-radius-md: 0.5rem;
    --kumi-radius-lg: 0.75rem;
    --kumi-radius-xl: 1rem;
    --kumi-radius-2xl: 1.5rem;
    --kumi-radius-3xl: 2rem;
    --kumi-radius-full: 9999px;
    
    /* Transitions */
    --kumi-transition: all 0.3s ease;
}

/* ==========================================================================
   Global Reset & Base Styles
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--kumi-font-sans);
    color: var(--kumi-text-primary);
    background-color: var(--kumi-bg-light);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove Astra default styling */
body.fl-builder,
body.elementor-default {
    background-color: var(--kumi-bg-white);
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.025em;
    color: var(--kumi-text-primary);
}

p {
    color: var(--kumi-gray-600);
    line-height: 1.625;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--kumi-transition);
}

/* ==========================================================================
   KUMI Custom Button Styles
   ========================================================================== */

.kumi-btn-primary {
    background-color: var(--kumi-text-primary) !important;
    color: white !important;
    border-radius: var(--kumi-radius-full) !important;
    padding: 1rem 2.5rem !important;
    font-weight: 500 !important;
    font-size: 1.125rem !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

.kumi-btn-primary:hover {
    background-color: black !important;
    transform: scale(1.05);
}

.kumi-btn-outline {
    background-color: transparent !important;
    color: var(--kumi-text-primary) !important;
    border: 1px solid #E5E7EB !important;
    border-radius: var(--kumi-radius-full) !important;
    padding: 1rem 2.5rem !important;
    font-weight: 500 !important;
    font-size: 1.125rem !important;
    transition: var(--kumi-transition) !important;
}

.kumi-btn-outline:hover {
    background-color: #F9FAFB !important;
}

.kumi-btn-white {
    background-color: white !important;
    color: var(--kumi-primary-navy) !important;
    border-radius: var(--kumi-radius-full) !important;
    padding: 1.25rem 3rem !important;
    font-weight: 700 !important;
    font-size: 1.125rem !important;
    transition: var(--kumi-transition) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.kumi-btn-white:hover {
    background-color: #F3F4F6 !important;
    transform: scale(1.05);
}

/* ==========================================================================
   KUMI Card Styles
   ========================================================================== */

.kumi-card {
    background-color: var(--kumi-bg-white);
    border-radius: var(--kumi-radius-2xl);
    padding: 2.5rem;
    transition: var(--kumi-transition);
}

.kumi-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.kumi-card-dark {
    background-color: var(--kumi-primary-navy);
    color: white;
}

.kumi-card-gray {
    background-color: var(--kumi-bg-gray);
}

/* ==========================================================================
   KUMI Section Styles
   ========================================================================== */

.kumi-section {
    padding: 8rem 0;
}

.kumi-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* ==========================================================================
   KUMI Header Styles (Sticky)
   ========================================================================== */

.kumi-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid #F3F4F6;
}

.kumi-logo-box {
    background-color: var(--kumi-primary-navy);
    color: white;
    width: 2rem;
    height: 2rem;
    border-radius: 0.125rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
}

.kumi-nav-link {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--kumi-gray-600);
    transition: color 0.3s ease;
}

.kumi-nav-link:hover,
.kumi-nav-link.active {
    color: var(--kumi-primary-cyan);
}

.kumi-nav-link.active {
    color: var(--kumi-primary-navy);
    font-weight: 600;
}

/* ==========================================================================
   KUMI Footer Styles
   ========================================================================== */

.kumi-footer {
    background-color: var(--kumi-primary-dark);
    color: #9CA3AF;
    padding-top: 4rem;
    padding-bottom: 2rem;
    border-top: 1px solid #374151;
}

.kumi-footer a:hover {
    color: var(--kumi-primary-cyan);
    transform: translateX(4px);
}

.kumi-footer-social {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--kumi-transition);
}

.kumi-footer-social:hover {
    background-color: var(--kumi-primary-cyan);
    color: white;
}

/* ==========================================================================
   KUMI Gradient Text
   ========================================================================== */

.kumi-gradient-text {
    background: linear-gradient(to right, var(--kumi-primary-navy), var(--kumi-primary-cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ==========================================================================
   KUMI Bento Grid Cards
   ========================================================================== */

.kumi-bento-card {
    border-radius: var(--kumi-radius-3xl);
    overflow: hidden;
    transition: var(--kumi-transition);
}

/* ==========================================================================
   KUMI CTA Banner
   ========================================================================== */

.kumi-cta-banner {
    background-color: var(--kumi-primary-navy);
    border-radius: 3rem;
    overflow: hidden;
    position: relative;
}

.kumi-cta-banner::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 500px;
    height: 500px;
    background-color: var(--kumi-primary-cyan);
    border-radius: 50%;
    opacity: 0.1;
    filter: blur(64px);
    transform: translate(50%, -50%);
    pointer-events: none;
}

/* ==========================================================================
   KUMI Form Styles
   ========================================================================== */

.kumi-input {
    background-color: var(--kumi-bg-gray) !important;
    border: 2px solid transparent !important;
    border-radius: var(--kumi-radius-2xl) !important;
    height: 4rem !important;
    padding: 0 1.5rem !important;
    font-size: 1.125rem !important;
    transition: border-color 0.3s ease !important;
}

.kumi-input:focus {
    border-color: var(--kumi-primary-navy) !important;
    outline: none !important;
}

.kumi-textarea {
    background-color: var(--kumi-bg-gray) !important;
    border: 2px solid transparent !important;
    border-radius: var(--kumi-radius-2xl) !important;
    padding: 1.5rem !important;
    font-size: 1.125rem !important;
    resize: none !important;
    transition: border-color 0.3s ease !important;
}

.kumi-textarea:focus {
    border-color: var(--kumi-primary-navy) !important;
    outline: none !important;
}

.kumi-label {
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    color: var(--kumi-text-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.5rem !important;
    margin-left: 0.25rem !important;
}

/* ==========================================================================
   KUMI Image Hover Effects
   ========================================================================== */

.kumi-img-zoom {
    overflow: hidden;
}

.kumi-img-zoom img {
    transition: transform 0.7s ease;
}

.kumi-img-zoom:hover img {
    transform: scale(1.05);
}

/* ==========================================================================
   KUMI Icon Box Styles
   ========================================================================== */

.kumi-icon-box {
    width: 4rem;
    height: 4rem;
    border-radius: var(--kumi-radius-2xl);
    display: flex;
    align-items: center;
    justify-content: center;
}

.kumi-icon-box-light {
    background-color: var(--kumi-bg-gray);
}

.kumi-icon-box-white {
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.kumi-icon-box-dark {
    background-color: rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   KUMI Process Step Styles
   ========================================================================== */

.kumi-process-step {
    border-top: 1px solid #E5E7EB;
    padding-top: 2rem;
    transition: border-color 0.3s ease;
}

.kumi-process-step:hover {
    border-color: var(--kumi-primary-cyan);
}

.kumi-process-number {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.875rem;
    color: var(--kumi-primary-cyan);
    letter-spacing: 0.1em;
}

/* ==========================================================================
   KUMI Service Card Styles
   ========================================================================== */

.kumi-service-card {
    background-color: var(--kumi-bg-gray);
    padding: 2.5rem;
    border-radius: var(--kumi-radius-2xl);
    transition: all 0.3s ease;
}

.kumi-service-card:hover {
    background-color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.kumi-service-card:hover .kumi-service-icon {
    color: var(--kumi-primary-cyan);
}

/* ==========================================================================
   KUMI Industry Card Styles
   ========================================================================== */

.kumi-industry-image {
    border-radius: var(--kumi-radius-2xl);
    overflow: hidden;
    aspect-ratio: 4/3;
}

/* ==========================================================================
   KUMI Core Values Styles
   ========================================================================== */

.kumi-value-icon-wrap {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background-color: var(--kumi-bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin: 0 auto 1.5rem;
}

.kumi-value-icon-wrap:hover {
    background-color: var(--kumi-primary-navy);
}

.kumi-value-icon-wrap:hover svg {
    fill: white;
}

/* ==========================================================================
   KUMI Map Styles
   ========================================================================== */

.kumi-map-container {
    filter: grayscale(100%);
    transition: filter 1s ease;
}

.kumi-map-container:hover {
    filter: grayscale(0%);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 1024px) {
    .kumi-section {
        padding: 4rem 0;
    }
    
    h1 {
        font-size: 3rem !important;
    }
    
    h2 {
        font-size: 2.25rem !important;
    }
}

@media (max-width: 768px) {
    h1 {
        font-size: 2.25rem !important;
    }
    
    h2 {
        font-size: 1.875rem !important;
    }
    
    .kumi-btn-primary,
    .kumi-btn-outline,
    .kumi-btn-white {
        padding: 0.875rem 2rem !important;
        font-size: 1rem !important;
    }
}

/* ==========================================================================
   Elementor Widget Overrides for KUMI
   ========================================================================== */

/* Remove default Elementor section padding */
.elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 1280px;
}

/* Ensure proper icon sizing */
.elementor-icon i {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Suppress Astra defaults when Elementor is active */
.ast-container {
    max-width: 100%;
    padding: 0;
}