/**
 * Xena Tech — Professional corporate UI
 * Brand: navy #101840 · accent #0043ff
 */
:root {
  --xena-navy: #101840;
  --xena-navy-dark: #0a0f28;
  --xena-blue: #0043ff;
  --xena-blue-hover: #0036cc;
  --xena-slate: #4a5568;
  --xena-muted: #64748b;
  --xena-border: #e2e8f0;
  --xena-surface: #f8fafc;
  --xena-white: #ffffff;
  --xena-radius: 8px;
  --xena-radius-lg: 12px;
  --xena-shadow: 0 4px 24px rgba(16, 24, 64, 0.06);
  --xena-shadow-hover: 0 12px 40px rgba(16, 24, 64, 0.1);
  --xena-section-y: clamp(56px, 8vw, 96px);
  --xena-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--xena-font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--xena-slate);
  -webkit-font-smoothing: antialiased;
  background-color: var(--xena-white);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .sec-title, .hero-title,
.elementor-heading-title {
  font-family: var(--xena-font);
  color: var(--xena-navy);
  font-weight: 700;
  letter-spacing: -0.02em;
}

p, .elementor-widget-text-editor { color: var(--xena-slate); line-height: 1.7; }
img { max-width: 100%; height: auto; }

.header-layout1 .header-top,
.header-layout2 .header-top {
  background: var(--xena-navy-dark) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  padding: 8px 0;
}

.header-layout1 .header-top a,
.header-layout2 .header-top a { color: rgba(255, 255, 255, 0.85) !important; }

.header-layout1 .menu-area,
.header-layout2 .menu-area,
.header-layout3 .menu-area {
  background: var(--xena-white) !important;
  border-radius: 0 !important;
  box-shadow: 0 1px 0 var(--xena-border), 0 4px 20px rgba(16, 24, 64, 0.04);
  padding: 4px 0;
}

.sticky-wrapper.sticky .menu-area { box-shadow: 0 4px 24px rgba(16, 24, 64, 0.08); }

.header-logo img, .header-logo .logo-img, .mobile-logo img {
  max-width: 150px; height: auto; width: auto;
}
.header-layout2 .header-logo img { max-width: 72px; }

.main-menu > ul > li > a {
  font-size: 14px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--xena-navy) !important; padding: 22px 14px !important; position: relative;
}
.main-menu > ul > li > a:hover,
.main-menu > ul > li.current-menu-item > a { color: var(--xena-blue) !important; }

.main-menu > ul > li > a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 16px;
  height: 2px; background: var(--xena-blue); transform: scaleX(0); transition: transform 0.25s ease;
}
.main-menu > ul > li:hover > a::after,
.main-menu > ul > li.current-menu-item > a::after { transform: scaleX(1); }

.main-menu ul.sub-menu {
  border-radius: var(--xena-radius-lg) !important;
  border: 1px solid var(--xena-border);
  box-shadow: var(--xena-shadow-hover) !important;
  min-width: 260px; padding: 8px 0 !important;
}
.main-menu ul.sub-menu li a {
  font-size: 14px; font-weight: 500; padding: 11px 20px !important;
  color: var(--xena-navy) !important;
}
.main-menu ul.sub-menu li a:hover {
  background: var(--xena-surface); color: var(--xena-blue) !important;
}

.hero-title, .elementor-widget-rakar-banner .hero-title {
  font-size: clamp(32px, 4.5vw, 52px) !important;
  line-height: 1.12 !important; font-weight: 800 !important; color: var(--xena-white) !important;
}

.elementor-widget-heading .elementor-heading-title { font-size: clamp(24px, 3vw, 38px); line-height: 1.2; }
h1, .h1 { font-size: clamp(28px, 4vw, 44px); }
h2, .h2, .sec-title { font-size: clamp(22px, 3vw, 34px); }

.sec-title-area .sec-subtitle, .sub-title {
  color: var(--xena-blue) !important; font-size: 13px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px;
}

.th-btn, .elementor-button, .wp-block-button__link {
  border-radius: var(--xena-radius) !important; font-weight: 600 !important;
  font-size: 15px !important; padding: 14px 28px !important;
  transition: all 0.25s ease !important; box-shadow: none !important;
}
.th-btn:not(.style2):not(.style3),
.elementor-button.elementor-size-md {
  background: var(--xena-blue) !important; border-color: var(--xena-blue) !important; color: var(--xena-white) !important;
}
.th-btn:not(.style2):not(.style3):hover, .elementor-button:hover {
  background: var(--xena-blue-hover) !important; border-color: var(--xena-blue-hover) !important;
  transform: translateY(-1px); box-shadow: 0 8px 24px rgba(0, 67, 255, 0.25) !important;
}

.service-card, .feature-card {
  border-radius: var(--xena-radius-lg) !important; border: 1px solid var(--xena-border) !important;
  background: var(--xena-white) !important; box-shadow: var(--xena-shadow) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover, .feature-card:hover {
  transform: translateY(-4px); box-shadow: var(--xena-shadow-hover) !important;
}

.client-logo img, .brand-box img { filter: grayscale(30%); opacity: 0.85; transition: filter 0.3s ease, opacity 0.3s ease; }
.client-logo:hover img, .brand-box:hover img { filter: grayscale(0%); opacity: 1; }

.breadcumb-wrapper {
  padding: clamp(100px, 14vw, 140px) 0 clamp(48px, 6vw, 64px) !important;
  background: linear-gradient(135deg, var(--xena-navy) 0%, #1a2456 50%, var(--xena-navy-dark) 100%) !important;
}
.breadcumb-wrapper .h1, .breadcumb-wrapper h1 {
  font-size: clamp(28px, 4vw, 40px) !important; color: var(--xena-white) !important;
}

.footer-wrapper, .footer-layout1, .footer-layout2, .footer-layout3, .footer-layout4 {
  background: var(--xena-navy-dark) !important; border-top: 3px solid var(--xena-blue);
}
.footer-wrapper .widget_title { color: var(--xena-white) !important; font-size: 16px; font-weight: 700; text-transform: uppercase; }
.footer-wrapper p, .footer-wrapper .menu a { color: rgba(255, 255, 255, 0.72) !important; font-size: 14px; }
.copyright-wrap { background: rgba(0, 0, 0, 0.25) !important; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 13px; }

input[type="text"], input[type="email"], textarea, select, .form-control {
  border-radius: var(--xena-radius) !important; border: 1px solid var(--xena-border) !important;
  padding: 12px 16px !important; font-size: 15px;
}
input:focus, textarea:focus { border-color: var(--xena-blue) !important; box-shadow: 0 0 0 3px rgba(0, 67, 255, 0.12) !important; outline: none; }

.elementor-section:not(.elementor-inner-section) { padding-top: var(--xena-section-y); padding-bottom: var(--xena-section-y); }

@media (max-width: 991px) {
  .header-logo img, .mobile-logo img { max-width: 130px; }
  .elementor-section:not(.elementor-inner-section) { padding-top: 48px; padding-bottom: 48px; }
}