.module {
      --module-padding: 4rem;
      padding-top: var(--module-padding);
      padding-bottom: var(--module-padding);
      overflow-x: clip
    }

    @media(max-width: 1023px) {
      .module {
/*         --module-padding: 7rem */
      }
    }
.ko>li{    margin: 0px !important;
    padding: 0px !important;}
    .module .wrapper {
      display: grid;
      gap: 6rem
    }

    @media(max-width: 1349px) {
      .module .wrapper {
        row-gap: 7rem
      }
    }

    .module--first .wrapper {
      row-gap: 7rem
    }

    @media(max-width: 1023px) {
      .module--first .wrapper {
        row-gap: 5rem
      }
    }

    .module--first .header {
      display: contents
    }

    .module--first .header:before {
      content: "";
      display: block
    }

    @media(min-width: 768px) {
      .module--first .header:before {
        grid-row-end: span 2
      }
    }

    .module--first .header .heading {
      align-self: center;
      max-width: 100rem
    }

    .module--first .header .rich-text {
      align-self: flex-end;
      font-weight: 600
    }

    @media(min-width: 768px) {
      .module--first .header .rich-text {
        max-width: min(80rem, 87.5%);
        text-wrap: balance
      }
    }

    .module--first .header .rich-text strong {
      font-weight: 700
    }

    .module__background,
    .module__image,
    .module__background .video,
    .module__overlay {
      position: absolute;
      inset: 0
    }

    .module__background {
      --parallax-ratio: 0.2
    }

    .module__background:before {
      content: "";
      inset: 0;
      position: absolute;
      z-index: 10;
      background-image: linear-gradient(to bottom, transparent 20%, rgba(0, 0, 0, 0.5333333333));
      background-blend-mode: multiply
    }

    .module__image,
    .module__background .video,
    .module__overlay {
      height: 100% !important;
      width: 100% !important;
      object-fit: cover
    }

    @media(prefers-reduced-transparency) {
      .module__background .video {
        display: none
      }
    }

    .no-js .module__background .video {
      display: none
    }

    .module__overlay {
      background: none !important;
      position: absolute !important
    }

    .module:has(.module__background) {
      --parallax-offset: var(--offset);
      position: relative;
      overflow: clip
    }

    .parallax {
      --parallax-ratio: 0;
      --parallax-origin: calc(50vh - 50%);
      --parallax-offset: var(--offset);
      --parallax-translate: calc((var(--parallax-origin) + (var(--scroll-y) - var(--parallax-offset)) * 0.1rem) * var(--parallax-ratio));
      translate: 0 var(--parallax-translate);
      will-change: transform
    }

    @media(prefers-reduced-motion: reduce) {
      .parallax {
        transform: none
      }
    }

    .scroll-horizontal {
      --scroll-horizontal-padding: max(calc((100vw - var(--wrapper-max-width)) / 2), var(--wrapper-padding));
      max-width: 100vw
    }

    .scroll-horizontal.is-scrollable {
      margin: -5rem calc(-1*var(--scroll-horizontal-padding));
      padding: 5rem var(--scroll-horizontal-padding);
      overflow-x: auto;
      overflow-y: hidden;
      scroll-padding: 5rem var(--scroll-horizontal-padding);
      scroll-behavior: auto
    }

    .scroll-horizontal.is-scrollable:before {
      content: "";
      display: block;
      width: 10rem
    }

    .scroll-horizontal.is-scrollable::-webkit-scrollbar {
      display: none
    }

    .scroll-horizontal.has-touch-blocked {
      scroll-snap-type: none
    }

    .scroll-horizontal.has-scroll-snap {
      scroll-snap-type: x mandatory
    }

    .scroll-horizontal.has-scroll-snap>* {
      scroll-snap-align: start
    }

    .tile {
      --tile-width: 25rem;
      --tile-gap: 1.5rem;
      --tile-scale: 1.06;
      display: grid;
      align-content: start;
      gap: var(--tile-gap);
      position: static !important;
      z-index: 10;
      min-width: max(var(--tile-width), 25rem);
      min-height: max(var(--tile-width)*1.2, 30rem);
      max-width: calc(2*var(--tile-width));
      padding: 3rem;
      background-color: var(--color-background-dimmed)
    }

    @media(max-width: 1023px) {
      .tile {
        --tile-scale: 1
      }
    }

    .tile__link {
      display: grid;
      gap: var(--tile-gap)
    }

    @media(hover: none) {
      .tile__link {
        display: contents
      }
    }

    .tile__link .tile__title,
    .tile__link .rich-text {
      text-wrap: initial
    }

    @media(hover: hover) {

      .tile__link .tile__title,
      .tile__link .rich-text {
        text-decoration: underline;
        text-decoration-color: rgba(0, 0, 0, 0);
        transition: text-decoration-color var(--duration-fast)
      }
    }

    .tile__link .rich-text:after {
      content: "";
      display: inline-block;
      height: 1em;
      width: 2em
    }

    .tile__link .arrow-right,
    .tile__link .arrow-top-right {
      position: absolute;
      bottom: 3rem;
      right: 3rem;
      color: var(--color-strong)
    }

    @media(hover: hover) {

      .tile__link .arrow-right,
      .tile__link .arrow-top-right {
        transition: translate var(--duration-default);
        will-change: translate
      }
    }

    @media(hover: hover) {
      .tile__link:hover .tile__hero {
        scale: var(--tile-scale)
      }

      .tile__link:hover .tile__hero .image__content {
        scale: 1
      }

      .tile__link:hover .tile__title,
      .tile__link:hover .rich-text {
        text-decoration-color: currentColor
      }

      .tile__link:hover .arrow-right {
        translate: .5em
      }

      .tile__link:hover .arrow-top-right {
        translate: .35em -0.35em
      }
    }

    @media(hover: hover) {
      .tile__link body:not(.is-tabbed) {
        display: contents
      }
    }

    .tile__hero.image {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      transform-origin: bottom;
      transition: scale var(--duration-default);
      will-change: transform
    }

    .tile__hero .image__content {
      scale: var(--tile-scale);
      transition: inherit;
      will-change: transform
    }

    .tile__title {
      font-weight: inherit !important
    }

    .tile .heading {
      font-weight: bold
    }

    .tile__number {
      color: var(--color-strong);
      font-size: 6rem;
      line-height: var(--line-height-h1);
      white-space: nowrap
    }

    @media(hover: none) {
      .tile:has(.tile__hero) {
        padding-top: calc(50% + 2rem)
      }
    }

    .tile:has(.tile__hero) .tile__link {
      padding-top: calc(50% + 2rem)
    }

    .tile:has(.tile__icon) {
      padding-top: 4rem
    }

    .tile:has(.tile__icon) .tile__icon {
      display: inline-grid;
      place-items: center;
      width: 5rem;
      height: 5rem;
      border-radius: 50%;
      background-color: var(--color-background)
    }

    .tile.link {
      --tile-link-duration: var(--duration-default);
      color: inherit;
      font-weight: inherit;
      text-decoration: none;
      transition: z-index var(--tile-link-duration)
    }

    @media(hover: hover) {

      .tile.link:before,
      .tile.link:after,
      .tile.link .tile__link:before,
      .tile.link .tile__link:after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -10;
        transition-duration: var(--tile-link-duration)
      }
    }

    @media(hover: hover) {

      .tile.link:before,
      .tile.link .tile__link:before {
        box-shadow: var(--box-shadow);
        opacity: 0;
        transition-property: opacity;
        will-change: opacity
      }
    }

    @media(prefers-contrast: more) {

      .tile.link:before,
      .tile.link .tile__link:before {
        border: 2px solid
      }
    }

    @media(forced-colors: active) {

      .tile.link:before,
      .tile.link .tile__link:before {
        border: 2px solid
      }
    }

    @media(hover: hover) {

      .tile.link:after,
      .tile.link .tile__link:after {
        background-color: var(--color-background-dimmed);
        transition-property: transform;
        will-change: transform
      }
    }

    .tile.link .link__icon,
    .tile.link .tile__link .link__icon {
      --icon-size: 2rem;
      height: auto;
      width: auto;
      position: absolute;
      bottom: 3rem;
      right: 3rem;
      background: none;
      border-radius: 0;
      color: var(--color-strong)
    }


 



    /* Variables in HUBL & CSS */

    /* MINIFIED CSS */
    html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline
    }

    :root {
      --font-family: 'Poppins', sans-serif;
      --font-size-regular-base: 1.6rem;
      --font-size-enlarged-base: 1.8rem;
      --font-size-small-base: 1.4rem;
      --font-size-tiny-base: 1.2rem;
      --font-size-h1-base: 6rem;
      --font-size-h2-base: 3rem;
      --font-size-h3-base: 2.4rem;
      --font-size-h4-base: 1.8rem;
      --font-size-regular: max(var(--font-size-regular-base), 14px);
      --font-size-enlarged: max(var(--font-size-enlarged-base), 16px);
      --font-size-small: max(var(--font-size-small-base), 12px);
      --font-size-tiny: max(var(--font-size-tiny-base), 11px);
      --font-size-h1: max(var(--font-size-h1-base), 54px);
      --font-size-h2: max(var(--font-size-h2-base), 26px);
      --font-size-h3: max(var(--font-size-h3-base), 20px);
      --font-size-h4: max(var(--font-size-h4-base), 14px);
      --line-height-default: 1.75;
      --line-height-dense: 1.5;
      --line-height-h1: 1.2;
      --line-height-h2: 1.35;
      --line-height-h3: 1.45;
      --line-height-h4: 1.5
    }

    *,
    *:before,
    *:after {
      box-sizing: border-box;
/*       -webkit-text-fill-color: #fff; */
    }

    :root {
      --root-font-size-px: 10;
      --root-font-size-fluid-factor: 0.2;
      --root-font-size-fixed: calc(var(--root-font-size-px) / 16 * 100%);
      --root-font-size-fixed-factor: calc(1 - var(--root-font-size-fluid-factor));
      --root-scroll-padding: 180px
    }

    @media(prefers-contrast: more) {
      :root {
        --root-font-size-px: 11;
        filter: contrast(1.5)
      }
    }

    html {
      font-size: var(--root-font-size-fixed, 62.5%);
      font-size: 10px;
      font-size: calc(var(--root-font-size-fixed-factor)*var(--root-font-size-fixed, 62.5%) + var(--root-font-size-fluid-factor)*var(--root-font-size-px)/1440*100vw);
      -webkit-font-smoothing: antialiased;
      -webkit-text-size-adjust: 100%;
      -moz-osx-font-smoothing: grayscale;
      scroll-behavior: smooth;
      scroll-padding: var(--root-scroll-padding, 180px);
      overflow-x: hidden
    } 

    body {
      background-color: var(--color-background);
      color: var(--color-primary);
      font-size: 1.6rem;
      font-size: var(--font-size-regular);
      font-family: var(--font-family);
      line-height: var(--line-height-default);
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased
    }
 body {
        font-family: 'Poppins', sans-serif;
        background-color: #000;

      }

      .section-title {
        font-size: 24px;
        margin-bottom: 20px;
        color: #222;
        text-align: center;
      }

      .benefits-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 20px;
        max-width: 1000px;
        margin: auto;
      }

      .benefit-block {
        background-color: #333;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        display: flex;
        align-items: flex-start;
        gap: 10px;
      }

      .check-icon {
        font-size: 20px;
        color: #fb197d;
        ;
        margin-top: 2px;
      }

      .benefit-text {
        font-size: 16px;
        color: #333;
      }
        body {
            margin: 0;
            font-family: 'Inter', sans-serif;
            background: #f1f5f9;

            color: #0f172a;
          }

          .features-grid {
            max-width: 76vw;
            margin: auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 24px;
          }

          .feature-card {
            background: #333;
            border-radius: 16px;
            padding: 24px 20px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
            backdrop-filter: blur(16px);
            border: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            align-items: flex-start;
            gap: 16px;
            transition: all 0.3s ease;
            position: relative;
          }

          .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
          }

          .feature-icon {
            font-size: 24px;
            color: #10b981;
            animation: bounce 2s infinite ease-in-out;
            flex-shrink: 0;
          }

          .feature-text {
            font-size: 16px;
            line-height: 1.6;
            color: white;
          }

          @keyframes bounce {

            0%,
            100% {
              transform: translateY(0);
            }

            50% {
              transform: translateY(-4px);
            }
          }

          @media (max-width: 480px) {
            .feature-card {
              padding: 18px 16px;
              gap: 12px;
            }
          }
           * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        font-family: 'Poppins', sans-serif;
        background: #000;
        color: #0f172a;
      }

      .hovercard-wrapper {
        /* padding: 80px 20px; */
        max-width: 1300px;
        margin: auto;
      }

      .hovercard-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 35px;
        width: 78vw;
      }

      .hovercard-item {
        position: relative;
        border-radius: 24px;
        padding: 32px;
        overflow: hidden;
        background-color: #333;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
        text-align: center;
        transition: color 0.3s ease;
        z-index: 1;
      }

      .hovercard-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        border-radius: 24px;
      }

      .card1::before {
        background-image: url('https://images.unsplash.com/photo-1593642532973-d31b6557fa68?auto=format&fit=crop&w=1080&q=80');
      
      }

      .card2::before {
        background-image: url('../images/Portfolio.jpg');
      }

      .card3::before {
        background-image: url('../images/Ecommerce picture.jpg');
      }

      .card4::before {
        background-image: url('../images/landing page.jpg');
      }

      .card5::before {
        background-image: url('https://as2.ftcdn.net/jpg/12/91/10/11/1024W_F_1291101156_MvbvHPqs3YmfnDuVT1xuCvav5DwqD1pn_NW1.jpg');
      }

      .card6::before {
        background-image: url('../images/blog.jpg');
      }

      .hovercard-item:hover::before {
        opacity: 0.4;
      }

      .hovercard-icon {
        width: 70px;
        height: 70px;
        background: #f91979;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 24px;
        z-index: 1;
        position: relative;
        transition: background 0.3s ease;
      }

      .hovercard-icon img {
        width: 32px;
        height: 32px;
        filter: brightness(0) invert(1);
      }

      .hovercard-title,
      .hovercard-desc {
        position: relative;
        z-index: 1;
        transition: color 0.3s ease;
      }

      .hovercard-title {
        font-size: 20px;
        font-weight: 600;
        color: white;
        margin-bottom: 14px;
      }

      .hovercard-desc {
        font-size: 16px;
        line-height: 1.7;
        color: white;
      }

      .hovercard-item:hover .hovercard-icon {
        background: rgba(255, 255, 255, 0.3);
      }

      .hovercard-item:hover .hovercard-title,
      .hovercard-item:hover .hovercard-desc {
        color: white;
      }

      @media (max-width: 600px) {
        .hovercard-item {
          padding: 24px;
        }

        .hovercard-title {
          font-size: 18px;
        }

        .hovercard-desc {
          font-size: 14px;
        }

        .hovercard-icon {
          width: 60px;
          height: 60px;
        }

        .hovercard-icon img {
          width: 28px;
          height: 28px;
        }
      }
      .logo-wall .logos {
    --logos-item-max-width: 13rem;
    grid-gap: 8rem 5rem;
    justify-content: space-around
}

