/* ==========================================================================
   KARUZH TECHNOLOGIES — LIGHT MINIMALIST LUXURY DESIGN SYSTEM
   Crisp pure white, platinum & silver hues, subtle soft micro-elevation shadows,
   high-end editorial typography, frosted translucent light glass, and refined accents.
   Applies across ALL sections, layouts, components, modals, and elements.
   ========================================================================== */

:root {
    --kz-bg: #F8F9FA;
    --kz-bg-surface: #FFFFFF;
    --kz-bg-subtle: #F1F3F5;
    --kz-bg-card: #FFFFFF;
    --kz-bg-card-hover: #FFFFFF;
    
    --kz-border: rgba(15, 23, 42, 0.08);
    --kz-border-light: rgba(15, 23, 42, 0.05);
    --kz-border-focus: rgba(97, 103, 248, 0.5);
    
    --kz-text-primary: #0F172A;
    --kz-text-secondary: #475569;
    --kz-text-muted: #64748B;
    --kz-text-tertiary: #94A3B8;
    
    --kz-accent: #4F46E5;
    --kz-accent-hover: #4338CA;
    --kz-accent-light: rgba(79, 70, 229, 0.08);
    --kz-accent-border: rgba(79, 70, 229, 0.22);
    
    --kz-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
    --kz-shadow-md: 0 10px 30px -5px rgba(15, 23, 42, 0.07), 0 4px 6px -2px rgba(15, 23, 42, 0.02);
    --kz-shadow-lg: 0 25px 50px -12px rgba(15, 23, 42, 0.12), 0 8px 24px -4px rgba(15, 23, 42, 0.04);
    --kz-shadow-hover: 0 20px 40px -8px rgba(79, 70, 229, 0.14), 0 8px 16px -4px rgba(15, 23, 42, 0.06);

    --kz-radius-sm: 10px;
    --kz-radius-md: 18px;
    --kz-radius-lg: 26px;
    --kz-radius-pill: 9999px;
    
    --kz-font: -apple-system, BlinkMacSystemFont, "Inter", "Plus Jakarta Sans", "SF Pro Display", sans-serif;
}

/* ==========================================================================
   GLOBAL RESET & LIGHT FOUNDATION
   ========================================================================== */
html {
    scroll-behavior: smooth;
    background-color: var(--kz-bg) !important;
    color: var(--kz-text-primary) !important;
}

body {
    background-color: var(--kz-bg) !important;
    color: var(--kz-text-primary) !important;
    font-family: var(--kz-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    line-height: 1.6;
}

::selection {
    background: #E0E7FF;
    color: #3730A3;
}

::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}
::-webkit-scrollbar-track {
    background: #F1F3F5;
}
::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: var(--kz-radius-pill);
    border: 2px solid #F1F3F5;
}
::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

/* Base Headings */
h1, h2, h3, h4, h5, h6 {
    color: var(--kz-text-primary) !important;
    font-weight: 750 !important;
    letter-spacing: -0.025em !important;
}

/* Links */
a {
    color: inherit;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   1. GLOBAL HEADER & LUXURY NAV
   ========================================================================== */
header, header.d-flex, header.header-white {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid var(--kz-border) !important;
    box-shadow: var(--kz-shadow-sm) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    transition: all 0.3s ease !important;
    height: 74px !important;
}

header.fixed {
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: var(--kz-shadow-md) !important;
    border-bottom-color: rgba(15, 23, 42, 0.1) !important;
    height: 68px !important;
}

.karuzh-brand-title {
    color: #0F172A !important;
    font-size: 22px !important;
    font-weight: 850 !important;
    letter-spacing: 0.5px !important;
}

.karuzh-brand-sub {
    color: var(--kz-accent) !important;
    font-size: 8.5px !important;
    letter-spacing: 2px !important;
    font-weight: 800 !important;
}

.menucol ul li a {
    color: var(--kz-text-secondary) !important;
    font-size: 14px !important;
    font-weight: 550 !important;
}

.menucol ul li:hover > a,
.menucol ul li.active > a {
    color: var(--kz-accent) !important;
}

/* Mega-Menu Submenu in Light Luxury */
.submenu {
    background: #FFFFFF !important;
    border: 1px solid var(--kz-border) !important;
    border-radius: var(--kz-radius-md) !important;
    box-shadow: var(--kz-shadow-lg) !important;
    color: var(--kz-text-primary) !important;
}
.submenu a {
    color: var(--kz-text-secondary) !important;
}
.submenu a:hover {
    color: var(--kz-accent) !important;
}

/* Language Switcher */
.karuzh-lang-switcher {
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: var(--kz-radius-pill) !important;
}
.karuzh-lang-btn {
    color: var(--kz-text-secondary) !important;
}
.karuzh-lang-btn.active {
    background: #FFFFFF !important;
    color: var(--kz-accent) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08) !important;
}

