/* ==========================================================================
   Komater Tools - 主样式表
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS 变量（自定义属性）
   -------------------------------------------------------------------------- */
   :root {
    --bs-primary: #3897B3;      /* 主品牌色 - 蓝色 */
    --bs-primary-light: #4EC1C4; /* 主色调的浅色变体 */
    --bs-background: #F2F7F7;    /* 主背景色 */
    --bs-highlight: #F1C40F;     /* 强调色 - 黄色 */
    --bs-text-dark: #2C3E50;     /* 深色文字 */
  }
  
  /* --------------------------------------------------------------------------
     2. 基础样式
     -------------------------------------------------------------------------- */
  body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--bs-background);
    color: var(--bs-text-dark);
    margin: 0;
    min-width: 320px; /* 防止在小屏幕上出现横向滚动条 */
  }
  
  /* 全宽区域通用类 */
  /* 已迁移到utilities.css，无需保留 */
  
  /* --------------------------------------------------------------------------
     3. 排版样式
     -------------------------------------------------------------------------- */
  h1, h2 {
    font-weight: 600;
    color: var(--bs-text-dark);
  }
  
  .highlight {
    color: var(--bs-highlight);
  }



/* Custom Services Page Specific Styles */

/* OEM Services Section */
.oem-services-section {
  /* color: #ffffff; Removed as background is no longer dark by default */
  /* overflow: hidden; May not be needed if no absolute positioned children that could overflow */
}

.oem-services-section .display-4, /* Adjusted from display-3 for better scale */
.odm-services-section .display-4 {
  color: var(--bs-text-dark); /* Default dark color for titles */
}

.oem-services-section .lead,
.odm-services-section .lead {
  color: var(--bs-text-secondary);
}

/* ODM Services Section */
.odm-services-section {
  /* bg-light is applied in HTML */
  /* overflow: hidden; May not be needed */
}

.odm-services-section .display-4 { /* Title specific for ODM if different, e.g., primary color */
  color: var(--bs-primary);
}

/* Service Advantage Card Styling */
.service-advantage-card {
  background-color: #fff; /* Card background */
  border: 1px solid #e9ecef; /* Light border */
  border-radius: 0; /* Changed from 0.375rem to 0 for sharp corners */
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075); /* Subtle shadow */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  text-align: center; /* Center icon and text within card */
}

.service-advantage-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

.service-advantage-card .bi {
  /* Icons are already text-primary from HTML, but can be overridden */
   margin-bottom: 1rem; /* Space below icon */
}

.service-advantage-card .h5 {
  color: var(--bs-text-dark);
  margin-bottom: 0.5rem;
}

.service-advantage-card p.small {
  color: var(--bs-text-secondary);
}

/* Common styling for Advantage Icons in OEM/ODM sections - No longer needed as icons are within cards with own context */
/*
.oem-services-section .bi,
.odm-services-section .bi {
  color: var(--bs-primary) !important; 
}
*/


/* Our Collaborative Process Section */
.process-section {
  background-color: #ffffff; /* Or var(--bs-white) if defined */
}

/* If .section-title is not globally styled, add a basic version here */
.section-title {
  font-weight: 600;
  color: var(--bs-text-dark);
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 3rem !important; /* Ensure enough space after title */
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: var(--bs-primary);
}


.process-step {
  text-align: center;
  padding: 20px 15px;
  position: relative;
  /* Add transition for hover effects if desired later */
}