@media (min-width: 1024px)and (max-width: 1349px) {
    .logo-wall .logos {
        column-gap: 8rem
    }
}

@media (max-width: 767px) {
    .logo-wall .logos {
        gap: 6rem 3rem
    }
}

.logo-wall .logos__item {
    filter: grayscale(100%)
}

@media (min-width: 768px) {
    .logo-wall .logos:has(.logos__item:nth-of-type(4)) {
        justify-content: space-between
    }
}

@media (min-width: 1024px) {
    .logo-wall.layout--1 .wrapper {
        grid-template-columns: minmax(auto, 75rem) auto;
        justify-content: space-between
    }
}

.logo-wall.layout--1 .heading {
    font-size: 5rem;
    line-height: 1.25
}

.logo-wall.layout--1 .button {
    align-self: end;
    justify-self: start
}

.logo-wall.layout--1 .logos {
    grid-column: 1/-1
}

.logo-wall.layout--2 .wrapper {
    display: flex;
    flex-direction: column
}

.logo-wall.layout--2 .logos {
    grid-auto-flow: column;
    grid-auto-columns: var(--logos-item-max-width);
    width: auto
}

:root {
    --logos-item-max-width: 18rem
}

.logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--logos-item-max-width, 18rem));
    grid-gap: var(--gap-vertical) var(--gap-horizontal);
    justify-content: space-evenly;
    place-items: center;
    width: 100%
}

