textarea {
    grid-area: span 1 / span 2 / span 1 / span 2;
}

@media screen and (max-width: 767px) {
    textarea {
        grid-area: span 1 / span 1 / span 1 / span 1;
    }
}

* {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-o-font-smoothing: antialiased;
}

.w-webflow-badge {
position: fixed !important;
display: None !important;
visibility: hidden !important;
}

    .line {
position: relative;
}
.line-mask {
position: absolute;
top: 0;
right: 0;
background-color: black;
opacity: 0.75;
height: 100%;
width: 100%;
z-index: 2;
}


html { font-size: 1rem; }
@media screen and (max-width:1440px) { html { font-size: calc(-0.00222717149220486rem + 1.1135857461024499vw); } }
@media screen and (max-width:991px) { html { font-size: calc(0.036969866071428714rem + 2.008928571428571vw); } }
@media screen and (max-width:767px) { html { font-size: calc(-0.0031143929503916453rem + 4.983028720626632vw); } }




/* Focus state style for keyboard navigation for the focusable elements */
*[tabindex]:focus-visible,
  input[type="file"]:focus-visible {
   outline: 0.125rem solid #4d65ff;
   outline-offset: 0.125rem;
}

/* Get rid of top margin on first element in any rich text element */
.w-richtext > :not(div):first-child, .w-richtext > div:first-child > :first-child {
  margin-top: 0 !important;
}

/* Get rid of bottom margin on last element in any rich text element */
.w-richtext>:last-child, .w-richtext ol li:last-child, .w-richtext ul li:last-child {
    margin-bottom: 0 !important;
}

/* Prevent all click and hover interaction with an element */
.pointer-events-off {
    pointer-events: none;
}

/* Enables all click and hover interaction with an element */
.pointer-events-on {
  pointer-events: auto;
}

/* Create a class of .div-square which maintains a 1:1 dimension of a div */
.div-square::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

/* Make sure containers never lose their center alignment */
.container-medium,.container-small, .container-large {
    margin-right: auto !important;
  margin-left: auto !important;
}

/*
Make the following elements inherit typography styles from the parent and not have hardcoded values.
Important: You will not be able to style for example "All Links" in Designer with this CSS applied.
Uncomment this CSS to use it in the project. Leave this message for future hand-off.
*/
/*
a,
.w-input,
.w-select,
.w-tab-link,
.w-nav-link,
.w-dropdown-btn,
.w-dropdown-toggle,
.w-dropdown-link {
  color: inherit;
  text-decoration: inherit;
  font-size: inherit;
}
*/

