.elementor-kit-6{--e-global-color-primary:#0F2636;--e-global-color-secondary:#F5A524;--e-global-color-text:#2C3E50;--e-global-color-accent:#FFFFFF;--e-global-color-1eaced3:#B8C5D1;--e-global-typography-primary-font-family:"Plus Jakarta Sans";--e-global-typography-primary-font-weight:800;--e-global-typography-secondary-font-family:"Plus Jakarta Sans";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Plus Jakarta Sans";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Plus Jakarta Sans";--e-global-typography-accent-font-weight:600;font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:700;}.elementor-kit-6 h1{font-family:"Inter", Sans-serif;font-size:16px;font-weight:800;}.elementor-kit-6 h2{font-family:"Inter", Sans-serif;font-size:48px;font-weight:800;}.elementor-kit-6 h3{font-family:"Inter", Sans-serif;font-size:32px;font-weight:700;}.elementor-kit-6 h4{font-family:"Inter", Sans-serif;font-size:24px;font-weight:700;}.elementor-kit-6 h5{font-family:"Inter", Sans-serif;font-size:20px;font-weight:600;}.elementor-kit-6 h6{font-family:"Inter", Sans-serif;font-size:18px;font-weight:600;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{font-family:"Plus Jakarta Sans", Sans-serif;font-size:16px;font-weight:700;color:var( --e-global-color-accent );background-color:var( --e-global-color-secondary );box-shadow:26px 41px 66px 0.08px rgba(0,0,0,0.5);border-radius:8px 8px 8px 8px;padding:14px 28px 14px 28px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{color:#FFFFFF;background-color:#E8941C;box-shadow:0px 0px 10px 0px rgba(0,0,0,0.5);}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1500px;}.e-con{--container-max-width:1500px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
   ITva Technologies — Design System Foundation
   Phase 1: Custom CSS for Elementor Pro
   --------------------------------------------------------------------------
   PASTE THIS INTO: Elementor → Site Settings (hamburger menu top-left) →
                    Custom CSS  (Pro feature)

   This replicates the design system from the React/Tailwind Replit build:
   - Plus Jakarta Sans typography
   - ITva primary orange + secondary navy palette
   - Custom utility classes for hero, badges, animated pulse dot
   - Button hover states, form styling, scroll behavior
   ========================================================================== */


/* =========================================================
   1. ROOT VARIABLES (ITva brand tokens)
   ========================================================= */
:root {
  /* Brand colors */
  --itva-primary:        #F2A91A;   /* Gold/orange — CTAs, accents */
  --itva-primary-dark:   #D8920E;   /* Hover state */
  --itva-primary-rgb:    242, 169, 26;

  --itva-secondary:      #1A2942;   /* Deep navy — nav, footer, headings */
  --itva-secondary-dark: #0F1A2E;
  --itva-secondary-rgb:  26, 41, 66;

  /* Neutrals */
  --itva-text:           #1A2942;   /* Body copy */
  --itva-text-muted:     #525E73;
  --itva-bg:             #FFFFFF;
  --itva-bg-soft:        #F0F4F8;   /* Form section bg */
  --itva-bg-muted:       #F5F7FA;   /* Services section bg */
  --itva-border:         #E1E7EE;

  /* Spacing & radius */
  --itva-radius:         0.5rem;
  --itva-radius-pill:    9999px;

  /* Shadows */
  --itva-shadow-sm:      0 2px 4px rgba(26, 41, 66, 0.06);
  --itva-shadow-md:      0 4px 12px rgba(26, 41, 66, 0.08);
  --itva-shadow-lg:      0 10px 30px rgba(26, 41, 66, 0.12);

  /* Typography */
  --itva-font:           'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}


/* =========================================================
   2. GOOGLE FONT IMPORT
   (Elementor will also load this via Site Settings → Typography,
    but importing here ensures it's available even before that's set)
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');


/* =========================================================
   3. GLOBAL TYPOGRAPHY OVERRIDES
   ========================================================= */
body,
.elementor-widget-text-editor,
.elementor-widget-heading {
  font-family: var(--itva-font) !important;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--itva-font) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--itva-secondary);
}


/* =========================================================
   4. BUTTON SYSTEM
   Apply the class .itva-btn-primary to any Elementor button
   for the standard ITva CTA look.
   ========================================================= */
.itva-btn-primary .elementor-button,
.itva-btn-primary a.elementor-button-link {
  background-color: var(--itva-primary) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  border-radius: var(--itva-radius) !important;
  padding: 14px 28px !important;
  box-shadow: var(--itva-shadow-md);
  transition: all 0.25s ease !important;
  border: none !important;
}

.itva-btn-primary .elementor-button:hover,
.itva-btn-primary a.elementor-button-link:hover {
  background-color: var(--itva-primary-dark) !important;
  transform: translateY(-2px);
  box-shadow: var(--itva-shadow-lg);
}

/* Outline / ghost variant */
.itva-btn-ghost .elementor-button {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  font-weight: 700 !important;
  border-radius: var(--itva-radius) !important;
}