@media (max-width: 767px) {
    .logos {
        --logos-item-max-width: 14rem
    }
}

.logos--small .logo {
    scale: .8
}

.logos--large .logo {
    scale: 1.2
}
.logo {
    display: inline-flex;
    max-width: 16rem;
    max-height: 8rem
}

.logo.is-broken {
    width: 2.4rem;
    height: 2.4rem
}

/* @media (prefers-color-scheme: dark) {
    .logo {
        filter: invert(1) hue-rotate(180deg) brightness(2.9) saturate(.45)
    }
}

.theme--dark .logo {
    filter: invert(1) hue-rotate(180deg) brightness(2.9) saturate(.45)
} */
.testimonials .tiles {
    align-items: start
}

@media (min-width: 1024px) {
    .testimonials .tiles {
        grid-auto-flow: dense
    }
}

.testimonials .tiles .tile {
    gap: 2.5rem;
    place-content: space-between;
    min-height: 34rem;
    padding-top: 5rem
}

.testimonials .tiles .tile .rich-text {
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4)
}

@media (min-width: 1024px) {
    .testimonials .tiles .tile:nth-child(odd) {
        --parallax-ratio: -.1;
        grid-column-start: -2;
        top: 0
    }
}

@media (min-width: 1024px) {
    .testimonials .tiles .tile:nth-child(2n) {
        --parallax-ratio: -.2;
        --parallax-origin: 50vh;
        top: 12rem
    }
}

.testimonials .tiles--small .tile .rich-text {
    font-size: inherit;
    line-height: inherit
}

.testimonials .tiles:has(.tile:only-child) {
    --tiles-columns: 1;
    grid-template-columns: 100%
}

.testimonials .tiles:has(.tile:only-child):before {
    content: none
}

@media (min-width: 768px) {
    .testimonials .tiles:has(.tile:only-child).tiles--small .tile .rich-text {
        font-size: var(--font-size-h4);
        line-height: var(--line-height-h4)
    }
}

.testimonials .tiles:has(.tile:only-child) .tile,
.testimonials:not(.layout--1) .tile:last-child:not(.tiles .tile) {
    --parallax-ratio: 0;
    position: static;
    width: 87.5%;
    max-width: 80rem;
    min-width: 0
}

@media (max-width: 767px) {

    .testimonials .tiles:has(.tile:only-child) .tile,
    .testimonials:not(.layout--1) .tile:last-child:not(.tiles .tile) {
        width: 100%
    }
}

@media (min-width: 768px) {

    .testimonials .tiles:has(.tile:only-child) .tile .rich-text,
    .testimonials:not(.layout--1) .tile:last-child:not(.tiles .tile) .rich-text {
        font-size: var(--font-size-h3);
        line-height: var(--line-height-h3)
    }
}

.testimonials.layout--1 .tile {
    grid-template-columns: 16rem 1fr 10rem;
    grid-template-rows: auto auto 3rem;
    gap: 3rem 8rem;
    max-width: 100%;
    min-height: 0;
    padding: 0;
    background: none
}

@media (max-width: 1349px) {
    .testimonials.layout--1 .tile {
        column-gap: 4rem
    }
}

@media (max-width: 1023px) {
    .testimonials.layout--1 .tile {
        grid-template-columns: 12rem 1fr
    }
}

@media (max-width: 767px) {
    .testimonials.layout--1 .tile {
        grid-template-columns: auto;
        grid-template-rows: auto
    }
}

.testimonials.layout--1 .tile .rich-text {
    grid-row: 2;
    color: var(--color-strong);
    font-size: var(--font-size-h2);
    line-height: var(--line-height-dense)
}

@media (max-width: 1023px) {
    .testimonials.layout--1 .tile .rich-text {
        font-size: var(--font-size-h3)
    }
}

.testimonials.layout--1 .logo {
    align-self: end
}

.testimonials.layout--1 .author {
    align-self: start;
    gap: 1em
}

@media (min-width: 768px) {
    .testimonials.layout--1 .author {
        order: -10;
        grid-template-columns: auto;
        grid-row: 1/-1
    }
}

@media (min-width: 768px) {
    .testimonials.layout--1 .author .image {
        aspect-ratio: calc(var(--image-ratio)/100%)
    }
}

@media (max-width: 1023px) {
    .testimonials.layout--1 .author .image {
        width: 100%
    }
}

@media (max-width: 767px) {
    .testimonials.layout--1 .author .image {
        width: 6.5rem;
        height: 6.5rem
    }
}

@media (min-width: 768px) {
    .testimonials.layout--1 .author__name {
        font-size: var(--font-size-h4)
    }
}
.tiles {
    --parallax-offset: var(--offset);
    --tiles-gap: 5rem;
    --tile-width: min(80vw, calc(.8 * (var(--wrapper-max-width) - (var(--tiles-columns) - 1) * var(--tiles-gap)) / var(--tiles-columns)));
    display: grid;
    gap: var(--tiles-gap);
    grid-template-columns: repeat(auto-fill, minmax(var(--tile-width), 1fr));
    counter-reset: tiles-counter
}

@media (max-width: 1349px) {
    .tiles {
        --tiles-gap: 4rem
    }
}

@media (max-width: 1023px) {
    .tiles {
        --tiles-gap: 3rem;
        grid-template-columns: auto
    }
}

.tiles .tile {
    --parallax-offset: inherit !important;
    --tile-width: inherit
}

@media (max-width: 1023px) {
    .tiles .tile {
        position: static;
        translate: none !important
    }
}

ol.tiles .tile {
    counter-increment: tiles-counter
}

ol.tiles .tile:before {
    content: counter(tiles-counter, decimal-leading-zero);
    color: var(--color-strong);
    font-size: 6rem;
    line-height: var(--line-height-h1);
    pointer-events: none
}

.tiles--small .tile .rich-text {
    font-size: var(--font-size-small)
}

.tiles--4-columns {
    --tiles-columns: 4
}

.tiles--4-columns .tile:nth-child(4n+1) {
    --parallax-ratio: calc(-.0125 * var(--tiles-columns));
    top: calc(0rem*var(--tiles-columns))
}

.tiles--4-columns .tile:nth-child(4n+2) {
    --parallax-ratio: calc(-.025 * var(--tiles-columns));
    top: calc(1rem*var(--tiles-columns))
}

.tiles--4-columns .tile:nth-child(4n+3) {
    --parallax-ratio: calc(-.0375 * var(--tiles-columns));
    top: calc(2rem*var(--tiles-columns))
}

.tiles--4-columns .tile:nth-child(4n+4) {
    --parallax-ratio: calc(-.05 * var(--tiles-columns));
    top: calc(3rem*var(--tiles-columns))
}

.tiles--4-columns:has(.tile:nth-child(16)) .tile {
    translate: 0 calc(.5*var(--parallax-translate))
}

.tiles--4-columns:has(.tile:nth-child(48)) .tile {
    translate: 0 calc(.25*var(--parallax-translate))
}

@media (min-width: 1024px) {
    .tiles--4-columns:has(.tile:nth-child(4):last-child) {
        margin-bottom: 10rem
    }
}

