/*
 Theme Name:   Hello Elementor Child
 Theme URI:    https://elementor.com/
 Description:  Hello Elementor Child Theme – Krishiv Technology
 Author:       Krishiv Technology
 Author URI:   https://krishivtechnology.com
 Template:     hello-elementor
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  hello-elementor-child
*/

/* ============================================================
   DESIGN SYSTEM – KRISHIV TECHNOLOGY
   ============================================================ */

:root {
  /* Colors */
  --kt-bg:            #131619;
  --kt-surface:       #1A1D21;
  --kt-surface-2:     #1E2226;
  --kt-white:         #FFFFFF;
  --kt-body:          #9B9C9E;
  --kt-grey:          #D7D7D7;
  --kt-border:        rgba(255, 255, 255, 0.08);

  /* Gradients */
  --kt-grad-heading:  linear-gradient(165deg, #82DBF7 0%, #B6F09C 100%);
  --kt-grad-cross:    linear-gradient(170deg, #82DBF7 0%, #B6F09C 100%);
  --kt-grad-btn:      linear-gradient(135deg, #87DDEE 0%, #4D62E5 100%);
  --kt-grad-card:     linear-gradient(145deg, rgba(215,237,237,0.12) 0%, rgba(204,235,235,0.03) 100%);

  /* Typography */
  --kt-font-heading:  'Domine', Georgia, serif;
  --kt-font-body:     'Urbanist', sans-serif;
  --kt-font-jakarta:  'Plus Jakarta Sans', sans-serif;

  /* Font sizes */
  --kt-h1: 44px;
  --kt-h2: 36px;
  --kt-h3: 30px;
  --kt-h4: 26px;
  --kt-h5: 24px;
  --kt-h6: 20px;
  --kt-lg: 18px;
  --kt-md: 16px;
  --kt-sm: 14px;

  /* Spacing */
  --kt-section-py: 80px;
  --kt-section-px: 100px;
  --kt-radius-card: 12px;
  --kt-radius-btn:  10px;
}

/* ============================================================
   GLOBAL BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  background-color: var(--kt-bg) !important;
  color: var(--kt-body);
  font-family: var(--kt-font-body);
}

body .elementor-page,
body .elementor-section-wrap,
body #page { background-color: var(--kt-bg) !important; }

/* Remove Hello theme default margins */
.site-header, .site-footer { display: none !important; }
.page-content { padding: 0 !important; margin: 0 !important; }

/* ============================================================
   GRADIENT TEXT UTILITY
   ============================================================ */

.kt-gradient-text,
.kt-gradient-text h1,
.kt-gradient-text h2,
.kt-gradient-text h3,
.kt-gradient-text h4,
.kt-gradient-text h5,
.kt-gradient-text h6,
.elementor-widget-heading .kt-grad h1,
.elementor-widget-heading .kt-grad h2,
.elementor-widget-heading .kt-grad h3,
.elementor-widget-heading .kt-grad h4,
.elementor-widget-heading .kt-grad h5,
.elementor-widget-heading .kt-grad h6 {
  background: var(--kt-grad-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* ============================================================
   GRADIENT BUTTON
   ============================================================ */

.kt-grad-btn .elementor-button,
.kt-grad-btn a.elementor-button {
  position: relative;
  background: transparent !important;
  color: var(--kt-white) !important;
  border: none !important;
  z-index: 0;
  border-radius: var(--kt-radius-btn);
  font-family: var(--kt-font-body);
  font-weight: 600;
  font-size: var(--kt-md);
  letter-spacing: 0.02em;
  padding: 14px 28px !important;
  transition: opacity .25s;
}

.kt-grad-btn .elementor-button::before,
.kt-grad-btn a.elementor-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--kt-radius-btn);
  padding: 2px;
  background: var(--kt-grad-btn);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.kt-grad-btn .elementor-button:hover { opacity: .85; }

/* ============================================================
   NAVBAR
   ============================================================ */

.kt-navbar {
  background: var(--kt-bg);
  padding: 20px var(--kt-section-px);
  position: sticky;
  top: 0;
  z-index: 999;
  border-bottom: 1px solid var(--kt-border);
}

.kt-navbar .elementor-widget-nav-menu .elementor-nav-menu a {
  color: var(--kt-white) !important;
  font-family: var(--kt-font-body) !important;
  font-size: var(--kt-md) !important;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color .2s;
}
.kt-navbar .elementor-widget-nav-menu .elementor-nav-menu a:hover { color: #82DBF7 !important; }

/* ============================================================
   HERO SECTION
   ============================================================ */

.kt-hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  background: var(--kt-bg);
  padding: 120px var(--kt-section-px);
  text-align: center;
}

.kt-hero .elementor-heading-title {
  font-family: var(--kt-font-heading) !important;
  font-size: var(--kt-h1) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  background: var(--kt-grad-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: block;
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */

.kt-section-heading .elementor-heading-title {
  font-family: var(--kt-font-heading) !important;
  font-size: var(--kt-h2) !important;
  font-weight: 400 !important;
  line-height: 1.33 !important;
  background: var(--kt-grad-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.kt-section-sub {
  color: var(--kt-body) !important;
  font-family: var(--kt-font-body) !important;
  font-size: var(--kt-lg) !important;
  font-weight: 500 !important;
  line-height: 1.56 !important;
}

/* ============================================================
   SERVICE CARDS
   ============================================================ */

.kt-card {
  background: var(--kt-grad-card);
  border: 1px solid var(--kt-border);
  border-radius: var(--kt-radius-card);
  padding: 32px 28px;
  transition: border-color .25s, transform .25s;
}

.kt-card:hover {
  border-color: rgba(130, 219, 247, 0.3);
  transform: translateY(-4px);
}

.kt-card .elementor-heading-title {
  font-family: var(--kt-font-heading) !important;
  font-size: var(--kt-h5) !important;
  font-weight: 400 !important;
  background: var(--kt-grad-cross);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.kt-card .elementor-widget-text-editor p {
  color: var(--kt-body) !important;
  font-family: var(--kt-font-body) !important;
  font-size: var(--kt-sm) !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
}

/* ============================================================
   WORKFLOW STEPS
   ============================================================ */

.kt-workflow-step {
  background: var(--kt-grad-card);
  border: 1px solid var(--kt-border);
  border-radius: var(--kt-radius-card);
  padding: 32px 24px;
  text-align: center;
}

.kt-workflow-step .elementor-heading-title {
  font-family: var(--kt-font-heading) !important;
  font-size: var(--kt-h5) !important;
  color: var(--kt-grey) !important;
  -webkit-text-fill-color: var(--kt-grey) !important;
}

/* ============================================================
   TECH PILLS
   ============================================================ */

.kt-tech-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--kt-grad-card);
  border: 1px solid var(--kt-border);
  border-radius: 8px;
  padding: 10px 20px;
  color: var(--kt-white) !important;
  font-family: var(--kt-font-body);
  font-size: var(--kt-sm);
  font-weight: 500;
}

/* ============================================================
   TESTIMONIAL CARD
   ============================================================ */

.kt-testimonial {
  background: var(--kt-grad-card);
  border: 2px solid var(--kt-border);
  border-radius: var(--kt-radius-card);
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;
}

.kt-testimonial-text {
  color: var(--kt-white) !important;
  font-family: var(--kt-font-body) !important;
  font-size: var(--kt-lg) !important;
  font-weight: 500 !important;
  line-height: 1.7 !important;
  font-style: italic;
}

.kt-testimonial-author {
  color: #82DBF7 !important;
  font-size: var(--kt-sm) !important;
  font-weight: 600 !important;
  margin-top: 16px;
}

/* ============================================================
   FAQ ACCORDION
   ============================================================ */

.kt-faq .elementor-accordion-item {
  background: var(--kt-grad-card) !important;
  border: 1px solid var(--kt-border) !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
}

.kt-faq .elementor-accordion-title {
  color: var(--kt-white) !important;
  font-family: var(--kt-font-body) !important;
  font-size: var(--kt-md) !important;
  font-weight: 600 !important;
}

.kt-faq .elementor-tab-content {
  color: var(--kt-body) !important;
  font-family: var(--kt-font-body) !important;
  font-size: var(--kt-sm) !important;
}

/* ============================================================
   CONTACT FORM
   ============================================================ */

.kt-contact-form input,
.kt-contact-form textarea,
.kt-contact-form select {
  background: var(--kt-surface) !important;
  border: 1px solid var(--kt-border) !important;
  border-radius: 8px !important;
  color: var(--kt-white) !important;
  font-family: var(--kt-font-body) !important;
  font-size: var(--kt-sm) !important;
  padding: 12px 16px !important;
}

.kt-contact-form input::placeholder,
.kt-contact-form textarea::placeholder {
  color: var(--kt-body) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

.kt-footer {
  background: var(--kt-bg);
  border-top: 1px solid var(--kt-border);
  padding: 64px var(--kt-section-px) 32px;
}

.kt-footer-heading .elementor-heading-title {
  font-family: var(--kt-font-heading) !important;
  font-size: var(--kt-h6) !important;
  background: var(--kt-grad-cross);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

.kt-footer-link a,
.kt-footer-link {
  color: var(--kt-body) !important;
  font-family: var(--kt-font-body) !important;
  font-size: var(--kt-sm) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color .2s;
  display: block;
  margin-bottom: 8px;
}
.kt-footer-link a:hover { color: #82DBF7 !important; }

.kt-footer-copy {
  color: var(--kt-body);
  font-family: var(--kt-font-body);
  font-size: var(--kt-sm);
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid var(--kt-border);
  margin-top: 48px;
}

/* ============================================================
   STAT COUNTER
   ============================================================ */

.kt-stat-number .elementor-heading-title {
  font-family: var(--kt-font-heading) !important;
  font-size: 48px !important;
  font-weight: 700 !important;
  background: var(--kt-grad-heading);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block;
}

/* ============================================================
   BLOG CARD
   ============================================================ */

.kt-blog-card {
  background: var(--kt-grad-card);
  border: 1px solid var(--kt-border);
  border-radius: var(--kt-radius-card);
  overflow: hidden;
  transition: border-color .25s, transform .25s;
}
.kt-blog-card:hover {
  border-color: rgba(130,219,247,0.3);
  transform: translateY(-4px);
}

/* ============================================================
   SECTION SPACING UTILITY
   ============================================================ */

.kt-section {
  padding: var(--kt-section-py) var(--kt-section-px);
}

.kt-section-center { text-align: center; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  :root {
    --kt-section-px: 40px;
    --kt-h1: 34px;
    --kt-h2: 28px;
  }
}

@media (max-width: 768px) {
  :root {
    --kt-section-px: 20px;
    --kt-section-py: 48px;
    --kt-h1: 28px;
    --kt-h2: 22px;
    --kt-h5: 20px;
  }
}