:root {
  --lr-gap: 14px;

  --panel-pad-x: 22px;
  --panel-pad-y: 18px;
  --panel-radius: 18px;
  --panel-border: 1px solid rgba(0, 0, 0, 0.06);

  /* Default: desktop 6 cards in one row */
  --mini-cols: 6;
  --mini-gap: 14px;

  --card-radius: 12px;
  --card-border: 1px solid rgba(0, 0, 0, 0.1);
  --card-shadow-hover: 0 10px 22px rgba(0, 0, 0, 0.12);
  --card-hover-lift: -2px;

  --img-ratio: 4 / 3;
  --img-padding: 6px;
  --img-bg: #f6f6f6;
  --img-radius: 8px;

  --text-font-size: 15px;
  --text-line-height: 1.5;
  --text-weight: 600;
  --text-pad-y: 6px;
  --text-pad-x: 10px;
  --text-lines: 2;
}

/* ========= RIGHT PANEL WRAPPER ========= */

.right-succes-width {
  box-sizing: border-box;
  padding-left: var(--lr-gap) !important;
}

/* Theme wrappers -> reset */
.right-succes-width .success-stories-header,
.right-succes-width .succes-companies-flex {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;

  display: block !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* White panel */
.right-succes-width .succes-right-bg {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;

  background: #fff !important;
  border-radius: var(--panel-radius) !important;
  border: var(--panel-border) !important;

  padding: var(--panel-pad-y) var(--panel-pad-x) !important;
  box-sizing: border-box;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Component container reset */
.right-succes-width .eca-mini-home {
  width: 100% !important;
  display: block !important;
}
.right-succes-width .eca-mini-home .eca-mini-inner {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Title */
.right-succes-width .succes-right-title {
  margin: 0 0 14px 0 !important;
  padding: 0 !important;
  text-align: left !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

/* ========= GRID (ONE ROW ONLY) ========= */

.right-succes-width .eca-mini-row {
  display: grid !important;
  grid-template-columns: repeat(var(--mini-cols), minmax(0, 1fr)) !important;
  gap: var(--mini-gap) !important;

  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;

  overflow: hidden !important;
  align-items: stretch !important;
}

/* Cards */
.right-succes-width .eca-mini-home .eca-mini-row .eca-mini-card {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
  color: inherit !important;

  background: #fff !important;
  border-radius: var(--card-radius) !important;
  border: var(--card-border) !important;
  overflow: hidden !important;

  cursor: pointer !important;
  min-width: 0 !important;

  transition: transform 0.15s ease, box-shadow 0.15s ease,
    border-color 0.15s ease !important;
}
.right-succes-width .eca-mini-home .eca-mini-row .eca-mini-card:hover {
  transform: translateY(var(--card-hover-lift)) !important;
  box-shadow: var(--card-shadow-hover) !important;
  border-color: rgba(0, 0, 0, 0.14) !important;
}

/* Image */
.right-succes-width .eca-mini-home .eca-mini-row .eca-mini-logo {
  width: 100% !important;
  aspect-ratio: var(--img-ratio) !important;
  padding: var(--img-padding) !important;
  box-sizing: border-box !important;
  background: var(--img-bg) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.right-succes-width .eca-mini-home .eca-mini-row .eca-mini-logo img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: var(--img-radius) !important;
}

/* Text */
.right-succes-width .eca-mini-home .eca-mini-row .eca-mini-text {
  padding: var(--text-pad-y) var(--text-pad-x) !important;
  font-size: var(--text-font-size) !important;
  line-height: var(--text-line-height) !important;
  font-weight: var(--text-weight) !important;

  display: -webkit-box !important;
  -webkit-line-clamp: var(--text-lines) !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;

  min-height: calc(
    var(--text-line-height) * 1em * var(--text-lines)
  ) !important;
}

/* 6 cards */
.right-succes-width .eca-mini-row .eca-mini-card:nth-child(n + 7) {
  display: none !important;
}

/* <=1460px: 5 cards */
@media (max-width: 1460px) {
  :root {
    --mini-cols: 5;
  }
  .right-succes-width .eca-mini-row .eca-mini-card:nth-child(n + 6) {
    display: none !important;
  }
}

/* <=1240px: 4 cards */
@media (max-width: 1240px) {
  :root {
    --mini-cols: 4;
  }
  .right-succes-width .eca-mini-row .eca-mini-card:nth-child(n + 5) {
    display: none !important;
  }
}

/* <=992px: 3 cards */
@media (max-width: 992px) {
  :root {
    --mini-cols: 3;
  }
  .right-succes-width .eca-mini-row .eca-mini-card:nth-child(n + 4) {
    display: none !important;
  }
}

/* <=768px: MOBILE 2 cards in ONE row */
@media (max-width: 768px) {
  :root {
    --mini-cols: 2;
  }
  .right-succes-width .eca-mini-row .eca-mini-card:nth-child(n + 3) {
    display: none !important;
  }
}

/* Main Page Big Component */

/* Swiper v11 compatible */

.eca-success-wrap {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 20px auto !important;
  padding: 0 0px !important;
  background: #f5f6f8;
  border-radius: 25px !important;
}

/* White panel */
.eca-success-home {
  border-radius: 22px !important;
  padding: 24px 24px 6px 24px !important;
  overflow: hidden !important;
}

/* Top layer */
.eca-success-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.eca-success-title {
  display: block !important;
  margin: 0 0 8px 0 !important;
  font-size: 28px !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  color: #111 !important;
}

.eca-success-subtitle {
  margin: 0 !important;
  color: #6b7280 !important;
  line-height: 1.4 !important;
  max-width: 720px !important;
}

.eca-success-top-left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.eca-success-top-left span {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.7;
  color: #111;
  letter-spacing: -0.2px;
}

.eca-success-top-left p {
  margin: 0;
  font-size: 18px;
  line-height: 1.45;
  color: #6b7280;
  max-width: 1080px;
}

.eca-success-all {
  white-space: nowrap !important;
  border: 1px solid rgba(59, 130, 246, 0.5) !important;
  border-radius: 10px !important;
  padding: 8px 12px !important;
  text-decoration: none !important;
  background: #fff !important;
}

/* Swiper container (middle layer) */
.successsStories {
  position: static !important;
  margin-top: 16px !important;
  padding: 4px 0 0 0 !important;
}

.successsStories .swiper-slide {
  height: auto !important;
}

/* Card design */
.eca-success-card {
  display: block !important;
  background: #fff !important;
  border-radius: 18px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  overflow: hidden !important;
  text-decoration: none !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08) !important;
}

.eca-success-img {
  width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  background: #f3f4f6 !important;
  overflow: hidden !important;
}
.eca-success-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.eca-success-body {
  padding: 14px 16px !important;
}

.eca-success-card-title {
  font-size: 18px;
  font-weight: 600 !important;
  color: #111 !important;
  line-height: 2 !important;
  margin: 0 !important;

  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/*  Bottom layer: pagination + arrows */
.eca-success-bottom {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 25px !important;
  margin-top: 14px !important;
}

/* Swiper pagination */
.successsStories .swiper-pagination {
  position: static !important;
  margin: 0 !important;
  text-align: center !important;
  width: auto !important;
  order: 1 !important;
}

.successsStories .swiper-pagination-bullet {
  width: 7px !important;
  height: 7px !important;
  opacity: 0.35 !important;
  margin: 0 4px !important;
}

.successsStories .swiper-pagination-bullet-active {
  opacity: 1 !important;
  background: #2563eb !important;
}

/* arrows */
.successsStories .eca-swiper-arrow {
  position: static !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  top: 55% !important;

  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  background: #fff !important;

  font-size: 28px !important;
  line-height: 44px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  cursor: pointer !important;
}

.successsStories .custom-prev {
  left: 10px !important;
}
.successsStories .custom-next {
  right: 10px !important;
}

.successsStories .eca-swiper-arrow:hover {
  box-shadow: 0 0 0 10px rgba(37, 99, 235, 0.12) !important;
}

.eca-success-arrows {
  margin-bottom: 15px;
  display: flex !important;
  gap: 20px !important;
  align-items: center !important;
  order: 2 !important;
}

.successsStories .eca-swiper-arrow.swiper-button-disabled {
  opacity: 0.35 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Responsive */
@media (max-width: 992px) {
  .eca-success-top {
    flex-direction: column !important;
  }
  .eca-success-all {
    align-self: flex-start !important;
  }
}

/* Success Story and Detail Page */

.success-titles {
  font-size: 20px;
}

.story-detail-content {
  font-size: 18px;
}