@media (min-width: 1024px) {
    .tiles--4-columns:has(.tile:nth-child(8):last-child) {
        margin-bottom: 5rem
    }
}

@media (max-width: 1349px) {
    .tiles {
        --tiles-columns: 3
    }

    .tiles .tile:nth-child(3n+1) {
        --parallax-ratio: calc(-.0166666667 * var(--tiles-columns));
        top: calc(0rem*var(--tiles-columns))
    }

    .tiles .tile:nth-child(3n+2) {
        --parallax-ratio: calc(-.0333333333 * var(--tiles-columns));
        top: calc(2rem*var(--tiles-columns))
    }

    .tiles .tile:nth-child(3n+3) {
        --parallax-ratio: calc(-.05 * var(--tiles-columns));
        top: calc(4rem*var(--tiles-columns))
    }

    .tiles:has(.tile:nth-child(12)) .tile {
        translate: 0 calc(.5*var(--parallax-translate))
    }

    .tiles:has(.tile:nth-child(36)) .tile {
        translate: 0 calc(.25*var(--parallax-translate))
    }
}

@media (max-width: 1349px)and (min-width: 1024px) {
    .tiles:has(.tile:nth-child(3):last-child) {
        margin-bottom: 10rem
    }
}

@media (max-width: 1349px)and (min-width: 1024px) {
    .tiles:has(.tile:nth-child(6):last-child) {
        margin-bottom: 5rem
    }
}

.tiles--3-columns,
.tiles--4-columns:has(.tile:nth-child(1):last-child),
.tiles--4-columns:has(.tile:nth-child(2):last-child),
.tiles--4-columns:has(.tile:nth-child(3):last-child),
.tiles--4-columns:has(.tile:nth-child(5):last-child),
.tiles--4-columns:has(.tile:nth-child(6):last-child) {
    --tiles-columns: 3
}

.tiles--3-columns .tile:nth-child(3n+1),
.tiles--4-columns:has(.tile:nth-child(1):last-child) .tile:nth-child(3n+1),
.tiles--4-columns:has(.tile:nth-child(2):last-child) .tile:nth-child(3n+1),
.tiles--4-columns:has(.tile:nth-child(3):last-child) .tile:nth-child(3n+1),
.tiles--4-columns:has(.tile:nth-child(5):last-child) .tile:nth-child(3n+1),
.tiles--4-columns:has(.tile:nth-child(6):last-child) .tile:nth-child(3n+1) {
    --parallax-ratio: calc(-.0166666667 * var(--tiles-columns));
    top: calc(0rem*var(--tiles-columns))
}

.tiles--3-columns .tile:nth-child(3n+2),
.tiles--4-columns:has(.tile:nth-child(1):last-child) .tile:nth-child(3n+2),
.tiles--4-columns:has(.tile:nth-child(2):last-child) .tile:nth-child(3n+2),
.tiles--4-columns:has(.tile:nth-child(3):last-child) .tile:nth-child(3n+2),
.tiles--4-columns:has(.tile:nth-child(5):last-child) .tile:nth-child(3n+2),
.tiles--4-columns:has(.tile:nth-child(6):last-child) .tile:nth-child(3n+2) {
    --parallax-ratio: calc(-.0333333333 * var(--tiles-columns));
    top: calc(2rem*var(--tiles-columns))
}

.tiles--3-columns .tile:nth-child(3n+3),
.tiles--4-columns:has(.tile:nth-child(1):last-child) .tile:nth-child(3n+3),
.tiles--4-columns:has(.tile:nth-child(2):last-child) .tile:nth-child(3n+3),
.tiles--4-columns:has(.tile:nth-child(3):last-child) .tile:nth-child(3n+3),
.tiles--4-columns:has(.tile:nth-child(5):last-child) .tile:nth-child(3n+3),
.tiles--4-columns:has(.tile:nth-child(6):last-child) .tile:nth-child(3n+3) {
    --parallax-ratio: calc(-.05 * var(--tiles-columns));
    top: calc(4rem*var(--tiles-columns))
}

.tiles--3-columns:has(.tile:nth-child(12)) .tile,
.tiles--4-columns:has(.tile:nth-child(1):last-child):has(.tile:nth-child(12)) .tile,
.tiles--4-columns:has(.tile:nth-child(2):last-child):has(.tile:nth-child(12)) .tile,
.tiles--4-columns:has(.tile:nth-child(3):last-child):has(.tile:nth-child(12)) .tile,
.tiles--4-columns:has(.tile:nth-child(5):last-child):has(.tile:nth-child(12)) .tile,
.tiles--4-columns:has(.tile:nth-child(6):last-child):has(.tile:nth-child(12)) .tile {
    translate: 0 calc(.5*var(--parallax-translate))
}

.tiles--3-columns:has(.tile:nth-child(36)) .tile,
.tiles--4-columns:has(.tile:nth-child(1):last-child):has(.tile:nth-child(36)) .tile,
.tiles--4-columns:has(.tile:nth-child(2):last-child):has(.tile:nth-child(36)) .tile,
.tiles--4-columns:has(.tile:nth-child(3):last-child):has(.tile:nth-child(36)) .tile,
.tiles--4-columns:has(.tile:nth-child(5):last-child):has(.tile:nth-child(36)) .tile,
.tiles--4-columns:has(.tile:nth-child(6):last-child):has(.tile:nth-child(36)) .tile {
    translate: 0 calc(.25*var(--parallax-translate))
}

@media (min-width: 1024px) {

    .tiles--3-columns:has(.tile:nth-child(3):last-child),
    .tiles--4-columns:has(.tile:nth-child(1):last-child):has(.tile:nth-child(3):last-child),
    .tiles--4-columns:has(.tile:nth-child(2):last-child):has(.tile:nth-child(3):last-child),
    .tiles--4-columns:has(.tile:nth-child(3):last-child):has(.tile:nth-child(3):last-child),
    .tiles--4-columns:has(.tile:nth-child(5):last-child):has(.tile:nth-child(3):last-child),
    .tiles--4-columns:has(.tile:nth-child(6):last-child):has(.tile:nth-child(3):last-child) {
        margin-bottom: 10rem
    }
}

@media (min-width: 1024px) {

    .tiles--3-columns:has(.tile:nth-child(6):last-child),
    .tiles--4-columns:has(.tile:nth-child(1):last-child):has(.tile:nth-child(6):last-child),
    .tiles--4-columns:has(.tile:nth-child(2):last-child):has(.tile:nth-child(6):last-child),
    .tiles--4-columns:has(.tile:nth-child(3):last-child):has(.tile:nth-child(6):last-child),
    .tiles--4-columns:has(.tile:nth-child(5):last-child):has(.tile:nth-child(6):last-child),
    .tiles--4-columns:has(.tile:nth-child(6):last-child):has(.tile:nth-child(6):last-child) {
        margin-bottom: 5rem
    }
}

.tiles--2-columns,
.tiles--3-columns:has(.tile:nth-child(2):last-child),
.tiles--3-columns:has(.tile:nth-child(4):last-child) {
    --tiles-columns: 2
}

.tiles--2-columns .tile:nth-child(odd),
.tiles--3-columns:has(.tile:nth-child(2):last-child) .tile:nth-child(odd),
.tiles--3-columns:has(.tile:nth-child(4):last-child) .tile:nth-child(odd) {
    --parallax-ratio: calc(-.025 * var(--tiles-columns));
    top: calc(0rem*var(--tiles-columns))
}

.tiles--2-columns .tile:nth-child(2n+2),
.tiles--3-columns:has(.tile:nth-child(2):last-child) .tile:nth-child(2n+2),
.tiles--3-columns:has(.tile:nth-child(4):last-child) .tile:nth-child(2n+2) {
    --parallax-ratio: calc(-.05 * var(--tiles-columns));
    top: calc(3rem*var(--tiles-columns))
}