/* Global Buttons */
.open-discuss-btn, .allbtn .btn {
    background: #0F172A !important;
    color: #FFFFFF !important;
    border-radius: var(--kz-radius-pill) !important;
    border: none !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15) !important;
    transition: all 0.25s ease !important;
}
.open-discuss-btn:hover, .allbtn .btn:hover {
    background: var(--kz-accent) !important;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.35) !important;
    transform: translateY(-2px) !important;
}
.open-discuss-btn em, .allbtn .btn em {
    color: #FFFFFF !important;
}

/* ==========================================================================
   2. HERO BANNER
   ========================================================================== */
.main_wrapper {
    background: var(--kz-bg) !important;
}

.banner, .banner.has-hero-video {
    background: linear-gradient(180deg, #FFFFFF 0%, #F8F9FA 100%) !important;
    position: relative;
    padding-top: 130px !important;
    padding-bottom: 70px !important;
    border-bottom: 1px solid var(--kz-border) !important;
}

.hero-video-wrapper {
    opacity: 0.35 !important;
    filter: none !important;
}

.hero-bg-video {
    filter: blur(1px) brightness(0.95) contrast(105%) !important;
    transform: translate(-50%, -50%) scale(1.02) !important;
}

.hero-image-fallback {
    filter: blur(1px) !important;
    opacity: 0.25 !important;
}

.hero-video-overlay {
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.4) 0%, rgba(248, 249, 250, 0.75) 85%) !important;
}

.banner::before {
    display: none !important;
}

.banner h1 {
    font-size: 54px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.035em !important;
    /* Gentle trending gradient: Slate Charcoal blending into a warm frosted Indigo-Lavender */
    background: linear-gradient(135deg, #1e293b 0%, #334155 45%, #475569 75%, #6366f1 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: #1e293b !important;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
}

.banner p {
    color: #64748b !important; /* Gentle warm slate / cashmere tone */
    font-size: 18.5px !important;
    line-height: 1.65 !important;
    font-weight: 450 !important;
    max-width: 620px;
    letter-spacing: -0.01em;
}

/* Hero Rotating Action Ball */
.banner .btn.ball {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: var(--kz-shadow-md) !important;
}
.banner .btn.ball em {
    color: #0F172A !important;
}
.banner .btn.ball:hover {
    background: var(--kz-accent) !important;
    color: #FFFFFF !important;
    border-color: var(--kz-accent) !important;
    box-shadow: var(--kz-shadow-hover) !important;
}
.banner .btn.ball:hover em {
    color: #FFFFFF !important;
}

/* Hero Feature Metric Pills / Sliders */
.project_colanimate .wrap .col {
    background: #FFFFFF !important;
    border: 1px solid var(--kz-border) !important;
    box-shadow: var(--kz-shadow-sm) !important;
    border-radius: var(--kz-radius-md) !important;
}
.project_colanimate .wrap .col h3 {
    color: var(--kz-accent) !important;
}
.project_colanimate .wrap .col h4 {
    color: var(--kz-text-secondary) !important;
}

.client-key {
    border-top: 1px solid var(--kz-border) !important;
}
.key-span {
    color: var(--kz-text-muted) !important;
    background: var(--kz-bg) !important;
}

/* Partner Logo Marquee */
.client_plateform.project_logo_marquee {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--kz-border) !important;
}
.client_plateform .marquee .item {
    filter: grayscale(100%) opacity(0.65) !important;
    transition: all 0.3s ease !important;
}
.client_plateform .marquee .item:hover {
    filter: grayscale(0%) opacity(1) !important;
}

