/* Theme Name: Dotline Theme URI: https://dotline.ag Author: Dotline Author URI: https://dotline.ag Description: Dotline Version: 1.0 */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; list-style: none; } a { text-decoration: none; } /** * This is a variable font * You can control variable axes as shown below: * font-variation-settings: wght 400.0; * * available axes: 'wght' (range from 300.0 to 900.0 */ @font-face { font-family: "RedHatDisplay-Variable"; src: url("./assets/fonts/RedHatDisplay-Variable.woff2") format("woff2"), url("./assets/fonts/RedHatDisplay-Variable.woff") format("woff"), url("./assets/fonts/RedHatDisplay-Variable.ttf") format("truetype"); font-weight: 300 900; /* block: brief FOIT instead of Times flash during preloader / first paint */ font-display: block; font-style: normal; } @font-face { font-family: "RedHatText"; src: url("./assets/fonts/RedHatTextVF.woff2") format("woff2-variations"); font-weight: 300 700; font-style: normal; font-display: fallback; } h1, h2, h3, h4, h5, h6 { font-family: "RedHatDisplay-Variable"; } p { font-family: "RedHatText"; } .heroDotline__line { margin-bottom: 0 !important; } .sectionTitle, .sectionTitle .heroDotline__line { font-size: 100px; font-style: normal; font-weight: 300; font-variation-settings: "wght" 300; line-height: 120px; margin-bottom: 24px; font-family: "RedHatDisplay-Variable"; letter-spacing: -0.06em; max-width: 100%; } @media only screen and (max-width: 1199px) { .sectionTitle, .sectionTitle .heroDotline__line { font-size: 64px; line-height: 72px; } } @media only screen and (max-width: 991px) { .sectionTitle, .sectionTitle .heroDotline__line { font-size: 50px; line-height: 64px; } } @media (max-width: 767.98px) { .sectionTitle, .sectionTitle .heroDotline__line { font-size: 48px; line-height: 56px; margin-bottom: 16px; letter-spacing: -1.44px; } } .sectionTitle > span:not(.dotline-split-word), .sectionTitle .heroDotline__line > span:not(.dotline-split-word), .sectionTitle .heroDotline__line > span:not(.dotline-split-word), .sectionTitle .heroDotline__line .heroDotline__line > span:not(.dotline-split-word) { font-size: 100px; font-style: normal; font-weight: 600; font-variation-settings: "wght" 600; line-height: 120px; letter-spacing: -1.65px; font-family: "RedHatDisplay-Variable"; position: relative; } @media only screen and (max-width: 1199px) { .sectionTitle > span:not(.dotline-split-word), .sectionTitle .heroDotline__line > span:not(.dotline-split-word), .sectionTitle .heroDotline__line > span:not(.dotline-split-word), .sectionTitle .heroDotline__line .heroDotline__line > span:not(.dotline-split-word) { font-size: 64px; line-height: 72px; } } @media only screen and (max-width: 991px) { .sectionTitle > span:not(.dotline-split-word), .sectionTitle .heroDotline__line > span:not(.dotline-split-word), .sectionTitle .heroDotline__line > span:not(.dotline-split-word), .sectionTitle .heroDotline__line .heroDotline__line > span:not(.dotline-split-word) { font-size: 50px; line-height: 64px; } } @media (max-width: 767.98px) { .sectionTitle > span:not(.dotline-split-word), .sectionTitle .heroDotline__line > span:not(.dotline-split-word), .sectionTitle .heroDotline__line > span:not(.dotline-split-word), .sectionTitle .heroDotline__line .heroDotline__line > span:not(.dotline-split-word) { font-size: 48px; line-height: 56px; letter-spacing: -1.44px; } } .sectionTitle .mask, .sectionTitle .heroDotline__line .mask { display: block; position: absolute; left: 0; right: 32px; height: 48px; background: rgba(102, 115, 251, 0.8); bottom: 0; z-index: -1; } @media (max-width: 767.98px) { .sectionTitle .mask, .sectionTitle .heroDotline__line .mask { display: none; } } .sectionTitle2 { color: #ffffff; font-size: 48px; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: -2%; margin-bottom: 50px; } @media only screen and (max-width: 767.98px) { .sectionTitle2 { font-size: 32px; letter-spacing: -0.64px; font-weight: 645; font-variation-settings: "wght" 645; margin-bottom: 16px; } } .sectionTitle2 > span:not(.dotline-split-word) { font-weight: 300; font-variation-settings: "wght" 300; margin-left: 8px; } @media only screen and (max-width: 767.98px) { .sectionTitle2 br { display: none; } } .sectionTitle3 { color: #ffffff; font-size: 120px; font-style: normal; font-weight: 600; font-variation-settings: "wght" 600; line-height: 120px; letter-spacing: -0.06em; max-width: 1280px; margin-bottom: 32px; } @media only screen and (max-width: 1199px) { .sectionTitle3 { font-size: 64px; line-height: 72px; } } @media only screen and (max-width: 991px) { .sectionTitle3 { font-size: 50px; line-height: 64px; } } @media only screen and (max-width: 767.98px) { .sectionTitle3 { margin-bottom: 16px; font-size: 32px; font-weight: 645; font-variation-settings: "wght" 645; letter-spacing: -0.96px; line-height: 40px; } } .sectionTitle4, .sectionTitle4 .aboutPageInfo__title-char, .sectionTitle4 .aboutPageTeams__char, .sectionTitle4 .aboutPageInfo__title-char, .sectionTitle4 .aboutPageClients__char { color: #3345f9; font-size: 32px; font-style: normal; font-weight: 645; font-variation-settings: "wght" 645; letter-spacing: -0.64px; line-height: normal; } @media only screen and (max-width: 767.98px) { .sectionTitle4, .sectionTitle4 .aboutPageInfo__title-char, .sectionTitle4 .aboutPageTeams__char, .sectionTitle4 .aboutPageInfo__title-char, .sectionTitle4 .aboutPageClients__char { font-size: 16px; margin-bottom: 0; letter-spacing: normal; } } .sectionTitle4 > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word), .sectionTitle4 .aboutPageInfo__title-char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word), .sectionTitle4 .aboutPageTeams__char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word), .sectionTitle4 .aboutPageInfo__title-char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word), .sectionTitle4 .aboutPageClients__char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) { font-weight: 300; font-variation-settings: "wght" 300; margin-bottom: 0; } .sectionTitle4 > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) > .aboutPageInfo__title-char, .sectionTitle4 > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) > .aboutPageClients__char, .sectionTitle4 > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) > .aboutPageTeams__char, .sectionTitle4 .aboutPageInfo__title-char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) > .aboutPageInfo__title-char, .sectionTitle4 .aboutPageInfo__title-char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) > .aboutPageClients__char, .sectionTitle4 .aboutPageInfo__title-char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) > .aboutPageTeams__char, .sectionTitle4 .aboutPageTeams__char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) > .aboutPageInfo__title-char, .sectionTitle4 .aboutPageTeams__char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) > .aboutPageClients__char, .sectionTitle4 .aboutPageTeams__char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) > .aboutPageTeams__char, .sectionTitle4 .aboutPageInfo__title-char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) > .aboutPageInfo__title-char, .sectionTitle4 .aboutPageInfo__title-char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) > .aboutPageClients__char, .sectionTitle4 .aboutPageInfo__title-char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) > .aboutPageTeams__char, .sectionTitle4 .aboutPageClients__char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) > .aboutPageInfo__title-char, .sectionTitle4 .aboutPageClients__char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) > .aboutPageClients__char, .sectionTitle4 .aboutPageClients__char > span:not(.aboutOurStory__title-char, .aboutPageInfo__title-char, .aboutPageTeams__char, .aboutPageClients__char, .dotline-split-word) > .aboutPageTeams__char { font-weight: 300; font-variation-settings: "wght" 300; margin-bottom: 0; } .sectionTitle5, .sectionTitle5 .aboutOurStory__title-char, .sectionTitle5 .aboutPageClients__char, .sectionTitle5 .aboutPageInfo__title-char, .sectionTitle5 .aboutPageTeams__char { color: #fff; font-size: 64px; font-style: normal; font-weight: 759; font-variation-settings: "wght" 759; line-height: 72px; letter-spacing: -2.56px; max-width: 657px; } @media only screen and (max-width: 767.98px) { .sectionTitle5, .sectionTitle5 .aboutOurStory__title-char, .sectionTitle5 .aboutPageClients__char, .sectionTitle5 .aboutPageInfo__title-char, .sectionTitle5 .aboutPageTeams__char { letter-spacing: -0.96px; line-height: 32px; font-size: 24px; max-width: 100%; } } .sectionTitle5 span, .sectionTitle5 .aboutOurStory__title-char span, .sectionTitle5 .aboutPageClients__char span, .sectionTitle5 .aboutPageInfo__title-char span, .sectionTitle5 .aboutPageTeams__char span { font-weight: 300; font-variation-settings: "wght" 300; } @media only screen and (min-width: 768px) { html, * { cursor: none !important; } } html { scrollbar-width: none; } html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; } body { font-family: "RedHatDisplay-Variable", sans-serif; background: #000000; color: #ffffff; margin: 0; user-select: none; -ms-overflow-style: none; } .site-noise { position: fixed; inset: 0; z-index: 9000; width: 100%; height: 100%; pointer-events: none; opacity: 0.1; mix-blend-mode: screen; filter: url("#noise-bg-fx") grayscale(100%); background: #fff; } .dotline-split-word { display: inline-block; white-space: nowrap; } .dotline-split-line { display: block; } .dotlineScrollbar { position: fixed; top: 50%; right: 18px; z-index: 5500; width: 3px; height: min(34vh, 240px); min-height: 156px; pointer-events: none; transform: translateY(-50%); opacity: 0; transition: opacity 0.35s ease; mix-blend-mode: difference; } html.is-scroll-unlocked .dotlineScrollbar { opacity: 0.72; } .dotlineScrollbar::before { content: ""; position: absolute; inset: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(8px); } .dotlineScrollbar__thumb { position: absolute; left: 50%; top: 0; width: 100%; height: 72px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(153, 167, 255, 0.72)), #0016F8; box-shadow: 0 0 18px rgba(0, 22, 248, 0.45); transform: translate3d(-50%, 0, 0); will-change: transform; } html.dotline-menu-open .dotlineScrollbar { opacity: 0; } @media only screen and (max-width: 767.98px) { .dotlineScrollbar { right: 8px; height: 128px; } .dotlineScrollbar__thumb { height: 52px; } } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent], .lenis.lenis-smooth .no-scroll { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: clip; } .lenis.lenis-smooth iframe { pointer-events: none; } .lineParentDotline { overflow: hidden; vertical-align: top; } .maskBody { width: 100%; pointer-events: none; z-index: -5; } .maskBody svg { position: absolute; overflow: visible; will-change: transform; } .maskBody svg:nth-child(1) { width: 1047px; height: 1047px; right: 132px; z-index: 1; top: -10px; } @media only screen and (max-width: 767.98px) { .maskBody svg:nth-child(1) { left: 0; right: 0; } } .maskBody svg:nth-child(2) { width: 2881px; height: 1485px; z-index: 2; right: 96px; top: 50px; } @media only screen and (max-width: 767.98px) { .maskBody svg:nth-child(2) { left: -200%; top: 150px; } } #page { overflow: hidden; position: relative; } body.loaded .site-main .sectionTitle span:after { transform: scale3d(1, 1, 1); bottom: 0; } body:has(.site-case-study) .maskBody { display: none; } body:has(.site-case-study) .logoHeader svg path { transition: fill 0.35s ease; } @media only screen and (max-width: 767.98px) { body:has(.site-case-study) .case-study-hero, body:has(.site-case-study) .case-study-related-works { background: #000; } } @media only screen and (max-width: 767.98px) { body:has(.site-case-study) .site-case-study { background: #fff; } } html.dotline-menu-open .site-header.is-case-study-nav-light { background: transparent !important; } html.dotline-menu-open .site-header.is-case-study-nav-light .logoHeader svg path { fill: #fff !important; } @keyframes dotlineRotation { 0% { transform: rotate(0deg) translateZ(0); } 100% { transform: rotate(360deg) translateZ(0); } } .dotline-scroll-rotate { transform-origin: center center; will-change: transform; } @media (prefers-reduced-motion: reduce) { .dotline-scroll-rotate { will-change: auto; } } .hidden { position: absolute; overflow: hidden; width: 0; height: 0; pointer-events: none; } .dotline-link-hover { overflow: hidden; display: block; width: fit-content; } @media only screen and (min-width: 768px) { .dotline-link-hover > span { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); position: relative; display: block; } .dotline-link-hover > span:after { content: attr(data-text); display: block; position: absolute; top: 100%; left: 0; right: 0; transform: scale(0.9); transition: transform 0.4s; } .dotline-link-hover:hover > span { transform: translateY(-100%); } .dotline-link-hover:hover > span:after { transform: scale(1); } } .stretched__link { position: absolute; inset: 0; z-index: 2; } .not-found { position: relative; z-index: 1; } .not-found .mask { position: absolute; inset: 0; display: flex; align-items: center; } .not-found .mask svg { overflow: visible; } .not-found > .container { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100vh; position: relative; z-index: 2; } .not-found > .container .page-content { width: 787px; max-width: 100%; position: relative; } .not-found > .container .page-content .logoCircle { position: absolute; top: -138px; right: 192px; } .not-found > .container .page-content h1 { font-weight: 645; font-variation-settings: "wght" 645; font-size: 64px; line-height: 72px; letter-spacing: -4%; margin-bottom: 28px; } .not-found > .container .page-content p { font-weight: 400; font-variation-settings: "wght" 400; font-size: 24px; line-height: 32px; letter-spacing: -2%; margin-bottom: 28px; } .not-found > .container .page-content a { background: #0016F8; font-weight: 645; font-variation-settings: "wght" 645; font-size: 16px; line-height: 32px; letter-spacing: 0px; color: #FFFFFF; padding: 10px 32px; display: block; width: fit-content; } body.error404 { background: #0016F8; } body.error404 .maskBody { display: none; } body.error404 .site-header { padding: 64px 0; } body.error404 .dotlineFooter, body.error404 .dotlineScrollbar, body.error404 .hamburgerWrapper { display: none; } .js-case-study-bg-light { position: relative; } .js-case-study-bg-light .mask { position: absolute; inset: 0; } .js-case-study-bg-light .mask .full-bg { position: absolute; inset: 0; z-index: 1; background: #fafafa; } .js-case-study-bg-light .mask > svg:nth-child(1) { display: block; } @media only screen and (max-width: 767.98px) { .js-case-study-bg-light .mask > svg:nth-child(1) { display: none; } } .js-case-study-bg-light .mask > svg:nth-child(2) { display: none; } @media only screen and (max-width: 767.98px) { .js-case-study-bg-light .mask > svg:nth-child(2) { display: block; } } .pt-0 { padding-top: 0 !important; } .container { max-width: 1632px; margin-left: auto; margin-right: auto; position: relative; padding: 0 16px; } .container-md { max-width: 1362px; margin-left: auto; margin-right: auto; position: relative; padding: 0 16px; } .container-sm { max-width: 1200px; margin-left: auto; margin-right: auto; position: relative; padding: 0 16px; } .row { display: flex; } .row.row-cols-auto > * { flex: 0 0 auto; } .align-items-center { align-items: center; } .justify-content-between { justify-content: space-between; } html.is-site-loading { overflow: hidden; } html.is-site-loading body { overflow: hidden; } html.is-site-loading .site-header .logoHeader { visibility: hidden; pointer-events: none; } html.is-page-transitioning { overflow: hidden; } html.is-page-transitioning body { overflow: hidden; } html.is-page-transitioning .dotlineIntroLoader { z-index: 50000; } html.is-intro-pending { overflow: hidden; } html.is-intro-pending body { overflow: hidden; } html.is-intro-pending .site-main .heroDotline, html.is-intro-pending .site-case-study .case-study-hero { overflow: visible; } html.is-scroll-experience-locked { overflow: hidden; } html.is-scroll-experience-locked body { overflow: hidden; } html:not([data-header-reveal-primed]) .site-main .heroDotline .sectionTitle, html:not([data-header-reveal-primed]) .site-main .heroDotline .sectionTitle p, html:not([data-header-reveal-primed]) .site-main .heroDotline p, html:not([data-header-reveal-primed]) .site-case-study .case-study-hero__title, html:not([data-header-reveal-primed]) .site-case-study .case-study-hero__content .sectionTitle { opacity: 0; visibility: hidden; } html:not([data-case-study-hero-details-intro-primed]) .site-case-study .case-study-hero__content .case-study-intro__content--details ul li { opacity: 0; visibility: hidden; } html:not([data-home-know-us-intro-primed]) .site-main .heroDotline + .knowUsMore, html:not([data-home-know-us-intro-primed]) .site-main .heroDotline ~ .knowUsMore:first-of-type { opacity: 0; visibility: hidden; } html:not([data-image-clip-primed]) .site-main .knowUsMore .card__image { opacity: 0; visibility: hidden; } html:not([data-preloader-fonts-ready]) .dotlineIntroLoader__count, html:not([data-preloader-fonts-ready]) .dotlineIntroLoader__label { visibility: hidden; } .dotlineIntroLoader { position: fixed; inset: 0; z-index: 12000; pointer-events: all; isolation: isolate; overflow: hidden; } .dotlineIntroLoader__stage { position: absolute; inset: 0; z-index: 1; background: #fff; clip-path: inset(0% 0% 0% 0%); will-change: clip-path; } .dotlineIntroLoader__count { position: absolute; top: 24px; left: 48px; font-size: clamp(64px, 11vw, 180px); font-weight: 900; font-variation-settings: "wght" 900; line-height: 0.9; letter-spacing: -0.03em; color: #000; font-family: "RedHatDisplay-Variable"; will-change: transform; } @media (max-width: 767.98px) { .dotlineIntroLoader__count { top: 16px; left: 20px; font-size: clamp(48px, 20vw, 120px); } } .dotlineIntroLoader__logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, calc(-50% + 44px)); opacity: 0; width: 180px; max-width: 60vw; will-change: opacity, transform; } @media (max-width: 767.98px) { .dotlineIntroLoader__logo { width: 140px; } } .dotlineIntroLoader__logo svg { display: block; width: 100%; height: auto; } .dotlineIntroLoader__logo svg path { fill: #000; } .dotlineIntroLoader__label { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 12px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 1; letter-spacing: 2px; text-transform: uppercase; color: #ffffff; font-family: "RedHatDisplay-Variable"; padding: 10px 0; mix-blend-mode: difference; z-index: 20; } .dotlineIntroLoader__bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 32px; overflow: hidden; z-index: 2; } .dotlineIntroLoader__barFill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center; background: #0016f8; will-change: transform; } .dotlineIntroLoader__panel { position: absolute; inset: 0; z-index: 3; background: #0016f8; clip-path: inset(100% 0% 0% 0%); will-change: clip-path; } @media (prefers-reduced-motion: reduce) { .dotlineIntroLoader { display: none; } } .site-header { padding: 40px 0; position: fixed !important; top: 0; right: 0; left: 0; z-index: 5000; transform: translate3d(0, 0, 0); transition: padding 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease; will-change: transform, opacity; } .site-header > .container { position: relative; z-index: 2; } .site-header.is-hidden { pointer-events: none; } .site-header__backdrop { position: fixed; top: 0; right: 0; left: 0; z-index: 900; display: grid; height: 152px; pointer-events: none; } @media (max-width: 767.98px) { .site-header__backdrop { height: 88px; } } .site-header__backdrop > span { grid-area: 1/1; transition: opacity 0.2s linear; } .site-header__backdrop > :first-child { backdrop-filter: blur(1px); mask: linear-gradient(0deg, transparent, #000 100%); } .site-header__backdrop > :nth-child(2) { backdrop-filter: blur(2px); mask: linear-gradient(0deg, transparent 8%, #000 100%); } .site-header__backdrop > :nth-child(3) { backdrop-filter: blur(4px); mask: linear-gradient(0deg, transparent 16%, #000 100%); } .site-header__backdrop > :nth-child(4) { backdrop-filter: blur(8px); mask: linear-gradient(0deg, transparent 24%, #000 100%); } .site-header__backdrop > :nth-child(5) { backdrop-filter: blur(12px); mask: linear-gradient(0deg, transparent 36%, #000 100%); } .site-header__backdrop > :nth-child(6) { backdrop-filter: blur(16px); mask: linear-gradient(0deg, transparent 48%, #000 100%); } @media (max-width: 767.98px) { .site-header { padding: 24px 0; } .site-header.is-scrolled { padding: 12px 0; } } @media (max-width: 767.98px) { .site-header .logoHeader { width: 107px; } .site-header .logoHeader svg { width: 100%; } } .site-header .logoHeader:hover:before { content: ""; display: block; position: absolute; top: -16px; bottom: -16px; z-index: -1; } .site-header .logoHeader svg { display: block; } .site-header .logoHeader img { width: 100%; } .site-header .hamburgerWrapper { height: 72px; position: relative; padding: 8px; display: flex; flex-direction: row-reverse; transition: width 0.55s cubic-bezier(0.22, 1, 0.36, 1), background 0.34s cubic-bezier(0.22, 1, 0.36, 1); will-change: width; width: 260px; border-radius: 100px; overflow: hidden; background: #fff; } @media (max-width: 767.98px) { .site-header .hamburgerWrapper { width: auto; background: transparent; } } .site-header .hamburgerWrapper .hamburgerMenu button { background: #0016F8; } .site-header .hamburgerWrapper .hamburgerMenu button path { stroke: #fff; } .site-header .hamburgerWrapper .hamburgerMenu button span:first-child { opacity: 0; visibility: hidden; } .site-header .hamburgerWrapper .hamburgerMenu button span:last-child { opacity: 1; visibility: visible; } @media (max-width: 767.98px) { .site-header .hamburgerWrapper { padding: 0; width: 40px; height: 40px; } } .site-header .hamburgerWrapper ul { border-radius: 100px; display: flex; position: absolute; top: 0; right: 0; gap: 30px; height: 72px; padding: 24px 0 24px 32px; align-items: center; flex-wrap: nowrap; opacity: 1; visibility: visible; z-index: 12; transform-origin: right center; transition: background 0.34s ease, opacity 0.34s ease, visibility 0.34s ease; will-change: opacity, transform, visibility; width: 260px; } @media (max-width: 767.98px) { .site-header .hamburgerWrapper ul { display: none; } } .site-header .hamburgerWrapper ul li a { font-size: 16px; font-weight: 645; font-variation-settings: "wght" 645; line-height: 21px; color: #000000; display: block; overflow: hidden; } .site-header .hamburgerWrapper ul li a > span { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); position: relative; display: block; } .site-header .hamburgerWrapper ul li a > span:after { content: attr(data-text); display: block; position: absolute; top: 100%; left: 0; right: 0; transform: scale(0.9); transition: transform 0.4s; } .site-header .hamburgerWrapper ul li a:hover > span { transform: translateY(-100%); } .site-header .hamburgerWrapper ul li a:hover > span:after { transform: scale(1); } .site-header .hamburgerWrapper .hamburgerMenu > button { width: 56px; height: 56px; position: relative; cursor: pointer; display: block; z-index: 5001; border-radius: 50%; border: 0; background: #0016F8; border: 2px solid transparent; transition: background 0.1s 0s ease-out; } @media (max-width: 767.98px) { .site-header .hamburgerWrapper .hamburgerMenu > button { width: 40px; height: 40px; } .site-header .hamburgerWrapper .hamburgerMenu > button svg { width: 24px; height: 24px; } } .site-header .hamburgerWrapper .hamburgerMenu > button:before { content: ""; position: absolute; top: -16px; right: -16px; left: -16px; bottom: -16px; } .site-header .hamburgerWrapper .hamburgerMenu > button:hover { background: transparent !important; transition: background 0.3s 0.3s ease-out; } @media (max-width: 767.98px) { .site-header .hamburgerWrapper .hamburgerMenu > button:hover { background: #0016F8 !important; } } .site-header .hamburgerWrapper .hamburgerMenu > button:hover path { stroke: #fff !important; } .site-header .hamburgerWrapper .hamburgerMenu > button span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: transparent; display: flex; justify-content: center; align-items: center; border-radius: 50%; } .site-header .hamburgerWrapper .hamburgerMenu > button span svg path { transition: 0.3s ease-out; } .site-header .hamburgerWrapper .hamburgerMenu > button span svg { transition: opacity 0.24s ease, transform 0.3s ease; } .site-header .hamburgerWrapper .hamburgerMenu > button span:first-child { opacity: 1; visibility: visible; } .site-header .hamburgerWrapper .hamburgerMenu > button span:last-child { opacity: 0; visibility: hidden; } .site-header .hamburgerWrapper .hamburgerMenu > button path { stroke: #fff; } .site-header .hamburgerWrapper.is-menu-open { width: 72px; background: transparent; } @media (max-width: 767.98px) { .site-header .hamburgerWrapper.is-menu-open { width: auto; } } .site-header .hamburgerWrapper.is-menu-open ul { opacity: 0; visibility: hidden; background: #0016F8; } .site-header .hamburgerWrapper.is-menu-open .hamburgerMenu > button { background: #0016F8; border: 2px solid #E5E5E5; } .site-header .hamburgerWrapper.is-menu-open .hamburgerMenu > button:hover { background: transparent !important; border-color: transparent !important; } @media (max-width: 767.98px) { .site-header .hamburgerWrapper.is-menu-open .hamburgerMenu > button:hover { background: #0016F8 !important; border: 2px solid #E5E5E5 !important; } } .site-header .hamburgerWrapper.is-menu-open .hamburgerMenu > button span { opacity: 1; visibility: visible; } .site-header .hamburgerWrapper.is-menu-open .hamburgerMenu > button span:first-child svg { opacity: 0; } .site-header .hamburgerWrapper.is-menu-open .hamburgerMenu > button span:first-child::before { opacity: 1; transform: translate(-50%, -50%) rotate(45deg) scaleX(1); } .site-header .hamburgerWrapper.is-menu-open .hamburgerMenu > button span:last-child::before { opacity: 1; transform: translate(-50%, -50%) rotate(-45deg) scaleX(1); } html.dotline-menu-open, html.dotline-menu-open body { overflow: hidden; } .dotlineMenuOverlay { position: fixed; inset: 0; z-index: 4500; opacity: 0; visibility: hidden; pointer-events: none; overflow: hidden; color: #fff; background: #0016F8; isolation: isolate; will-change: clip-path; } .dotlineMenuOverlay.is-open { pointer-events: auto; } .dotlineMenuOverlay__expander { display: none; } .dotlineMenuOverlay__mask { position: fixed; inset: 0; margin: auto; } .dotlineMenuOverlay__mask svg { overflow: visible; } .dotlineMenuOverlay__inner { position: relative; z-index: 3; min-height: 100dvh; padding: 40px 0; display: flex; flex-direction: column; opacity: 0; visibility: hidden; } .dotlineMenuOverlay__top { display: flex; align-items: center; justify-content: space-between; } .dotlineMenuOverlay__logo { display: block; width: 175px; } .dotlineMenuOverlay__logo svg { display: block; width: 100%; height: auto; } .dotlineMenuOverlay__content { position: relative; flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 270px; align-items: center; gap: 10vw; } .dotlineMenuOverlay__nav { display: flex; flex-direction: column; align-items: flex-start; width: fit-content; counter-reset: menu-link; } .dotlineMenuOverlay__link { counter-increment: menu-link; position: relative; display: flex; width: fit-content; align-items: flex-start; gap: 12px; color: #fff; font-size: 64px; font-weight: 645; font-variation-settings: "wght" 645; line-height: 80px; letter-spacing: -2%; will-change: transform, opacity, clip-path; font-family: "RedHatDisplay-Variable", sans-serif; transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), padding-left 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .dotlineMenuOverlay__link span { font-weight: 500; font-variation-settings: "wght" 500; } .dotlineMenuOverlay__link sup::before { content: counter(menu-link, decimal-leading-zero); font-size: 16px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 24px; letter-spacing: 0; color: #FFFFFF; } .dotlineMenuOverlay__link::after { content: ""; position: absolute; left: 24px; right: 32px; bottom: 0; height: 32px; background: rgba(102, 115, 251, 0.8); transform: scaleX(0); transform-origin: left center; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), left 0.55s cubic-bezier(0.22, 1, 0.36, 1); z-index: -1; } @media (max-width: 767.98px) { .dotlineMenuOverlay__link::after { height: 16px; left: 0px; right: 16px; } } .dotlineMenuOverlay__char { display: inline-block; will-change: transform; } .dotlineMenuOverlay__nav:hover .dotlineMenuOverlay__link { opacity: 0.3 !important; } .dotlineMenuOverlay__nav .dotlineMenuOverlay__link:hover { opacity: 1 !important; } .dotlineMenuOverlay__nav .dotlineMenuOverlay__link:hover span { opacity: 1; visibility: visible; } .dotlineMenuOverlay__nav .dotlineMenuOverlay__link:hover::after { transform: scaleX(1) !important; left: 32px; } @media (max-width: 767.98px) { .dotlineMenuOverlay__nav .dotlineMenuOverlay__link:hover::after { left: 8px; } } .dotlineMenuOverlay__contact { align-self: flex-end; font-style: normal; font-size: 16px; font-weight: 759; font-variation-settings: "wght" 759; line-height: 28px; color: #FFFFFF; will-change: transform, opacity, clip-path; font-family: "RedHatDisplay-Variable", sans-serif; margin-bottom: 200px; } .dotlineMenuOverlay__contact h4, .dotlineMenuOverlay__contact p, .dotlineMenuOverlay__contact a { display: block; } .dotlineMenuOverlay__contact h4 { margin-bottom: 16px; } @media (max-width: 767.98px) { .dotlineMenuOverlay__contact h4 { margin-bottom: 8px; font-size: 14px; } } .dotlineMenuOverlay__contact p { margin-bottom: 4px; font-weight: 400; font-variation-settings: "wght" 400; } @media (max-width: 767.98px) { .dotlineMenuOverlay__contact p { font-size: 12px; line-height: 24px; margin-bottom: 8px; } } .dotlineMenuOverlay__contact a { color: #fff; font-weight: 400; font-variation-settings: "wght" 400; } @media (max-width: 767.98px) { .dotlineMenuOverlay__contact a { font-size: 12px; line-height: 24px; } } .dotlineMenuOverlay__stamp { position: absolute; right: 10vw; bottom: -100px; width: 198px; height: 198px; border-radius: 50%; display: flex; align-items: center; justify-content: center; will-change: transform, opacity; } .dotlineMenuOverlay__stamp svg { animation: dotlineRotation 20s infinite linear; } @media (max-width: 767.98px) { .dotlineMenuOverlay__inner { padding: 40px 0; } .dotlineMenuOverlay__content { grid-template-columns: 1fr; padding-top: 144px; gap: 48px; align-items: flex-start; } .dotlineMenuOverlay__link { font-size: 24px; line-height: 40px; gap: 4px; } .dotlineMenuOverlay__link sup::before { font-size: 10px; line-height: 16px; } .dotlineMenuOverlay__contact { justify-self: start; align-self: end; margin-bottom: 95px; } .dotlineMenuOverlay__stamp { right: 0px; bottom: -100px; } .dotlineMenuOverlay__mask { left: -100%; } } .dotlineFooter .mask { position: absolute; bottom: 0; left: 0; right: 0; pointer-events: none; } .dotlineFooter .mask svg { overflow: visible; } .dotlineFooter .mask svg:nth-child(1) { display: block; } @media only screen and (max-width: 767.98px) { .dotlineFooter .mask svg:nth-child(1) { display: none; } } .dotlineFooter .mask svg:nth-child(2) { display: none; } @media only screen and (max-width: 767.98px) { .dotlineFooter .mask svg:nth-child(2) { display: block; margin-top: -120px; } } .dotlineFooter .dotlineFooter__top { position: relative; } .dotlineFooter .dotlineFooter__top > button { background: var(--White, #FFF); padding: 10px 32px; border: none; color: var(--Blue-Blue---100, #0016F8); line-height: 32px; font-size: 16px; font-weight: 600; font-variation-settings: "wght" 600; } .dotlineFooter .dotlineFooter__top > p { color: #FFFFFF; font-size: 24px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 32px; letter-spacing: -1.44px; width: 787px; max-width: 100%; margin-bottom: 32px; margin-top: 8px; } @media only screen and (max-width: 767.98px) { .dotlineFooter .dotlineFooter__top > p { border-bottom: 1px solid rgba(255, 255, 255, 0.5); padding-bottom: 16px; margin-bottom: 16px; font-size: 16px; letter-spacing: -0.32px; line-height: 24px; width: 100%; } } .dotlineFooter .dotlineFooter__top .dotlineFooter__top--image { position: absolute; top: 50%; margin-top: -100px; right: 0; } @media only screen and (max-width: 767.98px) { .dotlineFooter .dotlineFooter__top .dotlineFooter__top--image { display: none; } } .dotlineFooter .dotlineFooter__top .dotlineFooter__top--image:hover:before { content: ""; display: block; position: absolute; top: -140px; left: -140px; right: -40px; bottom: -140px; } .dotlineFooter .dotlineFooter__top .dotlineFooter__top--information { margin: 80px 0 80px; gap: 80px; } @media only screen and (max-width: 767.98px) { .dotlineFooter .dotlineFooter__top .dotlineFooter__top--information { margin: 16px 0; } } .dotlineFooter .dotlineFooter__top .dotlineFooter__top--information h4 { color: #fff; margin-bottom: 8px; font-size: 16px; font-weight: 700; font-variation-settings: "wght" 700; } @media only screen and (max-width: 767.98px) { .dotlineFooter .dotlineFooter__top .dotlineFooter__top--information h4 { font-size: 14px; font-style: normal; font-weight: 759; font-variation-settings: "wght" 759; line-height: normal; } } .dotlineFooter .dotlineFooter__top .dotlineFooter__top--information .dotlineFooter__top--information-box { display: flex; gap: 175px; } @media only screen and (max-width: 767.98px) { .dotlineFooter .dotlineFooter__top .dotlineFooter__top--information .dotlineFooter__top--information-box { gap: 24px; justify-content: space-between; } } .dotlineFooter .dotlineFooter__top .dotlineFooter__top--information .information--item { display: flex; flex-direction: column; } .dotlineFooter .dotlineFooter__top .dotlineFooter__top--information .information--item p, .dotlineFooter .dotlineFooter__top .dotlineFooter__top--information .information--item a { max-width: 220px; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 24px; letter-spacing: -0.12px; color: #fff; } .dotlineFooter .dotlineFooter__copyRight { padding: 16px 0; border-top: 1px solid hsla(204, 19%, 90%, 0.5); } @media only screen and (max-width: 767.98px) { .dotlineFooter .dotlineFooter__copyRight { border-top-color: rgba(255, 255, 255, 0.5); } .dotlineFooter .dotlineFooter__copyRight > .row { flex-direction: column-reverse; } } .dotlineFooter .dotlineFooter__copyRight p { color: #fff; font-size: 12px; font-weight: 600; font-variation-settings: "wght" 600; line-height: normal; opacity: 0.5; } @media only screen and (max-width: 767.98px) { .dotlineFooter .dotlineFooter__copyRight p span { display: none; } } @media only screen and (max-width: 767.98px) { .dotlineFooter .dotlineFooter__copyRight ul { border-bottom: 1px solid rgba(255, 255, 255, 0.5); width: 100%; padding-bottom: 16px; margin-bottom: 16px; } } .dotlineFooter .dotlineFooter__copyRight ul li a { color: #fff; font-size: 12px; font-weight: 700; font-variation-settings: "wght" 700; line-height: normal; opacity: 0.5; transition: 0.3s ease-out; display: block; } @media only screen and (max-width: 767.98px) { .dotlineFooter .dotlineFooter__copyRight ul li a { font-size: 10px; font-weight: 759; font-variation-settings: "wght" 759; padding: 0; } } .dotlineFooter .dotlineFooter__copyRight ul li a:hover { opacity: 1; } .dotlineFooter .dotlineFooter__copyRight ul li + li { margin-left: 24px; } @media only screen and (max-width: 767.98px) { .dotlineFooter .dotlineFooter__copyRight ul li + li { margin-left: 16px; } } body.page-template-template-contact .dotlineFooter .mask { display: none; } .backToTop { position: fixed; bottom: 48px; right: 48px; font-weight: 600; font-variation-settings: "wght" 600; font-size: 16px; line-height: 21px; letter-spacing: 0%; text-align: center; text-transform: uppercase; border: 2px solid #FFFFFF; border-radius: 50%; display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; color: #fff; z-index: 1000; opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity; mix-blend-mode: difference; } @media only screen and (max-width: 767.98px) { .backToTop { bottom: 24px; right: 16px; width: 88px; height: 88px; font-size: 12px; line-height: 16px; border-width: 1.5px; } } .btn { border: 0; cursor: pointer; color: #fff; padding: 12px 32px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 645; font-variation-settings: "wght" 645; line-height: 32px; text-transform: uppercase; width: fit-content; } @media only screen and (max-width: 767.98px) { .btn { font-size: 12px; line-height: 24px; } } .btn--icon { gap: 8px; aspect-ratio: 1; } .btn--baseColor { background: #0016F8; } @media only screen and (min-width: 768px) { .btn.dotline-link-hover { padding-top: 0; padding-bottom: 0; } .btn.dotline-link-hover > span { padding: 12px 0; } .btn.dotline-link-hover > span:after { padding: 12px 0; transform: scale(1); } } .dotline-cursor { position: fixed; top: 0; left: 0; z-index: 5000; contain: layout style size; pointer-events: none; transition: color 0.3s 0s; } .dotline-cursor:before { content: ""; display: block; position: absolute; top: -70px; left: -70px; width: 140px; height: 140px; transform: scale(0.1); background: #fff; border-radius: 50%; transition: transform 0.3s, opacity 0.1s, background 0.3s; } .dotline-cursor.-reverse:before { background: #000; } .dotline-cursor.-active:before, .dotline-menu.-open .dotline-menu-toggle button.dotline-cursor:before, .dotline-navbar.-open .dotline-navbar-toggle button.dotline-cursor:before { transform: scale(0.2); } .dotline-cursor.-exclusion, .dotline-cursor.-opaque, .dotline-cursor.-pointer { mix-blend-mode: exclusion; transition-duration: 0s; transition-delay: 999999s; } .dotline-cursor.-menu { mix-blend-mode: normal; transition: none; } .dotline-cursor.-exclusion:before, .dotline-cursor.-menu:before, .dotline-cursor.-opaque:before, .dotline-cursor.-pointer:before { background: #fff; } .dotline-cursor.-opaque:before { transform: scale(0.1); } .dotline-cursor.-opaque.-active:before, .dotline-menu.-open .dotline-menu-toggle button.dotline-cursor.-opaque:before, .dotline-navbar.-open .dotline-navbar-toggle button.dotline-cursor.-opaque:before { transform: scale(0.25); } .dotline-cursor.-lg:before { transform: scale(1.05); } .dotline-cursor.-lg.-active:before, .dotline-menu.-open .dotline-menu-toggle button.dotline-cursor.-lg:before, .dotline-navbar.-open .dotline-navbar-toggle button.dotline-cursor.-lg:before { transform: scale(1.15); } .dotline-cursor.-pointer:before { transform: scale(0.3); } .dotline-cursor.-pointer.-active:before, .dotline-menu.-open .dotline-menu-toggle button.dotline-cursor.-pointer:before, .dotline-navbar.-open .dotline-navbar-toggle button.dotline-cursor.-pointer:before { transform: scale(0.35); } .dotline-cursor.-text { mix-blend-mode: normal; transition-delay: 0s; } .dotline-cursor.-text:before { background: currentColor; opacity: 1; transform: scale(1); } .dotline-cursor.-text.-active:before, .dotline-menu.-open .dotline-menu-toggle button.dotline-cursor.-text:before, .dotline-navbar.-open .dotline-navbar-toggle button.dotline-cursor.-text:before { transform: scale(0.8); transition-duration: 0.2s; } .dotline-cursor.-icon { mix-blend-mode: normal; transition-delay: 0s; } .dotline-cursor.-icon:before { transform: scale(1); } .dotline-cursor.-icon.-active:before, .dotline-menu.-open .dotline-menu-toggle button.dotline-cursor.-icon:before, .dotline-navbar.-open .dotline-navbar-toggle button.dotline-cursor.-icon:before { transform: scale(0.9); } .menu-open .dotline-cursor.-menu { transition: none; } .dotline-cursor.-menu:before { transform: scale(0.4); background: #0016F8; } .dotline-cursor.-case-next { mix-blend-mode: normal; z-index: 1; } .dotline-cursor.-case-next:before { transform: scale(1.857); background: #0013ff; border: 0; } .dotline-cursor.-case-next.-active:before { transform: scale(1.78); } .dotline-cursor.-menu .dotline-cursor-inner::after { content: ""; position: absolute; display: block; top: -70px; left: -70px; width: 140px; height: 140px; background: url('data:image/svg+xml,') 50% 50% no-repeat; background-size: cover; background-position: center center; pointer-events: none; transform: scale(0.175); } html:has(.is-menu-open) .dotline-cursor.-menu:before { border: 4px solid #fff; } html:has(.is-menu-open) .dotline-cursor.-menu .dotline-cursor-inner::after { background: url('data:image/svg+xml,') 50% 50% no-repeat; background-size: cover; background-position: center center; } .dotline-cursor.-menu.-active:before, .dotline-menu.-open .dotline-menu-toggle button.dotline-cursor.-menu:before, .dotline-navbar.-open .dotline-navbar-toggle button.dotline-cursor.-menu:before { transform: scale(0.325); } .dotline-cursor.-hidden:before { transform: scale(0); } .dotline-cursor.-under { z-index: 0; } .dotline-cursor-text { position: absolute; top: -1.8rem; left: -3rem; width: 6rem; height: 3.6rem; display: flex; align-items: center; justify-content: center; transform: scale(0) rotate(10deg); opacity: 0; color: #fff; font-size: 16px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 21px; text-align: center; transition: opacity 0.4s, transform 0.3s; font-family: "RedHatText"; text-transform: uppercase; } .dotline-cursor.-instagram .dotline-cursor-text { font-size: 14px; } .dotline-cursor.-icon .dotline-cursor-text, .dotline-cursor.-text .dotline-cursor-text { opacity: 1; transform: scale(1); } .dotline-cursor.-icon .dotline-cursor-text { font-size: 2rem; } .dotline-cursor.-inverse .dotline-cursor-text { color: #000; } .dotline-cursor.-text.-blue:before { background: #0016F8; } .dotline-cursor.-text.-blue .dotline-cursor-text { color: #fff !important; } .dotline-cursor.-team.-text:before { transform: scale(1.05); } .dotline-cursor.-team.-text.-active:before { transform: scale(0.95); } .dotline-cursor.-team .dotline-cursor-text { width: 7rem; left: -3.5rem; font-size: 15px; font-weight: 700; font-variation-settings: "wght" 700; letter-spacing: 0.02em; text-transform: none; } .dotline-cursor-media { position: absolute; width: 36rem; height: 36rem; margin: -18rem 0 0 -18rem; } .dotline-cursor-media img, .dotline-cursor-media video { width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); } .dotline-cursor-media-box { position: relative; width: 100%; height: 100%; overflow: hidden; transform: scale(0) translateZ(0); opacity: 0; border-radius: 50%; transition: transform 0.35s, opacity 0.2s 0.2s; } .dotline-cursor.-media .dotline-cursor-media-box { opacity: 1; transform: scale(0.696); transition-duration: 0.4s, 0.4s; transition-delay: 0s, 0s; } .dotline-cursor.-media { z-index: 0; mix-blend-mode: normal; transition-delay: 0s; } .dotline-cursor.-media .dotline-cursor-media-box { opacity: 1; transform: scale(0.696); transition-duration: 0.4s, 0.4s; transition-delay: 0s, 0s; } .dotline-cursor.-media.-media-lg .dotline-cursor-media-box { transform: scale(1) !important; } .dotline-cursor.-media.-media-blend { z-index: 150; mix-blend-mode: exclusion; } @supports (mix-blend-mode: exclusion) { .dotline-cursor.-media.-media-blend .dotline-cursor-media-box { filter: invert(1); } } .form-groups { display: flex; flex-direction: column; gap: 16px; } .form-group { position: relative; } .form-group input { width: 100%; padding: 24px; font-size: 16px; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.1); outline: none; color: #fff; height: 80px; transition: all 0.3s; } @media only screen and (max-width: 767.98px) { .form-group input { padding: 16px; height: 56px; font-size: 12px; } } .form-group input:focus { border-bottom-color: #fff; } .form-group textarea { width: 100%; padding: 24px; font-size: 16px; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.1); outline: none; color: #fff; resize: none; height: 240px; line-height: 32px; transition: all 0.3s; } @media only screen and (max-width: 767.98px) { .form-group textarea { height: 120px; padding: 16px; font-size: 12px; line-height: 24px; } } .form-group textarea:focus { border-bottom-color: #fff; } .form-group label { position: absolute; left: 24px; top: 50%; transform: translateY(-50%); color: #fff; font-size: 16px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 32px; transition: all 0.2s ease; pointer-events: none; } @media only screen and (max-width: 767.98px) { .form-group label { left: 16px; font-size: 12px; line-height: 24px; } } .form-group input:focus + label, .form-group textarea:focus + label, .form-group input.not-empty + label, .form-group textarea.not-empty + label { top: 0px; left: 12px; font-size: 12px; } @media only screen and (max-width: 767.98px) { .form-group input:focus + label, .form-group textarea:focus + label, .form-group input.not-empty + label, .form-group textarea.not-empty + label { left: 8px; font-size: 10px; } } .form-group:has(textarea) label { top: 24px; } .upload-area { position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.1); padding: 14px 14px 14px 24px; height: 80px; width: 100%; overflow: hidden; display: flex; align-items: center; justify-content: space-between; } @media only screen and (max-width: 767.98px) { .upload-area { height: 56px; padding: 12px 12px 12px 16px; } } .upload-area input { position: absolute; cursor: pointer; z-index: 1; inset: 0; opacity: 0; } .upload-area--title { font-size: 16px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 32px; color: #fff; } @media only screen and (max-width: 767.98px) { .upload-area--title { font-size: 12px; line-height: 24px; } } .upload-area--button { border: 2px solid var(--White, #fff); padding: 10px 32px; color: #fff; font-size: 16px; font-weight: 645; font-variation-settings: "wght" 645; line-height: 32px; display: flex; align-items: center; justify-content: center; } @media only screen and (max-width: 767.98px) { .upload-area--button { font-size: 0; padding: 0; width: 32px; height: 32px; } } .upload-area--button svg { display: none; } @media only screen and (max-width: 767.98px) { .upload-area--button svg { display: block; } } .site-main .heroDotline { padding-top: 320px; } @media (max-width: 767.98px) { .site-main .heroDotline { padding-top: 144px; } } .site-main .heroDotline .heroDotline__line { display: block; } .site-main .heroDotline p { color: #ffffff; font-size: 24px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 32px; letter-spacing: -0.02em; width: 787px; max-width: 100%; } @media (max-width: 767.98px) { .site-main .heroDotline p { font-size: 16px; line-height: 24px; } } .site-main .knowUsMore { padding-top: 160px; padding-bottom: 160px; position: relative; z-index: 5; } @media only screen and (max-width: 767.98px) { .site-main .knowUsMore { padding-top: 64px; padding-bottom: 64px; } .site-main .knowUsMore.careersList { padding-top: 144px; } .site-main .knowUsMore .card__overload br { display: none; } .site-main .knowUsMore .card__overload br + .dotline-text-char { margin-left: 4px; } } @media only screen and (min-width: 768px) { .site-main .knowUsMore > .container, .site-main .knowUsMore > .container-md, .site-main .knowUsMore > .container-sm { perspective: 1400px; perspective-origin: 50% 42%; } } .site-main .knowUsMore .card { padding-left: 135px; position: relative; } @media only screen and (max-width: 767.98px) { .site-main .knowUsMore .card { padding-left: 0px; } } @media only screen and (min-width: 768px) { .site-main .knowUsMore .card { transform-style: preserve-3d; will-change: transform; } } .site-main .knowUsMore .card__image { overflow: hidden; height: 673px; position: relative; width: 1196px; max-width: 100%; will-change: transform, opacity; } @media only screen and (min-width: 768px) { .site-main .knowUsMore .card__image { z-index: 1; transform-style: preserve-3d; backface-visibility: hidden; } } .site-main .knowUsMore .card__image--title-in-mobile { display: none; justify-content: center; align-items: center; color: #fff; background-color: #0016f8; border-radius: 50%; width: 96px; height: 96px; position: absolute; left: 50%; text-align: center; top: 50%; transform: translateX(-50%) translateY(-50%); font-size: 12px; font-weight: 600; font-variation-settings: "wght" 600; text-transform: uppercase; } @media only screen and (max-width: 767.98px) { .site-main .knowUsMore .card__image--title-in-mobile { display: flex; } } @media only screen and (max-width: 767.98px) { .site-main .knowUsMore .card__image { height: 202px; background-color: #161616; } } .site-main .knowUsMore .card__image img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; transform: scale(1.2); } @media only screen and (min-width: 768px) { .site-main .knowUsMore .card__image img { transform-style: preserve-3d; backface-visibility: hidden; } } @media only screen and (max-width: 767.98px) { .site-main .knowUsMore .card__image img { height: 100%; width: 78%; } } .site-main .knowUsMore .card__overload { width: 403px; position: absolute; bottom: 80px; right: 0; } @media only screen and (max-width: 767.98px) { .site-main .knowUsMore .card__overload { position: static; margin-top: 8px; width: 100%; } } @media only screen and (min-width: 768px) { .site-main .knowUsMore .card__overload { z-index: 2; transform-style: preserve-3d; backface-visibility: hidden; will-change: transform; pointer-events: none; } } @media only screen and (min-width: 768px) { .site-main .knowUsMore .card__overload--inside { transform-style: preserve-3d; backface-visibility: hidden; } } .site-main .knowUsMore .card__overload--inside h2 { color: #fff; font-size: 64px; font-weight: 759; font-variation-settings: "wght" 759; line-height: 72px; letter-spacing: 0.96px; margin-bottom: 16px; letter-spacing: -4%; } @media only screen and (max-width: 767.98px) { .site-main .knowUsMore .card__overload--inside h2 { margin-bottom: 4px; font-size: 24px; font-weight: 759; font-variation-settings: "wght" 759; line-height: 32px; letter-spacing: -0.96px; } } .site-main .knowUsMore .card__overload--inside p { color: #FFFFFF; font-size: 16px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 24px; } @media only screen and (max-width: 767.98px) { .site-main .knowUsMore .card__overload--inside p { font-size: 12px; line-height: 20px; } } @media only screen and (max-width: 767.98px) { .site-main .doItOnline { display: none; } } .site-main .doItOnline .rowWrapper { transform: rotate(-5deg); transition: all 0.5s cubic-bezier(0.74, 0.06, 0.4, 0.92); } .site-main .doItOnline .rowWrapper .scroll-content { flex-wrap: nowrap; position: relative; display: flex; pointer-events: none; } .site-main .doItOnline .rowWrapper .scroll-content .doItOnlineInside { display: flex; white-space: nowrap; align-items: center; gap: 24px; margin: 0 12px; } .site-main .doItOnline .rowWrapper .scroll-content .doItOnlineInside span { font-size: 120px; font-weight: 700; font-variation-settings: "wght" 700; line-height: 120px; display: block; background: linear-gradient(180deg, #0016f8 0px, rgba(255, 255, 255, 0.3)); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: #000; -webkit-text-stroke: 5px transparent; } .site-main .doItOnline .rowWrapper .scroll-content .doItOnlineInside img { display: block; transform-origin: center center; } .site-main .doItOnline .rowWrapper + .rowWrapper { margin-top: -48px; opacity: 1; transform: rotate(4deg); } .site-main .doItOnline .rowWrapper.first { filter: blur(6px); } .site-main .doItOnline .rowWrapper:hover { filter: blur(0); } .site-main .doItOnline .rowWrapper:hover + .rowWrapper { filter: blur(6px); } .site-main .carouselDotLine { position: relative; padding-top: 240px; padding-bottom: 240px; } @media only screen and (max-width: 767.98px) { .site-main .carouselDotLine { padding-top: 0; padding-bottom: 64px; } .site-main .carouselDotLine .sectionTitle2 { padding-left: 16px; } .site-main .carouselDotLine .container { padding-right: 0; padding-left: 0; } } .site-main .carouselDotLine .sectionTitle2 { position: relative; z-index: 41; pointer-events: none; } .site-main .carouselDotLine .mask { position: absolute; top: -500px; left: 0; pointer-events: none; z-index: 3; } @media only screen and (max-width: 767.98px) { .site-main .carouselDotLine .mask { display: none; } } .site-main .carouselDotLine .mask svg { overflow: visible; } .site-main .carouselDotLine .carouselDotLineSlider { position: relative; z-index: 40; } @media only screen and (max-width: 767.98px) { .site-main .carouselDotLine .carouselDotLineSlider { overflow: visible; cursor: grab; } .site-main .carouselDotLine .carouselDotLineSlider.is-dragging { cursor: grabbing; } } .site-main .carouselDotLine .carouselDotLineSlider > .container-sm { padding: 0; max-width: 1236px; overflow: visible; } @media only screen and (max-width: 767.98px) { .site-main .carouselDotLine .carouselDotLineSlider > .container-sm { padding-left: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scroll-padding-left: 16px; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; } .site-main .carouselDotLine .carouselDotLineSlider > .container-sm::-webkit-scrollbar { display: none; } } .site-main .carouselDotLine .carouselDotLineSlider.is-motion-blurring .card__image { overflow: visible; -webkit-filter: url("#blur"); filter: url("#blur"); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside { display: flex; will-change: transform; touch-action: pan-y; } @media only screen and (max-width: 767.98px) { .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside { /* Allow vertical page scroll + horizontal swipe on cards. */ touch-action: pan-x pan-y; padding-right: 16px; } } .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside .card { flex: none; width: 100%; padding: 0 20px; user-select: none; transition: opacity 0.3s ease-out; will-change: transform; } @media only screen and (max-width: 767.98px) { .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside .card { transform: none; padding: 0 16px 0 0; max-width: 320px; opacity: 0.5; scroll-snap-align: start; scroll-snap-stop: always; } } .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside .card .card__case-link { display: block; color: inherit; text-decoration: none; pointer-events: none; } .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside .card.active .card__case-link { pointer-events: auto; } .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside .card__image { width: 100%; aspect-ratio: 16/9; position: relative; overflow: hidden; max-height: 60vh; } @media only screen and (max-width: 767.98px) { .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside .card__image { height: 200px; } } .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside .card__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; transform-origin: right center; filter: grayscale(100%); } .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside .card__overload { margin-top: 24px; opacity: 0; visibility: hidden; transition: all 300ms 300ms ease-in-out; filter: blur(4px); } @media only screen and (max-width: 767.98px) { .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside .card__overload { visibility: visible; opacity: 1; margin-top: 8px; filter: blur(0px); } } .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside .card__overload h3 { color: #fff; font-size: 32px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 48px; letter-spacing: 0.48px; margin-bottom: 4px; } @media only screen and (max-width: 767.98px) { .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside .card__overload h3 { font-size: 16px; line-height: 24px; margin-bottom: 0; } } .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside .card__overload p { color: rgba(255, 255, 255, 0.6); font-size: 16px; font-style: normal; font-weight: 600; font-variation-settings: "wght" 600; line-height: 24px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside .card__overload p { font-size: 12px; line-height: 24px; } } .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside .card.active { opacity: 1; } .site-main .carouselDotLine .carouselDotLineSlider .carouselDotLineSliderInside .card.active .card__overload { opacity: 1; visibility: visible; filter: blur(0px); } .site-main .carouselDotLine.zIndexIncrease { z-index: 4; } .site-main .carouselDotLine.zIndexIncrease .carouselDotLineSliderInside .card { filter: grayscale(100%); } .site-main .carouselDotLine.zIndexIncrease .carouselDotLineSliderInside .card.prev, .site-main .carouselDotLine.zIndexIncrease .carouselDotLineSliderInside .card.next { opacity: 0.5; } .site-main .carouselDotLine.is-pinned .carouselDotLineSlider { cursor: grab; overflow: visible; } .site-main .carouselDotLine.is-pinned .carouselDotLineSlider.is-dragging { cursor: grabbing; } .site-main .carouselDotLine.is-pinned .carouselDotLineSliderInside .card { transition: opacity 0.3s ease-out; } .site-main .carouselDotLine.is-pinned .carouselDotLineSliderInside .card__image img { transition: none; will-change: transform; } .site-main .digitalEmotion { padding-bottom: 240px; position: relative; min-height: 1705px; } @media only screen and (max-width: 767.98px) { .site-main .digitalEmotion { min-height: 0; padding-bottom: 64px; } } .site-main .digitalEmotion .sectionTitle { max-width: 100%; margin: auto; position: relative; margin-bottom: 200px; } @media only screen and (max-width: 767.98px) { .site-main .digitalEmotion .sectionTitle { margin-bottom: 32px; font-size: 32px; line-height: 44px; position: static; } .site-main .digitalEmotion .sectionTitle span { font-size: 32px; line-height: 44px; } } .site-main .digitalEmotion .sectionTitle .mask { top: auto; bottom: 0; left: -16px; height: 48px; } .site-main .digitalEmotion .sectionTitle svg { position: absolute; bottom: -153px; left: 310px; z-index: -1; } @media only screen and (max-width: 767.98px) { .site-main .digitalEmotion .sectionTitle svg { left: auto; bottom: auto; right: -100px; top: 340px; pointer-events: none; } } .site-main .digitalEmotion .digitalEmpotionBody { display: flex; gap: 120px; align-items: center; max-width: 1920px; margin: auto; padding-left: 16px; position: relative; } .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox { counter-reset: digitalEmotion; position: relative; z-index: 5; flex: 1; } @media only screen and (max-width: 767.98px) { .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox { margin-left: 0; } } .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item { counter-increment: digitalEmotion; padding: 32px 0; position: relative; } .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item:first-child { padding-top: 0; } .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item:last-child { padding-bottom: 0; } @media only screen and (max-width: 767.98px) { .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item { padding: 16px 0; } } .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item h3 { color: #fff; font-size: 72px; font-style: normal; font-weight: 600; font-variation-settings: "wght" 600; line-height: 72px; letter-spacing: -0.04em; opacity: 0.3; transition: 0.5s cubic-bezier(0.2, 1, 0.8, 1); } @media only screen and (max-width: 991px) { .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item h3 { font-size: 50px; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.75px; line-height: 48px; } } @media only screen and (max-width: 767.98px) { .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item h3 { font-size: 24px; font-weight: 759; font-variation-settings: "wght" 759; opacity: 1; line-height: 32px; letter-spacing: -0.48px; } } .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item p { font-size: 16px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 28px; text-align: left; margin-top: 16px; max-width: 657px; overflow: hidden; display: none; } @media only screen and (max-width: 767.98px) { .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item p { font-size: 12px; line-height: 20px; max-width: 100%; margin-top: 8px; } } .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item .line { display: block; height: 1px; width: 100%; position: absolute; left: 0; bottom: 0; background: #e0e6ea; opacity: 0.3; transition: 0.5s cubic-bezier(0.2, 1, 0.8, 1); } @media only screen and (max-width: 767.98px) { .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item .line { max-width: 100%; } } .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item .line.maxWidth { max-width: 100%; } .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item::before { content: counters(digitalEmotion, ".", decimal-leading-zero); color: #ffffff; font-size: 16px; font-style: normal; font-weight: 600; font-variation-settings: "wght" 600; line-height: 24px; letter-spacing: -0.96px; display: block; } @media only screen and (max-width: 767.98px) { .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item::before { font-size: 10px; line-height: 16px; letter-spacing: normal; } } .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item:last-child { padding-bottom: 0; } .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item:last-child:after { display: none; } .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item:last-child .line { display: none; } .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item:hover h3 { opacity: 1; } .site-main .digitalEmotion .digitalEmpotionBody .digitalEmotionBox__item:hover .line { height: 8px; opacity: 1; } .site-main .digitalEmotion .digitalEmpotionBody .mask { position: absolute; z-index: -1; pointer-events: none; left: 0px; top: -500px; } @media only screen and (max-width: 767.98px) { .site-main .digitalEmotion .digitalEmpotionBody .mask { display: none; } } .site-main .digitalEmotion .digitalEmpotionBody .mask svg { overflow: visible; } .site-main .digitalEmotion .digitalEmpotionBody .mask2 { pointer-events: auto; z-index: 5; margin-left: -420px; position: relative; mix-blend-mode: overlay; } @media only screen and (max-width: 767.98px) { .site-main .digitalEmotion .digitalEmpotionBody .mask2 { display: none; } } .site-main .digitalEmotion .digitalEmpotionBody .mask2 .digitalEmotionGrid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(12, minmax(0, 1fr)); width: 1007px; aspect-ratio: 1; pointer-events: none; } .site-main .digitalEmotion .digitalEmpotionBody .mask2 .digitalEmotionGrid__cell { --border-glow: 0; display: block; min-width: 0; min-height: 0; background: transparent; border: 1px solid rgba(255, 255, 255, calc(0.16 + var(--border-glow) * 0.84)); pointer-events: auto; transform-origin: center center; will-change: transform, border-color; transition: border-color 0.3s cubic-bezier(0.2, 1, 0.8, 1); } .site-main .digitalEmotion .digitalEmpotionBody .mask2 .svgItems { position: absolute; inset: 0; transform: scale(1.034); pointer-events: none; opacity: 0.5; } .site-main .digitalEmotion .digitalEmpotionBody .mask2 .svgItems .inside { aspect-ratio: 1; } .site-main .digitalEmotion .digitalEmpotionBody .mask2 .svgItems svg { width: 100%; height: 100%; position: absolute; inset: 0; pointer-events: none; } .site-main .digitalEmotion .digitalEmpotionBody .mask2 .svgItems svg circle { stroke: rgba(255, 255, 255, 0.5); fill: rgba(255, 255, 255, 0.3); } .site-main .digitalEmotion .digitalEmpotionBody .mask2 .svgItems svg path { stroke: rgba(255, 255, 255, 0.5); fill: rgba(255, 255, 255, 0.3); } .site-main .retainerPlans { --retainer-muted: #B3B3B3; position: relative; z-index: 6; padding-bottom: 240px; overflow: hidden; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans { padding-bottom: 80px; } } .site-main .retainerPlans > .container { position: relative; z-index: 2; } @media only screen and (min-width: 768px) { .site-main .retainerPlans > .container { perspective: 1400px; perspective-origin: 50% 40%; } } .site-main .retainerPlans .sectionTitle2 { margin-bottom: 48px; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans .sectionTitle2 { margin-bottom: 16px; } } .site-main .retainerPlans__mask { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .site-main .retainerPlans__maskBlob { position: absolute; left: -8%; top: 18%; width: min(920px, 70vw); height: min(720px, 58vw); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(0, 22, 248, 0.28) 0%, rgba(77, 83, 249, 0.12) 40%, transparent 72%); filter: blur(64px); opacity: 0.7; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans__maskBlob { left: -30%; top: 8%; width: 120vw; height: 70vw; opacity: 0.45; } } .site-main .retainerPlans__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; } @media only screen and (max-width: 991px) { .site-main .retainerPlans__grid { grid-template-columns: 1fr; gap: 16px; } } .site-main .retainerPlans__card { --glow-x: 50%; --glow-y: 40%; --glow-strength: 0; position: relative; isolation: isolate; min-width: 0; border-radius: 0; will-change: transform; } @media only screen and (min-width: 768px) { .site-main .retainerPlans__card { transform-style: preserve-3d; } } .site-main .retainerPlans__cardGlow { position: absolute; inset: 0; z-index: 4; padding: 1px; border-radius: 0; pointer-events: none; background: radial-gradient(380px circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, calc(0.2 + var(--glow-strength) * 0.95)) 0%, rgba(179, 181, 252, calc(0.12 + var(--glow-strength) * 0.7)) 22%, rgba(0, 22, 248, calc(0.06 + var(--glow-strength) * 0.42)) 44%, transparent 74%), linear-gradient(160deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.14) 45%, rgba(255, 255, 255, 0.22) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .site-main .retainerPlans__cardShine { position: absolute; inset: 1px; z-index: 2; border-radius: 0; pointer-events: none; opacity: calc(var(--glow-strength) * 0.35); mix-blend-mode: soft-light; background: radial-gradient(620px circle at var(--glow-x) var(--glow-y), rgba(255, 255, 255, 0.14) 0%, rgba(245, 247, 248, 0.06) 22%, rgba(128, 132, 251, 0.04) 38%, rgba(0, 22, 248, 0.025) 52%, transparent 72%); } .site-main .retainerPlans__cardBody { position: relative; z-index: 1; display: flex; height: 100%; min-height: 100%; padding: 32px; border-radius: 0; background: rgba(255, 255, 255, 0.1019607843); transform: translateZ(0); flex-wrap: wrap; gap: 40px 24px; } .site-main .retainerPlans__cardBody .retainerPlans__cardRight { flex: 0 0 auto; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans__cardBody .retainerPlans__cardRight { order: -1; } } .site-main .retainerPlans__cardBody .retainerPlans__cardLeft { flex: 1; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans__cardBody .retainerPlans__cardLeft { flex: 0 0 auto; } } .site-main .retainerPlans__cardBody .retainerPlans__cardBottom { flex: 0 0 100%; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans__cardBody .retainerPlans__cardBottom { flex: 0 0 auto; } } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans__cardBody { padding: 32px 16px; gap: 24px; flex-direction: column; } } .site-main .retainerPlans__planName { color: #FFFFFF; font-size: 16px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 28px; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans__planName { line-height: 24px; } } .site-main .retainerPlans__price { display: flex; flex-direction: column; text-align: right; flex-shrink: 0; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans__price { text-align: left; } } .site-main .retainerPlans__priceLabel { color: var(--retainer-muted); font-size: 14px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 16px; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans__priceLabel { font-size: 12px; line-height: 20px; } } .site-main .retainerPlans__priceValue { color: #fff; font-size: 64px; font-weight: 645; font-variation-settings: "wght" 645; line-height: 72px; display: flex; align-items: flex-start; gap: 4px; } .site-main .retainerPlans__priceValue span { font-weight: 645; font-variation-settings: "wght" 645; font-size: 40px; line-height: 56px; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans__priceValue span { font-size: 24px; line-height: 40px; } } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans__priceValue { font-size: 48px; line-height: 56px; } } .site-main .retainerPlans__cardTitle { color: #fff; font-size: 32px; font-weight: 759; font-variation-settings: "wght" 759; line-height: 42px; letter-spacing: -0.03em; margin-bottom: 16px; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans__cardTitle { font-size: 24px; line-height: 32px; margin-bottom: 16px; } } .site-main .retainerPlans__cardDesc { color: var(--retainer-muted); font-size: 14px; font-weight: 500; font-variation-settings: "wght" 500; line-height: 24px; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans__cardDesc { font-size: 12px; line-height: 20px; } } .site-main .retainerPlans__features { list-style: none; margin: 0 0 40px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 12px; flex: 1; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans__features { grid-template-columns: 1fr; margin-bottom: 24px; row-gap: 12px; } } .site-main .retainerPlans__features li { color: #fff; font-size: 14px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 24px; letter-spacing: -0.01em; position: relative; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans__features li { font-size: 12px; line-height: 20px; } } .site-main .retainerPlans__cta { width: 100%; justify-content: center; text-align: center; font-size: 16px; font-weight: 645; font-variation-settings: "wght" 645; letter-spacing: 0.04em; line-height: 32px; text-transform: uppercase; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans__cta { padding-top: 0; padding-bottom: 0; font-size: 12px; line-height: 24px; } } .site-main .retainerPlans__cta > span { padding: 10px 0; } .site-main .retainerPlans .retainerPlans__custom { display: flex; flex-direction: column; align-items: center; text-align: center; justify-content: center; width: 740px; max-width: 100%; padding-top: 32px; margin-top: 48px; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans .retainerPlans__custom { padding-top: 0; } } .site-main .retainerPlans .retainerPlans__custom--title { font-weight: 759; font-variation-settings: "wght" 759; font-size: 32px; line-height: 42px; letter-spacing: -2%; text-align: center; margin-bottom: 16px; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans .retainerPlans__custom--title { font-size: 24px; line-height: 36px; margin-bottom: 8px; } } .site-main .retainerPlans .retainerPlans__custom--desc { color: var(--retainer-muted); margin-bottom: 16px; font-size: 14px; line-height: 24px; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans .retainerPlans__custom--desc { line-height: 20px; } } .site-main .retainerPlans .retainerPlans__custom--cta { width: fit-content; } @media only screen and (max-width: 767.98px) { .site-main .retainerPlans .retainerPlans__custom--cta { width: 100%; } } .page-template-template-about .maskBody.dotline-magnetic { display: none; } .page-template-template-about .site-main .knowUsMore .card { padding-left: 0; } .page-template-template-about #smooth-wrapper, .page-template-template-about #smooth-content, .page-template-template-about #page { overflow: visible; } @media only screen and (max-width: 767.98px) { .page-template-template-about .dotlineFooter .mask { display: none; } } .aboutOurStory { padding-top: 32px; padding-bottom: 80px; } @media only screen and (max-width: 767.98px) { .aboutOurStory { padding-top: 0; padding-bottom: 64px; } } .aboutOurStory .aboutOurStoryIn { display: flex; gap: 56px; align-items: flex-start; } @media only screen and (max-width: 1199px) { .aboutOurStory .aboutOurStoryIn { gap: 32px; } } @media only screen and (max-width: 991px) { .aboutOurStory .aboutOurStoryIn { flex-direction: column; } } @media only screen and (max-width: 767.98px) { .aboutOurStory .aboutOurStoryIn { gap: 8px; } } .aboutOurStory .aboutOurStoryIn__titleWrap { flex: 0 0 657px; max-width: 657px; align-self: flex-start; position: sticky; top: 152px; } @media only screen and (max-width: 991px) { .aboutOurStory .aboutOurStoryIn__titleWrap { flex: unset; max-width: unset; position: static; top: auto; } } .aboutOurStory .aboutOurStoryIn__title { width: 100%; } .aboutOurStory .aboutOurStoryIn__title .sectionTitle5 { margin-top: 16px; } @media only screen and (max-width: 991px) { .aboutOurStory .aboutOurStoryIn__title .sectionTitle5 { margin-top: 0; } } .aboutOurStory .aboutOurStoryIn__description { padding-top: 56px; flex: 1; } @media only screen and (max-width: 991px) { .aboutOurStory .aboutOurStoryIn__description { flex: unset; } } @media only screen and (max-width: 767.98px) { .aboutOurStory .aboutOurStoryIn__description { padding-top: 0; } } .aboutOurStory .aboutOurStoryIn__description p { margin-bottom: 24px; color: #fff; font-size: 16px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 28px; } @media only screen and (max-width: 767.98px) { .aboutOurStory .aboutOurStoryIn__description p { font-size: 12px; line-height: 20px; margin-bottom: 8px; } } .aboutOurStory .aboutOurStoryIn__description p:last-of-type { margin-bottom: 0; } .aboutOurStory .aboutOurStoryIn__numbers { margin-top: 80px; display: flex; } @media only screen and (max-width: 767.98px) { .aboutOurStory .aboutOurStoryIn__numbers { margin-top: 32px; } } .aboutOurStory .aboutOurStoryIn__numbers--item { position: relative; flex: 0 0 33.33%; max-width: 33.33%; display: flex; justify-content: center; align-items: center; gap: 8px; flex-direction: column; text-align: center; } @media only screen and (max-width: 767.98px) { .aboutOurStory .aboutOurStoryIn__numbers--item { gap: 4px; } } .aboutOurStory .aboutOurStoryIn__numbers--item b { color: #fff; font-size: 32px; font-weight: 759; font-variation-settings: "wght" 759; letter-spacing: -0.64px; font-style: normal; line-height: normal; } @media only screen and (max-width: 767.98px) { .aboutOurStory .aboutOurStoryIn__numbers--item b { font-size: 18px; letter-spacing: -0.36px; } } .aboutOurStory .aboutOurStoryIn__numbers--item span { color: rgba(255, 255, 255, 0.7); font-size: 14px; font-style: normal; font-weight: 600; font-variation-settings: "wght" 600; line-height: 24px; } @media only screen and (max-width: 767.98px) { .aboutOurStory .aboutOurStoryIn__numbers--item span { line-height: 16px; font-size: 10px; } } .aboutOurStory .aboutOurStoryIn__numbers--item:after { position: absolute; right: 0; width: 1px; height: 98px; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 47.92%, rgba(255, 255, 255, 0) 100%); opacity: 0.3; display: block; content: ""; top: 50%; transform: translateY(-50%); } @media only screen and (max-width: 767.98px) { .aboutOurStory .aboutOurStoryIn__numbers--item:after { height: 64px; } } .aboutOurStory .aboutOurStoryIn__numbers--item:last-child:after { display: none; } .aboutPageBanner { position: relative; overflow: hidden; } @media only screen and (max-width: 767.98px) { .aboutPageBanner { display: none; } } .aboutPageBanner__picture { display: block; width: 100%; object-fit: cover; object-position: center center; transform: scale(1.2); transform-origin: center center; will-change: transform; } @media only screen and (max-width: 991px) { .aboutPageBanner__picture { min-height: 600px; } } .aboutPageBanner__title { position: absolute; z-index: 1; right: 0; width: 100%; bottom: 132px; } .aboutPageBanner__title--icon { position: absolute; left: 16px; bottom: -132px; transform: translateX(-50%) translateY(50%); z-index: 1; } .aboutPageBanner__title--icon svg { animation: dotlineRotation 20s infinite linear; } @media only screen and (max-width: 1560px) { .aboutPageBanner__title--icon { transform: translateX(0) translateY(50%); } } .aboutPageBanner__title--in { display: flex; justify-content: flex-end; } .aboutPageBanner__title--in h3 { color: #fff; font-size: 100px; font-style: normal; font-weight: 645; font-variation-settings: "wght" 645; letter-spacing: -6px; line-height: 96px; max-width: 1061px; } @media only screen and (max-width: 991px) { .aboutPageBanner__title--in h3 { font-size: 64px; font-weight: 759; font-variation-settings: "wght" 759; line-height: 72px; letter-spacing: -2.56px; } } .aboutPageBanner:before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: calc(100% - 132px); display: block; pointer-events: none; background: linear-gradient(180deg, #000 10.91%, rgba(0, 0, 0, 0) 100%); z-index: 2; pointer-events: none; } .aboutPageInfo { position: relative; padding-top: 336px; padding-bottom: 240px; } @media only screen and (max-width: 767.98px) { .aboutPageInfo { padding-top: 0; padding-bottom: 64px; } } .aboutPageInfo__lines { position: absolute; right: 0; top: 0; pointer-events: none; z-index: 1; width: 100%; } .aboutPageInfo__lines svg { display: block; width: 100%; height: auto; } @media only screen and (max-width: 767.98px) { .aboutPageInfo__lines { display: none; } } .aboutPageInfo .mask { z-index: 0; left: 0; right: 0; max-width: 100%; top: -336px; pointer-events: none; position: absolute; } .aboutPageInfo .mask svg { overflow: visible; } .aboutPageInfo .mask svg:nth-child(1) { display: block; margin-top: -400px; } @media only screen and (max-width: 767.98px) { .aboutPageInfo .mask svg:nth-child(1) { display: none; } } .aboutPageInfo .mask svg:nth-child(2) { display: none; } @media only screen and (max-width: 767.98px) { .aboutPageInfo .mask svg:nth-child(2) { display: block; } } .aboutPageInfo__details { display: flex; gap: 126px; align-items: center; } @media only screen and (max-width: 1199px) { .aboutPageInfo__details { gap: 32px; } } @media only screen and (max-width: 991px) { .aboutPageInfo__details { align-items: flex-start; } } @media only screen and (max-width: 767.98px) { .aboutPageInfo__details { gap: 16px; flex-direction: row-reverse; } } .aboutPageInfo__details--image { flex: 0 0 451px; max-width: 451px; width: 451px; height: auto; } .aboutPageInfo__details--image svg { display: block; width: 100%; height: auto; } .aboutPageInfo__details--image-in_mobile { display: none; } @media only screen and (max-width: 991px) { .aboutPageInfo__details--image { flex: 0 0 160px; max-width: 160px; width: 160px; margin-top: 240px; display: none; } .aboutPageInfo__details--image-in_mobile { display: block; } } @media only screen and (max-width: 767.98px) { .aboutPageInfo__details--image { flex: 0 0 78px; max-width: 78px; width: 78px; height: 74.541px; margin-top: 96px; } } .aboutPageInfo__details--description .sectionTitle5 { margin-bottom: 24px; margin-top: 16px; } @media only screen and (max-width: 767.98px) { .aboutPageInfo__details--description .sectionTitle5 { margin-bottom: 8px; margin-top: 0; } } .aboutPageInfo__details--description p { color: #fff; font-size: 16px; font-style: normal; font-weight: 400; font-variation-settings: "wght" 400; line-height: 28px; } @media only screen and (max-width: 767.98px) { .aboutPageInfo__details--description p { font-size: 12px; line-height: 20px; } } .aboutPageInfo__details:nth-child(2n) { flex-direction: row-reverse; } .aboutPageInfo__svg { position: absolute; top: -336px; left: -135px; transform: translateY(-50%); } @media only screen and (max-width: 767.98px) { .aboutPageInfo__svg { display: none; } } .aboutPageInfoList { gap: 160px; display: flex; flex-direction: column; } @media only screen and (max-width: 991px) { .aboutPageInfoList { gap: 80px; } } @media only screen and (max-width: 767.98px) { .aboutPageInfoList { gap: 64px; } } .aboutPageInfoClients { padding-bottom: 240px; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); position: relative; z-index: 2; } @media only screen and (max-width: 767.98px) { .aboutPageInfoClients { padding-bottom: 64px; } } .aboutPageInfoClients .sectionTitle5 { margin-bottom: 80px; margin-top: 16px; } @media only screen and (max-width: 767.98px) { .aboutPageInfoClients .sectionTitle5 { margin-bottom: 32px; margin-top: 0; } } .aboutPageInfoClients__list { width: 100%; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 80px 74px; } @media only screen and (max-width: 991px) { .aboutPageInfoClients__list { gap: 60px 32px; } } @media only screen and (max-width: 767.98px) { .aboutPageInfoClients__list { gap: 60px 8px; } } .aboutPageInfoClients__list li { width: 160px; } .aboutPageInfoClients__list li img, .aboutPageInfoClients__list li svg, .aboutPageInfoClients__list li .about-draw-svg { display: block; max-width: 100%; transition: opacity 0.3s ease-in-out; } .aboutPageInfoClients__list li:hover img, .aboutPageInfoClients__list li:hover svg { opacity: 1 !important; } @media only screen and (max-width: 767.98px) { .aboutPageInfoClients__list li { width: 109px; } } .aboutPageInfoClients__list:hover li img { opacity: 0.5; } .aboutPagePlayGame { padding-bottom: 240px; background: #000; position: relative; z-index: 2; overflow: hidden; } @media only screen and (max-width: 767.98px) { .aboutPagePlayGame { display: none; } } .aboutPagePlayGame__title { font-size: 120px; font-weight: 900; font-variation-settings: "wght" 900; letter-spacing: -7.2px; line-height: 120px; color: #fff; margin-bottom: 120px; } @media only screen and (max-width: 991px) { .aboutPagePlayGame__title { font-size: 64px; font-weight: 759; font-variation-settings: "wght" 759; line-height: 72px; letter-spacing: -2.56px; } } .aboutPagePlayGame__sqaures { display: flex; position: relative; bottom: 0; left: 0; right: 0; flex-wrap: nowrap; z-index: 1000; pointer-events: none; } @media (max-width: 767.98px) { .aboutPagePlayGame__sqaures { display: none; } } .aboutPagePlayGame__sqaures div { background: #0016f8; margin-right: 237px; width: 94px; height: 451px; flex: 0 0 94px; transform-origin: 100% 100%; position: relative; will-change: transform; backface-visibility: hidden; } .aboutPagePlayGame__sqaures div:nth-child(n+4) { left: -32px; } .aboutPageOurTeams { background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, #000000 100%); position: relative; z-index: 2; } @media only screen and (max-width: 767.98px) { .aboutPageOurTeams { margin-bottom: 64px; } } .aboutPageOurTeams__title { margin-bottom: 80px; } @media only screen and (max-width: 767.98px) { .aboutPageOurTeams__title { margin-bottom: 32px; } } .aboutPageOurTeams__title .sectionTitle5 { max-width: 926px; font-weight: 645; font-variation-settings: "wght" 645; margin-top: 16px; } @media only screen and (max-width: 767.98px) { .aboutPageOurTeams__title .sectionTitle5 { font-weight: 759; font-variation-settings: "wght" 759; margin-top: 0; } } .aboutPageOurTeams__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 14px; padding: 0; list-style: none; } @media only screen and (max-width: 767.98px) { .aboutPageOurTeams__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } } @media (hover: hover) and (pointer: fine) { .aboutPageOurTeams__list:has(li:hover) li:not(:hover) { opacity: 0.3; } } .aboutPageOurTeams__list--item { display: flex; flex-direction: column; } .aboutPageOurTeams__list--item .aboutPageOurTeams__list--image { overflow: hidden; margin-bottom: 8px; } .aboutPageOurTeams__list--item .aboutPageOurTeams__list--image img { width: 100%; display: block; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } .aboutPageOurTeams__list--item .aboutPageOurTeams__list--text h5 { font-size: 32px; font-weight: 759; font-variation-settings: "wght" 759; letter-spacing: -0.64px; line-height: 48px; font-style: normal; color: #fff; } @media only screen and (max-width: 767.98px) { .aboutPageOurTeams__list--item .aboutPageOurTeams__list--text h5 { margin-bottom: 4px; font-size: 16px; line-height: 24px; letter-spacing: -0.32px; } } .aboutPageOurTeams__list--item .aboutPageOurTeams__list--text h6 { color: #fff; font-size: 16px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 28px; } @media only screen and (max-width: 767.98px) { .aboutPageOurTeams__list--item .aboutPageOurTeams__list--text h6 { font-size: 12px; line-height: 16px; } } .aboutPageOurTeams__list li { transition: opacity 0.45s ease; } @media (hover: hover) and (pointer: fine) { .aboutPageOurTeams__list li:hover .aboutPageOurTeams__list--image img { transform: scale(1.05); } } .worksPage { padding-top: 144px; padding-bottom: 240px; position: relative; z-index: 3; } @media only screen and (max-width: 767.98px) { .worksPage { padding-top: 64px; padding-bottom: 64px; } } .worksPage:not(.is-anim-ready) { pointer-events: none; } .worksPageItems { display: flex; flex-direction: column; gap: 0; } .worksPageItems__item { padding-bottom: 80px; border-bottom: 1px solid rgba(224, 230, 234, 0.3); display: flex; gap: 16px; position: relative; z-index: 6; } .worksPageItems__item + .worksPageItems__item { margin-top: 80px; } @media only screen and (max-width: 991px) { .worksPageItems__item { flex-direction: column; } } @media only screen and (max-width: 767.98px) { .worksPageItems__item { gap: 8px; padding-bottom: 0; border-bottom: none; } .worksPageItems__item + .worksPageItems__item { margin-top: 64px; } } .worksPageItems__item:nth-child(even), .worksPageItems__item.is-alt { flex-direction: row-reverse; } @media only screen and (max-width: 991px) { .worksPageItems__item:nth-child(even), .worksPageItems__item.is-alt { flex-direction: column; } } .worksPageItems__item:nth-child(even) .worksPageItems__item--image, .worksPageItems__item.is-alt .worksPageItems__item--image { flex: 0 0 792px; aspect-ratio: 792/673; } @media only screen and (max-width: 991px) { .worksPageItems__item:nth-child(even) .worksPageItems__item--image, .worksPageItems__item.is-alt .worksPageItems__item--image { flex: 0 0 auto; aspect-ratio: 16/9; } } .worksPageItems__item:nth-child(even) .worksPageItems__item--details, .worksPageItems__item.is-alt .worksPageItems__item--details { align-items: flex-end; text-align: right; } @media only screen and (max-width: 991px) { .worksPageItems__item:nth-child(even) .worksPageItems__item--details, .worksPageItems__item.is-alt .worksPageItems__item--details { align-items: unset; text-align: unset; } } .worksPageItems__item:last-child { border-bottom: none; } .worksPageItems__item--image { flex: 0 0 1061px; min-width: 0; aspect-ratio: 1061/673; max-height: 673px; } @media only screen and (max-width: 991px) { .worksPageItems__item--image { width: 100%; flex: 0 0 auto; aspect-ratio: 16/9; max-height: 227px; } } .worksPageItems__item--image-reveal { overflow: hidden; height: 100%; } .worksPageItems__item--image-media { overflow: hidden; height: 100%; will-change: transform, opacity; } @media only screen and (min-width: 992px) { .worksPageItems__item--image-media { filter: grayscale(100%); transition: filter 0.3s ease-in-out; } .worksPageItems__item--image-media:hover { filter: grayscale(0%); } .worksPageItems__item--image-media:hover > a { transform: scale(1.1); } } .worksPageItems__item--image a { display: block; height: 100%; will-change: transform; transition: transform 0.3s ease-in-out; } .worksPageItems__item--image img { display: block; width: 100%; max-width: 100%; height: 100%; max-height: none; transform: scale(1.1); transform-origin: top center; transition: none; will-change: transform; object-fit: cover; } @media only screen and (max-width: 991px) { .worksPageItems__item--image img { width: 100%; transform: scale(1); } } .worksPageItems__item--details { flex: 0 0 411px; max-width: 411px; display: flex; flex-direction: column; padding-top: 16px; padding-bottom: 24px; color: #fff; } .worksPageItems__item--details-index { margin-bottom: auto; font-size: 16px; font-style: normal; font-weight: 600; font-variation-settings: "wght" 600; line-height: 24px; } @media only screen and (max-width: 767.98px) { .worksPageItems__item--details-index { display: none; } } @media only screen and (max-width: 991px) { .worksPageItems__item--details { flex: unset; max-width: unset; width: 100%; padding-top: 0; padding-bottom: 0; } } .worksPageItems__item--details-title { margin-top: 16px; margin-bottom: 16px; font-size: 64px; font-weight: 645; font-variation-settings: "wght" 645; line-height: 72px; letter-spacing: -2.56px; } @media only screen and (max-width: 767.98px) { .worksPageItems__item--details-title { font-size: 24px; font-weight: 759; font-variation-settings: "wght" 759; letter-spacing: -0.96px; line-height: 32px; margin-top: 0; margin-bottom: 4px; } } .worksPageItems__item--details-title a { color: #fff; } .worksPageItems__item--details-description { font-size: 16px; line-height: 24px; } @media only screen and (max-width: 767.98px) { .worksPageItems__item--details-description { font-size: 12px; line-height: 20px; } } .worksPageItems__char, .worksPageItems__title-char { display: inline-block; } .contactPage { padding-top: 138px; padding-bottom: 240px; } @media only screen and (max-width: 767.98px) { .contactPage { padding-top: 64px; padding-bottom: 64px; } } .contactPageDetails { display: flex; gap: 150px; } @media only screen and (max-width: 1199px) { .contactPageDetails { gap: 80px; } } @media only screen and (max-width: 991px) { .contactPageDetails { flex-direction: column; } } @media only screen and (max-width: 767.98px) { .contactPageDetails { gap: 48px; } } .contactPageDetails__form { flex: 1; } .contactPageDetails__info { display: flex; flex-direction: column; gap: 24px; flex: 0 0 49.5%; } @media only screen and (max-width: 1400px) { .contactPageDetails__info { flex: 0 0 36.5%; } } @media only screen and (max-width: 991px) { .contactPageDetails__info { flex: unset; } } @media only screen and (max-width: 767.98px) { .contactPageDetails__info { gap: 0; } } .contactPageDetails__info .sectionTitle5 { max-width: 100%; font-weight: 645; font-variation-settings: "wght" 645; } @media only screen and (max-width: 1199px) { .contactPageDetails__info .sectionTitle5 { font-size: 50px; line-height: 64px; } } @media only screen and (max-width: 767.98px) { .contactPageDetails__info .sectionTitle5 { font-size: 24px; line-height: 32px; margin-bottom: 8px; font-weight: 759; font-variation-settings: "wght" 759; } } .contactPageDetails__info--description { font-size: 16px; font-weight: 500; font-variation-settings: "wght" 500; line-height: 28px; color: rgba(255, 255, 255, 0.7); } @media only screen and (max-width: 767.98px) { .contactPageDetails__info--description { margin-bottom: 24px; line-height: 20px; font-size: 12px; color: rgba(255, 255, 255, 0.5); } } @media only screen and (max-width: 767.98px) { .contactPageDetails__info--link { margin-bottom: 16px; } .contactPageDetails__info--link:last-child { margin-bottom: 0; } } .contactPageDetails__info--link h6 { margin-bottom: 2px; color: rgba(255, 255, 255, 0.5); font-size: 18px; font-style: normal; font-weight: 645; font-variation-settings: "wght" 645; line-height: normal; } @media only screen and (max-width: 767.98px) { .contactPageDetails__info--link h6 { margin-bottom: 0; font-size: 12px; } } .contactPageDetails__info--link a { color: #fff; font-size: 24px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 32px; letter-spacing: -0.24px; } @media only screen and (max-width: 767.98px) { .contactPageDetails__info--link a { font-size: 16px; letter-spacing: -0.16px; } } .contactPageDetails__info--link ul { padding: 0; list-style: none; display: flex; gap: 85px; } @media only screen and (max-width: 767.98px) { .contactPageDetails__info--link ul { gap: 64px; } } .contactPageDetails__info--link ul li b { display: block; margin-top: 4px; color: #fff; font-size: 14px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 24px; } @media only screen and (max-width: 767.98px) { .contactPageDetails__info--link ul li b { margin-top: 0; font-size: 10px; color: rgba(255, 255, 255, 0.5); line-height: 16px; } } .contactPageDetails__info--title { color: #fff; font-size: 32px; font-style: normal; font-weight: 759; font-variation-settings: "wght" 759; line-height: normal; letter-spacing: -0.32px; } @media only screen and (max-width: 767.98px) { .contactPageDetails__info--title { font-size: 24px; line-height: 32px; letter-spacing: -0.96px; margin-bottom: 8px; } } .contactPageDetails__info--career { margin-bottom: 8px; } @media only screen and (max-width: 767.98px) { .contactPageDetails__info--career { margin-bottom: 24px; } .contactPageDetails__info--career:last-child { margin-bottom: 0; } } .contactPageDetails__info--career ul { list-style: circle; padding-left: 24px; } .contactPageDetails__info--career ul li { color: #fff; font-size: 16px; font-style: normal; line-height: 24px; list-style: disc; } @media only screen and (max-width: 767.98px) { .contactPageDetails__info--career ul li { font-size: 12px; line-height: 20px; } } .contactPageForm { display: flex; flex-direction: column; gap: 32px; } @media only screen and (max-width: 767.98px) { .contactPageForm { gap: 16px; } } .contactPageForm__foot { display: flex; gap: 16px; align-items: flex-start; } @media only screen and (max-width: 767.98px) { .contactPageForm__foot { flex-direction: column; gap: 24px; } .contactPageForm__foot .btn { width: 100%; } } .contactPageForm__foot p { color: rgba(255, 255, 255, 0.5); font-size: 16px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 24px; padding-right: 40px; } @media only screen and (max-width: 767.98px) { .contactPageForm__foot p { font-size: 10px; line-height: 16px; padding-right: 0; } } .contactPageForm__foot button { flex: 0 0 auto; } .contactPageInstagram { min-height: 1072px; text-align: center; position: relative; z-index: 2; } @media only screen and (max-width: 767.98px) { .contactPageInstagram { display: none; } } .contactPageInstagram .sectionTitle5 { margin-bottom: 64px; max-width: 100%; text-align: center; } @media only screen and (max-width: 767.98px) { .contactPageInstagram .sectionTitle5 { margin-bottom: 32px; } } .contactPageInstagram .insideInstagramAPI { position: relative; margin-bottom: -120px; width: 1490px; max-width: 100%; height: 1400px; margin: auto; } .contactPageInstagram .insideInstagramAPI > .streched__link { position: absolute; inset: 0; z-index: 2; } .contactPageInstagram .insideInstagramAPI:after { content: ""; display: block; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%); pointer-events: none; z-index: 3; } .contactInstagramGrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; text-align: left; overflow: hidden; } @media only screen and (max-width: 1199px) { .contactInstagramGrid { gap: 16px; } } .contactInstagramGrid__col { display: flex; flex-direction: column; gap: 32px; } @media only screen and (max-width: 1199px) { .contactInstagramGrid__col { gap: 16px; } } .contactInstagramGrid__card { border-radius: 0; overflow: hidden; background: #ffffff; color: #0a0a0a; will-change: transform, opacity; } .contactInstagramGrid__card--media .contactInstagramGrid__media { margin-top: 16px; } .contactInstagramGrid__card--media .contactInstagramGrid__avatar { background: #0013ff; color: #ffffff; } .contactInstagramGrid__card--media .contactInstagramGrid__link { display: block; position: relative; } .contactInstagramGrid__link { display: flex; flex-direction: column; color: inherit; text-decoration: none; } .contactInstagramGrid__head { display: flex; gap: 16px; padding: 16px; } .contactInstagramGrid__avatar { display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; background: #0013ff; color: #ffffff; } .contactInstagramGrid__avatar svg { display: block; width: 24px; height: auto; } .contactInstagramGrid__text { flex: 1; display: flex; flex-direction: column; } .contactInstagramGrid__username { flex: 1; font-weight: 700; font-variation-settings: "wght" 700; font-size: 15px; line-height: 24px; letter-spacing: -0.16px; } .contactInstagramGrid__username:first-child { color: #0016F8; } .contactInstagramGrid__username:last-child { color: #000000; font-weight: 400; font-variation-settings: "wght" 400; } .contactInstagramGrid__icon { display: grid; flex: 0 0 auto; } .contactInstagramGrid__body { padding: 0 16px 16px 16px; } .contactInstagramGrid__body p { margin: 0; font-size: 16px; color: #000000; font-weight: 400; font-variation-settings: "wght" 400; line-height: 24px; letter-spacing: -0.16px; } .contactInstagramGrid__media img { display: block; width: 100%; height: auto; } .site-main .careersPage { padding-top: 48px; } @media only screen and (max-width: 767.98px) { .site-main .careersPage { padding-bottom: 64px; } } .site-main .careersPage .digitalEmotion { min-height: unset; padding-bottom: 0; } .site-main .careersPage .digitalEmotionBox { margin-left: 0; } .careerPage { padding-top: 72px; } .careerPage .contactPageForm { gap: 8px; } @media only screen and (max-width: 767.98px) { .careerPage .contactPageForm { gap: 16px; } } .careerPage .contactPageForm__foot { flex-direction: column; gap: 32px; } @media only screen and (max-width: 767.98px) { .careerPage .contactPageForm__foot { gap: 24px; } } .careerPage .contactPageForm__foot .btn { margin-left: auto; min-width: 116px; } .careerPage .contactPageForm__foot p { font-size: 14px; color: #fff; } @media only screen and (max-width: 767.98px) { .careerPage .contactPageForm__foot p { font-size: 10px; } } @media only screen and (max-width: 767.98px) { .careerPage { padding-top: 64px; padding-bottom: 64px; } } .site-case-study img { max-width: 100%; } .site-case-study img:not(.site-case-study__bg) { display: block; } .site-case-study__title { margin-bottom: 16px; font-size: 40px; font-weight: 759; font-variation-settings: "wght" 759; line-height: normal; } @media only screen and (max-width: 767.98px) { .site-case-study__title { font-size: 24px; letter-spacing: 0.36px; } } .site-case-study__title > span:not(.dotline-split-word) { font-weight: 400; font-variation-settings: "wght" 400; } .site-case-study__title--v2 { font-size: 24px; font-weight: 700; font-variation-settings: "wght" 700; } .site-case-study__title--v2 > span:not(.dotline-split-word) { font-weight: 400; font-variation-settings: "wght" 400; } .site-case-study__description { font-size: 18px; font-weight: 467; font-variation-settings: "wght" 467; line-height: 32px; opacity: 0.7; } @media only screen and (max-width: 767.98px) { .site-case-study__description { font-size: 14px; line-height: 28px; letter-spacing: -0.84px; } } .site-case-study__description p + p { margin-top: 12px; } .site-case-study__bg { display: block; position: absolute; top: 0; left: 0; pointer-events: none; z-index: 0; max-width: unset !important; height: auto; object-fit: cover; object-position: center; width: 100%; height: 100%; } @media only screen and (max-width: 767.98px) { .site-case-study__bg { display: none; } } .site-case-study__bg--mobile { display: none; } @media only screen and (max-width: 767.98px) { .site-case-study__bg--mobile { display: block; } } .case-study-lock { pointer-events: none; position: absolute; width: 100%; height: 100%; margin-left: auto; margin-right: auto; display: flex; justify-content: center; align-items: center; gap: 8px; flex-direction: column; left: 0; top: 0; z-index: 1; padding-bottom: 73px; } @media only screen and (max-width: 767.98px) { .case-study-lock { gap: 4px; padding-bottom: 55px; } } .case-study-lock p { max-width: 522px; color: #b70808; font-size: 16px; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: -0.96px; line-height: 32px; text-align: center; position: relative; z-index: 1; } @media only screen and (max-width: 767.98px) { .case-study-lock p { font-size: 12px; letter-spacing: -0.72px; line-height: 22px; max-width: 235px; } } .case-study-lock svg { position: relative; z-index: 1; } @media only screen and (max-width: 767.98px) { .case-study-lock svg { width: 28px; height: 28px; } } .case-study-lock.case-study-lock--with_lines:before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 3px; height: 100%; background: #0016f8; pointer-events: none; } @media only screen and (max-width: 767.98px) { .case-study-lock.case-study-lock--with_lines:before { width: 1.353px; } } .case-study-lock.case-study-lock--with_lines:after { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 3px; background: #0016f8; pointer-events: none; } @media only screen and (max-width: 767.98px) { .case-study-lock.case-study-lock--with_lines:after { height: 1.353px; } } .site-case-next { padding: 24px; border-radius: 50%; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; text-align: left; margin-left: auto; margin-right: auto; color: #0016F8; font-size: 16px; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.48px; line-height: 21px; cursor: pointer; position: relative; z-index: 2; will-change: transform; text-decoration: none; text-align: center; text-transform: uppercase; } @media only screen and (max-width: 767.98px) { .site-case-next { width: 120px; height: 120px; padding: 16px 12px; font-size: 14px; line-height: 19px; margin-top: 40px; } } .site-case-next:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; border-radius: 50%; z-index: -1; transition: transform 0.3s ease; } .site-case-next:before { content: ""; position: absolute; top: -16px; right: -16px; left: -16px; bottom: -16px; } .site-case-next:hover:after { transform: scale(1.1); } .case-study-hero { position: relative; width: 100%; color: #fff; } @media only screen and (max-width: 767.98px) { .case-study-hero { overflow: hidden; } } .case-study-hero .heroDotline__line { display: block; } .case-study-hero__content { color: var(--White, #fff); display: flex; align-items: flex-end; gap: 160px; justify-content: space-between; position: relative; z-index: 5; padding-right: 135px; min-height: 100vh; padding-bottom: 120px; } @media only screen and (max-width: 767.98px) { .case-study-hero__content { gap: 16px; min-height: auto; flex-direction: column; padding-right: 0; padding-bottom: 0; } } .case-study-hero__content .sectionTitle, .case-study-hero__content .sectionTitle .heroDotline__line { font-size: 90px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 96px; letter-spacing: 0%; max-width: unset; margin-bottom: 0; } @media only screen and (max-width: 991px) { .case-study-hero__content .sectionTitle, .case-study-hero__content .sectionTitle .heroDotline__line { font-size: 48px; line-height: 56px; font-weight: 300; font-variation-settings: "wght" 300; } } .case-study-hero__content .sectionTitle > span:not(.dotline-split-word), .case-study-hero__content .sectionTitle .heroDotline__line > span:not(.dotline-split-word), .case-study-hero__content .sectionTitle .heroDotline__line > span:not(.dotline-split-word), .case-study-hero__content .sectionTitle .heroDotline__line .heroDotline__line > span:not(.dotline-split-word) { font-size: 88px; font-weight: 645; font-variation-settings: "wght" 645; letter-spacing: 1.32px; } @media only screen and (max-width: 991px) { .case-study-hero__content .sectionTitle > span:not(.dotline-split-word), .case-study-hero__content .sectionTitle .heroDotline__line > span:not(.dotline-split-word), .case-study-hero__content .sectionTitle .heroDotline__line > span:not(.dotline-split-word), .case-study-hero__content .sectionTitle .heroDotline__line .heroDotline__line > span:not(.dotline-split-word) { font-size: 48px; } } .case-study-hero__content .sectionTitle .mask, .case-study-hero__content .sectionTitle .heroDotline__line .mask { display: block; position: absolute; left: 0; right: 32px; height: 40px; background: rgba(102, 115, 251, 0.8); bottom: 0; z-index: -1; } @media only screen and (max-width: 991px) { .case-study-hero__content .sectionTitle .mask, .case-study-hero__content .sectionTitle .heroDotline__line .mask { display: none; } } .case-study-hero__info { display: flex; flex-direction: column; gap: 24px; } @media only screen and (max-width: 767.98px) { .case-study-hero__info { gap: 4px; } } .case-study-hero__title, .case-study-hero__title .heroDotline__line { font-size: 14px; font-weight: 600; font-variation-settings: "wght" 600; line-height: normal; } @media only screen and (max-width: 767.98px) { .case-study-hero__title, .case-study-hero__title .heroDotline__line { font-weight: 400; font-variation-settings: "wght" 400; } } .case-study-hero__picture { overflow: hidden; position: relative; } @media only screen and (max-width: 767.98px) { .case-study-hero__picture { overflow: visible; } .case-study-hero__picture .container { margin-top: -78px; padding-bottom: 0px; } } .case-study-hero__picture:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%), linear-gradient(0deg, rgba(0, 0, 0, 0) 85.88%, #000000 100%); z-index: 1; } @media only screen and (max-width: 767.98px) { .case-study-hero__picture:before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%), linear-gradient(0deg, rgba(0, 0, 0, 0) 85.88%, #000000 100%); height: 320px; } } .case-study-hero__picture img { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; object-fit: cover; object-position: center; filter: grayscale(100%); } @media only screen and (max-width: 767.98px) { .case-study-hero__picture img { height: 320px; position: static; } } @media only screen and (max-width: 767.98px) { .case-study-hero__picture .case-study-hero__content .case-study-intro__content--details ul { gap: 8px !important; } } @media only screen and (max-width: 767.98px) { .case-study-hero__picture .case-study-hero__content .case-study-intro__content--details ul li { flex-direction: row !important; align-items: center; gap: 8px !important; } .case-study-hero__picture .case-study-hero__content .case-study-intro__content--details ul li .title { font-size: 16px !important; line-height: 24px !important; } .case-study-hero__picture .case-study-hero__content .case-study-intro__content--details ul li .value { font-size: 16px !important; line-height: 24px !important; } } .case-study-hero .case-study-intro { padding-bottom: 160px; } .case-study-hero .case-study-intro .mask { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 3; pointer-events: none; } @media only screen and (max-width: 767.98px) { .case-study-hero .case-study-intro .mask { top: 186px; } } .case-study-hero .case-study-intro .mask svg { width: 100%; overflow: visible; } .case-study-hero .case-study-intro .mask svg:nth-child(1) { display: block; } @media only screen and (max-width: 767.98px) { .case-study-hero .case-study-intro .mask svg:nth-child(1) { display: none; } } .case-study-hero .case-study-intro .mask svg:nth-child(2) { display: none; } @media only screen and (max-width: 767.98px) { .case-study-hero .case-study-intro .mask svg:nth-child(2) { display: block; margin-top: -120px; } } @media only screen and (max-width: 767.98px) { .case-study-hero .case-study-intro { padding-top: 40px; padding-bottom: 48px; margin-top: 0; } } .case-study-hero .case-study-intro__content { padding-right: 135px; display: flex; gap: 160px; justify-content: space-between; position: relative; align-items: flex-end; z-index: 4; } @media only screen and (max-width: 1199px) { .case-study-hero .case-study-intro__content { padding-right: 0; } } @media only screen and (max-width: 767.98px) { .case-study-hero .case-study-intro__content { flex-direction: column; gap: 24px; } } @media only screen and (max-width: 767.98px) { .case-study-hero .case-study-intro__content--info { width: 100%; } } .case-study-hero .case-study-intro__content--info-subtitle { margin-bottom: 4px; color: #0016f8; font-size: 14px; font-weight: 645; font-variation-settings: "wght" 645; } @media only screen and (max-width: 767.98px) { .case-study-hero .case-study-intro__content--info-subtitle { margin-bottom: 4px; color: #3345F9; } } .case-study-hero .case-study-intro__content--details { min-width: 286px; } @media only screen and (max-width: 767.98px) { .case-study-hero .case-study-intro__content--details { min-width: 100%; } } .case-study-hero .case-study-intro__content--details-title { font-size: 24px; letter-spacing: 0.36px; margin-bottom: 24px; font-weight: 600; font-variation-settings: "wght" 600; } .case-study-hero .case-study-intro__content--details-title span { font-weight: 400; font-variation-settings: "wght" 400; letter-spacing: -1.32px; font-size: 22px; } .case-study-hero .case-study-intro__content--details-link { font-size: 16px; display: flex; gap: 4px; } @media only screen and (max-width: 767.98px) { .case-study-hero .case-study-intro__content--details-link { margin-top: 24px; background: transparent; height: 56px; text-align: left; justify-content: flex-start; padding-left: 0; background: url('data:image/svg+xml,') right center no-repeat; } .case-study-hero .case-study-intro__content--details-link > span:before { display: none; } } .case-study-hero .case-study-intro__content--details-link b { letter-spacing: 0.24px; font-weight: 600; font-variation-settings: "wght" 600; font-size: 16px; } .case-study-hero .case-study-intro__content--details ul { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; } @media only screen and (max-width: 767.98px) { .case-study-hero .case-study-intro__content--details ul { margin-bottom: 0; gap: 16px !important; } } .case-study-hero .case-study-intro__content--details ul li { display: flex; flex-direction: column; font-size: 16px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 24px; gap: 2px; } @media only screen and (max-width: 767.98px) { .case-study-hero .case-study-intro__content--details ul li { gap: 0px !important; } } .case-study-hero .case-study-intro__content--details ul li span.title { font-weight: 645; font-variation-settings: "wght" 645; } @media only screen and (max-width: 767.98px) { .case-study-hero .case-study-intro__content--details ul li span.title { font-size: 12px; } } .case-study-hero .case-study-intro__content--details ul li span.value { font-weight: 467; font-variation-settings: "wght" 467; opacity: 0.7; } @media only screen and (max-width: 767.98px) { .case-study-hero .case-study-intro__content--details ul li span.value { font-size: 16px; line-height: 32px; } } .case-study-image-frame { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-image-frame { padding-top: 48px; padding-bottom: 48px; } } .case-study-image-frame img { border-radius: 16px; border: 20px solid var(--Gray-Gray---10, #eaecec); width: 100%; } @media only screen and (max-width: 767.98px) { .case-study-image-frame img { border-radius: 3.585px; border-width: 4.481px; } } .case-study-image-frame .case-study-image-frame__over { position: relative; z-index: 2; max-width: 100%; height: auto; margin-top: -21%; } .case-study-image-frame.case-study-image-frame--v2 img { margin-left: auto; margin-right: auto; width: auto; border-width: 8px; } @media only screen and (max-width: 767.98px) { .case-study-image-frame.case-study-image-frame--v2 img { border-radius: 4.253px; border-width: 2.126px; } } .case-study-image-frame.case-study-image-frame--v3 { background: #fafafa; position: relative; z-index: 2; } .case-study-image-frame:has(.farako-comment-box) .container { position: relative; padding-right: 124px; } @media only screen and (max-width: 991px) { .case-study-image-frame:has(.farako-comment-box) .container { padding-right: 58px; padding-left: 58px; } } .case-study-image-frame:has(.case-study-image-frame__over) { position: relative; } .case-study-image-frame:has(.case-study-image-frame__over):before { pointer-events: none; content: ""; position: absolute; left: 0; width: 100%; height: 43.8%; display: block; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 61.46%); bottom: 20%; z-index: 1; } .case-study-image-frame:has(.case-study-image-frame__over) .container { position: relative; } .case-study-image-frame:has(.damn-plastic-image-top) .container, .case-study-image-frame:has(.damn-plastic-image-bottom) .container { position: relative; } .case-study-image-frame:has(.damn-plastic-image-top) .container .damn-plastic-image-top, .case-study-image-frame:has(.damn-plastic-image-top) .container .damn-plastic-image-bottom, .case-study-image-frame:has(.damn-plastic-image-bottom) .container .damn-plastic-image-top, .case-study-image-frame:has(.damn-plastic-image-bottom) .container .damn-plastic-image-bottom { border-radius: unset; border: unset; width: unset; position: absolute; } .case-study-image-frame:has(.damn-plastic-image-top) .container .damn-plastic-image-top, .case-study-image-frame:has(.damn-plastic-image-bottom) .container .damn-plastic-image-top { right: -3.6%; top: 15%; width: 18.26%; } @media only screen and (max-width: 1800px) { .case-study-image-frame:has(.damn-plastic-image-top) .container .damn-plastic-image-top, .case-study-image-frame:has(.damn-plastic-image-bottom) .container .damn-plastic-image-top { right: 0.4%; } } .case-study-image-frame:has(.damn-plastic-image-top) .container .damn-plastic-image-bottom, .case-study-image-frame:has(.damn-plastic-image-bottom) .container .damn-plastic-image-bottom { left: -3.6%; bottom: -11.2%; width: 20%; } @media only screen and (max-width: 1800px) { .case-study-image-frame:has(.damn-plastic-image-top) .container .damn-plastic-image-bottom, .case-study-image-frame:has(.damn-plastic-image-bottom) .container .damn-plastic-image-bottom { left: 0.4%; bottom: -10.4%; width: 16%; } } .case-study-only-description { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-only-description { padding-top: 48px; padding-bottom: 48px; } } .case-study-only-description .site-case-study__description { max-width: 790px; } @media only screen and (max-width: 767.98px) { .case-study-only-description .site-case-study__description { font-size: 12px; line-height: 20px; letter-spacing: -0.72px; } } .case-study-only-description.case-study-only-description--v2 .site-case-study__description { margin-left: auto; } .case-study-only-description.case-study-only-description--small .site-case-study__description { max-width: 657px; } @media only screen and (max-width: 767.98px) { .case-study-only-description.case-study-only-description--small .site-case-study__description { max-width: 100%; } } .case-study-related-works { padding-top: 160px; padding-bottom: 160px; } .case-study-related-works.force-bg-dark { background: #000; } @media only screen and (max-width: 767.98px) { .case-study-related-works { padding-bottom: 48px; padding-top: 48px; } } .case-study-related-works .site-case-study__title { color: #fff; position: relative; z-index: 2; margin-bottom: 24px; } .case-study-related-works__content { margin-bottom: 100px; display: flex; gap: 16px; position: relative; z-index: 2; } @media only screen and (max-width: 767.98px) { .case-study-related-works__content { margin-bottom: 0; flex-direction: column; } } .case-study-related-works__content--box { flex: 1 1 0; max-width: calc(50% - 16px); position: relative; overflow: hidden; min-height: 244px; clip-path: inset(0px 0px 0px 0px round 0px); transition: clip-path 0.3s ease-in-out; } @media only screen and (max-width: 767.98px) { .case-study-related-works__content--box { flex: unset; width: 100%; min-height: 184px; max-width: 100%; } } .case-study-related-works__content--box-image { position: relative; overflow: hidden; height: 502px; background-color: #0313bc; background-size: cover; background-position: center; background-repeat: no-repeat; } .case-study-related-works__content--box-image:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(0deg, #0313bc, #0313bc); z-index: 2; mix-blend-mode: lighten; pointer-events: none; } .case-study-related-works__content--box-image:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(3, 19, 188, 0) 50%, rgba(3, 19, 188, 0.8) 100%), var(--related-case-image); filter: grayscale(100%); pointer-events: none; } @media only screen and (max-width: 767.98px) { .case-study-related-works__content--box-image { height: 228px; } } .case-study-related-works__content--box-image img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; } .case-study-related-works__content--box-over { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 2; display: flex; justify-content: flex-end; flex-direction: column; color: var(--White, #fff); padding: 48px; pointer-events: none; backdrop-filter: blur(0px); clip-path: inset(20px 20px 20px 20px round 0px); transition: clip-path 0.3s ease-in-out, backdrop-filter 0.3s ease-in-out; } @media only screen and (max-width: 767.98px) { .case-study-related-works__content--box-over { padding: 16px; clip-path: none; } } .case-study-related-works__content--box-over h3 { font-size: 64px; font-weight: 645; font-variation-settings: "wght" 645; line-height: 72px; letter-spacing: -4%; margin-bottom: 16px; } @media only screen and (max-width: 767.98px) { .case-study-related-works__content--box-over h3 { font-size: 16px; font-weight: 759; font-variation-settings: "wght" 759; line-height: 24px; margin-bottom: 0; } } .case-study-related-works__content--box-over p { font-size: 16px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 24px; letter-spacing: 0%; width: 60%; } @media only screen and (max-width: 767.98px) { .case-study-related-works__content--box-over p { width: 100%; font-size: 14px; line-height: 22px; } } @media only screen and (min-width: 768px) { .case-study-related-works__content--box:hover .case-study-related-works__content--box-over { backdrop-filter: blur(16px); clip-path: inset(24px 24px 24px 24px round 0px); } } .case-study-challenge { background-repeat: repeat; padding-top: 160px; padding-bottom: 160px; position: relative; } @media only screen and (max-width: 767.98px) { .case-study-challenge { padding-top: 48px; padding-bottom: 48px; background-image: none !important; } } .case-study-challenge:has(.case-study-eirak-challenge) .case-study-challenge__content { align-items: center; gap: 64px; } .case-study-challenge:has(.case-study-challenge__aluminum) .case-study-challenge__content { gap: 64px; } @media only screen and (max-width: 991px) { .case-study-challenge:has(.case-study-challenge__aluminum) .case-study-challenge__content { gap: 16px; } } @media only screen and (max-width: 767.98px) { .case-study-challenge:has(.case-study-challenge__aluminum) .case-study-challenge__content { gap: 0; } } .case-study-challenge:has(.site-case-study__bg) .case-study-challenge__content { position: relative; z-index: 1; } .case-study-challenge:has(.case-study-challenge__bagzee) .case-study-challenge__content { align-items: center; justify-content: space-between; } @media only screen and (max-width: 1024px) { .case-study-challenge:has(.case-study-challenge__bagzee) .case-study-challenge__content { gap: 24px; } } .case-study-challenge:has(.case-study-challenge__bagzee-mobile-app) .case-study-challenge__content { align-items: center; justify-content: space-between; } .case-study-challenge:has(.case-study-challenge__bagzee-mobile-app) .case-study-challenge__content .case-study-challenge__bagzee-mobile-app svg { pointer-events: none; margin-left: -20%; max-width: 120%; height: auto; } .case-study-challenge:has(.case-study-challenge__yabex) .case-study-challenge__content { align-items: center; justify-content: space-between; } .case-study-challenge:has(.case-study-challenge__yabex) .case-study-challenge__content .case-study-challenge__yabex { position: relative; } .case-study-challenge:has(.case-study-challenge__yabex) .case-study-challenge__content .case-study-challenge__yabex img:nth-child(2) { position: absolute; top: -150px; right: 0; left: 0; margin: auto; z-index: 1; } .case-study-challenge:has(.case-study-challenge__yabex) .case-study-challenge__content .case-study-challenge__yabex img:nth-child(1) { position: relative; z-index: 2; top: 77px; } .case-study-challenge__content { display: flex; gap: 60px; } .case-study-challenge__content:has(.case-study-challenge__circles) { justify-content: space-between; padding-right: 16px; } @media only screen and (max-width: 767.98px) { .case-study-challenge__content:has(.case-study-challenge__circles) { padding-right: 0; } } .case-study-challenge__content:has(.case-study-challenge__ds) { justify-content: space-between; gap: 32px; } @media only screen and (max-width: 767.98px) { .case-study-challenge__content:has(.case-study-challenge__ds) { gap: 0; } } .case-study-challenge__content:has(.case-study-challenge__artapan) { align-items: center; justify-content: space-between; mix-blend-mode: darken; } .case-study-challenge__content:has(.case-study-challenge__collection-ruesch) { align-items: center; justify-content: space-between; mix-blend-mode: darken; } .case-study-challenge__content:has(.case-study-challenge__cinema-platform) { justify-content: space-between; gap: 172px; margin-bottom: -160px; } @media only screen and (max-width: 1400px) { .case-study-challenge__content:has(.case-study-challenge__cinema-platform) { align-items: center; gap: 140px; } } @media only screen and (max-width: 1024px) { .case-study-challenge__content:has(.case-study-challenge__cinema-platform) { gap: 80px; } } @media only screen and (max-width: 767.98px) { .case-study-challenge__content:has(.case-study-challenge__cinema-platform) { gap: 0; margin-bottom: -48px; } } .case-study-challenge__content:has(.case-study-challenge__damn-plastic) { justify-content: space-between; gap: 90px; } @media only screen and (max-width: 1400px) { .case-study-challenge__content:has(.case-study-challenge__damn-plastic) { gap: unset; } } @media only screen and (max-width: 991px) { .case-study-challenge__content:has(.case-study-challenge__damn-plastic) .case-study-challenge__boxes { flex: 0 0 100%; max-width: 100%; } } @media only screen and (max-width: 767.98px) { .case-study-challenge__content:has(.case-study-challenge__damn-plastic) { gap: 0; } } .case-study-challenge__content:has(.case-study-challenge__abian) { justify-content: space-between; } @media only screen and (max-width: 767.98px) { .case-study-challenge__content:has(.case-study-challenge__abian) { gap: 0; } } .case-study-challenge__content:has(.case-study-challenge__rahyab) { align-items: center; justify-content: space-between; gap: 70px; } .case-study-challenge__content:has(.case-study-challenge__bazaar) { align-items: center; justify-content: space-between; mix-blend-mode: darken; } .case-study-challenge__boxes { flex: 0 0 50%; max-width: 50%; display: flex; flex-direction: column; } @media only screen and (max-width: 767.98px) { .case-study-challenge__boxes { flex: 0 0 100%; max-width: 100%; } } .case-study-challenge__box { margin-bottom: 104px; } @media only screen and (max-width: 767.98px) { .case-study-challenge__box { margin-bottom: 48px; } } .case-study-challenge__box:last-of-type { margin-bottom: 40px; } @media only screen and (max-width: 767.98px) { .case-study-challenge__box:last-of-type { margin-bottom: 48px; } } .case-study-challenge__box--subtitle { margin-bottom: 6px; font-size: 14px; font-weight: 600; font-variation-settings: "wght" 600; } @media only screen and (max-width: 767.98px) { .case-study-challenge__box--subtitle { margin-bottom: 4px; } } .case-study-challenge__features { align-items: center; display: flex; gap: 24px; } .case-study-challenge__features li { display: flex; align-items: center; justify-content: center; width: 48px; } .case-study-challenge__features + .case-study-challenge__features { margin-top: 8px; } .case-study-challenge__flow { display: flex; height: 100%; align-items: center; } @media only screen and (max-width: 767.98px) { .case-study-challenge__flow { display: none; } } .case-study-challenge__flow svg { width: 100%; display: block; overflow: visible; } .case-study-challenge__circles { position: relative; display: flex; align-items: center; justify-content: center; } @media only screen and (max-width: 767.98px) { .case-study-challenge__circles { display: none; } } .case-study-challenge__circles--inner { border-radius: 50%; width: 510px; height: 510px; display: block; background: var(--Solitude-20, #fafbfd); position: relative; } @media only screen and (max-width: 1199px) { .case-study-challenge__circles--inner { width: 375px; height: 375px; } } @media only screen and (max-width: 991px) { .case-study-challenge__circles--inner { width: 300px; height: 300px; } } .case-study-challenge__circles--circle { position: absolute; } .case-study-challenge__circles--circle1 { right: 0; top: 0; transform: translateY(-100%); } @media only screen and (max-width: 1199px) { .case-study-challenge__circles--circle1 { transform: translateY(-75%); } } @media only screen and (max-width: 991px) { .case-study-challenge__circles--circle1 { transform: translateY(-60%); width: 25%; } } .case-study-challenge__circles--circle2 { left: 0; top: -20px; } @media only screen and (max-width: 991px) { .case-study-challenge__circles--circle2 { left: 10px; width: 25%; } } .case-study-challenge__circles--circle3 { left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } @media only screen and (max-width: 1199px) { .case-study-challenge__circles--circle3 { width: 50%; } } @media only screen and (max-width: 991px) { .case-study-challenge__circles--circle3 { width: 30%; } } .case-study-challenge__circles--circle4 { left: 10px; top: 50%; transform: translateX(-50%) translateY(100%); } @media only screen and (max-width: 991px) { .case-study-challenge__circles--circle4 { left: 30px; width: 12%; } } .case-study-challenge__circles--circle5 { right: -20px; top: 100%; transform: translateY(-50%); } @media only screen and (max-width: 1199px) { .case-study-challenge__circles--circle5 { width: 40%; } } @media only screen and (max-width: 991px) { .case-study-challenge__circles--circle5 { right: 0px; top: 95%; width: 30%; transform: translateY(-55%); } } .case-study-challenge__eirak { display: flex; justify-content: center; flex: 0 0 calc(50% - 64px); max-width: calc(50% - 64px); } @media only screen and (max-width: 1024px) { .case-study-challenge__eirak { transform: scale(0.8); } } @media only screen and (max-width: 767.98px) { .case-study-challenge__eirak { display: none; } } .case-study-challenge__aluminum { position: relative; min-height: 40vw; flex: 1 1 auto; } @media only screen and (max-width: 767.98px) { .case-study-challenge__aluminum { display: none; } } .case-study-challenge__bagzee { display: flex; flex-direction: column; align-items: flex-end; } .case-study-challenge__bagzee--top { border-radius: 16px; background: #fff; box-shadow: -4px 4px 24px 0px rgba(80, 106, 123, 0.08); } .case-study-challenge__bagzee--bottom { margin-top: -80px; margin-right: -80px; max-width: calc(100% + 80px) !important; } .case-study-challenge__collection-ruesch svg { max-width: 100%; height: auto; } .case-study-challenge__cinema-platform { position: relative; } .case-study-challenge__cinema-platform--main { border-radius: 11.488px; } .case-study-challenge__cinema-platform--time { bottom: 22%; position: absolute; left: 0; transform: translateX(-75%); box-shadow: 0px 40px 80px 0px rgba(150, 171, 191, 0.2); } @media only screen and (max-width: 1024px) { .case-study-challenge__cinema-platform--time { width: 35%; } } .case-study-challenge__cinema-platform--title { right: -18%; top: 0; transform: translateY(-50%); position: absolute; box-shadow: 0px 40px 80px 0px rgba(150, 171, 191, 0.2); } .case-study-challenge__abian { position: relative; transform: translateX(-12%); display: flex; align-items: center; } @media only screen and (max-width: 1400px) { .case-study-challenge__abian { transform: scale(0.8) translateX(-5%); } } .case-study-challenge__abian svg { max-width: 100%; } .case-study-challenge__abian--elms { position: absolute; z-index: 1; top: 45%; right: -7%; transform: translateY(-50%); } .case-study-challenge__abian--image { border-radius: 8px; } .case-study-challenge__abian--bg { filter: blur(2.7406361103px); transform: rotate(-143.51deg); } .case-study-challenge__abian--user { position: absolute; left: 0; bottom: 0; transform: translateX(-30%) translateY(50%); z-index: 2; } .case-study-challenge__abian--shape { position: absolute; right: 0; top: 0; transform: translateX(40%) translateY(-70%); z-index: 2; } .case-study-challenge__bazaar { position: relative; } .case-study-challenge__bazaar--location { position: absolute; right: 10%; top: 15%; } .case-study-challenge__bazaar--apps { position: absolute; right: 10%; bottom: -25%; } .case-study-challenge__bazaar--search { position: absolute; left: 5%; top: 55%; } .case-study-challenge__bazaar svg { max-width: 100%; } .case-study-video-player { padding-top: 160px; } @media only screen and (max-width: 767.98px) { .case-study-video-player { padding-top: 48px; } } .case-study-video-player__content { width: 100%; max-width: 1181px; margin-left: auto; margin-right: auto; } .case-study-video-player.case-study-video-player--with-padding-bottom { padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-video-player.case-study-video-player--with-padding-bottom { padding-bottom: 48px; } } .case-study-vp { position: relative; border-radius: 16px; overflow: hidden; border: 8px solid var(--Gray-Gray---10, #eaecec); } .case-study-vp video { display: block; width: 100%; } .case-study-vp__over { width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 100%); z-index: 1; display: flex; align-items: center; justify-content: center; } .case-study-vp__over--play { cursor: pointer; border: none; padding: 0; background: transparent; } .case-study-vp__over--play svg { display: block; } @media only screen and (max-width: 767px) { .case-study-vp__over--play svg { width: 32px; height: auto; } } .case-study-carusel-images { overflow: hidden; } .case-study-carusel-images__content { display: flex; gap: 60px; justify-content: space-between; } @media only screen and (max-width: 991px) { .case-study-carusel-images__content { gap: 24px; } } @media only screen and (max-width: 767.98px) { .case-study-carusel-images__content { gap: 0; flex-direction: column; margin-bottom: -22px; } } .case-study-carusel-images__content img { width: 100%; border-radius: 16px; border: 8px solid var(--Gray-Gray---10, #eaecec); margin-bottom: 80px; margin-top: -16px; max-width: unset; position: relative; z-index: 1; } @media only screen and (max-width: 991px) { .case-study-carusel-images__content img { margin-bottom: 40px; } } .case-study-carusel-images__content img:last-of-type { margin-bottom: -16px; } @media only screen and (max-width: 767.98px) { .case-study-carusel-images__content img:last-of-type { margin-bottom: 16px; } } @media only screen and (max-width: 767.98px) { .case-study-carusel-images__content img { border-radius: 5.728px; border-width: 2.864px; margin-bottom: 16px; margin-top: -5.728px; width: calc(100% - 72px); } } .case-study-carusel-images__content--left { flex: 1 1 0; position: relative; will-change: transform; } @media only screen and (max-width: 767.98px) { .case-study-carusel-images__content--left { will-change: auto; } } .case-study-carusel-images__content--left svg { pointer-events: none; position: absolute; left: 0; top: 0; } @media only screen and (max-width: 767.98px) { .case-study-carusel-images__content--left svg { width: 375.558px; height: 221.096px; } } .case-study-carusel-images__content--left img { transform: translateX(-16px); } @media only screen and (max-width: 767.98px) { .case-study-carusel-images__content--left img { transform: translateX(-5.728px); } .case-study-carusel-images__content--left img:nth-child(2n) { margin-left: auto; transform: translateX(5.728px); } } .case-study-carusel-images__content--right { flex: 1 1 0; transform: translateY(160px); will-change: transform; } @media only screen and (max-width: 767.98px) { .case-study-carusel-images__content--right { transform: unset; will-change: auto; } } .case-study-carusel-images__content--right img { transform: translateX(16px); } @media only screen and (max-width: 767.98px) { .case-study-carusel-images__content--right img { transform: translateX(5.728px); } .case-study-carusel-images__content--right img:nth-child(2n) { margin-left: auto; transform: translateX(-5.728px); } } .case-study-carusel-images.case-study-carusel-images--v2 .case-study-carusel-images__content { padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-carusel-images.case-study-carusel-images--v2 .case-study-carusel-images__content { padding-bottom: 80px; } } .case-study-carusel-images.case-study-carusel-images--v2 .case-study-carusel-images__content img { margin-top: 0; } .case-study-carusel-images.case-study-carusel-images--v2 .case-study-carusel-images__content--right { transform: translateY(160px); } @media only screen and (max-width: 991px) { .case-study-carusel-images.case-study-carusel-images--v2 .case-study-carusel-images__content--right { transform: translateY(80px); } } @media only screen and (max-width: 767.98px) { .case-study-carusel-images.case-study-carusel-images--v2 .case-study-carusel-images__content--right { transform: unset; } } .case-study-carusel-images.case-study-carusel-images--v2 .case-study-carusel-images__content--left { transform: translateY(320px); } @media only screen and (max-width: 991px) { .case-study-carusel-images.case-study-carusel-images--v2 .case-study-carusel-images__content--left { transform: translateY(160px); } } @media only screen and (max-width: 767.98px) { .case-study-carusel-images.case-study-carusel-images--v2 .case-study-carusel-images__content--left { transform: unset; } } .case-study-carusel-rows-images { padding-top: 160px; padding-bottom: 160px; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-carusel-rows-images { padding-top: 48px; padding-bottom: 48px; } } .case-study-carusel-rows-images__content { display: flex; gap: 50px; flex-direction: column; } @media only screen and (max-width: 767.98px) { .case-study-carusel-rows-images__content { gap: 12px; } } .case-study-carusel-rows-images__content img { border-radius: 16px; border: 8px solid var(--Gray-Gray---10, #eaecec); max-width: 65%; position: relative; } @media only screen and (max-width: 767.98px) { .case-study-carusel-rows-images__content img { border-radius: 3.258px; border-width: 1.629px; max-width: 50%; } } .case-study-carusel-rows-images__content--top { position: relative; display: flex; gap: 40px; padding-left: 72px; will-change: transform; } @media only screen and (max-width: 767.98px) { .case-study-carusel-rows-images__content--top { gap: 12px; padding-left: 32px; will-change: auto; } } .case-study-carusel-rows-images__content--top img:first-child { z-index: 2; } .case-study-carusel-rows-images__content--top-shadow { pointer-events: none; position: absolute; left: 20%; top: 10%; background: rgba(150, 171, 191, 0.2); filter: blur(116.4000015259px); width: 1137px; aspect-ratio: 1.67; display: block; z-index: 1; } .case-study-carusel-rows-images__content--bottom { display: flex; gap: 40px; transform: translateX(-20%); will-change: transform; } @media only screen and (max-width: 767.98px) { .case-study-carusel-rows-images__content--bottom { transform: unset; gap: 12px; will-change: auto; } } .case-study-typography { --cs-typo-font: Roboto; --cs-typo-brand: #0065d1; --cs-typo-surface: #fafafa; --cs-typo-palette: #6cd88f; --cs-typo-type-bg: var(--cs-typo-surface); --cs-typo-type-text: #2e2d2c; --cs-typo-on-brand: #fff; --cs-typo-on-surface: var(--cs-typo-brand); --cs-typo-on-palette: var(--cs-typo-brand); --cs-typo-palette-label: var(--cs-typo-on-palette); --cs-typo-on-shades: #2e2d2c; padding-top: 160px; padding-bottom: 160px; font-family: var(--cs-typo-font), sans-serif; } @media only screen and (max-width: 767.98px) { .case-study-typography { padding-top: 48px; padding-bottom: 48px; } } .case-study-typography__grid { width: 100%; max-width: 1062px; margin-left: auto; margin-right: auto; display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); } .case-study-typography__grid > * { min-width: 0; max-width: 100%; } @media only screen and (max-width: 767.98px) { .case-study-typography__grid { grid-template-columns: 1fr; } } .case-study-typography__type { color: var(--cs-typo-type-text); background: var(--cs-typo-type-bg); padding: 24px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-typography__type { padding: 16px; height: 324px; order: 1; } } .case-study-typography__weights { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 24px; max-width: 100%; } @media only screen and (max-width: 767.98px) { .case-study-typography__weights { gap: 12px 16px; } } .case-study-typography__weights li { font-size: 16px; line-height: 30px; text-transform: capitalize; white-space: nowrap; } @media only screen and (max-width: 767.98px) { .case-study-typography__weights li { font-size: 14px; line-height: 22px; } } .case-study-typography__weights li:nth-child(1) { font-weight: 300; font-variation-settings: "wght" 300; } .case-study-typography__weights li:nth-child(2) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-typography__weights li:nth-child(3) { font-weight: 500; font-variation-settings: "wght" 500; } .case-study-typography__weights li:nth-child(4) { font-weight: 700; font-variation-settings: "wght" 700; } .case-study-typography__font { color: var(--cs-typo-brand); font-size: 48px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 91px; text-transform: capitalize; max-width: 100%; text-align: center; overflow-wrap: anywhere; } @media only screen and (max-width: 767.98px) { .case-study-typography__font { font-size: 32px; line-height: normal; } } .case-study-typography__glyphs { text-align: center; letter-spacing: 0.08em; line-height: 23px; text-transform: capitalize; font-weight: 300; font-variation-settings: "wght" 300; font-size: 16px; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } @media only screen and (max-width: 767.98px) { .case-study-typography__glyphs { font-size: 12px; line-height: 18px; letter-spacing: 0.04em; } } .case-study-typography__specimen { background: var(--cs-typo-brand); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; height: 571px; } @media only screen and (max-width: 767.98px) { .case-study-typography__specimen { height: 324px; order: 0; } } .case-study-typography__specimen span { color: var(--cs-typo-on-brand); font-size: 400px; font-weight: 500; font-variation-settings: "wght" 500; line-height: 134px; text-transform: capitalize; } @media only screen and (max-width: 991px) { .case-study-typography__specimen span { font-size: 285px; line-height: 100px; } } @media only screen and (max-width: 767.98px) { .case-study-typography__specimen span { font-size: 220px; line-height: 80px; } } .case-study-typography__brand, .case-study-typography__palette { display: flex; height: 433px; min-width: 0; width: 100%; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-typography__brand, .case-study-typography__palette { height: 260px; } } @media only screen and (max-width: 767.98px) { .case-study-typography__brand { order: 2; } } @media only screen and (max-width: 767.98px) { .case-study-typography__palette { order: 3; } } .case-study-typography__swatch { padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; min-width: 0; } @media only screen and (max-width: 767.98px) { .case-study-typography__swatch { padding: 8px; } } .case-study-typography__swatch span { word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-typography__swatch span { letter-spacing: 0.64px; line-height: 40px; font-size: 32px; } } .case-study-typography__swatch--brand { flex: 1 1 auto; color: var(--cs-typo-on-brand); background: var(--cs-typo-brand); } .case-study-typography__swatch--brand span { max-width: 152px; } @media only screen and (max-width: 767.98px) { .case-study-typography__swatch--brand span { max-width: 97px; } } .case-study-typography__swatch--surface { background: var(--cs-typo-surface); flex: 0 0 151px; width: 151px; max-width: 40%; padding: 16px 8px; color: var(--cs-typo-on-surface); } @media only screen and (max-width: 767.98px) { .case-study-typography__swatch--surface { flex: 0 0 84px; width: 84px; max-width: 28%; padding: 8px; } } .case-study-typography__swatch--palette { flex: 1 1 auto; background: var(--cs-typo-palette); color: var(--cs-typo-on-palette); } @media only screen and (max-width: 767.98px) { .case-study-typography__swatch--palette { line-height: normal; } } .case-study-typography__swatch--palette span { max-width: 170px; color: var(--cs-typo-palette-label, var(--cs-typo-on-palette)); } @media only screen and (max-width: 767.98px) { .case-study-typography__swatch--palette span { max-width: 100%; font-size: 24px; letter-spacing: 0.48px; line-height: normal; } } .case-study-typography__shades { flex: 0 0 151px; width: 151px; max-width: 40%; min-width: 0; } @media only screen and (max-width: 767.98px) { .case-study-typography__shades { flex: 0 0 91px; width: 91px; max-width: 30%; } } .case-study-typography__shades ul { display: flex; flex-direction: column; height: 100%; } .case-study-typography__shades li { width: 100%; padding: 16px; color: var(--cs-typo-on-shades); font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; box-sizing: border-box; } @media only screen and (max-width: 767.98px) { .case-study-typography__shades li { padding: 8px; line-height: normal; } } .case-study-typography__shades li:has(span) { flex: 1; color: var(--cs-typo-palette-label, var(--cs-typo-on-palette)); } /* Slider */ .slick-slider { position: relative; display: block; box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; cursor: hand; } .slick-slider .slick-track, .slick-slider .slick-list { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .slick-track { position: relative; left: 0; top: 0; display: block; margin-left: auto; margin-right: auto; } .slick-track:before, .slick-track:after { content: ""; display: table; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { float: left; height: 100%; min-height: 1px; display: none; } [dir=rtl] .slick-slide { float: right; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-slide.dragging img { pointer-events: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .case-study-flow { padding-top: 160px; padding-bottom: 160px; position: relative; min-height: 100vh; display: flex; align-items: center; } @media only screen and (max-width: 767.98px) { .case-study-flow { padding-top: 48px; padding-bottom: 48px; min-height: auto; background: #FAFAFA; } } .case-study-flow__images { position: relative; z-index: 1; } .case-study-flow__image img { margin-left: auto; margin-right: auto; display: block; } .case-study-flow__image:last-child { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 21%; } .case-study-flow .container { position: relative; z-index: 1; } .case-study-stats { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-stats { padding-top: 48px; padding-bottom: 48px; } } .case-study-stats__list { position: relative; } .case-study-stats__list:after { content: ""; position: absolute; top: 50%; left: 33.33%; transform: translateY(-50%); width: 1px; height: 257px; background: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-size: cover; background-position: center center; pointer-events: none; } @media only screen and (max-width: 767.98px) { .case-study-stats__list:after { left: 50%; top: 33.33%; height: 100%; transform: translateY(-50%) translateX(-50%) rotate(90deg); } } .case-study-stats__list:before { content: ""; position: absolute; top: 50%; left: 66.66%; transform: translateY(-50%); width: 1px; height: 257px; background: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-size: cover; background-position: center center; pointer-events: none; } @media only screen and (max-width: 767.98px) { .case-study-stats__list:before { left: 50%; top: 66.66%; height: 100%; transform: translateY(-50%) translateX(-50%) rotate(90deg); } } .case-study-stats__list ul { width: 1400px; margin-left: auto; margin-right: auto; max-width: 100%; display: flex; flex-wrap: wrap; row-gap: 24px; } .case-study-stats__list ul:before { pointer-events: none; content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; display: block; height: 2px; background: url('data:image/svg+xml;utf8,') center center no-repeat; background-size: contain; } @media only screen and (max-width: 767.98px) { .case-study-stats__list ul:before { left: 50%; top: 50%; width: 320px; transform: translateY(-50%) translateX(-50%) rotate(90deg); } } .case-study-stats__list ul li { flex: 0 0 33.33%; max-width: 33.33%; display: flex; flex-direction: column; padding-top: 32px; padding-bottom: 32px; align-items: center; text-align: center; gap: 8px; } @media only screen and (max-width: 767.98px) { .case-study-stats__list ul li { flex: 0 0 50%; max-width: 50%; padding-top: 16px; padding-bottom: 16px; } } .case-study-stats__list ul li strong { font-weight: 645; font-variation-settings: "wght" 645; font-size: 32px; color: #000000; } @media only screen and (max-width: 767.98px) { .case-study-stats__list ul li strong { font-size: 22px; letter-spacing: 0.33px; } } .case-study-stats__list ul li span { color: rgba(0, 0, 0, 0.7); font-size: 14px; font-weight: 550; font-variation-settings: "wght" 550; line-height: 24px; } @media only screen and (max-width: 767.98px) { .case-study-stats__list ul li span { font-size: 12px; letter-spacing: -0.72px; font-weight: 400; font-variation-settings: "wght" 400; max-width: 90%; } } .case-study-design-process { position: relative; padding-top: 160px; padding-bottom: 160px; color: #fff; background-color: #000000; } @media only screen and (max-width: 767.98px) { .case-study-design-process { overflow: hidden; } } .case-study-design-process .mask { position: absolute; inset: 0; pointer-events: none; z-index: 1; pointer-events: none; } .case-study-design-process .mask svg { width: 100%; overflow: visible; } .case-study-design-process .mask svg:nth-child(1) { display: block; } @media only screen and (max-width: 767.98px) { .case-study-design-process .mask svg:nth-child(1) { display: none; } } .case-study-design-process .mask svg:nth-child(2) { display: none; } @media only screen and (max-width: 767.98px) { .case-study-design-process .mask svg:nth-child(2) { display: block; } } @media only screen and (max-width: 767.98px) { .case-study-design-process { padding-top: 48px; padding-bottom: 64px; } } .case-study-design-process .container { position: relative; z-index: 2; } .case-study-design-process__flow { margin-top: 200px; margin-bottom: 100px; } @media only screen and (max-width: 767.98px) { .case-study-design-process__flow { margin-top: 48px; margin-bottom: 0; } } .case-study-design-process .site-case-study__description { opacity: 0.7; max-width: 900px; } .csdpf { position: relative; max-width: calc(100% - 160px); margin-left: auto; margin-right: auto; } @media only screen and (max-width: 991px) { .csdpf { max-width: calc(100% - 48px); } } .csdpf__label { font-size: 32px; font-style: normal; letter-spacing: 0.48px; text-align: center; position: absolute; } @media only screen and (max-width: 1360px) { .csdpf__label { font-size: 24px; } } @media only screen and (max-width: 1199px) { .csdpf__label { font-size: 16px; } } @media only screen and (max-width: 991px) { .csdpf__label { font-size: 10px; } } @media only screen and (max-width: 767.98px) { .csdpf__label { font-size: 7.126px; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.107px; } } .csdpf__label--research { left: 31%; top: 43%; transform: translateY(-50%) translateX(-50%); } @media only screen and (max-width: 1199px) { .csdpf__label--research { top: 45%; } } @media only screen and (max-width: 991px) { .csdpf__label--research { top: 46%; } } @media only screen and (max-width: 767.98px) { .csdpf__label--research { top: 43%; } } .csdpf__label--empathy { left: 31%; bottom: 40%; transform: translateX(-50%); } @media only screen and (max-width: 1199px) { .csdpf__label--empathy { bottom: 43%; } } @media only screen and (max-width: 767.98px) { .csdpf__label--empathy { bottom: 38%; } } .csdpf__label--define { right: 29%; top: 50%; transform: translateY(-50%) translateX(50%); } .csdpf__label--ideate { left: 31%; top: 40%; transform: translateX(-50%); } @media only screen and (max-width: 1199px) { .csdpf__label--ideate { top: 43%; } } @media only screen and (max-width: 767.98px) { .csdpf__label--ideate { top: 40%; } } .csdpf__label--prototype { left: 31%; bottom: 40%; transform: translateX(-50%); } @media only screen and (max-width: 1199px) { .csdpf__label--prototype { bottom: 43%; } } @media only screen and (max-width: 767.98px) { .csdpf__label--prototype { bottom: 38%; } } .csdpf__label--validation { right: 27%; top: 50%; transform: translateY(-50%) translateX(50%); } .csdpf__label--awarenss { letter-spacing: -1.92px; font-weight: 500; font-variation-settings: "wght" 500; font-family: "RedHatText"; left: 0; top: 20%; transform: translateX(-50%); } @media only screen and (max-width: 767.98px) { .csdpf__label--awarenss { letter-spacing: -0.428px; } } .csdpf__label--impact { letter-spacing: -1.92px; font-weight: 500; font-variation-settings: "wght" 500; font-family: "RedHatText"; right: 0; top: 20%; transform: translateX(50%); } @media only screen and (max-width: 767.98px) { .csdpf__label--impact { letter-spacing: -0.428px; } } .csdpf__label--iterate { letter-spacing: -1.92px; font-weight: 500; font-variation-settings: "wght" 500; font-family: "RedHatText"; top: 0; left: 50%; transform: translateX(-50%) translateY(-50%); } @media only screen and (max-width: 767.98px) { .csdpf__label--iterate { letter-spacing: -0.428px; } } .csdpf__label--iterate2 { letter-spacing: -1.92px; font-weight: 500; font-variation-settings: "wght" 500; font-family: "RedHatText"; bottom: 0%; left: 50%; transform: translateX(-50%) translateY(50%); } @media only screen and (max-width: 767.98px) { .csdpf__label--iterate2 { letter-spacing: -0.428px; } } .csdpf__label--measurable-result { letter-spacing: -1.92px; font-weight: 500; font-variation-settings: "wght" 500; font-family: "RedHatText"; top: 16%; left: 50%; transform: translateX(-50%); } @media only screen and (max-width: 767.98px) { .csdpf__label--measurable-result { letter-spacing: -0.428px; } } .csdpf__line { position: absolute; } .csdpf__line--left { left: 0; top: 30%; height: 45%; } @media only screen and (max-width: 767.98px) { .csdpf__line--left { border-right: 1px dashed #5a5555; } .csdpf__line--left svg { display: none; } } .csdpf__line--right { right: 0; top: 30%; height: 45%; } @media only screen and (max-width: 767.98px) { .csdpf__line--right { border-right: 1px dashed #5a5555; } .csdpf__line--right svg { display: none; } } .csdpf__line--center { left: 50%; transform: translateX(-50%); top: 30%; height: 45%; } @media only screen and (max-width: 767.98px) { .csdpf__line--center { border-right: 1px dashed #5a5555; } .csdpf__line--center svg { display: none; } } .csdpf__line--top { top: 0; left: 50%; transform: translateX(-50%) translateY(-100%); width: 100%; max-width: 30vw; } .csdpf__line--bottom { bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%); width: 100%; max-width: 30vw; } .csdpf__triangles { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 4px; } .csdpf__triangles--left { flex: 0 0 calc(50% - 2px); max-width: calc(50% - 2px); position: relative; display: flex; align-items: center; justify-content: center; } .csdpf__triangles--right { flex: 0 0 calc(50% - 2px); max-width: calc(50% - 2px); position: relative; display: flex; align-items: center; justify-content: center; } .case-study-research-methods { padding-top: 160px; padding-bottom: 160px; color: #000; } @media only screen and (max-width: 767.98px) { .case-study-research-methods { padding-top: 48px; padding-bottom: 48px; } } .case-study-research-methods .site-case-study__description { max-width: 674px; } @media only screen and (max-width: 767.98px) { .case-study-research-methods .site-case-study__description { max-width: 100%; } } .case-study-research-methods__content { display: flex; gap: 160px; justify-content: space-between; } @media only screen and (max-width: 991px) { .case-study-research-methods__content { gap: 80px; } } @media only screen and (max-width: 767.98px) { .case-study-research-methods__content { gap: 0; } } .case-study-research-methods__info { margin-top: 80px; } @media only screen and (max-width: 767.98px) { .case-study-research-methods__info { margin-top: 0; } } .case-study-research-methods__info--list { margin-top: 56px; font-size: 16px; font-weight: 400; font-variation-settings: "wght" 400; line-height: normal; letter-spacing: -0.96px; list-style: decimal inside; color: var(--Black-Black---80, #333); } @media only screen and (max-width: 767.98px) { .case-study-research-methods__info--list { margin-top: 48px; font-size: 14px; letter-spacing: -0.84px; opacity: 0.7; } } .case-study-research-methods__info--list strong { color: var(--Black-Black---100, #000); font-weight: 500; font-variation-settings: "wght" 500; display: block; margin-bottom: 2px; } .case-study-research-methods__info--list > li { margin-bottom: 24px; } @media only screen and (max-width: 767.98px) { .case-study-research-methods__info--list > li { margin-bottom: 16px; } } .case-study-research-methods__info--list > li:last-child { margin-bottom: 0; } .case-study-research-methods__info--list > li ul { padding-left: 40px; } @media only screen and (max-width: 767.98px) { .case-study-research-methods__info--list > li ul { padding-left: 32px; } } .case-study-research-methods__info--list > li ul li { list-style: disc; } @media only screen and (max-width: 767.98px) { .case-study-research-methods__chart { display: none; } } .case-study-research-methods__chart ul { display: flex; flex-direction: column; padding-top: 20px; } .case-study-research-methods__chart ul li { position: relative; margin-top: -20px; } .case-study-research-methods__chart ul li h4 { margin: 0; font-size: 24px; font-weight: 700; font-variation-settings: "wght" 700; letter-spacing: -1px; text-align: center; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); margin-top: 12px; position: absolute; } .case-study-stakeholder-interview { background-color: #fafafa; background-repeat: no-repeat; background-size: cover; position: relative; color: #000; } @media only screen and (max-width: 767.98px) { .case-study-stakeholder-interview { background: none !important; } .case-study-stakeholder-interview .site-case-study__bg { object-position: bottom; } } .case-study-stakeholder-interview__content { z-index: 1; max-width: 792px; position: relative; padding-top: 160px; padding-bottom: 308px; } @media only screen and (max-width: 767.98px) { .case-study-stakeholder-interview__content { padding-top: 48px; padding-bottom: 360px; max-width: 100%; } } .case-study-stakeholder-interview__content > .site-case-study__description { margin-bottom: 48px; } @media only screen and (max-width: 767.98px) { .case-study-stakeholder-interview__content > .site-case-study__description { margin-bottom: 32px; } } .case-study-stakeholder-interview__image { position: absolute; bottom: 0; left: 0; } .case-study-stakeholder-interview__image svg { transform: translateY(50%); } @media only screen and (max-width: 767.98px) { .case-study-stakeholder-interview__image { width: 197px; } .case-study-stakeholder-interview__image svg { width: 100%; } } .case-study-stakeholder-interview__list { margin-bottom: 48px; font-size: 16px; letter-spacing: -0.96px; line-height: 24px; } @media only screen and (max-width: 767.98px) { .case-study-stakeholder-interview__list { margin-bottom: 32px; font-size: 14px; line-height: 28px; letter-spacing: -0.84px; } } .case-study-stakeholder-interview__subtitle { font-size: 32px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 24px; letter-spacing: 0.48px; margin-bottom: 24px; } @media only screen and (max-width: 767.98px) { .case-study-stakeholder-interview__subtitle { font-size: 24px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 32px; margin-bottom: 16px; letter-spacing: 0.36px; } } .case-study-stakeholder-interview__sub-area { max-width: 520px; } @media only screen and (max-width: 767.98px) { .case-study-stakeholder-interview__sub-area { max-width: 100%; } } .case-study-stakeholder-interview__sub-area .site-case-study__description { background: linear-gradient(166deg, #000 5.65%, rgba(0, 0, 0, 0.1) 103.73%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 24px; } @media only screen and (max-width: 767.98px) { .case-study-stakeholder-interview__sub-area .site-case-study__description { line-height: 22px; } } .case-study-competitive-analysis { padding-top: 330px; padding-bottom: 160px; text-align: center; color: #000; } @media only screen and (max-width: 767.98px) { .case-study-competitive-analysis { padding-top: 194px; padding-bottom: 48px; } } .case-study-competitive-analysis .site-case-study__description { max-width: 732px; margin-bottom: 120px; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767.98px) { .case-study-competitive-analysis .site-case-study__description { margin-bottom: 48px; } } .case-study-competitive-analysis__content { position: relative; max-width: 792px; margin-left: auto; margin-right: auto; } .case-study-competitive-analysis__boards { width: 100%; display: flex; flex-wrap: wrap; } .case-study-competitive-analysis__boards--board { position: relative; width: 50%; height: 364px; } @media only screen and (max-width: 767.98px) { .case-study-competitive-analysis__boards--board { height: 165px; } } .case-study-competitive-analysis__boards--board-title { font-size: 16px; font-weight: 400; font-variation-settings: "wght" 400; letter-spacing: -0.96px; line-height: normal; font-family: "RedHatText"; display: inline; position: absolute; } @media only screen and (max-width: 767.98px) { .case-study-competitive-analysis__boards--board-title { font-size: 8px; letter-spacing: -0.48px; } } .case-study-competitive-analysis__boards--board-images li { position: absolute; } @media only screen and (max-width: 767.98px) { .case-study-competitive-analysis__boards--board-images li img { width: 45px; } } .case-study-competitive-analysis__boards--board:nth-child(1) .case-study-competitive-analysis__boards--board-title { left: 0; top: 0; } .case-study-competitive-analysis__boards--board:nth-child(1) .case-study-competitive-analysis__boards--board-images li:nth-child(1) { left: 30%; top: 18%; } .case-study-competitive-analysis__boards--board:nth-child(1) .case-study-competitive-analysis__boards--board-images li:nth-child(2) { left: 52%; top: 27%; } .case-study-competitive-analysis__boards--board:nth-child(1) .case-study-competitive-analysis__boards--board-images li:nth-child(3) { left: 17%; top: 43%; } @media only screen and (max-width: 767.98px) { .case-study-competitive-analysis__boards--board:nth-child(1) .case-study-competitive-analysis__boards--board-images li:nth-child(3) { top: 42%; } } .case-study-competitive-analysis__boards--board:nth-child(1) .case-study-competitive-analysis__boards--board-images li:nth-child(4) { left: 40%; top: 55%; } @media only screen and (max-width: 767.98px) { .case-study-competitive-analysis__boards--board:nth-child(1) .case-study-competitive-analysis__boards--board-images li:nth-child(4) { left: 38%; top: 48%; } } .case-study-competitive-analysis__boards--board:nth-child(2) .case-study-competitive-analysis__boards--board-title { right: 0; top: 0; } .case-study-competitive-analysis__boards--board:nth-child(2) .case-study-competitive-analysis__boards--board-images li:nth-child(1) { left: 22%; top: 18%; z-index: 1; } .case-study-competitive-analysis__boards--board:nth-child(2) .case-study-competitive-analysis__boards--board-images li:nth-child(2) { left: 50%; top: 16%; } @media only screen and (max-width: 767.98px) { .case-study-competitive-analysis__boards--board:nth-child(2) .case-study-competitive-analysis__boards--board-images li:nth-child(2) { left: 46%; } } .case-study-competitive-analysis__boards--board:nth-child(2) .case-study-competitive-analysis__boards--board-images li:nth-child(3) { left: 36%; top: 44%; } @media only screen and (max-width: 767.98px) { .case-study-competitive-analysis__boards--board:nth-child(2) .case-study-competitive-analysis__boards--board-images li:nth-child(3) { top: 39%; } } .case-study-competitive-analysis__boards--board:nth-child(2) .case-study-competitive-analysis__boards--board-images li:nth-child(4) { left: 54%; top: 55%; } @media only screen and (max-width: 767.98px) { .case-study-competitive-analysis__boards--board:nth-child(2) .case-study-competitive-analysis__boards--board-images li:nth-child(4) { top: 50%; } } .case-study-competitive-analysis__boards--board:nth-child(3) .case-study-competitive-analysis__boards--board-title { left: 0; bottom: 0; } .case-study-competitive-analysis__boards--board:nth-child(3) .case-study-competitive-analysis__boards--board-images li:nth-child(1) { left: 36%; top: 4%; z-index: 1; } @media only screen and (max-width: 767.98px) { .case-study-competitive-analysis__boards--board:nth-child(3) .case-study-competitive-analysis__boards--board-images li:nth-child(1) { left: 37%; } } .case-study-competitive-analysis__boards--board:nth-child(3) .case-study-competitive-analysis__boards--board-images li:nth-child(2) { left: 60%; top: 16%; } @media only screen and (max-width: 767.98px) { .case-study-competitive-analysis__boards--board:nth-child(3) .case-study-competitive-analysis__boards--board-images li:nth-child(2) { left: 56%; top: 15%; } } .case-study-competitive-analysis__boards--board:nth-child(3) .case-study-competitive-analysis__boards--board-images li:nth-child(3) { left: 31%; top: 31%; } @media only screen and (max-width: 767.98px) { .case-study-competitive-analysis__boards--board:nth-child(3) .case-study-competitive-analysis__boards--board-images li:nth-child(3) { top: 24%; } } .case-study-competitive-analysis__boards--board:nth-child(3) .case-study-competitive-analysis__boards--board-images li:nth-child(4) { left: 52%; top: 41%; } @media only screen and (max-width: 767.98px) { .case-study-competitive-analysis__boards--board:nth-child(3) .case-study-competitive-analysis__boards--board-images li:nth-child(4) { top: 37%; } } .case-study-competitive-analysis__boards--board:nth-child(4) .case-study-competitive-analysis__boards--board-title { right: 0; bottom: 0; } .case-study-competitive-analysis__boards--board:nth-child(4) .case-study-competitive-analysis__boards--board-images li:nth-child(1) { left: 41%; top: 15%; } .case-study-competitive-analysis__boards--board:nth-child(4) .case-study-competitive-analysis__boards--board-images li:nth-child(2) { left: 16%; top: 32%; } @media only screen and (max-width: 767.98px) { .case-study-competitive-analysis__boards--board:nth-child(4) .case-study-competitive-analysis__boards--board-images li:nth-child(2) { top: 30%; } } .case-study-analytics-heatmaps { position: relative; padding-top: 160px; padding-bottom: 160px; color: #000; } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps { padding-top: 48px; padding-bottom: 48px; } } .case-study-analytics-heatmaps .container { position: relative; z-index: 1; display: flex; align-items: flex-start; flex-direction: column; } .case-study-analytics-heatmaps .site-case-study__description { margin-bottom: 48px; max-width: 732px; width: 100%; } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps .site-case-study__description { max-width: 100%; margin-bottom: 24px; } } .case-study-analytics-heatmaps__charts { margin-bottom: 160px; display: flex; justify-content: space-between; align-items: center; width: 100%; } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps__charts { overflow-x: auto; scrollbar-width: none; margin-bottom: 48px; gap: 32px; width: unset; justify-content: unset; } .case-study-analytics-heatmaps__charts svg { width: unset; height: 254px; } } .case-study-analytics-heatmaps__responsives { margin-top: 40px; position: relative; display: flex; } @media only screen and (max-width: 1260px) { .case-study-analytics-heatmaps__responsives { transform: scale(0.75) translateX(-16%); margin-bottom: -4%; } } @media only screen and (max-width: 991px) { .case-study-analytics-heatmaps__responsives { transform: scale(0.7) translateX(-22%); margin-bottom: -10%; } } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps__responsives { margin-top: 12px; transform: scale(1) translateX(0); margin-bottom: 0; } .case-study-analytics-heatmaps__responsives .case-study-lock { max-width: 158px; left: 50%; transform: translateX(-50%); padding-bottom: 8px; } } .case-study-analytics-heatmaps__responsives--zoom { position: absolute; right: -120px; top: -40px; transform: translateX(100%); } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps__responsives--zoom { right: -36px; top: -12px; } .case-study-analytics-heatmaps__responsives--zoom img { width: 106px; height: 106px; } } .case-study-analytics-heatmaps__responsives--zoom:after { width: 346px; height: 2px; content: ""; position: absolute; right: 56%; top: 23px; transform: rotate(-7.203deg); display: block; background-color: #0016f8; } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps__responsives--zoom:after { width: 105px; height: 1px; top: 7px; } } .case-study-analytics-heatmaps__responsives--zoom:before { width: 340px; height: 2px; content: ""; position: absolute; right: 72%; bottom: 212px; transform: rotate(42.797deg); display: block; background-color: #0016f8; } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps__responsives--zoom:before { width: 103px; height: 1px; bottom: 69px; } } .case-study-analytics-heatmaps__responsives--zoom p { text-align: center; max-width: 174px; margin-left: auto; margin-right: auto; color: #1a237e; font-weight: 500; font-variation-settings: "wght" 500; font-size: 16px; letter-spacing: -0.96px; } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps__responsives--zoom p { font-size: 5px; letter-spacing: -0.291px; max-width: 54px; margin-top: 4px; } } .case-study-analytics-heatmaps__item { display: flex; flex-direction: column; text-align: center; gap: 16px; align-items: center; justify-content: center; } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps__item { gap: 4px; } .case-study-analytics-heatmaps__item img { height: 142px; object-fit: cover; object-position: center top; } } .case-study-analytics-heatmaps__item:nth-child(1) { margin-right: 62px; } @media only screen and (max-width: 991px) { .case-study-analytics-heatmaps__item:nth-child(1) { margin-right: 31px; } } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps__item:nth-child(1) { margin-right: 18px; } .case-study-analytics-heatmaps__item:nth-child(1) img { width: 10px; } } .case-study-analytics-heatmaps__item:nth-child(2) { margin-right: 50px; } @media only screen and (max-width: 991px) { .case-study-analytics-heatmaps__item:nth-child(2) { margin-right: 25px; } } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps__item:nth-child(2) { margin-right: 16px; } .case-study-analytics-heatmaps__item:nth-child(2) img { width: 18px; } } .case-study-analytics-heatmaps__item:nth-child(3) { margin-right: 108px; } @media only screen and (max-width: 991px) { .case-study-analytics-heatmaps__item:nth-child(3) { margin-right: 54px; } } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps__item:nth-child(3) { margin-right: 33px; } .case-study-analytics-heatmaps__item:nth-child(3) img { width: 27px; } } .case-study-analytics-heatmaps__item:nth-child(4) { margin-right: 62px; } @media only screen and (max-width: 991px) { .case-study-analytics-heatmaps__item:nth-child(4) { margin-right: 31px; } } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps__item:nth-child(4) { margin-right: 18px; } .case-study-analytics-heatmaps__item:nth-child(4) img { width: 10px; } } .case-study-analytics-heatmaps__item:nth-child(5) { margin-right: 50px; } @media only screen and (max-width: 991px) { .case-study-analytics-heatmaps__item:nth-child(5) { margin-right: 25px; } } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps__item:nth-child(5) { margin-right: 16px; } .case-study-analytics-heatmaps__item:nth-child(5) img { width: 18px; } } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps__item:nth-child(6) { width: 27px; } } .case-study-analytics-heatmaps__caption { color: #1a237e; font-size: 16px; letter-spacing: -0.96px; font-weight: 400; font-variation-settings: "wght" 400; } @media only screen and (max-width: 767.98px) { .case-study-analytics-heatmaps__caption { font-size: 5px; letter-spacing: -0.291px; } } .case-study-rates { padding-top: 160px; padding-bottom: 160px; color: #000; } @media only screen and (max-width: 767.98px) { .case-study-rates { padding-top: 48px; padding-bottom: 48px; } } .case-study-rates__items { display: flex; flex-direction: column; gap: 48px; } @media only screen and (max-width: 767.98px) { .case-study-rates__items { gap: 24px; } } .case-study-rates__item { padding-right: 50%; position: relative; min-height: 144px; } @media only screen and (max-width: 767.98px) { .case-study-rates__item { padding-right: 0; min-height: 0; } .case-study-rates__item .site-case-study__title { margin-bottom: 8px; } } .case-study-rates__item:last-child .case-study-rates__item--number:before { display: none; } .case-study-rates__item--number { position: absolute; top: 0; right: 0; width: 40%; display: flex; flex-direction: column; gap: 4px; height: 100%; text-align: center; justify-content: center; } @media only screen and (max-width: 767.98px) { .case-study-rates__item--number { position: static; width: 100%; gap: 8px; margin-top: 24px; } } .case-study-rates__item--number:before { pointer-events: none; content: ""; position: absolute; bottom: -24px; left: 0; width: 100%; display: block; height: 1px; background: url('data:image/svg+xml;utf8,') center center no-repeat; background-size: cover; } @media only screen and (max-width: 767.98px) { .case-study-rates__item--number:before { display: none; } } .case-study-rates__item--number strong { font-size: 32px; font-weight: 600; font-variation-settings: "wght" 600; line-height: normal; letter-spacing: 0.48px; } .case-study-rates__item--number span { color: var(--Blue-Blue---100, #0016f8); font-size: 14px; letter-spacing: -0.84px; line-height: 24px; font-weight: 600; font-variation-settings: "wght" 600; } .case-study-user-interview { position: relative; } .case-study-user-interview__content { position: relative; z-index: 1; padding-top: 160px; padding-bottom: 264px; gap: 65px; display: flex; align-items: flex-end; } @media only screen and (max-width: 767.98px) { .case-study-user-interview__content { padding-top: 48px; padding-bottom: 165px; align-items: unset; gap: 32px; flex-direction: column; } } .case-study-user-interview__content--details { flex: 0 0 32.5%; max-width: 32.5%; } @media only screen and (max-width: 767.98px) { .case-study-user-interview__content--details { flex: 0 0 100%; max-width: 100%; } } .case-study-user-interview__content--details > .site-case-study__description { margin-bottom: 48px; } @media only screen and (max-width: 767.98px) { .case-study-user-interview__content--details > .site-case-study__description { margin-bottom: 32px; } } .case-study-user-interview__content--charts { flex: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 100px; } @media only screen and (max-width: 991px) { .case-study-user-interview__content--charts { padding-bottom: 80px; } } @media only screen and (max-width: 767.98px) { .case-study-user-interview__content--charts { padding-bottom: 0; gap: 60px; align-items: flex-start; } } .case-study-user-interview__content--charts_small { width: 61%; } @media only screen and (max-width: 1199px) { .case-study-user-interview__content--charts_small { width: 75%; } } @media only screen and (max-width: 767.98px) { .case-study-user-interview__content--charts_small { width: 100%; max-width: 360px; } .case-study-user-interview__content--charts_small .case-study-user-interview__content--charts-title { margin-bottom: 36px; } } .case-study-user-interview__content--charts_large { width: 100%; } @media only screen and (max-width: 767.98px) { .case-study-user-interview__content--charts_large { margin-right: -16px; width: calc(100% + 16px); } } .case-study-user-interview__content--charts-title { margin-bottom: 64px; font-size: 16px; font-weight: 500; font-variation-settings: "wght" 500; line-height: 32px; letter-spacing: -0.96px; } @media only screen and (max-width: 767.98px) { .case-study-user-interview__content--charts-title { margin-bottom: 52px; font-size: 14px; line-height: 18.065px; letter-spacing: -0.84px; } } .case-study-user-interview__content--charts-chart ul { display: flex; width: 100%; } .case-study-user-interview__content--charts-chart ul li { position: relative; height: 49px; text-align: center; display: flex; align-items: center; justify-content: center; } @media only screen and (max-width: 767.98px) { .case-study-user-interview__content--charts-chart ul li { height: 27px; } } .case-study-user-interview__content--charts-chart ul li span:not(.case-study-user-interview__content--charts-chart_title) { position: absolute; left: 50%; transform: translateX(-50%) translateY(-100%); top: 2px; padding-top: 16px; } .case-study-user-interview__content--charts-chart ul li span:not(.case-study-user-interview__content--charts-chart_title) b { padding-top: 6px; color: var(--White, #fff); filter: blur(2px); line-height: 19.2px; font-weight: 700; font-variation-settings: "wght" 700; font-size: 12px; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); } @media only screen and (max-width: 767.98px) { .case-study-user-interview__content--charts-chart ul li span:not(.case-study-user-interview__content--charts-chart_title) b { line-height: 10.932px; font-size: 6.833px; filter: blur(1.1387511492px); } } @media only screen and (max-width: 767.98px) { .case-study-user-interview__content--charts-chart ul li span:not(.case-study-user-interview__content--charts-chart_title) svg { width: 35px; height: 22px; } } .case-study-user-interview__content--charts-chart_title { color: var(--White, #fff); font-size: 12px; font-weight: 700; font-variation-settings: "wght" 700; line-height: 31px; } @media only screen and (max-width: 767.98px) { .case-study-user-interview__content--charts-chart_title { font-size: 6.774px; line-height: 17.5px; } } .case-study-user-interview__content--charts-chart_vertical .case-study-user-interview__content--charts-chart_title { writing-mode: sideways-lr; font-size: 7px; } @media only screen and (max-width: 767.98px) { .case-study-user-interview__content--charts-chart_vertical .case-study-user-interview__content--charts-chart_title { font-size: 4px; } } .case-study-user-interview__content--charts-chart_tooltip-down { top: unset !important; bottom: 2px !important; transform: translateX(-50%) translateY(100%) !important; padding-top: 6px !important; } @media only screen and (max-width: 767.98px) { .case-study-user-interview__content--charts-chart_tooltip-down { padding-top: 8px !important; } } .case-study-user-interview__list { margin-bottom: 48px; font-size: 16px; letter-spacing: -0.96px; line-height: 24px; } @media only screen and (max-width: 767.98px) { .case-study-user-interview__list { margin-bottom: 32px; font-size: 14px; line-height: 28px; letter-spacing: -0.84px; } } .case-study-user-interview__subtitle { font-size: 32px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 24px; letter-spacing: 0.48px; margin-bottom: 24px; } @media only screen and (max-width: 767.98px) { .case-study-user-interview__subtitle { font-size: 24px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 32px; margin-bottom: 16px; letter-spacing: 0.36px; } } .case-study-user-interview__sub-area { max-width: 520px; margin-bottom: 24px; } @media only screen and (max-width: 767.98px) { .case-study-user-interview__sub-area { max-width: 100%; margin-bottom: 0; } } .case-study-user-interview__sub-area .site-case-study__description { background: linear-gradient(166deg, #000 5.65%, rgba(0, 0, 0, 0.1) 103.73%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 24px; } @media only screen and (max-width: 767.98px) { .case-study-user-interview__sub-area .site-case-study__description { line-height: 22px; } } .case-study-user-interview__image { position: absolute; bottom: 0; left: 0; transform: translateY(55%); } @media only screen and (max-width: 767.98px) { .case-study-user-interview__image { width: 179px; transform: translateY(53%); } .case-study-user-interview__image svg { width: 100%; } } .case-study-key-problems { padding-top: 460px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-key-problems { padding-top: 200px; padding-bottom: 48px; } } .case-study-key-problems__content { display: flex; align-items: center; gap: 48px; justify-content: space-between; } @media only screen and (max-width: 767.98px) { .case-study-key-problems__content { gap: 32px; flex-direction: column; } } .case-study-key-problems__description { max-width: 790px; } .case-study-key-problems__title { color: var(--Blue-Blue---100, #0016f8); font-size: 64px; font-weight: 759; font-variation-settings: "wght" 759; max-width: 523px; line-height: normal; } @media only screen and (max-width: 767.98px) { .case-study-key-problems__title { font-size: 32px; max-width: 224px; } } .case-study-affinity-mapping { padding-top: 160px; text-align: center; position: relative; } @media only screen and (max-width: 767.98px) { .case-study-affinity-mapping { padding-top: 48px; overflow: hidden; } } .case-study-affinity-mapping .container { position: relative; z-index: 1; } .case-study-affinity-mapping__image-lock { position: relative; } @media only screen and (max-width: 767.98px) { .case-study-affinity-mapping__image-lock img { min-height: 188px; object-fit: cover; object-position: left top; } .case-study-affinity-mapping__image-lock .case-study-lock { display: none; } } .case-study-affinity-mapping .site-case-study__description { margin-bottom: 80px; max-width: 732px; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767.98px) { .case-study-affinity-mapping .site-case-study__description { max-width: 100%; margin-bottom: 48px; } } .case-study-user-persona { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-user-persona { padding-top: 48px; padding-bottom: 48px; } } .case-study-user-persona .site-case-study__description { max-width: 792px; margin-bottom: 80px; } @media only screen and (max-width: 767.98px) { .case-study-user-persona .site-case-study__description { margin-bottom: 24px; } } .case-study-user-persona__content { border-radius: 8px; background: #fbfbfb; overflow: hidden; position: relative; display: flex; gap: 40px; } @media only screen and (max-width: 767.98px) { .case-study-user-persona__content { display: block; background: transparent; border-radius: unset; } } .case-study-user-persona__content--details { padding-top: 40px; padding-bottom: 40px; flex: 0 0 25%; max-width: 25%; } @media only screen and (max-width: 767.98px) { .case-study-user-persona__content--details { max-width: 100%; padding: 0; } } .case-study-user-persona__content--details:last-child { flex: 1; max-width: unset; } @media only screen and (max-width: 767.98px) { .case-study-user-persona__content--details-desktop { display: none; } } .case-study-user-persona__content--details-mobile { display: none; } @media only screen and (max-width: 767.98px) { .case-study-user-persona__content--details-mobile { display: block; margin-bottom: 16px; } } .case-study-user-persona__content--details-title { margin-bottom: 16px; font-size: 24px; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.36px; line-height: normal; } .case-study-user-persona__content--details-description { margin-bottom: 32px; color: #767676; font-size: 14px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 22px; letter-spacing: -0.84px; } @media only screen and (max-width: 767.98px) { .case-study-user-persona__content--details-description { margin-bottom: 16px; } } .case-study-user-persona__content--details-description li { position: relative; padding-left: 24px; } .case-study-user-persona__content--details-description li:before { content: ""; position: absolute; left: 8px; top: 9px; width: 4px; height: 4px; display: block; border-radius: 50%; background-color: #767676; } .case-study-user-persona__content--details-topics { display: flex; flex-wrap: wrap; gap: 8px; } .case-study-user-persona__content--details-topics a { border-radius: 8px; background: var(--Blue-Blue---100, #0016f8); padding: 8px 16px; color: #fff; font-size: 12px; letter-spacing: -0.5px; font-weight: 700; font-variation-settings: "wght" 700; line-height: 19.2px; } .case-study-user-persona__content--cover { position: relative; flex: 0 0 25%; max-width: 25%; border-radius: 8px 0px 0px 8px; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-user-persona__content--cover { max-width: 100%; padding: 0; border-radius: 8px; margin-bottom: 24px; } } .case-study-user-persona__content--cover-over { position: absolute; left: 40px; bottom: 80px; color: var(--White, #fff); font-size: 16px; font-weight: 700; font-variation-settings: "wght" 700; z-index: 1; line-height: 160%; } @media only screen and (max-width: 1199px) { .case-study-user-persona__content--cover-over { left: 20px; bottom: 40px; } } @media only screen and (max-width: 767.98px) { .case-study-user-persona__content--cover-over { font-size: 14px; } } .case-study-user-persona__content--cover-over strong { margin-bottom: 8px; display: block; font-size: 40px; font-weight: 700; font-variation-settings: "wght" 700; letter-spacing: -1px; } @media only screen and (max-width: 991px) { .case-study-user-persona__content--cover-over strong { font-size: 30px; } } @media only screen and (max-width: 767.98px) { .case-study-user-persona__content--cover-over strong { font-size: 32px; } } .case-study-user-persona__content--cover:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 65%; display: block; opacity: 0.5; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%); pointer-events: none; } @media only screen and (max-width: 767.98px) { .case-study-user-persona__content--cover:after { height: 44%; } } .case-study-user-persona__content--cover img { object-fit: cover; object-position: center center; width: 100%; height: 100%; } .case-study-user-persona__content--cover img.case-study-user-persona__content--cover-image_mobile { display: none !important; } @media only screen and (max-width: 767.98px) { .case-study-user-persona__content--cover img { min-height: 400px; object-position: center bottom; display: none !important; } .case-study-user-persona__content--cover img.case-study-user-persona__content--cover-image_mobile { display: block !important; } } .case-study-user-journey { position: relative; padding-top: 160px; } @media only screen and (max-width: 767.98px) { .case-study-user-journey { padding-top: 48px; overflow: hidden; } } .case-study-user-journey .container { position: relative; z-index: 1; } .case-study-user-journey .site-case-study__description { max-width: 792px; margin-bottom: 80px; } @media only screen and (max-width: 767.98px) { .case-study-user-journey .site-case-study__description { margin-bottom: 48px; } } .case-study-user-journey__content { position: relative; } @media only screen and (max-width: 767.98px) { .case-study-user-journey__content .case-study-lock { display: none; } } @media only screen and (max-width: 767.98px) { .case-study-user-journey__image { max-width: calc(100% + 16px) !important; margin-right: -16px; min-height: 209px; object-fit: cover; object-position: left center; } } .case-study-admin-comment { padding-bottom: 160px; padding-top: 160px; } @media only screen and (max-width: 767.98px) { .case-study-admin-comment { padding-top: 48px; padding-bottom: 48px; background: #fff; position: relative; z-index: 2; } } .case-study-admin-comment__content { padding-left: 140px; padding-right: 140px; display: flex; justify-content: space-between; gap: 160px; align-items: center; } @media only screen and (max-width: 1400px) { .case-study-admin-comment__content { padding-left: 80px; padding-right: 80px; } } @media only screen and (max-width: 1199px) { .case-study-admin-comment__content { padding-left: 0; padding-right: 0; } } @media only screen and (max-width: 991px) { .case-study-admin-comment__content { gap: 80px; } } @media only screen and (max-width: 767.98px) { .case-study-admin-comment__content { flex-direction: column; gap: 40px; } } .case-study-admin-comment__content--picture { flex: 0 0 388px; max-width: 388px; padding-left: 16px; position: relative; } @media only screen and (max-width: 991px) { .case-study-admin-comment__content--picture { flex: 0 0 280px; max-width: 280px; } } @media only screen and (max-width: 767.98px) { .case-study-admin-comment__content--picture { flex: 0 0 343px; max-width: 343px; padding-left: 14px; } } .case-study-admin-comment__content--picture img { position: relative; z-index: 1; } .case-study-admin-comment__content--picture:before { content: ""; position: absolute; left: 0; bottom: -16px; width: 312px; height: 345px; display: block; background: var(--Blue-Blue---70, #4d5cfa); } @media only screen and (max-width: 991px) { .case-study-admin-comment__content--picture:before { width: 230px; height: 240px; } } @media only screen and (max-width: 767.98px) { .case-study-admin-comment__content--picture:before { width: 287.355px; height: 316.819px; bottom: -14px; } } .case-study-admin-comment__content--details { display: flex; flex-direction: column; } @media only screen and (max-width: 767.98px) { .case-study-admin-comment__content--details { padding-top: 0; } } .case-study-admin-comment__content--details svg { margin-bottom: 10px; } @media only screen and (max-width: 767.98px) { .case-study-admin-comment__content--details svg { margin-bottom: 16px; width: 24px; height: 24px; } } .case-study-admin-comment__content--details p { color: #1a1a1a; font-size: 32px; letter-spacing: -1.92px; line-height: 56px; font-weight: 400; font-variation-settings: "wght" 400; margin-bottom: 32px; } @media only screen and (max-width: 767.98px) { .case-study-admin-comment__content--details p { margin-bottom: 8px; font-size: 14px; line-height: 22px; letter-spacing: -0.84px; } } .case-study-admin-comment__content--details h4 { font-size: 24px; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.36px; line-height: 32px; color: #1a1a1a; margin-bottom: 8px; } @media only screen and (max-width: 767.98px) { .case-study-admin-comment__content--details h4 { margin-bottom: 2px; font-size: 18px; letter-spacing: 0.27px; line-height: 28px; } } .case-study-admin-comment__content--details h5 { margin-bottom: 0; color: #727376; font-size: 18px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 32px; } @media only screen and (max-width: 767.98px) { .case-study-admin-comment__content--details h5 { font-size: 16px; line-height: 28px; letter-spacing: -0.96px; } } .case-study-laptop { position: relative; padding-top: 160px; padding-bottom: 160px; z-index: 5; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; } @media only screen and (max-width: 767.98px) { .case-study-laptop { padding-top: 48px; padding-bottom: 48px; min-height: auto; } } .case-study-laptop__content { position: relative; z-index: 1; } .case-study-laptop__images { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .case-study-laptop__images--frame { display: block; margin-left: auto; margin-right: auto; position: relative; } .case-study-laptop__images--frame .screenMonitor { display: flex; justify-content: center; width: fit-content; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; } .case-study-laptop__images--frame .downFrame { margin-top: -16px; position: relative; z-index: 1; } .case-study-laptop__images--frame > div > svg { display: block; width: 100%; height: auto; } .case-study-laptop__images--full { position: absolute; inset: 0; overflow-y: auto; margin: 32px 24px; border: 1px solid #EAECEC; border-radius: 4px; } @media only screen and (max-width: 767.98px) { .case-study-laptop__images--full { height: auto; aspect-ratio: 16/9; margin: 12px 8px; } } .case-study-laptop__images--full.is-gsap-pinned-scroll { overflow: hidden; overscroll-behavior: none; touch-action: none; } .case-study-laptop__images--full.is-gsap-pinned-scroll img { display: block; width: 100%; height: auto; max-width: none; will-change: transform; } .case-study-laptop .mask { position: absolute; inset: 0; pointer-events: none; z-index: 1; pointer-events: none; opacity: 0; } .case-study-laptop .mask svg { width: 100%; overflow: visible; } .case-study-laptop .mask svg:nth-child(1) { display: block; } @media only screen and (max-width: 767.98px) { .case-study-laptop .mask svg:nth-child(1) { display: none; } } .case-study-laptop .mask svg:nth-child(2) { display: none; } @media only screen and (max-width: 767.98px) { .case-study-laptop .mask svg:nth-child(2) { display: block; } } .case-study-user-comment { padding-top: 160px; padding-bottom: 160px; position: relative; z-index: 5; } @media only screen and (max-width: 767.98px) { .case-study-user-comment { padding-top: 48px; padding-bottom: 48px; background: #fff; } } .case-study-user-comment__content { max-width: 927px; display: flex; flex-direction: column; } .case-study-user-comment__content svg { margin-bottom: 10px; } @media only screen and (max-width: 767.98px) { .case-study-user-comment__content svg { margin-bottom: 16px; width: 24px; height: 24px; } } .case-study-user-comment__content p { color: #1a1a1a; font-size: 32px; letter-spacing: -1.92px; line-height: 56px; margin-bottom: 32px; } @media only screen and (max-width: 767.98px) { .case-study-user-comment__content p { margin-bottom: 8px; font-size: 14px; line-height: 22px; letter-spacing: -0.84px; } } .case-study-user-comment__content-info { position: relative; min-height: 80px; padding-left: 96px; } @media only screen and (max-width: 767.98px) { .case-study-user-comment__content-info { min-height: 56px; padding-left: 72px; } } .case-study-user-comment__content-info img { width: 80px; height: 80px; border-radius: 50%; border: 1px solid #225bff; object-fit: cover; object-position: center center; position: absolute; left: 0; top: 50%; transform: translateY(-50%); } @media only screen and (max-width: 767.98px) { .case-study-user-comment__content-info img { width: 56px; height: 56px; } } .case-study-user-comment__content-info h4 { font-size: 24px; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.36px; line-height: 32px; color: #1a1a1a; margin-bottom: 8px; } @media only screen and (max-width: 767.98px) { .case-study-user-comment__content-info h4 { margin-bottom: 2px; font-size: 18px; letter-spacing: 0.27px; line-height: 28px; } } .case-study-user-comment__content-info h5 { margin-bottom: 0; color: #727376; font-size: 20px; letter-spacing: -1.2px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 32px; letter-spacing: -1.2px; } @media only screen and (max-width: 767.98px) { .case-study-user-comment__content-info h5 { font-size: 16px; line-height: 28px; letter-spacing: -0.96px; } } .case-study-user-comment--difference { background: transparent; } @media only screen and (max-width: 767.98px) { .case-study-user-comment--difference { background: transparent; } } .case-study-user-comment--difference .case-study-user-comment__content > svg, .case-study-user-comment--difference .case-study-user-comment__content > p, .case-study-user-comment--difference .case-study-user-comment__content .case-study-user-comment__content-info h4, .case-study-user-comment--difference .case-study-user-comment__content .case-study-user-comment__content-info h5 { color: var(--cs-diff-text, #1a1a1a); } .case-study-user-comment--difference .case-study-user-comment__content > svg path { fill: var(--cs-diff-fill, #1a1a1a); } .case-study-user-comment--difference .case-study-user-comment__content .case-study-user-comment__content-info h5 { color: var(--cs-diff-text-muted, #727376); } body:has(.case-study-related-works.force-bg-dark) .case-study-user-comment:not(.case-study-user-comment--difference) { background: #fff; } .case-study-dark-light-mobile { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-dark-light-mobile { padding-top: 48px; padding-bottom: 48px; } } .case-study-dark-light-mobile__content { display: flex; align-items: center; justify-content: center; padding-top: 100px; } @media only screen and (max-width: 767.98px) { .case-study-dark-light-mobile__content { padding-top: 50px; } } .case-study-dark-light-mobile img { border: 10.263px solid var(--Gray-Gray---10, #eaecec); border-radius: 30.789px; position: relative; } @media only screen and (max-width: 1199px) { .case-study-dark-light-mobile img { max-width: 42%; } } @media only screen and (max-width: 767.98px) { .case-study-dark-light-mobile img { border-radius: 11.52px; border-width: 3.84px; } } .case-study-dark-light-mobile img:first-child { transform: rotate(-9.305deg) translateY(-100px); z-index: 1; } @media only screen and (max-width: 767.98px) { .case-study-dark-light-mobile img:first-child { transform: rotate(-9.305deg) translateY(-50px); } } .case-study-dark-light-mobile img:last-child { transform: rotate(7.108deg); } .case-study-dark-light { padding-top: 160px; padding-bottom: 160px; background: #fafafa; } @media only screen and (max-width: 767.98px) { .case-study-dark-light { padding-top: 48px; padding-bottom: 48px; } } .case-study-dark-light__content ul { padding: 0; list-style: none; display: flex; align-items: flex-start; gap: 40px; } @media only screen and (max-width: 767.98px) { .case-study-dark-light__content ul { gap: 10px; } } .case-study-dark-light__content ul li { border-radius: 24px; border: 8px solid var(--Gray-Gray---10, #eaecec); overflow: hidden; position: relative; } @media only screen and (max-width: 767.98px) { .case-study-dark-light__content ul li { border-radius: 5.374px; border-width: 1.791px; } } .case-study-dark-light__content ul li img { object-fit: cover; object-position: center center; width: 100%; height: 100%; transition: all 0.3s; } .case-study-dark-light__content ul li img:last-child { position: absolute; opacity: 0; right: 0; top: 0; } .case-study-dark-light__content ul li:nth-child(2) { margin-top: 72px; } @media only screen and (max-width: 767.98px) { .case-study-dark-light__content ul li:nth-child(2) { margin-top: 16px; } } .case-study-dark-light__content ul li:nth-child(3) { margin-top: 144px; } @media only screen and (max-width: 767.98px) { .case-study-dark-light__content ul li:nth-child(3) { margin-top: 32px; } } .case-study-dark-light__content--toggle { display: flex; align-items: center; gap: 40px; } @media only screen and (max-width: 991px) { .case-study-dark-light__content--toggle { gap: 20px; margin-top: 20px; } } @media only screen and (max-width: 767.98px) { .case-study-dark-light__content--toggle { gap: 8px; } } .case-study-dark-light__content--toggle .site-case-study__title { margin: 0; transition: all 0.3s; color: #acb1b5; } .case-study-dark-light__content--toggle .site-case-study__title:first-child { color: #000; } .case-study-dark-light__content--toggle-area { position: relative; border-radius: 40px; background: #fff; box-shadow: 0px 40px 80px 0px rgba(150, 171, 191, 0.2); width: 128px; height: 72px; } @media only screen and (max-width: 767.98px) { .case-study-dark-light__content--toggle-area { width: 94px; height: 48px; } } .case-study-dark-light__content--toggle-area input { width: 100%; display: block; height: 100%; position: absolute; right: 0; top: 0; content: ""; opacity: 0; cursor: pointer !important; z-index: 1; } .case-study-dark-light__content--toggle-area span { display: block; background-color: var(--Blue-Blue---100, #0016f8); height: 64px; width: 64px; border-radius: 50%; transition: all 0.4s; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); } @media only screen and (max-width: 767.98px) { .case-study-dark-light__content--toggle-area span { width: 40px; height: 40px; } } .case-study-dark-light__content--toggle-area span svg { position: absolute; left: 50%; top: 50%; transition: all 0.3s; transform: translateX(-50%) translateY(-50%); } @media only screen and (max-width: 767.98px) { .case-study-dark-light__content--toggle-area span svg { width: 24px; height: 24px; } } .case-study-dark-light__content--toggle-area span svg:last-child { opacity: 0; } .case-study-dark-light__content:has(input:checked) ul li img { opacity: 0; } .case-study-dark-light__content:has(input:checked) ul li img:last-child { opacity: 1; } .case-study-dark-light__content:has(input:checked) .site-case-study__title { color: #acb1b5; } .case-study-dark-light__content:has(input:checked) .site-case-study__title:last-child { color: #000; } .case-study-dark-light__content:has(input:checked) .case-study-dark-light__content--toggle-area span { transform: translateY(-50%) translateX(56px); } .case-study-dark-light__content:has(input:checked) .case-study-dark-light__content--toggle-area span svg { opacity: 0; } .case-study-dark-light__content:has(input:checked) .case-study-dark-light__content--toggle-area span svg:last-child { opacity: 1; } .case-study-what-this-page { position: relative; padding-top: 160px; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-what-this-page { padding-top: 48px; } } .case-study-what-this-page__content { position: relative; z-index: 1; display: flex; gap: 140px; padding-left: 270px; padding-right: 270px; } @media only screen and (max-width: 1400px) { .case-study-what-this-page__content { padding-left: 160px; padding-right: 160px; gap: 80px; } } @media only screen and (max-width: 1199px) { .case-study-what-this-page__content { padding-left: 0; padding-right: 0; } } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content { flex-direction: column; gap: 48px; align-items: flex-end; } } .case-study-what-this-page__content--details { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 120px; flex: 1; gap: 8px; } @media only screen and (max-width: 991px) { .case-study-what-this-page__content--details { padding-bottom: 80px; } } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content--details { padding-bottom: 0; gap: 0; width: 100%; } } .case-study-what-this-page__content--frame { border-radius: 24px 24px 0 0; border: 8px solid var(--Gray-Gray---10, #eaecec); background: #fff; position: relative; flex: 0 0 406px; max-width: 406px; border-bottom: none; } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content--frame { flex: unset; max-width: 220px; border-width: 4.51px; border-radius: 13.531px 13.531px 0 0; } } .case-study-what-this-page__content--frame-head { border-radius: 24px 24px 0 0; margin-bottom: 12px; height: 66.56px; display: flex; align-items: center; justify-content: space-between; padding-left: 16px; padding-right: 16px; background: var(--Solitude-40, #f7f9fd); } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content--frame-head { border-radius: 13.531px 13.531px 0 0; margin-bottom: 7px; height: 37.525px; padding-left: 9px; padding-right: 9px; } } .case-study-what-this-page__content--frame-head svg { display: block; } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content--frame-head_logo svg { width: 70.117px; height: auto; } } .case-study-what-this-page__content--frame-head_menu { background: transparent; border: none; padding: 0; cursor: pointer !important; } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content--frame-head_menu svg { width: 18.763px; height: auto; } } .case-study-what-this-page__content--frame-view { background: var(--Solitude-70, #f0f4fc); padding-top: 30px; padding-left: 16px; padding-right: 16px; } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content--frame-view { padding-left: 9px; padding-right: 9px; padding-top: 16px; } } .case-study-what-this-page__content--frame-slider { padding-right: 16px; padding-left: 16px; padding-bottom: 40px; } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content--frame-slider { padding-left: 9px; padding-right: 9px; padding-bottom: 22px; } } .case-study-what-this-page__content--frame-slider_slides { direction: rtl; display: flex; gap: 24px; } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content--frame-slider_slides { gap: 12px; } } .case-study-what-this-page__content--frame-slider_slides .digiato__card { min-width: 298px; } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content--frame-slider_slides .digiato__card { min-width: 168px; } } .case-study-what-this-page__content--frame-slider_slides .digiato__card img { border-radius: 16px; } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content--frame-slider_slides .digiato__card img { border-radius: 9px; } } .case-study-what-this-page__content--album { display: flex; justify-content: center; margin-bottom: -110px; position: relative; } @media only screen and (max-width: 991px) { .case-study-what-this-page__content--album { margin-bottom: -50px; align-items: flex-end; } } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content--album { width: 100%; } } .case-study-what-this-page__content--album:before { position: absolute; left: 50%; bottom: 0; pointer-events: none; width: 348px; height: 740px; filter: blur(83.8901138306px); background: rgba(150, 171, 191, 0.2); content: ""; display: block; z-index: 1; transform: rotate(9.997deg) translateX(-50%); } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content--album:before { width: 149.288px; height: 317.773px; filter: blur(35.9594688416px); } } .case-study-what-this-page__content--album img { position: relative; border-radius: 50px; border: 7px solid #eaecec; } @media only screen and (max-width: 991px) { .case-study-what-this-page__content--album img { border-width: 3px; border-radius: 30px; } } .case-study-what-this-page__content--album img:first-of-type { z-index: 0; width: 47%; transform: rotate(-9.997deg) translateY(50px); } @media only screen and (max-width: 991px) { .case-study-what-this-page__content--album img:first-of-type { width: 52.5%; } } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content--album img:first-of-type { width: 148px; transform: rotate(-9.997deg) translateY(-5px); } } .case-study-what-this-page__content--album img:last-of-type { z-index: 2; width: 51.5%; transform: rotate(9.997deg) translateX(-50px); } @media only screen and (max-width: 991px) { .case-study-what-this-page__content--album img:last-of-type { width: 54%; } } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content--album img:last-of-type { width: 164px; transform: rotate(9.997deg) translateX(-20px); } } @media only screen and (max-width: 1199px) { .case-study-what-this-page__content--only-image { width: 50%; } } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content--only-image { width: 90%; } } .case-study-what-this-page__content:has(.case-study-what-this-page__content--only-image) { padding-right: 140px; } @media only screen and (max-width: 1400px) { .case-study-what-this-page__content:has(.case-study-what-this-page__content--only-image) { padding-left: 50px; padding-right: 0; } } @media only screen and (max-width: 1199px) { .case-study-what-this-page__content:has(.case-study-what-this-page__content--only-image) { padding-left: 0; padding-right: 0; } } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content:has(.case-study-what-this-page__content--only-image) { gap: 32px; } } .case-study-what-this-page__content:has(.case-study-what-this-page__content--album) { padding-right: 90px; padding-left: 200px; } @media only screen and (max-width: 1400px) { .case-study-what-this-page__content:has(.case-study-what-this-page__content--album) { padding-left: 50px; padding-right: 50px; } } @media only screen and (max-width: 1199px) { .case-study-what-this-page__content:has(.case-study-what-this-page__content--album) { padding-left: 0; padding-right: 40px; } } @media only screen and (max-width: 991px) { .case-study-what-this-page__content:has(.case-study-what-this-page__content--album) { padding-right: 0; } } .case-study-what-this-page__content:has(.case-study-what-this-page__content--album) .case-study-what-this-page__content--details { min-width: 390px; } @media only screen and (max-width: 991px) { .case-study-what-this-page__content:has(.case-study-what-this-page__content--album) .case-study-what-this-page__content--details { min-width: 330px; } } @media only screen and (max-width: 767.98px) { .case-study-what-this-page__content:has(.case-study-what-this-page__content--album) .case-study-what-this-page__content--details { min-width: unset; } } .case-study-what-this-page.case-study-what-this-page--eirak .case-study-what-this-page__content--frame-head { height: 72px; background: #fff; margin-bottom: 0; flex-direction: row-reverse; } @media only screen and (max-width: 767.98px) { .case-study-what-this-page.case-study-what-this-page--eirak .case-study-what-this-page__content--frame-head { height: 38px; } } .case-study-what-this-page.case-study-what-this-page--eirak .case-study-what-this-page__content--frame-head_flag { margin-left: 16px; margin-right: auto; } @media only screen and (max-width: 767.98px) { .case-study-what-this-page.case-study-what-this-page--eirak .case-study-what-this-page__content--frame-head_flag { margin-left: 8px; width: 16px; height: auto; } } @media only screen and (max-width: 767.98px) { .case-study-what-this-page.case-study-what-this-page--eirak .case-study-what-this-page__content--frame-head_logo svg { width: 51px; height: auto; } } .case-study-what-this-page.case-study-what-this-page--eirak .case-study-what-this-page__content--frame-view { padding: 0; } @media only screen and (max-width: 767.98px) { .case-study-what-this-page.case-study-what-this-page--eirak .case-study-what-this-page__content { align-items: center; } } .case-study-what-this-page.case-study-what-this-page--artapan .case-study-what-this-page__content--frame, .case-study-what-this-page.case-study-what-this-page--rahyab .case-study-what-this-page__content--frame, .case-study-what-this-page.case-study-what-this-page--bagzee-mobile-app .case-study-what-this-page__content--frame { border-radius: 48px 48px 0 0; overflow: hidden; flex: 0 0 390px; max-width: 390px; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767.98px) { .case-study-what-this-page.case-study-what-this-page--artapan .case-study-what-this-page__content--frame, .case-study-what-this-page.case-study-what-this-page--rahyab .case-study-what-this-page__content--frame, .case-study-what-this-page.case-study-what-this-page--bagzee-mobile-app .case-study-what-this-page__content--frame { max-width: 220px; flex: unset; border-radius: 30px 30px 0 0; } } .case-study-what-this-page.case-study-what-this-page--artapan .case-study-what-this-page__content--frame-view, .case-study-what-this-page.case-study-what-this-page--rahyab .case-study-what-this-page__content--frame-view, .case-study-what-this-page.case-study-what-this-page--bagzee-mobile-app .case-study-what-this-page__content--frame-view { background: transparent; padding: 0; } .case-study-what-this-page.case-study-what-this-page--artapan .case-study-what-this-page__content--frame-view img, .case-study-what-this-page.case-study-what-this-page--rahyab .case-study-what-this-page__content--frame-view img, .case-study-what-this-page.case-study-what-this-page--bagzee-mobile-app .case-study-what-this-page__content--frame-view img { width: 100%; } .case-study-what-this-page.case-study-what-this-page--yabex { padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-what-this-page.case-study-what-this-page--yabex { padding-bottom: 40px; } } .case-study-what-this-page.case-study-what-this-page--yabex .case-study-what-this-page__content { justify-content: center; } .case-study-what-this-page.case-study-what-this-page--yabex .case-study-what-this-page__content .case-study-what-this-page__content--album { margin-bottom: 0; } .case-study-description-logo { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-description-logo { padding-top: 48px; padding-bottom: 48px; } } .case-study-description-logo__content { display: flex; align-items: center; gap: 138px; padding: 0 135px; } @media only screen and (max-width: 1199px) { .case-study-description-logo__content { padding: 0; gap: 120px; } } @media only screen and (max-width: 991px) { .case-study-description-logo__content { gap: 80px; } } @media only screen and (max-width: 767.98px) { .case-study-description-logo__content { gap: 48px; flex-direction: column; } } .case-study-description-logo__content--description { opacity: 0.7; font-size: 16px; letter-spacing: -0.96px; line-height: 32px; flex: 1; } @media only screen and (max-width: 767.98px) { .case-study-description-logo__content--description { font-size: 14px; letter-spacing: -0.84px; line-height: 24px; flex: unset; } } .case-study-description-logo__content--logo { height: 400px; flex: 0 0 400px; min-width: 400px; border-radius: 50%; background: var(--Solitude-20, #fafbfd); display: flex; align-items: center; justify-content: center; } @media only screen and (max-width: 991px) { .case-study-description-logo__content--logo { height: 300px; flex: 0 0 300px; min-width: 300px; } .case-study-description-logo__content--logo svg { max-width: 45%; } } @media only screen and (max-width: 767.98px) { .case-study-description-logo__content--logo { height: 358px; flex: 0 0 358px; min-width: 358px; } .case-study-description-logo__content--logo svg { width: 162.855px; height: 162.855px; } } .case-study-gutenberg-blocks { padding-top: 160px; padding-bottom: 160px; position: relative; } @media only screen and (max-width: 767.98px) { .case-study-gutenberg-blocks { padding-top: 48px; padding-bottom: 48px; } } .case-study-gutenberg-blocks__content { position: relative; z-index: 1; } .case-study-gutenberg-blocks__content .site-case-study__title { text-align: center; } @media only screen and (max-width: 767.98px) { .case-study-gutenberg-blocks__content .site-case-study__title { text-align: left; } } .case-study-gutenberg-blocks__content .site-case-study__description { margin-bottom: 120px; max-width: 1010px; text-align: center; margin-left: auto; margin-right: auto; } @media only screen and (max-width: 767.98px) { .case-study-gutenberg-blocks__content .site-case-study__description { margin-bottom: 48px; text-align: left; } } .case-study-gutenberg-blocks__content--gallery { position: relative; height: 54vw; max-height: 890px; } .case-study-gutenberg-blocks__content--gallery-picture { position: absolute; border-radius: 4px; } .case-study-gutenberg-blocks__content--gallery-picture_calendar { border-radius: 8px; box-shadow: -116px 40px 80px 0px rgba(150, 171, 191, 0.2); right: 7.7%; top: 0; z-index: 1; max-width: 24% !important; } .case-study-gutenberg-blocks__content--gallery-picture_feedback { left: 18%; top: 1.1%; border-radius: 4px; max-width: 30% !important; } .case-study-gutenberg-blocks__content--gallery-picture_list { left: 5%; top: 18%; max-width: 12% !important; } .case-study-gutenberg-blocks__content--gallery-picture_downloads { left: 19.6%; top: 29.6%; border-radius: 4px; max-width: 57% !important; } .case-study-gutenberg-blocks__content--gallery-picture_form { left: -3.5%; top: 46.5%; z-index: 1; max-width: 36% !important; } .case-study-gutenberg-blocks__content--gallery-picture_comment { left: 31%; top: 83.5%; max-width: 21% !important; } .case-study-gutenberg-blocks__content--gallery-picture_player { right: -2%; top: 73.2%; border-radius: 4px; max-width: 45% !important; } .case-study-gutenberg-blocks__content--gallery-picture_gtt1 { right: 4.6%; top: 43%; max-width: 2.8% !important; } .case-study-gutenberg-blocks__content--gallery-picture_gtt2 { left: 30.8%; top: 73.4%; max-width: 4% !important; } .case-study-illustrations { padding-top: 160px; padding-bottom: 160px; position: relative; } @media only screen and (max-width: 767.98px) { .case-study-illustrations { padding-top: 48px; padding-bottom: 48px; } } .case-study-illustrations:before { pointer-events: none; content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 62%; display: block; background: #fafafa; } @media only screen and (max-width: 767.98px) { .case-study-illustrations:before { display: none; } } .case-study-illustrations__content { position: relative; z-index: 1; } .case-study-illustrations__content--head { display: flex; gap: 40px; justify-content: space-between; align-items: flex-end; margin-bottom: 40px; } .case-study-illustrations__content--head .site-case-study__description { max-width: 657px; } @media only screen and (max-width: 767.98px) { .case-study-illustrations__content--head .site-case-study__description { max-width: 100%; margin-bottom: 16px; } } .case-study-illustrations__content--head_arrows { display: flex; gap: 32px; } @media only screen and (max-width: 767.98px) { .case-study-illustrations__content--head_arrows { display: none; } } .case-study-illustrations__content--head_arrows button { color: var(--Blue-Blue---100, #0016f8); font-size: 16px; font-weight: 700; font-variation-settings: "wght" 700; padding: 0; border: none; background: transparent; transition: all 0.3s; } .case-study-illustrations__content--head_arrows button.is-disabled { opacity: 0.3; pointer-events: none; } .case-study-illustrations__content--slider { position: relative; } .case-study-illustrations__content--slider-viewport { overflow: visible; touch-action: pan-y; cursor: grab; user-select: none; } .case-study-illustrations__content--slider-viewport:active { cursor: grabbing; } .case-study-illustrations__content--slider-track { display: flex; align-items: stretch; width: max-content; will-change: transform; } .case-study-illustrations__content--slider .slider-item { flex: 0 0 auto; margin-right: 24px; } @media only screen and (max-width: 767.98px) { .case-study-illustrations__content--slider .slider-item { margin-right: 16px; } } .case-study-illustrations__content--slider .slider-item:last-child { margin-right: 0; } .case-study-illustrations__content--slider-slide_picture { padding: 80px; background: var(--White, #fff); box-shadow: 0px 47.751px 95.502px 0px rgba(150, 171, 191, 0.2); } @media only screen and (max-width: 1199px) { .case-study-illustrations__content--slider-slide_picture { padding: 40px; } } @media only screen and (max-width: 767.98px) { .case-study-illustrations__content--slider-slide_picture { padding: 32px; box-shadow: 0px 19.274px 38.548px 0px rgba(150, 171, 191, 0.2); } } .case-study-illustrations__content--slider-slide_picture img { display: block; width: 100%; height: auto; } .case-study-illustrations__content--slider-credits { color: var(--Black-Black---50, #808080); margin-top: 8px; display: block; font-size: 12px; line-height: 24px; letter-spacing: -0.12px; font-weight: 400; font-variation-settings: "wght" 400; } .case-study-banner-description { position: relative; padding-top: 160px; } @media only screen and (max-width: 767.98px) { .case-study-banner-description { padding-top: 48px; } } .case-study-banner-description__content { position: relative; z-index: 1; display: flex; gap: 108px; align-items: flex-end; } @media only screen and (max-width: 991px) { .case-study-banner-description__content { gap: 80px; } } @media only screen and (max-width: 767.98px) { .case-study-banner-description__content { gap: 24px; flex-direction: column-reverse; align-items: unset; } } .case-study-banner-description__content--text { color: var(--White, #fff); font-size: 24px; font-weight: 400; font-variation-settings: "wght" 400; letter-spacing: -1.44px; line-height: 40px; margin-bottom: 120px; flex: 1; } @media only screen and (max-width: 1199px) { .case-study-banner-description__content--text { min-width: 45%; } } @media only screen and (max-width: 991px) { .case-study-banner-description__content--text { min-width: 47%; padding-bottom: 40px; } } @media only screen and (max-width: 767.98px) { .case-study-banner-description__content--text { min-width: 100%; padding-bottom: 0; font-size: 14px; letter-spacing: -0.84px; line-height: 28px; } } .case-study-banner-description__content--image { border-radius: 16px 16px 0 0; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-banner-description__content--image { border-radius: 6.288px 6.288px 0 0; width: 276px; margin-left: auto; margin-right: auto; } } @font-face { font-family: "IRANSansXV"; src: url("./assets/fonts/IRANSansX/IRANSansXV.woff") format("woff-variations"), url("./assets/fonts/IRANSansX/IRANSansXV.woff") format("woff"); font-weight: 100 900; font-display: fallback; } @font-face { font-family: "IRANSansX"; src: url("./assets/fonts/IRANSansX/IRANSansX-Regular.woff") format("woff"); } @font-face { font-family: "IRANSansX"; src: url("./assets/fonts/IRANSansX/IRANSansX-Bold.woff") format("woff"); font-weight: 700; font-variation-settings: "wght" 700; } .iranSansFont, .case-study-ds-typography__step4--title2 strong, .case-study-ds-typography__step4--title strong, .case-study-ds-typography__step4--category strong, .case-study-ds-typography__step4, .case-study-ds-typography__step2, .case-study-ds-table__content--col-card .table-card, .case-study-ds-table__content--col-details, .case-study-ds-buttons__content--details_button-button, .case-study-challenge__ds--button-button { direction: rtl; font-family: "IRANSansXV", "IRANSansX"; -moz-font-feature-settings: "ss02"; -webkit-font-feature-settings: "ss02"; font-feature-settings: "ss02"; font-variation-settings: "DOTS" 3; } .case-study-ds-hero { position: relative; padding-top: 160px; z-index: 5; } @media only screen and (max-width: 767px) { .case-study-ds-hero { padding-top: 48px; } } .case-study-ds-hero .mask { position: absolute; inset: 0; pointer-events: none; z-index: 1; pointer-events: none; opacity: 0; } .case-study-ds-hero .mask svg { width: 100%; overflow: visible; } .case-study-ds-hero .mask svg:nth-child(1) { display: block; } @media only screen and (max-width: 767.98px) { .case-study-ds-hero .mask svg:nth-child(1) { display: none; } } .case-study-ds-hero .mask svg:nth-child(2) { display: none; } @media only screen and (max-width: 767.98px) { .case-study-ds-hero .mask svg:nth-child(2) { display: block; } } .case-study-ds-hero__content { position: relative; z-index: 1; text-align: center; } .case-study-ds-hero__content--links { padding-top: 34px; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 24px; } @media only screen and (max-width: 767.98px) { .case-study-ds-hero__content--links { padding-top: 16px; justify-content: flex-start; gap: 16px; } } .case-study-ds-hero__content--links-link { background: var(--White, #fff); padding: 10px 32px; display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--Blue-Blue---100, #0016f8); font-size: 16px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 32px; transition: all 0.3s; } @media only screen and (max-width: 767.98px) { .case-study-ds-hero__content--links-link { padding: 8px 16px; font-size: 14px; } } .case-study-ds-hero__content--links-link:hover { color: var(--White, #fff); background: var(--Blue-Blue---100, #0016f8); } .case-study-ds-hero__gallery { margin-top: 120px; display: flex; position: relative; z-index: 1; align-items: flex-end; } @media only screen and (max-width: 767.98px) { .case-study-ds-hero__gallery { margin-top: 48px; } } .case-study-ds-hero__gallery--image { position: relative; border: 4px solid var(--Gray-Gray---10, #eaecec); } @media only screen and (max-width: 767.98px) { .case-study-ds-hero__gallery--image { border-width: 0.897px; } } .case-study-ds-hero__gallery--image:nth-child(1) { border-radius: 0 16px 0 0; border-left: none; border-bottom: none; box-shadow: 57px 26px 83px 0px rgba(150, 171, 191, 0.25); z-index: 4; width: 17.5%; } @media only screen and (max-width: 767.98px) { .case-study-ds-hero__gallery--image:nth-child(1) { border-radius: 0 3.589px 0 0; box-shadow: 12.785px 5.832px 18.616px 0px rgba(150, 171, 191, 0.25); } } .case-study-ds-hero__gallery--image:nth-child(2) { border-radius: 16px 16px 0 0; border-bottom: none; box-shadow: 62px 26px 83px 0px rgba(150, 171, 191, 0.25); z-index: 3; margin-left: -7.3%; width: 35%; } @media only screen and (max-width: 767.98px) { .case-study-ds-hero__gallery--image:nth-child(2) { border-radius: 3.589px 3.589px 0 0; box-shadow: 13.906px 5.832px 18.616px 0px rgba(150, 171, 191, 0.25); } } .case-study-ds-hero__gallery--image:nth-child(3) { border-radius: 0 16px 0 0; border-left: none; border-bottom: none; box-shadow: 55px 26px 83px 0px rgba(150, 171, 191, 0.25); z-index: 2; margin-left: -8.3%; width: 34%; } @media only screen and (max-width: 767.98px) { .case-study-ds-hero__gallery--image:nth-child(3) { border-radius: 0 3.589px 0 0; box-shadow: 12.336px 5.832px 18.616px 0px rgba(150, 171, 191, 0.25); } } .case-study-ds-hero__gallery--image:nth-child(4) { border-radius: 16px 0 0 0; border-right: none; border-bottom: none; z-index: 1; margin-left: -4%; width: 33%; } @media only screen and (max-width: 767.98px) { .case-study-ds-hero__gallery--image:nth-child(4) { border-radius: 3.589px 0 0 0; } } .case-study-challenge-ds-fields { border-radius: 8px; border: 1px solid var(--Gray-Gray---10, #eaecec); background: var(--White, #fff); box-shadow: 28px -10px 137px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03); padding: 24px; width: 339px; } .case-study-challenge-ds-fields__head { display: flex; align-items: center; gap: 21px; margin-bottom: 20px; } .case-study-challenge-ds-fields__head--title { margin-right: auto; display: flex; align-items: center; gap: 8px; color: #000; font-size: 16px; font-weight: 500; font-variation-settings: "wght" 500; line-height: 24px; } .case-study-challenge-ds-fields__content ul { display: flex; flex-direction: column; gap: 20px; } .case-study-challenge-ds-fields__content ul li { display: flex; align-items: center; gap: 8px; } .case-study-challenge-ds-fields__content--title { min-width: 130px; font-size: 16px; line-height: 24px; color: #000; } .case-study-challenge-ds-fields__content--select { display: flex; align-items: center; gap: 4px; font-size: 16px; line-height: 24px; color: #000; } .case-study-challenge-ds-fields__content--toggle { position: relative; cursor: pointer !important; } .case-study-challenge-ds-fields__content--toggle input { display: block; width: 100%; height: 100%; position: absolute; right: 0; top: 0; opacity: 0; z-index: 1; cursor: pointer; } .case-study-challenge-ds-fields__content--toggle_area { border-radius: 16px; border: 1.5px solid #000; background: var(--White, #fff); width: 36px; height: 18px; position: relative; transition: all 0.8s; } .case-study-challenge-ds-fields__content--toggle_area span { transition: all 0.8s; width: 18px; height: 18px; border-radius: 16px; border: 1.5px solid #000; background: var(--White, #fff); left: 0; position: absolute; top: 50%; transform: translateY(-50%); } .case-study-challenge-ds-fields__content--toggle:has(input:checked) .case-study-challenge-ds-fields__content--toggle_area { background: #000; } .case-study-challenge-ds-fields__content--toggle:has(input:checked) .case-study-challenge-ds-fields__content--toggle_area span { transform: translateY(-50%) translateX(18px); } .case-study-challenge__ds { position: relative; margin-top: 68px; } @media only screen and (max-width: 991px) { .case-study-challenge__ds { transform: scale(0.75) translateY(-10%) translateX(6%); margin-top: 0; } } @media only screen and (max-width: 767.98px) { .case-study-challenge__ds { display: none; } } .case-study-challenge__ds--button { position: absolute; right: 64%; top: 28px; } @media only screen and (max-width: 1400px) { .case-study-challenge__ds--button { right: 58%; } } @media only screen and (max-width: 1199px) { .case-study-challenge__ds--button { top: 0; right: 48%; } } .case-study-challenge__ds--button-sizing { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none; z-index: 1; } .case-study-challenge__ds--button-button { height: 52px; display: flex; width: 209px; align-items: center; border-radius: 4px; background: #fff; border: 2px solid var(--navy-blue-100-main-color, #16205b); gap: 8px; padding: 0 32px; color: var(--navy-blue-100-main-color, #16205b); font-size: 14px; font-weight: 700; font-variation-settings: "wght" 700; line-height: 32px; white-space: nowrap; justify-content: center; margin-left: -4px; } .case-study-challenge__ds--button-button svg { min-width: 18px; } .case-study-challenge__ds--fields { position: absolute; right: 60%; top: 350px; } @media only screen and (max-width: 1400px) { .case-study-challenge__ds--fields { right: 38%; } } @media only screen and (max-width: 1199px) { .case-study-challenge__ds--fields { top: 330px; right: 28%; } } @media only screen and (max-width: 991px) { .case-study-challenge__ds--fields { top: 24%; right: 29%; } } .case-study-challenge__ds--fields-notification { position: absolute; bottom: 100px; z-index: 1; left: calc(100% - 57px); background: var(--Success-50, #ecfdf3); border-radius: 8px; border: 0.5px solid var(--Success-700, #027a48); padding: 10px 18px; display: flex; white-space: nowrap; align-items: center; gap: 8px; color: var(--Success-700, #027a48); font-size: 16px; font-weight: 500; font-variation-settings: "wght" 500; line-height: 24px; } .case-study-challenge__ds--fields-doline { position: absolute; left: 208px; bottom: 17px; z-index: 1; display: flex; flex-direction: column-reverse; gap: 2px; } .case-study-challenge__ds--fields-doline span { background: var(--Blue-Blue---100, #0016f8); box-shadow: 0px 5.486px 10.971px 0px rgba(0, 0, 0, 0.12); padding: 5.486px 10.971px; display: flex; color: var(--White, #fff); font-size: 24px; line-height: normal; letter-spacing: -1.44px; min-width: 115px; align-items: center; justify-content: center; margin-left: 44px; } .case-study-challenge__ds--fields-digiato { position: absolute; left: 0; bottom: -80px; z-index: 1; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 2px; } .case-study-challenge__ds--fields-digiato span { background: #f15928; box-shadow: 0px 5.486px 10.971px 0px rgba(0, 0, 0, 0.12); display: flex; padding: 5.486px 10.971px; color: var(--White, #fff); font-size: 24px; font-weight: 400; font-variation-settings: "wght" 400; line-height: normal; letter-spacing: -1.44px; min-width: 115px; align-items: center; justify-content: center; } .case-study-challenge__ds--arrows svg { max-width: 100%; height: auto; } .case-study-ds-logo { position: relative; padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767px) { .case-study-ds-logo { padding-bottom: 48px; padding-top: 48px; } } .case-study-ds-logo .container { position: relative; z-index: 1; } .case-study-ds-logo .container .site-case-study__description { max-width: 657px; } @media only screen and (max-width: 767.98px) { .case-study-ds-logo .container .site-case-study__description { max-width: 100%; } } .case-study-ds-logo__before-after { margin-top: 127px; display: flex; position: relative; align-items: center; max-width: 554px; } @media only screen and (max-width: 767.98px) { .case-study-ds-logo__before-after { margin-top: 48px; } } .case-study-ds-logo__before-after:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 3px; height: calc(100% + 21px); display: block; background: #0016f8; } @media only screen and (max-width: 767.98px) { .case-study-ds-logo__before-after:after { width: 2px; height: calc(100% + 16px); } } .case-study-ds-logo__before-after--old { flex: 0 0 50%; max-width: 50%; display: flex; align-items: center; justify-content: center; gap: 20px; border-radius: 16px 0px 0px 15.986px; background: rgba(247, 249, 253, 0.2); flex-direction: column; height: 300px; color: var(--Black-Black---100, #000); font-size: 12px; font-weight: 500; font-variation-settings: "wght" 500; letter-spacing: -0.72px; text-transform: uppercase; } @media only screen and (max-width: 767.98px) { .case-study-ds-logo__before-after--old { gap: 14px; font-size: 7.813px; letter-spacing: -0.469px; border-radius: 10.417px 0px 0px 10.409px; height: 195px; } .case-study-ds-logo__before-after--old svg { width: 130px; height: 130px; } } .case-study-ds-logo__before-after--new { flex: 0 0 50%; max-width: 50%; display: flex; align-items: center; justify-content: center; gap: 20px; border-radius: 0px 15.986px 15.986px 0px; background: rgba(247, 249, 253, 0.2); flex-direction: column; height: 300px; color: var(--Black-Black---100, #000); font-size: 12px; font-weight: 500; font-variation-settings: "wght" 500; letter-spacing: -0.72px; text-transform: uppercase; } @media only screen and (max-width: 767.98px) { .case-study-ds-logo__before-after--new { gap: 14px; font-size: 7.813px; letter-spacing: -0.469px; border-radius: 0px 10.409px 10.409px 0px; height: 195px; } .case-study-ds-logo__before-after--new svg { width: 130px; height: 130px; } } .case-study-ds-colors { padding-top: 160px; } @media only screen and (max-width: 767px) { .case-study-ds-colors { padding-top: 48px; } } .case-study-ds-colors .site-case-study__description { max-width: 792px; } .case-study-ds-colors__codes { margin-top: 80px; margin-bottom: 50px; display: flex; flex-direction: column; gap: 48px; } @media only screen and (max-width: 767.98px) { .case-study-ds-colors__codes { display: none; } } .case-study-ds-colors__codes--row ul { display: flex; align-items: center; justify-content: center; } .case-study-ds-colors__codes--row ul li { color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; letter-spacing: -0.72px; text-transform: uppercase; line-height: normal; height: 50px; flex: 1 1 0; transition: all 0.4s; position: relative; } @media only screen and (max-width: 1199px) { .case-study-ds-colors__codes--row ul li { font-size: 11px; } } @media only screen and (max-width: 991px) { .case-study-ds-colors__codes--row ul li { font-size: 9px; } } .case-study-ds-colors__codes--row ul li:hover { z-index: 1; } .case-study-ds-colors__codes--row ul li.active { z-index: 1; transform: scale(1.2); } .case-study-ds-colors__codes-mobile { display: none; justify-content: center; margin-bottom: 40px; margin-top: 40px; } .case-study-ds-colors__codes-mobile span { height: 66px; display: flex; align-items: center; justify-content: center; width: 92px; line-height: normal; letter-spacing: -0.72px; text-transform: uppercase; color: #fff; font-size: 12px; position: relative; } .case-study-ds-colors__codes-mobile span:nth-child(2) { margin-top: 43px; margin-left: -37px; z-index: 1; } .case-study-ds-colors__codes-mobile span:nth-child(3) { margin-top: 24px; margin-left: -16px; } .case-study-ds-colors__codes-mobile span:nth-child(4) { margin-top: 8px; margin-left: -8px; z-index: 1; } @media only screen and (max-width: 767.98px) { .case-study-ds-colors__codes-mobile { display: flex; } } .case-study-ds-colors__accessibility { position: relative; display: flex; align-items: center; flex-wrap: wrap; justify-content: space-between; gap: 80px; } @media only screen and (max-width: 767.98px) { .case-study-ds-colors__accessibility { gap: 16px; flex-direction: column; } } .case-study-ds-colors__accessibility:after { content: ""; position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.62) -18.36%, rgba(255, 255, 255, 0) -18.35%, #fff 89.56%); } @media only screen and (max-width: 767.98px) { .case-study-ds-colors__accessibility:after { top: unset; bottom: 0; height: 40%; } } .case-study-ds-colors__accessibility--details { flex: 1; } .case-study-ds-colors__accessibility--info { display: flex; flex-direction: column; align-items: flex-end; position: relative; margin-right: 64px; min-height: 224px; justify-content: center; padding-top: 24px; } @media only screen and (max-width: 767.98px) { .case-study-ds-colors__accessibility--info { min-height: unset; margin-right: unset; padding-top: 0; z-index: 2; } } .case-study-ds-colors__accessibility--info b { background: linear-gradient(180deg, #0016f8 0%, rgba(0, 22, 248, 0) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-size: 160px; font-weight: 500; font-variation-settings: "wght" 500; letter-spacing: -7px; line-height: 128px; padding: 0 7px; } @media only screen and (max-width: 991px) { .case-study-ds-colors__accessibility--info b { font-size: 110px; } } @media only screen and (max-width: 767.98px) { .case-study-ds-colors__accessibility--info b { font-size: 80px; line-height: 128px; } } .case-study-ds-colors__accessibility--info span { transform: translateY(-6px) translateX(50%); color: var(--Blue-Blue---40, #99a2fc); font-size: 24px; font-weight: 700; font-variation-settings: "wght" 700; line-height: normal; letter-spacing: 0.36px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-ds-colors__accessibility--info span { transform: translateY(-30px) translateX(50%); } } .case-study-ds-colors__accessibility--picture { width: 100%; flex: 1; } .case-study-ds-grids { color: #fff; padding-top: 160px; padding-bottom: 160px; position: relative; } @media only screen and (max-width: 767.98px) { .case-study-ds-grids { padding-bottom: 48px; padding-top: 48px; } } .case-study-ds-grids__content { position: relative; z-index: 1; } .case-study-ds-grids__content .site-case-study__description { max-width: 880px; margin-bottom: 64px; opacity: 0.7; } @media only screen and (max-width: 767.98px) { .case-study-ds-grids__content .site-case-study__description { margin-bottom: 32px; } } .case-study-ds-grids__content--grids { display: flex; align-items: flex-start; justify-content: space-between; gap: 64px; margin-bottom: 64px; } @media only screen and (max-width: 767.98px) { .case-study-ds-grids__content--grids { margin-bottom: 32px; flex-direction: column; justify-content: unset; gap: 32px; } } .case-study-ds-grids__content--grids svg { max-width: 100%; height: auto; } @media only screen and (max-width: 767.98px) { .case-study-ds-grids__content--grids svg { margin-left: auto; margin-right: auto; } } .case-study-ds-grids__content--spacing ul { overflow-x: auto; scrollbar-width: none; display: flex; gap: 48px; } .case-study-ds-grids__content--spacing ul li { display: flex; align-items: center; justify-content: center; flex-direction: column; } .case-study-ds-grids__content--spacing ul li span { display: block; height: 52px; background: var(--Blue-Blue---100, #0016f8); margin-bottom: 16px; } .case-study-ds-grids__content--spacing ul li svg { margin-bottom: 4px; } .case-study-ds-grids__content--spacing ul li strong { font-weight: 400; font-variation-settings: "wght" 400; color: var(--White, #fff); font-size: 12px; display: block; line-height: 18px; } .case-study-ds-iconography { padding-top: 160px; } @media only screen and (max-width: 767px) { .case-study-ds-iconography { padding-top: 48px; } } .case-study-ds-iconography__content { margin-bottom: 8px; display: flex; gap: 90px; } @media only screen and (max-width: 1500px) { .case-study-ds-iconography__content { gap: 24px; } } @media only screen and (max-width: 767.98px) { .case-study-ds-iconography__content { gap: 32px; flex-direction: column; margin-bottom: 0; position: relative; z-index: 1; } } .case-study-ds-iconography__content--info { flex: 0 0 657px; max-width: 657px; } @media only screen and (max-width: 1199px) { .case-study-ds-iconography__content--info { max-width: unset; flex: 1; } } .case-study-ds-iconography__content--details { flex: 1; display: flex; justify-content: space-between; gap: 40px; align-items: center; } @media only screen and (max-width: 767.98px) { .case-study-ds-iconography__content--details { justify-content: center; } } @media only screen and (max-width: 767.98px) { .case-study-ds-iconography__content--details-right { display: none; } } .case-study-ds-iconography__content--details svg { max-width: 100%; height: auto; display: block; } .case-study-ds-iconography__icons { padding-top: 124px; position: relative; } @media only screen and (max-width: 767.98px) { .case-study-ds-iconography__icons { padding-top: 32px; } } .case-study-ds-iconography__icons:after { width: 100%; display: block; height: 100%; position: absolute; right: 0; top: 0; content: ""; pointer-events: none; z-index: 1; background: linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0.5) 0.01%, #fff 88.33%); } .case-study-ds-iconography__icons img { width: 100%; } .case-study-ds-buttons { position: relative; padding-top: 160px; padding-bottom: 160px; background-position: right bottom; background-repeat: no-repeat; background-size: 52.85%; } @media only screen and (max-width: 767px) { .case-study-ds-buttons { padding-top: 48px; padding-bottom: 385px; background-image: none !important; } .case-study-ds-buttons .site-case-study__bg { object-position: right bottom; } } .case-study-ds-buttons__content { position: relative; z-index: 1; max-width: 657px; } @media only screen and (max-width: 767.98px) { .case-study-ds-buttons__content { max-width: 100%; } } .case-study-ds-buttons__content--details { margin-top: 92px; display: flex; align-items: center; gap: 158px; padding-left: 43px; } @media only screen and (max-width: 1024px) { .case-study-ds-buttons__content--details { gap: 120px; } } @media only screen and (max-width: 767.98px) { .case-study-ds-buttons__content--details { margin-top: 60px; gap: 90px; flex-direction: column; padding-left: 0; } } .case-study-ds-buttons__content--details_button { position: relative; } .case-study-ds-buttons__content--details_button-sizing { position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none; z-index: 1; } .case-study-ds-buttons__content--details_button-button { height: 64px; width: 248px; display: flex; align-items: center; border-radius: 4px; border: 2px solid var(--navy-blue-100-main-color, #16205b); background: #fff; gap: 8px; padding: 0 40px; color: var(--navy-blue-100-main-color, #16205b); font-size: 16px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 32px; white-space: nowrap; justify-content: center; } .case-study-ds-buttons__content--details_button-button svg { min-width: 24px; } .case-study-ds-buttons__content--details_button-button-only-icon { padding: 0; width: 64px; } .case-study-ds-other { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767px) { .case-study-ds-other { padding-bottom: 48px; padding-top: 48px; } } .case-study-ds-other__content { text-align: center; display: flex; flex-direction: column; align-items: center; } .case-study-ds-other__content--picture { margin-top: 48px; } @media only screen and (max-width: 767.98px) { .case-study-ds-other__content--picture { margin-top: 32px; } } .case-study-ds-other .site-case-study__description { max-width: 916px; } .case-study-ds-forms { padding-top: 160px; } @media only screen and (max-width: 767px) { .case-study-ds-forms { padding-top: 48px; } } .case-study-ds-forms__content { text-align: center; display: flex; flex-direction: column; align-items: center; } .case-study-ds-forms__content--picture { padding-top: 16px; padding-bottom: 160px; position: relative; width: 100%; display: flex; justify-content: center; } @media only screen and (max-width: 767.98px) { .case-study-ds-forms__content--picture { padding-bottom: 72px; padding-top: 48px; } } .case-study-ds-forms__content--picture:after { pointer-events: none; width: 100%; display: block; height: 100%; position: absolute; right: 0; top: 0; content: ""; z-index: 1; background: radial-gradient(41.86% 41.86% at 50% 41.86%, rgba(255, 255, 255, 0.64) 0%, rgba(255, 255, 255, 0) 0.01%, rgba(255, 255, 255, 0.91) 100%); } .case-study-ds-forms .site-case-study__description { max-width: 916px; } .case-study-ds-table { padding-top: 160px; padding-bottom: 160px; position: relative; } @media only screen and (max-width: 767px) { .case-study-ds-table { padding-bottom: 70px; padding-top: 48px; } } .case-study-ds-table .container { position: relative; z-index: 1; } .case-study-ds-table__content { display: flex; justify-content: space-between; gap: 64px; } @media only screen and (max-width: 1260px) { .case-study-ds-table__content { flex-direction: column; align-items: flex-start; gap: 80px; } } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content { gap: 48px; } } .case-study-ds-table__content--col { max-width: 100%; display: flex; gap: 80px; flex-direction: column; } @media only screen and (max-width: 1260px) { .case-study-ds-table__content--col { gap: 64px; } } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col { gap: 32px; } } .case-study-ds-table__content--col:last-child { align-items: flex-start; } .case-study-ds-table__content--col-details { position: relative; width: 657px; margin-left: auto; margin-right: auto; transform: translateX(-30px); } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-details { width: 358px; transform: translateX(-20px); } } .case-study-ds-table__content--col-details table { width: calc(100% - 60px); margin-left: auto; border-collapse: collapse; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-details table { width: calc(100% - 40px); } } .case-study-ds-table__content--col-details table thead th { color: var(--azure-blue-100-main-color, #0075e7); font-size: 14px; font-weight: 700; font-variation-settings: "wght" 700; line-height: 32px; text-align: center; padding-bottom: 16px; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-details table thead th { font-size: 8px; line-height: 17.14px; padding-bottom: 8px; } } .case-study-ds-table__content--col-details table thead th:nth-child(1) { width: 27.6%; } .case-study-ds-table__content--col-details table thead th:nth-child(2) { width: 28.8%; } .case-study-ds-table__content--col-details table thead th:nth-child(3) { width: 24.5%; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-details table thead th:nth-child(3) { width: 27%; } } .case-study-ds-table__content--col-details table thead th:nth-child(4) { width: 19%; text-align: left; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-details table thead th:nth-child(4) { width: 16.5%; } } .case-study-ds-table__content--col-details table tbody tr td { color: var(--Navy-Blue-80, #6a7196); font-size: 12px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 24px; text-align: center; padding-top: 16px; padding-bottom: 16px; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-details table tbody tr td { font-size: 7px; padding-top: 9px; padding-bottom: 8px; line-height: 12.855px; } } .case-study-ds-table__content--col-details table tbody tr td:nth-child(1) { border-radius: 0 16px 16px 0; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-details table tbody tr td:nth-child(1) { border-radius: 0 8.57px 8.57px 0; } } .case-study-ds-table__content--col-details table tbody tr td:nth-child(4) { border-radius: 16px 0 0 16px; text-align: left; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-details table tbody tr td:nth-child(4) { border-radius: 8.57px 0 0 8.57px; } } .case-study-ds-table__content--col-details table tbody tr:nth-child(1) td { background: var(--Solitude-50, #f5f8fd); } .case-study-ds-table__content--col-details table tbody tr:nth-child(2) td { opacity: 0.2; } .case-study-ds-table__content--col-details table tbody tr:nth-child(3) td { opacity: 0.2; background: var(--Solitude-50, #f5f8fd); } .case-study-ds-table__content--col-details .table-card--sizing { position: absolute; right: -43px; top: 0; pointer-events: none; z-index: 1; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-details .table-card--sizing { right: -23px; width: 100%; height: auto; } } .case-study-ds-table__content--col-card { position: relative; } @media only screen and (max-width: 1500px) { .case-study-ds-table__content--col-card { margin-left: auto; margin-right: auto; } } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-card { width: 358px; transform: translateX(20px); } } .case-study-ds-table__content--col-card .table-card--sizing { position: absolute; left: 50%; top: 21px; transform: translateX(-50%); pointer-events: none; z-index: 1; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-card .table-card--sizing { width: 100%; height: calc(100% + 12px); top: 14px; right: 31px; left: unset; transform: unset; } } .case-study-ds-table__content--col-card .table-card { width: 382px; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-card .table-card { width: 291px; } } .case-study-ds-table__content--col-card .table-card svg { display: block; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-card .table-card svg { width: 14px; height: auto; } } .case-study-ds-table__content--col-card .table-card__head { margin-bottom: 16px; display: flex; align-items: center; opacity: 0.2; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-card .table-card__head { margin-bottom: 12px; } } .case-study-ds-table__content--col-card .table-card__col { color: var(--navy-blue-100-main-color, #16205b); text-align: center; font-size: 14px; font-weight: 700; font-variation-settings: "wght" 700; line-height: 32px; width: 50%; padding-left: 42px; padding-right: 42px; white-space: nowrap; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-card .table-card__col { font-size: 10.677px; line-height: 24.405px; padding-left: 32px; padding-right: 32px; } } .case-study-ds-table__content--col-card .table-card__col:last-child { min-width: 18px; margin-right: auto; width: unset; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-card .table-card__col:last-child { min-width: 17px; } } .case-study-ds-table__content--col-card .table-card__content { border-radius: 16px; border: 1px solid var(--navy-blue-100-main-color, #16205b); padding-left: 24px; padding-right: 24px; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-card .table-card__content { padding-left: 18px; padding-right: 18px; border-width: 0.763px; border-radius: 12.203px; } } .case-study-ds-table__content--col-card .table-card__body { padding-top: 16px; padding-bottom: 13px; border-bottom: 1px solid #16205b; opacity: 0.2; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-card .table-card__body { padding-top: 11px; padding-bottom: 11px; border-width: 0.763px; } } .case-study-ds-table__content--col-card .table-card__body.active { opacity: 1; border-bottom-color: rgba(22, 32, 91, 0.2); } .case-study-ds-table__content--col-card .table-card__body.active .table-card__body--head { margin-bottom: 12px; } .case-study-ds-table__content--col-card .table-card__body:last-child { border-bottom: none; } .case-study-ds-table__content--col-card .table-card__body--head { display: flex; align-items: center; } .case-study-ds-table__content--col-card .table-card__body--head .table-card__col { padding: 0; text-align: right; line-height: 24px; font-size: 12px; font-weight: 600; font-variation-settings: "wght" 600; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-card .table-card__body--head .table-card__col { font-size: 9.152px; line-height: 18.304px; } } .case-study-ds-table__content--col-card .table-card__body--head .table-card__col:nth-child(1) { width: 56%; } .case-study-ds-table__content--col-card .table-card__body--head .table-card__col:nth-child(2) { width: 44%; } .case-study-ds-table__content--col-card .table-card__body--data ul { display: flex; gap: 16px; flex-wrap: wrap; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-card .table-card__body--data ul { gap: 12px; } } .case-study-ds-table__content--col-card .table-card__body--data ul li { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); color: var(--navy-blue-100-main-color, #16205b); font-size: 12px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 24px; padding-right: 8px; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-card .table-card__body--data ul li { padding-right: 6px; font-size: 9.152px; line-height: 18.304px; } } .case-study-ds-table__content--col-card .table-card__body--data ul li span { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 700; font-variation-settings: "wght" 700; line-height: 19px; } @media only screen and (max-width: 767.98px) { .case-study-ds-table__content--col-card .table-card__body--data ul li span { margin-bottom: 3px; font-size: 7.627px; line-height: 14.491px; } } .case-study-ds-typography { position: relative; padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767px) { .case-study-ds-typography { padding-bottom: 48px; padding-top: 48px; } } .case-study-ds-typography .container { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; gap: 64px; align-items: center; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography .container { gap: 32px; } } .case-study-ds-typography__step1 { max-width: 657px; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step1 { max-width: 100%; } } .case-study-ds-typography__step2 { max-width: 763px; direction: ltr; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step2 { max-width: 100%; } } .case-study-ds-typography__step2 strong { color: var(--Blue-Blue---80, #3345f9); font-size: 48px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 190.5%; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step2 strong { font-size: 24px; } } .case-study-ds-typography__step2 ul { display: flex; align-items: center; justify-content: center; gap: 24px; margin-bottom: 32px; } .case-study-ds-typography__step2 ul li { color: #000; text-transform: capitalize; font-size: 16px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 190.5%; } .case-study-ds-typography__step2 ul li:nth-child(2) { font-weight: 500; font-variation-settings: "wght" 500; } .case-study-ds-typography__step2 ul li:nth-child(3) { font-weight: 700; font-variation-settings: "wght" 700; } .case-study-ds-typography__step2 p { color: var(--Gray-Gray---60, #838b8f); font-size: 32px; font-weight: 200; font-variation-settings: "wght" 200; line-height: 141%; letter-spacing: 2.56px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step2 p { font-size: 16px; letter-spacing: 1.28px; } } .case-study-ds-typography__step3 { max-width: 792px; } .case-study-ds-typography__step4 { max-width: 880px; } .case-study-ds-typography__step4--category { display: flex; align-items: center; margin-bottom: 36px; justify-content: center; font-size: 12px; letter-spacing: -0.72px; color: var(--Black-Black---70, #4d4d4d); font-weight: 400; font-variation-settings: "wght" 400; line-height: normal; font-family: "RedHatText"; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step4--category { margin-bottom: 14px; font-size: 5px; letter-spacing: -0.293px; } } .case-study-ds-typography__step4--category svg { margin-left: 6px; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step4--category svg { margin-left: 2px; height: 12px; width: 4px; } } .case-study-ds-typography__step4--category strong { color: var(--azure-blue-100-main-color, #0075e7); font-weight: 700; font-variation-settings: "wght" 700; font-size: 16px; line-height: normal; border-top: 1px dotted #b3b3b3; border-bottom: 1px dotted #b3b3b3; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step4--category strong { font-size: 8px; border-width: 0.406px; } } .case-study-ds-typography__step4--title { display: flex; align-items: center; margin-bottom: 10px; justify-content: center; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step4--title { margin-bottom: 4px; } } .case-study-ds-typography__step4--title b { font-size: 12px; letter-spacing: -0.72px; color: var(--Black-Black---70, #4d4d4d); font-weight: 400; font-variation-settings: "wght" 400; line-height: normal; font-family: "RedHatText"; min-width: 85px; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step4--title b { font-size: 5px; letter-spacing: -0.293px; min-width: 45px; text-align: center; } } .case-study-ds-typography__step4--title svg { margin-left: 2px; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step4--title svg { height: 18px; width: 7px; } } .case-study-ds-typography__step4--title strong { color: var(--navy-blue-100-main-color, #16205b); font-weight: 700; font-variation-settings: "wght" 700; font-size: 40px; letter-spacing: -1px; padding-right: 8px; line-height: 44px; padding-left: 16px; text-align: right; position: relative; white-space: nowrap; } @media only screen and (max-width: 991px) { .case-study-ds-typography__step4--title strong { font-size: 32px; } } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step4--title strong { font-size: 16px; line-height: 26.012px; letter-spacing: -0.406px; padding-left: 8px; } } .case-study-ds-typography__step4--title strong:after { width: 100%; display: block; height: 44px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); content: ""; background: rgba(255, 0, 229, 0.18); pointer-events: none; z-index: 1; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step4--title strong:after { height: 17.775px; } } .case-study-ds-typography__step4--title strong span { -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } .case-study-ds-typography__step4--title2 { display: flex; align-items: center; margin-bottom: 32px; justify-content: center; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step4--title2 { margin-bottom: 12px; } } .case-study-ds-typography__step4--title2 b { font-size: 12px; color: var(--Blue-Blue---100, #0016f8); font-weight: 500; font-variation-settings: "wght" 500; line-height: 18px; font-family: "RedHatText"; min-width: 95px; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step4--title2 b { font-size: 5px; line-height: 7.316px; text-align: center; min-width: 47px; } } .case-study-ds-typography__step4--title2 svg { margin-left: 2px; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step4--title2 svg { width: 7px; height: 25px; } } .case-study-ds-typography__step4--title2 strong { color: var(--navy-blue-100-main-color, #16205b); font-weight: 700; font-variation-settings: "wght" 700; font-size: 40px; line-height: 64px; height: 62px; letter-spacing: -1px; border-top: 1px dotted #0016f8; border-bottom: 1px dotted #808080; padding-right: 8px; padding-left: 12px; white-space: nowrap; } @media only screen and (max-width: 991px) { .case-study-ds-typography__step4--title2 strong { font-size: 32px; } } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step4--title2 strong { font-size: 16px; line-height: 26.012px; letter-spacing: -0.406px; padding-left: 8px; padding-right: 4px; border-width: 0.406px; height: 25px; } } .case-study-ds-typography__step4--title2 strong span { -moz-font-feature-settings: "lnum"; -webkit-font-feature-settings: "lnum"; font-feature-settings: "lnum"; } .case-study-ds-typography__step4--subtitle { display: flex; align-items: center; flex-direction: row-reverse; gap: 3px; } .case-study-ds-typography__step4--subtitle_line-height { display: flex; align-items: center; } .case-study-ds-typography__step4--subtitle_line-height b { min-width: 95px; font-size: 12px; color: var(--Black-Black---70, #4d4d4d); font-weight: 400; font-variation-settings: "wght" 400; line-height: 18px; font-family: "RedHatText"; text-align: center; } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step4--subtitle_line-height b { font-size: 5px; line-height: 7.316px; min-width: 47px; } } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step4--subtitle svg { width: 7px; height: 12px; } } .case-study-ds-typography__step4--subtitle ul { flex: 1; display: flex; flex-direction: column; } .case-study-ds-typography__step4--subtitle ul li { color: var(--Navy-Blue-80, #6a7196); font-size: 16px; font-weight: 500; font-variation-settings: "wght" 500; line-height: 28px; border-bottom: 1px dotted #0016f8; } @media only screen and (max-width: 991px) { .case-study-ds-typography__step4--subtitle ul li { font-size: 14px; } } @media only screen and (max-width: 767.98px) { .case-study-ds-typography__step4--subtitle ul li { font-size: 7px; line-height: 13.006px; border-width: 0.406px; } } .case-study-ds-typography__step4--subtitle ul li:last-child { border-bottom: none; } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: 100; font-variation-settings: "wght" 100; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-Thin.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-Thin.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: 200; font-variation-settings: "wght" 200; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-ExtraLight.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-ExtraLight.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: 300; font-variation-settings: "wght" 300; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-Light.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-Light.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: 500; font-variation-settings: "wght" 500; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-Medium.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-Medium.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: 600; font-variation-settings: "wght" 600; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-Semibold.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-Semibold.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: 800; font-variation-settings: "wght" 800; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-ExtraBold.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-ExtraBold.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: 900; font-variation-settings: "wght" 900; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-Black.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-Black.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: bold; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-Bold.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-Bold.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: normal; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-Regular.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-Regular.woff") format("woff"); } .peydaFont, .world_show__animation .tooltip_parent, .case-study-eirak-typography__content, .case-study-eirak-challenge__form { font-family: "PeydaWeb"; } .case-study-eirak-challenge { position: relative; } .case-study-eirak-challenge__form { direction: rtl; background: var(--light-gray-light-gray-40, #f0f0f0); width: 445px; padding: 50px 30px 80px; display: flex; flex-direction: column; gap: 20px; } @media only screen and (max-width: 1024px) { .case-study-eirak-challenge__form { max-width: 94%; } } .case-study-eirak-challenge__form--foot { padding-top: 20px; display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; } .case-study-eirak-challenge__form--foot-result { direction: ltr; display: flex; flex-direction: column; gap: 20px; color: var(--dark-gray-dark-gray-80, #585756); font-weight: 600; font-variation-settings: "wght" 600; font-size: 17.402px; line-height: 22.374px; } .case-study-eirak-challenge__form .form-control { display: flex; flex-direction: column; gap: 9px; } .case-study-eirak-challenge__form .form-control label { font-size: 17.402px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 22.374px; color: #585756; } .case-study-eirak-challenge__form .form-control__input { position: relative; } .case-study-eirak-challenge__form .form-control__input span { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); color: var(--dark-gray-dark-gray-40, #ababab); font-size: 19.888px; font-weight: 700; font-variation-settings: "wght" 700; line-height: 29.832px; pointer-events: none; } .case-study-eirak-challenge__form .form-control__input input { padding-right: 50px; padding-left: 20px; width: 100%; border: 1.243px solid #d5d5d5; background: #fff; height: 70px; transition: all 0.3s; } .case-study-eirak-challenge__arrows { position: absolute; z-index: 1; bottom: 0; left: 0; transform: translateX(-50%) translateY(40%); width: 177px; height: auto; } .case-study-eirak-challenge__image { position: absolute; z-index: 1; right: 0; bottom: 0; transform: translateX(38%) translateY(52%); max-width: unset !important; } .case-study-eirak-typography { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-eirak-typography { padding-top: 48px; padding-bottom: 48px; } } .case-study-eirak-typography__content { margin-left: auto; margin-right: auto; max-width: 1062px; display: flex; gap: 16px; flex-wrap: wrap; } @media only screen and (max-width: 767.98px) { .case-study-eirak-typography__content { flex-direction: column; } } .case-study-eirak-typography__content--left-top { color: #fff; flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #2e2d2c; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } @media only screen and (max-width: 767.98px) { .case-study-eirak-typography__content--left-top { padding: 16px 32px; flex: unset; max-width: 100%; height: 324px; order: 1; } } .case-study-eirak-typography__content--left-top ul { display: flex; align-items: center; gap: 24px; } .case-study-eirak-typography__content--left-top ul li { font-size: 16px; line-height: 190.5%; text-transform: capitalize; } .case-study-eirak-typography__content--left-top ul li:nth-child(1) { font-weight: 300; font-variation-settings: "wght" 300; } .case-study-eirak-typography__content--left-top ul li:nth-child(2) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-eirak-typography__content--left-top ul li:nth-child(3) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-eirak-typography__content--left-top ul li:nth-child(4) { font-weight: 700; font-variation-settings: "wght" 700; } .case-study-eirak-typography__content--left-top_title { color: #e63312; font-size: 48px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 190.5%; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-eirak-typography__content--left-top_title { font-size: 32px; line-height: normal; } } .case-study-eirak-typography__content--left-top p { text-align: center; letter-spacing: 1.28px; line-height: 141%; text-transform: capitalize; font-weight: 300; font-variation-settings: "wght" 300; font-size: 16px; } .case-study-eirak-typography__content--left-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-eirak-typography__content--left-bottom { flex: unset; max-width: 100%; height: 260px; order: 2; } } .case-study-eirak-typography__content--left-bottom_big { flex: 1; color: #fff; background: #e63312; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-eirak-typography__content--left-bottom_big { padding: 8px; } } .case-study-eirak-typography__content--left-bottom_big span { max-width: 152px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-eirak-typography__content--left-bottom_big span { max-width: 93px; letter-spacing: 0.64px; line-height: 40px; font-size: 32px; } } .case-study-eirak-typography__content--left-bottom_mini { background: #e9e9e9; flex: 0 0 151px; max-width: 151px; padding: 16px 8px; color: #e63312; font-size: 12px; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-eirak-typography__content--left-bottom_mini { flex: 0 0 84px; max-width: 84px; padding: 8px; } } .case-study-eirak-typography__content--right-top { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #e63312; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-eirak-typography__content--right-top { flex: unset; max-width: 100%; height: 324px; order: 0; } } .case-study-eirak-typography__content--right-top span { color: #fff; font-size: 400px; font-weight: 500; font-variation-settings: "wght" 500; line-height: 134px; text-transform: capitalize; } @media only screen and (max-width: 991px) { .case-study-eirak-typography__content--right-top span { font-size: 285px; line-height: 100px; } } @media only screen and (max-width: 767.98px) { .case-study-eirak-typography__content--right-top span { font-size: 300px; line-height: 80px; } } .case-study-eirak-typography__content--right-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-eirak-typography__content--right-bottom { flex: unset; max-width: 100%; height: 260px; order: 3; } } .case-study-eirak-typography__content--right-bottom_big { flex: 1; color: #fff; background: #2e2d2c; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-eirak-typography__content--right-bottom_big { padding: 8px; line-height: normal; } } .case-study-eirak-typography__content--right-bottom_big span { max-width: 152px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-eirak-typography__content--right-bottom_big span { max-width: unset; font-size: 24px; letter-spacing: 0.48px; line-height: normal; } } .case-study-eirak-typography__content--right-bottom_mini { flex: 0 0 151px; max-width: 151px; } @media only screen and (max-width: 767.98px) { .case-study-eirak-typography__content--right-bottom_mini { flex: 0 0 91px; max-width: 91px; } } .case-study-eirak-typography__content--right-bottom_mini ul { display: flex; flex-direction: column; height: 100%; } .case-study-eirak-typography__content--right-bottom_mini ul li { width: 100%; padding: 16px; color: #fff; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-eirak-typography__content--right-bottom_mini ul li { padding: 8px; line-height: normal; } } .case-study-eirak-typography__content--right-bottom_mini ul li:nth-child(1) { background: #e8e8e7; } .case-study-eirak-typography__content--right-bottom_mini ul li:nth-child(2) { background: #d1d0cf; } .case-study-eirak-typography__content--right-bottom_mini ul li:nth-child(3) { background: #a4a2a0; } .case-study-eirak-typography__content--right-bottom_mini ul li:nth-child(4) { background: #464443; } .case-study-eirak-typography__content--right-bottom_mini ul li:nth-child(5) { background: #2e2d2c; } .case-study-eirak-typography__content--right-bottom_mini ul li:nth-child(6) { background: #2e2d2c; } .case-study-eirak-typography__content--right-bottom_mini ul li:nth-child(7) { background: #292827; } .case-study-eirak-typography__content--right-bottom_mini ul li:nth-child(8) { background: #141414; } .case-study-eirak-typography__content--right-bottom_mini ul li:has(span) { flex: 1; } .case-study-mobile-first { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-mobile-first { padding-top: 48px; padding-bottom: 48px; } } .case-study-mobile-first__content { display: flex; align-items: center; gap: 48px; justify-content: space-between; } @media only screen and (max-width: 767.98px) { .case-study-mobile-first__content { gap: 32px; flex-direction: column; } } .case-study-mobile-first__description { max-width: 790px; } .case-study-mobile-first__title { color: var(--Blue-Blue---100, #0016f8); font-size: 80px; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 1.2px; flex: 0 0 520px; line-height: normal; } @media only screen and (max-width: 991px) { .case-study-mobile-first__title { flex: 0 0 438px; } } @media only screen and (max-width: 767.98px) { .case-study-mobile-first__title { font-size: 32px; letter-spacing: 0.48px; max-width: 190px; flex: unset; } } .case-study-eirak-parts { padding-top: 160px; background: #fafafa; } @media only screen and (max-width: 767.98px) { .case-study-eirak-parts { padding-top: 48px; background-color: #fff; } } .case-study-eirak-parts__content { display: flex; justify-content: center; } .case-study-eirak-parts__content--phone { border-radius: 24px 24px 0 0; border: 8px solid var(--Gray-Gray---10, #eaecec); background: #fff; position: relative; flex: 0 0 406px; max-width: 406px; border-bottom: none; } @media only screen and (max-width: 767.98px) { .case-study-eirak-parts__content--phone { flex: unset; max-width: 220px; border-width: 4.51px; border-radius: 13.531px 13.531px 0 0; } } .case-study-eirak-parts__content--phone-head { border-bottom: 1px solid var(--light-gray-light-gray-60, #e9e9e9); border-radius: 24px 24px 0 0; flex-direction: row-reverse; height: 72px; background: #fff; display: flex; align-items: center; justify-content: space-between; padding-left: 16px; padding-right: 16px; } @media only screen and (max-width: 767.98px) { .case-study-eirak-parts__content--phone-head { border-radius: 13.531px 13.531px 0 0; height: 37.525px; padding-left: 9px; padding-right: 9px; } } .case-study-eirak-parts__content--phone-head svg { display: block; } .case-study-eirak-parts__content--phone-head_flag { margin-left: 16px; margin-right: auto; } @media only screen and (max-width: 767.98px) { .case-study-eirak-parts__content--phone-head_flag { margin-left: 8px; width: 16px; height: auto; } } @media only screen and (max-width: 767.98px) { .case-study-eirak-parts__content--phone-head_logo svg { width: 51px; height: auto; } } .case-study-eirak-parts__content--phone-head_menu { background: transparent; border: none; padding: 0; cursor: pointer !important; } @media only screen and (max-width: 767.98px) { .case-study-eirak-parts__content--phone-head_menu svg { width: 18.763px; height: auto; } } .case-study-eirak-parts__content--phone-view { padding-top: 32px; background: var(--light-gray-light-gray-20, #f8f8f8); } @media only screen and (max-width: 767.98px) { .case-study-eirak-parts__content--phone-view { padding-top: 16px; } } .case-study-eirak-parts__content--phone-part1 { position: absolute; bottom: 250px; left: -248px; filter: drop-shadow(0px 40px 80px rgba(150, 171, 191, 0.2)); } @media only screen and (max-width: 767.98px) { .case-study-eirak-parts__content--phone-part1 { width: 100px; filter: drop-shadow(0px 24px 32px rgba(150, 171, 191, 0.2)); bottom: 270px; left: -55px; } } .case-study-eirak-parts__content--phone-part2 { position: absolute; bottom: 92px; right: -259px; filter: drop-shadow(0px 40px 80px rgba(150, 171, 191, 0.2)); } @media only screen and (max-width: 767.98px) { .case-study-eirak-parts__content--phone-part2 { filter: drop-shadow(0px 24px 32px rgba(150, 171, 191, 0.2)); width: 131px; bottom: 54px; right: -65px; height: auto; } } .case-study-eirak-gallery { background: #fafafa; position: relative; overflow: hidden; height: 75vw; } .case-study-eirak-gallery__content { display: flex; align-items: center; gap: 30px; width: 119.1vw; left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; z-index: 1; } @media only screen and (max-width: 991px) { .case-study-eirak-gallery__content { gap: 12px; } } .case-study-eirak-gallery__content--col { flex: 0 0 calc(33.33% - 20px); max-width: calc(33.33% - 20px); display: flex; flex-direction: column; gap: 30px; will-change: transform; } .case-study-eirak-gallery__content--col img { border-radius: 16px; border: 8px solid var(--Gray-Gray---10, #eaecec); } @media only screen and (max-width: 991px) { .case-study-eirak-gallery__content--col img { border-radius: 3.258px; border-width: 1.629px; } } @media only screen and (max-width: 991px) { .case-study-eirak-gallery__content--col { gap: 12px; flex: 0 0 calc(33.33% - 8px); max-width: calc(33.33% - 8px); will-change: auto; } } .case-study-eirak-gallery__shadow { position: absolute; pointer-events: none; left: 60%; transform: translateX(-50%); top: 50%; width: 745.025px; height: 442.66px; } @media only screen and (max-width: 767.98px) { .case-study-eirak-gallery__shadow { width: 151.721px; height: 90.146px; } } .case-study-eirak-gallery.transparent { background: transparent; } .case-study-eirak-gallery2 { background: #fafafa; position: relative; overflow: hidden; height: 75vw; } .case-study-eirak-gallery2__content { z-index: 1; display: flex; align-items: center; gap: 55px; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; padding-left: 50px; padding-right: 50px; } @media only screen and (max-width: 991px) { .case-study-eirak-gallery2__content { gap: 14px; padding-left: 12px; padding-right: 12px; } } .case-study-eirak-gallery2__content--col { flex: 0 0 calc(25% - 41.25px); max-width: calc(25% - 41.25px); display: flex; flex-direction: column; gap: 55px; will-change: transform; } @media only screen and (max-width: 991px) { .case-study-eirak-gallery2__content--col { gap: 14px; flex: 0 0 calc(25% - 10.5px); max-width: calc(25% - 10.5px); will-change: auto; } } .case-study-eirak-gallery2__content--col img { border-radius: 40px; border: 4px solid var(--Gray-Gray---10, #eaecec); } @media only screen and (max-width: 991px) { .case-study-eirak-gallery2__content--col img { border-radius: 4.894px; border-width: 1px; } } .case-study-eirak-gallery2__shadow { position: absolute; pointer-events: none; left: 45%; transform: translateX(-50%); bottom: 10%; width: 424.037px; height: 867.1px; } @media only screen and (max-width: 767.98px) { .case-study-eirak-gallery2__shadow { width: 86.471px; height: 176.823px; } } .case-study-user-profile { position: relative; padding-top: 160px; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-user-profile { padding-top: 48px; } } .case-study-user-profile__content { position: relative; z-index: 1; display: flex; justify-content: flex-end; } @media only screen and (max-width: 991px) { .case-study-user-profile__content { justify-content: flex-start; margin-bottom: 10%; } } .case-study-user-profile__content--info { max-width: 524px; } .case-study-user-profile__gallery { position: relative; z-index: 1; display: flex; gap: 20px; transform: rotate(-30deg); padding-right: 100px; margin-bottom: -400px; } @media only screen and (max-width: 991px) { .case-study-user-profile__gallery { gap: 8px; margin-bottom: -24%; padding-right: 50px; } } .case-study-user-profile__gallery--col { flex: 0 0 calc(50% - 10px); max-width: calc(50% - 10px); } @media only screen and (max-width: 991px) { .case-study-user-profile__gallery--col { flex: 0 0 calc(50% - 4px); max-width: calc(50% - 4px); } } .case-study-user-profile__gallery--col:last-child { padding-top: 200px; } @media only screen and (max-width: 991px) { .case-study-user-profile__gallery--col:last-child { padding-top: 50px; } } .case-study-user-profile__gallery--col img { margin-bottom: 30px; border-radius: 16px; border: 8px solid var(--Gray-Gray---10, #eaecec); } @media only screen and (max-width: 991px) { .case-study-user-profile__gallery--col img { margin-bottom: 10px; border-radius: 3.822px; border-width: 1.911px; } } .case-study-user-profile__gallery--col img:last-child { margin-bottom: 0; } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: 100; font-variation-settings: "wght" 100; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-Thin.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-Thin.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: 200; font-variation-settings: "wght" 200; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-ExtraLight.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-ExtraLight.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: 300; font-variation-settings: "wght" 300; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-Light.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-Light.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: 500; font-variation-settings: "wght" 500; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-Medium.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-Medium.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: 600; font-variation-settings: "wght" 600; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-Semibold.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-Semibold.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: 800; font-variation-settings: "wght" 800; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-ExtraBold.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-ExtraBold.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: 900; font-variation-settings: "wght" 900; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-Black.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-Black.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: bold; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-Bold.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-Bold.woff") format("woff"); } @font-face { font-family: "PeydaWeb"; font-style: normal; font-weight: normal; src: url("./assets/fonts/Peyda/woff2/PeydaWeb-Regular.woff2") format("woff2"), url("./assets/fonts/Peyda/woff/PeydaWeb-Regular.woff") format("woff"); } .peydaFont, .world_show__animation .tooltip_parent, .case-study-eirak-challenge__form, .case-study-eirak-typography__content { font-family: "PeydaWeb"; } .case-study-laptop__over-aluminum--left { border-radius: 4px; background: #fff; box-shadow: 0px 40px 80px 0px rgba(150, 171, 191, 0.2); position: absolute; left: 0; top: 12%; width: 22.5%; } @media only screen and (max-width: 767.98px) { .case-study-laptop__over-aluminum--left { border-radius: 0.866px; box-shadow: 0px 8.665px 17.329px 0px rgba(150, 171, 191, 0.2); } } .case-study-laptop__over-aluminum--right { border-radius: 4px; background: #fff; box-shadow: 0px 40px 80px 0px rgba(150, 171, 191, 0.2); position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 21%; } @media only screen and (max-width: 767.98px) { .case-study-laptop__over-aluminum--right { border-radius: 0.866px; box-shadow: 0px 8.665px 17.329px 0px rgba(150, 171, 191, 0.2); } } .world_show__animation { position: relative; } .world_show__animation--map { width: 100%; height: auto; } .world_show__animation--map path { transition: all 0.5s ease-in-out; } .world_show__animation--map path:hover { transition: all 0s ease-in-out; fill: rgba(0, 0, 0, 0.5); opacity: 1; fill-opacity: 1; z-index: 1; } .world_show__animation--map path:hover[fill="#EB5C41"] { stroke-width: 4px; fill: #eb5c41; stroke: #eb5c41; } .world_show__animation .tooltip_parent { position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; z-index: 2; pointer-events: none; } .world_show__animation .tooltip_parent .tooltip { background: #fff; padding: 6.46px 66.75px 6.46px 10.766px; position: absolute; transform: translateY(-100px); opacity: 0; direction: rtl; box-shadow: 0px 41.811px 41.811px 0px rgba(46, 45, 44, 0.24); will-change: transform, opacity; } .world_show__animation .tooltip_parent .tooltip:before { content: ""; position: absolute; top: 100%; right: 0; left: 0; width: 0; height: 0; border: solid 10px rgba(0, 0, 0, 0); border-top-color: #fff; margin: auto; } .world_show__animation .tooltip_parent .tooltip .icon { position: absolute; right: 10.77px; top: 50%; transform: translateY(-50%); background: #f0f0f0; width: 43.066px; height: 43.066px; display: flex; align-items: center; justify-content: center; } .world_show__animation .tooltip_parent .tooltip .title { color: #585756; font-size: 18.292px; font-weight: 600; font-variation-settings: "wght" 600; display: block; margin-bottom: 2px; } @media only screen and (max-width: 767.98px) { .world_show__animation .tooltip_parent .tooltip .title { color: #dadada; font-size: 12px; } } .world_show__animation .tooltip_parent .tooltip .count { color: #e63312; font-size: 20.905px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 31.358px; letter-spacing: 0.131px; display: block; } .case-study-aluminum-challenge { position: absolute; width: 78.5vw; max-width: 1443px; left: 0; top: 0; } .case-study-aluminum-gallery { background: #fafafa; position: relative; overflow: hidden; height: 62.5vw; } .case-study-aluminum-gallery__content { z-index: 1; display: flex; gap: 55px; width: 100%; left: 50%; transform: translateX(-60%) rotate(-30deg); top: -30%; align-items: center; position: absolute; } @media only screen and (max-width: 991px) { .case-study-aluminum-gallery__content { gap: 12px; } } .case-study-aluminum-gallery__content--col { flex: 0 0 calc(20% - 44px); max-width: calc(20% - 44px); display: flex; flex-direction: column; gap: 55px; } @media only screen and (max-width: 991px) { .case-study-aluminum-gallery__content--col { gap: 12px; flex: 0 0 calc(25% - 9px); max-width: calc(25% - 9px); } } .case-study-aluminum-gallery__content--col img { border-radius: 40px; } @media only screen and (max-width: 767.98px) { .case-study-aluminum-gallery__content--col img { border-radius: 6.576px; } } .case-study-aluminum-gallery__content--col:nth-child(1) { transform: translateY(10%); } .case-study-aluminum-gallery__content--col:nth-child(2) { transform: translateY(5%); } .case-study-aluminum-gallery__content--col:nth-child(3) { transform: translateY(15%); } .case-study-aluminum-gallery__content--col:nth-child(4) { transform: translateY(30%); } .case-study-aluminum-gallery__content--col:nth-child(5) { transform: translateY(40%); } .case-study-aluminum-gallery__shadow { position: absolute; pointer-events: none; left: 10%; bottom: -20%; width: 502.984px; height: 1027.076px; transform: rotate(-30deg); filter: blur(97px); z-index: 1; background: var(--Shadow, rgba(8, 8, 8, 0.16)); } @media only screen and (max-width: 767.98px) { .case-study-aluminum-gallery__shadow { width: 137.816px; height: 281.415px; bottom: -30%; left: 10%; filter: blur(26.3521232605px); } } .case-study-aluminum { overflow: hidden; position: relative; } .case-study-aluminum__content { transform: rotate(-30deg) translateY(-10%); } .case-study-aluminum__content--images { margin-bottom: -20%; display: flex; align-items: center; flex-direction: column; } .case-study-aluminum__content--images img { border-radius: 16px; border: 8px solid var(--Gray-Gray---10, #eaecec); position: relative; margin-bottom: 40px; z-index: 2; width: 80%; } @media only screen and (max-width: 767.98px) { .case-study-aluminum__content--images img { border-radius: 4.347px; margin-bottom: 14px; border-width: 2.173px; } } .case-study-aluminum__content--images img:nth-of-type(2n) { z-index: 0; margin-left: 30%; } .case-study-aluminum__content--images svg { position: absolute; left: -10%; bottom: 0; z-index: 1; filter: blur(97px); } @media only screen and (max-width: 767.98px) { .case-study-aluminum__content--images svg { width: 368.83px; height: 219.47px; filter: blur(26.3521232605px); bottom: 10%; } } @font-face { font-family: "IRANYekanX"; font-style: normal; font-weight: 400; font-variation-settings: "wght" 400; src: url("./assets/fonts/IRANYekanX/woff/IRANYekanX-Regular.woff") format("woff"), url("./assets/fonts/IRANYekanX/woff2/IRANYekanX-Regular.woff2") format("woff2"); } @font-face { font-family: "IRANYekanX"; font-style: normal; font-weight: 700; font-variation-settings: "wght" 700; src: url("./assets/fonts/IRANYekanX/woff/IRANYekanX-Bold.woff") format("woff"), url("./assets/fonts/IRANYekanX/woff2/IRANYekanX-Bold.woff2") format("woff2"); } .iranYekanXNumFaFont, .farako-comment-box__content--tools-upload, .farako-comment-box__content--submit, .farako-comment-box__content--description, .farako-comment-box__content .form-control textarea, .farako-comment-box__content .form-control input, .farako-comment-box { font-family: "IRANYekanX"; -moz-font-feature-settings: "ss02"; -webkit-font-feature-settings: "ss02"; font-feature-settings: "ss02"; } .case-study-laptop__over-farako { border-radius: 13.175px; border: 0.549px solid var(--primary-colors-light-gray-light-gray-20, #f1f1f1); background: #fff; box-shadow: 20px 40px 80px 0px rgba(150, 171, 191, 0.2); position: absolute; left: 0; bottom: 10%; width: 41%; } @media only screen and (max-width: 767.98px) { .case-study-laptop__over-farako { border-radius: 2.676px; bottom: 15%; border: 0.112px solid var(--primary-colors-light-gray-light-gray-20, #f1f1f1); box-shadow: 0px 40px 40px 0px rgba(150, 171, 191, 0.2); } } .case-study-farako-grids { padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-farako-grids { padding-bottom: 48px; } } .case-study-farako-grids .site-case-study__title { margin-bottom: 24px; } @media only screen and (max-width: 767.98px) { .case-study-farako-grids .site-case-study__title { margin-bottom: 32px; } } .case-study-farako-grids__content { display: flex; flex-direction: column; gap: 160px; } @media only screen and (max-width: 767.98px) { .case-study-farako-grids__content { gap: 32px; } .case-study-farako-grids__content svg { max-width: 100%; height: auto; } } .case-study-farako-grids__content--desktop { flex-direction: row-reverse; display: flex; gap: 220px; align-items: center; justify-content: flex-end; } @media only screen and (max-width: 1199px) { .case-study-farako-grids__content--desktop { gap: 80px; } } @media only screen and (max-width: 767.98px) { .case-study-farako-grids__content--desktop { gap: 32px; flex-direction: column; align-items: unset; justify-content: unset; } } .case-study-farako-grids__content--mobile { display: flex; gap: 220px; align-items: center; } @media only screen and (max-width: 1199px) { .case-study-farako-grids__content--mobile { gap: 80px; } } @media only screen and (max-width: 767.98px) { .case-study-farako-grids__content--mobile { gap: 32px; flex-direction: column; align-items: unset; justify-content: unset; } } .case-study-farako-grids__content--details { padding-right: 80px; } @media only screen and (max-width: 1640px) { .case-study-farako-grids__content--details { padding-right: 0; } } .case-study-farako-grids__content--details h3 { color: var(--primary-colors-dark-gray-dark-gray-20, #727376); font-size: 64px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 80px; margin-bottom: 0; white-space: nowrap; } @media only screen and (max-width: 991px) { .case-study-farako-grids__content--details h3 { font-size: 45px; } } @media only screen and (max-width: 767.98px) { .case-study-farako-grids__content--details h3 { margin-bottom: 24px; font-size: 24px; line-height: normal; } } .case-study-farako-grids__content--details h4 { margin-bottom: 24px; color: #b8c6cf; font-size: 32px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 150%; font-family: "RedHatText"; } @media only screen and (max-width: 767.98px) { .case-study-farako-grids__content--details h4 { margin-bottom: 16px; font-size: 22px; } } .case-study-farako-grids__content--details ul { display: flex; flex-direction: column; gap: 16px; } .case-study-farako-grids__content--details ul li { color: #7f97a7; font-size: 28px; line-height: 170%; display: flex; align-items: center; gap: 16px; } @media only screen and (max-width: 767.98px) { .case-study-farako-grids__content--details ul li { font-size: 22px; gap: 8px; } } .case-study-farako-grids__content--details ul li span { background: #cccefd; padding: 0px 5px; color: #0016f8; font-size: 28px; font-weight: 600; font-variation-settings: "wght" 600; line-height: 170%; } @media only screen and (max-width: 767.98px) { .case-study-farako-grids__content--details ul li span { font-size: 22px; font-weight: 400; font-variation-settings: "wght" 400; } } .case-study-farako-album { position: relative; padding-top: 160px; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-farako-album { padding-top: 48px; } } .case-study-farako-album .site-case-study__bg { object-position: top right; } .case-study-farako-album__content { position: relative; z-index: 1; } .case-study-farako-album__content--images { transform: rotate(-10deg); display: flex; align-items: flex-end; padding-left: 12%; margin-bottom: -8%; margin-right: -8%; } .case-study-farako-album__content--images img { position: relative; border-radius: 8px; } .case-study-farako-album__content--images img:nth-child(1) { width: 52.5%; margin-top: 8%; transform: translateY(-8%); z-index: 0; } .case-study-farako-album__content--images img:nth-child(2) { width: 38.7%; margin-left: -16%; z-index: 1; } .case-study-farako-album__content--images img:nth-child(3) { width: 20%; margin-left: -2%; z-index: 2; } .case-study-auto-scroll { position: relative; overflow: hidden; } .case-study-auto-scroll__content { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 108px; padding-top: 80px; } @media only screen and (max-width: 991px) { .case-study-auto-scroll__content { gap: 40px; } } @media only screen and (max-width: 767.98px) { .case-study-auto-scroll__content { gap: 24px; flex-direction: column-reverse; align-items: unset; padding-top: 48px; } } .case-study-auto-scroll__content--frame { flex: 0 0 44%; overflow: hidden; height: 992px; } @media only screen and (max-width: 1199px) { .case-study-auto-scroll__content--frame { height: 740px; } } @media only screen and (max-width: 767.98px) { .case-study-auto-scroll__content--frame { width: 232px; height: 275px; margin-left: auto; margin-right: auto; flex: unset; } } .case-study-auto-scroll__content--frame img { transform: translateY(160px); width: 100%; border-radius: 16px; } @media only screen and (max-width: 767.98px) { .case-study-auto-scroll__content--frame img { border-radius: 5.301px; transform: translateY(0); } } .case-study-auto-scroll__content--description { color: var(--White, #fff); font-size: 24px; letter-spacing: -1.44px; line-height: 40px; padding-bottom: 160px; } @media only screen and (max-width: 1199px) { .case-study-auto-scroll__content--description { min-width: 45%; } } @media only screen and (max-width: 991px) { .case-study-auto-scroll__content--description { min-width: 47%; } } @media only screen and (max-width: 767.98px) { .case-study-auto-scroll__content--description { min-width: 100%; font-size: 14px; letter-spacing: -0.84px; line-height: 22px; padding-bottom: 0; } } .case-study-farako-challenge { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-farako-challenge { padding-top: 48px; padding-bottom: 48px; } } .case-study-farako-challenge__content { display: flex; align-items: center; gap: 150px; } @media only screen and (max-width: 1400px) { .case-study-farako-challenge__content { gap: 80px; } } @media only screen and (max-width: 991px) { .case-study-farako-challenge__content { flex-direction: column; gap: 40px; } } @media only screen and (max-width: 767.98px) { .case-study-farako-challenge__content { gap: 24px; } } .case-study-farako-challenge__content--card { border-radius: 16px; border: 0.776px solid var(--primary-colors-light-gray-light-gray-20, #f1f1f1); background: #fff; box-shadow: 0px 40px 80px 0px rgba(150, 171, 191, 0.2); } @media only screen and (max-width: 1640px) { .case-study-farako-challenge__content--card { max-width: 55% !important; } } @media only screen and (max-width: 991px) { .case-study-farako-challenge__content--card { max-width: 100% !important; } } @media only screen and (max-width: 767.98px) { .case-study-farako-challenge__content--card { border-radius: 6.179px; border: 0.3px solid var(--primary-colors-light-gray-light-gray-20, #f1f1f1); box-shadow: 0px 18px 32px 0px rgba(150, 171, 191, 0.2); } } .farako-comment-box { position: absolute; width: 343px; border-radius: 12.172px; border: 0.761px solid var(--primary-colors-light-gray-light-gray-20, #f1f1f1); background: #f9f9f9; box-shadow: 0px 40px 80px 0px rgba(150, 171, 191, 0.2); right: 16px; bottom: 75px; padding: 18px 12px; z-index: 1; direction: rtl; } @media only screen and (max-width: 991px) { .farako-comment-box { width: 260px; padding: 8px 6px; border-radius: 8px; border-width: 0.5px; box-shadow: 0px 20px 16.25px 0px rgba(150, 171, 191, 0.2); } } @media only screen and (max-width: 767.98px) { .farako-comment-box { width: 74px; padding: 3px; border-radius: 2.472px; bottom: 16px; border-width: 0.155px; box-shadow: 0px 8.125px 16.25px 0px rgba(150, 171, 191, 0.2); } } .farako-comment-box__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } @media only screen and (max-width: 991px) { .farako-comment-box__head { margin-bottom: 8px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__head { margin-bottom: 3px; } } .farako-comment-box__head--title { font-size: 9.129px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 18.257px; color: var(--primary-colors-dark-gray-dark-gray-80, #2e2e2f); } @media only screen and (max-width: 991px) { .farako-comment-box__head--title { font-size: 8px; line-height: 14px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__head--title { font-size: 1.854px; line-height: 3.709px; } } .farako-comment-box__head--rate { direction: ltr; color: var(--primary-colors-dark-gray-dark-gray-40, #5b5c5e); font-size: 12.172px; font-weight: 700; font-variation-settings: "wght" 700; letter-spacing: -0.183px; line-height: 24.343px; } @media only screen and (max-width: 991px) { .farako-comment-box__head--rate { font-size: 11px; line-height: 16px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__head--rate { font-size: 2.472px; letter-spacing: -0.037px; line-height: 4.945px; } } .farako-comment-box__head--rate span { color: var(--primary-colors-green-green-100, #11bf3d); font-size: 27.386px; letter-spacing: -0.411px; line-height: 42.6px; } @media only screen and (max-width: 991px) { .farako-comment-box__head--rate span { font-size: 20px; line-height: 24px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__head--rate span { line-height: 8.653px; letter-spacing: -0.083px; font-size: 5.563px; } } .farako-comment-box__content .form-control { margin-bottom: 12px; } @media only screen and (max-width: 991px) { .farako-comment-box__content .form-control { margin-bottom: 8px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__content .form-control { margin-bottom: 2px; } } .farako-comment-box__content .form-control__input { position: relative; } .farako-comment-box__content .form-control__input--chars { position: absolute; left: 8px; bottom: 4px; color: var(--primary-colors-dark-gray-dark-gray-20, #727376); font-size: 9.129px; line-height: 13.693px; pointer-events: none; } @media only screen and (max-width: 991px) { .farako-comment-box__content .form-control__input--chars { left: 6px; bottom: 4px; font-size: 8px; line-height: 12px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__content .form-control__input--chars { bottom: 2px; left: 2px; line-height: 2.781px; font-size: 1.854px; } } .farako-comment-box__content .form-control__input--chars span.error { color: var(--system-colors-error, #dc362e); } .farako-comment-box__content .form-control label { margin-bottom: 6px; color: var(--primary-colors-dark-gray-dark-gray-60, #444547); font-size: 10.65px; line-height: 13.693px; display: block; } @media only screen and (max-width: 991px) { .farako-comment-box__content .form-control label { margin-bottom: 4px; font-size: 7px; line-height: 10px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__content .form-control label { margin-bottom: 1px; font-size: 2.163px; line-height: 2.781px; } } .farako-comment-box__content .form-control input { display: block; width: 100%; padding: 12px; font-size: 12px; line-height: 18.257px; border-radius: 9.129px; border: 0.761px solid var(--primary-colors-light-gray-light-gray-60, #d5d5d6); background: #fff; transition: all 0.3s; outline: none; color: var(--colors-dark-gray-80, #2e2e2f); } @media only screen and (max-width: 991px) { .farako-comment-box__content .form-control input { padding: 8px; font-size: 8px; line-height: 12px; border-radius: 8px; border-width: 0.5px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__content .form-control input { padding: 2.47px; line-height: 3.709px; font-size: 2.472px; border-radius: 1.854px; border-width: 0.155px; } } .farako-comment-box__content .form-control input:focus { border-color: var(--colors-dark-gray-60, #444547); } .farako-comment-box__content .form-control input::placeholder { color: #d5d5d6; opacity: 1; } .farako-comment-box__content .form-control textarea { display: block; border-radius: 9.129px; border: 0.761px solid var(--primary-colors-light-gray-light-gray-60, #d5d5d6); background: #fff; height: 60px; resize: none; outline: none; color: var(--colors-dark-gray-80, #2e2e2f); width: 100%; padding: 12px; font-size: 12px; line-height: 18.257px; transition: all 0.3s; } @media only screen and (max-width: 991px) { .farako-comment-box__content .form-control textarea { height: 40px; padding: 8px; font-size: 8px; line-height: 12px; border-radius: 8px; border-width: 0.5px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__content .form-control textarea { padding: 2.47px; line-height: 3.709px; font-size: 2.472px; border-radius: 1.854px; border-width: 0.155px; height: 13px; } } .farako-comment-box__content .form-control textarea:focus { border-color: var(--colors-dark-gray-60, #444547); } .farako-comment-box__content .form-control textarea::placeholder { color: #d5d5d6; opacity: 1; } .farako-comment-box__content--description { font-size: 9.129px; font-weight: 400; font-variation-settings: "wght" 400; color: var(--primary-colors-dark-gray-dark-gray-20, #727376); line-height: 18.257px; transition: all 0.3s; } .farako-comment-box__content--description a { color: var(--primary-colors-green-green-100, #11bf3d); } .farako-comment-box__content--description a:hover { color: var(--colors-accent-120, #029c28); } @media only screen and (max-width: 991px) { .farako-comment-box__content--description { font-size: 8px; line-height: 12px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__content--description { font-size: 1.854px; line-height: 3.709px; } } .farako-comment-box__content--submit { margin-bottom: 6px; width: 100%; display: flex; align-items: center; justify-content: center; background: var(--primary-colors-green-green-100, #11bf3d); border-radius: 6.086px; height: 32px; color: #fff; font-size: 10.65px; font-weight: 700; font-variation-settings: "wght" 700; line-height: 18.257px; border: none; text-align: center; transition: all 0.3s; } @media only screen and (max-width: 991px) { .farako-comment-box__content--submit { margin-bottom: 4px; height: 24px; font-size: 8px; line-height: 12px; border-radius: 4px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__content--submit { margin-bottom: 1px; height: 6.47px; border-radius: 1.236px; line-height: 3.709px; font-size: 2.163px; } } .farako-comment-box__content--submit:hover { background: var(--colors-accent-120, #029c28); } .farako-comment-box__content--tools { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } @media only screen and (max-width: 991px) { .farako-comment-box__content--tools { margin-bottom: 12px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__content--tools { margin-bottom: 3.42px; } } .farako-comment-box__content--tools-upload { background: transparent; border: none; display: flex; align-items: center; gap: 4px; color: var(--primary-colors-green-green-100, #11bf3d); font-size: 10.65px; font-weight: 700; font-variation-settings: "wght" 700; line-height: 18.257px; letter-spacing: -0.16px; transition: all 0.3s; } @media only screen and (max-width: 991px) { .farako-comment-box__content--tools-upload { gap: 2px; font-size: 8px; line-height: 12px; } .farako-comment-box__content--tools-upload svg { width: 0.721px; height: 1.442px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__content--tools-upload { gap: 1.28px; font-size: 2.163px; letter-spacing: -0.032px; line-height: 3.709px; } } .farako-comment-box__content--tools-upload:hover { color: var(--colors-accent-120, #029c28); } .farako-comment-box__content--tools-stars { display: flex; align-items: center; gap: 6px; flex-direction: row-reverse; } @media only screen and (max-width: 991px) { .farako-comment-box__content--tools-stars { gap: 4px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__content--tools-stars { gap: 1.4px; } .farako-comment-box__content--tools-stars svg { width: 2.086px; height: 1.97px; } } .farako-comment-box__content--tools-stars_rate { direction: ltr; padding-left: 2px; color: var(--primary-colors-dark-gray-dark-gray-20, #727376); font-size: 9.129px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 12.172px; } @media only screen and (max-width: 991px) { .farako-comment-box__content--tools-stars_rate { font-size: 8px; line-height: 8px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__content--tools-stars_rate { padding-left: 1.24px; line-height: 2.472px; font-size: 1.854px; } } .farako-comment-box__content--tools-stars_rate span { color: var(--primary-colors-green-green-100, #11bf3d); font-size: 10.65px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 18.257px; } @media only screen and (max-width: 991px) { .farako-comment-box__content--tools-stars_rate span { font-size: 8px; line-height: 12px; } } @media only screen and (max-width: 767.98px) { .farako-comment-box__content--tools-stars_rate span { line-height: 3.709px; font-size: 2.163px; } } .case-study-farako-mobile { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-farako-mobile { padding-top: 48px; padding-bottom: 48px; } } .case-study-farako-mobile__content { display: flex; align-items: flex-start; justify-content: center; gap: 40px; position: relative; } @media only screen and (max-width: 767.98px) { .case-study-farako-mobile__content { gap: 12px; } } .case-study-farako-mobile__content img { border: 8px solid #eaecec; border-radius: 50px; position: relative; z-index: 2; } @media only screen and (max-width: 991px) { .case-study-farako-mobile__content img { max-width: 42%; border-radius: 12px; } } @media only screen and (max-width: 767.98px) { .case-study-farako-mobile__content img { border-width: 1.629px; max-width: 27%; } } .case-study-farako-mobile__content img:first-of-type { z-index: 0; margin-top: 60px; } @media only screen and (max-width: 767.98px) { .case-study-farako-mobile__content img:first-of-type { margin-top: 14px; } } .case-study-farako-mobile__content--shadow { background: rgba(150, 171, 191, 0.2); width: 460.992px; height: 944.227px; position: absolute; left: 50%; transform: translateX(-50%); bottom: -60px; z-index: 1; filter: blur(97px); pointer-events: none; } @media only screen and (max-width: 767.98px) { .case-study-farako-mobile__content--shadow { width: 94.08px; height: 192.599px; background: rgba(150, 171, 191, 0.2); filter: blur(19.7536487579px); bottom: -20px; } } .case-study-farako-gallery { overflow: hidden; position: relative; border: 1px solid var(--Gray-Gray---10, #eaecec); background: #fafafa; } .case-study-farako-gallery__content { transform: rotate(-30deg); display: flex; flex-direction: column; gap: 50px; margin-top: -10%; } @media only screen and (max-width: 767.98px) { .case-study-farako-gallery__content { gap: 12px; } } .case-study-farako-gallery__content--images { display: flex; gap: 50px; margin-left: -10%; } @media only screen and (max-width: 767.98px) { .case-study-farako-gallery__content--images { gap: 12px; } } .case-study-farako-gallery__content--images:nth-child(2n) { margin-left: -50%; } .case-study-farako-gallery__content--image { border-radius: 16px; border: 8px solid var(--Gray-Gray---10, #eaecec); position: relative; z-index: 0; max-width: 75% !important; } @media only screen and (max-width: 767.98px) { .case-study-farako-gallery__content--image { border-radius: 3.25px; border-width: 1.625px; } } .case-study-farako-gallery__content--image-item1 { z-index: 2; } .case-study-farako-gallery__content--shadow { width: 1690.003px; height: 1008.183px; position: absolute; left: 0; top: 10%; z-index: 1; background: rgba(150, 171, 191, 0.2); filter: blur(116.4000015259px); pointer-events: none; } @media only screen and (max-width: 767.98px) { .case-study-farako-gallery__content--shadow { width: 343.282px; height: 204.787px; background: rgba(150, 171, 191, 0.2); filter: blur(97px); top: 5%; } } .case-study-purchasing { position: relative; overflow: hidden; padding-top: 160px; } @media only screen and (max-width: 767.98px) { .case-study-purchasing { padding-top: 48px; } } .case-study-purchasing__content { position: relative; z-index: 2; display: flex; justify-content: flex-end; } .case-study-purchasing__content--info { max-width: 524px; } @media only screen and (max-width: 1199px) { .case-study-purchasing__content--info { max-width: 450px; } } @media only screen and (max-width: 767.98px) { .case-study-purchasing__content--info { max-width: 100%; } .case-study-purchasing__content--info .site-case-study__title { text-align: center; } } .case-study-purchasing__gallery { position: relative; z-index: 1; transform: rotate(-20deg); display: flex; gap: 32px; align-items: flex-start; margin-top: -20%; padding-right: 5%; margin-left: -10%; margin-bottom: -40%; } @media only screen and (max-width: 1640px) { .case-study-purchasing__gallery { padding-right: 12%; } } @media only screen and (max-width: 1400px) { .case-study-purchasing__gallery { margin-bottom: -25%; padding-right: 25%; } } @media only screen and (max-width: 1199px) { .case-study-purchasing__gallery { gap: 16px; } } @media only screen and (max-width: 991px) { .case-study-purchasing__gallery { margin-bottom: -30%; padding-right: 20%; margin-top: -4%; } } @media only screen and (max-width: 767.98px) { .case-study-purchasing__gallery { gap: 8px; padding-right: 5%; margin-bottom: -40%; margin-top: 0; } } .case-study-purchasing__gallery--col { display: flex; flex-direction: column; gap: 32px; } @media only screen and (max-width: 1199px) { .case-study-purchasing__gallery--col { gap: 16px; } } @media only screen and (max-width: 767.98px) { .case-study-purchasing__gallery--col { gap: 8px; } } .case-study-purchasing__gallery--col img { border-radius: 24px; border: 8px solid var(--Gray-Gray---10, #eaecec); } @media only screen and (max-width: 767.98px) { .case-study-purchasing__gallery--col img { border-radius: 4.888px; border-width: 1.629px; } } .case-study-purchasing__gallery--col:nth-child(1) { margin-top: 21%; } .case-study-purchasing__gallery--col:nth-child(2) { margin-top: 18%; } .case-study-purchasing__gallery--col:nth-child(3) { margin-top: 7%; } .case-study-purchasing__gallery--col:nth-child(4) { margin-top: 15%; } .case-study-purchasing__gallery--col:nth-child(5) { margin-top: 45%; } .case-study-purchasing.case-study-purchasing--only-gallery .case-study-purchasing__gallery { padding-right: 0; margin-top: -10%; margin-right: -5%; margin-left: -15%; z-index: 2; } @media only screen and (max-width: 767.98px) { .case-study-purchasing.case-study-purchasing--only-gallery .case-study-purchasing__gallery { margin-top: -8%; } } .case-study-purchasing.case-study-purchasing--damn-plastic .case-study-purchasing__gallery { padding-right: 0; margin-bottom: -30%; margin-left: -25%; } @media only screen and (max-width: 1400px) { .case-study-purchasing.case-study-purchasing--damn-plastic .case-study-purchasing__gallery { margin-top: -15%; } } @media only screen and (max-width: 767.98px) { .case-study-purchasing.case-study-purchasing--damn-plastic .case-study-purchasing__gallery { margin-top: 25%; margin-bottom: -35%; } } .case-study-purchasing.case-study-purchasing--damn-plastic .case-study-purchasing__gallery--col:nth-child(1) { margin-top: 10%; } .case-study-purchasing.case-study-purchasing--damn-plastic .case-study-purchasing__gallery--col:nth-child(2) { margin-top: -20%; } .case-study-purchasing.case-study-purchasing--damn-plastic .case-study-purchasing__gallery--col:nth-child(3) { margin-top: 20%; } .case-study-purchasing.case-study-purchasing--damn-plastic .case-study-purchasing__gallery--col:nth-child(4) { margin-top: 35%; } .case-study-purchasing.case-study-purchasing--v2 { background: #fafafa; } @font-face { font-family: "IRANYekanX"; font-style: normal; font-weight: 300; font-variation-settings: "wght" 300; src: url("./assets/fonts/IRANYekanX/woff/IRANYekanX-Light.woff") format("woff"), url("./assets/fonts/IRANYekanX/woff2/IRANYekanX-Light.woff2") format("woff2"); } @font-face { font-family: "IRANYekanX"; font-style: normal; font-weight: 400; font-variation-settings: "wght" 400; src: url("./assets/fonts/IRANYekanX/woff/IRANYekanX-Regular.woff") format("woff"), url("./assets/fonts/IRANYekanX/woff2/IRANYekanX-Regular.woff2") format("woff2"); } @font-face { font-family: "IRANYekanX"; font-style: normal; font-weight: 500; font-variation-settings: "wght" 500; src: url("./assets/fonts/IRANYekanX/woff/IRANYekanX-Medium.woff") format("woff"), url("./assets/fonts/IRANYekanX/woff2/IRANYekanX-Medium.woff2") format("woff2"); } @font-face { font-family: "IRANYekanX"; font-style: normal; font-weight: 600; font-variation-settings: "wght" 600; src: url("./assets/fonts/IRANYekanX/woff/IRANYekanX-DemiBold.woff") format("woff"), url("./assets/fonts/IRANYekanX/woff2/IRANYekanX-DemiBold.woff2") format("woff2"); } @font-face { font-family: "IRANYekanX"; font-style: normal; font-weight: 700; font-variation-settings: "wght" 700; src: url("./assets/fonts/IRANYekanX/woff/IRANYekanX-Bold.woff") format("woff"), url("./assets/fonts/IRANYekanX/woff2/IRANYekanX-Bold.woff2") format("woff2"); } .iranYekanXFont, .case-study-artapan-typography__content { font-family: "IRANYekanX"; } .case-study-artapan-typography { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-artapan-typography { padding-top: 48px; padding-bottom: 48px; } } .case-study-artapan-typography__content { margin-left: auto; margin-right: auto; max-width: 1062px; display: flex; gap: 16px; flex-wrap: wrap; } @media only screen and (max-width: 767.98px) { .case-study-artapan-typography__content { flex-direction: column; } } .case-study-artapan-typography__content--left-top { color: #2e2d2c; flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #f8f8f8; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } @media only screen and (max-width: 767.98px) { .case-study-artapan-typography__content--left-top { padding: 16px 32px; flex: unset; max-width: 100%; height: 324px; order: 1; } } .case-study-artapan-typography__content--left-top ul { display: flex; align-items: center; gap: 24px; } .case-study-artapan-typography__content--left-top ul li { font-size: 16px; line-height: 190.5%; text-transform: capitalize; } .case-study-artapan-typography__content--left-top ul li:nth-child(1) { font-weight: 300; font-variation-settings: "wght" 300; } .case-study-artapan-typography__content--left-top ul li:nth-child(2) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-artapan-typography__content--left-top ul li:nth-child(3) { font-weight: 500; font-variation-settings: "wght" 500; } .case-study-artapan-typography__content--left-top ul li:nth-child(4) { font-weight: 700; font-variation-settings: "wght" 700; } .case-study-artapan-typography__content--left-top_title { color: #00623e; font-size: 48px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 190.5%; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-artapan-typography__content--left-top_title { font-size: 32px; line-height: normal; } } .case-study-artapan-typography__content--left-top p { text-align: center; letter-spacing: 1.28px; line-height: 141%; text-transform: capitalize; font-weight: 300; font-variation-settings: "wght" 300; font-size: 16px; } .case-study-artapan-typography__content--left-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-artapan-typography__content--left-bottom { flex: unset; max-width: 100%; height: 260px; order: 2; } } .case-study-artapan-typography__content--left-bottom_big { flex: 1; color: #fff; background: #00623e; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-artapan-typography__content--left-bottom_big { padding: 8px; } } .case-study-artapan-typography__content--left-bottom_big span { max-width: 152px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-artapan-typography__content--left-bottom_big span { max-width: 93px; letter-spacing: 0.64px; line-height: 40px; font-size: 32px; } } .case-study-artapan-typography__content--left-bottom_mini { background: #f8f8f8; flex: 0 0 151px; max-width: 151px; padding: 16px 8px; color: #00623e; font-size: 12px; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-artapan-typography__content--left-bottom_mini { flex: 0 0 84px; max-width: 84px; padding: 8px; } } .case-study-artapan-typography__content--right-top { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #00623e; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-artapan-typography__content--right-top { flex: unset; max-width: 100%; height: 324px; order: 0; } } .case-study-artapan-typography__content--right-top span { color: #fff; font-size: 400px; font-weight: 500; font-variation-settings: "wght" 500; line-height: 134px; text-transform: capitalize; } @media only screen and (max-width: 991px) { .case-study-artapan-typography__content--right-top span { font-size: 285px; line-height: 100px; } } @media only screen and (max-width: 767.98px) { .case-study-artapan-typography__content--right-top span { font-size: 300px; line-height: 80px; } } .case-study-artapan-typography__content--right-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-artapan-typography__content--right-bottom { flex: unset; max-width: 100%; height: 260px; order: 3; } } .case-study-artapan-typography__content--right-bottom_big { flex: 1; color: #fff; background: #1d1e1e; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-artapan-typography__content--right-bottom_big { padding: 8px; line-height: normal; } } .case-study-artapan-typography__content--right-bottom_big span { max-width: 157px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-artapan-typography__content--right-bottom_big span { max-width: unset; font-size: 24px; letter-spacing: 0.48px; line-height: normal; } } .case-study-artapan-typography__content--right-bottom_mini { flex: 0 0 151px; max-width: 151px; } @media only screen and (max-width: 767.98px) { .case-study-artapan-typography__content--right-bottom_mini { flex: 0 0 91px; max-width: 91px; } } .case-study-artapan-typography__content--right-bottom_mini ul { display: flex; flex-direction: column; height: 100%; } .case-study-artapan-typography__content--right-bottom_mini ul li { width: 100%; padding: 16px; color: #fff; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-artapan-typography__content--right-bottom_mini ul li { padding: 8px; line-height: normal; } } .case-study-artapan-typography__content--right-bottom_mini ul li:nth-child(1) { background: #aeaeae; } .case-study-artapan-typography__content--right-bottom_mini ul li:nth-child(2) { background: #737373; } .case-study-artapan-typography__content--right-bottom_mini ul li:nth-child(3) { background: #515151; } .case-study-artapan-typography__content--right-bottom_mini ul li:nth-child(4) { background: #393938; } .case-study-artapan-typography__content--right-bottom_mini ul li:nth-child(5) { background: #2f2f2f; } .case-study-artapan-typography__content--right-bottom_mini ul li:nth-child(6) { background: #242424; } .case-study-artapan-typography__content--right-bottom_mini ul li:nth-child(7) { background: #1c1c1c; } .case-study-artapan-typography__content--right-bottom_mini ul li:nth-child(8) { background: #0d0d0d; } .case-study-artapan-typography__content--right-bottom_mini ul li:has(span) { flex: 1; } .case-study-simulation { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-simulation { padding-top: 48px; padding-bottom: 48px; } } .case-study-simulation__content { display: flex; flex-direction: column; gap: 160px; } @media only screen and (max-width: 767.98px) { .case-study-simulation__content { gap: 80px; } } .case-study-simulation__content--description { max-width: 508px; margin-left: auto; } @media only screen and (max-width: 767.98px) { .case-study-simulation__content--description { max-width: 100%; } } .case-study-simulation__content--pictures-shadow { background: rgba(150, 171, 191, 0.2); filter: blur(113.2475128174px); width: 485.035px; aspect-ratio: 0.5; position: absolute; left: 25%; top: 25%; pointer-events: none; } .case-study-simulation__content--pictures ul { display: flex; justify-content: center; gap: 60px; } @media only screen and (max-width: 767.98px) { .case-study-simulation__content--pictures ul { gap: 8px; } } .case-study-simulation__content--pictures ul li { position: relative; } .case-study-simulation__content--pictures ul li img { border-radius: 60px; border: 8px solid var(--Gray-Gray---10, #eaecec); } @media only screen and (max-width: 767.98px) { .case-study-simulation__content--pictures ul li img { border-radius: 24px; border-width: 1.629px; } } .case-study-simulation__content--pictures ul li:nth-child(2) { transform: translateY(-112px); } @media only screen and (max-width: 767.98px) { .case-study-simulation__content--pictures ul li:nth-child(2) { transform: translateY(-60px); } } .case-study-simulation.case-study-simulation--only-gallery .case-study-simulation__content--pictures { padding-top: 112px; } @media only screen and (max-width: 767.98px) { .case-study-simulation.case-study-simulation--only-gallery .case-study-simulation__content--pictures { padding-top: 60px; } } .case-study-bagzee-typography { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-typography { padding-top: 48px; padding-bottom: 48px; } } .case-study-bagzee-typography__content { margin-left: auto; margin-right: auto; max-width: 1062px; display: flex; gap: 16px; flex-wrap: wrap; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-typography__content { flex-direction: column; } } .case-study-bagzee-typography__content--left-top { color: #2e2d2c; flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #f8f8f8; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-typography__content--left-top { padding: 16px 32px; flex: unset; max-width: 100%; height: 324px; order: 1; } } .case-study-bagzee-typography__content--left-top ul { display: flex; align-items: center; gap: 24px; } .case-study-bagzee-typography__content--left-top ul li { font-size: 16px; line-height: 190.5%; text-transform: capitalize; } .case-study-bagzee-typography__content--left-top ul li:nth-child(1) { font-weight: 300; font-variation-settings: "wght" 300; } .case-study-bagzee-typography__content--left-top ul li:nth-child(2) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-bagzee-typography__content--left-top ul li:nth-child(3) { font-weight: 500; font-variation-settings: "wght" 500; } .case-study-bagzee-typography__content--left-top ul li:nth-child(4) { font-weight: 700; font-variation-settings: "wght" 700; } .case-study-bagzee-typography__content--left-top_title { color: #005cff; font-size: 48px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 190.5%; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-typography__content--left-top_title { font-size: 32px; line-height: normal; } } .case-study-bagzee-typography__content--left-top p { text-align: center; letter-spacing: 1.28px; line-height: 141%; text-transform: capitalize; font-weight: 300; font-variation-settings: "wght" 300; font-size: 16px; } .case-study-bagzee-typography__content--left-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-typography__content--left-bottom { flex: unset; max-width: 100%; height: 260px; order: 2; } } .case-study-bagzee-typography__content--left-bottom_big { flex: 1; color: #fff; background: #005cff; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-typography__content--left-bottom_big { padding: 8px; } } .case-study-bagzee-typography__content--left-bottom_big span { max-width: 152px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-typography__content--left-bottom_big span { max-width: 97px; letter-spacing: 0.64px; line-height: 40px; font-size: 32px; } } .case-study-bagzee-typography__content--left-bottom_mini { background: #f5f7f8; flex: 0 0 151px; max-width: 151px; padding: 16px 8px; color: #005cff; font-size: 12px; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-typography__content--left-bottom_mini { flex: 0 0 84px; max-width: 84px; padding: 8px; } } .case-study-bagzee-typography__content--right-top { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #005cff; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-typography__content--right-top { flex: unset; max-width: 100%; height: 324px; order: 0; } } .case-study-bagzee-typography__content--right-top span { color: #fff; font-size: 400px; font-weight: 500; font-variation-settings: "wght" 500; line-height: 134px; text-transform: capitalize; } @media only screen and (max-width: 991px) { .case-study-bagzee-typography__content--right-top span { font-size: 285px; line-height: 100px; } } @media only screen and (max-width: 767.98px) { .case-study-bagzee-typography__content--right-top span { font-size: 300px; line-height: 80px; } } .case-study-bagzee-typography__content--right-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-typography__content--right-bottom { flex: unset; max-width: 100%; height: 260px; order: 3; } } .case-study-bagzee-typography__content--right-bottom_big { flex: 1; color: #00156d; background: #1adf3e; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-typography__content--right-bottom_big { padding: 8px; line-height: normal; } } .case-study-bagzee-typography__content--right-bottom_big span { max-width: 199px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-typography__content--right-bottom_big span { max-width: unset; font-size: 24px; letter-spacing: 0.48px; line-height: normal; } } .case-study-bagzee-typography__content--right-bottom_mini { flex: 0 0 151px; max-width: 151px; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-typography__content--right-bottom_mini { flex: 0 0 91px; max-width: 91px; } } .case-study-bagzee-typography__content--right-bottom_mini ul { display: flex; flex-direction: column; height: 100%; } .case-study-bagzee-typography__content--right-bottom_mini ul li { width: 100%; padding: 16px; color: #00156d; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-typography__content--right-bottom_mini ul li { padding: 8px; line-height: normal; } } .case-study-bagzee-typography__content--right-bottom_mini ul li:nth-child(1) { background: #e5fce9; } .case-study-bagzee-typography__content--right-bottom_mini ul li:nth-child(2) { background: #cbf9d3; } .case-study-bagzee-typography__content--right-bottom_mini ul li:nth-child(3) { background: #b1f6be; } .case-study-bagzee-typography__content--right-bottom_mini ul li:nth-child(4) { background: #7df092; } .case-study-bagzee-typography__content--right-bottom_mini ul li:nth-child(5) { background: #63ed7c; } .case-study-bagzee-typography__content--right-bottom_mini ul li:nth-child(6) { background: #49ea67; } .case-study-bagzee-typography__content--right-bottom_mini ul li:nth-child(7) { background: #2fe751; } .case-study-bagzee-typography__content--right-bottom_mini ul li:nth-child(8) { background: #2fe751; } .case-study-bagzee-typography__content--right-bottom_mini ul li:has(span) { flex: 1; } .case-study-mini-gallery { overflow: hidden; padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-mini-gallery { padding-top: 48px; padding-bottom: 48px; } } .case-study-mini-gallery__content { display: flex; gap: 60px; justify-content: space-between; margin-left: -37%; margin-right: -27%; margin-bottom: 4%; } @media only screen and (max-width: 767.98px) { .case-study-mini-gallery__content { gap: 16px; margin-bottom: 10%; } } .case-study-mini-gallery__content img { border-radius: 16px; border: 8px solid var(--Gray-Gray---10, #eaecec); max-width: unset; position: relative; z-index: 1; } @media only screen and (max-width: 991px) { .case-study-mini-gallery__content img { width: calc(100% - 72px); } } @media only screen and (max-width: 767.98px) { .case-study-mini-gallery__content img { border-radius: 3.125px; border-width: 1.563px; } } .case-study-mini-gallery__content--left { flex: 0 0 60%; position: relative; display: flex; justify-content: flex-end; max-width: 75%; will-change: transform; } @media only screen and (max-width: 1400px) { .case-study-mini-gallery__content--left { max-width: 60%; } } @media only screen and (max-width: 991px) { .case-study-mini-gallery__content--left { max-width: 50%; } } @media only screen and (max-width: 767.98px) { .case-study-mini-gallery__content--left { will-change: auto; } } .case-study-mini-gallery__content--left img { position: relative; z-index: 3; } .case-study-mini-gallery__content--left svg { pointer-events: none; position: absolute; left: 0; top: 0; width: 115%; height: auto; z-index: 2; } @media only screen and (max-width: 767.98px) { .case-study-mini-gallery__content--left svg { width: 375.558px; height: unset; aspect-ratio: 0.8; } } .case-study-mini-gallery__content--right { flex: 1; margin-top: 75px; margin-bottom: -10%; will-change: transform; } @media only screen and (max-width: 767.98px) { .case-study-mini-gallery__content--right { margin-top: 32px; will-change: auto; } } .case-study-mini-gallery.case-study-mini-gallery--v2 .case-study-mini-gallery__content--left { flex: 0 0 52%; max-width: 64%; } @media only screen and (max-width: 991px) { .case-study-mini-gallery.case-study-mini-gallery--v2 .case-study-mini-gallery__content--right { margin-top: 160px; } } @media only screen and (max-width: 767.98px) { .case-study-mini-gallery.case-study-mini-gallery--v2 .case-study-mini-gallery__content--right { margin-top: 60px; } } .case-study-auto-tabs { padding-top: 160px; } @media only screen and (max-width: 767.98px) { .case-study-auto-tabs { padding-top: 48px; } } .case-study-auto-tabs__content { display: flex; gap: 120px; align-items: flex-end; } @media only screen and (max-width: 1199px) { .case-study-auto-tabs__content { gap: 48px; flex-direction: column; } } .case-study-auto-tabs__content--description { flex: 0 0 523px; padding-bottom: 120px; } @media only screen and (max-width: 1199px) { .case-study-auto-tabs__content--description { flex: unset; padding-bottom: 0; } } .case-study-auto-tabs__content--image { border-radius: 16px; border: 8px solid var(--Gray-Gray---10, #eaecec); } .case-study-auto-tabs__content--image img { max-width: unset; } @media only screen and (max-width: 1199px) { .case-study-auto-tabs__content--image img { max-width: 100%; } } .case-study-full-slider__slides { display: flex; flex-direction: column-reverse; } .case-study-full-slider__viewport { overflow: visible; touch-action: pan-y; cursor: grab; user-select: none; } .case-study-full-slider__viewport:active { cursor: grabbing; } .case-study-full-slider__track { display: flex; align-items: flex-start; width: max-content; will-change: transform; } .case-study-full-slider__dots { display: flex; align-items: center; justify-content: center; margin-bottom: 27px; gap: 5px; } .case-study-full-slider__dots button { border-radius: 0px 10.252px 10.252px 0px; background: var(--Blue-Blue---20, #ccdeff); width: 103.797px; height: 5.129px; padding: 0; border: none; font-size: 0; transition: all 0.3s; cursor: pointer; } .case-study-full-slider__dots .is-active button { background: var(--Blue-Blue---dark, #00156d); } .case-study-full-slider .slider-item { flex: 0 0 auto; transition: transform 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease; transform: scale(0.8); border-radius: 13.777px; border: 0.861px solid rgba(234, 236, 236, 0.5); overflow: hidden; box-shadow: 0px 3.444px 3.444px 0px rgba(80, 106, 123, 0.05); width: 22vw; margin-bottom: 160px; } @media only screen and (max-width: 1024px) { .case-study-full-slider .slider-item { width: 44vw; } } @media only screen and (max-width: 767.98px) { .case-study-full-slider .slider-item { margin-bottom: 48px; } } .case-study-full-slider .slider-item img { width: 100%; height: auto; display: block; pointer-events: none; } .case-study-full-slider .slider-item.is-center { transform: scale(1); opacity: 1; z-index: 2; border-radius: 20.503px; border: 1.281px solid rgba(234, 236, 236, 0.5); box-shadow: 0px 40px 80px 0px rgba(150, 171, 191, 0.2); } .case-study-bagzee-gallery { overflow: hidden; position: relative; background: #fafafa; } .case-study-bagzee-gallery__content { transform: rotate(-30deg); display: flex; gap: 50px; margin-top: -20%; margin-bottom: -20%; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-gallery__content { gap: 12px; } } .case-study-bagzee-gallery__content--images { display: flex; gap: 50px; flex-direction: column; flex: 0 0 calc(50% - 25px); } @media only screen and (max-width: 767.98px) { .case-study-bagzee-gallery__content--images { gap: 12px; } } .case-study-bagzee-gallery__content--image { border-radius: 16px; border: 8px solid var(--Gray-Gray---10, #eaecec); position: relative; z-index: 0; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-gallery__content--image { border-radius: 3.25px; border-width: 1.625px; } } .case-study-bagzee-gallery__content--image-item6 { z-index: 2; } .case-study-bagzee-gallery__content--shadow { width: 1053.693px; height: 628.279px; position: absolute; left: 40%; top: 40%; z-index: 1; background: var(--Shadow, rgba(8, 8, 8, 0.16)); filter: blur(97px); pointer-events: none; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-gallery__content--shadow { width: 343.282px; height: 204.787px; background: rgba(150, 171, 191, 0.2); filter: blur(97px); top: 5%; } } .case-study-bagzee-app-gallery { position: relative; overflow: hidden; height: 75vw; } .case-study-bagzee-app-gallery__content { z-index: 1; display: flex; align-items: center; gap: 74px; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; padding-left: 82px; padding-right: 82px; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-app-gallery__content { padding-left: 16px; padding-right: 16px; gap: 16px; justify-content: center; } } .case-study-bagzee-app-gallery__content--col { flex: 0 0 calc(33.33% - 49.33px); max-width: calc(33.33% - 49.33px); display: flex; flex-direction: column; gap: 44px; will-change: transform; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-app-gallery__content--col { gap: 16px; will-change: auto; } } .case-study-bagzee-app-gallery__content--col img { border-radius: 24px; border: 8px solid var(--Gray-Gray---10, #eaecec); } @media only screen and (max-width: 767.98px) { .case-study-bagzee-app-gallery__content--col img { border-radius: 4.888px; border-width: 1.629px; } } .case-study-bagzee-mobile-app { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-mobile-app { padding-top: 48px; padding-bottom: 48px; } } .case-study-bagzee-mobile-app__content { display: flex; align-items: center; justify-content: center; gap: 56px; } @media only screen and (max-width: 767.98px) { .case-study-bagzee-mobile-app__content { gap: 24px; } } .case-study-bagzee-mobile-app__content img { border-radius: 60px; border: 8px solid var(--Gray-Gray---10, #eaecec); } @media only screen and (max-width: 767.98px) { .case-study-bagzee-mobile-app__content img { border-radius: 40px; border-width: 1.629px; max-width: 40%; } .case-study-bagzee-mobile-app__content img:nth-child(2) { max-width: 50%; } } .case-study-missions-achievements { padding-top: 160px; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-missions-achievements { padding-top: 48px; } } .case-study-missions-achievements__content { position: relative; z-index: 1; display: flex; flex-direction: row-reverse; gap: 64px; padding-left: 25%; padding-right: 135px; } @media only screen and (max-width: 1300px) { .case-study-missions-achievements__content { padding-right: 0; gap: 32px; } } @media only screen and (max-width: 767.98px) { .case-study-missions-achievements__content { padding-left: 0; padding-right: 0; flex-direction: column; align-items: flex-end; } } .case-study-missions-achievements__content--details { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 120px; flex: 1; gap: 8px; } @media only screen and (max-width: 991px) { .case-study-missions-achievements__content--details { padding-bottom: 80px; } } @media only screen and (max-width: 767.98px) { .case-study-missions-achievements__content--details { padding-bottom: 0; gap: 0; width: 100%; } } .case-study-missions-achievements__content--images { position: relative; } @media only screen and (max-width: 1300px) { .case-study-missions-achievements__content--images { display: flex; align-items: flex-end; } } @media only screen and (max-width: 767.98px) { .case-study-missions-achievements__content--images { justify-content: center; width: 100%; } } .case-study-missions-achievements__content--images-big { border-radius: 28.308px 28.308px 0 0; border: 9.436px solid var(--Gray-Gray---10, #eaecec); border-bottom: none; } .case-study-missions-achievements__content--images-mini { position: absolute; bottom: 11%; left: 0; transform: translateX(-50%); border-radius: 21.288px; filter: drop-shadow(0px 40px 80px rgba(150, 171, 191, 0.2)); } @media only screen and (max-width: 767.98px) { .case-study-missions-achievements__content--images-mini { transform: translateX(-2%); width: 70%; border-radius: 12px; bottom: 4%; } } .case-study-float-area { padding-top: 160px; overflow: hidden; background: #fafafa; } @media only screen and (max-width: 767.98px) { .case-study-float-area { padding-top: 48px; } } .case-study-float-area__content { display: flex; flex-direction: column; } .case-study-float-area__content--details { max-width: 475px; margin-top: 118px; margin-left: 270px; margin-bottom: 240px; } @media only screen and (max-width: 1024px) { .case-study-float-area__content--details { margin-top: 0; } } @media only screen and (max-width: 991px) { .case-study-float-area__content--details { margin-left: auto; margin-right: auto; } } @media only screen and (max-width: 767.98px) { .case-study-float-area__content--details { max-width: 100%; margin-bottom: 140px; margin-left: 0; } } @media only screen and (max-width: 480px) { .case-study-float-area__content--details { margin-bottom: 80px; } } .case-study-float-area__content--images { display: flex; align-items: center; margin-left: auto; margin-right: auto; margin-bottom: -14%; position: relative; } @media only screen and (max-width: 1024px) { .case-study-float-area__content--images { justify-content: center; } } .case-study-float-area__content--images__shadow { border-radius: 168px; background: rgba(150, 171, 191, 0.2); mix-blend-mode: multiply; filter: blur(68.5714569092px); width: 667.2px; aspect-ratio: 0.6; display: block; position: absolute; left: 50%; transform: translateX(-50%) rotate(9deg); bottom: 25%; } @media only screen and (max-width: 1024px) { .case-study-float-area__content--images__shadow { width: 35%; } } @media only screen and (max-width: 1024px) { .case-study-float-area__content--images img { width: 35%; } } .case-study-float-area__content--images img:first-child { transform: rotate(-12.89deg); border-radius: 24px; border: 8px solid var(--Gray-Gray---10, #eaecec); } @media only screen and (max-width: 767.98px) { .case-study-float-area__content--images img:first-child { border-radius: 4.888px; border-width: 1.629px; } } .case-study-float-area__content--images img:last-child { transform: rotate(9deg) translateY(-40%) translateX(-5%); border-radius: 24px; border: 8px solid var(--Gray-Gray---10, #eaecec); } @media only screen and (max-width: 1024px) { .case-study-float-area__content--images img:last-child { transform: rotate(9deg) translateY(-25%) translateX(-5%); } } @media only screen and (max-width: 767.98px) { .case-study-float-area__content--images img:last-child { border-radius: 4.888px; border-width: 1.629px; } } .case-study-collection-ruesch-typography { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-typography { padding-top: 48px; padding-bottom: 48px; } } .case-study-collection-ruesch-typography__content { margin-left: auto; margin-right: auto; max-width: 1062px; display: flex; gap: 16px; flex-wrap: wrap; } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-typography__content { flex-direction: column; } } .case-study-collection-ruesch-typography__content--left-top { color: #000; flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #d6e1f3; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-typography__content--left-top { padding: 16px 32px; flex: unset; max-width: 100%; height: 324px; order: 1; } } .case-study-collection-ruesch-typography__content--left-top ul { display: flex; align-items: center; gap: 24px; } .case-study-collection-ruesch-typography__content--left-top ul li { font-size: 16px; line-height: 190.5%; text-transform: capitalize; } .case-study-collection-ruesch-typography__content--left-top ul li:nth-child(1) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-collection-ruesch-typography__content--left-top ul li:nth-child(2) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-collection-ruesch-typography__content--left-top ul li:nth-child(3) { font-weight: 700; font-variation-settings: "wght" 700; } .case-study-collection-ruesch-typography__content--left-top_title { color: #03225e; font-size: 48px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 190.5%; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-typography__content--left-top_title { font-size: 32px; line-height: normal; } } .case-study-collection-ruesch-typography__content--left-top p { text-align: center; letter-spacing: 1.28px; line-height: 141%; text-transform: capitalize; font-weight: 300; font-variation-settings: "wght" 300; font-size: 16px; } .case-study-collection-ruesch-typography__content--left-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-typography__content--left-bottom { flex: unset; max-width: 100%; height: 260px; order: 2; } } .case-study-collection-ruesch-typography__content--left-bottom_big { flex: 1; color: #fff; background: #03225e; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-typography__content--left-bottom_big { padding: 8px; } } .case-study-collection-ruesch-typography__content--left-bottom_big span { max-width: 152px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-typography__content--left-bottom_big span { max-width: 97px; letter-spacing: 0.64px; line-height: 40px; font-size: 32px; } } .case-study-collection-ruesch-typography__content--left-bottom_mini { background: #fafafa; flex: 0 0 151px; max-width: 151px; padding: 16px 8px; color: #03225e; font-size: 12px; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-typography__content--left-bottom_mini { flex: 0 0 84px; max-width: 84px; padding: 8px; } } .case-study-collection-ruesch-typography__content--right-top { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #03225e; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-typography__content--right-top { flex: unset; max-width: 100%; height: 324px; order: 0; } } .case-study-collection-ruesch-typography__content--right-top span { color: #fff; font-size: 400px; font-weight: 500; font-variation-settings: "wght" 500; line-height: 134px; text-transform: capitalize; } @media only screen and (max-width: 991px) { .case-study-collection-ruesch-typography__content--right-top span { font-size: 285px; line-height: 100px; } } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-typography__content--right-top span { font-size: 300px; line-height: 80px; } } .case-study-collection-ruesch-typography__content--right-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-typography__content--right-bottom { flex: unset; max-width: 100%; height: 260px; order: 3; } } .case-study-collection-ruesch-typography__content--right-bottom_big { flex: 1; background: #d6e1f3; color: #03225e; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-typography__content--right-bottom_big { padding: 8px; line-height: normal; } } .case-study-collection-ruesch-typography__content--right-bottom_big span { max-width: 199px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-typography__content--right-bottom_big span { max-width: unset; font-size: 24px; letter-spacing: 0.48px; line-height: normal; } } .case-study-collection-ruesch-typography__content--right-bottom_mini { flex: 0 0 151px; max-width: 151px; } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-typography__content--right-bottom_mini { flex: 0 0 91px; max-width: 91px; } } .case-study-collection-ruesch-typography__content--right-bottom_mini ul { display: flex; flex-direction: column; height: 100%; } .case-study-collection-ruesch-typography__content--right-bottom_mini ul li { width: 100%; padding: 16px; color: #fff; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-typography__content--right-bottom_mini ul li { padding: 8px; line-height: normal; } } .case-study-collection-ruesch-typography__content--right-bottom_mini ul li:nth-child(1) { background: #d6e1f3; } .case-study-collection-ruesch-typography__content--right-bottom_mini ul li:nth-child(2) { background: #afc4e8; } .case-study-collection-ruesch-typography__content--right-bottom_mini ul li:nth-child(3) { background: #608bd1; } .case-study-collection-ruesch-typography__content--right-bottom_mini ul li:nth-child(4) { background: #396ec4; } .case-study-collection-ruesch-typography__content--right-bottom_mini ul li:nth-child(5) { background: #2e589d; } .case-study-collection-ruesch-typography__content--right-bottom_mini ul li:nth-child(6) { background: #224276; } .case-study-collection-ruesch-typography__content--right-bottom_mini ul li:nth-child(7) { background: #172c4f; } .case-study-collection-ruesch-typography__content--right-bottom_mini ul li:nth-child(8) { background: #0b1627; } .case-study-collection-ruesch-typography__content--right-bottom_mini ul li:has(span) { flex: 1; } .case-study-collection-ruesch-album { background: var(--Gray-Gray---10, #eaecec); padding-left: 95px; padding-right: 95px; overflow: hidden; } @media only screen and (max-width: 991px) { .case-study-collection-ruesch-album { padding-left: 16px; padding-right: 16px; } } .case-study-collection-ruesch-album__content { display: flex; justify-content: center; align-items: flex-end; position: relative; } .case-study-collection-ruesch-album__content--shadow { position: absolute; border-radius: 168px; background: rgba(150, 171, 191, 0.2); mix-blend-mode: multiply; filter: blur(68.5714263916px); bottom: -10%; left: 50%; transform: translateX(-50%); display: block; aspect-ratio: 0.7; width: 957.257px; } .case-study-collection-ruesch-album__content img { flex: 0 0 50%; max-width: 69%; position: relative; } .case-study-collection-ruesch-album__content img:first-child { border-radius: 16px 16px 0 0; border: 8px solid var(--Gray-Gray---10, #eaecec); border-bottom: none; margin-right: -37%; z-index: 1; } .case-study-collection-ruesch-album__content img:last-child { opacity: 0.8; } .case-study-static-scroll-gallery { overflow: hidden; } .case-study-static-scroll-gallery__content { display: flex; align-items: center; justify-content: center; gap: 250px; margin-top: -5%; margin-bottom: -5%; } @media only screen and (max-width: 1400px) { .case-study-static-scroll-gallery__content { gap: 200px; } } @media only screen and (max-width: 1200px) { .case-study-static-scroll-gallery__content { gap: 100px; } } @media only screen and (max-width: 767.98px) { .case-study-static-scroll-gallery__content { gap: 16px; } } .case-study-static-scroll-gallery__content--left, .case-study-static-scroll-gallery__content--center, .case-study-static-scroll-gallery__content--right { will-change: transform; } @media only screen and (max-width: 767.98px) { .case-study-static-scroll-gallery__content--left, .case-study-static-scroll-gallery__content--center, .case-study-static-scroll-gallery__content--right { will-change: auto; } } .case-study-static-scroll-gallery__content--left { margin-left: -10%; } .case-study-static-scroll-gallery__content--left img { border-radius: 36px; } @media only screen and (max-width: 767.98px) { .case-study-static-scroll-gallery__content--left img { border-radius: 16px; } } .case-study-static-scroll-gallery__content--right { margin-right: -10%; } .case-study-static-scroll-gallery__content--right img { border-radius: 36px; } @media only screen and (max-width: 767.98px) { .case-study-static-scroll-gallery__content--right img { border-radius: 16px; } } .case-study-static-scroll-gallery__content--center img { border-radius: 24px; border: 8px solid var(--Gray-Gray---10, #eaecec); box-shadow: 50px 40px 60px 0px rgba(150, 171, 191, 0.2); } @media only screen and (max-width: 767.98px) { .case-study-static-scroll-gallery__content--center img { border-radius: 12px; border-width: 3px; } } .case-study-collection-ruesch-ring { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-collection-ruesch-ring { padding-top: 48px; padding-bottom: 48px; } } .case-study-collection-ruesch-ring__content { display: flex; align-items: flex-end; flex-direction: row-reverse; justify-content: center; padding-left: 170px; padding-right: 170px; position: relative; } @media only screen and (max-width: 1400px) { .case-study-collection-ruesch-ring__content { padding-left: 120px; padding-right: 120px; } } @media only screen and (max-width: 991px) { .case-study-collection-ruesch-ring__content { padding-left: 14%; padding-right: 0; } } .case-study-collection-ruesch-ring__content--ring { width: 28%; height: auto; filter: blur(7.5px); transform: rotate(30deg); position: absolute; left: 3%; bottom: 7%; } @media only screen and (max-width: 1400px) { .case-study-collection-ruesch-ring__content--ring { width: 15%; bottom: 20%; left: 4%; } } @media only screen and (max-width: 991px) { .case-study-collection-ruesch-ring__content--ring { left: 0; } } .case-study-collection-ruesch-ring__content--images { padding-left: 85px; padding-right: 85px; gap: 40px; padding-top: 160px; padding-bottom: 160px; margin-left: auto; display: flex; align-items: center; padding-left: 21%; } @media only screen and (max-width: 1400px) { .case-study-collection-ruesch-ring__content--images { padding-left: 8%; } } @media only screen and (max-width: 991px) { .case-study-collection-ruesch-ring__content--images { padding-top: 48px; padding-bottom: 48px; gap: 16px; padding-left: 0; padding-right: 0; } } .case-study-collection-ruesch-ring__content--images img { max-width: 37%; border-radius: 40px; border: 8px solid var(--Gray-Gray---10, #eaecec); } @media only screen and (max-width: 991px) { .case-study-collection-ruesch-ring__content--images img { border-width: 2px; border-radius: 20px; max-width: 30%; } } .case-study-collection-ruesch-ring__content--images img:nth-child(2) { transform: rotate(4.867deg); } .case-study-collection-ruesch-ring__content--images img:nth-child(3) { transform: rotate(9.749deg); } .case-study-b2b-solutions { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-b2b-solutions { padding-top: 48px; padding-bottom: 48px; } } .case-study-b2b-solutions__content { margin-bottom: 160px; max-width: 792px; } @media only screen and (max-width: 767px) { .case-study-b2b-solutions__content { margin-bottom: 48px; } } .case-study-b2b-solutions__images { display: flex; align-items: center; gap: 20px; padding-bottom: 160px; position: relative; } @media only screen and (max-width: 767.98px) { .case-study-b2b-solutions__images { gap: 8px; padding-bottom: 48px; } } .case-study-b2b-solutions__images img { position: relative; border-radius: 16px; border: 8px solid var(--Gray-Gray---10, #eaecec); } @media only screen and (max-width: 767.98px) { .case-study-b2b-solutions__images img { border-radius: 4.888px; border-width: 1.629px; } } .case-study-b2b-solutions__images--shadow { width: 554px; position: absolute; z-index: 0; background: rgba(150, 171, 191, 0.2); filter: blur(49.5001869202px); top: 10%; left: 0; display: block; aspect-ratio: 1.68; } .case-study-b2b-solutions__images--pic1 { transform: rotate(-5deg); margin-left: -10%; width: 30vw; z-index: 1; } .case-study-b2b-solutions__images--pic2 { transform: rotate(5deg) translateY(50%) translateX(2%); z-index: 3; width: 32vw; } .case-study-b2b-solutions__images--pic3 { z-index: 2; margin-left: -4%; transform: translateY(30%); box-shadow: 0px 40px 80px 0px rgba(150, 171, 191, 0.2); width: 33vw; } .case-study-b2b-solutions__images--pic4 { z-index: 1; transform: translateY(-15%) translateX(-55%); width: 33vw; } .case-study-cinema-platform-typography { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-cinema-platform-typography { padding-top: 48px; padding-bottom: 48px; } } .case-study-cinema-platform-typography__content { margin-left: auto; margin-right: auto; max-width: 1062px; display: flex; gap: 16px; flex-wrap: wrap; } @media only screen and (max-width: 767.98px) { .case-study-cinema-platform-typography__content { flex-direction: column; } } .case-study-cinema-platform-typography__content--left-top { color: #2e2d2c; flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #e1eaf9; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } @media only screen and (max-width: 767.98px) { .case-study-cinema-platform-typography__content--left-top { padding: 16px 32px; flex: unset; max-width: 100%; height: 324px; order: 1; } } .case-study-cinema-platform-typography__content--left-top ul { display: flex; align-items: center; gap: 24px; } .case-study-cinema-platform-typography__content--left-top ul li { font-size: 16px; line-height: 190.5%; text-transform: capitalize; } .case-study-cinema-platform-typography__content--left-top ul li:nth-child(1) { font-weight: 300; font-variation-settings: "wght" 300; } .case-study-cinema-platform-typography__content--left-top ul li:nth-child(2) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-cinema-platform-typography__content--left-top ul li:nth-child(3) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-cinema-platform-typography__content--left-top ul li:nth-child(4) { font-weight: 700; font-variation-settings: "wght" 700; } .case-study-cinema-platform-typography__content--left-top_title { color: #16205b; font-size: 48px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 190.5%; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-cinema-platform-typography__content--left-top_title { font-size: 32px; line-height: normal; } } .case-study-cinema-platform-typography__content--left-top p { text-align: center; letter-spacing: 1.28px; line-height: 141%; text-transform: capitalize; font-weight: 300; font-variation-settings: "wght" 300; font-size: 16px; } .case-study-cinema-platform-typography__content--left-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-cinema-platform-typography__content--left-bottom { flex: unset; max-width: 100%; height: 260px; order: 2; } } .case-study-cinema-platform-typography__content--left-bottom_big { flex: 1; color: #fff; background: #0075e7; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-cinema-platform-typography__content--left-bottom_big { padding: 8px; } } .case-study-cinema-platform-typography__content--left-bottom_big span { max-width: 152px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-cinema-platform-typography__content--left-bottom_big span { max-width: 97px; letter-spacing: 0.64px; line-height: 40px; font-size: 32px; } } .case-study-cinema-platform-typography__content--left-bottom_mini { background: #e1eaf9; flex: 0 0 151px; max-width: 151px; padding: 16px 8px; color: #16205b; font-size: 12px; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-cinema-platform-typography__content--left-bottom_mini { flex: 0 0 84px; max-width: 84px; padding: 8px; } } .case-study-cinema-platform-typography__content--right-top { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #16205b; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-cinema-platform-typography__content--right-top { flex: unset; max-width: 100%; height: 324px; order: 0; } } .case-study-cinema-platform-typography__content--right-top span { color: #fff; font-size: 400px; font-weight: 500; font-variation-settings: "wght" 500; line-height: 134px; text-transform: capitalize; } @media only screen and (max-width: 991px) { .case-study-cinema-platform-typography__content--right-top span { font-size: 285px; line-height: 100px; } } @media only screen and (max-width: 767.98px) { .case-study-cinema-platform-typography__content--right-top span { font-size: 300px; line-height: 80px; } } .case-study-cinema-platform-typography__content--right-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-cinema-platform-typography__content--right-bottom { flex: unset; max-width: 100%; height: 260px; order: 3; } } .case-study-cinema-platform-typography__content--right-bottom_big { flex: 1; color: #e1eaf9; background: #f15928; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-cinema-platform-typography__content--right-bottom_big { padding: 8px; line-height: normal; } } .case-study-cinema-platform-typography__content--right-bottom_big span { max-width: 185px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-cinema-platform-typography__content--right-bottom_big span { max-width: unset; font-size: 24px; letter-spacing: 0.48px; line-height: normal; } } .case-study-cinema-platform-typography__content--right-bottom_mini { flex: 0 0 151px; max-width: 151px; } @media only screen and (max-width: 767.98px) { .case-study-cinema-platform-typography__content--right-bottom_mini { flex: 0 0 91px; max-width: 91px; } } .case-study-cinema-platform-typography__content--right-bottom_mini ul { display: flex; flex-direction: column; height: 100%; } .case-study-cinema-platform-typography__content--right-bottom_mini ul li { width: 100%; padding: 16px; color: #e1eaf9; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-cinema-platform-typography__content--right-bottom_mini ul li { padding: 8px; line-height: normal; } } .case-study-cinema-platform-typography__content--right-bottom_mini ul li:nth-child(1) { background: #f15928; } .case-study-cinema-platform-typography__content--right-bottom_mini ul li:nth-child(2) { background: #eb450f; } .case-study-cinema-platform-typography__content--right-bottom_mini ul li:nth-child(3) { background: #cd3c0d; } .case-study-cinema-platform-typography__content--right-bottom_mini ul li:nth-child(4) { background: #b0340b; } .case-study-cinema-platform-typography__content--right-bottom_mini ul li:nth-child(5) { background: #932b0a; } .case-study-cinema-platform-typography__content--right-bottom_mini ul li:nth-child(6) { background: #752208; } .case-study-cinema-platform-typography__content--right-bottom_mini ul li:nth-child(7) { background: #581a06; } .case-study-cinema-platform-typography__content--right-bottom_mini ul li:nth-child(8) { background: #3b1104; } .case-study-cinema-platform-typography__content--right-bottom_mini ul li:has(span) { flex: 1; } .case-study-booking-user-flow { position: relative; overflow: hidden; padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-booking-user-flow { padding-top: 48px; padding-bottom: 48px; } } .case-study-booking-user-flow .site-case-study__bg { object-position: left top; } .case-study-booking-user-flow__content { position: relative; z-index: 2; display: flex; align-items: flex-end; gap: 108px; } @media only screen and (max-width: 1400px) { .case-study-booking-user-flow__content { gap: 40px; } } @media only screen and (max-width: 767.98px) { .case-study-booking-user-flow__content { flex-direction: column; align-items: center; } } .case-study-booking-user-flow__content--details { max-width: 657px; } @media only screen and (max-width: 1400px) { .case-study-booking-user-flow__content--details { flex: 0 0 45%; } } @media only screen and (max-width: 767.98px) { .case-study-booking-user-flow__content--details { flex: unset; max-width: 100%; } } .case-study-booking-user-flow__content--images { padding-bottom: 134px; display: flex; gap: 32px; align-items: flex-end; } @media only screen and (max-width: 991px) { .case-study-booking-user-flow__content--images { gap: 14px; } } @media only screen and (max-width: 767.98px) { .case-study-booking-user-flow__content--images { padding-bottom: 80px; } } .case-study-booking-user-flow__content--images img { border: 7px solid var(--Gray-Gray---10, #eaecec); border-radius: 50px; flex: 1 0 0; max-width: unset; } @media only screen and (max-width: 1400px) { .case-study-booking-user-flow__content--images img { max-width: 45%; } } @media only screen and (max-width: 991px) { .case-study-booking-user-flow__content--images img { border-radius: 4.894px; border-width: 1px; } } .case-study-booking-user-flow__content--images img:last-child { transform: translateY(60px); } .case-study-cinema-platform-gallery { background: #fafafa; position: relative; overflow: hidden; height: 75vw; } .case-study-cinema-platform-gallery__content { z-index: 1; display: flex; align-items: center; gap: 55px; width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); position: absolute; padding-left: 50px; padding-right: 50px; } @media only screen and (max-width: 991px) { .case-study-cinema-platform-gallery__content { gap: 14px; padding-left: 12px; padding-right: 12px; } } .case-study-cinema-platform-gallery__content--col { flex: 0 0 calc(25% - 41.25px); max-width: calc(25% - 41.25px); display: flex; flex-direction: column; gap: 55px; will-change: transform; } @media only screen and (max-width: 991px) { .case-study-cinema-platform-gallery__content--col { gap: 14px; flex: 0 0 calc(25% - 10.5px); max-width: calc(25% - 10.5px); will-change: auto; } } .case-study-cinema-platform-gallery__content--col img { border-radius: 50px; border: 8px solid var(--Gray-Gray---10, #eaecec); } @media only screen and (max-width: 991px) { .case-study-cinema-platform-gallery__content--col img { border-radius: 4.894px; border-width: 1px; } } .case-study-cinema-platform-gallery__content--col:nth-child(2) img { position: relative; z-index: 2; } .case-study-cinema-platform-gallery__content--shadow { position: absolute; pointer-events: none; display: block; left: 45%; transform: translateX(-50%); bottom: 45%; width: 427.75px; aspect-ratio: 0.5; z-index: 1; background: rgba(150, 171, 191, 0.2); filter: blur(116.3999938965px); } .case-study-damn-plastic-typography { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-typography { padding-top: 48px; padding-bottom: 48px; } } .case-study-damn-plastic-typography__content { margin-left: auto; margin-right: auto; max-width: 1062px; display: flex; gap: 16px; flex-wrap: wrap; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-typography__content { flex-direction: column; } } .case-study-damn-plastic-typography__content--left-top { color: #2e2d2c; flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #fafafa; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-typography__content--left-top { padding: 16px 32px; flex: unset; max-width: 100%; height: 324px; order: 1; } } .case-study-damn-plastic-typography__content--left-top ul { display: flex; align-items: center; gap: 24px; } .case-study-damn-plastic-typography__content--left-top ul li { font-size: 16px; line-height: 190.5%; text-transform: capitalize; } .case-study-damn-plastic-typography__content--left-top ul li:nth-child(1) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-damn-plastic-typography__content--left-top ul li:nth-child(2) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-damn-plastic-typography__content--left-top ul li:nth-child(3) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-damn-plastic-typography__content--left-top ul li:nth-child(4) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-damn-plastic-typography__content--left-top_title { color: #7b00ef; font-size: 48px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 190.5%; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-typography__content--left-top_title { font-size: 32px; line-height: normal; } } .case-study-damn-plastic-typography__content--left-top p { text-align: center; letter-spacing: 1.28px; line-height: 141%; text-transform: capitalize; font-weight: 300; font-variation-settings: "wght" 300; font-size: 16px; } .case-study-damn-plastic-typography__content--left-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-typography__content--left-bottom { flex: unset; max-width: 100%; height: 260px; order: 2; } } .case-study-damn-plastic-typography__content--left-bottom_big { flex: 1; color: #fff; background: #7b00ef; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-typography__content--left-bottom_big { padding: 8px; } } .case-study-damn-plastic-typography__content--left-bottom_big span { max-width: 152px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-typography__content--left-bottom_big span { max-width: 97px; letter-spacing: 0.64px; line-height: 40px; font-size: 32px; } } .case-study-damn-plastic-typography__content--left-bottom_mini { background: #fafafa; flex: 0 0 151px; max-width: 151px; padding: 16px 8px; color: #7b00ef; font-size: 12px; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-typography__content--left-bottom_mini { flex: 0 0 84px; max-width: 84px; padding: 8px; } } .case-study-damn-plastic-typography__content--right-top { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #7b00ef; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-typography__content--right-top { flex: unset; max-width: 100%; height: 324px; order: 0; } } .case-study-damn-plastic-typography__content--right-top span { color: #fff; font-size: 400px; font-weight: 500; font-variation-settings: "wght" 500; line-height: 134px; text-transform: capitalize; } @media only screen and (max-width: 991px) { .case-study-damn-plastic-typography__content--right-top span { font-size: 285px; line-height: 100px; } } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-typography__content--right-top span { font-size: 300px; line-height: 80px; } } .case-study-damn-plastic-typography__content--right-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-typography__content--right-bottom { flex: unset; max-width: 100%; height: 260px; order: 3; } } .case-study-damn-plastic-typography__content--right-bottom_big { flex: 1; color: #101010; background: #feff59; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-typography__content--right-bottom_big { padding: 8px; line-height: normal; } } .case-study-damn-plastic-typography__content--right-bottom_big span { max-width: 195px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-typography__content--right-bottom_big span { max-width: unset; font-size: 24px; letter-spacing: 0.48px; line-height: normal; } } .case-study-damn-plastic-typography__content--right-bottom_mini { flex: 0 0 151px; max-width: 151px; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-typography__content--right-bottom_mini { flex: 0 0 91px; max-width: 91px; } } .case-study-damn-plastic-typography__content--right-bottom_mini ul { display: flex; flex-direction: column; height: 100%; } .case-study-damn-plastic-typography__content--right-bottom_mini ul li { width: 100%; padding: 16px; color: #e1eaf9; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-typography__content--right-bottom_mini ul li { padding: 8px; line-height: normal; } } .case-study-damn-plastic-typography__content--right-bottom_mini ul li:nth-child(1) { background: #e5e550; } .case-study-damn-plastic-typography__content--right-bottom_mini ul li:nth-child(2) { background: #cecf48; } .case-study-damn-plastic-typography__content--right-bottom_mini ul li:nth-child(3) { background: #a7a73a; } .case-study-damn-plastic-typography__content--right-bottom_mini ul li:nth-child(4) { background: #969735; } .case-study-damn-plastic-typography__content--right-bottom_mini ul li:nth-child(5) { background: #87872f; } .case-study-damn-plastic-typography__content--right-bottom_mini ul li:nth-child(6) { background: #797a2b; } .case-study-damn-plastic-typography__content--right-bottom_mini ul li:nth-child(7) { background: #6d6e26; } .case-study-damn-plastic-typography__content--right-bottom_mini ul li:nth-child(8) { background: #626322; } .case-study-damn-plastic-typography__content--right-bottom_mini ul li:has(span) { flex: 1; } .case-study-damn-plastic-gallery { overflow: hidden; position: relative; } .case-study-damn-plastic-gallery__content { padding-right: 12px; padding-left: 12px; display: flex; gap: 32px; align-items: center; margin-top: -15%; margin-bottom: -15%; position: relative; z-index: 2; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-gallery__content { gap: 14px; } } .case-study-damn-plastic-gallery__content--col { display: flex; flex-direction: column; gap: 32px; flex: 1 1 0; will-change: transform; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-gallery__content--col { gap: 14px; will-change: auto; } } .case-study-damn-plastic-gallery__content--col img { border-radius: 16px; border: 8px solid #eaecec; } @media only screen and (max-width: 767.98px) { .case-study-damn-plastic-gallery__content--col img { border-radius: 4.888px; border-width: 1.629px; } } .case-study-damn-plastic-gallery__shadow { position: absolute; pointer-events: none; display: block; left: 35%; transform: translateX(-50%); bottom: 25%; width: 721.996px; aspect-ratio: 1.7; z-index: 1; background: rgba(150, 171, 191, 0.2); filter: blur(97px); } .case-study-abian-typography { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-abian-typography { padding-top: 48px; padding-bottom: 48px; } } .case-study-abian-typography__content { margin-left: auto; margin-right: auto; max-width: 1062px; display: flex; gap: 16px; flex-wrap: wrap; } @media only screen and (max-width: 767.98px) { .case-study-abian-typography__content { flex-direction: column; } } .case-study-abian-typography__content--left-top { color: #2e2d2c; flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #fafafa; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } @media only screen and (max-width: 767.98px) { .case-study-abian-typography__content--left-top { padding: 16px 32px; flex: unset; max-width: 100%; height: 324px; order: 1; } } .case-study-abian-typography__content--left-top ul { display: flex; align-items: center; gap: 24px; } .case-study-abian-typography__content--left-top ul li { font-size: 16px; line-height: 190.5%; text-transform: capitalize; } .case-study-abian-typography__content--left-top ul li:nth-child(1) { font-weight: 300; font-variation-settings: "wght" 300; } .case-study-abian-typography__content--left-top ul li:nth-child(2) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-abian-typography__content--left-top ul li:nth-child(3) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-abian-typography__content--left-top ul li:nth-child(4) { font-weight: 700; font-variation-settings: "wght" 700; } .case-study-abian-typography__content--left-top_title { color: #0065d1; font-size: 48px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 190.5%; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-abian-typography__content--left-top_title { font-size: 32px; line-height: normal; } } .case-study-abian-typography__content--left-top p { text-align: center; letter-spacing: 1.28px; line-height: 141%; text-transform: capitalize; font-weight: 300; font-variation-settings: "wght" 300; font-size: 16px; } .case-study-abian-typography__content--left-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-abian-typography__content--left-bottom { flex: unset; max-width: 100%; height: 260px; order: 2; } } .case-study-abian-typography__content--left-bottom_big { flex: 1; color: #fff; background: #0065d1; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-abian-typography__content--left-bottom_big { padding: 8px; } } .case-study-abian-typography__content--left-bottom_big span { max-width: 152px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-abian-typography__content--left-bottom_big span { max-width: 97px; letter-spacing: 0.64px; line-height: 40px; font-size: 32px; } } .case-study-abian-typography__content--left-bottom_mini { background: #fafafa; flex: 0 0 151px; max-width: 151px; padding: 16px 8px; color: #0065d1; font-size: 12px; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-abian-typography__content--left-bottom_mini { flex: 0 0 84px; max-width: 84px; padding: 8px; } } .case-study-abian-typography__content--right-top { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #0065d1; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-abian-typography__content--right-top { flex: unset; max-width: 100%; height: 324px; order: 0; } } .case-study-abian-typography__content--right-top span { color: #fff; font-size: 400px; font-weight: 500; font-variation-settings: "wght" 500; line-height: 134px; text-transform: capitalize; } @media only screen and (max-width: 991px) { .case-study-abian-typography__content--right-top span { font-size: 285px; line-height: 100px; } } @media only screen and (max-width: 767.98px) { .case-study-abian-typography__content--right-top span { font-size: 300px; line-height: 80px; } } .case-study-abian-typography__content--right-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-abian-typography__content--right-bottom { flex: unset; max-width: 100%; height: 260px; order: 3; } } .case-study-abian-typography__content--right-bottom_big { flex: 1; background: #6cd88f; color: #0065d1; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-abian-typography__content--right-bottom_big { padding: 8px; line-height: normal; } } .case-study-abian-typography__content--right-bottom_big span { max-width: 170px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-abian-typography__content--right-bottom_big span { max-width: unset; font-size: 24px; letter-spacing: 0.48px; line-height: normal; } } .case-study-abian-typography__content--right-bottom_mini { flex: 0 0 151px; max-width: 151px; } @media only screen and (max-width: 767.98px) { .case-study-abian-typography__content--right-bottom_mini { flex: 0 0 91px; max-width: 91px; } } .case-study-abian-typography__content--right-bottom_mini ul { display: flex; flex-direction: column; height: 100%; } .case-study-abian-typography__content--right-bottom_mini ul li { width: 100%; padding: 16px; color: #fff; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-abian-typography__content--right-bottom_mini ul li { padding: 8px; line-height: normal; } } .case-study-abian-typography__content--right-bottom_mini ul li:nth-child(1) { background: #6cd88f; } .case-study-abian-typography__content--right-bottom_mini ul li:nth-child(2) { background: #61c281; } .case-study-abian-typography__content--right-bottom_mini ul li:nth-child(3) { background: #57af74; } .case-study-abian-typography__content--right-bottom_mini ul li:nth-child(4) { background: #4f9d68; } .case-study-abian-typography__content--right-bottom_mini ul li:nth-child(5) { background: #478e5e; } .case-study-abian-typography__content--right-bottom_mini ul li:nth-child(6) { background: #407f54; } .case-study-abian-typography__content--right-bottom_mini ul li:nth-child(7) { background: #39734c; } .case-study-abian-typography__content--right-bottom_mini ul li:nth-child(8) { background: #305e3e; } .case-study-abian-typography__content--right-bottom_mini ul li:has(span) { flex: 1; } .case-study-abian-gallery { background: #fafafa; position: relative; overflow: hidden; height: 75vw; } .case-study-abian-gallery__content { z-index: 1; display: flex; gap: 55px; width: 100%; left: 50%; transform: translateX(-45%) rotate(30deg); top: -15%; align-items: center; position: absolute; } @media only screen and (max-width: 991px) { .case-study-abian-gallery__content { gap: 12px; top: -50%; transform: translateX(-60%) rotate(30deg); } } .case-study-abian-gallery__content--col { flex: 0 0 calc(20% - 44px); max-width: calc(20% - 44px); display: flex; flex-direction: column; gap: 55px; } @media only screen and (max-width: 991px) { .case-study-abian-gallery__content--col { gap: 12px; flex: 0 0 calc(25% - 9px); max-width: calc(25% - 9px); } } .case-study-abian-gallery__content--col img { border-radius: 40px; border: 4px solid var(--Gray-Gray---10, #eaecec); } @media only screen and (max-width: 767.98px) { .case-study-abian-gallery__content--col img { border-radius: 12px; border-width: 2px; } } .case-study-abian-gallery__content--col:nth-child(1) { transform: translateY(25%); } .case-study-abian-gallery__content--col:nth-child(2) { transform: translateY(20%); } .case-study-abian-gallery__content--col:nth-child(3) { transform: translateY(15%); } .case-study-abian-gallery__content--col:nth-child(4) { transform: translateY(10%); } .case-study-abian-gallery__content--col:nth-child(5) { transform: translateY(5%); } .case-study-abian-gallery__shadow { position: absolute; pointer-events: none; left: 10%; bottom: -20%; width: 502.984px; height: 1027.076px; transform: rotate(-30deg); filter: blur(97px); z-index: 1; background: var(--Shadow, rgba(8, 8, 8, 0.16)); } @media only screen and (max-width: 767.98px) { .case-study-abian-gallery__shadow { width: 137.816px; height: 281.415px; bottom: -30%; left: 10%; filter: blur(26.3521232605px); } } .case-study-rahyab-typography { padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767.98px) { .case-study-rahyab-typography { padding-top: 48px; padding-bottom: 48px; } } .case-study-rahyab-typography__content { margin-left: auto; margin-right: auto; max-width: 1062px; display: flex; gap: 16px; flex-wrap: wrap; } @media only screen and (max-width: 767.98px) { .case-study-rahyab-typography__content { flex-direction: column; } } .case-study-rahyab-typography__content--left-top { color: #2e2d2c; flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #fafafa; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; } @media only screen and (max-width: 767.98px) { .case-study-rahyab-typography__content--left-top { padding: 16px 32px; flex: unset; max-width: 100%; height: 324px; order: 1; } } .case-study-rahyab-typography__content--left-top ul { display: flex; align-items: center; gap: 24px; } .case-study-rahyab-typography__content--left-top ul li { font-size: 16px; line-height: 190.5%; text-transform: capitalize; } .case-study-rahyab-typography__content--left-top ul li:nth-child(1) { font-weight: 300; font-variation-settings: "wght" 300; } .case-study-rahyab-typography__content--left-top ul li:nth-child(2) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-rahyab-typography__content--left-top ul li:nth-child(3) { font-weight: 400; font-variation-settings: "wght" 400; } .case-study-rahyab-typography__content--left-top ul li:nth-child(4) { font-weight: 700; font-variation-settings: "wght" 700; } .case-study-rahyab-typography__content--left-top_title { color: #003974; font-size: 48px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 190.5%; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-rahyab-typography__content--left-top_title { font-size: 32px; line-height: normal; } } .case-study-rahyab-typography__content--left-top p { text-align: center; letter-spacing: 1.28px; line-height: 141%; text-transform: capitalize; font-weight: 300; font-variation-settings: "wght" 300; font-size: 16px; } .case-study-rahyab-typography__content--left-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-rahyab-typography__content--left-bottom { flex: unset; max-width: 100%; height: 260px; order: 2; } } .case-study-rahyab-typography__content--left-bottom_big { flex: 1; color: #fff; background: #003974; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-rahyab-typography__content--left-bottom_big { padding: 8px; } } .case-study-rahyab-typography__content--left-bottom_big span { max-width: 152px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-rahyab-typography__content--left-bottom_big span { max-width: 97px; letter-spacing: 0.64px; line-height: 40px; font-size: 32px; } } .case-study-rahyab-typography__content--left-bottom_mini { background: #fafafa; flex: 0 0 151px; max-width: 151px; padding: 16px 8px; color: #003974; font-size: 12px; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-rahyab-typography__content--left-bottom_mini { flex: 0 0 84px; max-width: 84px; padding: 8px; } } .case-study-rahyab-typography__content--right-top { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 571px; background: #003974; display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } @media only screen and (max-width: 767.98px) { .case-study-rahyab-typography__content--right-top { flex: unset; max-width: 100%; height: 324px; order: 0; } } .case-study-rahyab-typography__content--right-top span { color: #fff; font-size: 400px; font-weight: 500; font-variation-settings: "wght" 500; line-height: 134px; text-transform: capitalize; } @media only screen and (max-width: 991px) { .case-study-rahyab-typography__content--right-top span { font-size: 285px; line-height: 100px; } } @media only screen and (max-width: 767.98px) { .case-study-rahyab-typography__content--right-top span { font-size: 300px; line-height: 80px; } } .case-study-rahyab-typography__content--right-bottom { flex: 0 0 calc(50% - 8px); max-width: calc(50% - 8px); height: 433px; display: flex; } @media only screen and (max-width: 767.98px) { .case-study-rahyab-typography__content--right-bottom { flex: unset; max-width: 100%; height: 260px; order: 3; } } .case-study-rahyab-typography__content--right-bottom_big { flex: 1; background: #ffcb05; color: #003974; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-rahyab-typography__content--right-bottom_big { padding: 8px; line-height: normal; } } .case-study-rahyab-typography__content--right-bottom_big span { max-width: 160px; word-break: break-all; font-weight: 600; font-variation-settings: "wght" 600; letter-spacing: 0.96px; line-height: 56px; font-size: 48px; text-transform: capitalize; } @media only screen and (max-width: 767.98px) { .case-study-rahyab-typography__content--right-bottom_big span { max-width: unset; font-size: 24px; letter-spacing: 0.48px; line-height: normal; } } .case-study-rahyab-typography__content--right-bottom_mini { flex: 0 0 151px; max-width: 151px; } @media only screen and (max-width: 767.98px) { .case-study-rahyab-typography__content--right-bottom_mini { flex: 0 0 91px; max-width: 91px; } } .case-study-rahyab-typography__content--right-bottom_mini ul { display: flex; flex-direction: column; height: 100%; } .case-study-rahyab-typography__content--right-bottom_mini ul li { width: 100%; padding: 16px; color: #fff; font-size: 12px; font-weight: 400; font-variation-settings: "wght" 400; line-height: 17.578px; } @media only screen and (max-width: 767.98px) { .case-study-rahyab-typography__content--right-bottom_mini ul li { padding: 8px; line-height: normal; } } .case-study-rahyab-typography__content--right-bottom_mini ul li:nth-child(1) { background: #e5b704; } .case-study-rahyab-typography__content--right-bottom_mini ul li:nth-child(2) { background: #cfa404; } .case-study-rahyab-typography__content--right-bottom_mini ul li:nth-child(3) { background: #ba9404; } .case-study-rahyab-typography__content--right-bottom_mini ul li:nth-child(4) { background: #a78503; } .case-study-rahyab-typography__content--right-bottom_mini ul li:nth-child(5) { background: #977803; } .case-study-rahyab-typography__content--right-bottom_mini ul li:nth-child(6) { background: #876c03; } .case-study-rahyab-typography__content--right-bottom_mini ul li:nth-child(7) { background: #7a6102; } .case-study-rahyab-typography__content--right-bottom_mini ul li:nth-child(8) { background: #634f02; } .case-study-rahyab-typography__content--right-bottom_mini ul li:has(span) { flex: 1; } .case-study-yabex-gallery { overflow: hidden; position: relative; background: #fafafa; height: 1200px; z-index: 5; } @media only screen and (max-width: 767.98px) { .case-study-yabex-gallery { height: auto; } } .case-study-yabex-gallery__content { transform: rotate(-30deg) translateY(-10%); display: flex; gap: 50px; flex-direction: column; } @media only screen and (max-width: 767.98px) { .case-study-yabex-gallery__content { gap: 12px; } } .case-study-yabex-gallery__content--images { display: flex; gap: 50px; flex-direction: column; } .case-study-yabex-gallery__content--images:nth-child(1) { margin-right: 20%; } .case-study-yabex-gallery__content--images:nth-child(2) { margin-left: 20%; } @media only screen and (max-width: 767.98px) { .case-study-yabex-gallery__content--images { gap: 12px; } } .case-study-yabex-gallery__content--image { border-radius: 16px; border: 8px solid var(--Gray-Gray---10, #eaecec); position: relative; z-index: 0; } @media only screen and (max-width: 767.98px) { .case-study-yabex-gallery__content--image { border-radius: 3.25px; border-width: 1.625px; } } .case-study-yabex-gallery__content--image-item6 { z-index: 2; } .case-study-yabex-gallery__content--shadow { width: 1053.693px; height: 628.279px; position: absolute; left: 40%; top: 40%; z-index: 1; background: var(--Shadow, rgba(8, 8, 8, 0.16)); filter: blur(97px); pointer-events: none; } @media only screen and (max-width: 767.98px) { .case-study-yabex-gallery__content--shadow { width: 343.282px; height: 204.787px; background: rgba(150, 171, 191, 0.2); filter: blur(97px); top: 5%; } } .case-study-yabex-gallery2 { position: relative; overflow: hidden; height: 75vw; background: transparent; } .case-study-yabex-gallery2__content { display: flex; align-items: center; gap: 40px; width: 100%; left: 50%; top: 50%; padding: 0 60px; transform: translate(-50%, -50%); position: absolute; z-index: 1; } @media only screen and (max-width: 991px) { .case-study-yabex-gallery2__content { gap: 12px; padding: 0 16px; } } .case-study-yabex-gallery2__content--col { flex: 0 0 40%; max-width: 40%; display: flex; flex-direction: column; gap: 30px; will-change: transform; } .case-study-yabex-gallery2__content--col img { border-radius: 16px; border: 8px solid var(--Gray-Gray---10, #eaecec); } @media only screen and (max-width: 991px) { .case-study-yabex-gallery2__content--col img { border-radius: 3.258px; border-width: 1.629px; } } @media only screen and (max-width: 991px) { .case-study-yabex-gallery2__content--col { gap: 12px; flex: 0 0 calc(50% - 6px); max-width: calc(50% - 6px); will-change: auto; } } .case-study-yabex-gallery2__shadow { position: absolute; pointer-events: none; left: 60%; transform: translateX(-50%); top: 50%; width: 745.025px; height: 442.66px; } @media only screen and (max-width: 767.98px) { .case-study-yabex-gallery2__shadow { width: 151.721px; height: 90.146px; } } @media only screen and (max-width: 991px) { .case-study-mobile-first.bgWhite { background: #fff; position: relative; z-index: 5; } } /*# sourceMappingURL=style.css.map */