.tiles--2-columns:has(.tile:nth-child(8)) .tile,
.tiles--3-columns:has(.tile:nth-child(2):last-child):has(.tile:nth-child(8)) .tile,
.tiles--3-columns:has(.tile:nth-child(4):last-child):has(.tile:nth-child(8)) .tile {
    translate: 0 calc(.5*var(--parallax-translate))
}

.tiles--2-columns:has(.tile:nth-child(24)) .tile,
.tiles--3-columns:has(.tile:nth-child(2):last-child):has(.tile:nth-child(24)) .tile,
.tiles--3-columns:has(.tile:nth-child(4):last-child):has(.tile:nth-child(24)) .tile {
    translate: 0 calc(.25*var(--parallax-translate))
}

@media (min-width: 1024px) {

    .tiles--2-columns:has(.tile:nth-child(2):last-child),
    .tiles--3-columns:has(.tile:nth-child(2):last-child):has(.tile:nth-child(2):last-child),
    .tiles--3-columns:has(.tile:nth-child(4):last-child):has(.tile:nth-child(2):last-child) {
        margin-bottom: 10rem
    }
}

@media (min-width: 1024px) {

    .tiles--2-columns:has(.tile:nth-child(4):last-child),
    .tiles--3-columns:has(.tile:nth-child(2):last-child):has(.tile:nth-child(4):last-child),
    .tiles--3-columns:has(.tile:nth-child(4):last-child):has(.tile:nth-child(4):last-child) {
        margin-bottom: 5rem
    }
}

@media (min-width: 1024px) {
    .tiles.scroll-horizontal {
        max-width: 100%
    }
}

@media (max-width: 1023px) {
    .tiles.scroll-horizontal {
        grid-auto-flow: column
    }
}
.cards__link {
    justify-self: end
}

@media (min-width: 1024px) {
    .cards__link {
        --parallax-ratio: .1
    }
}

.cards.layout--1 .tiles {
    --tiles-gap: max(.2rem, 2px)
}

.cards.layout--1 .tile {
    grid-template-columns: 1fr auto
}

.cards.layout--1 .tile .heading {
    order: -10;
    align-self: center
}

.cards.layout--1 .tile .rich-text {
    grid-column: 1/-1
}

.cards.layout--2 .tiles {
    gap: 0;
    margin-bottom: 0 !important
}

@media (min-width: 1024px) {
    .cards.layout--2 .tiles {
        display: flex;
        max-width: calc(100% + .5*var(--tile-width));
        margin-right: calc(-.5*var(--tile-width));
        padding-right: calc(.5*var(--tile-width));
        overflow-x: hidden;
        scroll-padding-right: 30rem
    }

    .cards.layout--2 .tiles:has(.tile:nth-child(2)) {
        --tile-width: 80rem
    }

    .cards.layout--2 .tiles:has(.tile:nth-child(3)) {
        --tile-width: 60rem
    }

    .cards.layout--2 .tiles:has(.tile:nth-child(4)) {
        --tile-width: 48rem
    }

    .cards.layout--2 .tiles:has(.tile:nth-child(5)) {
        --tile-width: 40rem
    }

    .cards.layout--2 .tiles:has(.tile:nth-child(6)) {
        --tile-width: 34.2857142857rem
    }

    .cards.layout--2 .tiles:has(.tile:hover) .tile:not(:first-child):not(.tile:hover~.tile) {
        translate: -50% 0
    }
}

.cards.layout--2 .tile {
    --tile-width: inherit;
    flex-basis: 0;
    flex-grow: 1;
    position: static;
    gap: 3rem 2rem;
    min-height: 0;
    padding: 0 2rem;
    background-color: var(--color-background)
}

@media (min-width: 1024px) {
    .cards.layout--2 .tile {
        align-content: space-between;
        align-items: end;
        grid-template-columns: 1fr 1fr;
        min-width: 0
    }
}

@media (max-width: 1023px) {
    .cards.layout--2 .tile {
        --tile-width: 25rem;
        grid-template-columns: auto;
        gap: .5em
    }
}

.cards.layout--2 .tile:before {
    grid-column: 1/-1
}

.cards.layout--2 .tile .rich-text {
    grid-column-end: -1;
    font-size: var(--font-size-small)
}

.cards.layout--2 .tile:not(:first-child) {
    border-left: 1px solid var(--color-subtle)
}

@media (min-width: 1024px) {
    .cards.layout--2 .tile:not(:first-child) {
        margin-right: calc(-.5*var(--tile-width));
        transition: translate var(--duration-slow);
        will-change: transform
    }
}

@media (min-width: 1024px)and (hover: hover) {
    .cards.layout--2 .tile:not(:first-child):hover .rich-text {
        opacity: 1
    }
}

@media (min-width: 1024px) {
    .cards.layout--2 .tile:not(:first-child) .rich-text {
        opacity: 0;
        transition: opacity var(--duration-slow);
        will-change: opacity
    }
}

.cards.layout--3 .module__background {
    --parallax-ratio: .2
}

.cards.layout--3 .wrapper {
    gap: 3rem 5rem
}

@media (min-width: 1350px) {
    .cards.layout--3 .wrapper {
        grid-template-columns: 1fr 60rem;
        grid-template-rows: auto 1fr;
        grid-column-gap: 10rem
    }
}

@media (max-width: 1349px) {
    .cards.layout--3 .wrapper {
        grid-template-columns: 100%
    }
}

.cards.layout--3 .header {
    grid-column-start: 1
}

.cards.layout--3 .header .heading {
    font-size: 5rem;
    line-height: 1.25
}

.cards.layout--3 .header .rich-text {
    align-self: end;
    font-weight: 600
}

.cards.layout--3 .tiles {
    grid-column-end: -1;
    gap: 3rem
}

@media (min-width: 1350px) {
    .cards.layout--3 .tiles {
        grid-row: 1/-1;
        margin-bottom: 0 !important
    }
}

@media (max-width: 1349px) {
    .cards.layout--3 .tiles {
        grid-auto-flow: column;
        grid-auto-columns: auto;
        max-width: none;
        margin-top: 0;
        margin-bottom: calc(-1*var(--scroll-horizontal-padding)) !important
    }
}

.cards.layout--3 .tile {
    position: static;
    min-height: 0;
    -webkit-backdrop-filter: blur(3rem);
    backdrop-filter: blur(3rem);
    background: none;
    background-image: radial-gradient(circle at top left, color-mix(in srgb, var(--color-background) 10%, transparent), color-mix(in srgb, var(--color-background) 60%, transparent))
}

.cards.layout--3 .tile .rich-text {
    font-weight: 600
}
@media (min-width: 1350px) {
    .faq .wrapper {
        grid-template-columns: 1fr 60rem;
        align-items: start
    }
}

.faq .wrapper:has(.link) {
    grid-template-rows: 1fr auto
}

.faq .wrapper:has(.link) .faq__questions {
    grid-row-end: span 2
}

@media (min-width: 1350px) {
    .faq .header {
        --parallax-ratio: -.035;
        position: sticky;
        top: calc(var(--main-navbar-height) + 5rem);
        z-index: 10;
        margin-bottom: 10rem;
       
        
        translate: 0 max(-5rem, var(--parallax-translate))
    }
}

.faq .header .rich-text {
    width: auto
}

.faq__questions {
    position: relative;
    display: grid;
    row-gap: 5rem
}

@media (max-width: 1349px) {
    .faq__questions {
        max-width: 87.5%
    }
}

@media (max-width: 1349px)and (max-width: 767px) {
    .faq__questions {
        max-width: initial
    }
}

.faq.module--first .faq__questions {
    max-width: 87.5%
}

@media (max-width: 767px) {
    .faq.module--first .faq__questions {
        max-width: initial
    }
}

@media (max-width: 1023px) {
    .faq__questions {
        row-gap: 3rem
    }
}

.faq__card {
    background-color: #333;
}

@media (prefers-contrast: more) {
    .faq__card {
        border: 2px solid
    }
}

@media (forced-colors: active) {
    .faq__card {
        border: 2px solid
    }
}