.itva-btn-ghost .elementor-button:hover {
  border-color: var(--itva-primary) !important;
  color: var(--itva-primary) !important;
}


/* =========================================================
   5. HERO SECTION HELPERS
   These are utility classes you'll apply to the Elementor
   hero section, headings, and slider background overlay.
   ========================================================= */

/* Dark gradient overlay for hero background images
   Apply to a Section's "Background Overlay" or as a CSS class. */
.itva-hero-overlay {
  position: relative;
}
.itva-hero-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(var(--itva-secondary-rgb), 0.85) 0%,
    rgba(var(--itva-secondary-rgb), 0.40) 60%,
    rgba(var(--itva-secondary-rgb), 0.10) 100%
  );
  z-index: 1;
  pointer-events: none;
}
.itva-hero-overlay > * {
  position: relative;
  z-index: 2;
}

/* Hero eyebrow pill (e.g. "Serving Miami Dade & Broward Health Clinics") */
.itva-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 6px 14px;
  border-radius: var(--itva-radius-pill);
  background: rgba(var(--itva-primary-rgb), 0.20);
  border: 1px solid rgba(var(--itva-primary-rgb), 0.30);
  color: var(--itva-primary);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* The pulsing dot inside the eyebrow pill */
.itva-eyebrow-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--itva-primary);
  animation: itva-pulse 2s ease-in-out infinite;
}
@keyframes itva-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.2); }
}


/* =========================================================
   6. TRUST BADGES
   Used on hero and elsewhere — "HIPAA Specialists",
   "EHR Uptime SLA", "5-Min Response", etc.
   ========================================================= */
.itva-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--itva-radius);
  color: #FFFFFF;
  font-size: 0.875rem;
  font-weight: 500;
}
.itva-badge svg,
.itva-badge i {
  color: var(--itva-primary);
  width: 16px;
  height: 16px;
}

/* Light variant for use on white backgrounds */
.itva-badge-light {
  background: var(--itva-bg-soft);
  border: 1px solid var(--itva-border);
  color: var(--itva-secondary);
}


/* =========================================================
   7. NAVIGATION (sticky top nav)
   Apply .itva-nav to the nav section in Theme Builder.
   ========================================================= */
.itva-nav {
  background-color: var(--itva-secondary) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--itva-shadow-md);
}

.itva-nav .elementor-nav-menu a,
.itva-nav a {
  color: rgba(255, 255, 255, 0.80) !important;
  font-weight: 600;
  font-size: 0.875rem;
  transition: color 0.2s ease;
}
.itva-nav .elementor-nav-menu a:hover,
.itva-nav a:hover {
  color: var(--itva-primary) !important;
}

/* Phone link in nav with pulsing icon */
.itva-nav-phone {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}
.itva-nav-phone i,
.itva-nav-phone svg {
  color: var(--itva-primary);
}
.itva-nav-phone:hover i,
.itva-nav-phone:hover svg {
  animation: itva-pulse 1s ease-in-out infinite;
}


/* =========================================================
   8. FORM STYLING
   Works with Elementor Forms, Fluent Forms, WPForms.
   ========================================================= */
.itva-form input[type="text"],
.itva-form input[type="email"],
.itva-form input[type="tel"],
.itva-form select,
.itva-form textarea,
.itva-form .elementor-field {
  border: 1px solid var(--itva-border) !important;
  border-radius: var(--itva-radius) !important;
  padding: 12px 16px !important;
  font-family: var(--itva-font) !important;
  font-size: 1rem !important;
  background: #FFFFFF !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.itva-form input:focus,
.itva-form select:focus,
.itva-form textarea:focus,
.itva-form .elementor-field:focus {
  border-color: var(--itva-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--itva-primary-rgb), 0.15) !important;
  outline: none !important;
}

.itva-form label {
  font-weight: 600;
  color: var(--itva-secondary);
  font-size: 0.875rem;
  margin-bottom: 6px;
  display: block;
}


/* =========================================================
   9. CARD COMPONENT
   For Industries / Services / Why ITva grids.
   ========================================================= */
.itva-card {
  background: #FFFFFF;
  border: 1px solid var(--itva-border);
  border-radius: var(--itva-radius);
  padding: 32px 24px;
  box-shadow: var(--itva-shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  height: 100%;
}
.itva-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--itva-shadow-lg);
  border-color: var(--itva-primary);
}
.itva-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--itva-radius);
  background: rgba(var(--itva-primary-rgb), 0.12);
  color: var(--itva-primary);
  margin-bottom: 20px;
  font-size: 24px;
}
.itva-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--itva-secondary);
}
.itva-card p {
  color: var(--itva-text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}


/* =========================================================
   10. UTILITIES
   ========================================================= */

/* Smooth-scroll offset so #anchor links don't hide under sticky nav */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 96px; }

