/* Styles for index.html */
.homepage {
width: 100%;
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: center;
font-size: var(--fs-14);
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
.grey-bg {
background-color: var(--color-whitesmoke);
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.header {
max-width: 1440px;
width: 100%;
align-self: center;
height: var(--height-80);
background-color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
padding: var(--padding-20) var(--padding-30);
box-sizing: border-box;
}
.container {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
align-content: center;
gap: var(--gap-0);
max-width: 100%;
}
.logohamburger {
display: flex;
align-items: center;
}
.logo-icon {
width: 127.6px;
position: relative;
max-height: 100%;
object-fit: cover;
flex-shrink: 0;
}
.hamburger {
height: var(--height-32);
width: var(--width-32);
position: relative;
overflow: visible;
flex-shrink: 0;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
cursor: pointer;
}
.hamburger-line {
display: block;
width: 24px;
height: 2px;
background-color: var(--color-gray-300);
border-radius: 2px;
transition: transform 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
transform-origin: center;
}
.hamburger.menu-open .hamburger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger.menu-open .hamburger-line:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.hamburger.menu-open .hamburger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.nav-links {
margin: 0;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
align-content: center;
gap: var(--gap-24);
text-align: left;
font-size: var(--fs-16);
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
/* Animated underline for links */
.animated-underline {
position: relative;
text-decoration: none;
display: inline-block;
}
.animated-underline::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-cadetblue);
transition: width 0.3s ease;
}
.animated-underline:hover::after {
width: 100%;
}
.safety {
position: relative;
line-height: var(--lh-24);
font-weight: 500;
}
.safety[data-section],
.nav-links .safety,
.mobile-menu-container .safety {
cursor: pointer;
}
.safety[data-section]::after,
.nav-links .safety::after,
.mobile-menu-container .safety::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-cadetblue);
transition: width 0.3s ease;
}
.safety[data-section]:hover::after,
.nav-links .safety:hover::after,
.mobile-menu-container .safety:hover::after {
width: 100%;
}
.cta {
width: 127.6px;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
}
.call-to-action {
cursor: pointer;
border: none;
padding: var(--padding-8) var(--padding-20);
background-color: var(--color-gray-300);
border-radius: var(--br-4);
display: flex;
align-items: center;
justify-content: center;
}
.sign-in {
position: relative;
font-size: var(--fs-16);
line-height: var(--lh-24);
font-weight: 500;
font-family: var(--font-manrope);
color: var(--color-white);
text-align: left;
}
.hero-container {
max-width: 1440px;
align-self: center;
background-color: var(--color-white);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 74px var(--padding-30) 44px;
}
.container2 {
flex: 1;
display: flex;
align-items: center;
flex-wrap: wrap;
align-content: center;
gap: var(--gap-20);
max-width: 100%;
}
.left-content {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-32);
min-width: 590px;
text-align: left;
font-size: 88px;
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
.h1 {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.your-voice-millions-of-commen-wrapper {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
}
.your-voice-millions-container {
align-self: stretch;
position: relative;
letter-spacing: -0.02em;
line-height: var(--lh-80);
font-weight: 600;
}
.your {
margin-block-start: 0;
margin-block-end: 2px;
}
.voice {
margin-block-start: 0;
margin-block-end: 14px;
}
.millions-of-comments {
margin: 0;
}
.body {
align-self: stretch;
position: relative;
font-size: var(--fs-16);
line-height: var(--lh-28);
color: var(--color-gray-200);
}
.ai-agents-for {
font-weight: 500;
font-family: var(--font-manrope);
color: var(--color-gray-200);
}
.safety-engagement {
font-weight: 600;
font-family: var(--font-manrope);
color: var(--color-gray-300);
}
.on-social-media {
font-weight: 500;
}
.call-to-action2 {
margin-bottom: 20px;
cursor: pointer;
border: none;
padding: var(--padding-8) var(--padding-20);
background-color: var(--color-cadetblue);
border-radius: var(--br-4);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.call-to-action2:hover {
transform: translateY(-2px);
background-color: var(--color-cadetblue);
filter: brightness(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Generic slide-in animation class for images */
.slide-in-image {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.slide-in-image.slide-in {
opacity: 1;
transform: translateY(0);
}
/* Logo images - no slide-in animation, but allow hover */
.slide-in-image.logo-image {
opacity: 1;
transform: none;
transition: transform 0.3s ease;
}
/* Generic subtle hover effect */
.hover-effect {
transition: transform 0.3s ease, opacity 0.3s ease, filter 0.3s ease;
cursor: pointer;
}
.hover-effect:hover {
transform: translateY(-5px);
opacity: 0.9;
filter: brightness(1.1);
}
/* Logos - subtle raise on hover */
.slide-in-image.logo-image.hover-effect:hover {
transform: translateY(-5px);
opacity: 1;
filter: none;
}
.header-image-icon {
height: 524px;
flex: 1;
position: relative;
border-radius: var(--br-4);
width: 100%;
object-fit: cover;
max-width: 100%;
}
.logo-strip {
align-self: stretch;
background-color: var(--color-white);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--padding-80) var(--padding-100) var(--padding-120);
}
.container3 {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--gap-32);
}
.p {
align-self: stretch;
position: relative;
line-height: var(--lh-20);
font-weight: 600;
}
.logos {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
align-content: center;
gap: 64px var(--gap-0);
max-width: 880px;
}
.company-logo-icon {
height: var(--height-32);
width: auto;
flex: 1;
max-width: 100%;
object-fit: contain;
min-width: 176px;
}
.byd-1-icon {
height: 39.7px;
width: auto;
flex: 1;
max-width: 100%;
object-fit: contain;
min-width: var(--min-w-100);
}
.unilever-4-icon {
height: 51.9px;
width: auto;
flex: 1;
max-width: 100%;
object-fit: contain;
min-width: var(--min-w-100);
}
.x31-x5f-00-x5f-homepage-icon {
height: var(--height-36);
width: auto;
flex: 1;
max-width: 100%;
object-fit: contain;
min-width: var(--min-w-120);
}
.company-logo-icon2 {
height: var(--height-32);
width: auto;
flex: 1;
max-width: 100%;
object-fit: contain;
min-width: var(--min-w-120);
}
.number-container {
width: 100%;
align-self: center;
display: flex;
justify-content: center;
}
.our-numbers {
padding: 100px 30px;
max-width: 1440px;
width: 100%;
align-self: center;
background-color: var(--color-white);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 50px;
}
.container4 {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-24);
text-align: left;
font-size: var(--fs-16);
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
.body-parent {
align-self: stretch;
display: flex;
align-items: center;
flex-wrap: wrap;
align-content: center;
gap: var(--gap-12);
font-size: var(--fs-44);
}
.body3 {
position: relative;
line-height: var(--lh-56);
}
.body4 {
position: relative;
font-size: var(--fs-16);
line-height: var(--lh-24);
font-weight: 500;
color: var(--color-gray-200);
}
.divider {
align-self: stretch;
height: var(--height-1);
position: relative;
background-color: var(--color-gray-600);
}
.brand-safety {
max-width: 1040px;
align-self: center;
background-color: var(--color-white);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding: var(--padding-50) var(--padding-30) var(--padding-100);
text-align: right;
font-size: var(--fs-32);
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
.container5 {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--gap-44);
max-width: 100%;
}
.tagline {
width: 100%;
position: relative;
letter-spacing: -0.02em;
line-height: var(--lh-44);
font-weight: 500;
display: inline-block;
max-width: 305px;
}
.content {
align-self: stretch;
display: flex;
align-items: flex-start;
text-align: left;
font-size: var(--fs-36);
}
.content2 {
flex: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
align-content: flex-start;
gap: 200px;
max-width: var(--max-w-1040);
}
.copy-left {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-32);
min-width: var(--min-w-350);
max-width: var(--max-w-350);
}
.headingsupport {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: var(--gap-12);
}
.heading {
position: relative;
line-height: var(--lh-48);
font-weight: 500;
}
.support {
position: relative;
font-size: var(--fs-16);
line-height: var(--lh-24);
font-weight: 600;
color: var(--color-cadetblue);
}
.body-text {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-20);
font-size: var(--fs-16);
color: var(--color-gray-200);
}
.image-icon {
border-radius: 10px;
flex: 1;
position: relative;
max-width: 100%;
overflow: hidden;
max-height: 562.71px;
height: "auto";
object-fit: cover;
min-width: var(--min-w-310);
}
.engagement2 {
max-width: 1040px;
align-self: center;
background-color: var(--color-whitesmoke);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding: var(--padding-100) var(--padding-30);
text-align: left;
font-size: var(--fs-32);
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
.container6 {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-44);
max-width: 100%;
}
.tagline2 {
position: relative;
letter-spacing: -0.02em;
line-height: var(--lh-44);
font-weight: 500;
display: inline-block;
max-width: 346px;
}
.content3 {
align-self: stretch;
display: flex;
align-items: flex-start;
}
.content4 {
flex: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
align-content: flex-start;
gap: 160px;
}
.image-icon2 {
flex: 1;
position: relative;
max-width: var(--max-w-550);
overflow: hidden;
max-height: 516px;
object-fit: cover;
min-width: var(--min-w-310);
min-height: 290.84px;
}
.copy {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-32);
min-width: var(--min-w-350);
max-width: var(--max-w-550);
text-align: left;
font-size: var(--fs-36);
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
.heading2 {
align-self: stretch;
position: relative;
line-height: var(--lh-48);
font-weight: 500;
}
.support2 {
align-self: stretch;
position: relative;
font-size: var(--fs-16);
line-height: var(--lh-24);
font-weight: 600;
color: var(--color-cadetblue);
}
.p4 {
position: relative;
line-height: var(--lh-28);
font-weight: 500;
}
.workflows2 {
max-width: 1040px;
align-self: center;
background-color: var(--color-white);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--padding-50) var(--padding-30) var(--padding-100);
text-align: right;
font-size: var(--fs-32);
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
.tagline3 {
width: 100%;
position: relative;
letter-spacing: -0.02em;
line-height: var(--lh-44);
font-weight: 500;
display: inline-block;
max-width: 279px;
}
.copy2 {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-32);
min-width: 365px;
max-width: 365px;
text-align: left;
font-size: var(--fs-36);
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
.image-icon3 {
border-radius: 10px;
flex: 1;
position: relative;
max-width: 100%;
width: 100%;
overflow: hidden;
max-height: 530.5px;
object-fit: cover;
min-height: 299.01px;
}
.insights2 {
max-width: 1040px;
align-self: center;
background-color: var(--color-whitesmoke);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--padding-100) var(--padding-30);
text-align: left;
font-size: var(--fs-32);
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
.tagline4 {
width: 100%;
position: relative;
letter-spacing: -0.02em;
line-height: var(--lh-44);
font-weight: 500;
display: inline-block;
max-width: 266px;
}
.image-icon4 {
flex: 1;
position: relative;
max-width: var(--max-w-550);
overflow: hidden;
max-height: 550px;
object-fit: cover;
min-width: var(--min-w-310);
min-height: 310px;
}
.copy3 {
width: 390px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-32);
min-width: var(--min-w-390);
max-width: 390px;
text-align: left;
font-size: var(--fs-36);
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
.faq2-container {
width: 100%;
max-width: 1440px;
align-self: center;
display: flex;
justify-content: center;
align-items: center;
padding: 100px 0px;
}
.faq2 {
width: 100%;
padding: 0 30px;
align-self: center;
background-color: var(--color-white);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: left;
font-size: var(--fs-40);
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
.container9 {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-32);
}
.heading5 {
align-self: stretch;
position: relative;
letter-spacing: -0.02em;
line-height: var(--lh-52);
font-weight: 500;
}
.questions {
align-self: stretch;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
align-content: flex-start;
gap: var(--gap-12);
}
.left {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-12);
min-width: var(--min-w-310);
text-align: left;
font-size: var(--fs-16);
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
.faq3 {
align-self: stretch;
border-radius: var(--br-4);
background-color: var(--color-white);
border: var(--border-1);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--padding-16) var(--padding-20);
cursor: pointer;
}
.what-platforms-do-you-support-parent {
align-self: stretch;
display: flex;
align-items: flex-start;
gap: var(--gap-12);
}
.what-platforms-do {
flex: 1;
position: relative;
line-height: var(--lh-24);
font-weight: 500;
}
.frame-icon {
height: var(--height-24);
width: var(--width-24);
position: relative;
transition: transform 0.3s ease;
}
.faq-answer {
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
padding: 0;
margin-top: 0;
line-height: var(--lh-24);
color: var(--color-gray-200);
font-size: var(--fs-16);
width: 100%;
}
.faq-answer a {
color: var(--color-cadetblue);
text-decoration: none;
transition: color 0.2s ease;
}
.faq-answer a:hover {
color: var(--color-cadetblue);
filter: brightness(1.2);
}
.faq3.active .faq-answer {
max-height: 500px;
opacity: 1;
padding: 16px 0 0 0;
margin-top: 8px;
}
.faq3.active .frame-icon {
transform: rotate(180deg);
}
.content9 {
align-self: stretch;
display: flex;
flex-wrap: wrap;
align-content: center;
gap: var(--gap-12);
}
.t1 {
flex: 1;
border-radius: var(--br-8);
background-color: var(--color-gray-100);
border: var(--border-1);
box-sizing: border-box;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--padding-23) var(--padding-19) var(--padding-19);
min-width: var(--min-w-310);
text-align: left;
font-size: var(--fs-14);
color: var(--color-gray-200);
font-family: var(--font-manrope);
}
.container11 {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-12);
max-width: 100%;
}
.content10 {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-16);
}
.image-icon5 {
width: var(--width-50);
position: relative;
border-radius: var(--br-100);
max-height: 100%;
object-fit: cover;
}
.p10 {
width: 100%;
position: relative;
line-height: var(--lh-24);
font-weight: 500;
display: inline-block;
max-width: var(--max-w-365_3);
}
.stanify {
color: var(--color-gray-300);
}
.name {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
padding: var(--padding-120) var(--padding-0) var(--padding-0);
gap: var(--gap-4);
color: var(--color-gray-300);
}
.name2 {
align-self: stretch;
position: relative;
line-height: var(--lh-20);
font-weight: 500;
}
.title {
align-self: stretch;
position: relative;
font-size: var(--fs-12);
line-height: var(--lh-20);
font-weight: 500;
color: var(--color-gray-200);
}
.case-studies {
width: 100%;
max-width: 1440px;
align-self: center;
background-color: var(--color-whitesmoke);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
padding: var(--padding-100) var(--padding-30) var(--padding-50);
text-align: left;
font-size: var(--fs-40);
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
.headingsupport5 {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-12);
}
.body5 {
position: relative;
line-height: var(--lh-52);
font-weight: 500;
}
.body6 {
position: relative;
font-size: var(--fs-14);
line-height: var(--lh-20);
font-weight: 600;
color: var(--color-cadetblue);
}
.case-studies2 {
align-self: stretch;
display: flex;
align-items: center;
flex-wrap: wrap;
align-content: center;
gap: var(--gap-12);
text-align: left;
font-size: var(--fs-16);
color: var(--color-gray-200);
font-family: var(--font-manrope);
}
.cpg {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-24);
min-width: var(--min-w-310);
}
.image-container {
align-self: stretch;
height: var(--height-250);
position: relative;
max-width: 100%;
overflow: hidden;
flex-shrink: 0;
}
.image-icon8 {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
cursor: pointer;
transform-origin: center;
}
.image-container:hover .image-icon8 {
transform: scale(1.08);
}
.tag {
align-self: stretch;
position: relative;
line-height: var(--lh-28);
font-weight: 500;
}
.copy4 {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--gap-8);
font-size: var(--fs-32);
color: var(--color-gray-300);
}
.heading7 {
align-self: stretch;
position: relative;
line-height: var(--lh-44);
}
.p13 {
align-self: stretch;
position: relative;
font-size: var(--fs-16);
line-height: var(--lh-24);
font-weight: 500;
color: var(--color-gray-200);
}
.above-footer-container {
width: 100%;
max-width: 1440px;
align-self: center;
display: flex;
justify-content: center;
align-items: center;
padding: 100px 0px;
}
.above-footer {
width: 100%;
padding: 0 30px;
align-self: center;
background-color: var(--color-white);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.content16 {
width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-40);
}
.content17 {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-24);
text-align: left;
font-size: var(--fs-64);
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
.heading10 {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-10);
}
.honor-the-voice-container {
margin: 0;
align-self: stretch;
position: relative;
font-size: inherit;
letter-spacing: -0.02em;
line-height: var(--lh-72);
font-weight: 600;
font-family: inherit;
}
.voice2 {
color: var(--color-cadetblue);
}
.shape-the-meaning {
align-self: stretch;
position: relative;
letter-spacing: -0.02em;
line-height: var(--lh-72);
font-weight: 600;
}
.p16 {
width: 100%;
position: relative;
font-size: var(--fs-16);
line-height: var(--lh-28);
font-weight: 500;
color: var(--color-gray-200);
display: inline-block;
max-width: 538px;
}
.footer {
width: 100%;
max-width: 1440px;
align-self: center;
background-color: var(--color-whitesmoke);
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 100px 20px 50px 20px;
box-sizing: border-box;
text-align: left;
font-size: var(--fs-16);
color: var(--color-gray-200);
font-family: var(--font-manrope);
}
.top {
align-self: stretch;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
align-content: flex-start;
gap: var(--gap-72);
}
.left2 {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-24);
min-width: 336px;
max-width: 336px;
}
.logo-icon2 {
width: 127.6px;
position: relative;
max-height: 100%;
object-fit: cover;
}
.socials {
display: flex;
align-items: center;
justify-content: center;
gap: var(--gap-16);
}
.social-link {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: inherit;
transition: transform 0.3s ease;
position: relative;
}
.social-link:hover {
text-decoration: none;
}
.instagram-icon {
width: var(--width-22);
position: relative;
max-height: 100%;
}
.x {
height: var(--height-20);
width: var(--width-20);
position: relative;
}
.vector-icon2 {
position: absolute;
height: 100%;
width: 100%;
top: 0%;
right: 0%;
bottom: 0%;
left: 0%;
max-width: 100%;
overflow: hidden;
max-height: 100%;
}
.youtube-icon {
width: var(--width-24);
position: relative;
max-height: 100%;
}
.right2 {
flex: 1;
display: flex;
align-items: flex-start;
justify-content: space-between;
flex-wrap: wrap;
align-content: flex-start;
gap: var(--gap-24) var(--gap-0);
min-width: var(--min-w-390);
color: var(--color-gray-300);
}
.product {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-16);
min-width: var(--min-w-200);
}
.footer-links {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-16);
color: var(--color-gray-200);
}
.footer-links .features {
cursor: pointer;
position: relative;
width: fit-content;
}
.footer-links .features::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: var(--color-cadetblue);
transition: width 0.3s ease;
}
.footer-links .features:hover::after {
width: 100%;
}
.features {
align-self: stretch;
position: relative;
line-height: var(--lh-24);
font-weight: 500;
}
@media screen and (max-width: 1024px) {
.homepage {
display: flex;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-0);
align-items: flex-start;
justify-content: flex-start;
}
.header {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-80);
flex-direction: row;
gap: var(--gap-10);
align-items: center;
justify-content: center;
padding: var(--padding-20) var(--padding-30);
box-sizing: border-box;
}
.container {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: space-between;
gap: var(--gap-0);
max-width: var(--max-w-1240);
}
.logohamburger {
display: flex;
flex: 1;
height: var(--height-auto);
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--gap-0);
}
.logo-icon {
display: block;
width: var(--width-127_57);
height: 38px;
}
.hamburger {
display: flex;
width: var(--width-32);
height: var(--height-32);
gap: 5px;
}
.hamburger-line {
width: 24px;
height: 2px;
}
.nav-links {
display: none;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-24);
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: center;
}
.safety {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
cursor: pointer;
}
.cta {
display: none;
width: var(--width-127_57);
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: flex-end;
justify-content: center;
}
.call-to-action {
display: flex;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-10);
align-items: center;
justify-content: center;
border-radius: var(--br-4);
padding: var(--padding-8) var(--padding-20);
box-sizing: border-box;
}
.sign-in {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.hero-container {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-10);
align-items: center;
justify-content: center;
padding: 74px var(--padding-30) 44px;
box-sizing: border-box;
}
.container2 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-20);
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: flex-start;
max-width: var(--max-w-1240);
}
.left-content {
display: flex;
flex: 1;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-32);
align-items: flex-start;
justify-content: flex-start;
min-width: 590px;
}
.h1 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-16);
align-items: flex-start;
justify-content: flex-start;
}
.your-voice-millions-of-commen-wrapper {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-0);
align-items: flex-start;
justify-content: flex-start;
}
.your-voice-millions-container {
font-weight: 600;
font-family: var(--font-manrope);
font-size: 88px;
letter-spacing: -0.02em;
line-height: var(--lh-80);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.body {
font-size: var(--fs-16);
line-height: var(--lh-28);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.call-to-action2 {
display: flex;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-10);
align-items: center;
justify-content: center;
border-radius: var(--br-4);
padding: var(--padding-8) var(--padding-20);
box-sizing: border-box;
}
.header-image-icon {
display: block;
flex: 1;
height: 524px;
border-radius: var(--br-4);
min-width: 100%;
}
.logo-strip {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: flex-start;
justify-content: flex-start;
padding: var(--padding-32) var(--padding-100) var(--padding-50);
box-sizing: border-box;
}
.container3 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-32);
align-items: center;
justify-content: center;
}
.p {
font-weight: 600;
font-family: var(--font-manrope);
font-size: var(--fs-14);
line-height: var(--lh-20);
text-align: center;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.logos {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: space-between;
gap: var(--gap-0);
max-width: 880px;
}
.company-logo-icon {
height: 31.99px;
width: auto;
flex: 1;
max-width: 100%;
object-fit: contain;
min-width: 176px;
}
.byd-1-icon {
height: 39.68px;
width: auto;
flex: 1;
max-width: 100%;
object-fit: contain;
min-width: var(--min-w-100);
}
.unilever-4-icon {
height: 51.95px;
width: auto;
flex: 1;
max-width: 100%;
object-fit: contain;
min-width: var(--min-w-100);
}
.x31-x5f-00-x5f-homepage-icon {
height: var(--height-36);
width: auto;
flex: 1;
max-width: 100%;
object-fit: contain;
min-width: var(--min-w-120);
}
.company-logo-icon2 {
height: var(--height-32);
width: auto;
flex: 1;
max-width: 100%;
object-fit: contain;
min-width: var(--min-w-120);
}
.our-numbers {
padding: 100px 30px;
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: 50px;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
.container4 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-24);
align-items: flex-start;
justify-content: flex-start;
max-width: var(--max-w-1240);
}
.body-parent {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-12);
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: flex-start;
}
.body3 {
font-size: var(--fs-44);
line-height: var(--lh-56);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.body4 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.divider {
display: block;
align-self: stretch;
width: 100%;
height: var(--height-1);
}
.brand-safety {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: center;
justify-content: flex-start;
padding: var(--padding-50) var(--padding-30) var(--padding-100);
box-sizing: border-box;
}
.container5 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-44);
align-items: flex-end;
justify-content: flex-start;
max-width: var(--max-w-1040);
}
.tagline {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-32);
letter-spacing: -0.02em;
line-height: var(--lh-44);
text-align: right;
display: block;
width: 100%;
height: var(--height-auto);
max-width: 305px;
}
.content {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-26);
align-items: flex-start;
justify-content: flex-start;
}
.content2 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: space-between;
gap: var(--gap-40);
max-width: var(--max-w-1040);
}
.copy-left {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-32);
align-items: flex-start;
justify-content: flex-start;
min-width: var(--min-w-350);
max-width: var(--max-w-350);
}
.headingsupport {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-12);
align-items: flex-start;
justify-content: center;
}
.heading {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-36);
line-height: var(--lh-48);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.support {
font-weight: 600;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.body-text {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-20);
align-items: flex-start;
justify-content: flex-start;
}
.image-icon {
display: block;
width: 100%;
height: auto;
max-height: 660px;
}
.engagement2 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: center;
justify-content: flex-start;
padding: var(--padding-100) var(--padding-30);
box-sizing: border-box;
}
.container6 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-44);
align-items: flex-start;
justify-content: flex-start;
max-width: var(--max-w-1040);
}
.tagline2 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-32);
letter-spacing: -0.02em;
line-height: var(--lh-44);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
max-width: 346px;
}
.content3 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-26);
align-items: flex-start;
justify-content: flex-start;
}
.content4 {
display: flex;
flex: 1;
height: var(--height-auto);
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: space-between;
gap: var(--gap-40);
}
.image-icon2 {
display: block;
width: 100%;
height: 516px;
min-width: var(--min-w-310);
max-width: var(--max-w-550);
min-height: 290.84px;
max-height: 516px;
}
.copy {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-32);
align-items: flex-start;
justify-content: flex-start;
min-width: var(--min-w-350);
}
.heading2 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-36);
line-height: var(--lh-48);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.support2 {
font-weight: 600;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.p4 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-28);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.workflows2 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: center;
justify-content: center;
padding: var(--padding-50) var(--padding-30) var(--padding-100);
box-sizing: border-box;
}
.tagline3 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-32);
letter-spacing: -0.02em;
line-height: var(--lh-44);
text-align: right;
display: block;
width: 100%;
height: var(--height-auto);
max-width: 279px;
}
.copy2 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-32);
align-items: flex-start;
justify-content: flex-start;
min-width: 365px;
max-width: 365px;
}
.image-icon3 {
display: block;
width: 100%;
height: auto;
max-height: 660px;
min-width: 300px;
}
.insights2 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: center;
justify-content: center;
padding: var(--padding-100) var(--padding-30);
box-sizing: border-box;
}
.tagline4 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-32);
letter-spacing: -0.02em;
line-height: var(--lh-44);
text-align: left;
display: block;
width: 100%;
height: var(--height-auto);
max-width: 266px;
}
.image-icon4 {
display: block;
width: 100%;
height: 550px;
min-width: var(--min-w-310);
max-width: var(--max-w-550);
min-height: 310px;
max-height: 550px;
}
.copy3 {
display: flex;
width: 390px;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-32);
align-items: flex-start;
justify-content: flex-start;
min-width: var(--min-w-390);
}
.faq2-container {
padding: 0px;
}
.faq2 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-0);
align-items: center;
justify-content: center;
padding: var(--padding-100) var(--padding-30);
box-sizing: border-box;
}
.container9 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-32);
align-items: flex-start;
justify-content: flex-start;
max-width: var(--max-w-1240);
}
.heading5 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-40);
letter-spacing: -0.02em;
line-height: var(--lh-52);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.questions {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-12);
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: flex-start;
}
.left {
display: flex;
flex: 1;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-12);
align-items: center;
justify-content: flex-start;
min-width: var(--min-w-310);
}
.faq3 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: flex-start;
justify-content: flex-start;
border-radius: var(--br-4);
padding: var(--padding-16) var(--padding-20);
box-sizing: border-box;
border: var(--border-1);
}
.what-platforms-do-you-support-parent {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-12);
align-items: flex-start;
justify-content: flex-start;
}
.what-platforms-do {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
flex: 1;
height: var(--height-auto);
}
.frame-icon {
display: block;
width: var(--width-24);
height: var(--height-24);
}
.content9 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-12);
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: flex-start;
}
.t1 {
display: flex;
flex: 1;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-0);
align-items: center;
justify-content: center;
border-radius: var(--br-8);
padding: var(--padding-23) var(--padding-19) var(--padding-19);
box-sizing: border-box;
border: var(--border-1);
min-width: var(--min-w-310);
}
.container11 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-12);
align-items: flex-start;
justify-content: flex-start;
}
.content10 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-16);
align-items: flex-start;
justify-content: flex-start;
}
.image-icon5 {
display: block;
width: var(--width-50);
height: var(--height-50);
border-radius: var(--br-100);
}
.p10 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-14);
line-height: var(--lh-24);
text-align: left;
display: block;
width: 100%;
height: var(--height-auto);
max-width: var(--max-w-365_3);
}
.name {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-4);
align-items: flex-start;
justify-content: flex-start;
padding: var(--padding-120) var(--padding-0) var(--padding-0);
box-sizing: border-box;
}
.name2 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-14);
line-height: var(--lh-20);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.title {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-12);
line-height: var(--lh-20);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.case-studies {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-0);
align-items: center;
justify-content: flex-start;
padding: var(--padding-100) var(--padding-30) var(--padding-50);
box-sizing: border-box;
}
.headingsupport5 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-12);
align-items: flex-start;
justify-content: flex-start;
}
.body5 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-40);
line-height: var(--lh-52);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.body6 {
font-weight: 600;
font-family: var(--font-manrope);
font-size: var(--fs-14);
line-height: var(--lh-20);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.case-studies2 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-12);
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: flex-start;
}
.cpg {
display: flex;
flex: 1;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-24);
align-items: flex-start;
justify-content: flex-start;
min-width: var(--min-w-310);
}
.image-container {
align-self: stretch;
width: 100%;
height: var(--height-250);
}
.image-icon8 {
display: block;
width: 100%;
height: 100%;
}
.tag {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-28);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.copy4 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-8);
align-items: center;
justify-content: flex-start;
}
.heading7 {
font-size: var(--fs-32);
line-height: var(--lh-44);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.p13 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.above-footer-container {
padding: 0px;
}
.above-footer {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-40);
align-items: center;
justify-content: center;
padding: var(--padding-100) var(--padding-30) var(--padding-50);
box-sizing: border-box;
}
.content16 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-40);
align-items: flex-start;
justify-content: flex-start;
max-width: var(--max-w-1240);
}
.content17 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-24);
align-items: flex-start;
justify-content: flex-start;
}
.heading10 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: flex-start;
justify-content: flex-start;
}
.honor-the-voice-container {
font-weight: 600;
font-family: var(--font-manrope);
font-size: var(--fs-64);
letter-spacing: -0.02em;
line-height: var(--lh-72);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.shape-the-meaning {
font-weight: 600;
font-family: var(--font-manrope);
font-size: var(--fs-64);
letter-spacing: -0.02em;
line-height: var(--lh-72);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.p16 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-28);
text-align: left;
display: block;
width: 100%;
height: var(--height-auto);
max-width: 538px;
}
.footer {
display: flex;
width: 100%;
max-width: 1024px;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: center;
justify-content: center;
padding: var(--padding-100) var(--padding-30) var(--padding-50);
box-sizing: border-box;
}
.top {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-72);
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: flex-start;
}
.left2 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-24);
align-items: flex-start;
justify-content: flex-start;
min-width: 336px;
max-width: 336px;
}
.logo-icon2 {
display: block;
width: var(--width-127_57);
height: 38px;
}
.socials {
display: flex;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-16);
align-items: center;
justify-content: center;
}
.instagram-icon {
display: block;
width: var(--width-22);
height: 21.99px;
}
.x {
display: block;
width: var(--width-20);
height: var(--height-20);
gap: var(--gap-0);
}
.vector-icon2 {
display: block;
width: var(--width-20);
height: var(--height-20);
}
.youtube-icon {
display: block;
width: var(--width-24);
height: 17px;
}
.right2 {
display: flex;
flex: 1;
height: var(--height-auto);
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: space-between;
gap: var(--gap-24);
min-width: var(--min-w-200);
}
.product {
display: flex;
flex: 1;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-16);
align-items: flex-start;
justify-content: flex-start;
min-width: var(--min-w-200);
}
.footer-links {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-16);
align-items: flex-start;
justify-content: flex-start;
}
.footer-links .features {
cursor: pointer;
}
.features {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
}
@media screen and (max-width: 768px) {
.footer {
width: 100%;
padding: var(--padding-80) var(--padding-24) var(--padding-40);
}
.top {
flex-direction: column;
gap: var(--gap-48);
}
.left2 {
min-width: unset;
max-width: 100%;
}
.right2 {
width: 100%;
flex-direction: row;
justify-content: space-between;
gap: var(--gap-24);
min-width: unset;
}
.product {
flex: 1;
min-width: var(--min-w-150);
}
}
@media screen and (max-width: 430px) {
.homepage {
display: flex;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-0);
align-items: flex-start;
justify-content: flex-start;
}
.header {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-80);
flex-direction: row;
gap: var(--gap-10);
align-items: center;
justify-content: center;
padding: var(--padding-20) var(--padding-30);
box-sizing: border-box;
}
.container {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: space-between;
gap: var(--gap-0);
max-width: var(--max-w-1240);
}
.logohamburger {
display: flex;
flex: 1;
height: var(--height-auto);
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: var(--gap-0);
}
.logo-icon {
display: block;
width: var(--width-127_57);
height: 38px;
}
.hamburger {
display: flex;
width: var(--width-32);
height: var(--height-32);
gap: 5px;
}
.hamburger-line {
width: 24px;
height: 2px;
}
.nav-links {
display: none;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-24);
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: center;
}
.safety {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
cursor: pointer;
}
.cta {
display: none;
width: var(--width-127_57);
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: flex-end;
justify-content: center;
}
.call-to-action {
display: flex;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-10);
align-items: center;
justify-content: center;
border-radius: var(--br-4);
padding: var(--padding-8) var(--padding-20);
box-sizing: border-box;
}
.sign-in {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.hero-container {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-10);
align-items: center;
justify-content: center;
padding: 52px var(--padding-20) 44px;
box-sizing: border-box;
}
.container2 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-20);
align-items: flex-start;
justify-content: center;
max-width: var(--max-w-1240);
}
.left-content {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-32);
align-items: flex-start;
justify-content: flex-start;
min-width: initial;
flex: unset;
}
.h1 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-16);
align-items: flex-start;
justify-content: flex-start;
}
.your-voice-millions-of-commen-wrapper {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-0);
align-items: flex-start;
justify-content: flex-start;
}
.your-voice-millions-container {
font-weight: 600;
font-family: var(--font-manrope);
font-size: var(--fs-64);
letter-spacing: -0.02em;
line-height: 68px;
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.body {
font-size: var(--fs-16);
line-height: var(--lh-28);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.call-to-action2 {
display: flex;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-10);
align-items: center;
justify-content: center;
border-radius: var(--br-4);
padding: var(--padding-8) var(--padding-20);
box-sizing: border-box;
}
.header-image-icon {
display: block;
align-self: stretch;
width: 100%;
min-width: 100%;
height: 282px;
border-radius: var(--br-4);
flex: unset;
}
.logo-strip {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: flex-start;
justify-content: flex-start;
padding: var(--padding-32) var(--padding-100) var(--padding-50);
box-sizing: border-box;
}
.container3 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-32);
align-items: center;
justify-content: center;
}
.p {
font-weight: 600;
font-family: var(--font-manrope);
font-size: var(--fs-14);
line-height: var(--lh-20);
text-align: center;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.logos {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: row;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: space-between;
gap: var(--gap-26);
max-width: 880px;
}
.company-logo-icon {
height: 31.99px;
width: auto;
flex: 1;
max-width: 100%;
object-fit: contain;
min-width: 176px;
}
.byd-1-icon {
height: 39.68px;
width: auto;
flex: 1;
max-width: 100%;
object-fit: contain;
min-width: var(--min-w-100);
}
.unilever-4-icon {
height: 51.95px;
width: auto;
flex: 1;
max-width: 100%;
object-fit: contain;
min-width: var(--min-w-100);
}
.x31-x5f-00-x5f-homepage-icon {
height: var(--height-36);
width: auto;
flex: 1;
max-width: 100%;
object-fit: contain;
min-width: var(--min-w-120);
}
.company-logo-icon2 {
height: var(--height-32);
width: auto;
flex: 1;
max-width: 100%;
object-fit: contain;
min-width: var(--min-w-120);
}
.our-numbers {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: 50px;
align-items: center;
justify-content: center;
padding: 70px 30px;
box-sizing: border-box;
}
.container4 {
padding-left: var(--padding-0);
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-24);
align-items: flex-start;
justify-content: flex-start;
max-width: var(--max-w-1240);
}
.body-parent {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-12);
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: flex-start;
}
.body3 {
font-size: var(--fs-44);
line-height: var(--lh-56);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.body4 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.divider {
display: block;
align-self: stretch;
width: 100%;
height: var(--height-1);
}
.brand-safety {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: center;
justify-content: flex-start;
padding: var(--padding-50) var(--padding-30) var(--padding-100);
box-sizing: border-box;
}
.container5 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-44);
align-items: flex-end;
justify-content: flex-start;
max-width: var(--max-w-1040);
}
.tagline {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-32);
letter-spacing: -0.02em;
line-height: var(--lh-44);
text-align: right;
display: block;
width: 100%;
height: var(--height-auto);
max-width: 305px;
}
.content {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-26);
align-items: flex-start;
justify-content: flex-start;
}
.content2 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: space-between;
gap: var(--gap-0);
max-width: var(--max-w-1040);
}
.copy-left {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-32);
align-items: flex-start;
justify-content: flex-start;
min-width: var(--min-w-350);
max-width: var(--max-w-350);
}
.headingsupport {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-12);
align-items: flex-start;
justify-content: center;
}
.heading {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-36);
line-height: var(--lh-48);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.support {
font-weight: 600;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.body-text {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-20);
align-items: flex-start;
justify-content: flex-start;
}
.image-icon {
display: block;
width: 100%;
height: auto;
min-width: var(--min-w-310);
max-height: 562.71px;
}
.engagement2 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: center;
justify-content: flex-start;
padding: var(--padding-100) var(--padding-30);
box-sizing: border-box;
}
.container6 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-44);
align-items: flex-start;
justify-content: flex-start;
max-width: var(--max-w-1040);
}
.tagline2 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-32);
letter-spacing: -0.02em;
line-height: var(--lh-44);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
max-width: 346px;
}
.content3 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-26);
align-items: flex-start;
justify-content: flex-start;
}
.content4 {
display: flex;
width: inherit;
flex: 1;
height: var(--height-auto);
flex-direction: row;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: space-between;
gap: var(--gap-24);
}
.image-icon2 {
display: block;
width: 100%;
height: 309.6px;
min-width: var(--min-w-310);
max-width: var(--max-w-550);
min-height: 290.84px;
max-height: 516px;
}
.copy {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-32);
align-items: flex-start;
justify-content: flex-start;
min-width: var(--min-w-350);
max-width: var(--max-w-350);
}
.heading2 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-36);
line-height: var(--lh-48);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.support2 {
font-weight: 600;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.p4 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-28);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.workflows2 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: center;
justify-content: center;
padding: var(--padding-50) var(--padding-30) var(--padding-100);
box-sizing: border-box;
}
.tagline3 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-32);
letter-spacing: -0.02em;
line-height: var(--lh-44);
text-align: right;
display: block;
width: 100%;
height: var(--height-auto);
max-width: 279px;
}
.copy2 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-32);
align-items: flex-start;
justify-content: flex-start;
min-width: 365px;
max-width: 365px;
}
.image-icon3 {
display: block;
width: 100%;
height: 318.3px;
min-width: var(--min-w-310);
max-width: var(--max-w-550);
min-height: 299.01px;
max-height: 530.5px;
}
.insights2 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: center;
justify-content: center;
padding: var(--padding-100) var(--padding-30);
box-sizing: border-box;
}
.tagline4 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-32);
letter-spacing: -0.02em;
line-height: var(--lh-44);
text-align: left;
display: block;
width: 100%;
height: var(--height-auto);
max-width: 266px;
}
.image-icon4 {
display: block;
width: 100%;
height: 330px;
min-width: var(--min-w-310);
max-width: var(--max-w-550);
min-height: 310px;
max-height: 550px;
}
.copy3 {
display: flex;
width: 390px;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-32);
align-items: flex-start;
justify-content: flex-start;
min-width: var(--min-w-390);
max-width: 390px;
}
.faq2 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-0);
align-items: center;
justify-content: center;
padding: var(--padding-100) var(--padding-30);
box-sizing: border-box;
}
.container9 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-32);
align-items: flex-start;
justify-content: flex-start;
max-width: var(--max-w-1240);
}
.heading5 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-40);
letter-spacing: -0.02em;
line-height: var(--lh-52);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.questions {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-12);
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: flex-start;
}
.left {
display: flex;
flex: 1;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-12);
align-items: center;
justify-content: flex-start;
min-width: var(--min-w-310);
}
.faq3 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: flex-start;
justify-content: flex-start;
border-radius: var(--br-4);
padding: var(--padding-16) var(--padding-20);
box-sizing: border-box;
border: var(--border-1);
}
.what-platforms-do-you-support-parent {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-12);
align-items: flex-start;
justify-content: flex-start;
}
.what-platforms-do {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
flex: 1;
height: var(--height-auto);
}
.frame-icon {
display: block;
width: var(--width-24);
height: var(--height-24);
}
.content9 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-12);
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: flex-start;
}
.t1 {
display: flex;
flex: 1;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-0);
align-items: center;
justify-content: center;
border-radius: var(--br-8);
padding: var(--padding-23) var(--padding-19) var(--padding-19);
box-sizing: border-box;
border: var(--border-1);
min-width: var(--min-w-310);
}
.container11 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-12);
align-items: flex-start;
justify-content: flex-start;
}
.content10 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-16);
align-items: flex-start;
justify-content: flex-start;
}
.image-icon5 {
display: block;
width: var(--width-50);
height: var(--height-50);
border-radius: var(--br-100);
}
.p10 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-14);
line-height: var(--lh-24);
text-align: left;
display: block;
width: 100%;
height: var(--height-auto);
max-width: var(--max-w-365_3);
}
.name {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-4);
align-items: flex-start;
justify-content: flex-start;
padding: var(--padding-120) var(--padding-0) var(--padding-0);
box-sizing: border-box;
}
.name2 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-14);
line-height: var(--lh-20);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.title {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-12);
line-height: var(--lh-20);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.case-studies {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-0);
align-items: center;
justify-content: flex-start;
padding: var(--padding-100) var(--padding-30) var(--padding-50);
box-sizing: border-box;
}
.headingsupport5 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-12);
align-items: flex-start;
justify-content: flex-start;
}
.body5 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-40);
line-height: var(--lh-52);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.body6 {
font-weight: 600;
font-family: var(--font-manrope);
font-size: var(--fs-14);
line-height: var(--lh-20);
text-align: left;
display: block;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
}
.case-studies2 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-12);
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: flex-start;
}
.cpg {
display: flex;
flex: 1;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-24);
align-items: flex-start;
justify-content: flex-start;
min-width: var(--min-w-310);
}
.image-container {
align-self: stretch;
width: 100%;
height: var(--height-250);
}
.image-icon8 {
display: block;
width: 100%;
height: 100%;
}
.tag {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-28);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.copy4 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-8);
align-items: center;
justify-content: flex-start;
}
.heading7 {
font-size: var(--fs-32);
line-height: var(--lh-44);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.p13 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.above-footer {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-40);
align-items: center;
justify-content: center;
padding: var(--padding-100) var(--padding-30) var(--padding-50);
box-sizing: border-box;
}
.content16 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-40);
align-items: flex-start;
justify-content: flex-start;
max-width: var(--max-w-1240);
}
.content17 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-24);
align-items: flex-start;
justify-content: flex-start;
}
.heading10 {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: flex-start;
justify-content: flex-start;
}
.honor-the-voice-container {
font-weight: 600;
font-family: var(--font-manrope);
font-size: var(--fs-64);
letter-spacing: -0.02em;
line-height: var(--lh-72);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.shape-the-meaning {
font-weight: 600;
font-family: var(--font-manrope);
font-size: var(--fs-64);
letter-spacing: -0.02em;
line-height: var(--lh-72);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
.p16 {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-28);
text-align: left;
display: block;
width: 100%;
height: var(--height-auto);
max-width: 538px;
}
.footer {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-10);
align-items: center;
justify-content: center;
padding: var(--padding-50) var(--padding-20) var(--padding-30);
box-sizing: border-box;
}
.top {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-40);
flex-wrap: nowrap;
align-items: flex-start;
align-content: flex-start;
justify-content: flex-start;
}
.left2 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-24);
align-items: flex-start;
justify-content: flex-start;
min-width: unset;
max-width: 100%;
}
.logo-icon2 {
display: block;
width: var(--width-127_57);
height: 38px;
}
.socials {
display: flex;
width: var(--width-auto);
align-self: unset;
height: var(--height-auto);
flex-direction: row;
gap: var(--gap-16);
align-items: center;
justify-content: center;
}
.instagram-icon {
display: block;
width: var(--width-22);
height: 21.99px;
}
.x {
display: block;
width: var(--width-20);
height: var(--height-20);
gap: var(--gap-0);
}
.vector-icon2 {
display: block;
width: var(--width-20);
height: var(--height-20);
}
.youtube-icon {
display: block;
width: var(--width-24);
height: 17px;
}
.right2 {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
align-content: flex-start;
justify-content: flex-start;
gap: var(--gap-32);
min-width: unset;
}
.product {
display: flex;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-16);
align-items: flex-start;
justify-content: flex-start;
min-width: unset;
}
.footer-links {
display: flex;
align-self: stretch;
width: 100%;
height: var(--height-auto);
flex-direction: column;
gap: var(--gap-16);
align-items: flex-start;
justify-content: flex-start;
}
.footer-links .features {
cursor: pointer;
}
.features {
font-weight: 500;
font-family: var(--font-manrope);
font-size: var(--fs-16);
line-height: var(--lh-24);
text-align: left;
display: block;
align-self: stretch;
width: 100%;
height: var(--height-auto);
}
}
/* Styles for pop-u-p.html */
.popup {
width: 800px;
position: relative;
border-radius: var(--br-8);
background-color: var(--color-white);
overflow: hidden;
display: flex;
align-items: flex-start;
padding: var(--padding-50);
box-sizing: border-box;
gap: 42px;
max-width: 90%;
max-height: 90%;
text-align: left;
font-size: var(--fs-44);
color: var(--color-gray-300);
font-family: var(--font-manrope);
}
.popup-divider {
display: none;
}
.frame-parent {
width: 314px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 48px;
}
.body-group {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: var(--gap-24);
}
.body7 {
margin: 0;
align-self: stretch;
position: relative;
font-size: inherit;
line-height: var(--lh-56);
font-weight: 500;
font-family: inherit;
}
.body8 {
align-self: stretch;
position: relative;
font-size: var(--fs-18);
line-height: var(--lh-32);
font-weight: 500;
color: var(--color-gray-200);
}
.learn-more-about-your-business {
margin: 0;
font-family: inherit;
font-size: inherit;
padding-left: 24px;
}
.call-to-action3 {
cursor: pointer;
border: none;
padding: var(--padding-8) var(--padding-20);
background-color: var(--color-cadetblue);
align-self: stretch;
border-radius: var(--br-4);
display: flex;
align-items: center;
justify-content: center;
}
.popup-child {
align-self: stretch;
width: 1px;
position: relative;
background-color: var(--color-gainsboro);
}
.frame-group {
flex: 1;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 52px;
}
.body-container {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: var(--gap-12);
}
.frame-container {
align-self: stretch;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--gap-16);
}
.frame-child {
width: 100%;
border: none;
outline: none;
background-color: var(--color-gray-400);
align-self: stretch;
height: 52px;
position: relative;
border-radius: var(--br-4);
overflow: hidden;
flex-shrink: 0;
padding: var(--padding-16);
box-sizing: border-box;
font-family: var(--font-manrope);
font-weight: 500;
font-size: var(--fs-14);
color: var(--color-gray-200);
}
.call-to-action4 {
cursor: pointer;
border: none;
padding: var(--padding-8) var(--padding-20);
background-color: var(--color-gray-300);
align-self: stretch;
border-radius: var(--br-4);
display: flex;
align-items: center;
justify-content: center;
}
.submit {
position: relative;
font-size: var(--fs-16);
line-height: var(--lh-24);
font-weight: 500;
font-family: var(--font-manrope);
color: var(--color-white);
text-align: left;
}
/* Mobile Menu Container */
.mobile-menu-container {
display: none;
opacity: 0;
visibility: hidden;
transform: translateX(100%);
}
@media screen and (max-width: 1024px) {
.header {
position: relative;
}
.container {
position: relative;
}
.mobile-menu-container {
position: absolute;
top: 55px;
left: -20px;
width: 100%;
background-color: var(--color-white);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 0 20px;
flex-direction: column;
gap: 20px;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateX(100%);
max-height: 0;
overflow: hidden;
display: flex;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.4s ease,
padding 0.4s ease;
}
.mobile-menu-container.menu-open {
opacity: 1;
visibility: visible;
transform: translateX(0);
max-height: 500px;
padding: 24px 20px;
transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
visibility 0.4s ease,
padding 0.4s ease;
}
.mobile-menu-container .safety {
padding: 12px 16px;
border-radius: 8px;
transition: background-color 0.2s ease, opacity 0.3s ease, transform 0.3s ease;
text-align: left;
opacity: 0;
transform: translateX(20px);
}
.mobile-menu-container.menu-open .safety {
opacity: 1;
transform: translateX(0);
}
.mobile-menu-container.menu-open .safety:nth-child(1) {
transition-delay: 0.05s;
}
.mobile-menu-container.menu-open .safety:nth-child(2) {
transition-delay: 0.1s;
}
.mobile-menu-container.menu-open .safety:nth-child(3) {
transition-delay: 0.15s;
}
.mobile-menu-container.menu-open .safety:nth-child(4) {
transition-delay: 0.2s;
}
.mobile-menu-container.menu-open .safety:nth-child(5) {
transition-delay: 0.25s;
}
.mobile-menu-container.menu-open .safety:nth-child(6) {
transition-delay: 0.3s;
}
.mobile-menu-container .safety:hover {
background-color: var(--color-whitesmoke);
}
.mobile-menu-container .mobile-sign-in {
margin-top: 8px;
width: 100%;
align-self: stretch;
opacity: 0;
transform: translateX(20px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.mobile-menu-container.menu-open .mobile-sign-in {
opacity: 1;
transform: translateX(0);
transition-delay: 0.35s;
}
.mobile-menu-container .mobile-sign-in .sign-in {
width: 100%;
text-align: center;
}
/* Popup mobile responsive */
.popup-overlay {
padding: var(--padding-20);
align-items: flex-start;
justify-content: center;
overflow-y: auto;
}
.popup {
width: 100%;
max-width: 95%;
flex-direction: column;
padding: var(--padding-30) var(--padding-20);
gap: var(--gap-24);
max-height: 90vh;
overflow-y: auto;
margin: auto;
}
.frame-parent {
width: 100%;
gap: var(--gap-24);
}
.popup-child {
display: none;
}
.frame-group {
width: 100%;
gap: var(--gap-24);
}
.body7 {
font-size: var(--fs-32);
line-height: var(--lh-44);
}
.body-group {
gap: var(--gap-16);
}
.body-container {
gap: var(--gap-8);
}
}
@media screen and (max-width: 430px) {
.popup-overlay {
padding: 0;
align-items: flex-end;
}
.popup {
max-width: 100%;
padding: var(--padding-24) var(--padding-16);
gap: var(--gap-20);
border-radius: var(--br-8) var(--br-8) 0 0;
font-size: var(--fs-32);
max-height: 95vh;
margin: 0;
}
.popup-divider {
border: 1px solid var(--color-gainsboro);
display: block;
width: 100%;
margin: 0 10;
}
.frame-parent {
gap: var(--gap-20);
}
.frame-group {
gap: var(--gap-20);
}
.body7 {
font-size: var(--fs-28);
line-height: 36px;
}
.body8 {
font-size: var(--fs-16);
line-height: var(--lh-24);
}
.learn-more-about-your-business {
padding-left: 20px;
font-size: var(--fs-16);
}
}
/* Snackbar notification styles */
.snackbar {
position: fixed;
bottom: -100px;
left: 50%;
transform: translateX(-50%);
background-color: var(--color-gray-300);
color: var(--color-white);
padding: 16px 24px;
border-radius: var(--br-4);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 1000;
opacity: 0;
transition: bottom 0.3s ease, opacity 0.3s ease;
min-width: 300px;
max-width: 90%;
text-align: center;
font-size: var(--fs-16);
font-family: var(--font-manrope);
}
.snackbar.show {
bottom: 24px;
opacity: 1;
}
.snackbar.error {
background-color: #d32f2f;
}
.snackbar.success {
background-color: var(--color-cadetblue);
}
.snackbar-message {
display: block;
}
/* Success Modal Styles */
.success-modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(26, 28, 30, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.success-modal {
background-color: var(--color-white);
border-radius: var(--br-8);
padding: var(--padding-40) var(--padding-32);
max-width: 400px;
width: 90%;
text-align: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
animation: slideUp 0.3s ease;
}
@keyframes slideUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.success-icon {
width: 64px;
height: 64px;
background-color: #4CAF50;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto var(--gap-24);
animation: scaleIn 0.4s ease 0.1s both;
}
@keyframes scaleIn {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.success-icon svg {
width: 32px;
height: 32px;
}
.success-title {
font-family: var(--font-manrope);
font-size: var(--fs-32);
font-weight: 600;
color: var(--color-gray-300);
margin: 0 0 var(--gap-12) 0;
line-height: var(--lh-44);
}
.success-message {
font-family: var(--font-manrope);
font-size: var(--fs-16);
font-weight: 400;
color: var(--color-gray-200);
margin: 0;
line-height: var(--lh-24);
}