.faq__card .rich-text {
    padding: 0 3rem 5rem
}

@media (max-width: 1023px) {
    .faq__card .rich-text {
        padding: 0 2rem 3rem
    }
}

.faq__card .rich-text p,
.faq__card .rich-text li {
    font-size: var(--font-size-regular)
}

.faq__card[open] .faq__question .icon {
    transform: rotate(45deg)
}

.faq__question {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4rem 3rem;
    color: var(--color-strong)
}

@media (max-width: 1023px) {
    .faq__question {
        padding: 3rem 2rem
    }
}

.faq__question .heading {
    font-weight: 600
}

.faq__question .icon {
    flex: none;
    transition: transform var(--duration-default);
    will-change: transform
}

@media (min-width: 1350px) {
    .faq .link {
        position: sticky;
        bottom: 10rem;
        place-self: start;
        margin-top: 10rem
    }
}

@media (max-width: 1349px) {
    .faq .link {
        place-self: end
    }
}

.faq.module--first .wrapper {
    grid-template-columns: auto
}

.faq.module--first .header,
.faq.module--first .link {
    position: static
}

.faq.module--first .header {
    margin-bottom: 0
}

.faq.module--first .link {
    margin-top: 0
}
.details .wrapper {
    display: flex;
    align-items: center;
    gap: 10rem
}

@media (max-width: 1349px) {
    .details .wrapper {
        gap: 6rem
    }
}

@media (max-width: 1023px) {
    .details .wrapper {
        flex-direction: column-reverse;
        gap: 5rem;
        align-items: flex-start
    }
}

@media (min-width: 1024px) {
    .details .wrapper {
        flex-direction: row-reverse
    }
}

.details .wrapper>.details__image {
    min-width: 50%
}

@media (max-width: 1023px) {
    .details .wrapper>.details__image {
        width: 100%
    }
}

@media (max-width: 1023px) {
    .details .wrapper>.details__image {
        height:50vw !important;
		margin:0rem 0rem 0rem 4rem;
		width:75.5vw ;
		aspect-ratio: 2/1;
        overflow: hidden
    }
}

@media (min-width: 1350px) {
    .details .wrapper>.details__image {
        min-width: 55rem
    }
}

.details__content {
    display: flex;
    flex-direction: column;
    gap: 5rem;
    align-items: start
}

.details__content .header .rich-text {
    font-size: var(--font-size-regular)
}

@media (min-width: 1024px) {
    .details__content .header .rich-text {
        max-width: initial
    }
}

.details__content .tile {
    min-width: 0;
    min-height: 0;
    width: 100%;
    max-width: none;
    padding: 3rem 2rem 2rem
}

.details__content .tile .rich-text {
    font-size: var(--font-size-enlarged)
}

.details__content .author__caption {
    font-size: var(--font-size-tiny)
}

@media (min-width: 1024px) {
    .details--reverse .wrapper {
        flex-direction: row-reverse;
    }
}

.details.module--first .h1 {
    --font-size-h1: 5rem
}

@media (max-width: 1023px) {
    .details.module--first .header:before {
        content: none
    }
}

.details.module--first .header .rich-text {
    align-self: auto
}
:root {
    --wrapper-max-width: 120rem;
    --wrapper-max-width-wide: 148rem;
    --wrapper-padding: 5rem
}

@media (max-width: 1023px) {
    :root {
        --wrapper-padding: 3.2rem
    }
}

@media (max-width: 767px) {
    :root {
        --wrapper-padding: 2rem
    }
}

.wrapper {
    max-width: calc(var(--wrapper-max-width) + 2*var(--wrapper-padding));
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wrapper-padding);
    padding-right: var(--wrapper-padding)
}

@media (min-width: 1024px) {
    .wrapper--wide {
        --wrapper-max-width: var(--wrapper-max-width-wide)
    }
}
.header {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1rem ;
    max-width: 100%
}

.header .heading,
.header .rich-text {
    flex-basis: min(50rem, 100%);
    flex-shrink: 0
}
p {
    font-weight: 400 ;
    font-style: normal ;
	    text-align: justify;
}
.header .heading {
    flex-grow: 100;
    font-size: 4.2rem;
    font-weight: 600;
}

.header .rich-text {
    flex-grow: 1;
    font-size: var(--font-size-enlarged)
}

@media (min-width: 768px)and (max-width: 1349px) {
    .header .rich-text {
        max-width: 87.5%
    }
}

@media (max-width: 1023px) {
    .header .rich-text {
        font-size: var(--font-size-regular)
    }
}
.tile {
    --tile-width: 25rem;
    --tile-gap: 1.5rem;
    --tile-scale: 1.06;
    display: grid;
    align-content: start;
    gap: var(--tile-gap);
    position: relative;
    z-index: 10;
    min-width: max(var(--tile-width), 25rem);
    min-height: max(var(--tile-width)*1.2, 30rem);
    max-width: calc(2*var(--tile-width));
    padding: 3rem;
    background-color: #333;
}

@media (max-width: 1023px) {
    .tile {
        --tile-scale: 1
    }
}

.tile__link {
    display: grid;
    gap: var(--tile-gap)
}

@media (hover: none) {
    .tile__link {
        display: contents
    }
}

.tile__link .tile__title,
.tile__link .rich-text {
    text-wrap: initial
}

@media (hover: hover) {

    .tile__link .tile__title,
    .tile__link .rich-text {
        text-decoration: underline;
        text-decoration-color: #0000;
        transition: text-decoration-color var(--duration-fast)
    }
}

.tile__link .rich-text:after {
    content: "";
    display: inline-block;
    height: 1em;
    width: 2em
}

.tile__link .arrow-right,
.tile__link .arrow-top-right {
    position: absolute;
    bottom: 3rem;
    right: 3rem;
    color: var(--color-strong)
}

@media (hover: hover) {

    .tile__link .arrow-right,
    .tile__link .arrow-top-right {
        transition: translate var(--duration-default);
        will-change: translate
    }
}

@media (hover: hover) {
    .tile__link:hover .tile__hero {
        scale: var(--tile-scale)
    }

    .tile__link:hover .tile__hero .image__content {
        scale: 1
    }

    .tile__link:hover .tile__title,
    .tile__link:hover .rich-text {
        text-decoration-color: currentColor
    }

    .tile__link:hover .arrow-right {
        translate: .5em
    }

    .tile__link:hover .arrow-top-right {
        translate: .35em -.35em
    }
}

@media (hover: hover) {
    .tile__link body:not(.is-tabbed) {
        display: contents
    }
}

.tile__hero.image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    transform-origin: bottom;
    transition: scale var(--duration-default);
    will-change: transform
}

.tile__hero .image__content {
    scale: var(--tile-scale);
    transition: inherit;
    will-change: transform
}

.tile__title {
    font-weight: inherit !important
}

.tile .heading {
    font-weight: 700
}

.tile__number {
    color: #f81a7c;
    font-size: 6rem;
    line-height: var(--line-height-h1);
    white-space: nowrap
}

@media (hover: none) {
    .tile:has(.tile__hero) {
        padding-top: calc(50% + 2rem)
    }
}

.tile:has(.tile__hero) .tile__link {
    padding-top: calc(50% + 2rem)
}

.tile:has(.tile__icon) {
    padding-top: 4rem
}

.tile:has(.tile__icon) .tile__icon {
    display: inline-grid;
    place-items: center;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background-color: white
}

.imgsp{
    width: 4rem !important;
}

.tile.link {
    --tile-link-duration: var(--duration-default);
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
    transition: z-index var(--tile-link-duration)
}

@media (hover: hover) {

    .tile.link:before,
    .tile.link:after,
    .tile.link .tile__link:before,
    .tile.link .tile__link:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -10;
        transition-duration: var(--tile-link-duration)
    }
}

@media (hover: hover) {

    .tile.link:before,
    .tile.link .tile__link:before {
        box-shadow: var(--box-shadow);
        opacity: 0;
        transition-property: opacity;
        will-change: opacity
    }
}

