/* Styles of chat-integration.php, linked at the end of its <head>. They were a <style> at the end of the page,
   applied after the first paint, so the content moved when they arrived (22/10/2026) */
.chat-integrations-section.service-section {
  background: var(--owc-color-surface-muted-bg, #f0f3fd);
  padding-top: 95px;
  padding-bottom: 95px;
  position: relative;
  overflow: hidden;
}

.chat-integrations-section .container {
  position: relative;
  z-index: 1;
}

.chat-integrations-section .hero-bg-layer {
  z-index: 0;
}

.single-service h3 {
    font-weight: 600;
    margin-bottom: 12px;

}

.single-service p {
    color: var(--owc-color-brand-primary) !important;
    margin: 0;
    line-height: 1.5;
    font-size: clamp(14px, 0.9vw, 18px);
    font-weight: 300;
}

/* .chat-integrations-section .single-service p {

  font-family: var(--owc-font-primary, "Manrope", sans-serif);
  font-size: clamp(15px, 1.0vw, 18px);
  font-weight: 400;
  line-height: 1.5;
  color: var(--owc-color-text-primary, #24366c);
} */


.chat-integrations-section .chat-integrations-grid > [class*="col-"] {
  display: flex;
}

.chat-integrations-section a.single-service-link-div {
  width: 100%;
}

.chat-integrations-section .single-service {
  width: 100%;
  height: 100%;
  background: #ffffff;
  border: 1px solid rgba(198, 212, 253, 0.7);
  border-radius: 24px;
  box-shadow: 0 12px 28px rgba(36, 54, 108, 0.08);
  padding: clamp(24px, 2vw, 32px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}



.chat-integrations-section .single-service:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 44px rgba(36, 54, 108, 0.16);
}



.chat-integrations-section .single-service .integration-logo-div {
  height: 38px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}

.chat-integrations-section .single-service .integration-logo-div img {
  max-height: 30px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  opacity: 0.82;
}





@media (max-width: 991px) {
  .chat-integrations-section.service-section {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  .chat-integrations-section .section-title {
    margin-bottom: 44px;
  }



  .chat-integrations-section .hero-bubble-art {
    top: 40px;
    width: min(96vw, 740px);
    height: min(110vw, 840px);
    opacity: 0.52;
  }
}