html[dir=rtl] {
  --body-font-weight-bold: 700
}

@font-face {
  font-family: roboto-fallback;
  size-adjust: 100.06%;
  ascent-override: 95%;
  src: local("Arial");
  font-display: swap
}

html:lang(ar) {
  direction: rtl
}

body {
  font-size: var(--body-font-size);
  margin: var(--spacing-none);
  font-family: var(--global-font-family);
  line-height: 1.4;
  color: var(--neutral-solid-90-s);
  background-color: var(--white);
  display: none
}

body.appear {
  display: block
}

header.no-header-style {
  height: auto !important
}

header.lp-overlay-header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding-top: 32px;
  padding-bottom: 32px;
  justify-content: flex-start;
  align-items: center;
  align-self: stretch;
  height: auto
}

header.no-header-style .header.block,
header.no-header-style .header.block .nav-wrapper {
  height: 0
}

header.lp-overlay-header-wrapper .header.block,
header.lp-overlay-header-wrapper .header.block .nav-wrapper {
  height: auto
}

header.no-header-style .header.block #nav {
  display: none
}

header.lp-overlay-header-wrapper .header.block #nav {
  display: block
}

header.no-header-style {
  height: auto !important;
  display: block
}

.breadcrumb-container .breadcrumb.initialize {
  display: none
}

.breadcrumb-container .breadcrumb.initialize.show {
  display: block !important
}

header {
  height: 138px;
  padding: var(--spacing-none);
  width: 100%
}

@media(width >=768px) {
  header {
    height: 146px
  }
}

@media(width >=1024px) {
  header {
    height: 162px
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font-family);
  font-weight: var(--body-font-weight-bold);
  line-height: 1.2;
  margin: 1rem 0;
  letter-spacing: 0;
  color: var(--text-on-light-emphasis);
  scroll-margin: calc(var(--nav-height) + 1em)
}

h1 {
  font-size: var(--font-size-1100);
  line-height: 1.1;
  margin-bottom: var(--spacing-large)
}

h2 {
  font-size: var(--font-size-1000);
  margin-bottom: var(--spacing-medium)
}


p,
dl,
ol,
ul,
pre,
blockquote {
  margin-top: 1em;
  margin-bottom: 1em
}


strong {
  font-weight: var(--body-font-weight-bold)
}


a:any-link {
  color: var(--text-on-light-link-primary-enabled);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 1px;
  text-underline-offset: auto;
  text-underline-position: from-font;
  font-weight: 400;
  line-height: 25px;
  text-align: left
}

a:focus-visible,
div[role=button]:focus-visible,
span[role=button]:focus-visible {
  outline: 2px solid var(--keyboard-focus-on-light)
}

html[dir=rtl] a {
  text-align: right
}


a:any-link:hover {
  color: var(--blue-55);
  text-decoration-color: var(--blue-55)
}

a:any-link:focus,
a:any-link:active {
  color: var(--blue-55);
  text-decoration-color: var(--blue-90)
}

a:any-link:visited {
  color: var(--blue-90);
  text-decoration-color: var(--blue-90)
}

html[dir=rtl] a:any-link {
  text-align: right
}

a:any-link.disabled {
  color: rgba(0, 41, 77, .42);
  cursor: unset
}

/* buttons */
a.button:any-link,
button {
  font-family: var(--global-font-family);
  font-size: var(--loop-xl-button-font-size);
  font-weight: var(--loop-button-label-font-weight);
  line-height: var(--loop-button-label-line-height);
  letter-spacing: var(--loop-button-label-letter-spacing);
  text-align: center;
  display: inline-block;
  box-sizing: border-box;
  text-decoration: none;
  border: 2px solid var(--outline-transparent);
  padding: var(--loop-button-v-padding) var(--loop-button-h-padding);
  font-style: normal;
  cursor: pointer;
  color: var(--text-on-dark-link-primary-enabled);
  background-color: var(--background-container-on-light-link-primary-enabled);
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
  border-radius: var(--border-radius-x-large);
  text-transform: none;
}

a.button:hover,
button:hover {
  background-color: var(--blue-40);
  color: var(--text-on-light-link-primary-enabled);
  cursor: pointer;
}

a.button:focus-visible,
button:focus-visible,
a.button.secondary:focus-visible,
button.secondary:focus-visible {
  outline: 2px solid var(--keyboard-focus-on-light);
}

a.button.disabled,
a.button.disabled:hover,
button:disabled,
button:disabled:hover {
  background-color: var(--neutral-solid-30-s);
  color: rgba(0, 41, 77, 0.42);
  cursor: unset;
}

a.button:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
  background-color: var(--blue-90);
  color: var(--white);
}

a.button.secondary,
button.secondary {
  background-color: unset;
  border: 2px solid var(--outline-on-light-link-enabled);
  color: var(--text-on-light-link-primary-enabled);
}

a.button.secondary:hover,
button.secondary:hover {
  background-color: var(--blue-40);
  border: 2px solid var(--blue-40);
  color: var(--text-on-light-link-primary-enabled);
}

