@import url("https://fonts.googleapis.com/css2?family=Sora:wght@800&display=swap");

.localized-screen {
  background-color: #14263f;
}

.localized-screen .component,
.localized-screen .section,
.localized-screen .frame-4,
.localized-screen .footer {
  background-color: #f3f6fb;
}

.localized-screen .localized-logo {
  display: inline-flex;
  align-items: center;
  gap: 5.112px;
  flex: 0 0 auto;
}

.localized-screen .localized-logo img {
  display: block;
  flex: 0 0 auto;
}

.localized-screen .link,
.localized-screen .link-2,
.localized-screen .link-3,
.localized-screen .link-4 {
  background-color: #e0521c;
}

.localized-screen .text-wrapper,
.localized-screen .text-wrapper-5,
.localized-screen .text-wrapper-17 {
  color: #ffffff;
}

.localized-screen .heading-margin,
.localized-screen .heading,
.localized-screen .frame {
  width: 100%;
}

.localized-screen .heading {
  padding-right: 0;
  padding-left: 0;
}

.localized-screen .frame {
  padding-left: 0;
}

.localized-screen .swiftly-ZIP-your {
  max-width: 1192.32px;
  width: 100%;
  margin-top: 0;
  font-family: "Sora", "DM Sans", sans-serif;
  font-size: min(72px, calc(72 * var(--hero-unit)));
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.576px;
  line-height: 1.07;
  color: #14263f;
  white-space: normal;
}

.localized-screen .swiftly-ZIP-your .title-line {
  display: block;
}

.localized-screen .div-wrapper {
  max-width: min(1000px, max(780px, calc(1000 * var(--hero-unit))));
}

.localized-screen .p {
  font-family: "Inter", sans-serif;
  font-size: min(18px, max(14px, calc(18 * var(--hero-unit))));
  font-weight: 400;
  color: #4e617c;
  letter-spacing: 0;
  line-height: 1.6;
}

.localized-screen .link-2 {
  min-width: min(795px, 100%, calc(795 * var(--hero-unit)));
  min-height: min(150px, calc(150 * var(--hero-unit)));
  border-radius: min(24px, max(12px, calc(24 * var(--hero-unit))));
  box-shadow: 0 30px 105px -27px rgba(224, 82, 28, 0.5);
}

.localized-screen .try-for-now {
  color: #ffffff;
}

.localized-screen .localized-trust {
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  gap: 22px;
  padding-top: 12px;
}

.localized-screen .trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  font-family: "Inter", sans-serif;
  font-size: 14.7px;
  font-weight: 500;
  color: #14263f;
  line-height: 23.55px;
  white-space: nowrap;
}

.localized-screen .trust-item img {
  display: block;
  flex: 0 0 auto;
}

.localized-screen .carousel-nav {
  display: flex;
  align-items: center;
  gap: 32px;
  flex: 0 0 auto;
}

.localized-screen .carousel-nav-button[data-direction="right"] {
  transform: rotate(180deg);
}

.localized-screen .background {
  height: auto;
  min-height: 390px;
  max-height: none;
}

.localized-screen .text-wrapper-6,
.localized-screen .text-wrapper-8 {
  color: #14263f;
}

.localized-screen .text-wrapper-7,
.localized-screen .text-wrapper-10,
.localized-screen .text-wrapper-13,
.localized-screen .text-wrapper-16,
.localized-screen .text-wrapper-18,
.localized-screen .text-wrapper-19,
.localized-screen .text-wrapper-20 {
  color: #4f565e;
}

.localized-screen .overlay-3,
.localized-screen .container-wrapper {
  background-color: #e4edf8;
}

.localized-screen .text-wrapper-11 {
  color: #e0521c;
}

.localized-screen .text-wrapper-14 {
  color: #e4edf8;
}

.localized-screen .text-wrapper-15 {
  color: #f3f6fb;
}

.localized-screen .footer {
  padding-top: 48px;
  border-top: 0;
}

.localized-screen .disclaimer-text {
  color: rgba(4, 14, 26, 0.3);
}

@media (max-width: 1440px) {
  .localized-screen .swiftly-ZIP-your {
    font-size: min(clamp(52px, 5vw, 72px), calc(72 * var(--hero-unit))) !important;
    line-height: 1.08 !important;
  }

  .localized-screen .link-2 {
    padding: min(32px, calc(32 * var(--hero-unit))) min(64px, calc(64 * var(--hero-unit))) !important;
  }
}

/* The translated carousel headings are long; below 1280px they get a full row above the arrows and button. */
@media (max-width: 1280px) {
  .localized-screen .frame-3 {
    flex-wrap: wrap;
    row-gap: 40px;
  }

  .localized-screen .frame-3 .div-3 {
    flex-basis: 100%;
  }
}

@media (max-width: 1000px) {
  .localized-screen .component,
  .localized-screen .section,
  .localized-screen .section-2,
  .localized-screen .container-wrapper,
  .localized-screen .section-wrapper,
  .localized-screen .frame-4,
  .localized-screen .footer {
    padding-right: 24px;
    padding-left: 24px;
  }

  .localized-screen .div {
    padding-right: 0;
    padding-left: 0;
  }

  .localized-screen .swiftly-ZIP-your {
    font-size: clamp(42px, 7vw, 64px) !important;
  }

  .localized-screen .link-2 {
    min-width: 0;
    min-height: 0;
    padding: 28px 40px !important;
  }

  .localized-screen .try-for-now {
    font-size: clamp(28px, 5vw, 44px);
    line-height: 1.1;
    white-space: normal;
  }

  .localized-screen .localized-trust {
    flex-wrap: wrap;
  }

  .localized-screen .frame-3 {
    flex-wrap: wrap;
  }

  .localized-screen .container-5 {
    max-width: 100%;
  }

  .localized-screen .background {
    flex-basis: min(620px, 86vw);
    width: min(620px, 86vw);
    min-width: min(620px, 86vw);
    max-width: min(620px, 86vw);
  }

  .localized-screen .container-wrapper {
    padding-top: 112px;
    padding-bottom: 112px;
  }

  .localized-screen .container-11 {
    flex-wrap: wrap;
    gap: 24px;
  }

  .localized-screen .frame-6 {
    padding-right: 0;
    padding-left: 0;
  }

  .localized-screen .container-12 {
    flex-basis: 100%;
  }
}

@media (max-width: 640px) {
  .localized-screen .component {
    padding: 12px 20px;
  }

  .localized-screen .component .container {
    height: auto;
    gap: 16px;
  }

  .localized-screen .component .link {
    padding: 10px 14px;
  }

  .localized-screen .swiftly-ZIP-your {
    font-size: 40px !important;
  }

  .localized-screen .p {
    font-size: 17px;
    line-height: 26px;
  }

  .localized-screen .link-2 {
    gap: 16px;
    padding: 24px !important;
  }

  .localized-screen .background-shadow {
    width: 36px;
    height: 36px;
  }

  .localized-screen .text-wrapper-4,
  .localized-screen .text-wrapper-9,
  .localized-screen .common-questions,
  .localized-screen .ready-to-compress {
    font-size: 42px;
  }

  .localized-screen .carousel-nav-button {
    width: 56px;
    height: 56px;
  }

  .localized-screen .link-3 {
    height: auto;
    padding: 16px 28px;
  }

  .localized-screen .background {
    min-height: 430px;
    padding: 36px;
  }

  .localized-screen .text-wrapper-7 {
    font-size: 21px;
  }

  .localized-screen .link-4 {
    padding: 22px 32px;
  }

  .localized-screen .text-wrapper-17 {
    font-size: 23px;
    white-space: normal;
  }
}