@font-face {
    font-family: 'NotoSans';
    src: url('../public/Noto_Sans/NotoSans-VariableFont_wdth,wght.ttf') format('truetype'),
         url('../public/Noto_Sans/NotoSans-Italic-VariableFont_wdth,wght.ttf') format('truetype');
    font-weight: 100 900; /* Variable font supports multiple weights */
    font-style: normal, italic;
}

html, body {
    overflow: hidden;
}

body {
    font-family: 'NotoSans', sans-serif;
    font-style: normal;
}

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

.app-wrapper {
    height: 100vh;
    width: 100%;
    position: relative;
    display: none;
}

.app-wrapper-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.arrow {
    background: white;
    width: 104px;
    height: 104px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 45%;
    z-index: 100;
}

.arrow:hover {
    background: #E5E5E5;
    transition: background 0.5s ease;
    cursor: pointer;
}

.arrow img {
    width: 32px;
    height: auto;
}

.arrow[data-direction="left"] {
    left: -52px;
    border-radius: 0 100px 100px 0;
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
    padding-left: 35px;
}

.arrow[data-direction="right"] {
    right: -52px;
    border-radius: 100px 0 0 100px;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    padding-right: 35px;
}

#rightArrowLink {
    right: -52px;
    border-radius: 100px 0 0 100px;
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
    padding-right: 35px;
}
.arrow-tip {
    position:absolute;
    right:60px;
    top:48.5%;
    z-index:9999;
    font-size:12px;
    text-align:right;
    opacity:0.8;
}

#leftArrowLink {
    left: -52px;
    border-radius: 0 100px 100px 0;
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
    padding-left: 35px;
}