a.button.secondary.disabled,
a.button.secondary.disabled:hover,
button.secondary:disabled,
button.secondary:disabled:hover {
  background-color: unset;
  border: 2px solid var(--neutral-solid-20-s);
  color: var(--neutral-solid-40-s);
  cursor: unset;
}

a.button.secondary:focus:not(:focus-visible),
button.secondary:focus:not(:focus-visible) {
  background-color: var(--blue-10);
  border: 2px solid var(--blue-70);
  color: var(--text-on-light-link-primary-enabled);
}

a.button.light-outline-btn,
button.light-outline-btn {
  background-color: unset;
  border: 2px solid var(--brand-blue);
  color: var(--text-on-light-link-primary-enabled);
}

a.button.light-outline-btn:hover,
button.light-outline-btn:hover {
  background-color: var(--blue-40);
  border: 2px solid var(--blue-40);
  color: var(--text-on-light-link-primary-enabled);
}

a.button.light-outline-btn:hover i,
button.light-outline-btn:hover i {
  color: var(--text-on-light-link-primary-enabled);
}

a.button.light-outline-btn.disabled,
a.button.light-outline-btn.disabled:hover,
button.light-outline-btn:disabled,
button.light-outline-btn:disabled:hover {
  background-color: unset;
  border: 2px solid var(--neutral-solid-20-s);
  color: var(--neutral-solid-40-s);
  cursor: unset;
}

a.button.light-outline-btn:focus:not(:focus-visible),
button.light-outline-btn:focus:not(:focus-visible) {
  background-color: var(--blue-10);
  border: 2px solid var(--blue-70);
  color: var(--text-on-light-link-primary-enabled);
}

p.button-container {
  margin: var(--spacing-none);
}
/*End button style*/

/*=== End Spacing changes ====*/


.section[class*=bg-neutrals] {
    color: var(--neutral-solid-90-s)
}


main .section.bg-neutrals-10,
main .section.bg-neutrals-10[data-sec-inside-container=true]>div {
    background-color: var(--neutral-solid-05-s)
}

main .section.bg-neutrals-20,
main .section.bg-neutrals-20[data-sec-inside-container=true]>div {
    background-color: var(--neutral-solid-10-s)
}


main .section[class*=bg-][data-sec-inside-container=true]>div {
    max-width: calc(var(--screen-width) - var(--spacing-xxlarge) - var(--spacing-xxlarge));
    padding: var(--spacing-xxlarge);
    border-radius: var(--border-radius-none) var(--border-radius-none) var(--border-radius-medium) var(--border-radius-medium);
    position: relative
}

main .section[class*=bg-][data-sec-inside-container=true]>div.breadcrumb-wrapper {
    padding: 0 0 0 16px;
    border-radius: 10px 10px 0 0;
    max-width: calc(var(--screen-width) - 16px)
}


html[dir=rtl] main .section[class*=bg-][data-sec-inside-container=true]>div.breadcrumb-wrapper {
    padding: 0 16px 0 0;
    border-radius: 10px 10px 0 0
}

main .section[class*=bg-][data-sec-inside-container=true]>div.breadcrumb-wrapper+div {
    border-radius: 0 0 10px 10px
}

/*=== begin components variations ===*/
main img {
  max-width: 100%;
  width: auto;
  height: auto
}

.icon {
  display: inline-block;
  height: 24px;
  width: 24px
}

.icon img {
  height: 100%;
  width: 100%
}

main .section {
  margin: var(--spacing-none);
  padding: var(--spacing-medium) 0;
  position: relative
}

main .section::before {
  inset: 0
}

main .section>div {
  padding: 0 var(--grid-margin-12-col)
}

@media(width >=1024px) {
  main .section>div {
    max-width: var(--screen-width);
    margin: auto
  }

  main .section[data-sec-width=true]>div {
    max-width: calc(var(--screen-width) + var(--grid-margin-12-col)*2 - var(--section-reduced-space)*2)
  }
}

body.no-scroll {
  overflow-y: hidden
}

#skip-to-main-content {
  position: absolute;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  word-wrap: normal;
  font-size: var(--font-size-200)
}

#skip-to-main-content:focus {
  position: static;
  overflow: visible;
  clip: auto;
  width: auto;
  height: auto;
  word-wrap: normal;
  z-index: 1000;
  margin: var(--spacing-xtiny)
}

.auto-image-container {
  padding: 0;
  margin: 0;
  line-height: 0px
}

.auto-image-container-v1 picture,
.columns>div picture {
  display: block;
  line-height: 0
}

.cmp-teaser__pretitle {
  color: var(--text-on-light-subdued);
  font-size: var(--font-size-100);
  font-weight: var(--body-font-weight-bold);
  line-height: 16px;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 var(--spacing-xsmall) 0;
  position: relative;
  z-index: 2
}

.emptydiv {
  display: none !important
}

main img {
  width: 100%
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: var(--spacing-none);
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0
}

.image-caption .custom-text-wrapper p,
.image-caption .default-content-wrapper p {
  color: var(--text-on-light-default);
  font-size: var(--font-size-200);
  font-weight: var(--body-font-weight-regular);
  line-height: 150%;
  padding: var(--spacing-xsmall) 0rem 0rem 0rem
}