/* ==========================================================================
   3. SERVICES SECTION (TABS 01 - 06)
   ========================================================================== */
.tab_section {
    background: #FFFFFF !important;
    padding: 100px 0 !important;
    border-bottom: 1px solid var(--kz-border) !important;
}

.tabtitle .tablink {
    background: #F8F9FA !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: var(--kz-radius-md) !important;
    padding: 24px 30px !important;
    margin-bottom: 16px !important;
    transition: all 0.3s ease !important;
}
.tabtitle .tablink.active {
    background: #FFFFFF !important;
    border-color: var(--kz-accent-border) !important;
    box-shadow: var(--kz-shadow-md) !important;
}

.tabtitle .tablink .number {
    color: var(--kz-accent) !important;
    font-weight: 800 !important;
    font-size: 15px !important;
}

.tabtitle .tablink h2 {
    color: #0F172A !important;
    font-size: 26px !important;
}

.tabtitle .tablink .text p {
    color: var(--kz-text-secondary) !important;
}

.tabtitle .tablink .text a:not(.btn) {
    background: #F1F5F9 !important;
    color: var(--kz-text-primary) !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: var(--kz-radius-pill) !important;
    padding: 5px 14px !important;
    font-size: 12.5px !important;
    font-weight: 550 !important;
}
.tabtitle .tablink .text a:not(.btn):hover {
    background: var(--kz-accent) !important;
    color: #FFFFFF !important;
    border-color: var(--kz-accent) !important;
}

.tabcontaints {
    background: #F8F9FA !important;
    border: 1px solid var(--kz-border) !important;
    border-radius: var(--kz-radius-lg) !important;
    box-shadow: var(--kz-shadow-md) !important;
    overflow: hidden;
}

/* ==========================================================================
   4. 20-INDUSTRIES SLIDER / MARQUEE
   ========================================================================== */
.industries_lider {
    background: #F8F9FA !important;
    border-top: 1px solid var(--kz-border) !important;
    border-bottom: 1px solid var(--kz-border) !important;
    padding: 95px 0 !important;
}

.industries_lider h2 {
    color: #0F172A !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    font-size: 40px !important;
    font-weight: 850 !important;
}

.industries_lider .wrapper p {
    color: var(--kz-text-secondary) !important;
}

/* Glassy Luxury Cards - White Editorial Style */
.glassy-industry-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: var(--kz-radius-md) !important;
    box-shadow: var(--kz-shadow-sm) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.glassy-industry-card:hover {
    transform: translateY(-6px) !important;
    border-color: var(--kz-accent-border) !important;
    box-shadow: var(--kz-shadow-hover) !important;
}

.glassy-industry-card h3 {
    color: #0F172A !important;
    font-size: 20px !important;
    font-weight: 750 !important;
}

.glassy-industry-card p {
    color: var(--kz-text-secondary) !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
}

.glassy-category-pill {
    background: #EEF2F6 !important;
    color: var(--kz-accent) !important;
    font-weight: 700 !important;
    font-size: 10px !important;
    letter-spacing: 1px !important;
}

.glassy-card-cta {
    border-top: 1px solid #F1F5F9 !important;
    padding-top: 14px !important;
    color: var(--kz-accent) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   5. STACK OF TECHNOLOGIES
   ========================================================================== */
.stack_technologies {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--kz-border) !important;
    padding: 100px 0 !important;
}

.stack_technologies .left_col h2 {
    color: #0F172A !important;
    font-size: 40px !important;
}

