/* Module 2 — Batch images to PDF */

.feature {
  background: #fff;
}

.feature__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  width: 100%;
  height: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
}

.feature__content {
  flex: 0 1 440px;
  text-align: right;
}

.feature__title {
  font-size: clamp(28px, 3vw, 42px);
  font-weight: 700;
  color: #2d2e5f;
  line-height: 1.3;
  margin-bottom: 24px;
}

.feature__desc {
  font-size: 16px;
  color: #666;
  line-height: 1.85;
}

.feature__visual {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.feature__visual-bg {
  position: relative;
  width: 100%;
  max-width: 680px;
  min-height: min(560px, 72vh);
  background: #f5f5f7;
  border-radius: 28px;
  display: flex;
  /* align-items: center; */
  align-items: flex-end;
  /* justify-content: center; */
  overflow: visible;
  padding-left: 3vw;
}

.feature__phone-wrap {
  position: relative;
  width: min(300px, 44%);
}

.feature__phone {
  width: 100%;
  height: auto;
  position: relative;
  z-index: 2;
}

.feature__icon {
  position: absolute;
  opacity: 0;
  z-index: 3;
  will-change: opacity;
}

.feature__icon--1 {
  width: min(120px, 12vw);
  height:auto;
  /* top: 2%;
  right: -18%; */
  top: 12%;
  right: -18%;
}

.feature__icon--2 {
  width: min(120px, 11vw);
  height:auto;
  /* top: 26%;
  right: -10%; */
  top: 25%;
  right: -2%;
}

.feature__icon--3 {
  width: min(120px, 10vw);
  height:auto;
  top: 38%;
  right: -20%;
}

.feature__icon--4 {
  width: min(204px, 16vw);
  height:auto;
  top: 50%;
  right: -85%;
}

.feature.is-inview .feature__icon--1 {
  animation: featureIconIn 0.65s ease forwards;
  animation-delay: 0.15s;
}

.feature.is-inview .feature__icon--2 {
  animation: featureIconIn 0.65s ease forwards;
  animation-delay: 0.45s;
}

.feature.is-inview .feature__icon--3 {
  animation: featureIconIn 0.65s ease forwards;
  animation-delay: 0.75s;
}

.feature.is-inview .feature__icon--4 {
  animation: featureIconIn 0.65s ease forwards;
  animation-delay: 1.05s;
}

@keyframes featureIconIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

html[dir="rtl"] .feature__inner {
  flex-direction: row-reverse;
}

html[dir="rtl"] .feature__content {
  text-align: left;
}

html[dir="rtl"] .feature__visual {
  justify-content: flex-start;
}

html[dir="rtl"] .feature__icon--1 {
  right: auto;
  left: -18%;
}

html[dir="rtl"] .feature__icon--2 {
  right: auto;
  left: -10%;
}

html[dir="rtl"] .feature__icon--3 {
  right: auto;
  left: -14%;
}

html[dir="rtl"] .feature__icon--4 {
  right: auto;
  left: -22%;
}

@media (max-width: 1024px) {
  .feature__inner {
    flex-direction: column;
    justify-content: center;
    padding: 48px 32px;
    gap: 40px;
  }

  .feature__content {
    flex: 0 0 auto;
    max-width: 100%;
    text-align: center;
  }

  .feature__visual {
    width: 100%;
    justify-content: center;
  }

  .feature__visual-bg {
    min-height: min(480px, 50vh);
    max-width: 100%;
  }

  .feature__phone-wrap {
    width: min(240px, 55%);
  }

  html[dir="rtl"] .feature__inner {
    flex-direction: column;
  }

  html[dir="rtl"] .feature__content {
    text-align: center;
  }
}

@media (max-width: 640px) {
  .feature__icon--1 { right: -8%; width: 56px; }
  .feature__icon--2 { right: -4%; width: 52px; }
  .feature__icon--3 { right: -6%; width: 48px; }
  .feature__icon--4 { right: -10%; width: 80px; }

  html[dir="rtl"] .feature__icon--1 { left: -8%; }
  html[dir="rtl"] .feature__icon--2 { left: -4%; }
  html[dir="rtl"] .feature__icon--3 { left: -6%; }
  html[dir="rtl"] .feature__icon--4 { left: -10%; }
}