.border-radius-medium img {
  border-radius: var(--border-radius-medium) !important
}

main .section.border-radius-medium[class*=bg-][data-sec-inside-container=true]>div {
  border-radius: var(--border-radius-medium) !important
}

.image-16by9 p {
  margin: var(--spacing-none)
}

.image-16by9 img {
  aspect-ratio: 16/9;
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: auto !important;
  border-radius: var(--border-radius-medium) !important
}

.image-3by2 img {
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: auto !important;
  border-radius: var(--border-radius-medium) !important
}

.image-4by5 img {
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: auto !important;
  border-radius: var(--border-radius-medium) !important
}

.image-1by1 img {
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: top;
  width: 100%;
  height: auto !important;
  border-radius: var(--border-radius-medium) !important
}

.image-1by1 .popup-card img {
  aspect-ratio: 1/1 !important
}



.image-ratio.image-4by5 img {
  aspect-ratio: 16/9
}

@media(width >=1024px) {
  .image-ratio.image-4by5 img {
    aspect-ratio: 4/5
  }
}


.columns>div {
  display: flex;
  flex-direction: column;
  align-items: start;
  text-align: left
}

html[dir=rtl] .columns>div {
  text-align: right
}

@media(width >=1024px) {
  .columns>div {
    flex-direction: unset;
    gap: 32px
  }

  .columns>div>div {
    flex: 1;
    order: unset
  }
}

@media(width <=1024px) {
  .bg-neutrals-20 .columns>div {
    row-gap: var(--spacing-huge)
  }

  .bg-neutrals-20 .columns.columns-feature-card>div>div {
    display: flex
  }
}

@media(width <=767px) {
  [class*=col-ctrl-]:empty {
    display: none
  }
}


.z-index-99 {
  z-index: 99
}

.z-index-100 {
  z-index: 100
}

.border-radius-bottom-y-80 {
  border-bottom-left-radius: var(--border-radius-campaigns-container);
  border-bottom-right-radius: var(--border-radius-campaigns-container)
}

.border-radius-top-y-80 {
  border-top-left-radius: var(--border-radius-campaigns-container);
  border-top-right-radius: var(--border-radius-campaigns-container)
}

.copy-right,
.image-caption {
  color: var(--text-on-light-default);
  font-weight: var(--body-font-weight-regular);
  font-size: var(--font-size-200);
  line-height: 112%;
  letter-spacing: -0.25px
}

.copy-right {
  font-weight: bold
}

.header-wrapper.transparent-white-components {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: auto
}

.transparent-white-components .wbg_ext_global_header__main .wbg_ext_global_header__nav-list li button {
  color: var(--white)
}

.transparent-white-components .wbg_ext_global_header__main img {
  filter: invert(1) brightness(70) !important
}

.transparent-white-components .wbg_ext_hamburger_icon {
  width: 56px;
  height: 56px;
  border-radius: var(--loop-button-border-radius);
  border: 1px solid var(--outline-transparent);
  background: var(--gray-alpha-white-16-a) !important
}

.transparent-white-components .lp-bars:before {
  color: var(--white)
}

@media screen and (max-width: 1199.9px) {
  .header-wrapper.transparent-white-components .wbg_ext_top_navigation.active {
    min-height: 100vh
  }
}

.wbg_ext_full_row_blue_components {
  z-index: 9;
  position: relative
}

.bg-white {
  background-color: var(--white) !important
}

.custom-image-container.bg-image img {
  aspect-ratio: 3/2;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: top;
  object-position: top
}

@media(width >=768px) {
  .custom-image-container.bg-image img {
    aspect-ratio: 16/9;
  }
}

@media(width >=1024px) {
  .custom-image-container.bg-image img {
    aspect-ratio: 17/6;
  }
}


body[class*=page-swoosh-]::before,
main .section[data-sec-swoosh^=sec-swoosh]:not([data-sec-inside-container=true])::before,
main .section[data-sec-swoosh^=sec-swoosh][data-sec-inside-container=true]>div::before,
main .section[data-sec-swoosh^=sec-bg-image]:not([data-sec-inside-container=true])::before,
main .section[data-sec-swoosh^=sec-bg-image][data-sec-inside-container=true]>div::before {
  background-repeat: no-repeat;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  top: 0;
  left: 0
}

main .section[data-sec-swoosh^=sec-swoosh][data-sec-inside-container=true]>div::before {
  z-index: 0
}

main .section[data-sec-swoosh^=sec-swoosh][data-sec-inside-container=true]>div>* {
  z-index: 1;
  position: relative
}

body[class*=page-swoosh-]::before {
  background-position: left top;
  background-size: 60%
}

@media(width >=1024px) {
  body[class*=page-swoosh-]::before {
    background-size: 40%
  }
}

body.page-swoosh-big-curve::before {
  background-image: url("../icons/swoosh/page/big-curve.svg")
}

body.page-swoosh-half-curve::before {
  background-image: url("../icons/swoosh/page/half-curve.svg")
}
/*=== Begin Swoosh image ====*/