.stack_technologies .left_col p {
    color: var(--kz-text-secondary) !important;
}

.stack_technologies .colin {
    background: #F8F9FA !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: var(--kz-radius-md) !important;
    box-shadow: var(--kz-shadow-sm) !important;
    transition: all 0.3s ease !important;
}
.stack_technologies .colin:hover {
    background: #FFFFFF !important;
    border-color: var(--kz-accent-border) !important;
    box-shadow: var(--kz-shadow-md) !important;
}

.stack_technologies .colin h3 {
    color: #0F172A !important;
}
.stack_technologies .colin p {
    color: var(--kz-text-secondary) !important;
}

/* ==========================================================================
   6. ABOUT KARUZH & BENTO GRID
   ========================================================================== */
.whyChoose_us {
    background: #F8F9FA !important;
    border-bottom: 1px solid var(--kz-border) !important;
    padding: 100px 0 !important;
}

.why-tag-pill {
    background: #EEF2F6 !important;
    color: var(--kz-accent) !important;
    font-weight: 700 !important;
}

.whyChoose_us h2 {
    color: #0F172A !important;
}

.why-filter-bar {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: var(--kz-radius-pill) !important;
    padding: 4px !important;
    box-shadow: var(--kz-shadow-sm) !important;
}
.why-filter-btn {
    color: var(--kz-text-secondary) !important;
    border-radius: var(--kz-radius-pill) !important;
}
.why-filter-btn.active {
    background: #0F172A !important;
    color: #FFFFFF !important;
}

.why-bento-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: var(--kz-radius-md) !important;
    box-shadow: var(--kz-shadow-sm) !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.why-bento-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--kz-shadow-hover) !important;
    border-color: var(--kz-accent-border) !important;
}

.why-bento-card h3 {
    color: #0F172A !important;
}
.why-bento-card p {
    color: var(--kz-text-secondary) !important;
}

.why-bento-card.featured {
    background: linear-gradient(135deg, #FFFFFF 0%, #F1F5F9 100%) !important;
    border: 1.5px solid var(--kz-accent-border) !important;
}

.why-bento-card.cta {
    background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%) !important;
    color: #FFFFFF !important;
}
.why-bento-card.cta h3, .why-bento-card.cta p {
    color: #FFFFFF !important;
}

/* ==========================================================================
   7. CASE STUDIES / PORTFOLIO
   ========================================================================== */
.case_studies {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--kz-border) !important;
    padding: 100px 0 !important;
}

.port_top_bar h2 {
    color: #0F172A !important;
}
.port_sub {
    color: var(--kz-text-secondary) !important;
}

.port_item {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: var(--kz-radius-md) !important;
    box-shadow: var(--kz-shadow-sm) !important;
    transition: all 0.3s ease !important;
}
.port_item:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--kz-shadow-hover) !important;
    border-color: var(--kz-accent-border) !important;
}

.port_card_title {
    color: #0F172A !important;
}

.port_filter_btn {
    background: #F1F5F9 !important;
    color: var(--kz-text-secondary) !important;
    border: 1px solid #E2E8F0 !important;
}
.port_filter_btn.active {
    background: #0F172A !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   8. CULTURE, LIFE @ KARUZH & AWARDS
   ========================================================================== */
.life_section {
    background: #F8F9FA !important;
    border-bottom: 1px solid var(--kz-border) !important;
    padding: 90px 0 !important;
}
.life_section h1, .life_section h2, .life_section h3 {
    color: #0F172A !important;
}
.life_section .bottom_text {
    color: var(--kz-text-secondary) !important;
}

.our_awards {
    background: #FFFFFF !important;
    border-bottom: 1px solid var(--kz-border) !important;
    padding: 90px 0 !important;
}
.our_awards h2 {
    color: #0F172A !important;
}
.our_awards p {
    color: var(--kz-text-secondary) !important;
}
.our_awards ul li img {
    filter: grayscale(100%) opacity(0.7) !important;
    transition: all 0.3s ease !important;
}
.our_awards ul li img:hover {
    filter: grayscale(0%) opacity(1) !important;
}

/* White Label Banner */
.hireto_meetyou {
    background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 100%) !important;
    color: #FFFFFF !important;
    padding: 90px 0 !important;
}
.hireto_meetyou h2, .hireto_meetyou h3 {
    color: #FFFFFF !important;
}
.hireto_meetyou .btn {
    background: #FFFFFF !important;
    color: #0F172A !important;
}
.hireto_meetyou .btn:hover {
    background: var(--kz-accent) !important;
    color: #FFFFFF !important;
}

