html {
  scroll-behavior: smooth;
}
#home,
#about,
#brands,
#features,
#system-integration,
#offices,
#cta {
  scroll-margin-top: 90px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in-bg {
  animation: fadeIn 1.4s ease-out forwards;
}
.fade-in-on-scroll {
  opacity: 0;
  transition: opacity 1.2s ease-out;
}
.fade-in-on-scroll.is-visible {
  opacity: 1;
}

:root {
  --color-navy: #10182b;
  --color-navy-deep: #142a52;
  --color-gray: #4a5468;
  --color-gold-deep: #d28f00;
  --color-gold: #c8922a;
  --color-white: #fff;
}

/* Every text-style class below is set in Montserrat; declared once here
   instead of repeating font-family on each individual rule. */
.hero-text_sub,
.hero-text_main,
.hero-text_desc,
.hero-text_sub2,
.brands-title,
.brands-text,
.about-text_tag,
.about-text_sub,
.about-text_tag2,
.distribute-text_title,
.distribute-text_sub,
.distribute-text_card-title,
.distribute-text_card-sub,
.integration-text_title,
.integration-text_sub,
.integration-support_title,
.integration-support_sub,
.integration-support_list,
.why-text_title,
.why-text_title-card,
.why-text_sub-card,
.offices-text_title,
.offices-text_sub,
.offices-text_card-title,
.offices-text_card-sub,
.offices-text_card-address,
.offices-text_card-telp,
.client-text_title,
.client-text_sub,
.client-text_card-title,
.client-text_card-name,
.client-text_card-sub,
.contact-text_title,
.contact-text_sub,
.contact-text_card-title,
.contact-text_card-sub,
.contact-text_card-showroom {
  font-family: Montserrat;
}

.hero-text_sub {
  font-weight: 700;
  font-size: 16px;
  line-height: 100%;
}

.hero-text_main {
  font-weight: 700;
  font-size: 48px;
  line-height: 60px;
}

.hero-text_desc {
  color: var(--color-white);
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.hero-text_sub2 {
  color: var(--color-white);
  font-size: var(--font-size-16, 16px);
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

.brands-title {
  color: var(--color-gold-deep);
  text-align: center;
  font-size: 42px;
  font-style: normal;
  font-weight: 700;
  line-height: 49.5px; /* 117.857% */
}

.brands-text {
  color: var(--color-gray);
  text-align: center;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  text-transform: uppercase;
}

.about-text_tag {
  color: var(--color-white);
  font-size: 18px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px; /* 111.111% */
}

.about-text_sub,
.about-text_tag2 {
  color: var(--color-white);
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 133.333% */
}

.distribute-text_title,
.integration-text_title {
  color: var(--color-gold-deep);
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px; /* 123.077% */
}

.distribute-text_title {
  text-align: center;
}

.distribute-text_sub,
.integration-text_sub {
  color: var(--color-gray);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
}

.distribute-text_sub {
  text-align: center;
  color: #525252;
}

.distribute-text_card-title {
  color: var(--color-white);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 32px; /* 133.333% */
}

.distribute-text_card-sub {
  color: var(--color-white);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
}

.integration-support_title {
  color: var(--color-white);
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.integration-support_sub {
  color: var(--color-white);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.integration-support_list {
  color: #f8f7f7;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.why-text_title {
  color: var(--color-navy);
  text-align: center;
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: 64px; /* 123.077% */
}

.why-text_title-card {
  color: var(--color-white);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 27px; /* 150% */
  letter-spacing: -0.439px;
}

.why-text_sub-card {
  color: #a1a1a1;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 137.5% */
}

.offices-text_title,
.client-text_title {
  color: var(--color-navy);
  font-size: 42px;
  font-style: normal;
  font-weight: 800;
  line-height: 49.56px; /* 118% */
  letter-spacing: -0.42px;
}

.client-text_title {
  text-align: center;
}

.offices-text_sub,
.client-text_sub {
  color: var(--color-gray);
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 28.05px; /* 165% */
}

.client-text_sub {
  text-align: center;
}

.offices-text_card-title {
  color: var(--color-navy);
  font-size: 17px;
  font-style: normal;
  font-weight: 800;
  line-height: 20.06px; /* 118% */
}

.offices-text_card-sub {
  color: var(--color-gold);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 19.8px; /* 165% */
  text-transform: uppercase;
}

.offices-text_card-address {
  color: var(--color-gray);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px; /* 157.143% */
}

.offices-text_card-telp {
  color: var(--color-navy-deep);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 22px; /* 157.143% */
}

.client-text_card-title,
.client-text_card-name {
  color: #000;
  font-size: 13.537px;
  font-style: normal;
  line-height: 160%; /* 21.66px */
}

.client-text_card-title {
  font-weight: 400;
}

.client-text_card-name {
  font-weight: 600;
}

.client-text_card-sub {
  color: var(--Dark-Green, #2f872d);
  font-size: 11.604px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.contact-text_title {
  color: var(--color-navy);
  font-size: 42px;
  font-style: normal;
  font-weight: 800;
  line-height: 49.56px; /* 118% */
}

.contact-text_sub {
  color: var(--color-gray);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 28.05px; /* 175.312% */
}

.contact-text_card-title {
  color: var(--color-gray);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 18px; /* 150% */
  text-transform: uppercase;
}

.contact-text_card-sub {
  color: var(--color-navy);
  font-size: 15px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 160% */
  margin-top: 8px;
}

.contact-text_card-showroom {
  color: var(--color-navy);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 24px; /* 150% */
  margin-top: 8px;
}