/* Apply "..." after 3 lines of text */
.text-style-3lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Apply "..." after 2 lines of text */
.text-style-2lines {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Adds inline flex display */
.display-inlineflex {
  display: inline-flex;
}

/* These classes are never overwritten */
.hide {
  display: none !important;
}

@media screen and (max-width: 991px) {
    .hide, .hide-tablet {
        display: none !important;
    }
}
  @media screen and (max-width: 767px) {
    .hide-mobile-landscape{
      display: none !important;
    }
}
  @media screen and (max-width: 479px) {
    .hide-mobile{
      display: none !important;
    }
}

.margin-0 {
  margin: 0rem !important;
}

.padding-0 {
  padding: 0rem !important;
}

.spacing-clean {
padding: 0rem !important;
margin: 0rem !important;
}

.margin-top {
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-top {
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.margin-right {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.padding-right {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.margin-bottom {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.padding-bottom {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

.margin-left {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
}

.padding-left {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
}

.margin-horizontal {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.padding-horizontal {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.margin-vertical {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.padding-vertical {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

/* Apply "..." at 100% width */
.truncate-width {
        width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Removes native scrollbar */
.no-scrollbar {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.swiper-button-disabled {
    background-color: #333333;
  color: #b8b8b8;
  cursor: default;
  pointer-events: none;
}

.swiper-pagination.is-testimonials {
    width: auto !important;
  height: auto !important;
  padding: 0 !important;
  display: flex !important;
}

.swiper-pagination-bullet {
opacity: 1 !important;
width:.5rem !important;
height:.5rem !important;
margin-right: 0.75rem !important;
margin-left: 0 !important;
border-radius: 0 !important;
background-color: #333333 !important;
}

.swiper-pagination-bullet-active {
background-color: #42CA80 !important;
}

.green-arrow {
    filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25));
  pointer-events: auto !important;
}



.button.is-link {
    text-decoration: none;

    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}

.button.is-link:hover, .button.is-link:focus {
    background-size: 100% 2px;
}





.heading-style-h3.is-cta_inner {
    text-decoration: none;

    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
}

.heading-style-h3.is-cta_inner:hover, .heading-style-h3.is-cta_inner:focus {
    background-size: 100% 2px;
}

.non-selectable {
  user-select: none;
}


/* max width for the quote on the about us page */
@media (min-width: 1920px) {
    .testimonials_content-wrapper {
        max-width: 80.75rem; !important
    }
}




/* Make grid on homepage responsive */
.diagram_component {
  grid-template-columns: 38.5rem 32rem;
}

/* For screens with a width of 1440px and above */
@media (min-width: 1440px) {
  .diagram_component {
    grid-template-columns: 39.5rem 36rem;
  }
}

/* For screens with a width of 1920px and above */
@media (min-width: 1700px) {
  .diagram_component {
    grid-template-columns: 44rem 46rem;
  }
}

/* For tablet breakpoint and below */
@media (max-width: 991px) {
  .diagram_component {
    grid-template-columns: 1fr; /* this will take up the full width of the container */
  }
}

/* Make grid on Interlinks API Page responsive */
.tunnel_inner-wrapper {
  grid-template-columns: 38.5rem 32rem;
}

/* For screens with a width of 1440px and above */
@media (min-width: 1440px) {
  .tunnel_inner-wrapper {
    grid-template-columns: 39.5rem 36rem;
  }
}

/* For screens with a width of 1920px and above */
@media (min-width: 1920px) {
  .tunnel_inner-wrapper {
    grid-template-columns: 44rem 55rem;
  }
}

/* For tablet breakpoint and below */
@media (max-width: 991px) {
  .tunnel_inner-wrapper {
    grid-template-columns: 1fr; /* this will take up the full width of the container */
  }
}



/* Make grid on services page responsive */
.diagram_component.is-services {
  grid-template-columns: 38.5rem 30rem;
}

/* For screens with a width of 1440px and above */
@media (min-width: 1440px) {
  .diagram_component.is-services {
    grid-template-columns: 39.5rem 34rem;
  }
}

/* For screens with a width of 1920px and above */
@media (min-width: 1920px) {
  .diagram_component.is-services {
    grid-template-columns: 44rem 55rem;
  }
}/* For screens with a width of 1920px and above */
@media (max-width: 991px) {
  .diagram_component.is-services {
    grid-template-columns: 1fr;
  }
}

/* For screens with a width of 1920px and above */
@media (max-width: 767px) {
  .diagram_component.is-services {
    grid-template-columns: 1fr;
  }
}



/* Make grid on platform page responsive */
.diagram_component.is-platform {
  grid-template-columns: 38.5rem 30rem;
}

/* For screens with a width of 1440px and above */
@media (min-width: 1440px) {
  .diagram_component.is-platform {
    grid-template-columns: 39.5rem 34rem;
  }
}

@media (min-width: 1920px) {
  .diagram_component.is-platform {
    grid-template-columns: 44rem 55rem;
  }
}

@media (max-width: 991px) {
  .diagram_component.is-platform {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .diagram_component.is-platform {
    grid-template-columns: 1fr;
  }
}




/* max width for the Terms & Conditions Text*/
@media (min-width: 1920px) {
    .tnc_wrapper {
        max-width: 75rem; !important
    }
}



/* Gradient Background for mockups*/

.section_illustration-platform {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) -2.4%, rgba(39, 39, 39, 0.51) 50.95%, #2B2A2A 97.05%);
}

.section_scroll-text {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) -2.4%, rgba(39, 39, 39, 0.51) 50.95%, #2B2A2A 97.05%);
}




@media (max-width: 991px) {
    .u-grid {
      grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 767px) {
    .u-grid {
      grid-template-columns: 1fr;
    }
}



@media (max-width: 991px) {
  :root {
    --section--padding-inner: 4rem;
  }
}
@media (max-width: 767px) {
  :root {
    --section--padding-inner: 3rem;
  }
}




@media (max-width: 991px) {
  .section_h2-header + .section_features .features_inner {
    padding-top: 1rem;
  }
}




/* Hide scrollbar for Chrome, Safari and Opera */
.features_list::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.features_list {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}




/* Custom Dotted Line */
.chart_stat-line {
  border: none;
  height: 2px;
  background-image: radial-gradient(circle, currentColor 1px, transparent 1px);
  background-size: 6px 2px;
  background-position: bottom;
  background-repeat: repeat-x;
}

/* Hide scrollbars */
.chart_tabs-menu::-webkit-scrollbar {
  display: none;
}
.chart_tabs-menu {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Margins added to make the menu full bleed
@media only screen and (max-width: 767px) {
  .chart_tabs-menu .chart_tabs-link:first-child {
    margin-left: 1rem;
  }
  .chart_tabs-menu .chart_tabs-link:last-child {
    margin-right: 1rem;
  }
} */


@media screen and (min-width: 991px) and (max-width: 102rem) {
  .chart_tab-content {
    grid-column-gap: 5rem;
    grid-row-gap: 5rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .chart_stat-wrap {
    display: grid;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    grid-auto-columns: 1fr;
    grid-column-gap: 2.5rem;
    grid-row-gap: 2.5rem;
    grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr) minmax(0px, 1fr);
    grid-template-rows: auto;
  }

  .chart_tabs-chart.is-absolute {
    position: static;
    display: block;
    width: 100%;
  }
}