@media (max-width: 992px) {
  .btn {
    font-size: 16px;
    font-weight: 700;
  }
}

main .h3 {
  font-size: 24px;
  line-height: 150%;
}

@media (min-width: 1600px) {
  main .h3 {
    font-size: 32px;
  }
}

main .p1 {
  font-size: 14px;
  line-height: 160%;
}

@media (min-width: 992px) {
  main .p1 {
    font-size: 16px;
  }
}

@media (min-width: 1600px) {
  main .p1 {
    font-size: 18px;
  }
}

main .h2-title {
  font-size: 24px;
  line-height: 120%;
}

@media (min-width: 992px) {
  main .h2-title-box {
    max-width: 810px;
  }
  main .h2-title {
    font-size: 32px;
  }
}

@media (min-width: 1600px) {
  main .h2-title-box {
    max-width: 1100px;
  }
  main .h2-title {
    font-size: 40px;
  }
}

.swiper-button-prev,
.swiper-button-next {
  background-color: rgba(213, 213, 213, 1);
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: var(--bs-primary) !important;
}

main .swiper-pagination-bullet {
  background-color: rgba(130, 58, 255, 0.5);
  opacity: 1;
  width: 8px;
  height: 8px;
  border-radius: 8px;
  transition: width 0.2s;
}

.swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet,
.swiper-pagination-clickable .swiper-pagination-bullet {
  margin: 0 4px;
}

main .swiper-pagination-bullet:focus {
  outline: none;
}

main .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background-color: #823fff;
  width: 22px;
}

.compare-components .compare-line:not(.none-after)::after {
  background: url('data:image/svg+xml;utf8,<svg width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg"><foreignObject width="120" height="120" x="-36" y="-36"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(18px);clip-path:url(%23a);height:100%;width:100%"/></foreignObject><g data-figma-bg-blur-radius="36"><rect width="47" height="47" x=".5" y=".5" fill="%23fff" fill-opacity=".24" rx="23.5"/><rect width="47" height="47" x=".5" y=".5" stroke="url(%23b)" rx="23.5"/><path fill="%23fff" d="M6.1 25.2c-.8-.6-.8-1.8 0-2.4l8-6c.989-.742 2.4-.036 2.4 1.2v12c0 1.236-1.411 1.942-2.4 1.2l-8-6ZM41.9 25.2c.8-.6.8-1.8 0-2.4l-8-6c-.989-.742-2.4-.036-2.4 1.2v12c0 1.236 1.411 1.942 2.4 1.2l8-6Z"/></g><defs><linearGradient id="b" x1="24" x2="24" y1="0" y2="48" gradientUnits="userSpaceOnUse"><stop stop-color="%23fff"/><stop offset="1" stop-color="%23fff" stop-opacity="0"/></linearGradient><clipPath id="a" transform="translate(36 36)"><rect width="47" height="47" x=".5" y=".5" rx="23.5"/></clipPath></defs></svg>');
  background-size: 100%;
}

main .compare-components .img-after,
main .compare-components .img-before {
  background: linear-gradient(
    132.44deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0) 56.9%
  );
  padding: 3px 10px;
  background: #0000003d;
  backdrop-filter: blur(5px);
  border-radius: 4px;
}

main .compare-components .img-after span,
main .compare-components .img-before span {
  display: inline-block;
  width: unset;
  height: unset;
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  line-height: 120%;
}

@media (min-width: 992px) {
  main .compare-components .img-after,
  main .compare-components .img-before {
    padding: 4px 14px;
    border-radius: 8px;
  }
  main .compare-components .img-after span,
  main .compare-components .img-before span {
    font-size: 15px;
  }
}

@media (min-width: 1600px) {
  main .compare-components .img-after,
  main .compare-components .img-before {
    padding: 6px 20px;
  }
  main .compare-components .img-after span,
  main .compare-components .img-before span {
    font-size: 20px;
  }
}

main .h1-title {
  font-size: 32px;
  line-height: 125%;
}

@media (min-width: 1600px) {
  main .h1-title {
    font-size: 48px;
  }
}

.first-screen {
  padding: 124px 0 60px;
  background: url("https://images.hitpaw.com/fotorpea/hd-image-converter/first-screen-bg-mb.webp")
    no-repeat center/100% 100%;
}