/* Section background helpers */
.itva-bg-soft   { background-color: var(--itva-bg-soft) !important; }
.itva-bg-muted  { background-color: var(--itva-bg-muted) !important; }
.itva-bg-navy   { background-color: var(--itva-secondary) !important; color: #FFFFFF; }
.itva-bg-navy h1, .itva-bg-navy h2, .itva-bg-navy h3 { color: #FFFFFF; }

/* Text color helpers */
.itva-text-primary    { color: var(--itva-primary) !important; }
.itva-text-secondary  { color: var(--itva-secondary) !important; }
.itva-text-white      { color: #FFFFFF !important; }


/* =========================================================
   11. RESPONSIVE TWEAKS
   ========================================================= */
@media (max-width: 767px) {
  .itva-card { padding: 24px 20px; }
  .itva-eyebrow-pill { font-size: 0.75rem; padding: 4px 10px; }
}


/* =========================================================
   END OF ITva DESIGN SYSTEM v1.0 — Phase 1
   Next phases will add: theme builder header/footer,
   homepage hero slider, industry grid, services grid.
   ========================================================= */
   
   /* =========================================================
   12. INDUSTRY CARD HOVER ANIMATIONS (Phase 3B add-on)
   ========================================================= */

/* The whole tile lifts on hover */
.itva-industry-card {
  cursor: pointer;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  overflow: hidden;
}
.itva-industry-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(26, 41, 66, 0.25) !important;
}

/* Background image zoom on hover */
.itva-industry-card .elementor-element-populated,
.itva-industry-card {
  transition: background-size 0.6s ease;
}
.itva-industry-card:hover {
  background-size: 110% !important;
}

/* Title lifts up when card is hovered */
.itva-industry-card h3 {
  transition: transform 0.3s ease;
}
.itva-industry-card:hover h3 {
  transform: translateY(-4px);
}

/* Tags + View Details fade in on hover */
.itva-industry-card p,
.itva-industry-card div[style*="View Details"] {
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.itva-industry-card:hover p {
  opacity: 1;
}

/* Make sure the entire tile is clickable */
.itva-industry-card a {
  display: block;
  height: 100%;
  width: 100%;
}

/* Industry tiles — force proper sizing */
.itva-industry-card {
  min-height: 320px !important;
  height: 320px !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

@media (max-width: 1024px) {
  .itva-industry-card {
    height: 280px !important;
  }
}

/* Add gap between the 4 industry tiles */
#industries .elementor-inner-section .elementor-column,
#industries .elementor-inner-section > .elementor-container > .elementor-column {
  padding-left: 12px !important;
  padding-right: 12px !important;
}


/* =========================================================
   FORCE GAP BETWEEN INDUSTRY TILES
   Targets every level Elementor might use for the columns
   ========================================================= */

/* Level 1: padding around each tile column */
#industries .elementor-column,
#industries > .elementor-container > .elementor-column,
#industries .elementor-inner-section .elementor-column {
  padding-left: 12px !important;
  padding-right: 12px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Level 2: also handle the newer flexbox containers */
#industries .e-con-inner > *,
#industries .e-con > .e-con-inner > * {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

/* Level 3: ensure the inner section row uses gap */
#industries .elementor-inner-section .elementor-container {
  gap: 24px !important;
}

/* Negative margin trick to avoid edge cutoff */
#industries .elementor-inner-section > .elementor-container {
  margin-left: -12px !important;
  margin-right: -12px !important;
}


/* =========================================================
   FORCE GAP BETWEEN SERVICES TILES
   Same approach as Industries — targets multiple Elementor versions
   ========================================================= */

/* Level 1: padding around each service card column */
#services .elementor-column,
#services > .elementor-container > .elementor-column,
#services .elementor-inner-section .elementor-column {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/* Level 2: flexbox container variant */
#services .e-con-inner > *,
#services .e-con > .e-con-inner > * {
  margin-left: 12px !important;
  margin-right: 12px !important;
}

/* Level 3: gap on the inner section row */
#services .elementor-inner-section .elementor-container {
  gap: 24px !important;
}

/* Negative margin to avoid edge cutoff */
#services .elementor-inner-section > .elementor-container {
  margin-left: -12px !important;
  margin-right: -12px !important;
}

/* Add vertical gap between the two rows of 3 cards */
#services .elementor-inner-section + .elementor-inner-section {
  margin-top: 24px !important;
}

/* =========================================================
   SERVICE CARD HOVER ANIMATIONS
   ========================================================= */

.itva-service-card {
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.itva-service-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(26, 41, 66, 0.12) !important;
  border-color: #F2A91A !important;
}

/* Icon also animates on card hover */
.itva-service-card .elementor-icon {
  transition: transform 0.3s ease, background-color 0.3s ease !important;
}

.itva-service-card:hover .elementor-icon {
  transform: scale(1.08);
  background-color: rgba(242, 169, 26, 0.18) !important;
}

/* Title color shifts on hover for extra polish */
.itva-service-card h3 {
  transition: color 0.3s ease !important;
}

.itva-service-card:hover h3 {
  color: #F2A91A !important;
}/* End custom CSS */