/* sectionClassName:yibo_oem_services */

.yibo_oem_services {
  position: relative;
  overflow: hidden;
  padding: var(--component-gap) 0;
  background: #FFFAF4;
}

.yibo_oem_services .container {
  position: relative;
  z-index: 2;
}

.yibo_oem_services-line,
.yibo_oem_services-product,
.yibo_oem_services-watermark {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.yibo_oem_services-line img,
.yibo_oem_services-product img,
.yibo_oem_services-watermark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.yibo_oem_services-product,
.yibo_oem_services-line.is-line-1,
.yibo_oem_services-line.is-line-2 {
  bottom: 0;
  left: 0;
  transform: translate(-37%, 5%);
  width: 58%;
}

.yibo_oem_services-line.is-line-2 {
  width: 44%;
  transform: translate(-40%, 5%);
}

.yibo_oem_services-product {
  transform: translate(-25%, 20%);
  width: 28%;
}

.yibo_oem_services-watermark {
  right: 0;
  bottom: 0;
  width: clamp(340px, 34.95vw, 671px);
  opacity: 0.05;
}

.yibo_oem_services-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--text-gap);
}

.yibo_oem_services-copy {
  max-width: min(71.42%, 1000px);
}

.yibo_oem_services-title {
  margin: 0;
  color: var(--title-text-color);
  font-family: var(--title-font-family);
  font-size: var(--title-size);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0;
}

.yibo_oem_services-title span {
  color: var(--color-primary);
}

.yibo_oem_services-desc {
  margin: var(--text-gap) 0 0;
  color: var(--title-text-color);
  font-size: var(--text-size-md);
  font-weight: 400;
  line-height: 1.4;
}

.yibo_oem_services-btn {
  flex: 0 0 auto;
}


.yibo_oem_services-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(56px, 5.21vw, 100px) clamp(16px, 1.04vw, 20px);
  max-width: 1045px;
  margin-top: clamp(64px, 5.21vw, 100px);
  margin-left: min(25.35vw, 355px);
}

.yibo_oem_services-item {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.04vw, 20px);
  min-width: 0;
  color: var(--text-color);
  animation: yiboOemItemIn 0.55s ease both;
  animation-delay: calc(var(--item-index, 0) * 70ms);
}

.yibo_oem_services-icon {
  position: relative;
  flex: 0 0 clamp(64px, 4.17vw, 80px);
  width: clamp(64px, 4.17vw, 80px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: rgba(239, 234, 222, 0.6);
  overflow: hidden;
}

.yibo_oem_services-icon img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: all 0.3s ease;
}

.yibo_oem_services-icon img.is-hover {
  opacity: 0;
}

.yibo_oem_services-item-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.yibo_oem_services-num {
  color: var(--text-color);
  font-family: var(--title-font-family);
  font-size: var(--title-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  transition: all 0.3s ease;
}

.yibo_oem_services-text {
  margin: 0;
  color: var(--text-color);
  font-size: var(--text-size-md);
  font-weight: 400;
  line-height: 1.4;
}

.yibo_oem_services-item:hover .yibo_oem_services-num {
  color: var(--color-primary);
}

.yibo_oem_services-item:hover .yibo_oem_services-text {
  color: var(--title-text-color);
}


.yibo_oem_services-item:hover .yibo_oem_services-icon img {
   filter: invert(34%) sepia(87%) saturate(2256%) hue-rotate(11deg) brightness(92%) contrast(101%);
}

@keyframes yiboOemItemIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1200px) {

  .yibo_oem_services-copy {
    max-width: 100%;
  }


  .yibo_oem_services-list {
    max-width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 992px) {
  .yibo_oem_services-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .yibo_oem_services-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .yibo_oem_services-line,
  .yibo_oem_services-watermark {
    display: none;
  }
}

@media (max-width: 640px) {
  .yibo_oem_services-list {
    grid-template-columns: 1fr;
  }

  .yibo_oem_services-item {
    align-items: flex-start;
  }

}