@media (min-width: 992px) {
  .first-screen {
    padding: 164px 0 98px;
    background: url("https://images.hitpaw.com/fotorpea/hd-image-converter/first-screen-bg.webp")
      no-repeat center/100% 100%;
  }
}

.first-screen .lft .p1 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 32px;
}

.first-screen .rgt {
  display: block;
  width: 100%;
  aspect-ratio: 684 / 458;
  padding: 4px;
  background: linear-gradient(
    125.6deg,
    #ffffff 20.6%,
    rgba(255, 255, 255, 0.1) 75.87%
  );
  box-shadow: 12px 16px 62px 0px rgba(179, 163, 233, 0.45);
  backdrop-filter: blur(8px);
}
.first-screen .rgt video {
  height: 100%;
  aspect-ratio: 684 / 458;
  object-fit: cover;
}

@media (min-width: 992px) {
  .first-screen .lft {
    width: 43%;
  }
  .first-screen .rgt {
    width: 45%;
    height: 360px;
  }
  .first-screen .btn.btn-xl {
    width: 224px;
    height: 64px;
  }
}

@media (min-width: 1600px) {
  .first-screen .container {
    max-width: 1540px;
  }
  .first-screen .lft .p1 {
    font-size: 18px;
    margin-bottom: 52px;
  }
  .first-screen .rgt {
    height: 460px;
  }
}

.sec-advantage {
  padding: 40px 0 60px;
}

@media (min-width: 992px) {
  .sec-advantage {
    padding: 60px 0 120px;
  }
}

@media (max-width: 992px) {
  .sec-advantage .h2-title {
    font-size: 32px;
  }
  .sec-advantage .compare-img {
    width: 100%;
  }
}

.sec-advantage .item-box {
  display: flex;
  flex-direction: column;
  gap: 60px;
}

.sec-advantage .item-box .img-box video {
  aspect-ratio: 626/420;
  object-fit: cover;
}

.sec-advantage .icon-box {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-top: 40px;
  gap: 24px;
}

.sec-advantage .icon-box .cell {
  padding: 16px 14px;
  box-shadow: 5px 8px 40px 0px #5d72a81a;
}

.sec-advantage .icon-box .cell img {
  border-radius: 12px;
  box-shadow: 0px 16px 30px -7px #7858ff66;
}

.sec-advantage .icon-box .cell .p2 {
  font-size: 12px;
  line-height: 160%;
  white-space: nowrap;
}

@media (min-width: 992px) {
  .sec-advantage .item-box {
    gap: 40px;
  }
  .sec-advantage .item-box .text-box {
    width: 49%;
  }
  .sec-advantage .item-box .img-box {
    width: 46%;
  }
  .sec-advantage .icon-box {
    grid-template-columns: repeat(4, 1fr);
    padding-top: 120px;
  }
  .sec-advantage .icon-box .cell {
    padding: 40px 30px;
  }
  .sec-advantage .icon-box .cell img {
    width: 64px;
    border-radius: 20px;
  }
  .sec-advantage .icon-box .p2 {
    font-size: 18px;
  }
}

@media (min-width: 1600px) {
  .sec-advantage .container {
    max-width: 1400px;
  }
  .sec-advantage .item-box {
    gap: 80px;
  }
  .sec-advantage .icon-box {
    gap: 36px;
  }
  .sec-advantage .icon-box .cell .p2 {
    font-size: 20px;
  }
}

.effect-examples {
  padding: 0 0 80px;
}

@media (min-width: 992px) {
  .effect-examples {
    padding: 0 0 144px;
  }
}

.effect-examples .item img {
  aspect-ratio: 1.5/1;
  object-fit: cover;
}
.effect-examples .item video {
  aspect-ratio: 1.5/1;
  object-fit: cover;
}

.effect-examples .item .text-cont {
  height: 140px;
}

.effect-examples .item .p1 {
  font-size: 16px;
  line-height: 145%;
}

.effect-examples .item .p2 {
  font-size: 14px;
  line-height: 150%;
  font-weight: 500;
}

.effect-examples .swiper-box::before,
.effect-examples .swiper-box::after {
  display: none;
}