/* ==========================================================================
   9. GLOBAL FOOTER
   ========================================================================== */
footer.footer, footer#contact {
    background: #FFFFFF !important;
    border-top: 1px solid var(--kz-border) !important;
    color: var(--kz-text-secondary) !important;
    padding: 90px 0 40px 0 !important;
}

footer .heading_title {
    color: #0F172A !important;
    font-weight: 750 !important;
    font-size: 16px !important;
    letter-spacing: -0.01em !important;
}

footer p, footer a {
    color: var(--kz-text-secondary) !important;
}
footer a:hover {
    color: var(--kz-accent) !important;
}

.footer-badge-item {
    background: #F8F9FA !important;
    border: 1px solid #E2E8F0 !important;
    color: var(--kz-text-primary) !important;
    border-radius: var(--kz-radius-pill) !important;
    font-weight: 600 !important;
}

/* Modern Minimalist Luxury Social Icon Buttons */
.footer-social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #F8F9FA !important;
    border: 1px solid #E2E8F0 !important;
    color: #475569 !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05) !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.footer-social-link:hover {
    background: #4F46E5 !important;
    color: #FFFFFF !important;
    border-color: #4F46E5 !important;
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 8px 16px -2px rgba(79, 70, 229, 0.25) !important;
}

.footer-icon-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #F1F5F9 !important;
    border: 1px solid #E2E8F0 !important;
    flex-shrink: 0 !important;
}

.footer_bottom {
    border-top: 1px solid var(--kz-border) !important;
    padding-top: 28px !important;
    margin-top: 50px !important;
}

/* ==========================================================================
   10. MODALS (LET'S DISCUSS & INDUSTRY DETAILS)
   ========================================================================== */
.karuzh-modal-overlay, .industry_modal_overlay, .insight_modal_overlay {
    background: rgba(15, 23, 42, 0.6) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
}

.karuzh-modal-dialog, .industry_modal_dialog, .insight_modal_dialog {
    background: #FFFFFF !important;
    border: 1px solid var(--kz-border) !important;
    border-radius: var(--kz-radius-lg) !important;
    box-shadow: var(--kz-shadow-lg) !important;
    color: var(--kz-text-primary) !important;
}

.karuzh-modal-dialog h2, .karuzh-modal-dialog h3,
.industry-modal-title, .insight-modal-title {
    color: #0F172A !important;
}

.karuzh-input, .karuzh-select {
    background: #F8F9FA !important;
    border: 1px solid #E2E8F0 !important;
    color: #0F172A !important;
    border-radius: var(--kz-radius-sm) !important;
}
.karuzh-input:focus, .karuzh-select:focus {
    background: #FFFFFF !important;
    border-color: var(--kz-accent) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}

.karuzh-option-card {
    background: #F8F9FA !important;
    border: 1px solid #E2E8F0 !important;
    color: #0F172A !important;
    border-radius: var(--kz-radius-sm) !important;
}
.karuzh-option-card.selected, .karuzh-option-card:hover {
    border-color: var(--kz-accent) !important;
    background: #EEF2F6 !important;
}

.karuzh-submit-btn, .karuzh-wizard-next {
    background: #0F172A !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-radius: var(--kz-radius-pill) !important;
    border: none !important;
}
.karuzh-submit-btn:hover, .karuzh-wizard-next:hover {
    background: var(--kz-accent) !important;
    transform: translateY(-1px) !important;
}