@media(max-width:100rem){ [class~="stakeholder-content"]{ width: 25rem; grid-template-columns: 9.375rem 15.625rem; } [class~="stakeholder-desc"] p{ font-size: 1.125rem; } } @media(max-width: 87.5rem){ [class~="solutions-type-content"]{ width: 12.5rem; height: auto; } [class~="solutions-type-content"] p { font-size: 1.4375rem; } [class~="solutions-type-img-cont"]{ width: 11.25rem; height: 11.25rem; } [class~="navigation-container"]{ gap: 5.625rem; } [class~="navigation-content"]{ width: 18.75rem; height: 37.5rem; } [class~="navigation-content"] img{ width: 7.5rem; top: -3.125rem; } [class~="navigation-content-desc"] p{ font-size: 1.4375rem; } [class~="navigation-content-desc"] h2{ font-size: 2.625rem; } [class~="marketing-mix-desc"] p{ font-size: 1.4375rem; } [class~="marketing-mix-img"] img{ width: 12.5rem; } [class~="stakeholder-content"]{ width: 21.875rem; height: 15.625rem; grid-template-columns: 7.8125rem 14.0625rem; } [class~="stakeholder-desc"] p{ font-size: 1.0625rem; } [class~="stakeholder-desc"] h2{ font-size: 1.875rem; } [class~="in-market-content"] h2{ font-size: 2.1875rem; } [class~="in-market-content"] p{ font-size: 1.25rem; } } @media(max-width: 75rem){ [class~="navigation-container"]{ gap: 4.375rem; } [class~="solutions-type-content"]{ width: 9.375rem; height: auto; } [class~="solutions-type-content"] p { font-size: 1.125rem; } [class~="solutions-type-img-cont"]{ width: 8.125rem; height: 8.125rem; } [class~="navigation-container"]{ gap: 3.125rem; } [class~="navigation-content"]{ width: 15.625rem; height: 31.25rem; padding: 0.3125rem; } [class~="navigation-content"] img{ width: 6.25rem; top: -3.125rem; } [class~="navigation-content-desc"] p{ font-size: 1.125rem; } [class~="navigation-content-desc"] h2{ font-size: 2rem; } [class~="marketing-mix-desc"] p{ font-size: 1.125rem; } [class~="marketing-mix-img"] img{ width: 10.625rem; } [class~="stakeholder-content"]{ width: 15.625rem; height: 15.625rem; grid-template-columns: 4.6875rem 10.9375rem; } [class~="stakeholder-desc"] p{ font-size: 0.9375rem; } [class~="stakeholder-desc"] h2{ font-size: 1.5625rem; } [class~="in-market-content"] h2{ font-size: 1.875rem; } [class~="in-market-content"] p{ font-size: 1.0625rem; } [class~="diagnotics-header"] h1{ font-size: 1.875rem; } [class~="diagnotics-desc"]{ font-size: 1.125rem; } } @media(max-width:56.25rem){ [class~="solution-description-title"]{ font-size: 3.125rem; } [class~="header"]{ margin-bottom: 6.25rem; } [class~="solutions-cont"]{ overflow-x: hidden; display: flex; flex-direction: row; align-items:center; } [class~="solutions-type"] [class~="wrapper"]{ position: relative; } [class~="solution-description-desc"]{ display: none; } [class~="solution-description-title"]{ margin: 0 auto; } [class~="solutions-type-container"]{ flex-direction: row; gap: 0rem; animation: slideImages 10s infinite linear; } [class~="solutions-type-content"]{ height: 12.125rem; margin-left: 1.25rem; } [class~="solutions-cont"]::after{ position: absolute; content: ""; width: 3.125rem; height: 100%; top: 0; z-index: 2; right: 0; background: linear-gradient(to right, rgba(255, 255, 255, 0), white); } [class~="solutions-cont"]::before{ position: absolute; content: ""; width: 3.125rem; height: 100%; top: 0; z-index: 2; left: 0; background: linear-gradient(to left, rgba(255, 255, 255, 0), white); } [class~="navigation-container"]{ flex-direction: column; } [class~="navigation-content"]{ width: 12.5rem; height: 21.875rem; padding: 0.3125rem; } [class~="navigation-content"] img{ width: 4.375rem; top: -2.5rem; } [class~="navigation-content-desc"] p{ font-size: 0.9375rem; } [class~="navigation-content-desc"] h2{ font-size: 1.5625rem; } [class~="stakeholder-desc"] p{ font-size:0.75rem } [class~="stakeholder-desc"] h2{ font-size:1.25rem } [class~="stakeholder-content"]{ height: 9.375rem; } [class~="stakeholder-container"]{ overflow-x: auto; overflow-y: hidden; justify-content: start; } [class~="program-overview-container"]{ flex-direction:column; align-items:center; } [class~="program-overview-img"]{ width: 100%; } [class~="program-overview-desc"] [class~="ovr-dsc"]{ font-size: 0.9375rem; font-family: 'HelveticaRegular'; } [class~="program-overview-desc"] p{ font-size: 1.125rem; text-align: center; } [class~="marketing-mix-desc"] p{ font-size: 0.9375rem; text-align: center; } [class~="marketing-mix-img"] img{ width: 10.625rem; } [class~="marketing-mix-content"]{ flex-direction: column; margin: 0; gap: 1.25rem; } [class~="in-market-content"] h2{ font-size: 1.25rem; } [class~="in-market-row"]{ flex-direction: column; } [class~="in-market-content"] p{ font-size: 0.875rem; } [class~="in-market-content"]{ min-height: 11.25rem; } [class~="diagnotics-container"]{ flex-direction: column; gap: 2.5rem; } [class~="diagnotics-content"]{ max-width: 12.5rem; height: 18.75rem; } [class~="diagnotics-header"] h1{ font-size: 1.25rem; } [class~="diagnotics-desc"]{ font-size: 0.875rem; } } @media (min-width:56.25rem){ [class~="header-image-solution"]{ transform-origin: right; animation: heroImg linear; animation-timeline: view(); animation-range: exit; } [class~="solutions-type-row"]{ animation: solutionType ease-in-out forwards; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 18.75rem; } [class~="navigation-content"] img{ animation: navigationContentImg ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 18.75rem; } [class~="navigation-content"]{ animation: fadeIn ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 18.75rem; } [class~="marketing-mix-desc"] p { background: linear-gradient(90deg, rgb(0, 0, 0), transparent); background-size: 300%; animation: reveal both linear; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 18.75rem; background-clip: text; -webkit-background-clip: text; color: transparent; background-repeat: no-repeat; } [class~="marketing-mix-img"]{ animation: marketingMix ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 31.25rem; } [class~="stakeholder-container"]{ animation: stakeHolder ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 31.25rem; } [class~="stakeholder-desc"] p{ background: linear-gradient(90deg, rgb(0, 0, 0), transparent); background-size: 300%; animation: reveal both linear; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 31.25rem; background-clip: text; -webkit-background-clip: text; color: transparent; background-repeat: no-repeat; } [class~="stakeholder-desc"] h2{ background: linear-gradient(90deg, rgb(0, 0, 0), transparent); background-size: 300%; animation: reveal both linear; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 31.25rem; background-clip: text; -webkit-background-clip: text; color: transparent; background-repeat: no-repeat; } [class~="program-overview-container"]{ animation: overview-cont ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 31.25rem; } [class~="in-market-container"]{ animation: inm-cont ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 31.25rem; } [class~="in-market-container"]{ animation: inm-cont ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 31.25rem; } [class~="in-market-row"]{ animation: inm-cont ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 31.25rem; } [class~="diagnotics-container"]{ animation: dia-cont ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 31.25rem; } [class~="diagnotics-header"] img{ animation: dia-img ease-in-out both; animation-timeline: view(); animation-range-start: cover; animation-range-end: cover 31.25rem; } }