.effect-examples .swiper-box::before {
  left: -1%;
}

.effect-examples .swiper-box::after {
  right: -1%;
}

.effect-examples .swiper-button-prev {
  top: 41% !important;
  left: -2% !important;
}

.effect-examples .swiper-button-next {
  top: 41% !important;
  right: -2% !important;
}

.effect-examples .swiper-button-prev,
.effect-examples .swiper-button-next {
  width: 62px !important;
  height: 62px !important;
}

.effect-examples .swiper-button-prev:after,
.effect-examples .swiper-button-next:after {
  width: 21%;
  height: 40%;
}

.effect-examples .swiper-button-prev:after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="28" fill="none"><path stroke="%23A7A7A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M12.757 2 2.88 11.879a3 3 0 0 0 0 4.242L12.757 26"/></svg>') !important;
}

.effect-examples .swiper-button-next:after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="28" fill="none"><path stroke="%23A7A7A7" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m2 26 9.879-9.879a3 3 0 0 0 0-4.242L2 2"/></svg>') !important;
}

.effect-examples .swiper-button-prev:hover:after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="28" fill="none"><path stroke="%23FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M12.757 2 2.88 11.879a3 3 0 0 0 0 4.242L12.757 26"/></svg>') !important;
}

.effect-examples .swiper-button-next:hover:after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="28" fill="none"><path stroke="%23FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m2 26 9.879-9.879a3 3 0 0 0 0-4.242L2 2"/></svg>') !important;
}

.effect-examples .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: unset;
}

.effect-examples .swiper-pagination-bullet {
  background-color: #e0e0e0;
  width: 24px;
  height: 6px;
  border-radius: 4px;
}

.effect-examples
  .swiper-container-horizontal
  > .swiper-pagination-bullets
  .swiper-pagination-bullet {
  margin: 0 8px;
}

.effect-examples .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 80px;
}

@media (min-width: 992px) {
  .effect-examples .effect-swiper {
    height: 520px;
  }
  .effect-examples .swiper-slide {
    width: 450px;
    height: fit-content;
    transition: width 0.3s ease, height 0.3s ease;
  }
  .effect-examples .swiper-slide.swiper-slide-active {
    width: 525px;
  }
  .effect-examples .item .p1 {
    font-size: 18px;
  }
  .effect-examples .item .p2 {
    font-size: 16px;
  }
  .effect-examples .swiper-box::before,
  .effect-examples .swiper-box::after {
    display: block;
    z-index: 2;
    content: "";
    position: absolute;
    top: 0%;
    width: 25%;
    height: 100%;
    background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  }
  .effect-examples .swiper-box::after {
    background: linear-gradient(
      270deg,
      #ffffff 0%,
      rgba(255, 255, 255, 0) 100%
    );
  }
}

.users-review {
  background: #faf7ff;
  padding: 40px 0;
}

@media (min-width: 992px) {
  .users-review {
    padding: 100px 0 80px;
  }
}

@media (min-width: 1600px) {
  .users-review {
    padding: 120px 0 100px;
  }
}

.users-review .review-cont {
  width: 448px;
  height: auto;
  padding: 26px 24px;
  background: #ffffff;
  border-radius: 14px;
  box-shadow: 2px 4px 16px 0px #e6e1ee;
}

.users-review .swiper-button-prev,
.users-review .swiper-button-next {
  width: 32px !important;
  height: 32px !important;
}

.users-review .swiper-button-prev:after,
.users-review .swiper-button-next:after {
  width: 21%;
  height: 40%;
}

.users-review .swiper-button-prev {
  left: -5.5% !important;
}

.users-review .swiper-button-next {
  right: -5.5% !important;
}

.users-review .swiper-button-prev,
.users-review .swiper-button-next {
  background-color: rgba(241, 233, 255, 1);
}

.users-review .swiper-button-prev:after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="19" fill="none"><path stroke="%23823FFF" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".42" stroke-width="2.71" d="M8.513 1.355 1.95 7.918a2.032 2.032 0 0 0 0 2.874l6.563 6.563"/></svg>') !important;
}

.users-review .swiper-button-next:after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="19" fill="none"><path stroke="%23823FFF" stroke-linecap="round" stroke-linejoin="round" stroke-opacity=".42" stroke-width="2.71" d="m1.355 17.355 6.563-6.563a2.032 2.032 0 0 0 0-2.874L1.355 1.355"/></svg>') !important;
}