.process-step-icon-wrapper {
  width: 80px; /* Or desired size */
  height: 80px; /* Or desired size */
  margin: 0 auto 1.5rem auto;
  border-radius: 50%;
  background-color: rgba(var(--bs-primary-rgb), 0.1); /* Light primary background for icon */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

.process-step .bi {
  display: inline-block !important; 
  font-style: normal !important; 
  font-weight: normal !important; 
  font-variant: normal !important;
  text-transform: none !important;
  line-height: 1 !important; 
  vertical-align: -.125em !important; 
  font-size: 2.5rem !important; 
  color: var(--bs-primary) !important; 
  /* font-family is now primarily handled by the ::before selector below for icon rendering */
}

/* Critical: Ensure ::before pseudo-element is created and styled for icon display */
.process-step .bi::before {
    display: inline-block !important; /* Must be inline-block to render */
    font-family: "bootstrap-icons" !important; /* Double-check quotes and name */
    font-style: normal !important;
    font-weight: normal !important;
    font-variant: normal !important;
    text-transform: none !important;
    line-height: 1 !important;
    vertical-align: -.125em !important;
    /* The 'content' property IS SET BY BOOTSTRAP'S OWN CSS for each icon class */
    /* We are ensuring it's not disrupted and the element is styleable */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.process-step h5 {
  color: var(--bs-text-dark);
  margin-bottom: 0.5rem;
}

.process-step p.small {
  min-height: 60px; /* Give some min-height to align baselines if text lengths vary */
}

/* Force display for the second process step icon if it's being hidden */
/* (Removing the previous specific rule as we are trying a more general fix above)
.process-steps-container .process-step:nth-child(2) .process-step-icon-wrapper .bi-pencil-ruler {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 2.5rem !important; 
    color: var(--bs-primary) !important; 
}
*/


/* Adding connecting lines for larger screens (md and up) */
@media (min-width: 768px) {
  .process-steps-container {
    display: flex;
    align-items: flex-start; /* Align items to the top for varying text heights */
  }
  .process-step {
    flex: 1; /* Distribute space equally */
  }
  .process-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50px; /* Adjust to align with the center of the icon wrapper or desired vertical position */
    right: -25%; /* Position halfway to the next element, adjust based on col padding/margins */
    transform: translateY(-50%);
    width: 50%; /* Length of the line, adjust */
    height: 2px;
    background-color: var(--bs-primary-light); /* Or var(--bs-border-color) */
    z-index: -1; /* Behind step content if they were to overlap */
  }

   /* For a more centered line between icons */
  .process-step:not(:last-child)::after {
    top: calc(40px + 0.75rem); /* (icon-wrapper-height / 2) + (icon-wrapper-margin-bottom / 2) approx. */
    right: calc(-50% + 20px); /* Approximation, may need fine-tuning */
    width: calc(100% - 40px); /* Approximation */
    transform: translateY(-50%);
  }
   /* Simpler line - might be better to start with */
  .process-step:not(:last-child)::after {
    top: 60px; /* Vertically center with icon wrapper - Adjusted based on icon wrapper's center */
    right: -50%; /* Start from the middle of the gap to the next element */
    width: 100%; /* Span the full gap to the next element's center */
    height: 2px;
    background-color: var(--bs-primary-light);
    transform: translateY(-50%); /* Adjust vertical alignment of the line itself */
    z-index: 0; /* Ensure it's visible but doesn't interfere */
  }
}

.process-step:hover .process-step-icon-wrapper {
  background-color: rgba(var(--bs-primary-rgb), 0.2);
  transform: translateY(-5px) scale(1.05);
}

/* Ensure text within OEM/ODM sections is legible */
.oem-services-section .небольшие,
.odm-services-section .небольшие {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Responsive adjustments for advantage items if needed */
@media (max-width: 767px) {
    .oem-services-section .d-flex.align-items-start,
    .odm-services-section .d-flex.align-items-start {
        margin-bottom: 1.5rem; /* Add some space between items on mobile */
    }
    .oem-services-section .d-flex.align-items-start:last-child,
    .odm-services-section .d-flex.align-items-start:last-child {
        margin-bottom: 0;
    }

    .process-step:not(:last-child)::after {
      display: none; /* Hide connecting lines on small screens */
    }
     .process-step {
        margin-bottom: 2rem;
    }
    .process-step:last-child {
        margin-bottom: 0;
    }
}

/* Ensure all icons within the main content of this page use the primary color */
.custom-services-main-content [class*="bi-"] {
  color: var(--bs-primary) !important;
}

/* Responsive adjustments for advantage items if needed */
@media (max-width: 767px) {
    .oem-services-section .d-flex.align-items-start,
    .odm-services-section .d-flex.align-items-start {
        margin-bottom: 1.5rem; /* Add some space between items on mobile */
    }
    .oem-services-section .d-flex.align-items-start:last-child,
    .odm-services-section .d-flex.align-items-start:last-child {
        margin-bottom: 0;
    }

    .process-step:not(:last-child)::after {
      display: none; /* Hide connecting lines on small screens */
    }
     .process-step {
        margin-bottom: 2rem;
    }
    .process-step:last-child {
        margin-bottom: 0;
    }
}

/* Container box styling for OEM/ODM sections */
/* .section-container-box { (This entire block will be removed)
  background-color: #ffffff; 
  border: 1px solid #dee2e6; 
  border-radius: 0.375rem;   
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.075); 
  
} */