#hero-section-wrapper { display: flex; align-items: center; padding: 120px 0; min-height: 920px; } #hero-section-wrapper .hero-content-wrapper { position: relative; max-width: 750px; padding: 40px 45px 0 45px; } #hero-section-wrapper .hero-content { position: relative; z-index: 1; } #hero-section-wrapper .eyebrow-text { font-size: 21px; font-weight: 500; color: var(--pg-orange); margin-bottom: 30px; text-transform: uppercase; } #hero-section-wrapper h1 { font-size: 101px; font-weight: 500; line-height: 90%; color: var(--pg-color-surface); margin: 0 0 30px 0; text-transform: none; } @media (max-width: 992px) { #hero-section-wrapper h1 { font-size: 67px; } } @media (max-width: 767px) { #hero-section-wrapper h1 { font-size: 48px; } } @media (max-width: 420px) { #hero-section-wrapper h1 { font-size: 36px; } } #hero-section-wrapper h1 p { margin: 0; } #hero-section-wrapper strong { font-weight: 900; color: var(--pg-orange); } #hero-section-wrapper a.primary-button { display: inline-block; } #image-left-text-right-wrapper { padding: 100px 0; } #image-left-text-right-wrapper h2 { font-size: 67px; font-weight: 500; color: var(--pg-color-surface); margin: 0 0 30px 0; text-transform: none; } @media (max-width: 992px) { #image-left-text-right-wrapper h2 { font-size: 48px; } } @media (max-width: 767px) { #image-left-text-right-wrapper h2 { font-size: 36px; } } @media (max-width: 420px) { #image-left-text-right-wrapper h2 { font-size: 32px; } } #image-left-text-right-wrapper h2 strong { font-weight: 500; color: var(--pg-orange); text-transform: none; } #image-left-text-right-wrapper .text-box p { color: var(--pg-color-surface); font-size: 24px; font-weight: 400; } #image-left-text-right-wrapper .text-box p strong { color: var(--pg-orange); } #image-left-text-right-wrapper .image-box { width: 100%; } #image-left-text-right-wrapper .image-box img { display: block; max-width: 594px; width: 100%; height: auto; margin: 0 auto; } #integration-section { position: relative; width: 100%; overflow: hidden; } #integration-section img.integrations-background-image { display: block; width: 100%; height: auto; } #integration-section .position-block { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #integration-section .content-box { padding: 36px; border-radius: 25px; backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px); margin: 0 0 30px 0; } #integration-section .content-box p.box-title { font-size: 20px; } #integration-section .content-box p.box-title { font-weight: 700; color: var(--pg-color-accent); } #integration-section .content-box ul li { font-size: 16px; } #integration-section img.app-image { position: absolute; left: 50%; bottom: 0; transform: translate(-50%); transition: .2s linear all; transition-delay: 0.8s; } #integration-section img.app-image.show { bottom: 20%; } #integration-section img.hand-image { position: absolute; left: 50%; bottom: -20%; transform: translate(-50%); transition: .3s linear all; transition-delay: 1.1s; } #integration-section img.hand-image.show { bottom: 0; } #addons-section { padding: 100px 0; background-color: var(--pg-color-ink); } #addons-section h2.title { color: var(--pg-color-surface); font-weight: 500; text-transform: none; line-height: 90%; font-size: 67px; } @media (max-width: 992px) { #addons-section h2.title { font-size: 48px; } } @media (max-width: 767px) { #addons-section h2.title { font-size: 36px; } } @media (max-width: 420px) { #addons-section h2.title { font-size: 32px; } } #addons-section h2.title strong { font-weight: 500; color: var(--pg-color-accent); text-transform: none; } #addons-section p.subtitle { color: var(--pg-color-surface); line-height: 100%; } #addons-section p.subtitle strong { color: var(--pg-color-accent); } #addons-section .addon-box { border-radius: 8px; overflow: hidden; } #addons-section .addon-box img { width: 100%; } #addons-section .addon-box .addon-content { padding: 40px 24px 24px 24px; background-color: var(--pg-color-ink); } #addons-section .addon-box .tag { font-size: 16px; font-weight: 400; margin: 0 0 12px 0; text-transform: uppercase; color: var(--pg-color-muted); } #addons-section .addon-box h3 { font-size: 24px; font-weight: 500; text-transform: none; margin: 0 0 12px 0; color: var(--pg-color-surface); } #addons-section .addon-box .content { font-size: 16px; font-weight: 300; min-height: 72px; color: var(--pg-color-muted); margin: 0 0 18px 0; } #addons-section .addon-box a.primary-button-transparent { display: inline-block; } img.hidden { opacity: 0; filter: blur(5px); transform: translateX(-100%); transition: transform 1s; } img.show { opacity: 1; filter: blur(0); transform: translateX(0); transition: transform 1s; } @media (prefers-reduced-motion: no-preference) { } @media only screen and (max-width: 1440px) { } @media only screen and (max-width: 1280px) { } @media only screen and (max-width: 992px) { #integration-section { background-color: var(--pg-color-ink); } #integration-section .position-block { position: relative; top: auto; left: auto; transform: none; } #integration-section img.integrations-background-image, #integration-section img.app-image, #integration-section img.hand-image { display: none; } } @media only screen and (max-width: 768px) { } @media only screen and (max-width: 440px) { }