.users-review .swiper-button-prev:hover:after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="28" fill="none"><path stroke="%23FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="M12.757 2 2.88 11.879a3 3 0 0 0 0 4.242L12.757 26"/></svg>') !important;
}

.users-review .swiper-button-next:hover:after {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="15" height="28" fill="none"><path stroke="%23FFFFFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="4" d="m2 26 9.879-9.879a3 3 0 0 0 0-4.242L2 2"/></svg>') !important;
}

@media (min-width: 992px) {
  .users-review .swiper-box {
    position: relative;
  }
  .users-review .swiper-box .swiper-cont {
    overflow: hidden;
  }
  .users-review .swiper-button-prev,
  .users-review .swiper-button-next {
    width: 42px !important;
    height: 42px !important;
  }
}

@media (min-width: 992px) and (max-width: 1599px) {
  .users-review .container {
    max-width: 1082px;
  }
  .users-review .review-cont {
    width: 448px;
  }
}

@media (min-width: 1600px) {
  .users-review .review-cont {
    width: 548px;
  }
}

@media (max-width: 991px) {
  .users-review .swiper-button-prev,
  .users-review .swiper-button-next {
    position: unset !important;
    margin-top: 0 !important;
  }
  .users-review .swiper-button-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 24px;
    gap: 134px;
  }
}

.step {
  padding: 60px 0;
}

@media (min-width: 992px) {
  .step {
    padding: 100px 0;
  }
}

@media (min-width: 1600px) {
  .step {
    padding: 120px 0;
  }
}

@media (max-width: 992px) {
  .step .step-group .step-item .step-num {
    background: #823fff;
    color: #fff;
  }
}

.step .step-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding-right: 4px;
  background: #ede4ff;
  border-radius: 50%;
  font-size: 16px;
  font-style: italic;
  font-weight: 800;
  color: #823fff;
}

@media (min-width: 992px) {
  .step .step-num {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }
}

.step .step-title {
  color: #000;
  font-size: 16px;
  font-weight: 700;
  line-height: 140%;
}

@media (min-width: 992px) {
  .step .step-title {
    font-size: 20px;
  }
}

.step .step-text {
  margin: 0;
  font-size: 14px;
  line-height: 140%;
  font-weight: 500;
  color: #000000b2;
}

@media (min-width: 992px) {
  .step .step-text {
    min-height: 56px;
    max-width: 400px;
    margin: 12px 0;
    font-size: 16px;
  }
}

.step .progress {
  display: none;
  height: 4px;
  background: #e0dcff;
  border-radius: 8px;
}

.step .progress span {
  top: 0;
  left: 0;
  background-color: #823fff;
}

.step .step-group .img-box img {
  transition: 0.2s;
}

.step .step-group .step-item.active .img-box img {
  filter: drop-shadow(0px 10px 32px rgba(0, 0, 0, 0.25));
  transform: scale(1.03);
  border-color: #8372ff;
}

.step .step-group .step-item.active .step-num {
  background: #823fff;
  color: #fff;
}

.step .step-group .step-item.active .progress {
  display: block;
}

.step .step-group .step-item.active .progress span {
  animation: progressActive 3s;
}

@keyframes progressActive {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

.discover-more .item {
  display: block;
  color: #000;
}

.discover-more a.item:hover {
  text-decoration: none;
}

.discover-more .swiper-wrapper .swiper-slide:hover .title {
  color: var(--bs-primary);
}

.discover-more .img-box {
  overflow: hidden;
  border-radius: 16px;
}

.discover-more .swiper-wrapper .title {
  font-size: 18px;
  font-weight: 700;
}

@media (min-width: 992px) {
  .discover-more .img-box {
    border-radius: 24px;
  }
  .discover-more .swiper-wrapper {
    flex-wrap: wrap;
    gap: 32px;
  }
  .discover-more .swiper-wrapper .swiper-slide {
    width: calc(33.33% - 32px);
  }
  .discover-more .swiper-wrapper .title {
    font-size: 20px;
    font-weight: 600;
  }
}

@media (min-width: 1600px) {
  .discover-more .swiper-wrapper .title {
    font-size: 24px;
  }
}

.faqs {
  padding: 40px 0;
}

@media (min-width: 992px) {
  .faqs {
    padding: 100px 0;
  }
}

@media (min-width: 1600px) {
  .faqs {
    padding: 120px 0;
  }
}

.accordion.v1.v1-0-1 .accordion-item {
  margin-bottom: 0 !important;
  border-radius: 12px;
}

.accordion.v1.v1-0-1 .accordion-item::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.08);
}