@media (prefers-contrast: more) {

    .tile.link:before,
    .tile.link .tile__link:before {
        border: 2px solid
    }
}

@media (forced-colors: active) {

    .tile.link:before,
    .tile.link .tile__link:before {
        border: 2px solid
    }
}

@media (hover: hover) {

    .tile.link:after,
    .tile.link .tile__link:after {
        background-color: #333;
        transition-property: transform;
        will-change: transform
    }
}

.tile.link .link__icon,
.tile.link .tile__link .link__icon {
    --icon-size: 2rem;
    height: auto;
    width: auto;
    position: absolute;
    bottom: 3rem;
    right: 3rem;
    background: none;
    border-radius: 0;
    color: var(--color-strong)
}

@media (hover: hover) {

    .tile.link .link__icon,
    .tile.link .tile__link .link__icon {
        transition: translate var(--tile-link-duration);
        will-change: translate
    }
}

@media (hover: hover) {

    .tile.link:hover,
    .tile.link .tile__link:hover {
        z-index: 20
    }

    .tile.link:hover:before,
    .tile.link .tile__link:hover:before {
        opacity: 1
    }

    .tile.link:hover:after,
    .tile.link .tile__link:hover:after {
        transform: scale(var(--tile-scale))
    }

    .tile.link:hover .tile__hero,
    .tile.link .tile__link:hover .tile__hero {
        scale: var(--tile-scale)
    }

    .tile.link:hover .tile__hero .image__content,
    .tile.link .tile__link:hover .tile__hero .image__content {
        scale: 1
    }

    .tile.link:hover .link__icon[style*=arrow-right],
    .tile.link .tile__link:hover .link__icon[style*=arrow-right] {
        translate: .5em
    }

    .tile.link:hover .link__icon[style*=arrow-top-right],
    .tile.link .tile__link:hover .link__icon[style*=arrow-top-right] {
        translate: .35em -.35em
    }
}

.tile.link:has(.tile__hero) {
    grid-template-rows: 1fr;
 
    padding-top: calc(50% + 2rem)
}

.tile.link:has(.tile__hero) .heading {
    align-self: start;
    font-weight: 400;
    text-wrap: wrap
}

.tile.link:has(.tile__hero) .tags {
    padding-right: 3rem
}

.tile.link:has(.tile__hero) .tags__tag {
    background-color: var(--color-background);
    border-radius: 50vw;
    padding: 0 1rem
}
.rich-text {
    -webkit-hyphens: auto;
    hyphens: auto;
	color:white;
}

.rich-text *:not(:last-child) {
    margin-bottom: 1em
}

@media (max-width: 767px) {
    .rich-text *:not(:last-child) {
        margin-bottom: 1.5em
    }
}

.rich-text strong {
    color: var(--color-strong);
    font-weight: 600
}

.rich-text em,
.rich-text i {
    font-style: italic
}

.rich-text .heading {
    margin-top: 4em;
    text-wrap: initial
}

@media (max-width: 767px) {
    .rich-text .heading {
        margin-top: 2.5em
    }
}

.rich-text .heading.h4 {
    margin-top: 3em;
    margin-bottom: 1.5em
}

@media (max-width: 767px) {
    .rich-text .heading.h4 {
        margin-top: 2em;
        margin-bottom: 1.25em
    }
}

.rich-text .heading:first-child {
    margin-top: 0
}

.rich-text .link {
    display: inline
}

.rich-text .link:not([target=_blank]) .icon {
    display: none
}

.rich-text ul,
.rich-text ol {
    padding-left: 1.1em;
    list-style: initial
}

.rich-text ul li::marker {
    color: #f81a7c;
}

.rich-text ul li li::marker {
    color: var(--color-gray-20)
}

.rich-text ol {
    list-style: decimal
}

.rich-text li:not(:last-child) {
    margin-bottom: 1em
}

.rich-text blockquote {
    padding: 1.5em 0 2em 3em;
    background-image: url(https://www.netguru.com/hubfs/_N19%20Modules/Icons/Components/quotes.svg);
    background-position: top 1.5em left;
    background-repeat: no-repeat;
    background-size: 2em auto;
    font-weight: 700;
    font-size: var(--font-size-h4);
    line-height: var(--line-height-h4)
}

.rich-text pre,
.rich-text code {
    font-family: Menlo, Monaco, Courier New, Courier, monospace
}

.rich-text code:not(pre code),
.rich-text pre {
    background-color: var(--color-background-dimmed)
}

.rich-text pre {
    padding: .5em .8em;
    font-size: 80%;
    overflow: auto
}

.rich-text code:not(pre code) {
    padding: .2em .4em;
    font-size: 80%
}

.rich-text table,
.rich-text th,
.rich-text tr,
.rich-text td {
    border: 1px solid var(--color-subtle)
}

.rich-text table {
    width: 100%;
    border-radius: var(--border-radius);
    -moz-border-radius: var(--border-radius);
    font-size: var(--font-size-small);
    color: var(--color-primary)
}

.rich-text tr:first-child {
    background: var(--color-background-dimmed);
    font-weight: 700;
    line-height: var(--line-height-dense)
}

.rich-text tr:not(:first-child) td[data-style-text-align-left],
.rich-text tr:not(:first-child) td[style*="text-align: left"] {
    text-align: left
}

.rich-text td {
    padding: 1.2rem
}

.rich-text [data-hs-responsive-table=true] {
    overflow-x: auto;
    margin-right: calc(-1*var(--gap-horizontal));
    padding-right: var(--gap-horizontal)
}

.rich-text iframe[src*=youtube],
.rich-text iframe[src*=vimeo] {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%
}

.rich-text .hs-embed-wrapper[data-service=youtube],
.rich-text .hs-embed-wrapper[data-service=vimeo],
.rich-text .hs-responsive-embed-wrapper.hs-responsive-embed,
.rich-text .hs-responsive-embed.hs-responsive-embed-youtube {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%;
    max-width: 100% !important;
    max-height: none !important
}

@media print {

    .rich-text .hs-embed-wrapper[data-service=youtube],
    .rich-text .hs-embed-wrapper[data-service=vimeo],
    .rich-text .hs-responsive-embed-wrapper.hs-responsive-embed,
    .rich-text .hs-responsive-embed.hs-responsive-embed-youtube {
        display: none
    }
}

.rich-text .hljs {
    padding: 0;
    background: none
}

.rich-text .hljs-keyword,
.rich-text .hljs-operator,
.rich-text .hljs-pattern-match,
.rich-text .hljs-constructor,
.rich-text .hljs-function,
.rich-text .hljs-bullet,
.rich-text .hljs-link,
.rich-text .hljs-meta,
.rich-text .hljs-selector-id,
.rich-text .hljs-symbol,
.rich-text .hljs-title,
.rich-text .hljs-deletion,
.rich-text .hljs-name,
.rich-text .hljs-section,
.rich-text .hljs-selector-tag,
.rich-text .hljs-subst {
    color: #e45649
}

.rich-text .hljs-function,
.rich-text .hljs-params,
.rich-text .hljs-constructor,
.rich-text .hljs-string,
.rich-text .hljs-addition,
.rich-text .hljs-attribute,
.rich-text .hljs-meta-string,
.rich-text .hljs-regexp {
    color: #50a150
}

.rich-text .hljs-function,
.rich-text .hljs-params,
.rich-text .hljs-typing,
.rich-text .hljs-constructor,
.rich-text .hljs-built_in,
.rich-text .hljs-class,
.rich-text .hljs-title,
.rich-text .hljs-attr,
.rich-text .hljs-number,
.rich-text .hljs-selector-attr,
.rich-text .hljs-selector-class,
.rich-text .hljs-selector-pseudo,
.rich-text .hljs-template-variable,
.rich-text .hljs-type,
.rich-text .hljs-variable {
    color: #cb7702
}

.rich-text .hljs-module-access,
.rich-text .hljs-module,
.rich-text .hljs-comment,
.rich-text .hljs-quote,
.rich-text .hljs-doctag,
.rich-text .hljs-formula {
    color: #a626a4
}

.rich-text .hljs-literal {
    color: #4078f2
}

.rich-text .hljs-comment,
.rich-text .hljs-quote,
.rich-text .hljs-emphasis {
    font-style: italic
}

.rich-text .hljs-strong {
    font-weight: 700
}

.rich-text .hljs-link {
    text-decoration: underline
}

.hs-inline-edit .rich-text a {
    color: var(--color-strong);
    font-weight: 600;
    text-decoration: underline
}
.author {
    display: grid;
    gap: .5em 1em;
    grid-template-columns: auto 1fr;
    align-items: center
}

@media print {
    .author {
        break-inside: avoid
    }
}

.author__photo {
    aspect-ratio: 1
}

.author__photo.is-broken {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.author__name {
    color: white;
    font-weight: 700;
    line-height: var(--line-height-dense);
    text-align: left
}

.author__name.h3 .link {
    --link-underline-offset: 0
}

.author__caption {
    position: relative;
    font-size: var(--font-size-small);
    line-height: var(--line-height-dense);
    text-align: left;
		color:white;
}

.author__caption:before {
    content: "/";
    position: absolute;
    left: -.75em
}

.author__info {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 1em;
    overflow: hidden
}

.author__info .label {
    margin-bottom: 3rem
}
.image {
    --parallax-ratio: 0;
    position: relative;
    line-height: 0
}

.image__content {
    position: relative;
    max-width: 100%;
    max-height: 100%
}

/* @media (prefers-color-scheme: dark) {
    .image__content {
        filter: brightness(.97) contrast(1.005)
    }
} */

.image--cover .image__content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

@supports (object-fit: cover) {
    .image--cover .image__content {
/*         object-fit: cover; */
        height: 100%;
        width: 100%
    }
}

.image__content.parallax {
    --parallax-ratio: .05
}

.image__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: invert(1) grayscale(1) brightness(.9) contrast(5);
    mix-blend-mode: multiply;
    opacity: .5
}

@media (prefers-contrast: more) {
    .image__overlay {
        filter: invert(1) grayscale(1) brightness(.4) contrast(5);
        opacity: .8
    }
}

@media (prefers-reduced-transparency) {
    .image__overlay {
        opacity: 1;
        mix-blend-mode: normal;
        filter: brightness(0)
    }
}

.image.is-broken {
    line-height: inherit
}

.image.is-broken .image__content {
    font-size: 0;
    overflow: hidden
}

.image.is-broken .image__content:before {
    content: " ";
    display: block;
    height: 100%;
    width: 100%;
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/broken-img.svg);
    background-repeat: no-repeat;
    background-size: auto min(3rem, 90%);
    font-weight: 700
}

