.elementor-2888 .elementor-element.elementor-element-34016c1{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-2888 .elementor-element.elementor-element-bc307c6{--display:flex;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-widget-button .elementor-button{background-color:var( --e-global-color-accent );font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}@media(max-width:1024px){.elementor-2888 .elementor-element.elementor-element-34016c1{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-2888 .elementor-element.elementor-element-34016c1{--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for container, class: .elementor-element-34016c1 *//* --- 1. Global Variables & Typography --- */
:root {
  --primary-dark: #0f172a; /* Deep modern navy for headers */
  --accent-color: #06b6d4; /* Vibrant teal/cyan for highlights and buttons */
  --accent-hover: #0891b2;
  --text-body: #475569;    /* Softer gray for easier reading */
  --bg-light: #f8fafc;     /* Off-white background for section contrast */
}

body {
  color: var(--text-body);
  line-height: 1.8;
  font-family: 'Inter', 'Segoe UI', sans-serif; /* Modern sans-serif */
}

h1, h2, h3, h4 {
  color: var(--primary-dark);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* --- 2. The Hero Section & Headers --- */
.services-hero-title {
  font-size: 2.5rem;
  background: -webkit-linear-gradient(45deg, var(--primary-dark), var(--accent-color));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1rem;
}

/* --- 3. Interactive Service Cards (For items 1, 2, 3, 4) --- */
/* Apply this to the container holding your 4 services */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  margin: 3rem 0;
}

/* Apply this to each individual service item */
.service-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border-top: 4px solid var(--accent-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(6, 182, 212, 0.15);
}

.service-card h3 {
  color: var(--accent-color);
  margin-top: 0;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 1rem;
}

.service-card ul li {
  margin-bottom: 0.75rem;
  position: relative;
  list-style-type: none; /* Removes default bullets */
}

/* Custom checkmark bullets for the lists inside cards */
.service-card ul li::before {
  content: '✓';
  color: var(--accent-color);
  font-weight: bold;
  position: absolute;
  left: -1.5rem;
}

/* --- 4. The Process Timeline (For Phases 1, 2, 3) --- */
/* This turns your process text into a cool visual timeline */
.process-timeline {
  border-left: 3px dashed #cbd5e1;
  margin-left: 1rem;
  padding-left: 2rem;
}

.process-step {
  position: relative;
  margin-bottom: 2.5rem;
}

.process-step::before {
  content: '';
  position: absolute;
  left: -2.65rem;
  top: 0.25rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-color);
  border: 4px solid white;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.2);
}

/* --- 5. Modern Call-to-Action Buttons --- */
.btn-creative {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent-color), #0ea5e9);
  color: #ffffff !important;
  padding: 14px 32px;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 15px rgba(6, 182, 212, 0.3);
  transition: all 0.3s ease;
}

.btn-creative:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 20px rgba(6, 182, 212, 0.4);
}/* End custom CSS */