.faqs .accordion.v1.v1-0-1 .accordion-button::after {
  background-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.00029 14.0003L15.2929 22.2929C15.6834 22.6834 16.3166 22.6834 16.7071 22.2929L24.9997 14.0003" stroke="black" stroke-width="3" stroke-linecap="round"/></svg>') !important;
  background-size: 100% 100%;
  width: 32px;
  height: 32px;
}

.faqs .accordion.v1.v1-0-1 .accordion-button:not(.collapsed)::after {
  background-image: url('data:image/svg+xml,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.00029 14.0003L15.2929 22.2929C15.6834 22.6834 16.3166 22.6834 16.7071 22.2929L24.9997 14.0003" stroke="rgb(107 87 255)" stroke-width="3" stroke-linecap="round"/></svg>') !important;
  background-size: 100% 100%;
  width: 32px;
  height: 32px;
  transform: rotate(180deg);
}

.faqs .accordion.v1.v1-0-1 .accordion-button:not(.collapsed),
.faqs .accordion.v1 .accordion-collapse {
  background: #823fff0d;
}

.faqs .accordion.v1.v1-0-1 .accordion-button.collapsed {
  padding: 32px 24px;
  color: #000000 !important;
}

.faqs .accordion.v1.v1-0-1 .accordion-button {
  font-weight: 500;
  padding: 32px 24px;
  color: #823fff !important;
  font-size: 16px;
}

.faqs .accordion.v1 .accordion-body {
  padding: 0 24px 32px 24px;
  font-size: 14px;
}

@media (min-width: 992px) {
  .faqs .accordion.v1.v1-0-1 .accordion-button.collapsed {
    padding: 35px 24px;
  }
  .faqs .accordion.v1.v1-0-1 .accordion-button {
    padding: 32px 24px 16px 24px;
    font-size: 18px;
    font-weight: 700;
  }
  .faqs .accordion.v1 .accordion-body {
    padding: 0 60px 32px 24px;
    font-size: 14px;
  }
}

@media (min-width: 1600px) {
  .faqs .accordion.v1.v1-0-1 .accordion-button.collapsed {
    padding: 42px 40px;
  }
  .faqs .accordion.v1.v1-0-1 .accordion-button {
    padding: 40px 40px 16px 40px;
    font-size: 20px;
  }
  .faqs .accordion.v1 .accordion-body {
    padding: 0 90px 40px 40px;
    font-size: 16px;
  }
}

.tips {
  padding: 0 0 40px 0;
}

@media (min-width: 991px) {
  .tips {
    padding: 0 0 100px 0;
  }
}

@media (min-width: 1600px) {
  .tips {
    padding: 0 0 120px 0;
  }
}

.tips .link-hover-primary:hover {
  color: var(--bs-primary) !important;
}

@media (min-width: 991px) {
  .tips .ul-dot li:not(last-child) {
    margin-bottom: 16px;
  }
  .tips .ul-dot li a {
    padding: 12px 0;
  }
}

@media (max-width: 991px) {
  .tips .ul-dot li a {
    font-weight: 500;
  }
}

.bottom-screen {
  padding: 98px 0;
  background: url("https://images.hitpaw.com/fotorpea/hd-image-converter/bottom-bg-mb.webp")
    no-repeat center/100% 100%;
}

.bottom-screen .btn.btn-xl {
  width: 240px;
}

@media (min-width: 992px) {
  .bottom-screen {
    padding: 48px 0;
    background: url("https://images.hitpaw.com/fotorpea/hd-image-converter/bottom-bg.webp")
      no-repeat center/100% 100%;
  }
}

@media (min-width: 1600px) {
  .bottom-screen {
    padding: 94px 0;
  }
}