.info-link {
    width: 58px;
    height: 58px;
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: #809DAD;
    padding: 0.5rem;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-link p {
    position:absolute;
    right:70px;
    text-align:right;
    line-height:16px;
    color:#666;
}

.hotspot-icon {
    width: 35.678px;
    height: 35.666px;
}

.info-link:hover {
    background: #3A6078;
    transition: 0.5s ease-in-out;
    cursor: pointer;
}

/*Type Styles*/

.thin-text {
    font-weight: 300;
}

.thick-text {
    font-weight: 500;
}

.heading-lg {
    color: #003B5C;
    font-size: 40px;
    line-height: 50px;
    text-align: center;
    @media screen and (min-width: 1200px) {
        font-size: 68px;
        line-height: 75px;
    }
}

.heading-md {
    font-size: 36px;
    line-height: 40px;
    text-align: center;
    color: #003B5C;
    @media screen and (min-width: 1200px) {
        font-size: 56px;
        line-height: 60px;
    }
}

.heading-md-start {
    font-size: 36px;
    line-height: 40px;
    color: #003B5C;
    @media screen and (min-width: 1200px) {
        font-size: 56px;
        line-height: 60px;
    }
}

.paragraph-lg {
    line-height: 35px;
    color: #406C85;
    font-weight: 300;
    font-size: 28px;
    @media screen and (min-width: 1200px) {
        font-size: 38px;
        line-height: 45px;
    }
}

.paragraph-md {
    font-size: 32px;
    font-weight: 300;
    line-height: 40px;
    text-align: center;
    @media screen and (min-width: 1200px) {
         font-size: 42px;
         line-height: 50px;
    }
}

.paragraph-sm {
    font-size: 18px;
    font-weight: 300;
}

.paragraph-sm-medium {
    font-size: 22px;
}

.domino-dark-blue {
    color: #003B5C;
}

.domino-mid-blue {
    color: #406C85;
}



/* Show only the active screen */
.app-wrapper.active {
    display: block;
}

.home-img {
    height: 100%;
    /* object-fit: cover; */
}

.wave-img {
    position: absolute;
    bottom: 5%;
    width: 300px;
    right: 0;
}

.app-screen-padding {
    padding: 24px;
}

.app-screen-1 {
    background: #E2F2E8;
}

.app-screen-2 {
    background: #E2F2E8;
}

.app-screen-2-bottom-text {
    color: #009639;
    margin-top: 16px;
    margin-bottom: 40px;
    @media screen and (min-width: 1200px) {
        margin-top: 37px;
        margin-bottom: 68px;
    }
}

.infographic-diamonds {
    width: 650px;
    @media screen and (min-width: 1200px) {
        width: 1161px;
    }
}

/* Fade-in animations GL (use these for subtle fade up animations) */

.fade-first-text,
.fade-second-text,
.fade-third-text {
    opacity: 0;
    transform: translateY(20px);
    animation-fill-mode: forwards; 
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-first-text {
    animation: fadeUp 0.5s ease-in-out 0.5s forwards; 
}

.fade-second-text {
    animation: fadeUp 0.5s ease-in-out 1s forwards; 
}

.fade-third-text {
    animation: fadeUp 0.5s ease-in-out 1.2s forwards; 
}

.top-header {
    display: flex;
    gap: 37px;
    align-items: center;
}

.logo {
    width: 291.995px;
}

.code-text {
    color: #406C85;
    font-size: 15px;
}

.app-screen-3 {
    background: #E2F2E8;
}


.app-screen-3-bottom-text {
    margin-top: 38px;
    text-align: center;
     max-width: 643px;
    @media screen and (min-width: 1200px) {
        max-width: 943px;
        margin-top: 58px;
    }
}

.app-screen-3-bottom-text-first {
    margin-bottom: 1.25rem;
}

.app-screen-4 {
    background: #E2F2E8;
}

.app-screen-4-logo-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    @media screen and (min-width: 1200px) {
        margin-top: 80px;
        max-width: 860px;
        align-items: center;
        gap: 55px;
    }
}

.app-screen-4-logo {
    height: 38%;
    @media screen and (min-width: 1200px) {
        height: initial;
    }
}

/*Hot points*/

.return-state {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0.5rem;
    color: white;
    cursor: pointer;
}

.hotpoints-grey-blocks {
    position: absolute;
    width: 80%;
    bottom: 1%;
    left: 10.5%;
}

.domino-hq-wrapper {
    position: absolute;
    z-index: 2;
    text-align: center;
    top: 22%; 
    left: 44%;
    transform: translate(-50%, -50%);
}

.consumer-wrapper {
    position: absolute;
    z-index: 2;
    text-align: center;
    top: 30%; 
    right: -10%;
    transform: translate(-50%, -50%);
}

.customer-wrapper {
    position: absolute;
    z-index: 2;
    text-align: center;
    bottom: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hotpoints-title {
    color: #003B5C;
    text-align: start;
    font-size: 75px;
    font-style: normal;
    font-weight: 500;
    line-height: 12.5px;
    position: absolute;
    bottom: 5%;
}

.hotpoints-text-wrapper h3 {
    margin-bottom: 23px;
}

.hotpoints-text-wrapper p {
    color: #003B5C;
    font-weight: 400;
    font-size: 22px;
}

.hotpoints {
    position: relative;
    width: 100%;
    height: auto;
}

.hotpoints-wrapper {
    height: 100vh;
    background: white;
    width: 100%;
    position: relative;
    display: none;
}

.hotpoints-label {
    background: #009639;
    color: white;
    text-decoration: none;
    align-items: center;
    display: flex;
    position: absolute;
    z-index: 3;
    padding: 16px 24px;
    border-radius: 67px;
    font-size: 20px;
    transition: background 0.5s ease;
}

.hotpoints-label p {
    font-family: 'NotoSans', sans-serif;
}

.hotpoints-label:hover {
    background: #01782E;
}

.hotpoints-office-label {
    position: absolute;
    left: 17.6%;
    top: 65.9%; 
}

.hotpoints-delivery-label {
    position: absolute;
    left: 22.6%;
    top: 40.9%; 
}

.hotpoints-hq-label {
    position: absolute;
    left: 36.6%;
    top: 20.9%; 
}

.hotpoints-production-label {
    position: absolute;
    left: 42.6%;
    top: 76.7%;
}

.hotpoints-production-img {
    z-index: 1;
}

.hotpoints-distribution-label {
    position: absolute;
    left: 51.6%;
    top: 46.7%;
}

.hotpoints-consumer-label {
    position: absolute;
    right: 12.6%;
    top: 26.7%;
}

.hotpoints-enviroment-label {
    position: absolute;
    left: 66.6%;
    top: 56.7%;
}

.hotpoints-eye-icon {
    width: 28px;
    height: 28px;
    margin-right: 1rem;
}

.hotpoints-img {
    width: 85%;
    position: absolute;
    bottom: 0.5%;
}

.hotpoints-office-img {
    z-index: 3;
    display: none;
   
}

.hotpoints-delivery-img {
    z-index: 1;
}

.hotpoints-distribution-img {
    z-index: 0;
}

/*Hot points inner pages*/

.img-focal {
    width: 1080px;
    height: 757px;
}

.production-focal {
    position: absolute;
    top: 0%;
}

.delivery-focal {
    width: 888px;
    height: 568px;
}

/*Infographic page */

.infographic-wrapper {
    height: 100vh;
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    background: white;
    position: relative;
}

.infographic-nav {
    list-style: none;
    gap: 2px;
    display: flex;
    flex-direction: column;
    margin-top: 100px;
    position: absolute;
    left: 0;
}

.infographic-nav li {
    padding: 0 21.84px;
    color: white;
    z-index: 50;
    width: 152.395px;
    height: 75.526px;
    font-weight: 600;
    background-color: #009639;
    clip-path: polygon(0% 0%, 85% 0%, 100% 50%, 85% 100%, 0% 100%);
    display: flex;
    align-items: center;
}

.infographic-nav li:hover {
    cursor: pointer;
    background-color: #028132;
}

.infographic-nav li.active {
    padding-left: 8px;
    background: #009639;
    color: white;
    width: 176px;
    height: 76px;
}

.infographic-nav li.inactive {
    color: #003B5C;
    background-color: #DCF8E7;
}

.info-nav-logo {
    width: 37px;
    height: 37px;
    display: none;
}

.infographic-nav li.active .info-nav-logo {
    display: inline;
    margin-right: 11px;
}

.info-reset {
    width: 37px;
    height: 37px;
    margin: 1rem 8px;
    cursor: pointer;
}

.info-img-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1200px;
    max-height: 890px;
}

.info-img {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0.5%;
    object-fit: contain;
}

.info-office-img {
    z-index: 3;
}

.info-disribution-img {
    z-index: -1;
}

.info-production-img {
    z-index: 1;
}

.hp-img {
    position: absolute;
    z-index: 10;
    bottom: 50%;
    left: 60%;
    height: 45px;
    transition: all 0.5s ease;
}

.hp-img:hover {
   transform: scale(1.2);
}

.hp-diamond-icon {
    width: 125px;
    height: 125px;
}

.hp-img-application-testing {
    left: 31.5%;
    top: 19%;
}

.hp-img-consumables-management {
    left: 33.75%;
    bottom: 55.5%;
}

.hp-img-compliant-consumables {
    left: 23%;
    top: 17%;
}

.hp-img-info-sustainability {
    left: 30%;
}

.hp-img-on-site-optimisation {
    left: 37.5%;
    top: 81.5%;
}

.hp-img-info-control {
    left: 16.25%;
    top: 65.75%;
}

.hp-img-code-inspection {
    left: 59.75%;
    top: 67%;
}

.hp-img-proactive-maintenance-advice {
    left: 49.25%;
    top: 79.75%;
}

.hp-img-product-insight {
    left: 13.5%;
    top: 48.75%;
}

.hp-img-rapid-remote-support {
    left: 44%;
    top: 23%;
}

.hp-img-safe-and-efficient-staff {
    left: 24.25%;
    top: 57%;
}

.hp-img-error-free-codes {
    left: 68%;
    top: 58%;
}

.hp-img-system-integration {
    left: 36.25%;
    top: 67%;
}

.hp-img-uptime-support {
    left: 43.5%;
    top: 57%;
}

.hp-img-accurate-and-complaint-codes {
    left: 4.75%;
    top: 70%;
}

.hp-img-avoid-coding-downtime {
    left: 42.25%;
    top: 64.5%;
}

.hp-img-brand-protection {
    top: 12%;
    left: 74%;
}

.hp-img-meet-consuming-demand {
    left: 46.5%;
    top: 35.5%;
}

.hp-img-reduce-product-waste {
    left: 79%;
    top: 46%;
}

.hp-tags {
    display: none;
}

/*Infographic inner pages */

.infographic-inner-container {
    display: flex;
    height: 100vh;
    gap: 100px;
}

.infographic-inner-img {
    width: 68%;
    position: relative;
}

.infographic-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.infographic-inner-img::after {
    content: "";
    width: 50px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    box-shadow: inset -20px 0px 20px -20px rgba(0, 27, 41, 0.25);
}

.infographic-inner-text {
    width: 60%;
    flex-direction: column;
    overflow-y: scroll;
}

.infographic-inner-text-wrapper {
    max-width: 500px;
    margin: 5rem 0;
}

.infographic-inner-text-wrapper-lg {
    max-width: 600px;
    margin: 5rem 0;
}

.infographic-text {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.close-icon {
    position: absolute;
    border-radius: 100%;
    right: 24px;
    color: #003B5C;
    padding: 1rem;
    background: #E4EBEE;
    top: 24px;
    text-decoration: none;
    cursor: pointer;
}

.close-icon:hover {
    background: #D2DADE;
    transition: 0.5s ease-in-out;
}

.close-png {
    width: 30.757px;
    height: 30.747px;
}

.play-button-wrapper {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.play-button-wrapper:hover {
    cursor: pointer;
}

.play-png {
    width: 50px;
    height: 50px;
}

.play-text {
    font-size: 18px;
    font-weight: 400;
    color: #003B5C;
}

.video-modal {
    display: none;
    background: white;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    z-index: 100;
    align-items: center;
    justify-content: center;
}

.video-frame {
    max-width: 600px;
    @media screen and (min-width: 1200px) {
        max-width: 1100px;
    }
    @media screen and (min-width: 1920px) {
        max-width: 1400px;
    }
}

.labels {
    display: flex;
    list-style: none;
    gap: 4.683px;
}

.labels li {
    background: #E4EBEE;
    color: #406C85;
    text-transform: uppercase;
    font-weight: 700;
    line-height: 114%;
    padding: 4px 7px;
    font-size: 10px;
    border-radius: 3px;
}

.app-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.hide-scrollbar {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

.hide-scrollbar::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.green-arrow-lg {
    width: 18px;
    height: 18px;
}

.green-arrow-sm {
    width: 14px;
    height: 14px;
}

.green-arrow-btn {
    color: #009639;
    text-decoration: none;
    display: flex;
    font-size: 16px;
    border-radius: 107px;
    align-items: center;
    padding: 6px 12px;
    gap: 0.5rem;
    width: fit-content;
    border: 1px solid #E4EBEE;
    font-weight: 500;
}

.green-arrow-btn:hover {
    background: #009639;
    color: white;
}

.green-arrow-btn-lg {
    color: #009639;
    text-decoration: none;
    font-size: 14px;
    border-radius: 2rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 25px;
    width: 100%;
    justify-content: center;
    text-align: center;
    border: 1px solid #E4EBEE;
    font-weight: 500;
}

.green-arrow-btn-lg:hover {
    background: #009639;
    color: white;
}

.accordion-item:hover {
    cursor: pointer;
}

.accordion-lg-text {
    text-transform: none !important;
    font-size: 20px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    margin: 28px 0 20px 0;
}

.accordion-item h3 {
    color: #003B5C;
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 16px;
    text-transform: uppercase;
    padding-top: 1rem;
    padding-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.accordion-item p {
    color: #003B5C;
    font-size: 18px;
    font-weight: 300;
}

.accordion-list {
    margin-top: 3rem;
    list-style: none;
}

.accordion-list li {
    color: #003B5C;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.list-icon {
    width: 10px;
    height: 10px;
}

.accordion-wrapper {
    margin: 4rem 0;
}

.accordion-list .green-arrow-btn {
    margin-bottom: 1.5rem;
    margin-left: 8px;
}

.accordion-item {
    border-top: 1px solid #E4EBEE;
}

.accordion-item:last-child {
    border-bottom: 1px solid #E4EBEE;
}

.accordion-item-hidden {
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-out, opacity 0.2s ease-out
    
}

.accordion-item-hidden.open {
  /* max-height: 1600px; */
  height: auto;
  margin-bottom: 20px;
}

.accordion-item .accordion-item-hidden.open + .accordion-item-open h3,
.accordion-item-open:has(+ .accordion-item-hidden.open) h3 {
    margin-bottom: 30px;
}

#accordion-icon-minus {
    display: none;
}

.accordion-img-wrapper {
    max-width: 600px;
    max-height: 280px;
    object-fit: contain;
}

.accordion-img {
    width: 100%;
    height: 280px;
}

.infographic-links h4 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 2rem;
    color: #003B5C;
}

.infographic-links-wrapper {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.consumable-illustration-wrapper {
    background: #E4EBEE;
    display: flex;
    gap: 2rem;
    align-items: center;
    border-radius: 5px;
    padding: 14px 26px;
}

.consumable-illustration-img {
    width: 87.77px;
}

.consumable-illustration-text {
    font-size: 16px;
    color: #003B5C;
}

.infographic-subheading {
    color: #003B5C;
    font-weight: 400;
    font-size: 20px;
    padding-top: 56px;
    padding-bottom: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.paragraph-spacing {
    display: block;
    margin-top: 1rem;
}

.benefits-block {
    display: flex;
    gap: 20px;
    align-items: center;
    margin-bottom: 20px;
    color: #406C85;
}

.list {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-weight: 400;
    gap: 8px;
}

.list-text {
    margin-left: 28.485px;
    font-size: 16px;
    color: #406C85;
    font-weight: 300;
}

.stats-block {
    background-color: #E4EBEE;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 40px;
    justify-content: space-between;
    text-align: center;
    border-radius: 5px;
}

.stats-block p {
    flex: 1;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
}

.vertical-line-break {
    width: 1px;
    height: 81.374px;
    background-color: #406C85;
    margin: 0 2rem;
    align-self: stretch;
}

.testimonial-block {
    padding: 30px;
    gap: 8px;
    border-radius: 5px;
    background-color: #E4EBEE;
}

.testimonial-img-wrapper {
    max-width: 113.2px;
    max-height: 30.628px;
    object-fit: contain;
}

.testimonial-img {
    width: 113.2px;
    height: 30.628px;
}

.grid-block {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 40px;
    max-width: 600px;
    width: 100%;
}

.grid-block h4 {
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
    color: #003B5C;

}

.grid-item {
    gap: 20px;
}

.grid-item p {
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 22px;
}

.codes-img {
    width: 82px;
    height: 82px;
    margin-bottom: 20px;
}

.infographic-inner-text .testimonial-links {
    color: #009639;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
}

.accordion-img-wrapper {
    max-width: 600px;
    max-height: 280px;
    object-fit: contain;
}

.accordion-img {
    width: 100%;
    height: 280px;
}

.infographic-content-box {
    border-radius: 5px;
    background-color: #E4EBEE;
    padding: 14px 26px;
    gap: 32px;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.infographic-content-box p {
    color: #003B5C;
    font-weight: 500;
    line-height: 20px;
    font-size: 16px;
}

.infographic-content-img {
    width: 50.16px;
    height: 95.261px;
    margin: 0 28px;
}

.quote {
    margin-bottom: 14px;
    font-size: 14px !important;
    font-style: italic;
    font-weight: 500 !important;
    line-height: 22px;
    color: #003B5C;
}

.author {
    font-size: 12px !important;
    font-weight: 300;
    line-height: 22px;
}

.benefits-icon {
    width: 53.74px;
}

.number-icon {
    width: 45.255px;
}

.benefits-block-text h4 {
    color: #003B5C;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 0.25rem;
}

.benefits-block-text p {
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 22px;
}

.horizontal-row {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.column {
    display: flex;
    flex-direction: column;
}

.version-no {
    position:absolute;
    left:10px;
    bottom:10px;
    z-index:9999;
    font-size:12px;
    text-align:left;
    opacity:0.8;
}

.zoom-in {
    animation: zoomIn 0.5s forwards;
}

.zoom-out {
    animation: zoomOut 0.5s backwards;
}
  
@keyframes zoomIn {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(1.8);
        opacity: 0;
    }
}

@keyframes zoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }
    to {
        transform: scale(0.8);
        opacity: 0;
    }
}

body.page-preload {
    opacity: 0;
}

body.page-fade-in {
    animation: fadeIn 0.3s ease-in forwards;
}
  
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
    
    .home-img {
        height: 100vw;
        width: 100%;
    }
    
    .wave-img {
        position: absolute;
        bottom: 25%;
        width: 250px;
        right: 0;
    }

    .domino-hq-wrapper {
        top: 19%; 
        left: 44%;
        transform: translate(-50%, -50%);
    }
    
    .consumer-wrapper {
        top: 23%; 
        right: -12%;
        transform: translate(-50%, -50%);
    }
    
    .customer-wrapper {
        bottom: 10%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .hotpoints-text-wrapper h3 {
        margin-bottom: 10px;
    }
    
    .hotpoints-text-wrapper p {
        color: #003B5C;
        font-weight: 400;
        font-size: 18px;
    }

    .hotpoints-grey-blocks {
        position: absolute;
        width: 90%;
        /* needs 50% bot on 1024, 35% on 768 */
        bottom: 44%;
        left: 0%;
        width: 100%;
        height: 65vw;
    }

    .hotpoints-img {
        bottom: 44%;
        right: 0;
        width: 100%;
        height: 65vw;
    }
    
    .info-img {
        top: 50;
        right: 10;
    }

    .infographic-nav {
        gap: 2px;
        margin-top: 120px;
    }
    
    .infographic-nav li {
        padding: 1rem;
        width: 120px;
        height: 75px;
    }

    .infographic-nav li.active {
        width: 140px;
        height: 76px;
    }
    
    .info-nav-logo {
        width: 25px;
        height: 25px;
        display: none;
    }
    
    .infographic-nav li.active .info-nav-logo {
        display: inline;
        margin-right: 0.5rem;
    }

    .infographic-inner-container {
        gap: 20px;
        overflow-y: scroll;
    }

    .infographic-inner-text {
        margin-right: 20px;
    }

    .labels {
        gap: 0.5rem;
        display: flex;
        flex-wrap: wrap;
    }
    
    
}