.image--cover {
    position: relative;
    width: var(--image-max-width, 100%);
    height: auto;
    max-width: 100%;
    max-height: 100%;
    overflow: hidden;
    background-color: var(--color-background-dimmed)
}

@supports not (object-fit: cover) {
    .image--cover {
        overflow: hidden
    }
}

.image--cover:before {
    content: "";
    display: block;
    padding-top: var(--image-ratio, 100%)
}

.image--cover.is-broken .image__content:before {
    background-position: center
}

.image--framed:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: inherit;
    box-shadow: 0 0 0 2px var(--color-background-dimmed) inset;
    z-index: 10;
    /* mix-blend-mode: darken */
}

.image[data-image-random-fallback].is-broken .image__content {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover
}

.image[data-image-random-fallback].is-broken .image__content:before {
    visibility: hidden
}

.image[data-image-random-fallback="0"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/00.jpg)
}

.image[data-image-random-fallback="1"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/01.jpg)
}

.image[data-image-random-fallback="2"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/02.jpg)
}

.image[data-image-random-fallback="3"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/03.jpg)
}

.image[data-image-random-fallback="4"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/04.jpg)
}

.image[data-image-random-fallback="5"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/05.jpg)
}

.image[data-image-random-fallback="6"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/06.jpg)
}

.image[data-image-random-fallback="7"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/07.jpg)
}

.image[data-image-random-fallback="8"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/08.jpg)
}

.image[data-image-random-fallback="9"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/09.jpg)
}

.image[data-image-random-fallback="10"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/10.jpg)
}

.image[data-image-random-fallback="11"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/11.jpg)
}

.image[data-image-random-fallback="12"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/12.jpg)
}

.image[data-image-random-fallback="13"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/13.jpg)
}

.image[data-image-random-fallback="14"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/14.jpg)
}

.image[data-image-random-fallback="15"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/15.jpg)
}

.image[data-image-random-fallback="16"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/16.jpg)
}

.image[data-image-random-fallback="17"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/17.jpg)
}

.image[data-image-random-fallback="18"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/18.jpg)
}

.image[data-image-random-fallback="19"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/19.jpg)
}

.image[data-image-random-fallback="20"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/20.jpg)
}

.image[data-image-random-fallback="21"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/21.jpg)
}

.image[data-image-random-fallback="22"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/22.jpg)
}

.image[data-image-random-fallback="23"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/23.jpg)
}

.image[data-image-random-fallback="24"].is-broken .image__content {
    background-image: url(https://d3syu1zzkfut20.cloudfront.net/assets/images/24.jpg)
}
.video {
    max-width: 100%;
    height: auto;
    aspect-ratio: var(--video-aspect-ratio)
}
.heading {
    color: #fff;
    font-weight: 600;
    text-wrap: balance
}

.heading strong {
    font-weight: 700;
    white-space: break-spaces
}

/* @media (prefers-color-scheme: dark) {
    .heading strong {
        color: var(--color-brand)
    }
} */

/* @media (prefers-color-scheme: dark)and (prefers-contrast: more) {
    .heading strong {
        color: var(--color-brand-light)
    }
} */

 .heading strong {
    color: #f81a7c;
}

@media (prefers-contrast: more) {
   .heading strong {
        color: var(--color-brand-light)
    }
}

.heading:has(strong) {
    font-weight: 400;
    position: relative;
    z-index: 5
}

.heading:not(.heading--no-highlight) strong:last-of-type {
    position: relative;
}


/* .module .heading:not(.heading--no-highlight) strong:last-of-type:after {
  --highlight-width: 8em;
  --higlight-overlap-right: 0.5em;
  content: "";
  position: absolute;
  bottom: 0;
  z-index: -5;
  display: inline-block;
  height: 1.1em;
  width: var(--highlight-width);
  margin-left: calc(var(--higlight-overlap-right) - var(--highlight-width));
  background-image: linear-gradient(to left, #f81a7c, transparent), linear-gradient(to left, #f81a7c, #f81a7c);
  background-position: left center, right center;
  background-size: calc(100% - var(--higlight-overlap-right)) 1.1em, 0.55em 1.1em;
  background-repeat: no-repeat;
  border-radius: 0.55em;
  clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 90%);
} */


.heading span[style*=color] {
    color: var(--color-brand) !important
}
.icon {
    --icon-size: 1.8rem
}
.icen{
    width: 6rem !important;
    height: 6rem !important;

}

.icon:before {
/*     content: ""; */
    display: block;
    width: var(--icon-size);
    height: var(--icon-size);
/*     background-color: #f81a7c; */
    -webkit-mask: var(--icon-url) center/contain no-repeat;
    mask: var(--icon-url) center/contain no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: background-color var(--duration-fast)
}



@media (hover: hover) {
    .icon:is(a):hover:before {
        background-color: var(--color-secondary)
    }
}

.icon:is(a) {
    --icon-min-size: 24px;
    display: flex;
    width: max(var(--icon-size), var(--icon-min-size));
    height: max(var(--icon-size), var(--icon-min-size));
    margin: calc(min(0px, var(--icon-size) - var(--icon-min-size))/2);
    transition: color var(--duration-fast)
}

.icon:is(a):before {
    margin: auto
}