/*Import font from Typekit:*/ @import url('https://use.typekit.net/dbq5jeg.css'); html { background: var(--grayscale3); } body { margin: 0 auto; max-width: 1800px; background: var(--white); font-family: "Poppins","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; overflow-x: hidden !important; box-shadow: var(--z-shadow-2); text-wrap: pretty; } /* Variables /* ---------------------------------------------------------- */ :root { /*////////////////////////////////// // COLORS //////////////////////////////////*/ /* Primary Colors: */ --primary1: #5890E7; --primary2: #8885E1; --primary3: #AD77D2; --primary4: #C96ABC; --primary5: #DD5EA0; --primary6: #E75781; --primary7: #E75861; /* Grayscale: */ --grayscale1: #FFFFFF; --grayscale2: #FAFAFA; --grayscale3: #F0F0F0; --grayscale4: #E1E1E1; --grayscale5: #CBCBCB; --grayscale6: #ACACAC; --grayscale7: #838383; --grayscale8: #515151; --grayscale9: #1C1C1C; --red: var(--primary7); /* error */ --orange: #E7B558; --yellow: #E7D958; /* warning */ --green: #58e797; /* success */ --purple: var(--primary3); --blue: var(--primary1); --white: var(--grayscale1); --gray-light: var(--grayscale4); --gray: var(--grayscale6); --gray-dark: var(--grayscale7); --black: var(--grayscale9); --black-as-rgb: 28, 28, 28; /*////////////////////////////////// // TYPOGRAPHY //////////////////////////////////*/ --font-family: 'neue-haas-unica', sans-serif, system-ui; --font-color: var(--grayscale9); /* Font Weights: */ --font-weight-light: 350; --font-weight-regular: 400; --font-weight-medium: 550; --font-weight-bold: 700; --line-height-large: 1.45; --line-height-regular: 1.2; --line-height-small: 1.1; --font-size-p: 1rem; --font-size-small: 0.75rem; --font-size-x-small: 0.65rem; /*////////////////////////////////// // LAYERS //////////////////////////////////*/ /* Box Shadows */ --z-shadow-0: none; --z-shadow-1: 0 4px 8px 0 rgba(var(--black-as-rgb), 0.06); --z-shadow-2: 0 8px 16px 0 rgba(var(--black-as-rgb), 0.12); --z-shadow-3: 0 12px 20px 0 rgba(var(--black-as-rgb), 0.18); --z-shadow-4: 0 16px 24px 0 rgba(var(--black-as-rgb), 0.24); --z-shadow-5: 0 20px 30px 0 rgba(var(--black-as-rgb), 0.30); /*////////////////////////////////// // LAYOUT //////////////////////////////////*/ /* Media query breakpoints: */ --large-desktop-width: 1223px; /* Large Desktops, 1224px and up */ --medium-desktop-width: 1023px; /* Medium Desktops, 1024px and up */ --tablet-width: 767px; /* Tablets, 768px and up */ --large-mobile-width: 469px; /* Large Mobile, 470px and up */ --mobile-width: 319px; /* Mobile, 320px and up */ /* Max-widths: */ --max-width-200: 200px; --max-width-300: 300px; --max-width-400: 400px; --max-width-500: 500px; --max-width-600: 600px; --max-width-700: 700px; --max-width-800: 800px; --max-width-1000: 1000px; --max-width-1200: 1200px; --max-width-max: 1360px; /* Helpers for spatial/spacing: */ --space-base: 5px; --space-5: calc((var(--space-base) * 1)); /* 5px */ --space-10: calc((var(--space-base) * 2)); /* 10px */ --space-15: calc((var(--space-base) * 3)); /* 15px */ --space-20: calc((var(--space-base) * 4)); /* 20px */ --space-25: calc((var(--space-base) * 5)); /* 25px */ --space-30: calc((var(--space-base) * 6)); /* 30px */ --space-45: calc((var(--space-base) * 9)); /* 45px */ --space-90: calc((var(--space-base) * 18)); /* 90px */ /* Border-radii: */ --border-radius-none: 0; --border-radius-small: 3px; --border-radius-regular: 8px; --border-radius-large: 12px; --border-radius-half: 50%; --border-radius-all: 100%; } /* MAIN STYLES /* ---------------------------------------------------------- */ /*Type scale based on http://type-scale.com/?size=20&scale=1.333&text=A%20Visual%20Type%20Scale&webfont=Lato&font-family=Lato&font-weight=300&font-family-headers=&font-weight-headers=inherit&background-color=white&font-color=%23333*/ *, html { font-family: var(--font-family); font-color: var(--font-color); font-weight: var(--font-weight-regular); } html { -webkit-font-smoothing: antialiased } .regular { font-weight: normal; } .lowercase { text-transform: lowercase !important } .normalcase, .nocase { text-transform: initial !important } .text-decoration-line-through { text-decoration: line-through } .underline { text-decoration: underline; } .dotted-underline { display: inline-block; border-bottom: 1px dashed var(--grayscale7); padding-bottom: 2px; cursor: help; } .card-0 { box-shadow: var(--z-shadow-0); -webkit-box-shadow: var(--z-shadow-0); -moz-box-shadow: var(--z-shadow-0); } .max-width-200 { max-width: var(--max-width-200); } .max-width-300 { max-width: var(--max-width-300); } .max-width-400 { max-width: var(--max-width-400); } .max-width-600 { max-width: var(--max-width-600); } .small { font-size: .875rem; } .topnav .navbar-brand { padding-top: 0; padding-bottom: 5px; max-width: 160px; } .topnav .navbar-brand img { width: 100%; height: auto; } @media only screen and (max-width: 991.98px) { .topnav .navbar-nav .nav-link { text-align: center; } .topnav .navbar-brand img { min-width: initial; } .blog-post-page .blog-sidebar-cta-card-section { position: relative !important; top: initial !important; } } @media (min-width: 992px) { .navbar-expand-lg .navbar-nav .nav-link { padding-left: .6rem; padding-right: .6rem; } } .white-space-no-wrap { white-space: nowrap; } .white-space-initial { white-space: initial !important; } .growsurf-border-bottom { border-bottom: 1px solid #E1E1E1; } .growsurf-border-top { border-top: 1px solid #E1E1E1; } .h1, h1, .h2, h2, .h3, h3, .h4, h4, .h5, h5, .h6, h6 { font-family: var(--font-family); font-weight: var(--font-weight-bold); line-height: var(--line-height-small); letter-spacing: normal; text-wrap: balance; } #story .h1 > span, h1 > span, #story .h2 > span, h2 > span, #story .h3 > span, h3 > span, #story .h4 > span, h4 > span, #story .h5 > span, h5 > span, #story .h6 > span, h6 > span { font-family: var(--font-family) !important; font-weight: var(--font-weight-bold) !important; } #story figcaption { display: none; } .navbar-light .navbar-toggler { border-color: var(--grayscale5); } .ql-indent-1 { list-style-type: circle; } .display-inline-block { display: inline-block } .display-inline-flex { display: inline-flex } .display-flex { display: flex } .align-items-center { align-items: center } .align-items-flex-start { align-items: flex-start } .justify-content-center { justify-content: center } .justify-content-end { justify-content: end } .justify-content-space-between { justify-content: space-between } .flex-direction-column { flex-direction: column } #footer a { color: var(--black); font-weight: var(--font-weight-light); } #footer .growsurf-label { color: var(--black); } #footer .nav { justify-content: space-between; } #footer li.nav-item { max-width: 235px; } .footer-description { max-width: 500px; margin: 0 auto; } .footer-logo { max-width: 160px; } @media (max-width: 768px) { #footer .nav .nav-item { padding-left: 0 !important; width: 50%; } #footer .nav { justify-content: flex-start; } #footer .growsurf-seo-links ul > li { width: 100% !important; max-width: initial !important; } } .customer-logos-container { background: var(--grayscale2); border-bottom: 1px solid var(--grayscale4); margin: 0 auto; width: 100%; padding: var(--space-30) 0; padding-bottom: var(--space-30); } .customer-logos-container-nested { background: var(--white); padding-bottom: 0; border-bottom: none; } .customer-logos-container-nested .customer-logos { max-width: none; } .customer-logos { margin: 0 auto; padding-bottom: var(--space-30); /*max-width: var(--max-width-1200);*/ max-width: 960px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; } .customer-logos img { vertical-align: middle; margin: var(--space-30); margin-bottom: 10px; max-width: var(--space-90); transform: scale(1.1); } .customer-logos img[alt="SurveyMonkey"] { max-width: 170px; } .customer-logos img[alt="Not Boring"] { max-width: 130px; } .customer-logos img[alt="The Uptick"] { max-width: 130px; } .customer-logos img[alt="Blockstack"] { max-width: 150px; } .customer-logos img[alt="Bombora"] { max-width: 80px; position: relative; } .customer-logos img[alt="Jolt"] { max-width: 40px; position: relative; } .customer-logos img[alt="Microverse"] { max-width: 120px; position: relative; } .customer-logos img[alt="Quartz"] { max-width: 110px; position: relative; } .customer-logos img[alt="IMGN"] { max-width: 70px; position: relative; } .customer-logos img[alt="PrimeWomen"] { max-width: 35px; position: relative; } .customer-logos img[alt="Lululemon"] { max-width: 150px; } .customer-logos img[alt="Blue Medora"] { max-width: 150px; position: relative; } .customer-logos img[alt="Charlie Finance"] { max-width: 80px; } .customer-logos img[alt="Digital Marketer"] { max-width: 150px; } .customer-logos img[alt="Vinovest"] { max-width: 50px; } .customer-logos img[alt="Solana"] { max-width: 120px; } .customer-logos img[alt="Deliverr"] { max-width: 120px; } .customer-logos img[alt="Willful"] { max-width: 80px; position: relative; } .customer-logos img[alt="Alpha Foods"] { max-width: 45px; } .customer-logos img[alt="Bolt"] { max-width: 60px } .customer-logos img[alt="CodeRabbit"] { max-width: 140px } .customer-logos img[alt="Offcall"] { max-width: 60px } .customer-logos img[alt="Range"] { max-width: 70px } .customer-logos img[alt="FrontFundr"] { max-width: 110px } .customer-logos img[alt="Podcast.co"] { max-width: 110px } .customer-logos img[alt="Pets4Homes"] { max-width: 120px; position: relative } .customer-logos img[alt="Skribe AI"] { max-width: 60px; position: relative } .customer-logos img[alt="Eden"] { max-width: 60px; position: relative } .customer-logos img[alt="Lickd"] { max-width: 50px; position: relative } .customer-logos img[alt="ESTSoft"] { max-width: 74px; position: relative } .customer-logos img[alt="Ubindi"] { max-width: 70px; position: relative } .customer-logos img[alt="Topcoder"] { max-width: 150px; } .customer-logos img[alt="Alma"] { max-width: 70px; position: relative; } .customer-logos img[alt="Microverse.org"] { max-width: 130px; position: relative; } .customer-logos img[alt="Raylo"] { max-width: 80px; } .customer-logos img[alt="Renmoney"] { max-width: 120px; } .customer-logos img[alt="Duda"] { max-width: 70px; } .customer-logos img[alt="NurseDeck"] { max-width: 110px; } .customer-logos img[alt="SongPush"] { max-width: 110px; } .customer-logos img[alt="Topia"] { max-width: 50px; } .customer-logos img[alt="Hyrise"] { max-width: 70px; } .customer-logos img[alt="Moves"] { max-width: 80px; } .customer-logos img[alt="SmartSuite"] { max-width: 120px; } .customer-logos img[alt="Clay"] { max-width: 70px; } .customer-logos img[alt="Rula"] { max-width: 60px; } .customer-logos img[alt="The Webinar Vet"] { max-width: 140px; } .customer-logos img[alt="Zeller"] { max-width: 80px; position: relative; } .customer-logos img[alt="Blueberry Markets"] { max-width: 160px; } .customer-logos img[alt="Rally Rd"] { max-width: 70px; position: relative; } .customer-logos img[alt="Cogni"] { max-width: 70px; } .customer-logos img[alt="InvestEngine"] { max-width: 150px; } .customer-logos img[alt="Criptalia"] { max-width: 80px; } .customer-logos img[alt="Siteminder"] { max-width: 110px; position: relative; } .customer-logos img[alt="MainStreet"] { max-width: 100px; position: relative; } .customer-logos img[alt="Mixmax"] { max-width: 110px; position: relative; } .customer-logos img[alt="Remotepass"] { max-width: 130px; } .customer-logos img[alt="Indeed"] { max-width: 80px; position: relative; } .customer-logos img[alt="Donordock"] { max-width: 110px; } .customer-logos img[alt="NectarHR"] { max-width: 100px; } .customer-logos img[alt="Draftbit"] { position: relative; } .customer-logos img[alt="Amble"] { max-width: 60px; } .customer-logos img[alt="Pathstream"] { max-width: 170px; } .customer-logos img[alt="TradeAcademy"] { max-width: 140px; } .customer-logos img[alt="Toggl"] { max-width: 70px; } .customer-logos img[alt="Donorbox"] { max-width: 110px; } .customer-logos img[alt="Instrumentl"] { max-width: 120px; } .customer-logos img[alt="HealthAtom"] { max-width: 110px; } .customer-logos img[alt="Arc.dev"] { max-width: 60px; } .customer-logos img[alt="Quickstart"] { max-width: 126px; } .customer-logos img[alt="Hippo Education"] { max-width: 70px; } .customer-logos img[alt="Doctor Disability"] { max-width: 170px; } .customer-logos img[alt="EBAC"] { max-width: 100px; } .customer-logos img[alt="Onramp"] { max-width: 120px; position: relative; } .customer-logos img[alt="Stepful"] { max-width: 80px; position: relative; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Alma (color)"] { padding: 9px 8px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Boxcast (color)"] { padding: 9px 8px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="PolicyMe (color)"] { margin-bottom: -2px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Boldin (color)"] { padding: 9px 8px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="MainStreet (color)"] { padding: 9px 8px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Raylo (color)"] { padding: 9px 8px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="AutoHaulerExchange (color)"] { padding: 6px 8px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Freely (color)"] { padding: 6px 8px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Vinovest (color)"] { padding: 5px 8px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Les Mills (color)"] { padding: 7px 8px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Pets4Homes (color)"] { margin-top: -2px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Range (color)"] { margin-bottom: -2px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Offcall (color)"] { padding: 6px 8px; margin-bottom: -2px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Doctor Disability (color)"] { padding: 7px 8px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Donordock (color)"] { padding: 9px 8px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="PatternLife (color)"] { width: 74px; padding: 6px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Hippo Education (color)"] { width: 62px; padding: 6px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="EvenFi (color)"] { width: 50px; padding: 6px 8px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Wakuli (color)"] { width: 66px; padding: 8px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Pathstream (color)"] { padding: 1px 8px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Nomad (color)"] { padding: 9px 8px; } .v2-customer-color-logos-under-cta-container .customer-logos img[alt="Emma (color)"] { padding: 10px 8px; } .customer-logos-container .trusted-by-text { text-align: center; margin-bottom: var(--space-10); margin-top: var(--space-30); color: var(--grayscale6); } .customer-logos-container .trusted-by-text::before, .customer-logos-container .trusted-by-text::after { width: var(--space-45); height: 2px; background: var(--grayscale4); content: ''; vertical-align: middle; display: inline-block; top: -1px; position: relative; } .customer-logos-container .trusted-by-text::before { margin-right: var(--space-20); } .customer-logos-container .trusted-by-text::after { margin-left: var(--space-20); } @media (max-width: 768px) { .customer-logos { display: block; text-align: center; } .customer-logos img { margin: var(--space-15); } .customer-logos-container .trusted-by-text { padding-left: 1rem; padding-right: 1rem; } .customer-logos-container .trusted-by-text::before, .customer-logos-container .trusted-by-text::after { display: none; } } .growsurf-label { font-weight: var(--font-weight-bold); letter-spacing: .05rem; font-size: 0.75rem; text-transform: uppercase; color: var(--grayscale7); } /*=================================== = Mixins SCSS = ===================================*/ /*===== End of Mixins ======*/ /*=================================== = Variables SCSS = ===================================*/ /*===== End of Variables SCSS ======*/ .landing-hero-section { position: relative; border-bottom: 1px solid #E1E1E1; padding: 45px 15px; padding-bottom: 0; background: #FFFFFF; overflow-x: hidden; } .landing-hero-section .landing-hero-section-inner { margin: 0 auto; max-width: 1140px; text-align: left; z-index: 2; position: relative; padding: 45px 0; padding-top: 60px; min-height: 700px; padding-right: 15px; padding-left: 15px; } .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat { max-width: 620px; font-size: 1rem; font-weight: 350; } .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .landing-hero-title { font-weight: 700; font-size: -webkit-calc(4.2rem); font-size: calc(4.2rem); margin-bottom: 30px; line-height: 1.1; text-wrap: balance; } .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .landing-hero-description { font-size: 1.333rem; margin-bottom: 20px; font-weight: 350; line-height: 1.45; max-width: 560px; } @media only screen and (max-width: 1200px) { .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .landing-hero-title { font-size: 3.5rem; } } .capterra-reviews-image { display: inline-block; margin-top: 30px; max-width: 240px; } .capterra-reviews-image img { width: 100%; } .integration-partner-badge-image { display: inline-block; max-width: 200px; } .integration-partner-badge-image img { width: 100%; } .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .landing-hero-sub-description { font-weight: 700; font-size: 1.333rem; margin-bottom: 30px; line-height: 1.45; } .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .cta-action-container { display: flex; align-items: center; margin-bottom: 10px; } .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .cta-action-container .alternative-cta-text { font-size: 1rem; font-weight: 350; max-width: 400px; margin: 10px; } .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .text-under-button { font-size: 1rem; font-weight: 350; max-width: 430px; } .landing-hero-section .landing-chart-bg { position: absolute; margin-left: 60%; left: 0; margin-right: 30px; animation-fill-mode: both; -moz-animation: fadeIn 0.3s both ease-in; -o-animation: fadeIn 0.3s both ease-in; -webkit-animation: fadeIn 0.3s both ease-in; animation: fadeIn 0.3s both ease-in; background: url("https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/db3a9830-9a02-4d24-ac75-30ec19a16030.svg") right bottom no-repeat; bottom: 0; top: 100px; right: 0; content: ''; max-width: 500px; height: 400px; -webkit-transform: scale(1.3); -ms-transform: scale(1.3); transform: scale(1.3); -webkit-transform-origin: bottom right; -moz-transform-origin: bottom right; -ms-transform-origin: bottom right; transform-origin: bottom right; width: 100%; overflow: hidden; z-index: 1; } @media (max-width: 1199px) { .landing-hero-section .landing-hero-section-inner { max-width: 960px; } .landing-hero-section { display: flex; /*flex-direction: column-reverse;*/ flex-direction: column; } .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat { max-width: none; } .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .landing-hero-description { max-width: none; } .landing-hero-section .landing-chart-bg { top: 0; right: 0; left: 0; margin: 0 auto; position: relative !important; max-width: 700px; width: 100%; height: 160px; margin-top: 70px; transform-origin: center; background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/db3a9830-9a02-4d24-ac75-30ec19a16030.svg) center center no-repeat; margin-bottom: -20px; } } @media (max-width: 991.98px) { .landing-hero-section .landing-hero-section-inner { max-width: 768px; } } @media (max-width: 696px) { .landing-social-proof-badges-in-home { display: flex !important; flex-direction: column; align-items: center; } .landing-social-proof-badges-in-home > * { margin-bottom: 10px; } /* .landing-social-proof-badges-in-home>a.capterra-reviews-image:first-child { margin-bottom: 20px; } */ } @media (max-width: 469px) { .landing-hero-section .landing-hero-section-inner { padding: 0; padding-top: 60px; padding-bottom: 45px; max-height: initial; } .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .landing-hero-title { font-size: 2.369rem; } .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .cta-action-container { flex-direction: column; } .landing-hero-section .landing-hero-section-inner .landing-hero-section-meat .text-under-button { text-align: center; } .capterra-reviews-image { display: block; margin: 0 auto; margin-top: 20px; } .landing-hero-section .landing-chart-bg { /*left: -15px;*/ /*width: calc(15px + 15px + 100%);*/ /*opacity: 0.7;*/ height: 120px; margin-top: 60px; -moz-animation: none; -o-animation: none; -webkit-animation: none; animation: none; } } button, .btn { font-weight: 700; outline: none !important; border: none; background: transparent; white-space: initial; text-decoration: none; text-transform: uppercase; background-clip: padding-box; /* stops bg color from leaking outside the border: */ -webkit-border-radius: 3px; border-radius: 3px; transition: 0.3s; padding: 10px 15px; } button:hover, button:focus, button:active, .btn:hover, .btn:focus, .btn:active { text-decoration: none; transition: 0.3s; cursor: pointer; } button.btn-xs, .btn.btn-xs { padding: 7px 10px; } button.btn-md, .btn.btn-md { padding: 10px 15px; } button.btn-lg, .btn.btn-lg { /*padding: 20px 30px;*/ } a, .link { font-weight: 500; cursor: hover; text-decoration: none; color: #5890E7; transition: 0.3s; } aa, .link { color: #5890E7; } aa:focus, aa:active, .link:focus, .link:active { color: #85aeed; } aa:hover, .link:hover { color: #2b72e1; } a:hover, a:focus, a:active, .link:hover, .link:focus, .link:active { text-decoration: none; transition: 0.3s; cursor: hover; } a[disabled], .link[disabled] { cursor: not-allowed !important; color: #CBCBCB !important; } a.underline:hover, a.underline:focus, a.underline:active, .link.underline:hover, .link.underline:focus, .link.underline:active { text-decoration: underline; } .btn-primary-blue, .btn-primary, .btn-cta { font-weight: 600 !important; color: #5890E7 !important; background: rgba(88, 144, 231, 0.08) !important; } .btn-primary-blue:focus, .btn-primary:focus, .btn-cta:focus, .btn-primary-blue:active, .btn-primary:active, .btn-cta:active { color: #85aeed !important; background: rgba(43, 114, 225, 0.08) !important; box-shadow: none !important; } .btn-primary-blue:hover, .btn-primary:hover, .btn-cta:hover { color: #2b72e1 !important; background: rgba(43, 114, 225, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary-blue[disabled], [disabled].btn-primary, [disabled].btn-cta { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary-purple { font-weight: 600 !important; color: #AD77D2 !important; background: rgba(173, 119, 210, 0.08) !important; } .btn-primary-purple:focus, .btn-primary-purple:active { color: #c49ddf !important; background: rgba(150, 81, 197, 0.08) !important; box-shadow: none !important; } .btn-primary-purple:hover { color: #9651c5 !important; background: rgba(150, 81, 197, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary-purple[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary-red, .btn-danger { font-weight: 600 !important; color: #E75861 !important; background: rgba(231, 88, 97, 0.08) !important; } .btn-primary-red:focus, .btn-danger:focus, .btn-primary-red:active, .btn-danger:active { color: #ed858b !important; background: rgba(225, 43, 55, 0.08) !important; box-shadow: none !important; } .btn-primary-red:hover, .btn-danger:hover { color: #e12b37 !important; background: rgba(225, 43, 55, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary-red[disabled], [disabled].btn-danger { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary-orange, .btn-warning { font-weight: 600 !important; color: #E7B558 !important; background: rgba(231, 181, 88, 0.08) !important; } .btn-primary-orange:focus, .btn-warning:focus, .btn-primary-orange:active, .btn-warning:active { color: #edc985 !important; background: rgba(225, 161, 43, 0.08) !important; box-shadow: none !important; } .btn-primary-orange:hover, .btn-warning:hover { color: #e1a12b !important; background: rgba(225, 161, 43, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary-orange[disabled], [disabled].btn-warning { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary-purple { font-weight: 600 !important; color: #AD77D2 !important; background: rgba(173, 119, 210, 0.08) !important; } .btn-primary-purple:focus, .btn-primary-purple:active { color: #c49ddf !important; background: rgba(150, 81, 197, 0.08) !important; box-shadow: none !important; } .btn-primary-purple:hover { color: #9651c5 !important; background: rgba(150, 81, 197, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary-purple[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary-green, .btn-success { font-weight: 600 !important; color: #58e797 !important; background: rgba(88, 231, 151, 0.08) !important; } .btn-primary-green:focus, .btn-success:focus, .btn-primary-green:active, .btn-success:active { color: #85edb3 !important; background: rgba(43, 225, 123, 0.08) !important; box-shadow: none !important; } .btn-primary-green:hover, .btn-success:hover { color: #2be17b !important; background: rgba(43, 225, 123, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary-green[disabled], [disabled].btn-success { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary-yellow { font-weight: 600 !important; color: #E7D958 !important; background: rgba(231, 217, 88, 0.08) !important; } .btn-primary-yellow:focus, .btn-primary-yellow:active { color: #ede385 !important; background: rgba(225, 207, 43, 0.08) !important; box-shadow: none !important; } .btn-primary-yellow:hover { color: #e1cf2b !important; background: rgba(225, 207, 43, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary-yellow[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-info { font-weight: 600 !important; color: #8885E1 !important; background: rgba(136, 133, 225, 0.08) !important; } .btn-info:focus, .btn-info:active { color: #b0aeeb !important; background: rgba(96, 92, 215, 0.08) !important; box-shadow: none !important; } .btn-info:hover { color: #605cd7 !important; background: rgba(96, 92, 215, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-info[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary1 { font-weight: 600 !important; color: #5890E7 !important; background: rgba(88, 144, 231, 0.08) !important; } .btn-primary1:focus, .btn-primary1:active { color: #85aeed !important; background: rgba(43, 114, 225, 0.08) !important; box-shadow: none !important; } .btn-primary1:hover { color: #2b72e1 !important; background: rgba(43, 114, 225, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary1[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary2 { font-weight: 600 !important; color: #8885E1 !important; background: rgba(136, 133, 225, 0.08) !important; } .btn-primary2:focus, .btn-primary2:active { color: #b0aeeb !important; background: rgba(96, 92, 215, 0.08) !important; box-shadow: none !important; } .btn-primary2:hover { color: #605cd7 !important; background: rgba(96, 92, 215, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary2[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary3 { font-weight: 600 !important; color: #AD77D2 !important; background: rgba(173, 119, 210, 0.08) !important; } .btn-primary3:focus, .btn-primary3:active { color: #c49ddf !important; background: rgba(150, 81, 197, 0.08) !important; box-shadow: none !important; } .btn-primary3:hover { color: #9651c5 !important; background: rgba(150, 81, 197, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary3[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary4 { font-weight: 600 !important; color: #C96ABC !important; background: rgba(201, 106, 188, 0.08) !important; } .btn-primary4:focus, .btn-primary4:active { color: #d78fcd !important; background: rgba(187, 69, 171, 0.08) !important; box-shadow: none !important; } .btn-primary4:hover { color: #bb45ab !important; background: rgba(187, 69, 171, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary4[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary5 { font-weight: 600 !important; color: #DD5EA0 !important; background: rgba(221, 94, 160, 0.08) !important; } .btn-primary5:focus, .btn-primary5:active { color: #e688b9 !important; background: rgba(212, 52, 135, 0.08) !important; box-shadow: none !important; } .btn-primary5:hover { color: #d43487 !important; background: rgba(212, 52, 135, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary5[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary6 { font-weight: 600 !important; color: #E75781 !important; background: rgba(231, 87, 129, 0.08) !important; } .btn-primary6:focus, .btn-primary6:active { color: #ed84a2 !important; background: rgba(225, 42, 96, 0.08) !important; box-shadow: none !important; } .btn-primary6:hover { color: #e12a60 !important; background: rgba(225, 42, 96, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary6[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary7 { font-weight: 600 !important; color: #E75861 !important; background: rgba(231, 88, 97, 0.08) !important; } .btn-primary7:focus, .btn-primary7:active { color: #ed858b !important; background: rgba(225, 43, 55, 0.08) !important; box-shadow: none !important; } .btn-primary7:hover { color: #e12b37 !important; background: rgba(225, 43, 55, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary7[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-grayscale1 { font-weight: 600 !important; color: #FFFFFF !important; background: rgba(255, 255, 255, 0.08) !important; } .btn-grayscale1:focus, .btn-grayscale1:active { color: white !important; background: rgba(230, 230, 230, 0.08) !important; box-shadow: none !important; } .btn-grayscale1:hover { color: #e6e6e6 !important; background: rgba(230, 230, 230, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-grayscale1[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-grayscale2 { font-weight: 600 !important; color: #FAFAFA !important; background: rgba(250, 250, 250, 0.08) !important; } .btn-grayscale2:focus, .btn-grayscale2:active { color: white !important; background: rgba(225, 225, 225, 0.08) !important; box-shadow: none !important; } .btn-grayscale2:hover { color: #e1e1e1 !important; background: rgba(225, 225, 225, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-grayscale2[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-grayscale3 { font-weight: 600 !important; color: #F0F0F0 !important; background: rgba(240, 240, 240, 0.08) !important; } .btn-grayscale3:focus, .btn-grayscale3:active { color: white !important; background: rgba(214, 214, 214, 0.08) !important; box-shadow: none !important; } .btn-grayscale3:hover { color: #d6d6d6 !important; background: rgba(214, 214, 214, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-grayscale3[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-grayscale4 { font-weight: 600 !important; color: #E1E1E1 !important; background: rgba(225, 225, 225, 0.08) !important; } .btn-grayscale4:focus, .btn-grayscale4:active { color: #fbfbfb !important; background: rgba(200, 200, 200, 0.08) !important; box-shadow: none !important; } .btn-grayscale4:hover { color: #c8c8c8 !important; background: rgba(200, 200, 200, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-grayscale4[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-grayscale5 { font-weight: 600 !important; color: #CBCBCB !important; background: rgba(203, 203, 203, 0.08) !important; } .btn-grayscale5:focus, .btn-grayscale5:active { color: #e5e5e5 !important; background: rgba(178, 178, 178, 0.08) !important; box-shadow: none !important; } .btn-grayscale5:hover { color: #b2b2b2 !important; background: rgba(178, 178, 178, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-grayscale5[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-grayscale6 { font-weight: 600 !important; color: #ACACAC !important; background: rgba(172, 172, 172, 0.08) !important; } .btn-grayscale6:focus, .btn-grayscale6:active { color: #c6c6c6 !important; background: rgba(147, 147, 147, 0.08) !important; box-shadow: none !important; } .btn-grayscale6:hover { color: #939393 !important; background: rgba(147, 147, 147, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-grayscale6[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-grayscale7 { font-weight: 600 !important; color: #838383 !important; background: rgba(131, 131, 131, 0.08) !important; } .btn-grayscale7:focus, .btn-grayscale7:active { color: #9c9c9c !important; background: rgba(106, 106, 106, 0.08) !important; box-shadow: none !important; } .btn-grayscale7:hover { color: #6a6a6a !important; background: rgba(106, 106, 106, 0.08) !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-grayscale7[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary-blue-solid, .btn-primary-solid, .btn-cta-solid { font-weight: 600 !important; color: #FFFFFF !important; background: #5890E7 !important; } .btn-primary-blue-solid:focus, .btn-primary-solid:focus, .btn-cta-solid:focus, .btn-primary-blue-solid:active, .btn-primary-solid:active, .btn-cta-solid:active { color: white !important; background: #2b72e1 !important; box-shadow: none !important; } .btn-primary-blue-solid:hover, .btn-primary-solid:hover, .btn-cta-solid:hover { color: #e6e6e6 !important; background: #2b72e1 !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary-blue-solid[disabled], [disabled].btn-primary-solid, [disabled].btn-cta-solid { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary-purple-solid { font-weight: 600 !important; color: #FFFFFF !important; background: #AD77D2 !important; } .btn-primary-purple-solid:focus, .btn-primary-purple-solid:active { color: white !important; background: #9651c5 !important; box-shadow: none !important; } .btn-primary-purple-solid:hover { color: #e6e6e6 !important; background: #9651c5 !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary-purple-solid[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary-red-solid, .btn-danger-solid { font-weight: 600 !important; color: #FFFFFF !important; background: #E75861 !important; } .btn-primary-red-solid:focus, .btn-danger-solid:focus, .btn-primary-red-solid:active, .btn-danger-solid:active { color: white !important; background: #e12b37 !important; box-shadow: none !important; } .btn-primary-red-solid:hover, .btn-danger-solid:hover { color: #e6e6e6 !important; background: #e12b37 !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary-red-solid[disabled], [disabled].btn-danger-solid { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary-orange-solid, .btn-warning-solid { font-weight: 600 !important; color: rgba(36, 41, 46, 0.7) !important; background: #E7B558 !important; } .btn-primary-orange-solid:focus, .btn-warning-solid:focus, .btn-primary-orange-solid:active, .btn-warning-solid:active { color: rgba(58, 67, 75, 0.7) !important; background: #e1a12b !important; box-shadow: none !important; } .btn-primary-orange-solid:hover, .btn-warning-solid:hover { color: rgba(14, 16, 17, 0.7) !important; background: #e1a12b !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary-orange-solid[disabled], [disabled].btn-warning-solid { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary-purple-solid { font-weight: 600 !important; color: #FFFFFF !important; background: #AD77D2 !important; } .btn-primary-purple-solid:focus, .btn-primary-purple-solid:active { color: white !important; background: #9651c5 !important; box-shadow: none !important; } .btn-primary-purple-solid:hover { color: #e6e6e6 !important; background: #9651c5 !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary-purple-solid[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary-green-solid, .btn-success-solid { font-weight: 600 !important; color: rgba(36, 41, 46, 0.7) !important; background: #58e797 !important; } .btn-primary-green-solid:focus, .btn-success-solid:focus, .btn-primary-green-solid:active, .btn-success-solid:active { color: rgba(58, 67, 75, 0.7) !important; background: #2be17b !important; box-shadow: none !important; } .btn-primary-green-solid:hover, .btn-success-solid:hover { color: rgba(14, 16, 17, 0.7) !important; background: #2be17b !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary-green-solid[disabled], [disabled].btn-success-solid { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary-yellow-solid { font-weight: 600 !important; color: rgba(36, 41, 46, 0.7) !important; background: #E7D958 !important; } .btn-primary-yellow-solid:focus, .btn-primary-yellow-solid:active { color: rgba(58, 67, 75, 0.7) !important; background: #e1cf2b !important; box-shadow: none !important; } .btn-primary-yellow-solid:hover { color: rgba(14, 16, 17, 0.7) !important; background: #e1cf2b !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary-yellow-solid[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-info-solid { font-weight: 600 !important; color: #FFFFFF !important; background: #8885E1 !important; } .btn-info-solid:focus, .btn-info-solid:active { color: white !important; background: #605cd7 !important; box-shadow: none !important; } .btn-info-solid:hover { color: #e6e6e6 !important; background: #605cd7 !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-info-solid[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary1-solid { font-weight: 600 !important; color: #FFFFFF !important; background: #5890E7 !important; } .btn-primary1-solid:focus, .btn-primary1-solid:active { color: white !important; background: #2b72e1 !important; box-shadow: none !important; } .btn-primary1-solid:hover { color: #e6e6e6 !important; background: #2b72e1 !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary1-solid[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary2-solid { font-weight: 600 !important; color: #FFFFFF !important; background: #8885E1 !important; } .btn-primary2-solid:focus, .btn-primary2-solid:active { color: white !important; background: #605cd7 !important; box-shadow: none !important; } .btn-primary2-solid:hover { color: #e6e6e6 !important; background: #605cd7 !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary2-solid[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary3-solid { font-weight: 600 !important; color: #FFFFFF !important; background: #AD77D2 !important; } .btn-primary3-solid:focus, .btn-primary3-solid:active { color: white !important; background: #9651c5 !important; box-shadow: none !important; } .btn-primary3-solid:hover { color: #e6e6e6 !important; background: #9651c5 !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary3-solid[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary4-solid { font-weight: 600 !important; color: #FFFFFF !important; background: #C96ABC !important; } .btn-primary4-solid:focus, .btn-primary4-solid:active { color: white !important; background: #bb45ab !important; box-shadow: none !important; } .btn-primary4-solid:hover { color: #e6e6e6 !important; background: #bb45ab !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary4-solid[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary5-solid { font-weight: 600 !important; color: #FFFFFF !important; background: #DD5EA0 !important; } .btn-primary5-solid:focus, .btn-primary5-solid:active { color: white !important; background: #d43487 !important; box-shadow: none !important; } .btn-primary5-solid:hover { color: #e6e6e6 !important; background: #d43487 !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary5-solid[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary6-solid { font-weight: 600 !important; color: #FFFFFF !important; background: #E75781 !important; } .btn-primary6-solid:focus, .btn-primary6-solid:active { color: white !important; background: #e12a60 !important; box-shadow: none !important; } .btn-primary6-solid:hover { color: #e6e6e6 !important; background: #e12a60 !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary6-solid[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-primary7-solid { font-weight: 600 !important; color: #FFFFFF !important; background: #E75861 !important; } .btn-primary7-solid:focus, .btn-primary7-solid:active { color: white !important; background: #e12b37 !important; box-shadow: none !important; } .btn-primary7-solid:hover { color: #e6e6e6 !important; background: #e12b37 !important; box-shadow: 0 8px 16px 0 rgba(28, 28, 28, 0.12) !important; } .btn-primary7-solid[disabled] { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } .btn-back { font-weight: 500 !important; font-size: 0.75rem; display: inline-block; padding: 5px; text-transform: uppercase; } .btn-back:before { content: "➔"; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); display: inline-block; margin-right: 5px; margin-left: -3px; position: relative; top: 1px; } .btn-forward { font-weight: 500 !important; display: inline-block; text-transform: uppercase; } .btn-forward:after { content: "➔"; display: inline-block; margin-left: 5px; margin-right: -3px; position: relative; top: -1px; } .btn-expand { font-weight: 500 !important; display: inline-block; padding: 5px; text-transform: uppercase; } .btn-expand:after { content: "▼"; display: inline-block; margin-left: 5px; margin-right: -3px; position: relative; } .btn-expand.expanded:after { content: "▲"; } .max-width-700 { max-width: 700px; } .max-width-800 { max-width: 800px; } .max-width-960 { max-width: 960px; } .margin-0-auto { margin: 0 auto; } @media (max-width: 768px) { .testimonial-card { background: none; } .testimonial-card .text-white { color: var(--black); } } .masonry { -webkit-column-count: 2; /*4*/ -moz-column-count:2; /*4*/ column-count: 2; /*4*/ -webkit-column-gap: 1em; -moz-column-gap: 1em; column-gap: 1em; margin: 1.5em; margin-bottom: 20px; padding: 0; -moz-column-gap: 1.5em; -webkit-column-gap: 1.5em; column-gap: 1.5em; font-size: .85em; } .masonry.masonry-3 { -webkit-column-count: 3; /*4*/ -moz-column-count:3; /*4*/ column-count: 3; /*4*/ } .masonry .card { display: inline-block; margin: 0 0 1.5em; width: 100%; -webkit-transition:1s ease all; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-shadow: var(--z-shadow-1); -webkit-box-shadow: var(--z-shadow-1); -moz-box-shadow: var(--z-shadow-1); border: none; outline: none; } @media only screen and (min-width: 1201px) { .masonry { -moz-column-count: 2; /*4*/ -webkit-column-count: 2; /*4*/ column-count: 2; /*4*/ } .masonry.masonry-3 { -webkit-column-count: 3; /*4*/ -moz-column-count:3; /*4*/ column-count: 3; /*4*/ } } @media only screen and (min-width: 769px) and (max-width: 1200px){ .masonry { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } .masonry.masonry-3 { -webkit-column-count: 2; /*4*/ -moz-column-count:2; /*4*/ column-count: 2; /*4*/ } } @media only screen and (max-width: 768px){ .masonry { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; } } @media only screen and (max-width: 469px) { .masonry { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; } .masonry.masonry-3 { -webkit-column-count: 1; /*4*/ -moz-column-count:1; /*4*/ column-count: 1; /*4*/ } } .reward-types-section { } .reward-types-section .reward-types-section-inner { max-width: 800px; margin: 0 auto; } .reward-types-section .active-list-card { box-shadow: var(--z-shadow-1); -webkit-box-shadow: var(--z-shadow-1); -moz-box-shadow: var(--z-shadow-1); display: flex; align-items: stretch; border: 3px solid transparent; background: #FFFFFF; position: relative; font-weight: 400; background-clip: padding-box; border-radius: 8px; } .reward-types-section .active-list-card + .active-list-card { margin-top: 20px; } .reward-types-section .active-list-card-title-and-description { background: #FAFAFA; color: #1C1C1C; min-width: 360px; max-width: 360px; margin: -2px 0 -3px -3px; border-radius: 8px 0 0 8px; padding: 30px; } .reward-types-section .active-list-card-title-and-description p { /*line-height: var(--line-height-regular);*/ margin-bottom: 0; } .reward-types-section .active-list-card .active-list-card-examples-label { color: #ACACAC; cursor: pointer; text-transform: uppercase; position: absolute; left: calc(360px + 3px); left: -webkit-calc(360px + 3px); left: -moz-calc(360px + 3px); margin-left: 20px; margin-top: 0; top: 30px; margin-bottom: 5px; font-size: 0.75rem; font-weight: 500; display: block; } .reward-types-section .active-list-card .active-list-card-content { margin-top: 25px; width: calc(100% - 360px); padding: 30px; } .reward-types-section .reward-examples { display: flex; flex-wrap: wrap; } .reward-examples .reward-example { margin: 10px 0 20px 0; padding-left: 0; } .reward-examples .reward-example img { max-height: 15px; margin-bottom: 10px; } .reward-examples .reward-example p { font-size: 0.75rem; color: #515151; margin-bottom: 0; } @media only screen and (max-width: 767px) { .reward-types-section .active-list-card-title-and-description { min-width: initial; max-width: initial; width: calc(100% + 3px + 3px); width: -moz-calc(100% + 3px + 3px); width: -webkit-calc(100% + 3px + 3px); border-radius: 8px 8px 0 0; padding: 15px; } .reward-types-section .active-list-card .active-list-card-content { width: 100%; padding: 0 15px; margin-top: 10px; margin-bottom: 10px; } .reward-examples .reward-example { padding-right: 0; } .reward-types-section .active-list-card { display: block; } .reward-types-section .active-list-card .active-list-card-examples-label { position: relative; left: 0; margin-left: 15px; top: 0; margin-top: 20px; margin-bottom: 0; } } .line-height-small { line-height: var(--line-height-small); } .line-height-regular { line-height: var(--line-height-regular); } .display-block { display: block; } .bg-primary-light-opaque { background-color: rgba(88, 144, 231, 0.08); } .features-container .icon-inline { width: 40px; height: 40px; } .features-container .icon-inline:before { position: absolute; content: ''; height: 50px; width: 50px; z-index: 1; left: 22.5px; top: 5px; -webkit-mask-box-image-outset: fill; transform: scale(0.5); -webkit-transform-origin: center center; transform-origin: center center; } .ic-link:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/54c869ab-8ac3-4b57-8aa0-8d3fe8e4e5c6.svg) right bottom no-repeat; } .ic-html:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/7e7fd648-3947-490d-ae5a-460104b7d791.svg) right bottom no-repeat; } .ic-premium-whitelabel:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/e70449c5-8985-44a5-86f3-da41056e2ea4.svg) right bottom no-repeat; } .ic-domain:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/1a7d5d05-b80b-45da-8818-d9105e255a54.svg) right bottom no-repeat; } .ic-social-share:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/36b9a1ac-5154-4370-9614-3e6528f7ed39.svg) right bottom no-repeat; } .ic-premium-webhooks:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/29f58f2d-0201-4512-a303-9f8c7c813f96.svg) right bottom no-repeat; } .ic-trophy:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/1ef5624e-f3dd-485b-baf5-8b34476cba8d.svg) right bottom no-repeat; } .ic-reward:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/ef12dc7b-daf1-4424-b540-a48e7fe9555e.svg) right bottom no-repeat; } .ic-mobile-friendly:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/d22fdbbf-92df-4b30-9fb5-ff5900068d27.svg) right bottom no-repeat; } .ic-contacts:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/1925c276-b736-4505-8060-8d8143859034.svg) right bottom no-repeat; } .ic-no-coding-required:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/4465df04-e414-4001-8f72-7a7c28743095.svg) right bottom no-repeat; } .ic-rocket:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/21999ec8-5667-4727-b4d8-f3483a16809c.svg) right bottom no-repeat; } .ic-notification:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/1a34dacb-fdc2-4baf-a9c6-5e861e9a82a0.svg) right bottom no-repeat; } .ic-key:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/ae8bb0ba-4cca-49b7-95fa-706fcb2b8b38.svg) right bottom no-repeat; } .ic-localization:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/bd24043d-b6b5-47e4-acb3-f0d0efb3906b.svg) right bottom no-repeat; } .ic-analytics:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/f7865687-f94b-452f-af8f-c5366d788f5f.svg) right bottom no-repeat; } .ic-premium-contact-import:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/ca40054b-5c55-448b-ac64-9f6610b44a09.svg) right bottom no-repeat; } .ic-identity:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/2345f4ad-118a-4b35-8805-bfd44917efbd.svg) right bottom no-repeat; } .ic-offline:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/e8bafb30-eda1-4bfc-a470-596350408643.svg) right bottom no-repeat; } .ic-palette:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/b680a381-1c90-43aa-a6bb-e7eef61c1fe0.svg) right bottom no-repeat; } .ic-whitelabel:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/47d00df6-4e70-41b7-ab0c-052089d57986.svg) right bottom no-repeat; } .ic-status-widget:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/6dfe7052-86be-4618-a109-65e244cf4f24.svg) right bottom no-repeat; } .ic-stopwatch:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/15691039-7252-46c7-9c9e-94472423b5b3.svg) right bottom no-repeat; } .ic-support:before { background: url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/74980570-e92c-44a8-bc48-228813818327.svg) right bottom no-repeat; } .grayscale2 { background: var(--grayscale2); } .integrations-container div[data-toggle="tooltip"] > img { max-width: 50px; } .integrations-container { overflow: auto; } .cursor-pointer { cursor: pointer; } .testimonials-container .testimonial-logo { max-width: 120px; height: auto; } .testimonials-container .testimonial-logo[alt="Willful"] { max-width: 80px; } .testimonials-container .testimonial-logo[alt="EvenFi"] { max-width: 80px; } .testimonials-container .testimonial-logo[alt="Charlie Finance"] { max-width: 80px; } .testimonials-container .testimonial-logo[alt="IMGN Media"] { max-width: 70px; } .testimonials-container .testimonial-logo[alt="Volumio"] { max-width: 110px; } .customer-blockquote { font-size: 1rem; } .cta-text-under-btn { font-size: 1rem; font-weight: 350; max-width: 400px; margin: 0 auto; margin-top: 10px; } .browser-mockup-container { position: relative } .browser-mockup-container .browser-mockup { border-top: 2em solid rgba(225, 225, 225, 0.4); /*box-shadow: 0 12px 20px 0 rgba(0, 0, 0, 0.18);*/ position: relative; background-clip: padding-box; border-radius: 3px 3px 0 0; } .browser-mockup-container .browser-mockup:before { display: block; position: absolute; content: ''; top: -1.25em; left: 1em; width: 0.5em; height: 0.5em; background-clip: padding-box; border-radius: 50%; background: #FF5F57; box-shadow: 0 0 0 2px #FF5F57, 1.5em 0 0 2px #FFBD2E, 3em 0 0 2px #28C940; } .browser-mockup-container .browser-mockup .browser-content { background: #FFFFFF; position: relative; overflow-y: hidden; height: calc(100vh - 10px - 2em - 85px - 128px - 30px); min-height: calc(100vh - 10px - 2em - 85px - 128px - 30px); } .browser-mockup-container .browser-mockup:after { content: ''; position: absolute; width: 100%; border-top: 1px solid #E1E1E1; top: 0; z-index: 1; display: none } .preview-content .wistia_embed > div { border-radius: 0 0 3px 3px; } .browser-mockup-container .preview-content { background: var(--black); top: 2em; overflow-y: hidden; position: absolute; -webkit-transform-origin: 0 0; transform-origin: 0 0; width: 100%; -webkit-transform: scale(1); transform: scale(1); height: calc(100% - 2em); min-height: calc(100% - 2em); } .browser-mockup-container .preview-content .design-preview-container { height: 100%; width: 100%; overflow: auto; } .dropdown-item.growsurf-label:hover { background-color: initial; color: var(--grayscale7); } .growsurf-dropdown-menu { padding: 1rem 0; box-shadow: var(--z-shadow-5); border: none; } .growsurf-dropdown-menu .dropdown-item.growsurf-label { padding-bottom: 0; } .growsurf-dropdown-menu-fixed-width .dropdown-item { min-width: 280px; } .growsurf-dropdown-menu .dropdown-item.active, .growsurf-dropdown-menu .dropdown-item:active { color: var(--black); background-color: #f8f9fa !important; } .growsurf-dropdown-menu2 .dropdown-item { padding: 2px 1.5rem; } .growsurf-dropdown-menu2 .dropdown-item small { white-space: initial; display: block; margin-top: 5px; margin-bottom: 5px; line-height: var(--line-height-regular); font-size: var(--font-size-small); } .card1 { box-shadow: var(--z-shadow-1); } .card2 { box-shadow: var(--z-shadow-2); } .card3 { box-shadow: var(--z-shadow-3); } .card4 { box-shadow: var(--z-shadow-4); } .card5 { box-shadow: var(--z-shadow-5); } .product-tour { margin: 0 auto; } .product-tour .product-tour-inner { max-width: none; margin: 0 auto; } .product-tour .feature { padding: 45px 0; } .product-tour .feature:nth-child(odd) .feature-inner .features-img-block { order: -1; } .product-tour .product-tour-inner .feature .feature-inner { margin: 0 auto; max-width: 1200px; display: flex; align-items: center; justify-content: space-around; } .product-tour .product-tour-inner .feature .feature-inner .features-img-block { max-width: 500px; } .product-tour .product-tour-inner .feature .feature-inner .features-text-block { padding: 20px; flex-grow: 1; max-width: 500px; } .product-tour .product-tour-inner .feature .feature-inner .features-text-block .features-text-block-title { font-size: 1.777rem; margin-bottom: 20px; font-weight: 500; } .product-tour .product-tour-inner .feature .feature-inner .features-text-block .features-text-block-description * { font-weight: 350; } @media only screen and (max-width: 991.98px) { .product-tour .product-tour-inner .feature .feature-inner { flex-direction: column; } .product-tour .product-tour-inner .feature .feature-inner .features-img-block { order: -1 !important; max-width: 500px; margin-bottom: 20px; } .product-tour .product-tour-inner .feature .feature-inner .features-text-block { padding: 0; } } .growsurf-website-section { margin: 0 auto; text-align: center; max-width: 960px; position: relative; } .growsurf-website-section h1, .growsurf-website-section .h1, .growsurf-website-section .headline { font-size: -webkit-calc(4rem); font-size: calc(4rem); font-family: var(--font-family); font-weight: var(--font-weight-bold); line-height: var(--line-height-small); letter-spacing: normal; } @media only screen and (max-width: 1200px) { .growsurf-website-section h1, .growsurf-website-section .h1, .growsurf-website-section .headline { font-size: 2.5rem; } } .growsurf-website-section h2, .growsurf-website-section .subheadline { max-width: 800px; margin: 0 auto; margin-top: 2rem!important; margin-bottom: 2rem!important; font-size: 1.25rem; font-weight: 300; line-height: 1.6; } /*.growsurf-website-section-decoration {*/ /* content: '';*/ /* background: var(--white);*/ /* height: 300px;*/ /* width: 200px;*/ /* left: -150px;*/ /* z-index: -1;*/ /* display: block;*/ /* position: absolute;*/ /* opacity: 1.00;*/ /* margin-top: 80px;*/ /*}*/ /*.growsurf-website-section-decoration:before {*/ /* content: '';*/ /* background-image: radial-gradient(circle at 1px 1px, var(--blue) 1px, transparent 0);*/ /* background-size: 15px 15px;*/ /* opacity: 0.7;*/ /* height: 300px;*/ /* width: 200px;*/ /* z-index: -3;*/ /* display: block;*/ /* position: absolute;*/ /* -webkit-transform: rotate(15deg);*/ /* -ms-transform: rotate(15deg);*/ /* transform: rotate(15deg);*/ /* left: -35px;*/ /* top: -90px;*/ /*}*/ /*.growsurf-website-section-decoration:after {*/ /* content: '';*/ /* background: var(--blue);*/ /* height: 300px;*/ /* width: 200px;*/ /* left: -20px;*/ /* z-index: -2;*/ /* display: block;*/ /* position: absolute;*/ /* -webkit-transform: rotate(12deg);*/ /* -ms-transform: rotate(12deg);*/ /* transform: rotate(12deg);*/ /* top: -40px;*/ /* opacity: 0.08;*/ /* border-radius: 1rem;*/ /*}*/ /*.growsurf-website-section-decoration.decoration2 {*/ /* right: -120px;*/ /* left: initial;*/ /* margin-top: 120px;*/ /*}*/ /*.growsurf-website-section-decoration.decoration2:before {*/ /* right: -35px;*/ /* left: initial;*/ /* -webkit-transform: rotate(-10deg);*/ /* -ms-transform: rotate(-10deg);*/ /* transform: rotate(-10deg);*/ /*}*/ /*.growsurf-website-section-decoration.decoration2:after {*/ /* right: -20px;*/ /* left: initial;*/ /* top: 120px;*/ /* -webkit-transform: rotate(-15deg);*/ /* -ms-transform: rotate(-15deg);*/ /* transform: rotate(-15deg);*/ /*}*/ /*@media (max-width: 768px) {*/ /* .growsurf-website-section-decoration {*/ /* display: none;*/ /* }*/ /*}*/ /*.growsurf-website-section-decoration.reverse {*/ /* -webkit-transform: scale(-1,1);*/ /* -ms-transform: scale(-1,1);*/ /* transform: scale(-1,1);*/ /*}*/ nav.topnav.active { box-shadow: var(--z-shadow-1); -webkit-box-shadow: var(--z-shadow-1); transition: all 0.3s; } .ancillary-benefits-icon { background: rgba(88, 144, 231, 0.08); display: inline-block; padding: 20px; border-radius: 100%; } .testimonials-container-embedded .masonry { display: flex } .add-on-services-embedded .masonry { display: flex; } .single-testimonial .masonry { display: flex; justify-content: center; column-count: 1; -webkit-column-count: 1; margin: 0 auto; } .single-testimonial .masonry .card { display: flex; max-width: 800px; } .testimonials-container-embedded .masonry .card { /*box-shadow: none;*/ /*-webkit-box-shadow: none;*/ } @media (max-width: 768px) { .testimonials-container-embedded .masonry { flex-direction: column; } .add-on-services-embedded .masonry { flex-direction: column; } } .case-study-internal-link { padding: 1rem 1.5rem; margin-left: -1.5rem; background: rgba(88, 144, 231, 0.08); margin-right: -1.5rem; margin-bottom: -1.5rem; display: block; } .denoted-comment { font-size: 0.9rem; } .form-control { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.06); -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.06); transition: all 0.3s; border: none; padding: .45rem 10px; } .form-control.form-control-no-shadow { box-shadow: none; } .form-control.form-control-border { border: 1px solid var(--grayscale4) !important; } .form-control.form-control-border:hover, .form-control.form-control-border:focus, .form-control.form-control-border:active { border: 1px solid transparent; } .form-control:hover, .form-control:focus, .form-control:active { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12); -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12); transition: all 0.3s; } .form-control.form-control-no-shadow:hover, .form-control.form-control-no-shadow:focus, .form-control.form-control-no-shadow:active { border: 1px solid transparent; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12); -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12); transition: all 0.3s; } .grayscale3 { background: var(--grayscale3); } .grayscale2 { background: var(--grayscale2); } .white { background: var(--white); } .form-control-lg { padding-left: 1rem; padding-right: 1rem; } .form-inline-signup-email { align-items: center; justify-content: center; flex-wrap: nowrap; } .form-inline-signup-email .form-control[name="email"] { border-radius: 3px 0 0 3px; border: 1px solid transparent; } .form-inline-signup-email .btn { line-height: initial; border-radius: 0 3px 3px 0; white-space: nowrap; } .form-group { margin-bottom: 0; } @media (max-width: 1199px) { nav.navbar .form-inline-signup-email { flex-flow: row; } nav.navbar .form-inline-signup-email .btn { min-width: fit-content; } } @media (max-width: 991.98px) { nav.navbar .form-inline-signup-email { flex: initial; } nav.navbar .form-inline-signup-email .btn { min-width: initial; } } .legal-page p { margin-bottom: 0; } .pricing-table-container .pricing-header { position: -webkit-sticky; position: sticky; top: 90px; min-width: 277px ; max-width: 300px; background: var(--white); text-align: left !important; z-index: 3; font-size: 1.2rem; padding-top: 20px; } .pricing-table-container .pricing-header2 { min-width: 277px ; max-width: 300px; background: var(--white); text-align: left !important; z-index: 3; font-size: 1.2rem; position: relative; } .pricing-table-container { line-height: var(--line-height-regular); /*margin-top: 3rem;*/ } .pricing-table-container .table > tbody > tr { line-height: var(--line-height-regular); } .pricing-table-container .table > tbody > tr:nth-child(1) { /*border-bottom: 1px solid #dee2e6;*/ margin-bottom: 0; } .pricing-table-container .pricing-header h2 { font-size: var(--font-size-p); } .pricing-plan-main-card { padding: 20px; } ul.pricing-plan-main-card-features-list { padding-left: 30px; padding-top: 30px; border-top: 1px solid var(--gray-light); margin-top: 10px; } ul.pricing-plan-main-card-features-list li { list-style-type: none; position: relative; margin-bottom: 5px; } ul.pricing-plan-main-card-features-list li:before { content: "\f00c"; /* Check icon */ font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: -30px; /* Adjust this to move the icon closer or further from the text */ color: var(--blue); } .pricing-plan-main-card .yearly-savings { position: absolute; top: 0; right: 0; font-size: small; color: var(--blue); padding: 2px 6px; border-radius: 12px; font-weight: bold; outline: 1px solid var(--blue); } .pricing-plan-main-card .yearly-savings .savings { font-weight: bold; } .pricing-plan-main-card .yearly-total { font-size: x-small; position: absolute; color: var(--gray-dark); } .pricing-plan-main-card .billed-monthly { font-size: x-small; position: absolute; color: var(--gray-dark); margin-top: 8px; } .pricing-plan-title { font-size: 1.5rem !important; font-weight: var(--font-weight-bold); } .pricing-table-container .pricing-header .form-control { max-width: 300px; } .pricing-table-container .pricing-header-input-container { position: relative; } .pricing-table-container .table th[scope="row"] { text-align: left; max-width: 300px; padding: .5rem .75rem; z-index: 1; background: var(--white); } @media (max-width: 991.98px) { .hide-on-tablet { display: none; } .pricing-table-container { overflow-y: auto; } .pricing-table-container .pricing-header { top: 0 !important; } .pricing-table-container .table th[scope="row"] { /* position: sticky; position: -webkit-sticky; left: 0; */ } img[alt="Get 2 months free with a Yearly plan"] { margin-left: initial !important; } } .faq-section .faq-block h4 { font-size: var(--font-size-p); } .faq-section .faq-block { font-size: var(--font-size-p); margin: 1rem 0; margin-bottom: 0; } .faq-section .faq-block div > p { margin-bottom: 1rem; } .ref-aff-pricing-toggle-button { color: var(--grayscale4); border-radius: 0 3px 3px 0; /*min-width: 140px;*/ } .ref-aff-pricing-toggle-button.planactive { background: var(--blue) !important; color: var(--white) !important; border: 2px solid var(--blue); } .ref-aff-pricing-toggle-button { color: var(--grayscale7) !important; border: 2px solid var(--grayscale4); } .pricing-toggle-button { color: var(--grayscale4); border-radius: 0 3px 3px 0; /*min-width: 140px;*/ } .pricing-toggle-button.planactive { background: var(--blue) !important; color: var(--white) !important; border: 2px solid var(--blue); } .pricing-toggle-button { color: var(--grayscale7) !important; border: 2px solid var(--grayscale4); } .pricing-plan-cta-button { width: 100%; max-width: 300px; } .pricing-feature-separator-row { /*background: var(--grayscale2); */ font-weight: var(--font-weight-bold); color: var(--black); font-size: 1.2rem; padding-top: 2rem !important; padding-bottom: 1rem !important; } .pricing-table-container .fa.fa-check { color: var(--blue); } .pricing-table-container .fa.fa-times { opacity: 0.2; } .pricing-table-container.compare-competitors-table-container .fa.fa-times { opacity: 1 } .compare-gs-growsurf { background: rgba(43,114,225,.08) !important; } .pricing-plan-cta-button-container { margin-bottom: 0; /*display: none;*/ } .pricing-table-container .table > tbody > tr:nth-child(2) > th, .pricing-table-container .table > tbody > tr:nth-child(2) > td { /*border-top: none !important;*/ } .pricing-plan-features-summary { line-height: var(--line-height-large); padding: 1rem 0; /*border-bottom: 1px solid #dee2e6 !important;*/ } .pricing-header .lead { margin-left: -3px; color: var(--grayscale8); } .pricing-start-here-tag::before { content: "↓ Start here and auto-scale as you go"; position: absolute; font-size: x-small; top: 1px; background: var(--grayscale2); color: var(--grayscale8); padding: 3px 10px; border-radius: 10px 10px 0 0; border-top: 1px solid var(--grayscale4); border-left: 1px solid var(--grayscale4); border-right: 1px solid var(--grayscale4); box-shadow: var(--z-shadow-1); } .pricing-table-container.collapse:not(.show) { max-height: 610px; display: block; overflow-y: hidden; } .pricing-table-container.collapse:not(.show) .pricing-header { top: initial; } .pricing-table-container.collapse.show { margin-bottom: 100px; /* height of the .toggle-full-pricing-features-table:before */ } .toggle-full-pricing-features-table { z-index: 2; text-align: center; position: sticky; position: -webkit-sticky; left: 0; right: 0; bottom: 0; margin-bottom: -10px; padding-bottom: 10px; } .toggle-full-pricing-features-table > a:after { content: '↓' !important; margin-left: 5px; } .toggle-full-pricing-features-table > a.collapsed:after { content: '↑' !important; margin-left: 5px; } .toggle-full-pricing-features-table:before { content: ""; position: absolute; z-index: 1; bottom: 0; left: 0; pointer-events: none; background-image: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255, 1) 90%); width: 100%; height: 100px; } .toggle-full-pricing-features-table a { z-index: 2; position: relative; } .share-icons { position: fixed; top: 30%; left: 15px; z-index: 1000; } .border-w-2px { border-width: 2px !important; } .alert-success > p { margin-bottom: 0; } .generic-section { margin: 0 auto; } .generic-section .generic-section-inner { max-width: none; margin: 0 auto; } .generic-section .feature { padding: 45px 0; } .generic-section .feature:nth-child(odd) .feature-inner .features-img-block { order: -1; } .generic-section .generic-section-inner .feature .feature-inner { margin: 0 auto; max-width: 1200px; display: flex; align-items: center; justify-content: space-around; } .generic-section .generic-section-inner .feature .feature-inner .features-img-block { max-width: 500px; } .generic-section .generic-section-inner .feature .feature-inner .features-text-block { padding: 20px; flex-grow: 1; max-width: 500px; } .generic-section .generic-section-inner .feature .feature-inner .features-text-block .features-text-block-title { font-size: 1.777rem; margin-bottom: 20px; font-weight: 500; } .generic-section .generic-section-inner .feature .feature-inner .features-text-block .features-text-block-description * { font-weight: 350; } @media only screen and (max-width: 991.98px) { .generic-section .generic-section-inner .feature .feature-inner { flex-direction: column; } .generic-section .generic-section-inner .feature .feature-inner .features-img-block { order: -1 !important; max-width: 500px; margin-bottom: 20px; } .generic-section .generic-section-inner .feature .feature-inner .features-text-block { padding: 0; } } .top-25 {top: 25%!important}html{scroll-behavior: smooth;}[data-toggle="modal"] {cursor: pointer;} .integration-page-image { width: 100%; max-width: 100px; } .view-all-integrations { margin-top: -2rem; padding-bottom: 3rem; } .view-all-integrations .container { padding-left: 15px; } @media (max-width: 768px) { .view-all-integrations { margin-top: -2rem; padding-bottom: 2rem; } .view-all-integrations .container { padding-left: 0; } } @media (max-width: 576px) { .view-all-integrations { margin-top: -2rem; padding-bottom: 3rem; } .view-all-integrations .container { padding-left: 15px; } } .black-text { color: var(--black); } .hide { display: none; } .landing-page-section .landing-hero-section { border-bottom: none } canvas{ -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; } .chartjs-container { max-width: 1140px; width: 100%; margin: 0 auto; display: block; padding-right: 15px; padding-left: 15px; } @-webkit-keyframes loading-progress { 0% { left: 0; transform: translateX(-100%); } 100% { left: 100%; transform: translateX(0%); } } @-moz-keyframes loading-progress { 0% { left: 0; transform: translateX(-100%); } 100% { left: 100%; transform: translateX(0%); } } @-ms-keyframes loading-progress { 0% { left: 0; transform: translateX(-100%); } 100% { left: 100%; transform: translateX(0%); } } @keyframes loading-progress { 0% { left: 0; transform: translateX(-100%); } 100% { left: 100%; transform: translateX(0%); } } .badge { padding: 3px 7px !important; line-height: 1.45; border-radius: 12px; background: var(--blue); color: var(--white); } .badge-black { background: var(--black); color: var(--white); } .badge-in-open-page { background: var(--blue); font-size: var(--font-size-small); margin-left: 4px; line-height: var(--line-height-regular); } .open-goal { width: 100%; position: relative; } .open-goal .open-goal-top { text-align: left; margin-bottom: 5px; } .open-goal .open-goal-progress-bottom { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; } .open-goal .open-goal-progress-bar { position: relative; max-width: 100%; z-index: 3; height: 10px; background: #5890E7; margin-bottom: 5px; overflow: hidden; } .open-goal .open-goal-progress-bar.goal-achieved { background: var(--blue); } .open-goal .open-goal-progress-bar.goal-achieved:after { display: none; } .open-goal .open-goal-progress-bar:after { z-index: 4; -webkit-animation: loading-progress 2s infinite ease-in-out; animation: loading-progress 2s infinite ease-in-out; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; content: ''; position: absolute; height: 100%; width: 30%; top: 0; opacity: 0.4; background: var(--purple); } .open-goal .open-goal-progress-bar-background { content: ''; position: absolute; left: 0; right: 0; z-index: 2; height: 10px; width: 100%; border: 1px solid var(--grayscale4); overflow: hidden; } *[data-grsf-metric] { font-weight: bold } .open-announcement-banner-container { margin-bottom: 10px; padding: 10px; width: 100%; background: #515151; position: sticky; z-index: 10; max-width: 400px; margin: 0 auto; font-size: small; width: fit-content; border-radius: 200px; padding: 10px 15px; top: 82px; margin-top: 20px; display: flex; align-items: center; justify-content: center; text-align: center; } .open-announcement-banner-container a { color: white; } .open-announcement-banner-inner { padding: 0; display: flex; align-items: center; justify-content: center; margin: 0 auto; } @media (max-width: 469px) { .open-announcement-banner-container { position: relative; top: 0 } .hide-on-mobile { display: none; } } .tooltip { z-index: 99999; } .pricing-modal-window { position: fixed; background-color: rgba(0,0,0,.8); top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; visibility: hidden; opacity: 0; pointer-events: none; transition: all 0.3s; overflow: scroll; } .pricing-modal-window .pricing-table-container .pricing-header { top: 0; max-width: 200px; } .pricing-modal-window .pricing-table-container .pricing-header .form-control { max-width: none; } .pricing-modal-window .pricing-plan-cta-button { max-width: none; } .pricing-modal-window:target { visibility: visible; opacity: 1; pointer-events: auto; } .pricing-modal-window-inner { width: 100%; padding: var(--space-20); background: var(--white); } .pricing-modal-close { box-shadow: var(--z-shadow-2); color: var(--grayscale7); position: fixed; right: var(--space-10); text-align: right; top: var(--space-10); text-decoration: none; z-index: 10; background: var(--white); padding: 3px 10px; border-radius: 12px; } .team-avatars-on-open-page { white-space: nowrap; overflow: auto } .feature-block-logo-section { /*display: flex;*/ } .feature-block-logo-section .feature-block-logo-section-label { display: inline-block; margin-right: 10px; margin-bottom: 10px; } .feature-block-logo-section .feature-block-logo-section-logos-and-texts { display: flex; flex-direction: column; } .feature-block-logo-section .feature-block-logo-section-logos-and-texts .feature-block-logo-section-logo-and-text { margin-right: 10px; margin-bottom: 10px; display: flex; align-items: center; } .feature-block-logo-section .feature-block-logo { max-width: 20px; margin-right: 10px; max-height: fit-content; } @media only screen and (max-width: 768px){ .feature-block-logo-section { flex-direction: column; align-items: flex-start; } .feature-block-logo-section .feature-block-logo-section-label { margin-bottom: 10px; } } .growsurf-popup-intent-modal { } .growsurf-popup-intent-modal .modal-content { padding: var(--space-20); border: none; max-width: 460px; box-shadow: var(--z-shadow-5); margin: 0 auto; margin-top: 5%; border-radius: var(--border-radius-large); } .growsurf-popup-intent-modal .modal-content .modal-exit-button { position: absolute; right: var(--space-5); top: 0; padding: var(--space-10); opacity: 0.5; transition: 0.3s; cursor: pointer; } .growsurf-popup-intent-modal .modal-content .modal-exit-button:hover { opacity: 1.0; transition: 0.3s; } .ouibounce-modal-backdrop { opacity: 0.7; } /* Multi-Part CSS */ .growsurf-popup-intent-modal input[type=checkbox] { /* Position the checkbox in upper left corner */ position: absolute; opacity: 0; } /*Get rid of the 'companyType' radio circles */ .growsurf-popup-intent-modal input[name="companyType"]{ display: none; } /*Only show the 'companyType' radio circle when it is selected */ .growsurf-popup-intent-modal input[name="companyType"]:checked{ display: initial; } /* Styling Parts */ .growsurf-popup-intent-modal #part1, .growsurf-popup-intent-modal #part2, .growsurf-popup-intent-modal #part1-inline, .growsurf-popup-intent-modal #part2-inline { z-index: 2; display: block; height: auto; opacity: 1; transition: opacity 1s ease-in-out; } /* Hidden Parts */ .growsurf-popup-intent-modal #part2, .growsurf-popup-intent-modal #part2-inline { opacity: 0; height: 0; overflow: hidden; } /* Show Step 2 & Hide Step 1 (in popup lead form) */ .growsurf-popup-intent-modal #step2:checked ~ #part2 { opacity: 1; height: auto; } .growsurf-popup-intent-modal #step2:checked ~ #part1 { opacity: 0; height: 0; display: none; } /* Show Step 2 & Hide Step 1 (in inline lead form) */ .growsurf-popup-intent-modal #step2-inline:checked ~ #part2-inline { opacity: 1; height: auto; } .growsurf-popup-intent-modal #step2-inline:checked ~ #part1-inline { opacity: 0; height: 0; display: none; } .growsurf-popup-intent-modal-inline { } .growsurf-popup-intent-modal-inline .modal-content { max-width: 1140px !important; box-shadow: var(--z-shadow-0); } .text-blue, .blue-text { color: var(--blue); } .width-100 { width: 100%; } .bold { font-weight: bold; } .cursor-rocket:hover { cursor: url("data:image/svg+xml;utf8,🚀"), auto !important } .text-transform-initial { text-transform: initial; } .use-cases-menu-container { display: flex; } .use-cases-menu-container .use-cases-menu-container-column { min-width: 210px; } .use-cases-menu-container .use-cases-menu-container-column:nth-child(2) { border-left: 1px solid #E1E1E1; } .icp-nav-icon { max-width: 20px; margin-right: 10px; } @media (max-width: 411px) { .use-cases-menu-container { flex-direction: column; } .use-cases-menu-container .use-cases-menu-container-column:nth-child(2) { border-top: 1px solid #E1E1E1; border-left: none; margin-top: 10px; padding-top: 10px; } } .footer-integration-img { max-width: 12px; margin-right: 5px; } .blog-post-page .blog-sidebar-cta-card-section { /*position: sticky;*/ /*top: 90px;*/ /*z-index: 2; */ } .growsurf-main-navbar { position: sticky !important; margin-bottom: -60px; flex-direction: column; } .vertical-align-bottom { vertical-align: bottom !important; } .border-top-none { border-top: none !important; } .pricing-plan-image-free { max-width: 71px; } .pricing-plan-image-startup { max-width: 99px; } .pricing-plan-image-business { max-width: 163px; } .pricing-plan-image-elite { max-width: 221px; } .icp-image { max-width: 160px; padding: 20px; margin-bottom: 10px; } .icp-hero-image { max-width: 320px; margin-top: 20px; } .nav-tabs-overflow { flex-wrap: nowrap; overflow: auto; white-space: nowrap; } .demo-iframe-video { border: 0; top: 0; left: 0; width: 100%; height: 100%; min-height: 463px; overflow: hidden; } .inline-blog-cta { display: flex; margin-top: var(--space-45); margin-bottom: var(--space-45); flex-direction: row; background: var(--grayscale2) !important; color: var(--grayscale9) !important; } .inline-blog-cta .inline-blog-cta-left-side { display: flex; flex-direction: column; justify-content: center; padding-left: 10px; padding-right: 10px; } .inline-blog-cta .inline-blog-cta-right-side { margin-left: auto; } .inline-blog-cta .inline-blog-cta-right-side .inline-blog-cta-right-side-image { display: flex; align-items: center; justify-content: end; max-width: var(--max-width-400); padding-left: 10px; padding-right: 10px; } @media (max-width: 576px) { .inline-blog-cta { flex-direction: column-reverse; } .inline-blog-cta .inline-blog-cta-left-side { text-align: center; } .inline-blog-cta .inline-blog-cta-right-side { margin: 0 auto; margin-bottom: 20px; } .inline-blog-cta .inline-blog-cta-right-side .inline-blog-cta-right-side-image { justify-content: center; } } .video-js-in-demo-cta-section { top: 0!important; bottom: 0!important; position: absolute!important; left: 0!important; right: 0!important; background-color: rgba(0,0,0,0.4) !important; } .video-js-in-demo-cta-section .vjs-big-play-button { margin-left: -1em !important; } @media only screen and (max-width: 469px) { .demo-cta-section-container .features-img-block { max-width: 400px; } } .jumbotron:nth-of-type(1) { border-bottom: 1px solid #E1E1E1; padding-bottom: 5rem; } .blog-sidebar-cta { background: var(--grayscale2) !important; color: var(--grayscale9) !important; } .blog-sidebar-cta h3 { margin-bottom: 1rem; } .blog-sidebar-inline-cta { margin-top: 3rem; } .blog-sidebar-inline-cta { padding: 3rem 1.5rem !important; } .blog-sidebar-cta-email-input { border-color: transparent !important; } .blog-sidebar-cta-form-group { } .blog-sidebar-cta-image { max-width: 120px; width: 100%; margin: 0 auto; margin-bottom: 1rem; } .growsurf-page-link { color: var(--white); background: ; } #story .h1, #story h1, #story .h2, #story h2, #story .h3, #story h3, #story .h4, #story h4, #story .h5, #story h5, #story .h6, #story h6 { margin: 2rem 0; } #story { margin-top: 0; } #story img { margin: 1.5rem 0; margin-bottom: 0; cursor: hover; } #story figcaption { font-size: .85em; font-style: italic; color: var(--grayscale8); margin-bottom: 3rem; /*border-bottom: 1px solid var(--grayscale4);*/ padding-bottom: 0.5rem; position: relative; margin-left: 40px; } #story figcaption:before { position: absolute; left: -25px; content: ''; display: inline-block; margin-right: 10px; width: 18px; height: 18px; background: transparent url(https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/8435d2f5-beb4-44a1-a81e-18db7affe7f7.png) no-repeat 0 0; background-size: cover; top: -3px; opacity: 0.7; transform: rotate(14deg); -webkit-transform: rotate(14deg); } #story hr { margin: 4vw 0; } #story blockquote { font-size: 1.1em; margin: 4vw 0; margin-top: 1.5rem; font-family: var(--open-sans); font-style: italic; color: #515151; padding: 1.2em 30px 1.3em 75px; border-left: 8px solid #5890E7; line-height: 1.6; position: relative; background: #F0F0F0; } #story blockquote::before { font-family: Arial; content: "\201C"; color: #5890E7; font-size: 4em; position: absolute; left: 10px; top: -10px; } #story table { margin-top: 20px; margin-bottom: 20px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.06); width: 100%; border-collapse: collapse; overflow: hidden; display: block; overflow-x: auto; background: #FFFFFF; -webkit-overflow-scrolling: touch; min-width: 400px; border-radius: 3px; } #story table thead tr { background-color: #F0F0F0; font-weight: 700; } #story table th, #story table td { padding: 10px 15px; } #story table tr:first-child th, #story tr:first-child table td { font-weight: 700; } #story table tbody tr td:first-child { font-weight: 500; } #story table tbody tr:nth-of-type(even) { background-color: #FAFAFA; } #story table tbody tr:last-of-type { border-bottom: none; } .tweet-this { margin-top: 10px; position: absolute; right: 20px; box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12); -webkit-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12); -moz-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12); -o-box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.12); } .tweet-this a { border-radius: 3px; font-weight: bold; font-style: normal !important; text-transform: uppercase; font-size: 0.8em; padding: 10px 15px; background: #00aced; color: #fcfcfc; } .tweet-this a:hover, .tweet-this a:focus, .tweet-this a:active { color: #fcfcfc; } .tweet-this a:before { content: ''; display: inline-block; margin-right: 10px; width: 18px; height: 18px; background: transparent url(https://s3-us-west-2.amazonaws.com/growsurf-blog/2019/10/twitter.png) no-repeat 0 0; background-size: cover; top: 3px; position: relative; } @media only screen and (max-width: 991.98px) { body > .jumbotron > .container > .row > .col-lg-8.pr-5 { padding-right: 0 !important; padding-left: 0 !important; } body > .jumbotron > .container > .row > .col-lg-4 > div > .row > .col-12.mb-2 > a > .row > .col-4 { max-width: 140px; } .blog-sidebar-cta { margin-top: 2rem; margin-bottom: 2rem; } } @media only screen and (max-width: 767.98px) { body > .jumbotron > .container > .row > .col-lg-8.pr-5 { padding-right: 15px !important; padding-left: 15px !important; } } .clickable-img { cursor: pointer; } .readRemainingGauge { font-family: var(--font-family) !important; background: rgba(0,0,0,.8) !important; z-index: 9999999 !important; } .optional-tag { font-size: var(--font-size-small); padding: 2px 5px; background: var(--grayscale4); } .input-usd-container { display: flex; align-items: center; position: relative; } .input-usd-container input { padding-left: 50px; } .input-usd-container::before { content: '$'; position: absolute; vertical-align: middle; background: var(--grayscale3); height: 50px; line-height: 1; width: 40px; left: 0; display: flex; align-items: center; justify-content: center; } .roi-calculator-roi-section { padding: 20px; background: var(--grayscale3); color: #000; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; max-width: 420px; width: 100%; } @media only screen and (max-width: 991.98px) { .roi-calculator-section { flex-direction: column; } .roi-calculator-questions.pl-6 { padding: 30px 30px 0 30px !important; } .roi-calculator-roi-section { padding: 20px !important; margin: 0 auto !important; width: 100% !important; max-width: none !important; margin-top: 40px !important; } } @media (max-width: 768px) { .roi-calculator-questions .roi-calculator-question { flex-direction: column; } } .red-text { color: var(--red); } /* Allow angular.js to be loaded in body, hiding cloaked elements until templates compile. The !important is important given that there may be other selectors that are more specific or come later and might alter display. */ [ng\:cloak], [ng-cloak], .ng-cloak { display: none !important; } .cc-window { right: 1em !important; left: initial !important; z-index: 9999999999 !important; } @media screen and (max-width: 414px) and (orientation: portrait), screen and (max-width: 736px) and (orientation: landscape) { .cc-window { right: 0 !important; left: 0 !important; } } .integration-logo-in-pricing { margin-right: 5px; margin-top: -5px; display: inline-block; width: 18px; height: auto; } .hero-customer-section { position: absolute; right: -10px; top: 90px; max-width: 620px; width: 100%; margin-top: 0px; z-index: 3; } .hero-customer-quote { z-index: 2; position: relative; animation: fadein 3s; -moz-animation: fadein 3s; /* Firefox */ -webkit-animation: fadein 3s; /* Safari and Chrome */ -o-animation: fadein 3s; /* Opera */ } .hero-customer-quote-inner { background: white; margin-top: -30px; margin-left: -30px; } .hero-customer-quote-person-avatar { max-width: 50px; } .hero-customer-quote-company-logo { max-width: 50px; margin-bottom: 10px; margin-top: 10px; } .hero-customer-section .preview-content:after { background: linear-gradient(to top, white 10%, rgba(255, 255, 255, 0.978) 18.55%, rgba(255, 255, 255, 0.925) 25.93%, rgba(255, 255, 255, 0.857) 32.23%, rgba(255, 255, 255, 0.781) 37.9%, rgba(255, 255, 255, 0.701) 43.12%, rgba(255, 255, 255, 0.62) 48.07%, rgba(255, 255, 255, 0.538) 52.84%, rgba(255, 255, 255, 0.455) 57.61%, rgba(255, 255, 255, 0.373) 62.38%, rgba(255, 255, 255, 0.291) 67.33%, rgba(255, 255, 255, 0.212) 72.55%, rgba(255, 255, 255, 0.138) 78.22%, rgba(255, 255, 255, 0.07) 84.61%, rgba(255, 255, 255, 0.019) 92.08%, rgba(255, 255, 255, 0) 100%); content: ""; height: 100%; z-index: 1; position: absolute; top: 0; right: 0; left: 0; bottom: 0; opacity: 0.8; } @media (max-width: 1199px) { .hero-customer-section { position: relative; right: initial; top: initial; margin: 0 auto; margin-top: -30px; } .hero-customer-quote-inner { margin: -30px; margin-bottom: 60px; } } @keyframes fadein { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadein { /* Firefox */ from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } } @-o-keyframes fadein { /* Opera */ from { opacity:0; } to { opacity: 1; } } .cc-window { padding-left: 80px !important; } .cc-window::before { content: ''; opacity: 0.7; width: 40px; height: 40px; display: block; position: absolute; left: 22px; margin-top: 5px; background-image: url("https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/bfa08b5a-1774-421d-8263-e8ca17727311.svg"); /* https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/9e03e318-5b6a-44b6-a932-46bcfb9b9300.svg */ background-color: transparent; /* Used if the image is unavailable */ background-position: center; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; /* Resize the background image to cover the entire container */ } .blog-category-tag { padding: 2px 8px; display: inline-block; background: rgba(88, 144, 231,0.12); font-size: 0.75rem; border-radius: 4px; color: #5890E7; margin-bottom: 10px !important; margin-right: 5px; } .toggle-service-button { color: var(--grayscale4); border-radius: 0 3px 3px 0; min-width: 140px; } .toggle-service-button.serviceactive { background: var(--blue) !important; color: var(--white) !important; border: 2px solid var(--blue); } .toggle-service-button { color: var(--grayscale7) !important; border: 2px solid var(--grayscale4); } /* Hide free plan elements */ .free-plan-element { display: none; } .landing-social-proof-badges { transform: scale(0.8); -webkit-transform: scale(0.8); transform-origin-x: 0; -webkit-transform-origin-x: 0; -ms-transform-origin-x: 0; } .landing-social-proof-badges-center { transform: scale(0.8); -webkit-transform: scale(0.8); transform-origin-x:0.8 !important; -webkit-transform-origin-x:0.8 !important; -ms-transform-origin-x:0.8 !important } @media (max-width: 768px) { .landing-social-proof-badges { margin: 0 auto; text-align: center; width: 100%; display: block; transform-origin-x: initial; -webkit-transform-origin-x: initial; -ms-transform-origin-x: initial; } .landing-social-proof-badges-center { margin: 0 auto; text-align: center; width: 100%; display: block; transform-origin-x: initial; -webkit-transform-origin-x: initial; -ms-transform-origin-x: initial; } } .announcement-banner { background: #5890E7; color: #fff; padding: 5px; align-items: center; display: flex; justify-content: center; z-index: 1; position: relative; line-height: 1.3; } .form-control::-webkit-input-placeholder { color: #ACACAC; } .form-control:-ms-input-placeholder { color: #ACACAC; } .form-control::placeholder { color: #ACACAC; } .muted-image-caption-via-javascript a { color: var(--grayscale6); text-decoration: underline; } .nav-pills .nav-link.active .growsurf-label, .nav-pills .show>.nav-link .growsurf-label { color: #fff; } .pricing-comment-under-checkmark { display: block; position: absolute; font-size: 10px; left: 0; right: 0; margin-top: -2px; } .blog-post-cover-image { display: block; width: 100%; height: 400px; background-size: cover; background-position: center; background-repeat: no-repeat; background-clip: padding-box; } .blog-post-with-big-thumbnail .blog-post-cover-image-thumbnail { height: 400px; } @media (max-width: 768px) { .blog-post-with-big-thumbnail .blog-post-cover-image-thumbnail { height: 220px; } } .blog-post-cover-image-thumbnail { display: block; width: 100%; height: 220px; background-size: cover; background-position: center; background-repeat: no-repeat; background-clip: padding-box; } .product-header + .container { margin-top: 30px; /* height of the .product-header */ } .product-header { background: #fafafa; padding: 5px; z-index: 1; position: absolute; border-bottom: 1px solid #e1e1e1; justify-content: flex-start; align-items: flex-start; display: flex; width: 100%; margin-bottom: 0.5rem; margin-top: -0.5rem; left: 0; right: 0; } .product-header-container { width: 100%; } .product-header-inner { width: 100%; padding-left: 15px; padding-right: 15px; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; font-size: 12px; } .product-header-left-side { white-space: nowrap; font-weight: 500; } .product-header-product-name-and-description-container { } .product-header-product-name-and-description { color: #000; cursor: pointer; } .product-header-product-name { margin-right: 1px; } .product-header-product-description { opacity: 0.7; font-weight: 500; } .product-header-product-description span { font-weight: 500; } .product-header-dropdown-caret { max-width: 12px; position: relative; margin-top: -1px; margin-left: 2px; opacity: 0.5; } .product-header-right-side { display: flex; align-items: center; justify-content: center; } .product-header-right-side-item { position: relative; margin-right: .6rem; margin-left: .6rem; } .product-header-right-side-item > a { font-size: 12px; color: rgba(0, 0, 0, .5); } .product-header-book-demo-btn { font-size: 12px; text-transform: initial; padding: 2px 5px; margin-top: -6px; margin-bottom: -3px; } .product-header-book-demo-btn-avatar { max-width: 19px; margin-right: 6px; border-radius: 3px; margin-top: -11px; margin-bottom: -8px; position: relative; margin-left: -4px; } .growsurf-product-dropdown-menu { padding-top: 10px; padding-bottom: 10px; } .growsurf-product-dropdown-menu .dropdown-item { padding-top: 10px; padding-bottom: 10px; white-space: normal; font-size: 14px; line-height: 1.1; } .growsurf-product-dropdown-menu .dropdown-item.active { background: #F0F0F0 !important; } .growsurf-product-dropdown-menu .dropdown-item img { margin-top: 5px; margin-bottom: 2px; } .growsurf-product-dropdown-menu-show-until-mobile { display: initial; } .growsurf-product-dropdown-menu-show-until-mobile.product-header-right-side { display: flex; } .growsurf-product-dropdown-menu-hide-until-mobile { display: none !important; } @media (max-width: 991.98px) { .product-header-inner { padding-left: 0; padding-right: 0; } .product-header-right-side-item:last-child { margin-right: 0; } } @media (max-width: 576px) { .product-header-inner { padding-left: 10px; padding-right: 10px; } } @media (max-width: 350px) { .growsurf-product-dropdown-menu .dropdown-item { min-width: 220px; max-width: 220px; } } /* For GrowSurf */ @media (max-width: 400px) { .growsurf-product-dropdown-menu-show-until-mobile { display: none !important; } .growsurf-product-dropdown-menu-hide-until-mobile { display: initial !important; } } @media (max-width: 768px) { .free-tool-form-container { padding: 25px 20px !important; } } .free-tool-inline-link { white-space: nowrap; font-size: 0.8em; font-weight: bold; padding: 3px 12px !important; /* background: var(--blue); color: var(--white); */ color: #5890E7 !important; background: rgba(88, 144, 231, 0.08) !important; border-radius: 12px; transition: 0.8s all; top: -1px; position: relative; box-shadow: var(--z-shadow-2); -webkit-box-shadow: var(--z-shadow-2); -moz-box-shadow: var(--z-shadow-2); } .free-tool-inline-link:before { content: '🔧 Free Tool'; font-weight: bold; color: var(--grayscale7); margin-right: 5px; background: white; display: inline-flex; align-items: center; justify-content: center; width: fit-content; margin-top: -3px; margin-bottom: -3px; margin-left: -12px; padding: 3px 12px; padding-right: 6px; border-radius: 12px 0 0 12px; text-transform: uppercase; font-size: 0.7em; position: relative; line-height: 2.2em; top: -0.1em; } .free-tool-inline-link:hover, .free-tool-inline-link:active, .free-tool-inline-link:focus { transition: 0.8s all; box-shadow: var(--z-shadow-3); -webkit-box-shadow: var(--z-shadow-3); -moz-box-shadow: var(--z-shadow-3); } pre.copy-code { display: initial; color: var(--white); font-size: 12px; } .copy-code { cursor: pointer; transition: all 1s; } .copy-code:hover { transform: scale(1.02); transition: all 0.3s; } .copy-code-container { overflow: scroll; background: var(--black); color: var(--white); padding: 10px; border-radius: 8px; margin-top: 10px; font-size: 12px; } .code { font-family: monospace; color: var(--red); } pre.pre-with-code-bg { background: #f0f0f0; font-size: 12px; padding: 5px; font-family: monospace; white-space: break-spaces; } .free-tool-checklist-sticky-header { position: sticky; top: 94px; z-index: 3; background: var(--white); padding: 20px; margin: -20px; padding-bottom: 0; margin-bottom: 0 } @media only screen and (max-width: 991.98px) { .free-tool-checklist-sticky-header { top: 83px } } .ribbon-container { position: absolute; top: -2px; left: -2px; overflow: hidden; width: 100px; /* Adjust as needed */ height: 100px; } .ribbon { position: absolute; top: 15px; left: -35px; width: 150px; height: 30px; background-color: var(--red); color: white; text-align: center; line-height: 30px; transform: rotate(-45deg); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); font-size: 12px; } .highlight { background: rgba(231, 217, 88, .5) } .customer-description-title { font-size: 2rem; line-height: 1.1; } .customer-description-section-left { padding-right: 20px; position: relative; margin-top: -10px; } .customer-description-section-right { padding-left: 20px; } @media (max-width: 768px) { .customer-description-section { flex-direction: column; } .customer-description-section-left { padding-right: 0; padding-top: 20px; margin-top: 0; } .customer-description-section-right { padding-left: 0; padding-top: 60px; } } .customer-description-checklist-item { padding-bottom: 30px; display: flex; text-wrap: pretty; } .customer-description-checklist-item-text { margin-left: 20px; margin-top: -7px; } .faq-button { padding: 0; padding-top: 10px; padding-bottom: 10px; } .faq-button:hover, .faq-button:active, .faq-button:focus { color: var(--black); } .faq-button.collapsed .fa.fa-chevron-up { transform: rotate(180deg); } /* For tooltips that have a GIF: */ .tooltip-inner:has(img[src$=".gif"]) { max-width: 460px; padding: 10px; } .tooltip-inner:has(img[src$=".gif"]) img[src$=".gif"] { margin-top: 10px; } .tooltip.show:has(img[src$=".gif"]) { opacity: 1.0; } /* we need the GIF to not be 0.9 opaque like normal tooltips */ .vendor-pill { border: 1px solid var(--gray); border-radius: 100px; width: fit-content; padding: 1px 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto; font-size: small; } .vendor-pill-avatars { margin-right: 3px; display: flex; direction: rtl; } /* .vendor-pill-avatars img:first-child { margin-left: -7px; z-index: 2; } */ .vendor-pill-avatars img { width: auto; height: auto; max-width: 26px; max-height: 26px; display: inline; border-radius: 100%; margin-left: -10px; border: 2px solid #fff; z-index: 1; } .vendor-pill-text { color: var(--gray-dark); } /* Shimmer animation */ @keyframes ai-content-shimmer { 0% { background: linear-gradient( 135deg, rgba(255, 40, 219, 0.05), // Softer pink rgba(173, 74, 251, 0.05), // Softer purple rgba(33, 150, 243, 0.05) // Keeping blue but softer ); } 50% { background: linear-gradient( 135deg, rgba(33, 150, 243, 0.05), rgba(255, 40, 219, 0.05), rgba(173, 74, 251, 0.05) ); } 100% { background: linear-gradient( 135deg, rgba(173, 74, 251, 0.05), rgba(33, 150, 243, 0.05), rgba(255, 40, 219, 0.05) ); } } .ai-content { position: relative; color: #8250DF; font-weight: 400; } .ai-content:before { /* border-radius: 8px; */ border-radius: 30px; content: ""; position: absolute; background: linear-gradient(135deg, rgba(255, 40, 219, 0.05), rgba(173, 74, 251, 0.05), rgba(33, 150, 243, 0.05)); z-index: 0; width: calc(100% + 20px); /* height: calc(100% + 20px); */ height: calc(100% + 10px); /* margin-top: -10px; */ margin-top: -5px; margin-left: -10px; } .ai-content.ai-content-loaded:before { box-shadow: rgba(0,0,0,.02) 0px .35px 2.5px 0px,rgba(0,0,0,.03) 0px 1.5px 6px 0px,rgba(0,0,0,.03) 0px 4px 13px 0px,rgba(0,0,0,.05) 0px 7.5px 14px 0px,rgba(255,40,219,.1) 0px 13px 27px 0px,rgba(173,74,251,.2) 0px 0px 0px 1px } .ai-content.ai-content-loading:before { -webkit-animation: ai-content-shimmer 1.5s linear infinite; animation: ai-content-shimmer 1.5s linear infinite; transition: opacity .2s ease-in-out; } .ai-content-for-circle:before { width: calc(100%); height: calc(100%); margin-top: 0; margin-left: 0; left: 0; top: 0; } /* Highlight-flash keyframes */ @keyframes highlight-flash { 0% { background: var(--yellow); } 33% { background: none; } 66% { background: var(--yellow); } 100% { background: none; } } .highlight-flash { animation: highlight-flash 2s both ease; } /* Carousel control styling */ .embeddable-elements-carousel .carousel-control-prev, .embeddable-elements-carousel .carousel-control-next { width: 40px; height: 40px; background-color: rgba(0, 0, 0, 0.5); border-radius: 50%; top: 15px; transform: translateY(-50%); opacity: 0.8; /* margin: 0 15px; */ } .embeddable-elements-carousel .carousel-control-prev:hover, .embeddable-elements-carousel .carousel-control-next:hover { background-color: rgba(0, 0, 0, 0.7); opacity: 1; } .embeddable-elements-carousel .carousel-control-prev-icon, .embeddable-elements-carousel .carousel-control-next-icon { width: 20px; height: 20px; background-size: 100% 100%; } /* Ensure controls are visible on all backgrounds */ .embeddable-elements-carousel .carousel-control-prev-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"); } .embeddable-elements-carousel .carousel-control-next-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"); } /* Improve indicators visibility */ .embeddable-elements-carousel .carousel-indicators li { background-color: rgba(0, 0, 0, 0.5); height: 10px; width: 10px; border-radius: 50%; margin: 0 5px; } .embeddable-elements-carousel .carousel-indicators .active { background-color: rgba(0, 0, 0, 0.8); } /* Ensure caption text is readable */ .embeddable-elements-carousel.carousel-caption { background-color: rgba(0, 0, 0, 0.5); border-radius: 5px; padding: 10px; bottom: 20px; } /* ---------- V2 VARIABLES ---------- */ :root { --v2-header-width: 1180px; --v2-blue1: #2E7DF3; /* --v2-blue1: #0C67F0; */ --v2-blue2: #12BAFF; /* --v2-blue2: #2578F8; */ --v2-blue-dark1: #192B55; --v2-black1: #252C30; --v2-gray-dark: #7A7A82; --v2-gray-dark2: #696873; --v2-gray-dark3: #625E6F; } /* ---------- END: V2 VARIABLES ---------- */ /* ---------- V2 KEYFRAMES ---------- */ /* Grid Draw Animation */ @keyframes draw-grid { 0% { stroke-dasharray: 0; stroke-dashoffset: 0; opacity: 0; } 10% { stroke-dasharray: 50; stroke-dashoffset: 50; opacity: 0.2; } 20% { stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0.4; } 30% { stroke-dasharray: 200; stroke-dashoffset: 150; opacity: 0.6; } 40% { stroke-dasharray: 300; stroke-dashoffset: 200; opacity: 0.7; } 50% { stroke-dasharray: 400; stroke-dashoffset: 250; opacity: 0.8; } 60% { stroke-dasharray: 600; stroke-dashoffset: 300; opacity: 0.85; } 70% { stroke-dasharray: 800; stroke-dashoffset: 350; opacity: 0.9; } 80% { stroke-dasharray: 1000; stroke-dashoffset: 400; opacity: 0.95; } 90% { stroke-dasharray: 2000; stroke-dashoffset: 500; opacity: 0.98; } 100% { stroke-dasharray: 5000; stroke-dashoffset: 0; opacity: 1; } } /* Glimmer Animation */ @keyframes glimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ---------- END: V2 KEYFRAMES ---------- */ /* ---------- V2 GENERAL STYLES ---------- */ .spacer-before-text::before { content: "\00A0"; } a.blue-text { color: var(--v2-blue1); transition: all 0.2s ease-in-out; } a.blue-text:hover, a.blue-text:active, a.blue-text:focus { color: var(--v2-blue2); transition: all 0.2s ease-in-out; } .v2-headline-container { max-width: 780px; margin: 0 auto; } .v2-headline-container.max-width-800 { max-width: 800px; } .v2-headline-container.max-width-960 { max-width: 960px; } .v2-headline { color: var(--v2-black1); text-align: center; font-size: 4rem; font-style: normal; font-weight: 600; line-height: 112.5%; letter-spacing: -1.92px; margin-top: 1.5rem; } .v2-headline.h2 { font-size: 3rem; } .v2-subheadline { margin: 0 auto; margin-top: 1rem; color: var(--v2-black1); text-align: center; font-size: 1rem; font-style: normal; font-weight: 400; line-height: 1.75rem; letter-spacing: -0.03125rem; margin-bottom: 3.25rem; } .v2-subheadline.bold { font-weight: var(--font-weight-bold); } .v2-subheadline.semibold { font-weight: var(--font-weight-medium); } .v2-headline-text-gradient-mask { font-weight: 600; display: inline-block; background: linear-gradient(to right, var(--v2-blue2), var(--v2-blue1)); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding-bottom: 0.1em; /* Add small padding to prevent text cutoff */ margin-bottom: -0.1em; /* Compensate for padding to maintain spacing */ } .v2-headline-image img { backdrop-filter: blur(3px); border-radius: var(--border-radius-large); border: 1px solid rgba(0, 0, 0, .08); background: linear-gradient(0deg, rgba(255, 255, 255, .9) 0, #fff 100%); box-shadow: 0 10px 3px 0 transparent, 0 7px 3px 0 rgba(0, 0, 0, .01), 0 4px 2px 0 rgba(0, 0, 0, .02), 0 2px 2px 0 rgba(0, 0, 0, .03), 0 0 1px 0 rgba(0, 0, 0, .04); display: flex; align-items: center; justify-content: center; height: 120px; width: 120px; max-width: none; transition: all .2s ease-in-out; overflow: hidden; margin: 0 auto; padding: 0; } .v2-headline-badge.v2-headline-badge-left { justify-content: flex-start; } .v2-headline-badge.v2-headline-badge-right { justify-content: flex-end; } .v2-headline-badge { display: flex; justify-content: center; margin: 0 auto; align-items: center; gap: 0.75rem; width: 100%; overflow-x: hidden; } .v2-headline-badge-left-embellishment, .v2-headline-badge-right-embellishment { width: 10.9375rem; } .v2-headline-badge-content { display: flex; padding: 0.25rem 0.6875rem; justify-content: center; align-items: center; gap: 0.25rem; border-radius: 3.5rem; color: var(--v2-black1); border: 1px solid #D6E3EB; /* background: #F7FCFF; */ background: var(--white); box-shadow: 0px 2px 2px -1px rgba(7, 1, 19, 0.04), 0px 1px 1px -0.5px rgba(7, 1, 19, 0.04), 0px 0.5px 0.5px 0px rgba(7, 1, 19, 0.04), 0px 2px 8px 0px rgba(255, 255, 255, 0.05) inset, 0px 1px 3px 0px rgba(255, 255, 255, 0.12) inset, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.16) inset; backdrop-filter: blur(3px); } .v2-headline-badge-text { white-space: nowrap; text-align: center; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: 1.25rem; /* 142.857% */ margin-bottom: 0; text-transform: capitalize; } .v2-input::placeholder { color: rgba(113, 112, 122, 0.50); } .v2-input { display: inline-flex; padding: 0.875rem; justify-content: flex-end; align-items: center; border-radius: 0.75rem; border: 1px solid #DAE7EF; background: var(--white); min-width: 200px; box-shadow: 0px 2px 2px -1px rgba(7, 1, 19, 0.04), 0px 1px 1px -0.5px rgba(7, 1, 19, 0.04), 0px 0.5px 0.5px 0px rgba(7, 1, 19, 0.04), 0px 2px 8px 0px rgba(255, 255, 255, 0.05) inset, 0px 1px 3px 0px rgba(255, 255, 255, 0.12) inset, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.16) inset; backdrop-filter: blur(3px); } .v2-btn { color: var(--white) !important; text-align: center; font-size: 1rem; font-style: normal; font-weight: var(--font-weight-bold); line-height: 1.5rem; letter-spacing: -0.005rem; display: flex; text-transform: capitalize; padding: 0.75rem 1.5rem; justify-content: center; align-items: center; gap: 0.5625rem; align-self: stretch; border-radius: var(--border-radius-regular); border: 0.5px solid rgba(255, 255, 255, 0.12); background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='grad1' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%232E7DF3'/%3E%3Cstop offset='100%25' style='stop-color:%2312BAFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grad1)'/%3E%3C/svg%3E"); box-shadow: 0px 1px 2px -0.5px rgba(255, 255, 255, 0.12) inset, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.16) inset, 0px 8px 24px -4px rgba(255, 255, 255, 0.16) inset, 0px 8px 8px -3px rgba(7, 1, 19, 0.03), 0px 5px 5px -2.5px rgba(7, 1, 19, 0.03), 0px 3px 3px -1.5px rgba(7, 1, 19, 0.03), 0px 2px 2px -1px rgba(7, 1, 19, 0.03), 0px 1px 1px -0.5px rgba(7, 1, 19, 0.03), 0px 0.5px 0.5px 0px rgba(7, 1, 19, 0.03); transition: all 0.3s ease-in-out !important; } .v2-btn:hover, .v2-btn:focus, .v2-btn:active { background: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='grad1' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%232E7DF3'/%3E%3Cstop offset='100%25' style='stop-color:%2312BAFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grad1)'/%3E%3C/svg%3E"); color: var(--white) !important; transition: all 0.3s ease-in-out !important; box-shadow: 0px 2px 4px -1px rgba(7, 1, 19, 0.06), 0px 1px 2px -0.5px rgba(7, 1, 19, 0.06), 0px 0.5px 1px 0px rgba(7, 1, 19, 0.06); } .v2-btn.btn-lg { padding: 1rem 2rem; } .v2-btn.btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; } .v2-btn[disabled], [disabled].v2-btn { cursor: not-allowed !important; color: rgba(36, 41, 46, 0.5) !important; background: #E1E1E1 !important; box-shadow: none !important; } @media screen and (max-width: 1024px) { } @media screen and (max-width: 992px) { } @media screen and (max-width: 768px) { .v2-headline { font-size: 3rem; } .v2-headline.h2 { font-size: 2.5rem; } } @media screen and (max-width: 576px) { } @media screen and (max-width: 469px) { .v2-headline { font-size: 2.5rem; } .v2-headline.h2 { font-size: 2rem; } } @media screen and (max-width: 350px) { } /* ---------- END: V2 GENERAL STYLES ---------- */ /* ---------- V2 NAV TABS ---------- */ .v2-growsurf-nav-tabs-container { max-width: var(--v2-header-width); margin: 0 auto; } .v2-growsurf-nav-tabs-inner { margin: 0 auto; padding: 0.5rem; border-radius: var(--border-radius-large); border: 1px solid rgba(0, 0, 0, 0.07); /* background: rgba(255, 255, 255, 0.24); */ background: var(--white); box-shadow: 0px 0px 0px 1px rgba(1, 97, 151, 0.04); backdrop-filter: blur(17.75px); } .v2-growsurf-nav-tabs-container > .v2-growsurf-nav-tabs-inner > .tab-content { border-radius: 0 0 var(--border-radius-large) var(--border-radius-large); border: 1px solid rgba(0, 0, 0, 0.07); background: linear-gradient(180deg, var(--white) 70%, rgba(235, 249, 255, 0.5) 100%); } .v2-growsurf-nav-tabs { white-space: nowrap; overflow: auto; flex-wrap: unset; justify-content: flex-start !important; border-bottom: none; } .v2-growsurf-nav-tabs .nav-link:first-of-type { padding-left: 1.75rem; border-top-left-radius: var(--border-radius-large); } .v2-growsurf-nav-tabs .nav-link:last-of-type { padding-right: 1.75rem; border-top-right-radius: var(--border-radius-large); } .v2-growsurf-nav-tabs .nav-link { color: #2F2E34; font-size: 0.875rem; border-radius: 0.5rem 0.5rem 0rem 0rem; border: 1px solid #E6F1F6; background: #FDFEFF; padding: 0.5rem 1.5rem; border-bottom: none; } .v2-growsurf-nav-tabs .nav-link.active { color: var(--white) !important; border: 0.5px solid rgba(255, 255, 255, 0.12); background: linear-gradient(180deg, #16B2FE 0%, #2D81F4 100%); box-shadow: 0px 1px 2px -0.5px rgba(255, 255, 255, 0.12) inset, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.16) inset, 0px 8px 24px -4px rgba(255, 255, 255, 0.16) inset, 0px 8px 8px -3px rgba(7, 1, 19, 0.03), 0px 5px 5px -2.5px rgba(7, 1, 19, 0.03), 0px 3px 3px -1.5px rgba(7, 1, 19, 0.03), 0px 2px 2px -1px rgba(7, 1, 19, 0.03), 0px 1px 1px -0.5px rgba(7, 1, 19, 0.03), 0px 0.5px 0.5px 0px rgba(7, 1, 19, 0.03); } .v2-growsurf-nav-tabs-container .nav-pills .nav-link.active, .v2-growsurf-nav-tabs-container .nav-pills .show > .nav-link { background: linear-gradient(180deg, #16B2FE 0%, #2D81F4 100%); } .v2-growsurf-nav-tabs .nav-link:hover, .v2-growsurf-nav-tabs .nav-link:focus, .v2-growsurf-nav-tabs .nav-link:active { color: #2F2E34 !important; } .v2-growsurf-nav-tabs .nav-link.active:hover, .v2-growsurf-nav-tabs .nav-link.active:focus, .v2-growsurf-nav-tabs .nav-link.active:active { color: var(--white) !important; } /* ---------- END: V2 NAV TABS ---------- */ /* ---------- V2 BACK BUTTON ON PAGE ---------- */ .v2-back-button-on-page { left: 0; right: 0; max-width: var(--v2-header-width); margin: 0 auto; padding: 0 var(--space-15); position: absolute; top: 85px; } /* ---------- END: V2 BACK BUTTON ON PAGE ---------- */ /* ---------- V2 BOOST GROWTH CTA ---------- */ .boost-growth-cta-container { background: unset; width: 100%; z-index: 3; position: relative; padding-bottom: 0; padding-top: 13rem; } .boost-growth-cta-container .boost-growth-cta-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200) !important; z-index: 3; position: relative; padding-bottom: 2rem; } .boost-growth-cta-container .boost-growth-cta-main-image { overflow-x: hidden; max-width: 560px; margin: 0 auto; z-index: -1; position: absolute; top: 0; right: 0; left: 0; margin-top: -320px; display: flex; align-items: flex-start; justify-content: center; } .boost-growth-cta-container .boost-growth-cta-main-image img { width: 100%; height: auto; } @media screen and (max-width: 1024px) { .boost-growth-cta-container { padding-top: 11rem; } .boost-growth-cta-container .boost-growth-cta-main-image { margin-top: -260px; } .boost-growth-cta-main-content { margin-top: 60px; } } @media screen and (max-width: 768px) { .boost-growth-cta-container { padding-top: 10rem; } .boost-growth-cta-container .boost-growth-cta-main-image { margin-top: -240px; } .boost-growth-cta-main-content { margin-top: 80px; } } @media screen and (max-width: 600px) { .boost-growth-cta-container { padding-top: 7rem; } .boost-growth-cta-container .boost-growth-cta-main-image { margin-top: -220px; } .boost-growth-cta-main-content { margin-top: 100px; } } @media screen and (max-width: 469px) { .boost-growth-cta-container .boost-growth-cta-main-image { margin-top: -200px; } .boost-growth-cta-main-content { margin-top: 0; } } @media screen and (max-width: 350px) { .boost-growth-cta-container .boost-growth-cta-main-image { margin-top: -180px; } .boost-growth-cta-main-content { margin-top: 0; } } /* ---------- END: V2 BOOST GROWTH CTA ---------- */ /* ---------- V2 HOME ---------- */ .home-hero-container { margin: 0 auto; text-align: center; padding-top: 4rem; padding-bottom: 4rem; padding: var(--space-20); max-width: var(--max-width-1200); } .home-hero-top-parts { padding-top: 6rem; z-index: 2; width: 100%; max-width: 100%; overflow: hidden; } .home-hero-cta { z-index: 2; position: relative; } .home-hero-grid-image-container { width: 100%; position: relative; /* padding-top: 21.12%; */ /* Calculated based on inner dimensions 12.52981 / 59.32913 */ padding-top: 19rem; height: 0; } .home-hero-grid-image-container-inner { width: 59.32913rem; height: 12.52981rem; flex-shrink: 0; position: absolute; top: -2.8rem; /* Adjust as needed to recreate negative margin effect */ left: 50%; transform: translateX(-50%); /* Horizontal centering */ z-index: 1; } .home-hero-grid-image-container .grid-image-vector-1, .home-hero-grid-image-container .grid-image-vector-2 { position: absolute; top: 0; left: 0; right: 0; } .home-hero-grid-image-container .grid-image-vector-1 svg, .home-hero-grid-image-container .grid-image-vector-2 svg { max-width: 100%; width: 100%; } .home-hero-grid-image-container .grid-image-vector-1 { margin: 0 auto; width: calc(59.32913rem - (1.197px * 11)); /* 11 vertical lines */ height: 12.52981rem; flex-shrink: 0; stroke-width: 1.197px; stroke: rgba(31, 116, 241, 0.20); mix-blend-mode: multiply; stroke-dasharray: 20000; stroke-dashoffset: 20000; opacity: 0; animation: draw-grid 2s ease-out forwards; } .home-hero-grid-image-container .grid-image-vector-2 { width: 59.32913rem; height: 12.52981rem; flex-shrink: 0; stroke-width: 1.197px; stroke: rgba(31, 116, 241, 0.32); mix-blend-mode: multiply; stroke-dasharray: 20000; stroke-dashoffset: 20000; opacity: 0; animation: draw-grid 2s ease-out forwards; } .home-hero-grid-image-container .grid-image-vector-3 { border-radius: 59.5rem; background: #DFF2FB; filter: blur(300px); width: 59.5rem; height: 23.1875rem; flex-shrink: 0; position: absolute; left: 0; right: 0; top: 12rem; z-index: -1; } .home-hero-grid-image-container .grid-image-vector-4 { width: 59.5rem; height: 32.8125rem; flex-shrink: 0; border-radius: 59.5rem; background: #DFF2FB; filter: blur(290.95001220703125px); position: absolute; left: 0; right: 0; top: 15rem; z-index: -1; } .home-hero-grid-image-container .grid-image-vector-5 { width: 1.92769rem; height: 3.85531rem; flex-shrink: 0; stroke-width: 1.197px; stroke: rgba(23, 177, 254, 0.00); position: absolute; left: 17.8rem; top: 4.9rem; } .home-hero-grid-image-container .grid-image-vector-6 { width: 1.92769rem; height: 3.85531rem; flex-shrink: 0; stroke-width: 1.197px; stroke: rgba(23, 177, 254, 0.00); position: absolute; left: 52.1rem; top: 2.2rem; rotate: -78deg; } .home-hero-grid-image-container .grid-image-vector-7 { width: 0.46794rem; height: 2.18838rem; flex-shrink: 0; stroke-width: 1.197px; stroke: rgba(23, 177, 254, 0.00); position: absolute; left: 10.4rem; rotate: 56.5deg; top: 3rem; } .home-hero-grid-image-container .grid-image-vector-8 { width: 0.46794rem; height: 2.18838rem; flex-shrink: 0; stroke-width: 1.197px; stroke: rgba(23, 177, 254, 0.00); position: absolute; left: 33.3rem; } .home-hero-grid-image-container .grid-image-vector-1, .home-hero-grid-image-container .grid-image-vector-2, .home-hero-grid-image-container .grid-image-vector-5, .home-hero-grid-image-container .grid-image-vector-6, .home-hero-grid-image-container .grid-image-vector-7, .home-hero-grid-image-container .grid-image-vector-8 { /* Ensure they are initially hidden before animation */ stroke-dasharray: 0; stroke-dashoffset: 0; opacity: 0; /* Add initial opacity */ animation: draw-grid 2s ease-out forwards; /* Remove delay here */ } .home-hero-grid-image-container .grid-image-vector-1 { animation-delay: 0.0s; } .home-hero-grid-image-container .grid-image-vector-2 { animation-delay: 0.0s; } .home-hero-grid-image-container .grid-image-vector-5 { animation-delay: 2.5s; } .home-hero-grid-image-container .grid-image-vector-6 { animation-delay: 3.2s; } .home-hero-grid-image-container .grid-image-vector-7 { animation-delay: 4.5s; } .home-hero-grid-image-container .grid-image-vector-8 { animation-delay: 5.2s; } .home-hero-grid-visual-section { z-index: 2; max-width: var(--v2-header-width); margin: 0 auto; position: relative; margin-top: -9rem; } .home-hero-grid-visual-section .hero-customer-section-inner { border-radius: var(--border-radius-regular); overflow: auto; background: var(--white); } .home-hero-grid-visual-section .browser-mockup-container .browser-mockup:after { content: ""; display: block; width: 100%; height: 100%; background: var(--white); position: absolute; top: 0; } .home-hero-grid-visual-section .preview-content { background: var(--white); border-radius: 0 0 var(--border-radius-regular) var(--border-radius-regular); max-height: 520px; overflow: hidden; } .home-hero-grid-visual-section .hero-customer-quote { position: absolute; max-width: 400px; right: calc(-1 * var(--space-20)); top: 0; /* bottom: var(--space-20); */ text-align: left; } .home-hero-grid-visual-section .hero-customer-quote .hero-customer-quote-inner { border-radius: var(--border-radius-regular); } .home-hero-grid-visual-section .hero-customer-quote .hero-customer-quote-person-avatar { width: var(--space-30); height: var(--space-30); margin-right: var(--space-5); } .hero-customer-quote-content { font-size: small; } .home-hero-grid-visual-section .hero-customer-quote .hero-customer-quote-company-logo { max-width: 60px; } .hero-customer-quote-next-controls { position: absolute; top: -12px; right: var(--space-20); display: flex; flex-direction: row; align-items: center; justify-content: center; } .hero-customer-quote-next-controls a { color: var(--v2-blue1) !important; margin-left: var(--space-5); cursor: pointer; padding: var(--space-5); font-size: 16px; } @media screen and (max-width: 1200px) { .home-hero-grid-visual-section .hero-customer-quote { position: relative; right: unset; left: unset; margin: 0 auto; } .hero-customer-quote-next-controls { top: var(--space-15); right: calc(-1 * var(--space-10)); } } /* Media Queries for Responsive Design */ @media screen and (max-width: 1024px) { .home-hero-grid-image-container-inner { transform: translateX(-50%) scale(0.9); } .home-hero-grid-visual-section { margin-top: -10rem; } } @media screen and (max-width: 938px) { .home-hero-grid-image-container-inner { transform: translateX(-50%) scale(0.7); } .home-hero-grid-visual-section { margin-top: -11rem; } } @media screen and (max-width: 768px) { .home-hero-grid-image-container-inner { transform: translateX(-50%) scale(0.6); } .home-hero-grid-visual-section { margin-top: -12rem; } } @media screen and (max-width: 638px) { .home-hero-grid-image-container-inner { transform: translateX(-50%) scale(0.5); } .home-hero-grid-visual-section { margin-top: -12.5rem; } .home-hero-grid-visual-section .hero-customer-quote .hero-customer-quote-inner { margin-bottom: 0; width: calc(100% + 40px); margin: 0 -20px; margin-top: -10px; } } @media screen and (max-width: 576px) { .home-hero-grid-image-container { margin-top: -1rem; } .home-hero-grid-image-container-inner { transform: translateX(-50%) scale(0.4); } .home-hero-grid-visual-section { margin-top: -13rem; } } @media screen and (max-width: 469px) { .home-hero-grid-image-container-inner { transform: translateX(-50%) scale(0.3); } .home-hero-grid-visual-section { margin-top: -13.7rem; } } @media screen and (max-width: 350px) { .home-hero-grid-image-container-inner { transform: translateX(-50%) scale(0.2); } .home-hero-grid-visual-section { margin-top: -16rem; } } /* ---------- END: V2 HOME ---------- */ /* ---------- V2 EMAIL FORM SIGNUP CTA ---------- */ .email-form-signup-cta { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; max-width: 380px; margin: 0 auto; } .email-form-signup-cta form { display: inline-flex; padding: 0.375rem; justify-content: flex-end; align-items: center; border-radius: 0.75rem; border: 1px solid #DAE7EF; background: var(--white); box-shadow: 0px 12px 26.3px -17px rgba(0, 0, 0, 0.25); width: 100%; } .email-form-signup-cta form .form-group { flex: 1; margin-right: 0.5rem; } .email-form-signup-cta form input[type="email"] { border: 1px solid transparent; box-shadow: none; width: 100%; } .email-form-signup-cta form input[type="email"]:active, .email-form-signup-cta form input[type="email"]:focus, .email-form-signup-cta form input[type="email"]:hover { border: 1px solid transparent; box-shadow: none; } .email-form-signup-cta-subtext { display: flex; align-items: center; gap: 0.5rem; color: #99A2AF; font-size: 0.75rem; line-height: 1.25rem; margin-top: 0.25rem; } .email-form-signup-cta-subtext svg { width: 0.75rem; height: 0.75rem; } .email-form-signup-cta-subtext svg path { fill: #99A2AF; } @media screen and (max-width: 600px) { .email-form-signup-cta form button { font-size: 0.875rem; } } @media screen and (max-width: 576px) { .email-form-signup-cta { max-width: 100%; } .email-form-signup-cta form { width: 100%; justify-content: space-between; } .email-form-signup-cta form .form-group { flex: 1; margin-right: 0.5rem; } .email-form-signup-cta form input[type="email"] { width: 100%; } .email-form-signup-cta form button { flex-shrink: 0; } } /* END: V2 EMAIL FORM SIGNUP CTA */ /* ---------- V2 CUSTOMER LOGOS ---------- */ .v2-customer-logos-container { background: unset; width: 100%; z-index: 2; position: relative; border-bottom: none; padding-bottom: 4rem !important; } .v2-customer-logos-container .customer-logos { max-width: none; } .v2-customer-logos-container .trusted-by-text { color: #797986; font-weight: var(--font-weight-regular); margin-bottom: var(--space-20); } .v2-customer-logos-container .trusted-by-text::before, .v2-customer-logos-container .trusted-by-text::after { display: none; } .v2-customer-logos-container .customer-logos img { /* This is equal to ##818188 */ filter: brightness(75%) saturate(140%); -webkit-filter: brightness(75%) saturate(140%); } .scrolling-logos-fade { width: 30px!important } @media screen and (max-width: 768px) { .v2-customer-logos-container .customer-logos img { margin: var(--space-5) var(--space-25); } } /* ---------- END: V2 CUSTOMER LOGOS ---------- */ /* ---------- V2 CUSTOMER STATS ---------- */ .customer-stats-container { margin: 0 auto; max-width: var(--max-width-1200); background: unset; width: 100%; z-index: 3; position: relative; padding-bottom: 0; } .customer-stats-container .customer-stats-inner { padding: var(--space-20); } .customer-stats-container .customer-stats-main-image { max-width: 400px; margin: 0 auto; margin-bottom: -10.5rem; min-height: 160px; } .customer-stats-container .customer-stats-main-image img { width: 100%; height: auto; } .customer-stats-container .customer-stats-grid { display: flex; flex-direction: column; align-items: center; justify-content: center; } .customer-stats-container ul.customer-stats-grid-list { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 0; width: 100%; max-width: 1200px; background: var(--white); border: 0.5px solid #E6E8EE; border-radius: var(--border-radius-large); padding: 0; margin-bottom: 0; } .customer-stats-container ul.customer-stats-grid-list li { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 0; background: var(--white); min-width: 0; min-height: 120px; position: relative; border: 0.5px solid #E6E8EE; border-radius: 0; } .customer-stats-container ul.customer-stats-grid-list li:first-child { border-top-left-radius: 12px; } .customer-stats-container ul.customer-stats-grid-list li:nth-child(3) { border-top-right-radius: 12px; } .customer-stats-container ul.customer-stats-grid-list li:nth-child(4) { border-bottom-left-radius: 12px; } .customer-stats-container ul.customer-stats-grid-list li:last-child { border-bottom-right-radius: 12px; } .customer-stats-container .customer-stats-grid-item-wrapper { display: flex; align-items: center; padding: 2.5rem 2rem 2.5rem 2rem; width: 100%; height: 100%; box-sizing: border-box; flex-direction: column; text-align: left; justify-content: flex-start; align-items: flex-start; position: relative; } .customer-stats-container .customer-stats-grid-item-wrapper:before { content: ""; display: block; width: 2px; height: 1rem; position: absolute; top: 3.2rem; left: -1.5px; background: var(--v2-black1); z-index: 2; border-radius: var(--border-radius-small); } .customer-stats-container .customer-stats-grid-item-wrapper:after { content: ""; display: block; width: 2px; height: 2rem; position: absolute; top: 2.75rem; left: -1.5px; background: var(--white); z-index: 1; border-radius: var(--border-radius-small); } .customer-stats-container .customer-stats-grid-item-bar { width: 6px; height: 40px; border-radius: var(--border-radius-small); background: var(--v2-blue1); margin-right: 1.25rem; flex-shrink: 0; display: block; } .customer-stats-container .customer-stats-grid-item-number { font-size: 2rem; font-weight: var(--font-weight-bold); color: var(--v2-black1); margin-bottom: 1rem; line-height: 1; } .customer-stats-container .customer-stats-grid-item-text { font-size: 1rem; color: var(--v2-gray-dark); font-weight: var(--font-weight-regular); line-height: 1.5; margin: 0; } .customer-stats-container .customer-stats-grid-item-content { display: flex; flex-direction: column; align-items: flex-start; } @media screen and (max-width: 1024px) { .customer-stats-container ul.customer-stats-grid-list { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(4, 1fr); } .customer-stats-container ul.customer-stats-grid-list li { padding: 0; } .customer-stats-container ul.customer-stats-grid-list li:nth-of-type(2) { border-top-right-radius: var(--border-radius-large); } .customer-stats-container ul.customer-stats-grid-list li:nth-of-type(7) { border-bottom-left-radius: var(--border-radius-large); } } @media screen and (max-width: 600px) { .customer-stats-container .customer-stats-main-image { margin-bottom: -8.5rem; } .customer-stats-container ul.customer-stats-grid-list { grid-template-columns: 1fr; grid-template-rows: repeat(8, 1fr); } .customer-stats-container .customer-stats-grid-item-wrapper { padding: 1.5rem 2rem 1.5rem 2rem; padding-bottom: 0; } .customer-stats-container .customer-stats-grid-item-wrapper:before { top: 2rem; } .customer-stats-container .customer-stats-grid-item-wrapper:after { top: 1.5rem; } .customer-stats-container .customer-stats-grid-item-number { font-size: 1.5rem; margin-bottom: 0.5rem; } .customer-stats-container .customer-stats-grid-item-text { font-size: 0.75rem; } .customer-stats-container ul.customer-stats-grid-list li { padding: 0; min-height: 100px; } .customer-stats-container ul.customer-stats-grid-list li:nth-of-type(2) { border-top-right-radius: unset; } .customer-stats-container ul.customer-stats-grid-list li:nth-of-type(7) { border-bottom-left-radius: unset; } .customer-stats-container ul.customer-stats-grid-list li:first-of-type { border-top-right-radius: var(--border-radius-large); } .customer-stats-container ul.customer-stats-grid-list li:last-of-type { border-bottom-left-radius: var(--border-radius-large); } } /* ---------- END: V2 CUSTOMER STATS ---------- */ /* ---------- V2 WHO ITS FOR ---------- */ .who-its-for-container { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 0; padding-top: 4rem; } .who-its-for-container .who-its-for-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .who-its-for-fancy-border-divider { position: relative; width: 100%; margin: 0 auto; display: flex; justify-content: center; } .who-its-for-fancy-border-divider svg { width: 100%; } .who-its-for-container .who-its-for-main-image { max-width: 300px; margin: 0 auto; margin-bottom: 0; } .who-its-for-container .who-its-for-main-image img { width: 100%; height: auto; } .who-its-for-container .who-its-for-bg-container { width: 100%; overflow-x: hidden; } .who-its-for-container .who-its-for-bg-container .who-its-for-bg-inner { width: 100%; height: 100%; overflow: visible; /* Allow overflow for the inner container */ } .who-its-for-container .who-its-for-bg-container .who-its-for-bg-inner .who-its-for-bg-svg-1 { z-index: -1; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 38.125rem; height: 100%; max-height: 49.375rem; flex-shrink: 0; border-radius: 49.375rem; background: linear-gradient(180deg, #EBF9FF 0%, #DBF1FB 100%); filter: blur(300px); } .who-its-for-container .who-its-for-bg-container .who-its-for-bg-inner .who-its-for-bg-svg-2 { top: 0; bottom: 0; left: 0; right: 0; align-items: center; justify-content: center; position: absolute; z-index: -1; width: 100%; } @media screen and (max-width: 768px) { .who-its-for-container .who-its-for-bg-container .who-its-for-bg-inner .who-its-for-bg-svg-1 { max-width: 100%; filter: blur(100px); } } @media screen and (max-width: 480px) { .who-its-for-container .who-its-for-bg-container .who-its-for-bg-inner .who-its-for-bg-svg-1 { filter: blur(80px); } } @media screen and (max-width: 600px) { .who-its-for-container .who-its-for-main-image img { margin-bottom: 1rem; } } /* ---------- END: V2 WHO ITS FOR ---------- */ /* ---------- V2 CHECK THESE BOXES ---------- */ .check-these-boxes-container { margin: 0 auto; max-width: var(--v2-header-width); background: unset; width: 100%; z-index: 3; position: relative; padding-top: 4rem; margin-bottom: -4rem; padding-bottom: 0; background: var(--white); } .check-these-boxes-container .check-these-boxes-inner { padding: var(--space-20); } .check-these-boxes-container .check-these-boxes-cta { margin-top: 2rem; } .check-these-boxes-container .check-these-boxes-cta .email-form-signup-cta { align-items: flex-start; margin-left: 0; } .check-these-boxes-container .check-these-boxes-two-column-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; } .check-these-boxes-container .check-these-boxes-two-column-grid .check-these-boxes-two-column-grid-item:nth-child(1) { padding-right: var(--space-45); } .check-these-boxes-container .check-these-boxes-list { list-style: none; padding: 0; margin: 0; } .check-these-boxes-container .check-these-boxes-list li { display: inline-flex; padding: 1rem; justify-content: center; align-items: center; gap: 1rem; border-radius: var(--border-radius-regular); border: 1px solid rgba(0, 0, 0, 0.02); opacity: 0.9989; background: rgba(255, 255, 255, 0.80); box-shadow: 0px 1px 1px 0px rgba(45, 91, 134, 0.04), 0px 3px 3px 0px rgba(45, 65, 134, 0.03), 0px 6px 4px 0px rgba(45, 75, 134, 0.02), 0px 11px 4px 0px rgba(45, 86, 134, 0.01); margin-bottom: 1rem; } /* Staggered effect for check-these-boxes-list items */ .check-these-boxes-container .check-these-boxes-list li:nth-child(1) { transform: translateX(0); } .check-these-boxes-container .check-these-boxes-list li:nth-child(2) { transform: translateX(40px); } .check-these-boxes-container .check-these-boxes-list li:nth-child(3) { transform: translateX(20px); } .check-these-boxes-container .check-these-boxes-list li:nth-child(4) { transform: translateX(60px); } .check-these-boxes-container .check-these-boxes-list .check-these-boxes-list-item-text { margin-bottom: 0; } .check-these-boxes-container .check-these-boxes-list .check-these-boxes-list-item-icon { border-radius: 3rem; border: 1px solid #C9E9F8; display: flex; width: 2rem; height: 2rem; padding: 0.125rem; justify-content: center; align-items: center; } .check-these-boxes-container .check-these-boxes-bottom-image { width: 100%; margin: 0 auto; margin-top: var(--space-20); position: relative; bottom: var(--space-45); margin-left: -180px; z-index: -1; } .check-these-boxes-container .check-these-boxes-bottom-image img { width: 100%; } @media screen and (max-width: 1300px) { .check-these-boxes-container .check-these-boxes-list li { max-width: 460px; } } @media screen and (max-width: 1024px) { .check-these-boxes-container .check-these-boxes-two-column-grid { grid-template-columns: 1fr; gap: 2rem; } .check-these-boxes-container .check-these-boxes-list { display: flex; align-items: center; justify-content: center; flex-direction: column; } .check-these-boxes-container .check-these-boxes-two-column-grid .check-these-boxes-two-column-grid-item:nth-child(1) { padding-right: 0; } .check-these-boxes-container .check-these-boxes-list li { max-width: 764px; width: 100%; transform: none !important; justify-content: flex-start; } } /* ---------- END: V2 CHECK THESE BOXES ---------- */ /* ---------- V2 OUR FEATURES ---------- */ .our-features-container { margin: 0 auto; max-width: var(--max-width-1200); background: unset; width: 100%; z-index: 3; position: relative; padding-bottom: 0; } .our-features-container .our-features-inner { padding: var(--space-20); } .our-features-container .our-features-main-image { max-width: 400px; margin: 0 auto; margin-bottom: -40px; } .our-features-container .our-features-main-image img { width: 100%; height: auto; } .our-features-container .our-features-grid { margin-top: 3rem; display: flex; flex-direction: column; align-items: center; justify-content: center; } .our-features-container ul.our-features-grid-list-default { display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; background: none; padding: 0; margin: calc(-1 * var(--space-10)); gap: 1rem; } .our-features-container ul.our-features-grid-list-default2 { display: grid; grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: auto auto auto; grid-auto-rows: 1fr; gap: 1rem; } .our-features-container ul.our-features-grid-list-b2c, .our-features-container ul.our-features-grid-list-b2bsaas, .our-features-container ul.our-features-grid-list-b2benterprise, .our-features-container ul.our-features-grid-list-fintech, .our-features-container ul.our-features-grid-list-education, .our-features-container ul.our-features-grid-list-insurtech, .our-features-container ul.our-features-grid-list-healthtech, .our-features-container ul.our-features-grid-list-startups, .our-features-container ul.our-features-grid-list-ai { display: grid; grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: auto auto auto; grid-auto-rows: 1fr; gap: 1rem; } .our-features-container ul.our-features-grid-list { padding: 0; } .our-features-container ul.our-features-grid-list li.bento-card { background: var(--white); border-radius: 1.5rem; border: none; min-height: 220px; transition: box-shadow 0.2s, transform 0.2s; outline: none; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin: var(--space-10); background: #F6F7FA; height: 100%; margin: 0; } .our-features-container .our-features-grid-item-wrapper { padding: 2.25rem 2rem 2rem 2rem; width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; text-align: left; overflow: hidden; } .our-features-container .our-features-grid-item-image { display: flex; align-items: center; justify-content: center; margin: 0 auto; position: relative; z-index: 0; } .our-features-container .our-features-grid-item-image img { width: 100%; object-fit: contain; } .our-features-container .our-features-grid-item-title-and-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; text-align: left; z-index: 1; } .our-features-container .our-features-grid-item-title { font-size: 1rem; font-weight: 600; color: var(--v2-black1); margin-bottom: 1rem; line-height: 1.2; } .our-features-container .our-features-grid-item-text { font-size: 0.875rem; color: var(--v2-gray-dark); font-weight: 400; line-height: 1.5; margin: 0; } /* Used https://cssgrid-generator.netlify.app/ to generate the bento grid */ .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(1) { grid-area: 1 / 1 / 2 / 7; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(2) { grid-area: 1 / 7 / 2 / 11; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(3) { grid-area: 1 / 11 / 2 / 16; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(4) { grid-area: 2 / 1 / 3 / 5; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(5) { grid-area: 2 / 5 / 3 / 11; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(6) { grid-area: 2 / 11 / 3 / 16; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(1) .our-features-grid-item-image { max-width: 234px; bottom: 0; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(2) .our-features-grid-item-image { max-width: 240px; bottom: -50px; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(3) .our-features-grid-item-image { max-width: 208px; bottom: -10px; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(4) .our-features-grid-item-image { max-width: 248px; bottom: -40px; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(5) .our-features-grid-item-image { max-width: 420px; bottom: -20px; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(6) .our-features-grid-item-image { max-width: unset; bottom: -20px; margin-left: -2rem; margin-right: -2rem; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(1) { grid-area: 1 / 1 / 2 / 2 !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(2) { grid-area: 1 / 2 / 2 / 3 !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(3) { grid-area: 2 / 1 / 3 / 3 !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(4) { grid-area: 3 / 1 / 4 / 2 !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(5) { grid-area: 3 / 2 / 4 / 3 !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(1) .our-features-grid-item-image { max-width: unset !important; bottom: unset !important; top: -30px !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(2) .our-features-grid-item-image { max-width: unset !important; bottom: unset !important; margin-top: 40px !important; margin-bottom: -80px !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(3) .our-features-grid-item-image { max-width: unset !important; bottom: unset !important; margin-bottom: -80px !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(4) .our-features-grid-item-image { max-width: 260px !important; bottom: unset !important; margin-top: 30px !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(5) .our-features-grid-item-image { max-width: unset !important; bottom: unset !important; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(1) { grid-area: 1 / 1 / 2 / 2 !important; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(2) { grid-area: 1 / 2 / 2 / 3 !important; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(3) { grid-area: 2 / 1 / 3 / 3 !important; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(4) { grid-area: 3 / 1 / 4 / 2 !important; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(5) { grid-area: 3 / 2 / 4 / 3 !important; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(1) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(3) .our-features-grid-item-image { margin-top: 40px; margin-bottom: -10px; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(4) .our-features-grid-item-image { top: -10px; margin-bottom: -60px; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(5) .our-features-grid-item-image { top: -200px; margin-bottom: -230px; } .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(1) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(3) .our-features-grid-item-image { margin-top: 40px; margin-bottom: -10px; } .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(4) .our-features-grid-item-image { top: -10px; margin-bottom: -60px; } .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(5) .our-features-grid-item-image { top: -200px; margin-bottom: -230px; } .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(1) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(3) .our-features-grid-item-image { margin-top: 40px; margin-bottom: -10px; } .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(4) .our-features-grid-item-image { top: -10px; margin-bottom: -60px; } .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(5) .our-features-grid-item-image { top: -200px; margin-bottom: -230px; } .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(1) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(3) .our-features-grid-item-image { margin-top: 40px; margin-bottom: -10px; } .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(4) .our-features-grid-item-image { top: -10px; margin-bottom: -60px; } .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(5) .our-features-grid-item-image { top: -200px; margin-bottom: -230px; } .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(1) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(3) .our-features-grid-item-image { margin-top: 40px; margin-bottom: -10px; } .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(4) .our-features-grid-item-image { top: -10px; margin-bottom: -60px; } .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(5) .our-features-grid-item-image { top: -200px; margin-bottom: -230px; } .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(1) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(3) .our-features-grid-item-image { margin-top: 40px; margin-bottom: -10px; } .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(4) .our-features-grid-item-image { top: -10px; margin-bottom: -60px; } .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(5) .our-features-grid-item-image { top: -200px; margin-bottom: -230px; } .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(1) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(3) .our-features-grid-item-image { margin-top: 40px; margin-bottom: -10px; } .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(4) .our-features-grid-item-image { top: -10px; margin-bottom: -60px; } .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(5) .our-features-grid-item-image { top: -200px; margin-bottom: -230px; } .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(1) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(3) .our-features-grid-item-image { margin-top: 40px; margin-bottom: -10px; } .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(4) .our-features-grid-item-image { top: -10px; margin-bottom: -60px; } .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(5) .our-features-grid-item-image { top: -200px; margin-bottom: -230px; } .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(1) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(3) .our-features-grid-item-image { margin-top: 40px; margin-bottom: -10px; } .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(4) .our-features-grid-item-image { top: -10px; margin-bottom: -60px; } .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(5) .our-features-grid-item-image { top: -200px; margin-bottom: -230px; } /* Responsive: stack cards on mobile */ @media screen and (max-width: 1200px) { .our-features-container ul.our-features-grid-list-default { grid-template-columns: repeat(8, 1fr); } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(1) { grid-area: 1 / 1 / 2 / 5; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(2) { grid-area: 1 / 5 / 2 / 7; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(3) { grid-area: 1 / 7 / 2 / 9; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(4) { grid-area: 2 / 1 / 3 / 3; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(5) { grid-area: 2 / 3 / 3 / 7; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(6) { grid-area: 2 / 7 / 3 / 9; } } @media screen and (max-width: 992px) { .our-features-container ul.our-features-grid-list-default { grid-template-columns: repeat(6, 1fr); } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(1) { grid-area: 1 / 1 / 2 / 4; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(2) { grid-area: 1 / 4 / 2 / 7; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(3) { grid-area: 2 / 1 / 3 / 4; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(4) { grid-area: 2 / 4 / 3 / 7; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(5) { grid-area: 3 / 1 / 4 / 4; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(6) { grid-area: 3 / 4 / 4 / 7; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(1) .our-features-grid-item-image { top: 0 !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(2) .our-features-grid-item-image { max-width: 240px !important; margin-top: 20px !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(3) .our-features-grid-item-image { } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(4) .our-features-grid-item-image { max-width: 220px !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(5) .our-features-grid-item-image { } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(3) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(4) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(3) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(4) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(3) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(4) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(3) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(4) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(3) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(4) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(3) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(4) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(3) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(4) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(3) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(4) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(2) .our-features-grid-item-image { top: 30px; } .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(3) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(4) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(5) .our-features-grid-item-image {} } @media screen and (max-width: 768px) { .our-features-container ul.our-features-grid-list-default { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(1) { grid-area: 1 / 1 / 2 / 3; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(2) { grid-area: 1 / 3 / 2 / 5; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(3) { grid-area: 2 / 1 / 3 / 3; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(4) { grid-area: 2 / 3 / 3 / 5; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(5) { grid-area: 3 / 1 / 4 / 3; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(6) { grid-area: 3 / 3 / 4 / 5; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(1) .our-features-grid-item-image { } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(2) .our-features-grid-item-image { } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(3) .our-features-grid-item-image { bottom: 20px; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(4) .our-features-grid-item-image { bottom: -20px; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(5) .our-features-grid-item-image { } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(6) .our-features-grid-item-image { } .our-features-container ul.our-features-grid-list-default2 { grid-template-columns: 1fr !important; gap: var(--space-10); } .our-features-container ul.our-features-grid-list-default2 li.bento-card { grid-area: auto !important; min-height: 180px; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(1) { grid-area: 1 / 1 / 2 / 2 !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(2) { grid-area: 2 / 1 / 3 / 2 !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(3) { grid-area: 3 / 1 / 4 / 2 !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(4) { grid-area: 4 / 1 / 5 / 2 !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(5) { grid-area: 5 / 1 / 6 / 2 !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(1) .our-features-grid-item-image { margin-top: 20px !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(2) .our-features-grid-item-image { } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(3) .our-features-grid-item-image { bottom: unset !important; margin-bottom: -40px !important } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(4) .our-features-grid-item-image { bottom: unset !important; margin-top: 0 !important; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(5) .our-features-grid-item-image { max-width: 200px !important } .our-features-container ul.our-features-grid-list-b2c, .our-features-container ul.our-features-grid-list-b2bsaas, .our-features-container ul.our-features-grid-list-b2benterprise, .our-features-container ul.our-features-grid-list-fintech, .our-features-container ul.our-features-grid-list-education, .our-features-container ul.our-features-grid-list-insurtech, .our-features-container ul.our-features-grid-list-healthtech, .our-features-container ul.our-features-grid-list-startups, .our-features-container ul.our-features-grid-list-ai { grid-template-columns: 1fr !important; gap: var(--space-10); } .our-features-container ul.our-features-grid-list-b2c li.bento-card, .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card, .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card, .our-features-container ul.our-features-grid-list-fintech li.bento-card, .our-features-container ul.our-features-grid-list-education li.bento-card, .our-features-container ul.our-features-grid-list-insurtech li.bento-card, .our-features-container ul.our-features-grid-list-healthtech li.bento-card, .our-features-container ul.our-features-grid-list-startups li.bento-card, .our-features-container ul.our-features-grid-list-ai li.bento-card { grid-area: auto !important; min-height: 180px; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(1), .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(1) { grid-area: 1 / 1 / 2 / 2 !important; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(2), .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(2) { grid-area: 2 / 1 / 3 / 2 !important; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(3), .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(3) { grid-area: 3 / 1 / 4 / 2 !important; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(4), .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(4) { grid-area: 4 / 1 / 5 / 2 !important; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(5), .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(5) { grid-area: 5 / 1 / 6 / 2 !important; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(3) .our-features-grid-item-title-and-text, .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(3) .our-features-grid-item-title-and-text, .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(3) .our-features-grid-item-title-and-text, .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(3) .our-features-grid-item-title-and-text, .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(3) .our-features-grid-item-title-and-text, .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(3) .our-features-grid-item-title-and-text, .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(3) .our-features-grid-item-title-and-text, .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(3) .our-features-grid-item-title-and-text, .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(3) .our-features-grid-item-title-and-text, .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(3) .our-features-grid-item-title-and-text .our-features-grid-item-title, .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(3) .our-features-grid-item-title-and-text .our-features-grid-item-title, .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(3) .our-features-grid-item-title-and-text .our-features-grid-item-title, .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(3) .our-features-grid-item-title-and-text .our-features-grid-item-title, .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(3) .our-features-grid-item-title-and-text .our-features-grid-item-title, .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(3) .our-features-grid-item-title-and-text .our-features-grid-item-title, .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(3) .our-features-grid-item-title-and-text .our-features-grid-item-title, .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(3) .our-features-grid-item-title-and-text .our-features-grid-item-title, .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(3) .our-features-grid-item-title-and-text .our-features-grid-item-title {} } @media screen and (max-width: 576px) { .our-features-container ul.our-features-grid-list-default { grid-template-columns: 1fr; grid-template-rows: auto; gap: var(--space-10); } .our-features-container ul.our-features-grid-list-default li.bento-card { grid-area: auto !important; min-height: 180px; } .our-features-container .our-features-grid-item-wrapper { padding: 1.25rem 1rem 1rem 1rem; } .our-features-container .our-features-grid-item-title { font-size: 1.1rem; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(1) .our-features-grid-item-image { } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(2) .our-features-grid-item-image { } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(3) .our-features-grid-item-image { bottom: 10px; max-width: 180px; margin-top: 10px; margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(4) .our-features-grid-item-image { bottom: 0; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(5) .our-features-grid-item-image { bottom: 0; } .our-features-container ul.our-features-grid-list-default li.bento-card:nth-child(6) .our-features-grid-item-image { margin-left: -1rem; margin-right: -1rem; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(1) .our-features-grid-item-image { } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(2) .our-features-grid-item-image { margin-bottom: -60px !important } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(3) .our-features-grid-item-image { margin-bottom: 40px !important; margin-top: 0 !important; width: calc(100% + var(--space-90) + var(--space-90)); margin-left: calc(var(--space-90) * -1); margin-right: calc(var(--space-90) * -1); } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(4) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-default2 li.bento-card:nth-child(5) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(2) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(3) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(4) .our-features-grid-item-image { margin-bottom: -20px; } .our-features-container ul.our-features-grid-list-b2c li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(2) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(3) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(4) .our-features-grid-item-image { margin-bottom: -20px; } .our-features-container ul.our-features-grid-list-b2bsaas li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(2) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(3) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(4) .our-features-grid-item-image { margin-bottom: -20px; } .our-features-container ul.our-features-grid-list-b2benterprise li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(2) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(3) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(4) .our-features-grid-item-image { margin-bottom: -20px; } .our-features-container ul.our-features-grid-list-fintech li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(2) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(3) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(4) .our-features-grid-item-image { margin-bottom: -20px; } .our-features-container ul.our-features-grid-list-education li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(2) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(3) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(4) .our-features-grid-item-image { margin-bottom: -20px; } .our-features-container ul.our-features-grid-list-insurtech li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(2) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(3) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(4) .our-features-grid-item-image { margin-bottom: -20px; } .our-features-container ul.our-features-grid-list-healthtech li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(2) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(3) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(4) .our-features-grid-item-image { margin-bottom: -20px; } .our-features-container ul.our-features-grid-list-startups li.bento-card:nth-child(5) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(1) .our-features-grid-item-image {} .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(2) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(3) .our-features-grid-item-image { margin-bottom: 20px; } .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(4) .our-features-grid-item-image { margin-bottom: -20px; } .our-features-container ul.our-features-grid-list-ai li.bento-card:nth-child(5) .our-features-grid-item-image {} } /* ---------- END: V2 OUR FEATURES ---------- */ /* ---------- V2 HOW IT WORKS VIDEO ---------- */ .how-it-works-video-container { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 0; padding-top: 4rem; margin-bottom: 4rem; } .how-it-works-video-container .how-it-works-video-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; margin-bottom: -4rem; } .how-it-works-video-fancy-border-divider { position: relative; width: 100%; margin: 0 auto; display: flex; justify-content: center; } .how-it-works-video-fancy-border-divider svg { width: 100%; } .how-it-works-video-container .home-hero-grid-visual-section { top: -5rem; } .how-it-works-video-container .home-hero-grid-visual-section .tab-pane { background: var(--white); } .how-it-works-video-container .home-hero-grid-visual-section .tab-pane .card5 { border-radius: var(--border-radius-regular); background: rgba(255, 255, 255, 0.80); box-shadow: 0px 1px 1px 0px rgba(0, 61, 118, 0.04), 0px 3px 3px 0px rgba(0, 61, 118, 0.03), 0px 6px 4px 0px rgba(0, 83, 118, 0.02), 0px 11px 4px 0px rgba(0, 83, 118, 0.01), 0px 32px 24px -12px rgba(0, 76, 118, 0.06), 0px 0px 0px 1px rgba(1, 97, 151, 0.04); backdrop-filter: blur(26.200000762939453px); } .how-it-works-video-container .how-it-works-video-bg-container { width: 100%; overflow-x: hidden; } .how-it-works-video-container .how-it-works-video-bg-container .how-it-works-video-bg-inner { width: 100%; height: 100%; overflow: visible; /* Allow overflow for the inner container */ } .how-it-works-video-container .how-it-works-video-bg-container .how-it-works-video-bg-inner .how-it-works-video-bg-svg-1 { z-index: -1; position: absolute; left: 50%; transform: translateX(-50%); width: 100%; max-width: 38.125rem; flex-shrink: 0; border-radius: 49.375rem; background: linear-gradient(180deg, #EBF9FF 0%, #DBF1FB 100%); filter: blur(150px); height: 300px; right: 0; top: unset; max-width: 960px; margin-top: 7rem; } @media screen and (max-width: 768px) { .how-it-works-video-container .how-it-works-video-bg-container .how-it-works-video-bg-inner .how-it-works-video-bg-svg-1 { max-width: 100%; filter: blur(50px); } } @media screen and (max-width: 480px) { .how-it-works-video-container .how-it-works-video-bg-container .how-it-works-video-bg-inner .how-it-works-video-bg-svg-1 { filter: blur(30px); } } @media screen and (max-width: 600px) { .how-it-works-video-container .how-it-works-video-main-image img { margin-bottom: 1rem; } } /* ---------- END: V2 HOW IT WORKS VIDEO ---------- */ /* ---------- V2 CUSTOMER TESTIMONIALS ---------- */ .customer-testimonials-container { width: 100%; z-index: 1; position: relative; padding-bottom: 4rem; padding-top: 8rem; background: white; } .customer-testimonials-container .customer-testimonials-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200) !important; z-index: 3; position: relative; padding-bottom: 2rem; } .customer-testimonials-container .review-site-badges { padding-top: 0; padding-bottom: 0; } .customer-testimonials-container .customer-testimonials-main-image { overflow-x: hidden; max-width: 400px; margin: 0 auto; z-index: -1; position: absolute; top: 0; right: 0; left: 0; margin-top: -160px; display: flex; align-items: flex-start; justify-content: center; } .customer-testimonials-container .customer-testimonials-main-image img { width: 100%; height: auto; } .customer-testimonials-container .testimonials-container .masonry .card { border-radius: 1.375rem; border: 0.5px solid rgba(0, 0, 0, 0.02); background: rgba(236, 237, 243, 0.32); padding: 0.625rem; justify-content: center; align-items: center; flex-shrink: 0; } .customer-testimonials-container .testimonials-container .masonry .card .px-4 { border-radius: 0.75rem; background: rgba(255, 255, 255, 0.85); box-shadow: 0px 1px 2px 0px rgba(46, 63, 95, 0.08), 0px 4px 6px 0px rgba(46, 63, 95, 0.04), 0px 24px 40px -16px rgba(37, 60, 104, 0.08); } .customer-testimonials-container .testimonials-container .masonry .card .testiomnial-logo { padding-bottom: 1rem; } .customer-testimonials-container .testimonials-container .masonry .card .customer-testimonial-name { font-weight: var(--font-weight-medium); } .customer-testimonials-container .testimonials-container .masonry .card .customer-blockquote { font-weight: var(--font-weight-light); } .customer-testimonials-container .testimonials-container .masonry .card .customer-blockquote:before { padding-top: 1rem; content: ""; display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='351' height='2' viewBox='0 0 351 2' fill='none'%3E%3Cpath d='M0 1L351 1.00003' stroke='rgba(236, 237, 243, 1)'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% auto; width: 100%; height: 2px; margin-top: var(--space-20); margin-left: -1.5rem; margin-right: -1.5rem; width: calc(100% + 1.5rem + 1.5rem); } .customer-testimonials-container .testimonials-container .masonry .card .case-study-internal-link { margin: 0; background: none; display: flex; align-items: flex-start; justify-content: space-between; font-weight: var(--font-weight-light); color: var(--black); } .customer-testimonials-container .testimonials-container .masonry .card .case-study-internal-link:after { content: "→"; font-size: 1.25rem; font-weight: var(--font-weight-regular); color: var(--black); text-decoration: none; padding-left: 0.5rem; } .customer-testimonials-container .testimonials-container .masonry .card .case-study-internal-link strong { font-weight: var(--font-weight-medium); } @media screen and (max-width: 1024px) { .customer-testimonials-container { padding-top: 6rem; } .customer-testimonials-container .customer-testimonials-main-image { margin-top: -90px; } .customer-testimonials-main-content { margin-top: 60px; } } @media screen and (max-width: 768px) { .customer-testimonials-container { padding-top: 3rem; } .customer-testimonials-container .customer-testimonials-main-image { /* margin-top: -240px; */ } .customer-testimonials-main-content { margin-top: 80px; } } @media screen and (max-width: 600px) { .customer-testimonials-container { padding-top: 1rem; } .customer-testimonials-container .customer-testimonials-main-image { margin-top: -60px; } .customer-testimonials-main-content { margin-top: 100px; } } @media screen and (max-width: 469px) { .customer-testimonials-container .customer-testimonials-main-image { /* margin-top: -130px; */ } .customer-testimonials-main-content { margin-top: 0; } .customer-testimonials-container .testimonials-container .masonry { margin: 0; } } @media screen and (max-width: 350px) { .customer-testimonials-container .customer-testimonials-main-image { /* margin-top: -180px; */ } .customer-testimonials-main-content { margin-top: 0; } } /* ---------- END: V2 CUSTOMER TESTIMONIALS ---------- */ /* ---------- V2 PRODUCT INTEGRATIONS ---------- */ .product-integrations-container { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 5rem; padding-top: 8rem; overflow: hidden; } .product-integrations-container .product-integrations-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .product-integrations-container .product-integrations-inner .v2-headline-badge, .product-integrations-container .product-integrations-inner .v2-headline-container { z-index: 2; position: relative; } .product-integrations-container .integrations-container { padding: 0 var(--space-20); } .product-integrations-fancy-border-divider { position: relative; width: 100%; margin: 0 auto; display: flex; justify-content: center; } .product-integrations-fancy-border-divider svg { width: 100%; } .product-integrations-container .product-integrations-main-image { position: absolute; width: 800px; max-width: 800px; left: 50%; transform: translateX(-50%); z-index: 1; /* Adjust top as needed to align with .v2-headline-badge */ top: -105px; right: auto; margin-bottom: 0; } .product-integrations-container .product-integrations-main-image img { width: 100%; height: auto; } .product-integrations-container .integrations-container .row { display: grid !important; grid-template-columns: repeat(5, 1fr); justify-items: center; align-items: stretch; margin: 0; padding: 0; border: 0.5px solid #E6E8EE; border-bottom: 0; } .product-integrations-container .integrations-container a { display: flex; flex-direction: column; align-items: center; justify-content: center; background: #fff; border: 0.5px solid #E6E8EE; /* border-radius: 1.25rem; */ /* box-shadow: 0 1px 4px 0 rgba(46, 125, 243, 0.04); */ padding: 2rem 1rem 1.25rem 1rem; min-height: 80px; min-width: 0; transition: box-shadow 0.2s, transform 0.2s; text-decoration: none; outline: none; display: flex; flex-direction: row; align-items: center; justify-content: center; position: relative; text-align: left; } /* Remove Bootstrap grid spacing for this section */ .product-integrations-container .integrations-container .row > [class*='col-'] { padding: 1.5rem !important; margin: 0 !important; width: 100%; max-width: unset; } .product-integrations-container .integrations-container a:after { content: ''; display: block; width: 100%; height: 100%; background-image: url('https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/c29fc1b0-ba36-4eab-82d6-5f323857e055.svg'); background-size: contain; background-position: center; position: absolute; bottom: calc(-1 * var(--space-10) - 0.5px); right: calc(-1 * var(--space-10) - 0.5px); pointer-events: none; height: var(--space-20); width: var(--space-20); z-index: 2; } .product-integrations-container .integrations-container a:before { content: ''; display: block; width: 100%; height: 100%; background: var(--white); border-radius: 100%; position: absolute; bottom: calc(-1 * var(--space-10) - 0.5px); right: calc(-1 * var(--space-10) - 0.5px); pointer-events: none; height: var(--space-20); width: var(--space-20); z-index: 1; } /* Hide pseudo elements for right-most tiles in each row */ .product-integrations-container .integrations-container a:nth-of-type(5n):after, .product-integrations-container .integrations-container a:nth-of-type(5n):before, /* Hide pseudo elements for all tiles in the last row */ .product-integrations-container .integrations-container a:nth-last-of-type(-n+5):after, .product-integrations-container .integrations-container a:nth-last-of-type(-n+5):before { display: none; } .product-integrations-container .integrations-container a .integration-item-fancy-border-dressing { opacity: 0; transition: all 0.3s ease-in-out; position: absolute; top: 0; right: 0; display: block; left: 0; bottom: 0; margin: var(--space-10); } .product-integrations-container .integrations-container a .integration-item-fancy-border-dressing img { position: absolute; pointer-events: none; } .product-integrations-container .integrations-container a .integration-item-fancy-border-dressing img:nth-child(1) { top: var(--space-5); left: var(--space-5); transform: rotate(0deg); } .product-integrations-container .integrations-container a .integration-item-fancy-border-dressing img:nth-child(2) { top: var(--space-5); right: var(--space-5); transform: rotate(90deg); } .product-integrations-container .integrations-container a .integration-item-fancy-border-dressing img:nth-child(3) { bottom: var(--space-5); left: var(--space-5); transform: rotate(270deg); } .product-integrations-container .integrations-container a .integration-item-fancy-border-dressing img:nth-child(4) { bottom: var(--space-5); right: var(--space-5); transform: rotate(180deg); } .product-integrations-container .integrations-container a:focus .integration-item-fancy-border-dressing, .product-integrations-container .integrations-container a:hover .integration-item-fancy-border-dressing, .product-integrations-container .integrations-container a:active .integration-item-fancy-border-dressing { opacity: 1; transition: all 0.3s ease-in-out; /* box-shadow: 0px 1px 1px 0px rgba(0, 61, 118, 0.04), 0px 3px 3px 0px rgba(0, 61, 118, 0.03), 0px 6px 4px 0px rgba(0, 83, 118, 0.02), 0px 11px 4px 0px rgba(0, 83, 118, 0.01), 0px 32px 24px -12px rgba(0, 76, 118, 0.06), 0px 0px 0px 1px rgba(1, 97, 151, 0.04); */ backdrop-filter: blur(26.200000762939453px); } .product-integrations-container .integrations-container a .product-integration-logo { max-width: var(--space-30); padding-right: var(--space-10); object-fit: contain; display: block; z-index: 2; } .product-integrations-container .integrations-container a .product-integration-company { margin: 0; font-size: 1rem; font-weight: 500; color: var(--v2-black1); text-align: left; line-height: 1.2; z-index: 2; } @media (max-width: 1200px) { .product-integrations-container .integrations-container .row { grid-template-columns: repeat(3, 1fr); } /* RESET: Hide pseudo elements for right-most tiles in each row */ .product-integrations-container .integrations-container a:nth-of-type(5n):after, .product-integrations-container .integrations-container a:nth-of-type(5n):before, /* RESET: Hide pseudo elements for all tiles in the last row */ .product-integrations-container .integrations-container a:nth-last-of-type(-n+5):after, .product-integrations-container .integrations-container a:nth-last-of-type(-n+5):before { display: unset; } .product-integrations-container .integrations-container a:nth-of-type(3n):after, .product-integrations-container .integrations-container a:nth-of-type(3n):before, .product-integrations-container .integrations-container a:nth-last-of-type(-n+3):after, .product-integrations-container .integrations-container a:nth-last-of-type(-n+3):before { display: none; } } @media (max-width: 768px) { .product-integrations-container .product-integrations-main-image { margin-left: -50px; margin-right: -50px; width: calc(100% + 50px + 50px); left: calc(50% + 50px); max-width: unset; } } @media (max-width: 700px) { .product-integrations-container .integrations-container .row { grid-template-columns: repeat(2, 1fr); } .product-integrations-container .integrations-container a { justify-content: flex-start; } .product-integrations-container .integrations-container a .product-integration-logo { } .product-integrations-container .integrations-container a .product-integration-company { font-size: 0.95rem; } /* RESET: Hide pseudo elements for right-most tiles in each row */ .product-integrations-container .integrations-container a:nth-of-type(3n):after, .product-integrations-container .integrations-container a:nth-of-type(3n):before, /* RESET: Hide pseudo elements for all tiles in the last row */ .product-integrations-container .integrations-container a:nth-last-of-type(-n+3):after, .product-integrations-container .integrations-container a:nth-last-of-type(-n+3):before { display: unset; } .product-integrations-container .integrations-container a:nth-of-type(2n):after, .product-integrations-container .integrations-container a:nth-of-type(2n):before, .product-integrations-container .integrations-container a:nth-last-of-type(-n+2):after, .product-integrations-container .integrations-container a:nth-last-of-type(-n+2):before { display: none; } } @media (max-width: 400px) { .product-integrations-container .integrations-container .row { grid-template-columns: 1fr; } /* RESET: Hide pseudo elements for right-most tiles in each row */ .product-integrations-container .integrations-container a:nth-of-type(2n):after, .product-integrations-container .integrations-container a:nth-of-type(2n):before, /* RESET: Hide pseudo elements for all tiles in the last row */ .product-integrations-container .integrations-container a:nth-last-of-type(-n+2):after, .product-integrations-container .integrations-container a:nth-last-of-type(-n+2):before { display: unset; } .product-integrations-container .integrations-container a:after, .product-integrations-container .integrations-container a:before { display: none !important; } .product-integrations-container .integrations-container .row > [class*='col-'] { min-height: unset; padding: 1rem 1.5rem !important; } .product-integrations-container .integrations-container a .integration-item-fancy-border-dressing { margin: 0; } } /* ---------- END: V2 PRODUCT INTEGRATIONS ---------- */ /* ---------- V2 COLORFUL SIGNUP CTA ---------- */ .colorful-signup-cta-container { margin: 0 auto; text-align: center; padding-top: 4rem; padding-bottom: 2rem; max-width: var(--v2-header-width); margin-bottom: 0; position: relative; z-index: 4; } .colorful-signup-cta-inner { position: relative; z-index: 2; width: 100%; max-width: 100%; overflow: hidden; padding-top: 5rem; border-radius: var(--border-radius-large); background: rgba(255, 255, 255, 0.92); box-shadow: 0px 1px 1px 0px rgba(0, 61, 118, 0.04), 0px 3px 3px 0px rgba(0, 61, 118, 0.03), 0px 6px 4px 0px rgba(0, 83, 118, 0.02), 0px 11px 4px 0px rgba(0, 83, 118, 0.01), 0px 32px 24px -12px rgba(0, 76, 118, 0.06), 0px 0px 0px 1px rgba(1, 97, 151, 0.04); backdrop-filter: blur(26.200000762939453px); } .colorful-signup-cta-container:before { content: ""; z-index: -1; position: absolute; left: 50%; transform: translateX(-50%); width: 100%; height: 100px; right: 0; top: 220px; max-width: calc(var(--v2-header-width) * 0.7); margin-top: -4rem; border-radius: 80rem; background: rgba(154, 223, 255, 0.72); filter: blur(100px); } .colorful-signup-cta-container .v2-headline-container { padding: var(--space-10); } .colorful-signup-cta-cta { z-index: 2; position: relative; } .colorful-signup-cta-grid-image-container { width: 100%; position: relative; /* padding-top: 21.12%; */ /* Calculated based on inner dimensions 12.52981 / 59.32913 */ padding-top: 5rem; height: 0; } .colorful-signup-cta-grid-image-container-inner { width: 59.32913rem; height: 12.52981rem; flex-shrink: 0; position: absolute; top: -7.5rem; /* Adjust as needed to recreate negative margin effect */ left: 50%; transform: translateX(-50%); /* Horizontal centering */ z-index: 1; } .colorful-signup-cta-grid-image-container .grid-image-vector-1, .colorful-signup-cta-grid-image-container .grid-image-vector-2 { position: absolute; top: 0; left: 0; right: 0; } .colorful-signup-cta-grid-image-container .grid-image-vector-1 svg, .colorful-signup-cta-grid-image-container .grid-image-vector-2 svg { max-width: 100%; width: 100%; } .colorful-signup-cta-grid-image-container .grid-image-vector-1 { margin: 0 auto; width: calc(59.32913rem - (1.197px * 11)); height: 12.52981rem; transform: scale(1.5); flex-shrink: 0; /* stroke-width: 1.197px; stroke: rgba(31, 116, 241, 0.20); */ stroke-width: 1px; stroke: rgba(14, 63, 126, 0.12); mix-blend-mode: multiply; stroke-dasharray: 20000; stroke-dashoffset: 20000; opacity: 0; animation: draw-grid 2s ease-out forwards; } .colorful-signup-cta-grid-image-container .grid-image-vector-2 { width: 59.32913rem; height: 12.52981rem; flex-shrink: 0; stroke-width: 1.197px; stroke: rgba(31, 116, 241, 0.32); mix-blend-mode: multiply; stroke-dasharray: 20000; stroke-dashoffset: 20000; opacity: 0; animation: draw-grid 2s ease-out forwards; } .colorful-signup-cta-grid-image-container .grid-image-vector-3 { display: none; border-radius: 59.5rem; background: #DFF2FB; filter: blur(300px); width: 59.5rem; height: 23.1875rem; flex-shrink: 0; position: absolute; left: 0; right: 0; top: 12rem; z-index: -1; } .colorful-signup-cta-grid-image-container .grid-image-vector-4 { display: none; width: 59.5rem; height: 32.8125rem; flex-shrink: 0; border-radius: 59.5rem; background: #DFF2FB; filter: blur(290.95001220703125px); position: absolute; left: 0; right: 0; top: 15rem; z-index: -1; } .colorful-signup-cta-grid-image-container .grid-image-vector-5 { width: 1.92769rem; height: 3.85531rem; flex-shrink: 0; stroke-width: 1.197px; stroke: rgba(23, 177, 254, 0.00); position: absolute; top: 8.5rem; left: 19.2rem; rotate: -3deg; } .colorful-signup-cta-grid-image-container .grid-image-vector-6 { width: 1.92769rem; height: 3.85531rem; flex-shrink: 0; stroke-width: 1.197px; stroke: rgba(23, 177, 254, 0.00); position: absolute; left: 53.5em; top: 3.2rem; rotate: -88deg; } .colorful-signup-cta-grid-image-container .grid-image-vector-7 { width: 0.46794rem; height: 2.18838rem; flex-shrink: 0; stroke-width: 1.197px; stroke: rgba(23, 177, 254, 0.00); position: absolute; left: 12.4rem; rotate: 62.5deg; top: 3rem; } .colorful-signup-cta-grid-image-container .grid-image-vector-8 { display: none; width: 0.46794rem; height: 2.18838rem; flex-shrink: 0; stroke-width: 1.197px; stroke: rgba(23, 177, 254, 0.00); position: absolute; left: 33.3rem; } .colorful-signup-cta-grid-image-container .grid-image-vector-9 { display: none; transform: scale(1.5); width: calc(3.125rem * 4.66941572); height: 3.125rem; flex-shrink: 0; position: absolute; left: 10.5rem; top: 10rem; fill: rgba(59, 150, 216, 0.08); } .colorful-signup-cta-grid-image-container .grid-image-vector-1, .colorful-signup-cta-grid-image-container .grid-image-vector-2, .colorful-signup-cta-grid-image-container .grid-image-vector-5, .colorful-signup-cta-grid-image-container .grid-image-vector-6, .colorful-signup-cta-grid-image-container .grid-image-vector-7, .colorful-signup-cta-grid-image-container .grid-image-vector-8, .colorful-signup-cta-grid-image-container .grid-image-vector-9 { /* Ensure they are initially hidden before animation */ stroke-dasharray: 20000; stroke-dashoffset: 20000; opacity: 0; /* Add initial opacity */ animation: draw-grid 2s ease-out forwards; /* Remove delay here */ } .colorful-signup-cta-grid-image-container .grid-image-vector-1 { animation-delay: 0.0s; } .colorful-signup-cta-grid-image-container .grid-image-vector-2 { animation-delay: 0.0s; } .colorful-signup-cta-grid-image-container .grid-image-vector-5 { animation-delay: 2.5s; } .colorful-signup-cta-grid-image-container .grid-image-vector-6 { animation-delay: 3.2s; } .colorful-signup-cta-grid-image-container .grid-image-vector-7 { animation-delay: 4.5s; } .colorful-signup-cta-grid-image-container .grid-image-vector-8 { animation-delay: 5.2s; } .colorful-signup-cta-grid-image-container .grid-image-vector-9 { animation-delay: 6.5s; } .colorful-signup-cta-container .colorful-signup-cta-bg-container { width: 100%; overflow-x: hidden; } .colorful-signup-cta-container .colorful-signup-cta-bg-container .colorful-signup-cta-bg-inner { width: 100%; height: 100%; overflow: visible; /* Allow overflow for the inner container */ } .colorful-signup-cta-container .colorful-signup-cta-bg-container .colorful-signup-cta-bg-inner .colorful-signup-cta-bg-svg-1 { z-index: -1; position: absolute; left: 50%; transform: translateX(-50%); width: 100%; max-width: 38.125rem; flex-shrink: 0; height: 300px; right: 0; top: unset; max-width: 1220px; margin-top: -4rem; border-radius: 80rem; background: rgba(154, 223, 255, 0.72); filter: blur(100px); } /* Media Queries for Responsive Design */ @media screen and (max-width: 1024px) { .colorful-signup-cta-grid-image-container-inner { transform: translateX(-50%) scale(0.9); } } @media screen and (max-width: 938px) { .colorful-signup-cta-grid-image-container-inner { transform: translateX(-50%) scale(0.7); } } @media screen and (max-width: 768px) { .colorful-signup-cta-container { padding: 0; } .colorful-signup-cta-container:before { filter: blur(50px); top: 150px; } .colorful-signup-cta-container .colorful-signup-cta-inner { padding-top: 2rem; } .colorful-signup-cta-container .colorful-signup-cta-bg-container .colorful-signup-cta-bg-inner .colorful-signup-cta-bg-svg-1 { max-width: 100%; /* filter: blur(50px); */ } .colorful-signup-cta-grid-image-container-inner { /* transform: translateX(-50%) scale(0.6); */ } } @media screen and (max-width: 638px) { .colorful-signup-cta-grid-image-container-inner { /* transform: translateX(-50%) scale(0.5); */ } } @media screen and (max-width: 576px) { .colorful-signup-cta-grid-image-container { margin-top: -1rem; } .colorful-signup-cta-grid-image-container-inner { /* transform: translateX(-50%) scale(0.4); */ } } @media screen and (max-width: 480px) { .colorful-signup-cta-container .colorful-signup-cta-bg-container .colorful-signup-cta-bg-inner .colorful-signup-cta-bg-svg-1 { /* filter: blur(30px); */ } } @media screen and (max-width: 469px) { .colorful-signup-cta-grid-image-container-inner { /* transform: translateX(-50%) scale(0.3); */ } } @media screen and (max-width: 350px) { .colorful-signup-cta-grid-image-container-inner { /* transform: translateX(-50%) scale(0.2); */ } } /* ---------- END: V2 COLORFUL SIGNUP CTA ---------- */ /* ---------- V2 CUSTOMER COLOR LOGOS UNDER CTA ---------- */ .v2-customer-color-logos-under-cta-container { background: unset; width: 100%; z-index: 2; position: relative; border-bottom: none; padding-bottom: 4rem !important; } .v2-customer-color-logos-under-cta-container .v2-customer-color-logos-under-cta-inner { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; padding: 0 var(--space-20); } .v2-customer-color-logos-under-cta-container .customer-logos { max-width: none; padding-bottom: 0; } .v2-customer-color-logos-under-cta-container .trusted-by-text { margin-top: 0; text-align: left; min-width: 300px; font-weight: var(--font-weight-regular); color: var(--grayscale7); padding-right: var(--space-30); } .v2-customer-color-logos-under-cta-container .trusted-by-text::before, .v2-customer-color-logos-under-cta-container .trusted-by-text::after { display: none; } .v2-customer-color-logos-under-cta-container div[data-scrolling-customer-color-logos-under-cta] { max-width: calc(100% - 300px - 30px) } .v2-customer-color-logos-under-cta-container .customer-logos { max-width: 100%; } .v2-customer-color-logos-under-cta-container .customer-logos img { /* This is equal to ##818188 */ /* filter: brightness(0) saturate(100%) invert(58%) sepia(4%) saturate(186%) hue-rotate(202deg) brightness(92%) contrast(86%); */ vertical-align: unset; margin: unset; margin-bottom: unset; height: auto; transform: unset; padding: 8px; max-height: 28px; top: unset; bottom: unset; } .v2-customer-color-logos-under-cta-container .customer-logos span { vertical-align: top; min-height: 30px; border-radius: 3.5rem; border: 1px solid #D6E3EB; background: #F7FCFF; box-shadow: 0px 2px 2px -1px rgba(7, 1, 19, 0.04), 0px 1px 1px -0.5px rgba(7, 1, 19, 0.04), 0px 0.5px 0.5px 0px rgba(7, 1, 19, 0.04), 0px 2px 8px 0px rgba(255, 255, 255, 0.05) inset, 0px 1px 3px 0px rgba(255, 255, 255, 0.12) inset, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.16) inset; backdrop-filter: blur(3px); display: flex; justify-content: center; align-items: center; margin-bottom: 10px; margin-right: 10px; } .scrolling-color-logos-under-cta-fade { width: 240px!important } @media screen and (max-width: 850px) { .scrolling-color-logos-under-cta-fade { width: 120px!important } } @media screen and (max-width: 768px) { .v2-customer-color-logos-under-cta-container .v2-customer-color-logos-under-cta-inner { flex-direction: column; } .v2-customer-color-logos-under-cta-container .trusted-by-text { text-align: center; min-width: unset; width: 100%; padding: 0; margin-bottom: 1.5rem; } .v2-customer-color-logos-under-cta-container div[data-scrolling-customer-color-logos-under-cta] { max-width: 100%; } } @media screen and (max-width: 469px) { .scrolling-color-logos-under-cta-fade { width: 60px!important } } @media screen and (max-width: 350px) { .scrolling-color-logos-under-cta-fade { width: 40px!important } } /* ---------- END: V2 CUSTOMER COLOR LOGOS UNDER CTA ---------- */ /* ---------- V2 FOOTER ---------- */ .v2-footer-container { background: linear-gradient(180deg, #EBF9FF 0%, #DBF1FB 100%); border-radius: var(--border-radius-large); margin: 0 var(--space-10); } .v2-footer-container .v2-footer-inner { position: relative; max-width: var(--v2-header-width); overflow: hidden; margin: 0 auto; padding: var(--space-20); font-size: 0.875rem; color: #86878F; padding-top: 5rem; padding-bottom: 0; padding-bottom: 0; } .v2-footer-container .v2-footer-partners { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; } .v2-footer-container .v2-footer-partners-list { list-style: none; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-10); margin-bottom: 0; } .v2-footer-container .v2-footer-growsurf-logo { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-10); white-space: nowrap; } .v2-footer-container .v2-footer-partners-list li { display: flex; flex-direction: row; align-items: center; justify-content: center; padding: 2px var(--space-10); gap: 0.5rem; border-radius: 3.5rem; border: 1px solid var(--white); background: rgba(249, 253, 255, 0.50); box-shadow: 0px 2px 2px -1px rgba(7, 1, 19, 0.04), 0px 1px 1px -0.5px rgba(7, 1, 19, 0.04), 0px 0.5px 0.5px 0px rgba(7, 1, 19, 0.04), 0px 2px 8px 0px rgba(255, 255, 255, 0.05) inset, 0px 1px 3px 0px rgba(255, 255, 255, 0.12) inset, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.16) inset; backdrop-filter: blur(3px); color: #23355E; } .v2-footer-container .v2-footer-partners-list li img { max-width: var(--space-15); } .v2-footer-container .v2-footer-divider { } .v2-footer-container .v2-footer-divider svg { margin: 0 auto; width: 100%; margin-top: 2rem; margin-bottom: 1rem; } .v2-footer-container .v2-footer-main-content { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.5rem; /* Adjust gap as needed */ padding-top: 1rem; } .v2-footer-main-content-item-title { font-weight: var(--font-weight-bold); color: var(--v2-blue-dark1); margin-bottom: 1rem; } .v2-footer-main-content-item-links-list { list-style: none; margin: 0; } .v2-footer-main-content-item-links-list li { } .v2-footer-main-content-item-links-list a { color: #818189 !important; } .v2-footer-main-content-item-links-list .social-icons-section { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: var(--space-10); margin-top: 1rem; } .v2-footer-main-content-item-links-list .social-icons-section a { display: flex; width: 2.25rem; height: 2.25rem; padding: 0.25rem 0.6875rem; justify-content: center; align-items: center; gap: 0.25rem; border-radius: 0.5rem; border: 1px solid #D6E3EB; background: #F7FCFF; box-shadow: 0px 2px 2px -1px rgba(7, 1, 19, 0.04), 0px 1px 1px -0.5px rgba(7, 1, 19, 0.04), 0px 0.5px 0.5px 0px rgba(7, 1, 19, 0.04), 0px 2px 8px 0px rgba(255, 255, 255, 0.05) inset, 0px 1px 3px 0px rgba(255, 255, 255, 0.12) inset, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.16) inset; backdrop-filter: blur(3px); } .v2-footer-main-content-item-links-list .social-icons-section svg { } .v2-footer-disclaimer-section { font-size: 0.875rem; color: #86878F; padding-bottom: 1rem; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; } .v2-footer-disclaimer-section .v2-footer-disclaimer-company-address { opacity: 0.65; } .v2-footer-disclaimer-section .v2-footer-disclaimer-section-links-list { list-style: none; display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-10); flex-wrap: wrap; } .v2-footer-disclaimer-section .v2-footer-disclaimer-section-links-list li a { color: #86878F !important; opacity: 0.65; } .v2-footer-big-logo { opacity: 0.95; color: rgba(25, 43, 85, 0.08); font-size: 10rem; font-style: normal; text-transform: uppercase; font-weight: var(--font-weight-bold); line-height: 1; margin: 0 auto; text-align: center; width: 100%; display: flex; align-items: center; justify-content: center; margin-bottom: -1.5rem; } @media screen and (max-width: 1024px) { .v2-footer-container .v2-footer-main-content { grid-template-columns: repeat(3, 1fr); } } @media screen and (max-width: 938px) { .v2-footer-big-logo { font-size: 8rem; } } @media screen and (max-width: 768px) { .v2-footer-container .v2-footer-partners { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--space-20); text-align: left; } .v2-footer-container .v2-footer-partners-list { justify-content: flex-start; margin-left: 0; padding-left: 0; } .v2-footer-container .v2-footer-main-content { grid-template-columns: repeat(2, 1fr); } .v2-footer-disclaimer-section { flex-direction: column; align-items: center; justify-content: center; gap: var(--space-20); text-align: center; padding: 0; } .v2-footer-big-logo { font-size: 4rem; margin-bottom: -0.5rem; } } @media screen and (max-width: 480px) { .v2-footer-container .v2-footer-growsurf-logo { flex-wrap: wrap; } .v2-footer-container .v2-footer-main-content { grid-template-columns: 1fr; gap: 1rem; /* Adjust gap for smaller screens if needed */ } .v2-footer-disclaimer-section { align-items: flex-start !important; justify-content: flex-start !important; text-align: left; } .v2-footer-disclaimer-section .v2-footer-disclaimer-section-links-list { align-items: flex-start; justify-content: flex-start; text-align: left; padding-left: 0; } .v2-footer-big-logo { margin-top: 2rem; font-size: 3rem; margin-bottom: 0rem; align-items: flex-start; text-align: left; justify-content: flex-start; } } /* ---------- END: V2 FOOTER ---------- */ /* ---------- V2 HEADER ---------- */ .v2-header { position: fixed; top: 0; left: 0; right: 0; width: 100%; z-index: 10; padding-right: 10px; padding-left: 10px; } .v2-header .announcement-banner { margin-left: calc(-1 * var(--space-10)); margin-right: calc(-1 * var(--space-10)); margin-bottom: calc(-1 * var(--space-5)); background: linear-gradient(180deg, var(--v2-blue2) 0%, var(--v2-blue1) 100%); } .v2-header a { text-decoration: none; color: #007bff; text-transform: unset; } .v2-header a.logo { /* z-index: 10001; */ } .v2-header .v2-btn { color: var(--white) !important; } .v2-header ul { list-style: none; margin-left: 0; margin-bottom: 0; padding-left: 0; } .v2-header img { max-width: 100%; height: auto; display: block; } .v2-header .container { max-width: unset !important; margin: 0 auto; padding: 0; display: flex; justify-content: space-between; align-items: center; margin-top: -1px; } .v2-header .v2-header-inner { position: relative; z-index: 1001; border-bottom: 0; max-width: var(--v2-header-width); margin: 0 auto; margin-top: 10px; height: 60px; padding: var(--space-10) var(--space-15); border-radius: var(--border-radius-large); border: 1px solid rgba(0, 0, 0, 0.08); background-color: oklab(1 0 0 / 0.4); backdrop-filter: blur(24px); box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 7px 3px 0px rgba(0, 0, 0, 0.01), 0px 4px 2px 0px rgba(0, 0, 0, 0.02), 0px 2px 2px 0px rgba(0, 0, 0, 0.03), 0px 0px 1px 0px rgba(0, 0, 0, 0.04); transition: border 1s ease, box-shadow 1s ease, background 0.4s ease; } .v2-header .v2-header-inner-anchored-at-top { border: 1px solid transparent; box-shadow: unset; background: unset; backdrop-filter: unset; } .v2-header .v2-header-inner:has(.mobile-view-active.nav-open) { background: unset; background: linear-gradient(0deg, rgba(255, 255, 255, 0.90) 0%, #FFF 100%); backdrop-filter: unset; } .v2-header .logo img { height: 30px; } .v2-header .main-nav { display: flex; align-items: center; } .v2-header .nav-menu { display: flex; align-items: center; } .v2-header .nav-item { margin-left: var(--space-20); } .v2-header .nav-link { font-size: 0.875rem; color: var(--black); font-weight: var(--font-weight-regular); padding: var(--space-5) 0; display: flex; /* For arrow alignment */ align-items: center; /* For arrow alignment */ position: relative; /* For active state underline */ line-height: 1; } .v2-header .main-nav:not(.mobile-view-active) .nav-link { padding: var(--space-20) 0; margin-bottom: calc(-1 * var(--space-20)); margin-top: calc(-1 * var(--space-20)); } .nav-link:hover, .v2-header .nav-link.active { color: var(--v2-blue1); } .v2-header .nav-link.active::after { content: ''; position: absolute; bottom: -16px; /* Adjust based on header padding */ left: 0; width: 100%; height: 2px; background-color: var(--v2-blue1); } .v2-header .arrow-down { margin-left: 8px; display: inline-block; background: url('data:image/svg+xml;utf8,') center center no-repeat; width: 12px; height: 12px; background-size: 12px 12px; transition: transform 0.3s ease; border: none; } .v2-header .nav-link.active .arrow-down { transform: rotate(180deg); /* Optionally, change the stroke color for active state if needed */ /* background: url('data:image/svg+xml;utf8,') center center no-repeat; */ } .v2-header .header-actions { display: flex; align-items: center; } .v2-header .header-link { color: #555; margin-left: 20px; font-size: 0.875rem; display: flex; align-items: center; text-transform: capitalize; } .v2-header .header-link .icon { width: 18px; height: 18px; margin-right: 5px; fill: currentColor; /* Makes SVG color match text color */ } .v2-header .btn { padding: 8px 15px; } .v2-header .btn-primary { background-color: var(--v2-blue1); color: #fff; border: none; margin-left: var(--space-20); } .v2-header .btn-primary:hover { background-color: var(--v2-blue1); text-decoration: none; } .v2-header .nav-toggle { display: none; /* Hidden by default, JS will manage visibility */ border: none; cursor: pointer; padding: var(--space-10); } .v2-header .hamburger-icon { display: block; width: 25px; height: 3px; background-color: #333; position: relative; border-radius: 2px; } .hamburger-icon::before, .v2-header .hamburger-icon::after { content: ''; position: absolute; width: 25px; height: 3px; background-color: #333; left: 0; border-radius: 2px; transition: transform 0.3s ease, top 0.3s ease; } .v2-header .hamburger-icon::before { top: -8px; } .v2-header .hamburger-icon::after { top: 8px; } /* Mobile Nav Open State */ .v2-header .nav-open .hamburger-icon { background-color: transparent; /* Middle bar disappears */ } .v2-header .nav-open .hamburger-icon::before { transform: rotate(45deg); top: 0; } .v2-header .nav-open .hamburger-icon::after { transform: rotate(-45deg); top: 0; } /* Dropdown Menu */ .v2-header .dropdown-menu-container { position: absolute; top: 100%; /* Position below the header */ left: 0; width: 100%; background-color: #f9f9f9; /* Background for the dropdown area */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 1000; display: none; /* Hidden by default */ border-top: 1px solid #eee; } .v2-header .dropdown-menu-container.open { display: block; } .v2-header .dropdown-content { display: none; /* Individual dropdowns hidden */ padding: var(--space-30) 0; padding-bottom: var(--space-20); padding-right: 300px; } .v2-header .dropdown-content.active { display: block; } .v2-header .dropdown-menu-container.open .dropdown-content.active { max-height: calc(100vh - 92.5px); /* 92.5px is the height of the header */ overflow-y: auto; /* Enables vertical scrollbar if content overflows max-height */ } .v2-header .dropdown-container { margin: 0 auto; padding: 0 var(--space-20); padding-bottom: 0; } .v2-header .dropdown-section h2 { font-size: 1.5rem; margin-bottom: var(--space-5); } .v2-header .dropdown-section .subheading { font-size: 16px; color: #666; margin-bottom: 30px; } .v2-header .dropdown-columns { display: flex; gap: 30px; /* Space between columns */ flex-wrap: nowrap; /* Prevent wrapping by default, ensure promo column stays right */ } .v2-header .dropdown-column { flex-grow: 1; /* Allow columns to grow */ flex-basis: 0; /* Distribute space evenly initially */ /* flex: 1; /* Equal width for columns, can be adjusted - replaced by grow/basis */ } .v2-header .dropdown-column.what-is-new, .v2-header .dropdown-column.promo-column { background-color: #fff; /* White background for these specific columns */ padding: var(--space-20); border-radius: var(--border-radius-regular); box-shadow: 0 2px 8px rgba(0,0,0,0.05); flex-grow: 0; /* Prevent promo and what-is-new from growing excessively */ flex-shrink: 0; /* Prevent from shrinking if other content is too wide */ top: 0; position: absolute; right: 0; bottom: 0; width: 300px; padding-top: var(--space-30); overflow-y: auto; } /* Specific width for promo column to ensure it behaves as expected */ .v2-header #solutions-dropdown .dropdown-column.promo-column { flex-basis: 280px; /* Adjust as needed, or use max-width/min-width */ /* max-width: 280px; */ /* Example fixed width */ } /* Ensure other columns can take up remaining space */ .v2-header #solutions-dropdown .dropdown-column:not(.promo-column) { flex-grow: 1; } .v2-header .dropdown-column h3 { font-size: 0.75rem; color: var(--grayscale7); margin-bottom: var(--space-25); text-transform: uppercase; letter-spacing: 0.5px; } .v2-header .dropdown-links li { margin-bottom: 15px; } .v2-header .dropdown-links a { display: flex; align-items: flex-start; color: #333; font-weight: 500; } .v2-header .dropdown-links a:hover { /* color: var(--v2-blue1); */ text-decoration: none; } .v2-header .dropdown-links .link-icon { width: 24px; /* Adjust as needed */ height: 24px; margin-right: 12px; margin-top: 2px; /* Align with text */ /* Add styles for your actual icons if they are images or SVGs */ background-color: #eee; /* Placeholder */ border-radius: 4px; /* Placeholder */ display: flex; align-items: center; justify-content: center; } .v2-header .dropdown-links a div p { font-size: 14px; color: #666; font-weight: normal; line-height: 1.4; } .v2-header .dropdown-links-with-descriptions li a { display: flex; align-items: flex-start; flex-direction: column; } .v2-header .dropdown-links-with-descriptions li a small { color: var(--grayscale7); font-size: 0.75rem; margin-top: 2px; } .v2-header .dropdown-links.simple-links a { /* flex-direction: column; text-align: left; */ } .v2-header .dropdown-links.simple-links li { margin-bottom: 10px; } .v2-header .dropdown-links.simple-links small { display: block; font-size: 0.75rem; color: var(--grayscale7); font-weight: normal; margin-top: 2px; } .v2-header .dropdown-links.simple-links a:hover small { /* color: var(--v2-blue1); */ } .v2-header .beta { background-color: #e6f7ff; /* Light blue */ color: #096dd9; /* Darker blue */ font-size: 10px; padding: 2px 5px; border-radius: 3px; margin-left: 5px; font-weight: bold; vertical-align: middle; } .v2-header .dropdown-footer { border-top: 1px solid #eee; padding-top: 20px; margin-top: 30px; display: flex; gap: 20px; } .v2-header .dropdown-footer a { font-size: 14px; color: #333; font-weight: 500; } .v2-header .dropdown-footer a:hover { /* color: var(--v2-blue1); */ } .v2-header .promo-box-content-special-cover-image { position: relative; height: 90px; padding: var(--space-20); display: flex; align-items: center; justify-content: center; text-align: left; gap: var(--space-10); margin-bottom: var(--space-10); border-radius: var(--border-radius-regular); width: 100%; /* box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 7px 3px 0px rgba(0, 0, 0, 0.01), 0px 4px 2px 0px rgba(0, 0, 0, 0.02), 0px 2px 2px 0px rgba(0, 0, 0, 0.03), 0px 0px 1px 0px rgba(0, 0, 0, 0.04); */ overflow: hidden; z-index: 2; } .v2-header .promo-box-content-special-cover-image:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/acb638b7-7d2f-4bf9-9114-e3812f02b78d.png') center center no-repeat; background-size: cover; transform: scale(1.2); z-index: 0; } .v2-header .promo-box-content-special-cover-image:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background: linear-gradient(to right, var(--v2-blue2), var(--v2-blue1)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; border: 1px solid transparent; border-radius: var(--border-radius-regular); z-index: 1; } .promo-box-content-special-cover-image-icon { backdrop-filter: blur(3px); border-radius: var(--border-radius-large); border: 1px solid rgba(0, 0, 0, 0.08); background: linear-gradient(0deg, rgba(255, 255, 255, 0.90) 0%, #FFF 100%); box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 7px 3px 0px rgba(0, 0, 0, 0.01), 0px 4px 2px 0px rgba(0, 0, 0, 0.02), 0px 2px 2px 0px rgba(0, 0, 0, 0.03), 0px 0px 1px 0px rgba(0, 0, 0, 0.04); padding: var(--space-10); display: flex; align-items: center; justify-content: center; height: var(--space-45); width: var(--space-45); max-width: none; transition: all 0.2s ease-in-out; overflow: hidden; } .v2-header .promo-box { margin-bottom: 20px; } .v2-header .promo-box img { width: 100%; height: auto; border-radius: var(--border-radius-regular); margin-bottom: var(--space-20); padding: 3rem; border: 1px solid #eee; /* Placeholder for actual image */ } .v2-header .promo-box h4 { font-size: 16px; margin-bottom: 5px; } .v2-header .promo-box p { font-size: 14px; color: #666; line-height: 1.4; } .v2-header .growsurf-for h4, .v2-header .developer-resources h4 { font-size: 13px; color: #555; margin-bottom: 10px; text-transform: uppercase; letter-spacing: 0.5px; } .v2-header .growsurf-for a, .v2-header .developer-resources a { display: block; font-size: 14px; color: #333; margin-bottom: 8px; font-weight: 500; } .v2-header .growsurf-for a:hover, .v2-header .developer-resources a:hover { /* color: var(--v2-blue1); */ text-decoration: none; } .v2-header .icon-list a { display: flex; align-items: center; } .v2-header .icon-list img { width: 16px; height: 16px; margin-right: 8px; vertical-align: middle; } /* Responsive adjustments */ @media (max-width: 1078px) { /* These rules are now largely superseded or augmented by JS + .mobile-view-active, but can serve as a fallback or base for the JS-driven mobile view styling. */ .v2-header .main-nav:not(.mobile-view-active) .nav-menu, .v2-header .header-actions .header-link, .v2-header .header-actions .btn:not(.btn-primary-mobile) { display: none; } .v2-header .nav-toggle { /* display: block; /* JS handles this */ order: 1; margin-left: auto; /* Pushes hamburger to the right */ border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; } .v2-header .v2-header-inner .container { position: relative; /* For mobile nav positioning */ } /* Hide direct nav items when mobile-view-active is on, unless nav is open */ .v2-header .main-nav.mobile-view-active .nav-menu > .nav-item { display: none; } .v2-header .main-nav.mobile-view-active.nav-open .nav-menu > .nav-item { display: flex; /* Or block, depending on desired layout of items */ flex-direction: column; } .v2-header .dropdown-column.what-is-new, .v2-header .dropdown-column.promo-column { position: relative; flex-direction: column; overflow-y: initial; } /* Styles for the .nav-menu when it becomes the mobile popout */ .v2-header .main-nav.mobile-view-active.nav-open .nav-menu { display: flex; flex-direction: column; position: fixed; /* Full screen overlay */ top: 0; left: 0; width: 100%; height: 100vh; background-color: #fff; padding-top: var(--space-20); /* Add padding to the bottom to account for the fixed footer */ padding-bottom: 180px; /* Adjust this value based on the actual height of .mobile-nav-footer */ align-items: flex-start; /* Align items to the left */ overflow-y: auto; z-index: 999; margin-top: calc(60px + var(--space-20)); } .v2-header .main-nav.mobile-view-active.nav-open .dropdown-column.what-is-new, .v2-header .main-nav.mobile-view-active.nav-open .dropdown-column.promo-column { width: 100%; } .v2-header .main-nav.nav-open .nav-menu .nav-item { margin-left: 0; width: 100%; border-bottom: 1px solid #eee; } .v2-header .main-nav.nav-open .nav-menu .nav-link { padding: 15px 20px; display: flex; /* Ensure arrow is part of the flex */ justify-content: space-between; /* Push arrow to the right */ width: 100%; } .v2-header .nav-link.active::after { /* Remove bottom border for mobile nav */ display: none; } /* Mobile Dropdown Content */ .v2-header .main-nav.nav-open .dropdown-content { position: static; /* No longer absolute */ box-shadow: none; border-top: none; padding: 10px 20px 20px 40px; /* Indent mobile dropdowns */ background-color: #f9f9f9; /* Slightly different background for clarity */ } .v2-header .main-nav.nav-open .dropdown-columns { flex-direction: column; gap: 20px; } .v2-header .main-nav.nav-open .dropdown-column { padding: 0; box-shadow: none; background-color: transparent; } .v2-header .main-nav.nav-open .dropdown-footer { flex-direction: column; gap: 10px; padding-left: 0; /* Align with content above */ margin-top: var(--space-20); padding-top: 15px; } .v2-header .main-nav.nav-open .dropdown-section h2, .v2-header .main-nav.nav-open .dropdown-section .subheading { padding-left: 0; /* Align with parent */ font-size: 18px; /* Smaller for mobile */ } .v2-header .main-nav.nav-open .dropdown-section .subheading { font-size: 14px; margin-bottom: 15px; } /* Mobile Specific header actions if needed - shown inside the slide out */ .v2-header .main-nav.nav-open .mobile-header-actions { display: flex; flex-direction: column; padding: 20px; border-top: 1px solid #eee; margin-top: auto; /* Push to bottom */ } .v2-header .main-nav.nav-open .mobile-header-actions .header-link, .v2-header .main-nav.nav-open .mobile-header-actions .btn { display: block; margin: var(--space-10) 0; text-align: center; } .v2-header .main-nav.nav-open .mobile-header-actions .btn-primary { width: 100%; } /* Adjustments for mobile view with "Sign up" and Hamburger icon */ .v2-header .header-actions .header-link:not(:last-child), /* Hide Explore apps, Contact sales, Log in */ .v2-header .header-actions .header-link:nth-last-child(2) { /* Hide Log in */ display: none; } .v2-header .main-nav .nav-menu { /* Hide desktop nav links */ display: none; } .v2-header .nav-toggle { /* Show hamburger */ display: flex; } /* Ensure Sign Up button and Hamburger are visible and spaced */ .v2-header .v2-header-inner .container { justify-content: space-between; } .v2-header .header-actions { order: 3; /* Ensure actions (Sign Up button) come after nav (hamburger) */ } .v2-header .main-nav { order: 2; } /* Recreate the slide-out menu structure for mobile */ .v2-header .main-nav.nav-open .nav-menu { padding-top: 20px; /* Adjust as per mobile image_934a8b.jpg */ } .v2-header .mobile-top-section { padding: 0 20px 20px 20px; } .v2-header .mobile-top-section h2 { font-size: 24px; /* As per image */ font-weight: bold; margin-bottom: 10px; } .v2-header .mobile-top-section p { font-size: 16px; color: #555; margin-bottom: 20px; } .v2-header .mobile-top-section .btn { display: block; width: 100%; text-align: center; margin-bottom: 10px; padding: 12px; } .v2-header .mobile-top-section .btn-secondary { background-color: #fff; color: #333; border: 1px solid #ccc; } .v2-header .mobile-top-section .btn-secondary img { /* Google icon */ display: inline-block; vertical-align: middle; margin-right: 8px; width: 18px; height: 18px; } .v2-header .main-nav.nav-open .nav-item .nav-link { font-size: 18px; font-weight: normal; } .v2-header .main-nav.nav-open .dropdown-content { padding: 10px 20px 20px 30px; /* Indent slightly more */ padding-left: 0; padding-right: 0; padding-top: var(--space-20); } .v2-header .main-nav.nav-open .dropdown-links a { font-size: 1rem; } .v2-header .main-nav.nav-open .dropdown-links a div p, .v2-header .main-nav.nav-open .dropdown-links.simple-links small { font-size: 13px; } .v2-header .main-nav.nav-open .dropdown-column h3 { font-size: 12px; /* Slightly smaller for mobile dropdown subheadings */ } /* Footer links in mobile nav */ .v2-header .mobile-nav-footer { padding: 20px; border-top: 1px solid #eee; /* margin-top: auto; /* Pushes to the bottom - replaced by fixed positioning */ background-color: #f9f9f9; /* Or #fff if preferred */ /* New styles for fixed footer */ position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000; /* Ensure it's above the scrollable nav menu content */ box-sizing: border-box; /* Include padding in width calculation */ } .v2-header .mobile-nav-footer .header-link, .v2-header .mobile-nav-footer .btn { display: block; margin: 0; text-align: center; margin-bottom: 10px; width: 100%; } .v2-header .mobile-nav-footer .btn { text-align: center; } .v2-header .main-nav { flex: 1 1 auto; } .v2-header .main-nav:not(.mobile-view-active) .nav-menu { display: flex; } .v2-header .main-nav.mobile-view-active .nav-menu { display: none; } .v2-header .main-nav.mobile-view-active.nav-open .nav-menu { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #fff; z-index: 9999; margin-top: 0; padding-top: 50px; overflow-y: auto; } .v2-header .header-actions { display: none !important; } .v2-header .main-nav.mobile-view-active.nav-open ~ .header-actions { display: none !important; } .v2-header .nav-toggle { display: flex !important; align-items: center; justify-content: center; background: none; border: none; z-index: 10001; } .v2-header .mobile-nav-footer { position: fixed; left: 0; bottom: 0; width: 100vw; background: #f9f9f9; border-top: 1px solid #eee; z-index: 10002; padding: var(--space-10) var(--space-20); box-sizing: border-box; } .v2-header .main-nav.mobile-view-active.nav-open .mobile-nav-footer { display: block; } .v2-header .main-nav.nav-open .dropdown-columns.free-tools-dropdown-columns { gap: 0; } .v2-header .main-nav.nav-open .dropdown-columns.free-tools-dropdown-columns .promo-column { padding-top: var(--space-20); width: 100%; } } @media (min-width: 1079px) { .v2-header .main-nav { display: flex !important; } .v2-header .nav-menu { display: flex !important; flex-direction: row; position: static; width: auto; height: auto; background: none; padding-top: 0; overflow: visible; } .v2-header .header-actions { display: flex !important; } .v2-header .nav-toggle { display: none !important; } .v2-header .mobile-nav-footer { display: none !important; } } /* Initial styles to prevent FOUC on mobile for v2-header */ @media (max-width: 1078px) { .v2-header.js-loading .main-nav .nav-menu { display: none !important; } .v2-header.js-loading .header-actions { display: none !important; } .v2-header.js-loading .nav-toggle { display: flex !important; } .v2-header.js-loading .dropdown-menu-container { display: none !important; } } /* End of FOUC prevention styles */ /* ---------- END: V2 HEADER ---------- */ /* ---------- V2 PRODUCT INTEGRATIONS PAGE ---------- */ .product-integrations-page { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 0; padding-top: 4rem; } .product-integrations-page .product-integrations-page-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .product-integrations-page .product-integrations-container .integrations-container { padding: 0; } .product-integrations-page .product-integrations-container .integrations-container a { flex-direction: column; align-items: flex-start; justify-content: flex-start; } .product-integrations-page .product-integrations-container .integrations-container .row { gap: var(--space-10); border: none; } .product-integrations-page .product-integrations-container .integrations-container .row > [class*='col-'] { border: 0.5px solid #E6E8EE; border-radius: var(--border-radius-large); margin: 0 !important; } .product-integrations-page .product-integrations-container .integrations-container a:before { display: none; } .product-integrations-page .product-integrations-container .integrations-container a:after { content: attr(data-original-title); display: block; width: 100%; margin-top: var(--space-10); position: relative; height: unset; bottom: unset; right: unset; background-image: unset; color: var(--v2-gray-dark2); font-size: 0.875rem; font-weight: var(--font-weight-regular); } .product-integrations-page .product-integrations-container .integrations-container a .integration-item-fancy-border-dressing img:nth-child(1) { display: none; } .product-integrations-page .product-integrations-container .integrations-container a .product-integration-logo { fill: #FFF; stroke-width: 1px; stroke: #D6E3EB; /* Keep `filter: drop-shadow` commented out or else it lags the page: */ /* filter: drop-shadow(0px 0.5px 0.5px rgba(7, 1, 19, 0.04)) drop-shadow(0px 1px 1px rgba(7, 1, 19, 0.04)) drop-shadow(0px 2px 2px rgba(7, 1, 19, 0.04)); */ backdrop-filter: blur(3px); border-radius: var(--border-radius-large); border: 1px solid rgba(0, 0, 0, 0.08); background: linear-gradient(0deg, rgba(255, 255, 255, 0.90) 0%, #FFF 100%); box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 7px 3px 0px rgba(0, 0, 0, 0.01), 0px 4px 2px 0px rgba(0, 0, 0, 0.02), 0px 2px 2px 0px rgba(0, 0, 0, 0.03), 0px 0px 1px 0px rgba(0, 0, 0, 0.04); padding: var(--space-10); display: flex; align-items: center; justify-content: center; height: var(--space-45); width: var(--space-45); max-width: none; transition: all 0.2s ease-in-out; } .product-integrations-page .product-integrations-container .integrations-container a:hover, .product-integrations-page .product-integrations-container .integrations-container a:focus, .product-integrations-page .product-integrations-container .integrations-container a:active { transition: all 0.2s ease-in-out; box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 7px 3px 0px rgba(0, 0, 0, 0.01), 0px 4px 2px 0px rgba(0, 0, 0, 0.02), 0px 2px 2px 0px rgba(0, 0, 0, 0.03), 0px 0px 1px 0px rgba(0, 0, 0, 0.04); } .product-integrations-page .product-integrations-container .integrations-container a .product-integration-logo img { padding: 0; min-width: var(--space-20); } .product-integrations-page .product-integrations-container .integrations-container a .product-integration-company { font-size: 1rem; font-weight: var(--font-weight-bold); color: var(--v2-gray-dark2); margin-top: var(--space-20); } .product-integrations-page .product-integrations-bg-container { width: 100%; overflow-x: hidden; } .product-integrations-page .product-integrations-bg-container .product-integrations-bg-inner { width: 100%; height: 100%; overflow: visible; /* Allow overflow for the inner container */ } .product-integrations-page .product-integrations-bg-container .product-integrations-bg-inner .product-integrations-bg-svg-1 { z-index: -1; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; top: 12rem; width: 75.125rem; height: 41.4375rem; flex-shrink: 0; border-radius: 75.125rem; background: #DFF2FB; filter: blur(290.95001220703125px); } @media screen and (max-width: 768px) { .product-integrations-page .product-integrations-bg-container .product-integrations-bg-inner .product-integrations-bg-svg-1 { max-width: 100%; filter: blur(100px); } } @media (max-width: 700px) { .product-integrations-page .product-integrations-container .integrations-container a:after { display: block !important; } } @media screen and (max-width: 480px) { .product-integrations-page .product-integrations-bg-container .product-integrations-bg-inner .product-integrations-bg-svg-1 { filter: blur(80px); } } /* ---------- END: V2 PRODUCT INTEGRATIONS PAGE ---------- */ /* ---------- V2 CONTACT US PAGE ---------- */ .v2-contact-us { background: unset; width: 100%; z-index: 4; position: relative; padding-bottom: 0; padding-top: 7rem; } .v2-contact-us .v2-contact-us-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .v2-contact-us .v2-contact-us-bg-container { width: 100%; overflow-x: hidden; } .v2-contact-us .v2-contact-us-forms { display: flex; gap: var(--space-20); margin-top: 2rem; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; gap: var(--space-20); margin-top: 2rem; } .v2-contact-us .v2-contact-us-forms > div:first-child { grid-row: 1 / span 2; grid-column: 1 / span 2; } .v2-contact-us .v2-contact-us-form-container { border-radius: 0.75rem; background: rgba(255, 255, 255, 0.80); box-shadow: 0px -5px 16.6px 0px rgba(0, 61, 118, 0.04), 0px 0px 0px 1px rgba(1, 97, 151, 0.04); backdrop-filter: blur(26.200000762939453px); padding: 2rem; } .v2-contact-us .v2-contact-us-bg-container .v2-contact-us-bg-inner { width: 100%; height: 100%; overflow: visible; /* Allow overflow for the inner container */ } .v2-contact-us .v2-contact-us-bg-container .v2-contact-us-bg-inner .v2-contact-us-bg-svg-1 { z-index: -1; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; top: 12rem; width: 75.125rem; height: 41.4375rem; flex-shrink: 0; border-radius: 75.125rem; background: #DFF2FB; filter: blur(290.95001220703125px); } @media screen and (max-width: 768px) { .v2-contact-us .v2-contact-us-forms { grid-template-columns: 1fr; grid-template-rows: auto; } .v2-contact-us .v2-contact-us-forms > div:first-child { grid-row: auto; grid-column: 1; } .v2-contact-us .v2-contact-us-bg-container .v2-contact-us-bg-inner .v2-contact-us-bg-svg-1 { max-width: 100%; filter: blur(100px); } } @media screen and (max-width: 480px) { .v2-contact-us .v2-contact-us-bg-container .v2-contact-us-bg-inner .v2-contact-us-bg-svg-1 { filter: blur(80px); } } /* ---------- END: V2 CONTACT US PAGE ---------- */ /* ---------- V2 BOOK DEMO PAGE ---------- */ .v2-book-demo { background: unset; width: 100%; z-index: 4; position: relative; padding-bottom: 0; padding-top: 7rem; } .v2-book-demo .v2-book-demo-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1000); z-index: 3; position: relative; padding-bottom: 3rem; min-height: 85vh; } .v2-book-demo .v2-book-demo-bg-container { width: 100%; overflow-x: hidden; } .v2-book-demo .v2-book-demo-quote-and-form { display: flex; gap: var(--space-45); margin-top: 2rem; } .v2-book-demo .v2-book-demo-quote-and-form .v2-book-demo-quote { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; max-width: calc(50% - 1rem); color: var(--v2-gray-dark2); font-size: 0.875rem; font-weight: var(--font-weight-regular); gap: 2rem; } .v2-book-demo .v2-book-demo-quote-and-form .v2-book-demo-quote .v2-book-demo-quote-text strong { font-weight: var(--font-weight-medium); } .v2-book-demo .v2-book-demo-quote-and-form .v2-book-demo-quote .v2-book-demo-quote-author { color: var(--v2-gray-dark2); } .v2-book-demo .v2-book-demo-quote-and-form .v2-book-demo-quote .v2-book-demo-quote-author { color: var(--v2-black1); font-weight: var(--font-weight-bold); } .v2-book-demo .v2-book-demo-quote-and-form .v2-book-demo-quote .v2-book-demo-quote-author-company { color: var(--v2-black1); font-weight: var(--font-weight-medium) !important; } .v2-book-demo .v2-book-demo-form-container { background: rgba(255, 255, 255, 0.80); box-shadow: 0px -5px 16.6px 0px rgba(0, 61, 118, 0.04), 0px 0px 0px 1px rgba(1, 97, 151, 0.04); backdrop-filter: blur(26.200000762939453px); padding: 2rem; border-radius: var(--border-radius-large); } .v2-book-demo .v2-book-demo-quote-divider { width: 100%; margin-top: 1rem; margin-bottom: 1rem; } .v2-book-demo .v2-book-demo-quote-divider svg { width: 100%; height: auto; } .v2-book-demo .v2-book-demo-bg-container .v2-book-demo-bg-inner { width: 100%; height: 100%; overflow: visible; /* Allow overflow for the inner container */ } .v2-book-demo .v2-book-demo-form-customer-color-logos { width: 100%; position: absolute; left: 0; right: 0; } .v2-book-demo .v2-book-demo-form-customer-color-logos .v2-customer-color-logos-under-cta-inner { display: flex; align-items: flex-start; justify-content: flex-start; margin: 0; padding: 0; flex-direction: column; } .v2-book-demo .v2-book-demo-form-customer-color-logos .v2-customer-color-logos-under-cta-container { padding-top: 0; } .v2-book-demo .v2-book-demo-form-customer-color-logos .v2-customer-color-logos-under-cta-container div[data-scrolling-customer-color-logos-under-cta] { max-width: 100%; } .v2-book-demo .v2-book-demo-form-customer-color-logos .v2-customer-color-logos-under-cta-container .v2-customer-color-logos-under-cta-inner .scrolling-color-logos-under-cta-fade { /* display: none; */ width: 120px !important; } .v2-book-demo .v2-book-demo-form-customer-color-logos .v2-customer-color-logos-under-cta-container .trusted-by-text { margin-bottom: var(--space-25); color: var(--v2-blue-dark1); } .v2-book-demo .v2-book-demo-bg-container .v2-book-demo-bg-inner .v2-book-demo-bg-svg-1 { display: none; z-index: -1; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; top: 2rem; width: 75.125rem; height: 41.4375rem; flex-shrink: 0; border-radius: 75.125rem; background: #DFF2FB; filter: blur(190.95001220703125px); } @media screen and (max-width: 768px) { .v2-book-demo .v2-book-demo-inner { min-height: none; } .v2-book-demo .v2-book-demo-quote-and-form { flex-direction: column; } .v2-book-demo .v2-book-demo-quote-and-form .v2-book-demo-quote { width: 100%; max-width: 100%; padding: var(--space-10); padding-bottom: 8rem; padding-top: 0; } .v2-book-demo .v2-book-demo-bg-container .v2-book-demo-bg-inner .v2-book-demo-bg-svg-1 { max-width: 100%; filter: blur(100px); } } @media screen and (max-width: 480px) { .v2-book-demo .v2-book-demo-bg-container .v2-book-demo-bg-inner .v2-book-demo-bg-svg-1 { filter: blur(80px); } } /* ---------- END: V2 BOOK DEMO PAGE ---------- */ /* ---------- V2 PRICING PAGE ---------- */ .v2-pricing-page { background: unset; width: 100%; z-index: 4; position: relative; padding-bottom: 0; padding-top: 7rem; } /* Need this `overflow: hidden` only on mobile,otherwise the headline badge will break the layout. And we can't set it outside of the responsive query because then the `position:sticky` won't work for pricing plan table headers */ @media screen and (max-width: 991.98px) { .v2-pricing-page { overflow: hidden; } } .v2-pricing-page .v2-pricing-page-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; padding-bottom: 3rem; } .v2-pricing-page .v2-headline-container { max-width: var(--max-width-600); } .v2-pricing-page .v2-pricing-page-bg-container { width: 100%; overflow-x: hidden; } .v2-pricing-page .v2-pricing-page-bg-container .v2-pricing-page-bg-inner { width: 100%; height: 100%; overflow: visible; /* Allow overflow for the inner container */ } .v2-pricing-page .v2-pricing-page-bg-container .v2-pricing-page-bg-inner .v2-pricing-page-bg-svg-1 { z-index: -3; position: absolute; top: 0; left: 50%; transform: translateX(-50%); /* width: 100%; max-width: 38.125rem; height: 100%; max-height: 49.375rem; flex-shrink: 0; border-radius: 49.375rem; background: linear-gradient(180deg, #EBF9FF 0%, #DBF1FB 100%); */ filter: blur(300px); border-radius: 91rem; background: #DFF2FB; filter: blur(290.95001220703125px); width: 91rem; height: 26.625rem; flex-shrink: 0; } .v2-pricing-page .v2-pricing-page-bg-container .v2-pricing-page-bg-inner .v2-pricing-page-bg-svg-2 { z-index: -2; position: absolute; top: 21rem; left: 50%; transform: translateX(-50%); /* width: 100%; max-width: 38.125rem; height: 100%; max-height: 49.375rem; flex-shrink: 0; border-radius: 49.375rem; background: linear-gradient(180deg, #EBF9FF 0%, #DBF1FB 100%); */ filter: blur(300px); border-radius: 91rem; background: #DFF2FB; filter: blur(290.95001220703125px); width: 91rem; height: 26.625rem; flex-shrink: 0; } @media screen and (max-width: 768px) { .v2-pricing-page .v2-pricing-page-bg-container .v2-pricing-page-bg-inner .v2-pricing-page-bg-svg-1 { max-width: 100%; filter: blur(100px); } .v2-pricing-page .v2-pricing-page-bg-container .v2-pricing-page-bg-inner .v2-pricing-page-bg-svg-2 { max-width: 100%; filter: blur(100px); } } @media screen and (max-width: 480px) { .v2-pricing-page .v2-pricing-page-bg-container .v2-pricing-page-bg-inner .v2-pricing-page-bg-svg-1 { filter: blur(80px); } .v2-pricing-page .v2-pricing-page-bg-container .v2-pricing-page-bg-inner .v2-pricing-page-bg-svg-2 { filter: blur(80px); } } /* ---------- END: V2 PRICING PAGE ---------- */ /* ---------- V2 PRICING TABLE ---------- */ .v2-pricing-table { } .v2-pricing-table .v2-pricing-table-inner { } .v2-pricing-table .pricing-table-container-in-top { } .v2-pricing-table .pricing-table-container-in-top .pricing-header { background: none; } .year-and-month-wrapper { border-radius: 12rem; border: 1px solid rgba(9, 117, 165, 0.08); background: rgba(26, 62, 88, 0.07); backdrop-filter: blur(15.449999809265137px); padding: 0.375rem; } .v2-pricing-table .v2-pricing-monthly-yearly-toggle-container { position: relative; } .v2-pricing-table .v2-pricing-table-bg-svg { position: absolute; top: -6rem; width: 100%; z-index: -1; transform: scale(1.56, 1); } .v2-pricing-table .v2-pricing-toggle-and-usd-note-wrapper { } .year-and-month-wrapper a { cursor: pointer; font-weight: var(--font-weight-medium) !important; } .year-and-month-wrapper .planactive { background: var(--white) !important; color: var(--v2-blue-dark1) !important; font-weight: var(--font-weight-medium) !important; border: 1px solid #EBEBEB; box-shadow: 0px 2px 2px -1px rgba(7, 1, 19, 0.08), 0px 1px 1px -0.5px rgba(7, 1, 19, 0.08), 0px 0.5px 0.5px 0px rgba(7, 1, 19, 0.08), 0px 2px 8px 0px rgba(255, 255, 255, 0.05) inset, 0px 1px 3px 0px rgba(255, 255, 255, 0.12) inset, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.16) inset; backdrop-filter: blur(3px); } .v2-pricing-table .v2-yearly-savings { background: linear-gradient(180deg, var(--v2-blue2) 0%, var(--v2-blue1) 100%); color: var(--white); border-radius: 12rem; padding: 1px var(--space-10); align-items: center; justify-content: center; display: flex; margin-left: var(--space-5); margin-right: calc(-1 * var(--space-5)); } .year-and-month-wrapper .pricing-toggle-button { border: 1px solid transparent; align-items: center; justify-content: center; display: flex; padding: 3px var(--space-10); border-radius: 12rem; } .year-and-month-wrapper .ref-aff-pricing-toggle-button { border: 1px solid transparent; align-items: center; justify-content: center; display: flex; padding: 3px var(--space-10); border-radius: 12rem; } .v2-pricing-table .pricing-start-here-tag::before { top: -21px; background: rgba(255, 255, 255, 0.92); border: 1px solid rgba(239, 239, 242, 0.50); box-shadow: none; } .v2-pricing-table .pricing-table-container-in-top table tbody tr td.pricing-header .pricing-plan-main-card { border-radius: var(--border-radius-large); border: 1px solid rgba(239, 239, 242, 0.50); background: rgba(255, 255, 255, 0.92); box-shadow: 0px 1px 1px 0px rgba(0, 61, 118, 0.04), 0px 3px 3px 0px rgba(0, 61, 118, 0.03), 0px 6px 4px 0px rgba(0, 83, 118, 0.02), 0px 11px 4px 0px rgba(0, 83, 118, 0.01), 0px 32px 24px -12px rgba(0, 76, 118, 0.06), 0px 0px 0px 1px rgba(1, 97, 151, 0.04); backdrop-filter: blur(26.200000762939453px); } .v2-pricing-table .pricing-table-container .pricing-header .form-control { max-width: none; } .v2-pricing-table .pricing-plan-cta-button-container .pricing-plan-cta-button { max-width: none; } .v2-pricing-table .pricing-plan-main-card .yearly-savings { border-radius: 3.5rem; border: 1px solid rgba(32, 186, 255, 0.32); background: #F7FCFF; color: #15B7FF; opacity: 0.95; outline: none; box-shadow: 0px 2px 2px -1px rgba(7, 1, 19, 0.04), 0px 1px 1px -0.5px rgba(7, 1, 19, 0.04), 0px 0.5px 0.5px 0px rgba(7, 1, 19, 0.04), 0px 2px 8px 0px rgba(255, 255, 255, 0.05) inset, 0px 1px 3px 0px rgba(255, 255, 255, 0.12) inset, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.16) inset; backdrop-filter: blur(3px); } .v2-pricing-table .pricing-header-input-container select.form-control, .v2-pricing-table .custom-participants-count { appearance: none; -webkit-appearance: none; -moz-appearance: none; height: initial; background: #fff url('data:image/svg+xml;utf8,') no-repeat right 0.5rem center/1.25em 1.25em; border: 1px solid #e0e6ed; border-radius: 8px; padding: 0.75em 2.5em 0.75em 1em; font-size: 1rem; color: var(--v2-blue-dark1); width: 100%; box-shadow: none; transition: border-color 0.2s, box-shadow 0.2s; cursor: pointer; transition: all 0.2s ease-in-out; } .v2-pricing-table .custom-participants-count { background: #f5f7fa; cursor: not-allowed; } .v2-pricing-table .pricing-header-input-container select.form-control:focus { border-color: #688ee8; outline: none; box-shadow: 0 0 0 2px rgba(104, 142, 232, 0.15); transition: all 0.2s ease-in-out; } .v2-pricing-table .pricing-header-input-container select.form-control:hover { border-color: #b3c6f7; transition: all 0.2s ease-in-out; } .v2-pricing-table .pricing-header-input-container select.form-control:disabled { background: #f5f7fa; color: #b0b8c9; cursor: not-allowed; transition: all 0.2s ease-in-out; } /* Hide default arrow for IE */ .v2-pricing-table .pricing-header-input-container select.form-control::-ms-expand { display: none; } .v2-pricing-table ul.pricing-plan-main-card-features-list { border-top: 0; border-radius: var(--border-radius-large); background-image: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.03), rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 3px ); margin-bottom: 0; border: 1px solid #F2F2F5; padding-top: var(--space-20); padding-bottom: var(--space-15); padding-left: var(--space-45); padding-right: var(--space-20); } .v2-pricing-table ul.pricing-plan-main-card-features-list li { margin-bottom: 7px; } .v2-pricing-table .pricing-plan-separator:before { display: none !important; } .v2-pricing-table .pricing-plan-separator { padding-top: var(--space-15); padding-bottom: var(--space-15); background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center; height: 2px; width: calc(100% + 45px + 20px); left: -45px; } .v2-pricing-table ul.pricing-plan-main-card-features-list li:before { content: url('data:image/svg+xml;utf8,'); width: 0.875rem; height: 0.875rem; display: inline-block; margin-right: 0.5rem; vertical-align: middle; } .v2-pricing-table .dotted-underline { text-decoration: underline dotted; text-underline-offset: 4px; border-bottom: none; text-decoration-color: var(--grayscale5); } .v2-pricing-table .v2-pricing-table-fancy-border-divider-bg-container { position: relative; } .v2-pricing-table .v2-pricing-table-fancy-border-divider-bg-1 { position: absolute; width: 100%; height: 30rem; background: linear-gradient(180deg,rgba(255, 255, 255, 0.00) 0%, #FFF 100%); /* filter: blur(0 0 306.1000061035156px 0); */ left: 50%; top: calc(-30rem + 4rem); z-index: -1; transform: translateX(-50%); } .v2-pricing-table .v2-pricing-table-fancy-border-divider-bg-2 { position: absolute; width: 18.125rem; height: 10rem; flex-shrink: 0; border-radius: 38.125rem; background: linear-gradient(180deg, #EBF9FF 0%, #DBF1FB 100%); filter: blur(106.1000061035156px); left: 50%; top: 0; /* top: calc(-10rem + 4rem); */ z-index: -2; transform: translateX(-50%); } .v2-pricing-table .v2-pricing-table-fancy-border-divider { position: relative; width: 100%; margin: 0 auto; display: flex; justify-content: center; padding-top: 4rem; padding-bottom: 4rem; } .v2-pricing-table .v2-pricing-table-fancy-border-divider svg { width: 100%; } .v2-pricing-table .v2-pricing-table-cta-customer-logos-container .v2-customer-color-logos-under-cta-inner { flex-direction: column; gap: 2rem; align-items: center; } .v2-pricing-table .v2-customer-color-logos-under-cta-container div[data-scrolling-customer-color-logos-under-cta] { max-width: 100%; } .v2-pricing-table .v2-compare-our-plans-title { color: var(--v2-blue-dark1); padding: .5rem .75rem; font-size: 1.5rem; font-weight: var(--font-weight-bold); } .v2-pricing-table .pricing-table-container tbody tr:has(.pricing-feature-separator-row-empty) + tr th, .v2-pricing-table .pricing-table-container tbody tr:has(.pricing-feature-separator-row-empty) + tr td { border-top: none !important; } .v2-pricing-table .pricing-feature-separator-row-empty { padding-top: var(--space-5) !important; content: ''; border-top: none !important; } .v2-pricing-table .pricing-feature-separator-row { background: var(--v2-blue-dark1) !important; color: var(--white) !important; font-weight: var(--font-weight-bold); font-size: 1rem; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; border-top: none !important; } .v2-pricing-table .pricing-feature-separator-row[scope="row"]:first-of-type { border-radius: var(--border-radius-regular) 0 0 var(--border-radius-regular); } .v2-pricing-table .pricing-feature-separator-row:last-of-type { border-radius: 0 var(--border-radius-regular) var(--border-radius-regular) 0; } .v2-pricing-table .pricing-feature-separator-row .pricing-feature-separator-row-inner { background: var(--v2-blue-dark1); color: var(--white); } .v2-pricing-table .pricing-table-container .pricing-header { max-width: 300px; /* min-width: 300px; */ top: 60px; /* background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.90) 100%) !important; */ background-color: oklab(1 0 0 / 0.4) !important; backdrop-filter: blur(16px) !important; } .v2-pricing-table .pricing-table-container .table th[scope="row"] { vertical-align: middle; } .v2-pricing-table .pricing-table-container .fa.fa-check:before { display: none;} .v2-pricing-table .pricing-table-container .fa.fa-check { width: 0.875rem; height: 0.875rem; stroke-width: 1.5px; stroke: var(--v2-gray-dark3); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1 5.66667L3.19134 8.15018C3.58943 8.60135 4.29292 8.60136 4.69101 8.15018L11 1' stroke='%23625E6F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; display: inline-block; } .v2-pricing-table .pricing-table-container .fa.fa-times:before { display: none;} .v2-pricing-table .pricing-table-container .fa.fa-times { width: 0.75rem; height: 0.75rem; opacity: 0.5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none'%3E%3Cg opacity='0.5'%3E%3Cpath d='M1 9L9 1' stroke='%23625E6F' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M9 9L1 1' stroke='%23625E6F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; display: inline-block; } @media screen and (max-width: 1600px) { .v2-pricing-table .v2-pricing-table-bg-svg { transform: scale(1.4, 1); } } @media screen and (max-width: 1200px) { .v2-pricing-table .v2-pricing-table-bg-svg { transform: scale(1.2, 1); } } @media screen and (max-width: 1000px) { .v2-pricing-table .v2-pricing-table-bg-svg { top: -5rem; } } @media screen and (max-width: 900px) { .v2-pricing-table .v2-pricing-table-bg-svg { top: -4rem; } } @media screen and (max-width: 768px) { .v2-pricing-table .v2-pricing-table-bg-svg { top: -3rem; } } @media screen and (max-width: 768px) { .v2-pricing-table .v2-pricing-table-bg-svg { /* transform: scale(1, 1); */ } } @media screen and (max-width: 600px) { .v2-pricing-table .v2-pricing-table-bg-svg { top: -2rem; } } @media screen and (max-width: 480px) { .v2-pricing-table .v2-pricing-table-bg-svg { top: -1rem; } } /* ---------- END: V2 PRICING TABLE ---------- */ /* ---------- V2 PRICING FAQ ---------- */ .v2-pricing-faq { } .v2-pricing-faq .v2-pricing-faq-inner { max-width: var(--max-width-1200); } .v2-faq-items { padding-top: 4rem; display: flex; flex-direction: column; gap: 0.5rem; margin: 0 auto; flex-grow: 0; display: grid; grid-template-columns: 1fr 1fr; } .v2-faq-item { color: var(--v2-blue-dark1); padding: var(--space-5) var(--space-15); align-self: start; /* Prevent stretching in grid layout */ border-radius: var(--border-radius-regular); border: 1px solid #E6E8EE; background: rgba(255, 255, 255, 0.80); } .v2-faq-item .fa-chevron-up:before { content: ''; display: block; width: 1.5rem; height: 1.5rem; background: url('data:image/svg+xml;utf8,') center center no-repeat; } .v2-faq-item .faq-button { font-weight: var(--font-weight-medium); } .v2-faq-item .faq-body { color: var(--v2-gray-dark3); } @media screen and (max-width: 768px) { .v2-faq-items { grid-template-columns: 1fr; } } /* ---------- END: V2 PRICING FAQ ---------- */ /* ---------- V2 ABOUT ---------- */ .v2-about { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 8rem; padding-top: 8rem; margin-bottom: 0; overflow: hidden; } .v2-about .v2-about-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .v2-about .v2-headline-badge { margin-bottom: 1rem; } .v2-about .v2-about-content { max-width: 900px; margin: 0 auto; padding: var(--space-20) var(--space-30); border-radius: var(--border-radius-large); background: #FFF; box-shadow: 0px 0px 0px 1px rgba(19, 19, 22, 0.05), 0px 10px 32px 0px rgba(34, 42, 53, 0.15), 0px 1px 1px 0px rgba(0, 0, 0, 0.05), 0px 4px 6px 0px rgba(34, 42, 53, 0.08), 0px 24px 68px 0px rgba(47, 48, 55, 0.10); overflow: hidden; } .v2-about .v2-headline-container { max-width: unset; } .v2-about .v2-headline-container .v2-headline { text-align: left; } .v2-about .v2-about-headline-subtext { color: var(--v2-gray-dark3); font-weight: var(--font-weight-medium); } .v2-about .v2-about-content-meat { position: relative; padding-top: 2rem; padding-bottom: 2rem; color: var(--v2-gray-dark3); } .v2-about .v2-about-content-meat .v2-about-content-meat-inner { z-index: 2; position: relative; padding-bottom: 2rem; } .v2-about .v2-about-content-meat .v2-about-content-meat-image { position: absolute; bottom: calc(-1 * var(--space-20) - 6rem); right: calc(-1 * var(--space-30)); left: calc(-1 * var(--space-30) + 2rem); width: calc(100% + (2 * var(--space-30)) + 10rem); z-index: 1; } .v2-about .v2-about-content-meat ul { list-style: none; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; margin: 0; padding: 0; max-width: var(--max-width-700); } .v2-about .v2-about-content-meat ul li { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } .v2-about .v2-about-content-meat ul li .v2-about-content-meat-results-number { font-size: 3.75rem; font-weight: var(--font-weight-bold); line-height: 1; margin-top: 1rem; } .v2-about .v2-about-content-meat ul li .v2-about-content-meat-results-number .v2-headline-text-gradient-mask { margin-bottom: 0; padding-bottom: 0; } .v2-about .v2-about-content-meat ul li .v2-about-content-meat-results-label { font-size: 1rem; color: #787484; } .v2-about .v2-about-bg-images { width: 100%; } .v2-about .v2-about-bg-image { position: absolute; top: 6rem; width: 50%; margin: 0 auto; z-index: -1; } .v2-about .v2-about-bg-image-1 { left: -280px; } .v2-about .v2-about-bg-image-2 { right: -280px; } .v2-about .v2-about-bg-image-3 { width: 100%; top: 2rem; z-index: -2; } @media screen and (max-width: 768px) { .v2-about .v2-about-content-meat ul { grid-template-columns: 1fr; gap: 1rem; } .v2-about .v2-about-content-meat .v2-about-content-meat-image { bottom: calc(-1 * var(--space-20) - 4rem); width: calc(100% + (2 * var(--space-30)) + 6rem); } .v2-about .v2-about-bg-image-1 { left: -180px; } .v2-about .v2-about-bg-image-2 { right: -180px; } } @media screen and (max-width: 480px) { .v2-about .v2-about-content-meat .v2-about-content-meat-image { bottom: calc(-1 * var(--space-20) - 2rem); width: calc(100% + (2 * var(--space-30)) + 4rem); } .v2-about .v2-about-bg-image { top: 12rem; } .v2-about .v2-about-bg-image-1 { left: -120px; } .v2-about .v2-about-bg-image-2 { right: -120px; } } /* ---------- END: V2 ABOUT ---------- */ /* ---------- V2 WATCH DEMO VIDEO PAGE ---------- */ .v2-watch-demo-video-page { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 0; padding-top: 8rem; } .v2-watch-demo-video-page .v2-watch-demo-video-page-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .v2-watch-demo-video-page .v2-watch-demo-video-page-content { position: relative; z-index: -1; } .v2-watch-demo-video-page .v2-watch-demo-how-it-works-video-section { margin-top: -8rem; position: relative; z-index: -1; } .v2-watch-demo-video-page .v2-watch-demo-how-it-works-video-section .how-it-works-video-container { } .v2-watch-demo-video-page .v2-watch-demo-how-it-works-video-section .how-it-works-video-inner { display: none; } .v2-watch-demo-video-page .v2-watch-demo-booking-form-section { } .v2-watch-demo-video-page .v2-watch-demo-booking-form-section .v2-book-demo { padding-top: 0; } .v2-watch-demo-video-page .v2-watch-demo-booking-form-section .v2-book-demo .v2-book-demo-inner h1 { font-size: 2rem; } @media screen and (max-width: 768px) { .v2-watch-demo-video-page .v2-watch-demo-booking-form-section .v2-book-demo .v2-book-demo-inner { margin-bottom: 4rem; } } /* ---------- END: V2 WATCH DEMO VIDEO PAGE ---------- */ /* ---------- V2 COMPARE COMPETITORS ---------- */ .v2-compare-competitors { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 0; padding-top: 8rem; } .v2-compare-competitors .v2-compare-competitors-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .v2-compare-competitors .v2-headline-container { max-width: 900px; } .v2-compare-competitors .v2-compare-competitors-main-image { position: relative; z-index: 2; margin: 0 auto; margin-bottom: -4rem; max-width: 740px; padding: 0 var(--space-20); margin-top: -1rem; } .v2-compare-competitors .v2-compare-competitors-table-section { z-index: 2; position: relative; } .v2-compare-competitors .v2-compare-competitors-testimonials-section { z-index: 2; position: relative; padding-top: 0; padding-bottom: 0; } .v2-compare-competitors .v2-compare-competitors-testimonials-section .testimonials-container{ max-width: 100%; } .v2-compare-competitors-testimonials-section .review-site-badges { padding-top: 2rem; padding-bottom: 2rem; } .v2-compare-competitors .v2-compare-competitors-bg-container { width: 100%; overflow-x: hidden; } .v2-compare-competitors .v2-compare-competitors-bg-container .v2-compare-competitors-bg-inner { width: 100%; height: 100%; overflow: visible; /* Allow overflow for the inner container */ } .v2-compare-competitors .v2-compare-competitors-bg-container .v2-compare-competitors-bg-inner .v2-compare-competitors-bg-svg-1 { z-index: -1; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; top: 2rem; width: 75.125rem; height: 41.4375rem; flex-shrink: 0; border-radius: 75.125rem; background: #DFF2FB; filter: blur(190.95001220703125px); } @media screen and (max-width: 768px) { .v2-compare-competitors .v2-compare-competitors-main-image { margin-bottom: -2rem; } .v2-compare-competitors .v2-compare-competitors-bg-container .v2-compare-competitors-bg-inner .v2-compare-competitors-bg-svg-1 { max-width: 100%; filter: blur(100px); } } @media screen and (max-width: 480px) { .v2-compare-competitors .v2-compare-competitors-main-image { margin-bottom: 0; } .v2-compare-competitors .v2-compare-competitors-bg-container .v2-compare-competitors-bg-inner .v2-compare-competitors-bg-svg-1 { filter: blur(80px); } } /* ---------- END: V2 COMPARE COMPETITORS ---------- */ /* ---------- V2 COMPARE COMPETITORS TABLE ---------- */ .v2-compare-competitors-table { top: -1.5rem; position: relative; } .v2-compare-competitors-table .v2-compare-competitors-table-inner { } .v2-compare-competitors-table .v2-competitor-logo-and-text { display: flex; align-items: center; gap: 0.5rem; margin-bottom: calc(-1 * var(--space-10)); } .v2-compare-competitors-table .v2-competitor-logo-and-text p { font-weight: var(--font-weight-medium); } .v2-compare-competitors-table .compare-gs-growsurf:not(.pricing-feature-separator-row) { background: #EBF9FF !important; } .v2-compare-competitors-table .table th, .v2-compare-competitors-table .table td { padding: 0.75rem 1rem; } .v2-compare-competitors-table.v2-pricing-table .pricing-table-container tbody tr:first-of-type th, .v2-compare-competitors-table.v2-pricing-table .pricing-table-container tbody tr:first-of-type td { border-radius: var(--border-radius-large) var(--border-radius-large) 0 0; } .v2-compare-competitors-table.v2-pricing-table .pricing-table-container tbody tr:last-of-type th, .v2-compare-competitors-table.v2-pricing-table .pricing-table-container tbody tr:last-of-type td { border-radius: 0 0 var(--border-radius-large) var(--border-radius-large); } .v2-compare-competitors-table.v2-pricing-table .pricing-table-container .fa.fa-check:before { display: none;} .v2-compare-competitors-table.v2-pricing-table .pricing-table-container .fa.fa-check { width: 0.875rem; height: 0.875rem; stroke-width: 1.5px; stroke: var(--v2-gray-dark3); background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center; background-size: contain; display: inline-block; } .v2-compare-competitors-table.v2-pricing-table .pricing-table-container .fa.fa-times:before { display: none;} .v2-compare-competitors-table.v2-pricing-table .pricing-table-container .fa.fa-times { width: 0.875rem; height: 0.875rem; stroke-width: 1.5px; background-image: url('data:image/svg+xml;utf8,'); background-repeat: no-repeat; background-position: center; display: inline-block; } .v2-compare-competitors-table .compare-competitors-table-container { padding: 0.5rem; overflow: auto; border-radius: var(--border-radius-large); border: 12px solid #FFF; /* background: rgba(255, 255, 255, 0.80); */ background: var(--white); box-shadow: 0px 1px 1px 0px rgba(0, 61, 118, 0.04), 0px 3px 3px 0px rgba(0, 61, 118, 0.03), 0px 6px 4px 0px rgba(0, 83, 118, 0.02), 0px 11px 4px 0px rgba(0, 83, 118, 0.01), 0px 32px 24px -12px rgba(0, 76, 118, 0.06), 0px 0px 0px 1px rgba(1, 97, 151, 0.04); backdrop-filter: blur(43.400001525878906px); } /* ---------- END: V2 COMPARE COMPETITORS TABLE ---------- */ /* ---------- V2 CUSTOMER EXAMPLES ---------- */ .v2-customer-examples-container { background: unset; width: 100%; z-index: 4; position: relative; padding-bottom: 0; padding-top: 7rem; overflow: hidden; } .v2-customer-examples-container .v2-customer-examples-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .v2-customer-examples-container .ml-form-embedWrapper { background-color: unset !important; } .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow, #mlb2-5679115.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent { display: flex; gap: var(--space-10); margin: 0 !important; } .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow { margin: 0 !important; } .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody, .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody { padding: 0 !important; } .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent, .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent { text-align: center !important; } .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent h4, .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent h4, .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedContent p, .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-successBody .ml-form-successContent p { text-align: center !important; margin: 0 !important; font-family: unset !important; } .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width: var(--max-width-700) !important; } .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit { float: unset !important; margin: 0 !important; max-width: 260px; } .v2-customer-examples-container.v2-customer-examples-container-in-popup { padding-top: 0; } .v2-customer-examples-container.v2-customer-examples-container-in-popup .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form { flex-direction: column; gap: var(--space-10); } .v2-customer-examples-container.v2-customer-examples-container-in-popup .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button { max-width: 100%; } .v2-customer-examples-container.v2-customer-examples-container-in-popup .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit { max-width: 100%; } .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form { display: flex; gap: var(--space-20); padding: var(--space-10); border-radius: var(--border-radius-large); border: 1px solid #DAE7EF; background: rgba(255, 255, 255, 0.72); box-shadow: 0px 12px 26.3px -17px rgba(0, 0, 0, 0.25); } .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button { color: var(--white); text-align: center; font-size: 1rem; font-style: normal; font-weight: var(--font-weight-bold); line-height: 1.5rem; letter-spacing: -0.005rem; display: flex; text-transform: capitalize; padding: 0.75rem 1.5rem; justify-content: center; align-items: center; gap: 0.5625rem; align-self: stretch; border-radius: var(--border-radius-regular) !important; border: 0.5px solid rgba(255, 255, 255, 0.12); background: linear-gradient(180deg, var(--v2-blue2) 0%, var(--v2-blue1) 100%); box-shadow: 0px 1px 2px -0.5px rgba(255, 255, 255, 0.12) inset, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.16) inset, 0px 8px 24px -4px rgba(255, 255, 255, 0.16) inset, 0px 8px 8px -3px rgba(7, 1, 19, 0.03), 0px 5px 5px -2.5px rgba(7, 1, 19, 0.03), 0px 3px 3px -1.5px rgba(7, 1, 19, 0.03), 0px 2px 2px -1px rgba(7, 1, 19, 0.03), 0px 1px 1px -0.5px rgba(7, 1, 19, 0.03), 0px 0.5px 0.5px 0px rgba(7, 1, 19, 0.03); transition: all 0.3s ease-in-out !important; /* Not expecting this to work with linear-gradient background */ padding: 1rem 2rem; font-family: unset !important; } .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:hover, .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:focus, .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button:active { background: linear-gradient(90deg, var(--v2-blue1) 0%, var(--v2-blue2) 100%); color: var(--white); transition: all 0.3s ease-in-out !important; /* Not expecting this to work with linear-gradient background */ /* transform: translateY(-1px); */ box-shadow: 0px 2px 4px -1px rgba(7, 1, 19, 0.06), 0px 1px 2px -0.5px rgba(7, 1, 19, 0.06), 0px 0.5px 1px 0px rgba(7, 1, 19, 0.06); } .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input { font-family: unset !important; border-radius: var(--border-radius-regular); border: 1px solid #DAE7EF; box-shadow: 0px 1px 2px -0.5px rgba(255, 255, 255, 0.12) inset, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.16) inset, 0px 8px 24px -4px rgba(255, 255, 255, 0.16) inset, 0px 8px 8px -3px rgba(7, 1, 19, 0.03), 0px 5px 5px -2.5px rgba(7, 1, 19, 0.03), 0px 3px 3px -1.5px rgba(7, 1, 19, 0.03), 0px 2px 2px -1px rgba(7, 1, 19, 0.03), 0px 1px 1px -0.5px rgba(7, 1, 19, 0.03), 0px 0.5px 0.5px 0px rgba(7, 1, 19, 0.03); } .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input::placeholder { color: rgba(113, 112, 122, 0.50) !important; font-weight: var(--font-weight-regular) !important; } .v2-customer-examples-container .v2-customer-examples-main-image { padding: var(--space-20); margin: 0 auto; width: 100%; display: flex; align-items: center; justify-content: center; max-width: var(--v2-header-width); position: relative; margin-top: -3rem; margin-bottom: -100px; } .v2-customer-examples-container .v2-customer-examples-main-image img { width: 100%; height: auto; } .v2-customer-examples-container .colorful-signup-cta-container { margin-top: -8rem; } /* Add a white scrim at bottom */ .v2-customer-examples-container .v2-customer-examples-main-image:after { content: ''; bottom: 0; left: 0; right: 0; height: 40%; margin-left: -50%; margin-right: -50%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); position: absolute; background: linear-gradient(180deg, #F9FCFE 0%, #FFF 100%); filter: blur(49.20000076293945px); } .v2-customer-examples-container .v2-customer-examples-bg-images { width: 100%; } .v2-customer-examples-container .v2-customer-examples-bg-image { position: absolute; top: 6rem; width: 50%; margin: 0 auto; z-index: -1; } .v2-customer-examples-container .v2-customer-examples-bg-image-1 { left: -280px; } .v2-customer-examples-container .v2-customer-examples-bg-image-2 { right: -280px; } .v2-customer-examples-container .v2-customer-examples-bg-container { width: 100%; overflow-x: hidden; } .v2-customer-examples-container .v2-customer-examples-bg-container .v2-customer-examples-bg-inner { width: 100%; height: 100%; overflow: visible; /* Allow overflow for the inner container */ } .v2-customer-examples-container .v2-customer-examples-bg-container .v2-customer-examples-bg-inner .v2-customer-examples-bg-svg-1 { z-index: -1; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 38.125rem; height: 100%; max-height: 49.375rem; flex-shrink: 0; border-radius: 49.375rem; background: linear-gradient(180deg, #EBF9FF 0%, #DBF1FB 100%); filter: blur(300px); } @media screen and (max-width: 768px) { .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper.embedForm { max-width: var(--max-width-500) !important; } .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-checkboxRow, #mlb2-5679115.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-formContent { flex-direction: column; } .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody form { flex-direction: column; align-items: center; padding: var(--space-20); } .v2-customer-examples-container .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedSubmit { max-width: 100%; } .v2-customer-examples-container .colorful-signup-cta-container { margin-top: 7rem; } .v2-customer-examples-container .v2-customer-examples-main-image { margin-top: -1rem; } .v2-customer-examples-container .v2-customer-examples-bg-container .v2-customer-examples-bg-inner .v2-customer-examples-bg-svg-1 { max-width: 100%; filter: blur(100px); } .v2-customer-examples-container .v2-customer-examples-bg-image-1 { left: -180px; } .v2-customer-examples-container .v2-customer-examples-bg-image-2 { right: -180px; } } @media screen and (max-width: 600px) { .v2-customer-examples-container .colorful-signup-cta-container { margin-top: 6rem; } .v2-customer-examples-container .v2-customer-examples-main-image:after { bottom: 0; height: 50%; } } @media screen and (max-width: 480px) { .v2-customer-examples-container .v2-customer-examples-bg-container .v2-customer-examples-bg-inner .v2-customer-examples-bg-svg-1 { filter: blur(80px); } .v2-customer-examples-container .v2-customer-examples-bg-image { top: 12rem; } .v2-customer-examples-container .v2-customer-examples-bg-image-1 { left: -120px; } .v2-customer-examples-container .v2-customer-examples-bg-image-2 { right: -120px; } } /* ---------- END: V2 CUSTOMER EXAMPLES ---------- */ /* ---------- V2 CASE STUDIES ---------- */ .v2-case-studies-container { background: unset; width: 100%; z-index: 4; position: relative; padding-bottom: 0; padding-top: 7rem; overflow: hidden; } .v2-case-studies-container .v2-case-studies-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .v2-case-studies-container .v2-case-studies-headline-container { /* max-width: 940px; */ } .v2-case-studies-container .v2-case-studies-main-image { padding: var(--space-20); width: 100%; display: flex; align-items: center; justify-content: center; max-width: var(--max-width-300); position: relative; margin: 0 auto; margin-bottom: calc(-1 * var(--space-30)); z-index: -1; } .v2-case-studies-container .v2-case-studies-main-image img { width: 100%; height: auto; } .v2-case-studies-container .case-study { display: flex; align-items: flex-start; justify-content: space-between; flex-direction: row-reverse; padding: 2rem 1rem !important; border-radius: var(--border-radius-large); border: 0.502px solid rgba(0, 0, 0, 0.02); background: rgba(236, 237, 243, 0.32); max-width: var(--max-width-800); gap: 2rem; margin: 0 auto; margin-bottom: 1rem; } .v2-case-studies-container .case-study .case-study-logo:after { padding-top: 1rem; content: ""; display: block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='351' height='2' viewBox='0 0 351 2' fill='none'%3E%3Cpath d='M0 1L351 1.00003' stroke='rgba(236, 237, 243, 1)'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 100% auto; width: 100%; height: 2px; margin-top: var(--space-20); width: 100%; } .v2-case-studies-container .case-study .case-study-half { display: flex; align-items: center; justify-content: center; width: unset; max-width: 50%; } .v2-case-studies-container .case-study .case-study-half .lead { font-weight: var(--font-weight-regular) !important; color: #696873; font-size: 0.878rem; } .v2-case-studies-container .case-study .case-study-customer-title { color: #999; } .v2-case-studies-container .case-study .case-study-content-container { flex: 1; max-width: unset; padding: 0 var(--space-20); display: flex; align-items: space-between !important; justify-content: space-between !important; flex-direction: column; } .v2-case-studies-container .case-study .case-study-image-container .shadow { border-radius: 0.75263rem !important; background: rgba(255, 255, 255, 0.85); box-shadow: 0px 1.003px 2.007px 0px rgba(46, 63, 95, 0.08), 0px 4.014px 6.021px 0px rgba(46, 63, 95, 0.04), 0px 24.083px 40.138px -16.055px rgba(37, 60, 104, 0.08) !important; } .v2-case-studies-container .case-study .case-study-image-container { max-width: var(--max-width-300); padding-right: var(--space-10); } .v2-case-studies-container .colorful-signup-cta-container { } .v2-case-studies-container .v2-case-studies-bg-images { width: 100%; } .v2-case-studies-container .v2-case-studies-bg-image { position: absolute; top: 6rem; width: 50%; margin: 0 auto; z-index: -1; } .v2-case-studies-container .v2-case-studies-bg-image-1 { left: -280px; } .v2-case-studies-container .v2-case-studies-bg-image-2 { right: -280px; } .v2-case-studies-container .v2-case-studies-bg-container { width: 100%; overflow-x: hidden; } .v2-case-studies-container .v2-case-studies-bg-container .v2-case-studies-bg-inner { width: 100%; height: 100%; overflow: visible; /* Allow overflow for the inner container */ } .v2-case-studies-container .v2-case-studies-bg-container .v2-case-studies-bg-inner .v2-case-studies-bg-svg-1 { z-index: -1; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 38.125rem; height: 100%; max-height: 49.375rem; flex-shrink: 0; border-radius: 49.375rem; background: linear-gradient(180deg, #EBF9FF 0%, #DBF1FB 100%); filter: blur(300px); } .v2-case-studies-container .v2-case-studies-meat { } @media screen and (max-width: 768px) { .v2-case-studies-container .case-study { flex-direction: column; align-items: center; margin: var(--space-10); margin-bottom: 1rem; gap: 1rem; } .v2-case-studies-container .case-study .case-study-image-container { padding: var(--space-10); padding-bottom: var(--space-20); } .v2-case-studies-container .colorful-signup-cta-container { margin-top: 7rem; } .v2-case-studies-container .v2-case-studies-main-image { margin-top: -1rem; } .v2-case-studies-container .v2-case-studies-bg-container .v2-case-studies-bg-inner .v2-case-studies-bg-svg-1 { max-width: 100%; filter: blur(100px); } .v2-case-studies-container .v2-case-studies-bg-image-1 { left: -180px; } .v2-case-studies-container .v2-case-studies-bg-image-2 { right: -180px; } } @media screen and (max-width: 600px) { .v2-case-studies-container .colorful-signup-cta-container { margin-top: 6rem; } } @media screen and (max-width: 480px) { .v2-case-studies-container .v2-case-studies-bg-container .v2-case-studies-bg-inner .v2-case-studies-bg-svg-1 { filter: blur(80px); } .v2-case-studies-container .v2-case-studies-bg-image { top: 12rem; } .v2-case-studies-container .v2-case-studies-bg-image-1 { left: -120px; } .v2-case-studies-container .v2-case-studies-bg-image-2 { right: -120px; } } /* ---------- END: V2 CASE STUDIES ---------- */ /* ---------- V2 INTEGRATION PAGE ---------- */ .v2-integration-page { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 5rem; padding-top: 8rem; overflow: hidden; } .v2-integration-page .v2-integration-page-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .v2-integration-page .v2-integration-features-main-image { max-width: 400px; margin: 0 auto; margin-bottom: -40px; } .v2-integration-page .v2-integration-features-main-image img { width: 100%; height: auto; } .v2-integration-page-fancy-leonardo-bg { position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: -1; display: flex; justify-content: center; } .v2-integration-page-fancy-leonardo-bg img { width: 100%; height: auto; object-fit: cover; } .v2-integration-page-fancy-glistening-slanted-bg { position: absolute; top: 0; /* left: 0; */ right: 0; width: 100%; z-index: -1; display: flex; justify-content: center; max-height: 100vh; max-width: 500px; } .v2-integration-page-fancy-glistening-slanted-bg img { width: 100%; height: auto; object-fit: cover; } .v2-integration-page .integration-partner-badge-image { max-width: 160px; margin-bottom: 1rem; } .v2-integration-page .badge-or-label-container { display: flex; align-items: center; justify-content: center; gap: 1rem; } .v2-integration-page .v2-headline-container-main { max-width: 680px !important; margin-bottom: 2rem !important; } .v2-integration-page .v2-integration-page-cta { margin-top: 1rem; } .v2-integration-page .v2-integration-page-inner .v2-headline-badge, .v2-integration-page .v2-integration-page-inner .v2-headline-container { z-index: 2; position: relative; } .v2-integration-page .integrations-container { padding: 0 var(--space-20); } .v2-integration-page-fancy-border-divider { position: relative; width: 100%; margin: 0 auto; display: flex; justify-content: center; } .v2-integration-page-fancy-border-divider svg { width: 100%; } .v2-integration-page .v2-integration-page-main-images { position: relative; width: 1026px; /* True width of the image */ max-width: 1026px; /* True width of the image */ z-index: -1; margin: 0 auto; position: relative; margin-top: calc(-389.62px + 150px); } .v2-integration-page .v2-integration-page-main-images .v2-integration-page-main-image-1 { width: 1026px; /* True width of the image */ max-width: 1026px; /* True max-width of the image */ height: auto; } .v2-integration-page .v2-integration-page-main-images .v2-integration-page-main-image-2 img { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 76px; height: auto; padding: 16px; } .v2-integration-page .v2-integration-page-main-images .v2-integration-page-main-image-2.v2-integration-page-main-image-2-full img { padding: 0; border-radius: var(--border-radius-large); } .v2-integration-page .v2-integration-page-main-images .v2-integration-page-main-image-2.v2-integration-page-main-image-2-bask img { margin-top: 12px; } .v2-integration-page .v2-integration-page-main-images .v2-integration-page-main-image-2:before { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; z-index: 1; width: 76px; height: 76px; background: var(--white); /* background: linear-gradient(180deg, #B8E9FF 0%, #FFF 100%); */ border-radius: 12px; border: 0.5px solid rgba(255, 255, 255, 0.12); /* box-shadow: 0px -1px 0px 0px rgba(67, 185, 252, 0.28) inset, 0px 1px 2px -0.5px rgba(255, 255, 255, 0.12) inset, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.16) inset, 0px 8px 24px -4px rgba(255, 255, 255, 0.16) inset; */ box-shadow: 0 10px 3px 0 transparent,0 7px 3px 0 rgba(0,0,0,.01),0 4px 2px 0 rgba(0,0,0,.02),0 2px 2px 0 rgba(0,0,0,.03),0 0 1px 0 rgba(0,0,0,.04); /* Keep `filter: drop-shadow` commented out or else it lags the page: */ /* filter: drop-shadow(0px 0.5px 0.5px rgba(7, 1, 19, 0.03)) drop-shadow(0px 1px 1px rgba(7, 1, 19, 0.03)) drop-shadow(0px 2px 2px rgba(7, 1, 19, 0.03)) drop-shadow(0px 3px 3px rgba(7, 1, 19, 0.03)) drop-shadow(0px 5px 5px rgba(7, 1, 19, 0.03)) drop-shadow(0px 8px 8px rgba(7, 1, 19, 0.03)); */ } .v2-integration-page .v2-integration-page-main-images .v2-integration-page-main-image-2-left:before { left: 0; } .v2-integration-page .v2-integration-page-main-images .v2-integration-page-main-image-2-right:before { right: 0; } .v2-integration-page .v2-integration-page-main-images .v2-integration-page-main-image-2:after { content: ""; display: block; width: 60px; height: 60px; background-image: url("https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/1869c1f4-d924-4d91-a435-f76dee3df30c.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; position: absolute; left: 8px; right: 8px; top: 8px; bottom: 8px; z-index: 2; } .v2-integration-page .v2-integration-page-main-images .v2-integration-page-main-image-2 { position: absolute; top: 0; } .v2-integration-page .v2-integration-page-main-images .v2-integration-page-main-image-2-left { left: calc(-1 * (76px - 22px - (1px * 2)) / 2); /* 76px = integration icon (with background), 22px = width of the vertical pipes, 1px = border on each side */ } .v2-integration-page .v2-integration-page-main-images .v2-integration-page-main-image-2-right { right: calc(-1 * (76px - 22px - (1px * 2)) / 2); /* 76px = integration icon (with background), 22px = width of the vertical pipes, 1px = border on each side */ } .v2-integration-page .content-that-goes-with-integration-bg-image { /* min-height: calc(389.62px - 170px); */ } .v2-integration-page .view-all-integrations { margin: 0 auto; margin-top: -3rem !important; max-width: var(--v2-header-width); } .v2-integration-page .view-all-integrations .container { padding-left: 0 !important; max-width: calc(100% - 10px - 10px - 20px); } .v2-integration-page .v2-integration-page-bg-container { width: 100%; overflow-x: hidden; } .v2-integration-page .v2-integration-page-bg-container .v2-integration-page-bg-inner { width: 100%; height: 100%; overflow: visible; /* Allow overflow for the inner container */ } .v2-integration-page .v2-integration-page-bg-container .v2-integration-page-bg-inner .v2-integration-page-bg-svg-1 { z-index: -1; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; top: 15rem; width: 75.125rem; height: 41.4375rem; flex-shrink: 0; border-radius: 75.125rem; background: #DFF2FB; filter: blur(190.95001220703125px); opacity: 0.6; } .v2-integration-page .v2-integration-page-bg-container .v2-integration-page-bg-inner .v2-integration-page-bg-svg-1.v2-integration-page-bg-svg-1-style-2 { top: -15rem; border-radius: 38.125rem; background: linear-gradient(180deg, #EBF9FF 0%, #DBF1FB 100%); filter: blur(306.1000061035156px); } .v2-integration-page .v2-customer-logos-container { padding-bottom: 1rem !important; } .v2-integration-page-ctas-section { background: var(--white); width: 100%; z-index: 2; position: relative; padding: 0; padding-bottom: 3rem; padding-top: 3rem; overflow: hidden; } .v2-integration-page-ctas-section .v2-integration-page-ctas-section-inner { padding: var(--space-10); margin: 0 auto; max-width: var(--v2-header-width); z-index: 3; position: relative; padding-bottom: 3rem; } .v2-integration-page .v2-headline-container { max-width: 880px; margin-bottom: 3.75rem; } .v2-integration-page-ctas { } .v2-integration-page-ctas-row { display: grid; gap: 1rem; } .v2-integration-page-ctas-row h4:before { content: ""; width: calc(100% + 1rem + 1rem); border: 0.5px solid #EEEFF4; margin-bottom: 1rem; margin-top: 1rem; margin-left: -1rem; margin-right: -1rem; position: relative; z-index: -1; display: block; } .v2-integration-page-ctas-for-affiliate-software .v2-integration-page-ctas-row h4:before { border: none; margin-bottom: 0; } .v2-integration-page-ctas-row h4.integration-page-ctas-row-title-border-bottom:before { display: none; } .v2-integration-page-ctas-row h4.integration-page-ctas-row-title-border-bottom:after { content: ""; width: calc(100% + 1rem + 1rem); border: 0.5px solid #EEEFF4; margin-bottom: 1rem; margin-top: 1rem; margin-left: -1rem; margin-right: -1rem; position: relative; z-index: -1; display: block; } .v2-integration-page-ctas-row h4 { font-size: 1.25rem; opacity: 0.95; font-weight: var(--font-weight-medium); flex-grow: 1; /* Add this line to push the button down */ position: relative; } .v2-integration-page-ctas-row p { font-size: 0.875rem; font-weight: var(--font-weight-normal); color: var(--v2-gray-dark3); } .v2-integration-page-ctas-row .icon-for-cta-item { display: flex; align-items: center; justify-content: center; width: var(--space-45); height: var(--space-45); background: var(--white); border-radius: var(--border-radius-large); padding: var(--space-10); background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.95) 100%); box-shadow: 0px 24px 24px rgba(42, 51, 70, 0.03), 0px 10px 10px rgba(42, 51, 70, 0.03), 0px 5px 5px rgba(42, 51, 70, 0.03), 0px 3px 3px rgba(42, 51, 70, 0.04), 0px 2px 2px rgba(42, 51, 70, 0.04), 0px 1px 1px rgba(42, 51, 70, 0.03), 0px 0px 0px rgba(14, 63, 126, 0.10); backdrop-filter: blur(1px); position: relative; } .v2-integration-page-ctas-row .icon-for-cta-item svg { max-width: var(--space-20); } .v2-integration-page-ctas-row .v2-btn { max-width: fit-content; } .v2-integration-page-cta-item { border-radius: var(--border-radius-large); border: 0.5px solid rgba(0, 0, 0, 0.02); background: rgba(236, 237, 243, 0.32); padding: 0.62rem; height: 100%; /* Add this line */ } .v2-integration-page-cta-item .v2-integration-page-cta-item-inner { padding: 1rem; border-radius: var(--border-radius-large); box-shadow: 0px 1px 2px 0px rgba(46, 63, 95, 0.08), 0px 4px 6px 0px rgba(46, 63, 95, 0.04), 0px 24px 40px -16px rgba(37, 60, 104, 0.08); background: var(--white); display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; height: 100%; /* Add this line */ margin-bottom: 1rem; position: relative; } .v2-integration-page-cta-item .v2-integration-page-cta-case-study-image { margin: 0 auto; position: relative; overflow: hidden; } .v2-integration-page-cta-item .v2-integration-page-cta-case-study-image img { max-height: 480px; border-radius: 0.75263rem 0.75263rem 0 0 !important; background: rgba(255, 255, 255, 0.85); box-shadow: 0px 1.003px 2.007px 0px rgba(46, 63, 95, 0.08), 0px 4.014px 6.021px 0px rgba(46, 63, 95, 0.04), 0px 24.083px 40.138px -16.055px rgba(37, 60, 104, 0.08) !important; width: auto; position: relative; margin-bottom: -90px; } /* Add a white scrim at bottom */ .v2-integration-page-cta-item .v2-integration-page-cta-case-study-image:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; /* Start at the bottom */ height: 30%; /* Cover more of the image */ background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 40%, #fff 100% ); pointer-events: none; } .v2-integration-page-cta-item .v2-integration-page-cta-case-study-image.bolt-case-study-image { border-radius: 8px !important; } .v2-integration-page-cta-item .v2-integration-page-cta-case-study-image.bolt-case-study-image:after { display: none; } .v2-integration-page-cta-item .v2-integration-page-cta-case-study-image.bolt-case-study-image img { max-height: 600px;margin-bottom: 0; overflow:hidden; border-radius: 8px !important; transform: scale(1.4) } .v2-integration-page-ctas-row-3-items { grid-template-columns: 1fr 1fr 1fr; } .v2-integration-page-ctas-row-2-items { grid-template-columns: 1fr 1fr; } .v2-integration-page-ctas-row-1-items { grid-template-columns: 1fr; max-width: 600px; margin: 0 auto; } /* 1026px width of the image + (20px padding * 2) on each side + (26px of the integration image [including 1px border] * 2) */ /* 1026px + 40px + 52px = 1118px */ @media (max-width: 1118px) { .v2-integration-page .v2-integration-page-main-images { left: 50%; transform: translateX(-50%) scale(0.9); } } @media (max-width: 1000px) { .v2-integration-page .v2-integration-page-main-images { transform: translateX(-50%) scale(0.85); } } @media (max-width: 946px) { .v2-integration-page .v2-integration-page-main-images { transform: translateX(-50%) scale(0.8); margin-top: calc(-389.62px + 170px + 45px); margin-bottom: -90px; } } @media (max-width: 890px) { .v2-integration-page .v2-integration-page-main-images { transform: translateX(-50%) scale(0.75); } .v2-integration-page-ctas-row { grid-template-columns: 1fr; } } @media (max-width: 831px) { .v2-integration-page .v2-integration-page-main-images { transform: translateX(-50%) scale(0.6); } } @media screen and (max-width: 768px) { .v2-integration-page .v2-integration-page-main-image { margin-bottom: -2rem; } .v2-integration-page-bg-svg-1 { max-width: 100%; filter: blur(100px); } } @media (max-width: 700px) { .v2-integration-page .v2-integration-page-main-images { transform: translateX(-50%) scale(0.4); margin-top: calc(-389.62px + 170px + 140px); margin-bottom: -170px; } } /* @media (max-width: 494px) { .v2-integration-page .v2-integration-page-main-images { transform: translateX(-50%) scale(0.3); margin-top: calc(-389.62px + 170px + 130px); margin-bottom: -170px; } } */ @media (max-width: 494px) { /* @media (max-width: 383px) { */ .v2-integration-page .v2-integration-page-main-images { left: 0; transform: translateX(0) scale(1); display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 0; margin-bottom: 0; } .v2-integration-page .v2-integration-page-main-image-1 { display: none; } .v2-integration-page .v2-integration-page-main-image-2 { display: none; position: relative !important; top: 0; left: 0 !important; margin: 0 auto; right: 0 !important; } .content-and-integration-bg-image { display: flex; flex-direction: column-reverse; } .v2-integration-page .v2-integration-page-main-image-2-left { display: block; } } @media screen and (max-width: 480px) { .v2-integration-page .v2-integration-page-main-image { margin-bottom: 0; } .v2-integration-page .v2-integration-page-bg-container .v2-integration-page-bg-inner .v2-integration-page-bg-svg-1 { filter: blur(80px); } } .v2-integration-features-container { margin: 0 auto; background: unset; width: 100%; z-index: 4; position: relative; padding-bottom: 1rem; background: var(--white); padding-top: 3rem; } .v2-integration-features-container .v2-integration-features-inner { max-width: var(--max-width-1200); margin: 0 auto; padding: var(--space-20); } .v2-customer-reward-examples-image { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 900px; margin: 0 auto; position: relative; z-index: 1; } .v2-customer-reward-examples-image img { width: 100%; height: 100%; object-fit: contain; } .v2-integration-features-container .v2-integration-features-grid { margin-top: 3rem; display: flex; flex-direction: column; align-items: center; justify-content: center; } .v2-integration-features-container ul.v2-integration-features-grid-list { display: grid; grid-template-columns: repeat(15, 1fr); grid-template-rows: repeat(2, 1fr); grid-column-gap: 0px; grid-row-gap: 0px; background: none; padding: 0; margin: calc(-1 * var(--space-10)); } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card { background: var(--white); border-radius: 1.5rem; border: none; min-height: 220px; transition: box-shadow 0.2s, transform 0.2s; outline: none; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; margin: var(--space-10); background: #F6F7FA; } .v2-integration-features-container .v2-integration-features-grid-item-wrapper { padding: 2.25rem 2rem 2rem 2rem; width: 100%; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; text-align: left; } .v2-integration-features-container .v2-integration-features-grid-item-image { display: flex; align-items: center; justify-content: center; margin: 0 auto; position: relative; } .v2-integration-features-container .v2-integration-features-grid-item-image img { width: 100%; object-fit: contain; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(1) .v2-integration-features-grid-item-image { max-width: 234px; bottom: 0; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(2) .v2-integration-features-grid-item-image { max-width: 240px; bottom: -50px; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(3) .v2-integration-features-grid-item-image { max-width: 208px; bottom: -10px; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(4) .v2-integration-features-grid-item-image { max-width: 248px; bottom: -40px; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(5) .v2-integration-features-grid-item-image { max-width: 420px; bottom: -20px; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(6) .v2-integration-features-grid-item-image { max-width: unset; bottom: -20px; margin-left: -2rem; margin-right: -2rem; } .v2-integration-features-container .v2-integration-features-grid-item-title-and-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; text-align: left; z-index: 1; } .v2-integration-features-container .v2-integration-features-grid-item-title { font-size: 1rem; font-weight: 600; color: var(--v2-black1); margin-bottom: 1rem; line-height: 1.2; } .v2-integration-features-container .v2-integration-features-grid-item-text { font-size: 0.875rem; color: var(--v2-gray-dark); font-weight: 400; line-height: 1.5; margin: 0; } /* Used https://cssgrid-generator.netlify.app/ to generate the bento grid */ .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(1) { grid-area: 1 / 1 / 2 / 7; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(2) { grid-area: 1 / 7 / 2 / 11; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(3) { grid-area: 1 / 11 / 2 / 16; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(4) { grid-area: 2 / 1 / 3 / 5; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(5) { grid-area: 2 / 5 / 3 / 11; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(6) { grid-area: 2 / 11 / 3 / 16; } /* Responsive: stack cards on mobile */ @media screen and (max-width: 1200px) { .v2-integration-features-container ul.v2-integration-features-grid-list { grid-template-columns: repeat(8, 1fr); } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(1) { grid-area: 1 / 1 / 2 / 5; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(2) { grid-area: 1 / 5 / 2 / 7; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(3) { grid-area: 1 / 7 / 2 / 9; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(4) { grid-area: 2 / 1 / 3 / 3; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(5) { grid-area: 2 / 3 / 3 / 7; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(6) { grid-area: 2 / 7 / 3 / 9; } } @media screen and (max-width: 992px) { .v2-integration-features-container ul.v2-integration-features-grid-list { grid-template-columns: repeat(6, 1fr); } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(1) { grid-area: 1 / 1 / 2 / 4; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(2) { grid-area: 1 / 4 / 2 / 7; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(3) { grid-area: 2 / 1 / 3 / 4; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(4) { grid-area: 2 / 4 / 3 / 7; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(5) { grid-area: 3 / 1 / 4 / 4; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(6) { grid-area: 3 / 4 / 4 / 7; } } @media screen and (max-width: 768px) { .v2-integration-features-container ul.v2-integration-features-grid-list { grid-template-columns: repeat(4, 1fr); grid-template-rows: auto; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(1) { grid-area: 1 / 1 / 2 / 3; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(2) { grid-area: 1 / 3 / 2 / 5; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(3) { grid-area: 2 / 1 / 3 / 3; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(4) { grid-area: 2 / 3 / 3 / 5; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(5) { grid-area: 3 / 1 / 4 / 3; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(6) { grid-area: 3 / 3 / 4 / 5; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(1) .v2-integration-features-grid-item-image { } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(2) .v2-integration-features-grid-item-image { } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(3) .v2-integration-features-grid-item-image { bottom: 20px; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(4) .v2-integration-features-grid-item-image { bottom: -20px; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(5) .v2-integration-features-grid-item-image { } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(6) .v2-integration-features-grid-item-image { } } @media screen and (max-width: 576px) { .v2-integration-features-container ul.v2-integration-features-grid-list { grid-template-columns: 1fr; grid-template-rows: auto; gap: var(--space-10); } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card { grid-area: auto !important; min-height: 180px; } .v2-integration-features-container .v2-integration-features-grid-item-wrapper { padding: 1.25rem 1rem 1rem 1rem; } .v2-integration-features-container .v2-integration-features-grid-item-title { font-size: 1.1rem; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(1) .v2-integration-features-grid-item-image { } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(2) .v2-integration-features-grid-item-image { } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(3) .v2-integration-features-grid-item-image { bottom: 10px; max-width: 180px; margin-top: 10px; margin-bottom: 20px; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(4) .v2-integration-features-grid-item-image { bottom: 0; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(5) .v2-integration-features-grid-item-image { bottom: 0; } .v2-integration-features-container ul.v2-integration-features-grid-list li.bento-card:nth-child(6) .v2-integration-features-grid-item-image { margin-left: -1rem; margin-right: -1rem; } } .v2-integration-page .v2-integration-page-use-cases { margin: 0 auto; max-width: var(--max-width-1200); background: unset; width: 100%; z-index: 3; position: relative; padding-bottom: 1rem; background: var(--white); padding-top: 3rem; } .v2-integration-page .v2-integration-page-use-cases .v2-integration-page-use-cases-inner { padding: var(--space-20); } .v2-integration-page .v2-integration-page-use-cases-meat { } /* ---------- END: V2 INTEGRATION PAGE ---------- */ /* ---------- V2 WANT TO AUTOMATE ACQUISITION ---------- */ .want-to-automate-acquisition-container { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 0; padding-top: 2rem; } .want-to-automate-acquisition-container .want-to-automate-acquisition-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 4rem; overflow: hidden; } .want-to-automate-acquisition-fancy-border-divider { position: relative; width: 100%; margin: 0 auto; display: flex; justify-content: center; } .want-to-automate-acquisition-fancy-border-divider svg { width: 100%; } .want-to-automate-acquisition-container .want-to-automate-acquisition-main-image { width: 591px; margin-top: -70px; position: relative; left: 50%; transform: translateX(-50%); margin-bottom: 0; } .want-to-automate-acquisition-container .want-to-automate-acquisition-main-image img { width: 100%; height: auto; } .gs-two-branch-image { width: 591px; margin-top: -70px; position: relative; left: 50%; transform: translateX(-50%); margin-bottom: 0; } .gs-two-branch-image img { width: 100%; height: auto; } @media screen and (max-width: 703px) { .want-to-automate-acquisition-container .want-to-automate-acquisition-main-image { width: 725px; } .gs-two-branch-image { width: 725px; } } @media screen and (max-width: 480px) { .want-to-automate-acquisition-container .want-to-automate-acquisition-main-image { transform: translateX(-50%) scale(0.7); margin-bottom: -40px; margin-top: -100px; } .gs-two-branch-image { transform: translateX(-50%) scale(0.7); margin-bottom: -40px; margin-top: -100px; } } @media screen and (max-width: 600px) { .want-to-automate-acquisition-container .want-to-automate-acquisition-main-image img { margin-bottom: 1rem; } .gs-two-branch-image img { margin-bottom: 1rem; } } /* ---------- END: V2 WANT TO AUTOMATE ACQUISITION ---------- */ /* ---------- V2 GROW WITH REFERRALS CTA ---------- */ .grow-with-referrals-cta-container { margin: 0 auto; text-align: center; padding-top: 0; padding-bottom: 2rem; max-width: var(--v2-header-width); margin-bottom: 0; position: relative; z-index: 4; } .grow-with-referrals-cta-inner { position: relative; z-index: 2; width: 100%; max-width: 100%; overflow: hidden; padding-top: 5rem; border-radius: var(--border-radius-large); /* background: rgba(255, 255, 255, 0.92); */ background: linear-gradient(180deg, #EBF5FE 0%, #B8E9FF 100%); box-shadow: 0px 1px 1px 0px rgba(0, 61, 118, 0.04), 0px 3px 3px 0px rgba(0, 61, 118, 0.03), 0px 6px 4px 0px rgba(0, 83, 118, 0.02), 0px 11px 4px 0px rgba(0, 83, 118, 0.01), 0px 32px 24px -12px rgba(0, 76, 118, 0.06), 0px 0px 0px 1px rgba(1, 97, 151, 0.04); backdrop-filter: blur(26.200000762939453px); } .grow-with-referrals-cta-container .v2-headline-container { padding: var(--space-10); z-index: 1; position: relative; padding-bottom: 3rem; max-width: 750px; margin-top: -1.5rem; } .v2-subheadline.grow-with-referrals-cta-subheadline { margin-bottom: 2rem; } .grow-with-referrals-cta-container .email-form-signup-cta-subtext { color: var(--v2-blue-dark1); } .grow-with-referrals-cta-container .email-form-signup-cta-subtext svg path { fill: var(--v2-blue-dark1); } .grow-with-referrals-checkpoints { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 2rem; } .grow-with-referrals-checkpoint { display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .grow-with-referrals-cta-cta { z-index: 2; position: relative; } .grow-with-referrals-cta-grid-image-container { width: 100%; position: relative; /* padding-top: 21.12%; */ /* Calculated based on inner dimensions 12.52981 / 59.32913 */ padding-top: 5rem; height: 0; } .grow-with-referrals-cta-grid-image-container-inner { width: 59.32913rem; height: 12.52981rem; flex-shrink: 0; position: absolute; top: -7.5rem; /* Adjust as needed to recreate negative margin effect */ left: 50%; transform: translateX(-50%); /* Horizontal centering */ z-index: 1; } .grow-with-referrals-cta-container .grow-with-referrals-cta-bg-container { width: 100%; overflow-x: hidden; } .grow-with-referrals-cta-container .grow-with-referrals-cta-bg-container .grow-with-referrals-cta-bg-inner { width: 100%; height: 100%; overflow: visible; /* Allow overflow for the inner container */ } .grow-with-referrals-cta-container .grow-with-referrals-cta-bg-container .grow-with-referrals-cta-bg-inner .grow-with-referrals-cta-bg-svg-1 { width: calc(100% + 60px + 60px); left: -60px; height: 480px; /* Fixed height */ position: absolute; top: 0; z-index: 0; } .grow-with-referrals-cta-container .grow-with-referrals-cta-bg-container .grow-with-referrals-cta-bg-inner .grow-with-referrals-cta-bg-svg-1 img { width: 100%; height: 100%; object-fit: cover; /* Maintain aspect ratio while filling container */ } .grow-with-referrals-cta-container .grow-with-referrals-cta-bg-container .grow-with-referrals-cta-bg-inner .grow-with-referrals-cta-bg-svg-2 { z-index: -1; position: absolute; left: 50%; transform: translateX(-50%); width: 100%; max-width: 38.125rem; flex-shrink: 0; height: 300px; right: 0; top: unset; max-width: 1220px; margin-top: -4rem; border-radius: 80rem; background: rgba(154, 223, 255, 0.72); filter: blur(100px); } @media screen and (max-width: 890px) { .grow-with-referrals-cta-container .grow-with-referrals-cta-bg-container .grow-with-referrals-cta-bg-inner .grow-with-referrals-cta-bg-svg-1 { height: 420px; top: var(--space-20); } } @media screen and (max-width: 768px) { .grow-with-referrals-cta-container { padding: 0; } .grow-with-referrals-cta-container .grow-with-referrals-cta-inner { padding-top: 2rem; } .grow-with-referrals-cta-container .v2-headline-container { padding-bottom: 2rem; } .grow-with-referrals-cta-container .grow-with-referrals-cta-bg-container .grow-with-referrals-cta-bg-inner .grow-with-referrals-cta-bg-svg-1 { height: 380px; top: calc(-1 * var(--space-25)); } .grow-with-referrals-cta-container .grow-with-referrals-cta-bg-container .grow-with-referrals-cta-bg-inner .grow-with-referrals-cta-bg-svg-2 { max-width: 100%; /* filter: blur(50px); */ } } @media screen and (max-width: 638px) { .grow-with-referrals-cta-container .grow-with-referrals-cta-bg-container .grow-with-referrals-cta-bg-inner .grow-with-referrals-cta-bg-svg-1 { height: 340px; top: calc(-1 * var(--space-20)); } } @media screen and (max-width: 576px) { .grow-with-referrals-cta-container .grow-with-referrals-cta-bg-container .grow-with-referrals-cta-bg-inner .grow-with-referrals-cta-bg-svg-1 { height: 300px; top: calc(-1 * var(--space-5)); } .v2-subheadline.grow-with-referrals-cta-subheadline { margin-bottom: 1rem; } .grow-with-referrals-checkpoints { flex-direction: column; gap: 0; margin-bottom: 1rem; } } @media screen and (max-width: 480px) { .grow-with-referrals-cta-container .grow-with-referrals-cta-bg-container .grow-with-referrals-cta-bg-inner .grow-with-referrals-cta-bg-svg-2 { /* filter: blur(30px); */ } } @media screen and (max-width: 469px) { } @media screen and (max-width: 350px) { } /* ---------- END: V2 GROW WITH REFERRALS CTA ---------- */ /* ---------- V2 ENJOY LOW CAC ---------- */ .enjoy-low-cac-container { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 6rem; padding-top: 4rem; } .enjoy-low-cac-container .enjoy-low-cac-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 6rem; } .enjoy-low-cac-container .v2-headline-container { margin-bottom: 3.25rem; max-width: 880px; } .enjoy-low-cac-fancy-border-divider { position: relative; width: 100%; margin: 0 auto; display: flex; justify-content: center; } .enjoy-low-cac-fancy-border-divider svg { width: 100%; } @media screen and (max-width: 703px) { } /* ---------- END: V2 ENJOY LOW CAC ---------- */ /* ---------- REVIEW SITE BADGES ---------- */ .review-site-badges { display: flex; justify-content: center; gap: 2rem; align-items: center; flex-wrap: wrap; margin: 0 auto; /* max-width: 800px; */ padding: 2rem 1rem; } @media screen and (max-width: 768px) { .review-site-badges { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 1rem; padding: 1rem; align-items: center; justify-items: center; text-align: center; max-width: 300px; } .review-site-badges > *:last-child { grid-column: 1 / -1; } } /* ---------- END: REVIEW SITE BADGES ---------- */ /* ---------- V2 GS FOR STARTUPS ---------- */ .v2-gs-for-startups { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 0; padding-top: 8rem; margin-bottom: 0; overflow: hidden; } .v2-gs-for-startups .v2-gs-for-startups-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .v2-gs-for-startups .v2-headline-badge { margin-bottom: 1rem; } .v2-gs-for-startups .v2-gs-for-startups-vendor-image { margin: 0 auto; margin-bottom: var(--space-20); backdrop-filter: blur(3px); border-radius: var(--border-radius-large); border: 1px solid rgba(0, 0, 0, 0.08); background: linear-gradient(0deg, rgba(255, 255, 255, 0.90) 0%, #FFF 100%); box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 7px 3px 0px rgba(0, 0, 0, 0.01), 0px 4px 2px 0px rgba(0, 0, 0, 0.02), 0px 2px 2px 0px rgba(0, 0, 0, 0.03), 0px 0px 1px 0px rgba(0, 0, 0, 0.04); padding: var(--space-10); display: flex; align-items: center; justify-content: center; height: var(--space-90); width: var(--space-90); max-width: none; transition: all 0.2s ease-in-out; overflow: hidden; } .v2-gs-for-startups .v2-gs-for-startups-bg-images { width: 100%; } .v2-gs-for-startups .v2-gs-for-startups-bg-image { position: absolute; top: 6rem; width: 50%; margin: 0 auto; z-index: -1; } .v2-gs-for-startups .v2-gs-for-startups-bg-image-1 { left: -280px; } .v2-gs-for-startups .v2-gs-for-startups-bg-image-2 { right: -280px; } .v2-gs-for-startups .v2-gs-for-startups-bg-image-3 { width: 100%; top: 0; z-index: -2; } .gs-for-startups-qualify-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .gs-for-startups-qualify-list li { position: relative; padding-left: 1.5rem; } ol.gs-for-startups-qualify-list { padding-left: 1.5rem; list-style: decimal; } ol.gs-for-startups-qualify-list li { padding-left: .5rem; } .gs-for-startups-qualify-list li:before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Crect x='0.75' y='0.75' width='12.5' height='12.5' rx='6.25' stroke='%23368EF5' stroke-width='1.5'/%3E%3Cpath d='M4 6.5L4.98223 8.01112C5.31881 8.52894 6.03965 8.62089 6.49544 8.20417L10 5' stroke='%23368EF5' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: contain; } ol.gs-for-startups-qualify-list.gs-for-startups-qualify-list-no-icon { padding-left: 1.5rem; } .gs-for-startups-qualify-list.gs-for-startups-qualify-list-no-icon li { padding-left: 0 } .gs-for-startups-qualify-list.gs-for-startups-qualify-list-no-icon li:before { display: none; } .gs-for-startups-faq { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 3rem; padding-top: 5rem; margin-bottom: 0; overflow: hidden; } .gs-for-startups-faq .gs-for-startups-faq-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .gs-for-startups-faq-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .gs-for-startups-faq-bg .gs-for-startups-faq-bg-svg-1 { border-radius: 38.125rem; background: linear-gradient(180deg, #EBF9FF 0%, #DBF1FB 100%); filter: blur(306.1000061035156px); width: 600px; height: 500px; margin: 0 auto; margin-top: -500px; position: relative; } .gs-for-startups-fancy-border-divider { position: relative; width: 100%; margin: 0 auto; display: flex; justify-content: center; } .gs-for-startups-fancy-border-divider svg { width: 100%; } @media screen and (max-width: 768px) { .v2-gs-for-startups .v2-gs-for-startups-bg-image-1 { left: -180px; } .v2-gs-for-startups .v2-gs-for-startups-bg-image-2 { right: -180px; } .gs-for-startups-faq-bg .gs-for-startups-faq-bg-svg-1 { filter: blur(200px); } } @media screen and (max-width: 480px) { .v2-gs-for-startups .v2-gs-for-startups-bg-image { top: 12rem; } .v2-gs-for-startups .v2-gs-for-startups-bg-image-1 { left: -120px; } .v2-gs-for-startups .v2-gs-for-startups-bg-image-2 { right: -120px; } } /* ---------- END: V2 GS FOR STARTUPS ---------- */ /* ---------- V2 DEALS PAGE ---------- */ .v2-deals-page { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 0; padding-top: 8rem; } .v2-deals-page .v2-deals-page-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .v2-deals-page .v2-headline-container { max-width: 900px; } .v2-deals-page .v2-deals-page-main-image { position: relative; z-index: 2; margin: 0 auto; margin-bottom: -4rem; max-width: 740px; padding: 0 var(--space-20); margin-top: -1rem; } .v2-deals-page .v2-deals-page-table-section { z-index: 2; position: relative; } .v2-deals-page .v2-deals-page-testimonials-section { z-index: 2; position: relative; padding-top: 0; padding-bottom: 0; } .v2-deals-page .v2-deals-page-testimonials-section .testimonials-container{ max-width: 100%; } .v2-deals-page-testimonials-section .review-site-badges { padding-top: 2rem; padding-bottom: 2rem; } .v2-deals-page .v2-deals-page-bg-container { width: 100%; overflow-x: hidden; } .v2-deals-page .v2-deals-page-bg-container .v2-deals-page-bg-inner { width: 100%; height: 100%; overflow: visible; /* Allow overflow for the inner container */ } .v2-deals-page .v2-deals-page-bg-container .v2-deals-page-bg-inner .v2-deals-page-bg-svg-1 { z-index: -1; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; top: 2rem; width: 75.125rem; height: 41.4375rem; flex-shrink: 0; border-radius: 75.125rem; background: #DFF2FB; filter: blur(190.95001220703125px); } @media screen and (max-width: 768px) { .v2-deals-page .v2-deals-page-main-image { margin-bottom: -2rem; } .v2-deals-page .v2-deals-page-bg-container .v2-deals-page-bg-inner .v2-deals-page-bg-svg-1 { max-width: 100%; filter: blur(100px); } } @media screen and (max-width: 480px) { .v2-deals-page .v2-deals-page-main-image { margin-bottom: 0; } .v2-deals-page .v2-deals-page-bg-container .v2-deals-page-bg-inner .v2-deals-page-bg-svg-1 { filter: blur(80px); } } /* ---------- END: V2 DEALS PAGE ---------- */ /* ---------- V2 FREE TOOLS PAGE ---------- */ .v2-free-tools-page { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 0; padding-top: 8rem; margin-bottom: 0; overflow: hidden; } .v2-free-tools-page .v2-free-tools-page-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .v2-free-tools-page-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .v2-free-tools-page-bg .v2-free-tools-page-bg-svg-1 { border-radius: 83rem; /* background: linear-gradient(180deg, #EBF9FF 0%, #DBF1FB 100%); */ background: #DFF2FB; filter: blur(306.1000061035156px); width: 1200px; height: 600px; margin: 0 auto; margin-top: 12rem; position: relative; } .v2-free-tools-page .v2-free-tools-page-main-content { padding-top: 2rem; } .v2-free-tools-page .v2-free-tools-page-main-content .v2-free-tools-page-card .card2 { border-radius: 1.25rem; border: 1px solid rgba(239, 239, 242, 0.50); background: rgba(255, 255, 255, 0.92); box-shadow: 0px 1px 1px 0px rgba(0, 61, 118, 0.04), 0px 3px 3px 0px rgba(0, 61, 118, 0.03), 0px 6px 4px 0px rgba(0, 83, 118, 0.02), 0px 11px 4px 0px rgba(0, 83, 118, 0.01), 0px 32px 24px -12px rgba(0, 76, 118, 0.06), 0px 0px 0px 1px rgba(1, 97, 151, 0.04); backdrop-filter: blur(26.200000762939453px); } .v2-free-tools-page .v2-free-tools-page-main-content .v2-free-tools-page-card .v2-free-tools-page-card-image { backdrop-filter: blur(3px); border-radius: var(--border-radius-large); border: 1px solid rgba(0, 0, 0, 0.08); background: linear-gradient(0deg, rgba(255, 255, 255, 0.90) 0%, #FFF 100%); box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 7px 3px 0px rgba(0, 0, 0, 0.01), 0px 4px 2px 0px rgba(0, 0, 0, 0.02), 0px 2px 2px 0px rgba(0, 0, 0, 0.03), 0px 0px 1px 0px rgba(0, 0, 0, 0.04); padding: var(--space-10); display: flex; align-items: center; justify-content: center; height: 60px; width: 60px; max-width: none; transition: all 0.2s ease-in-out; overflow: hidden; margin-bottom: 1rem; } .v2-free-tools-page .v2-free-tools-page-main-content .v2-free-tools-page-card .v2-free-tools-page-card-image > * { transform: scale(0.3); } .v2-free-tools-page .v2-free-tools-page-main-content .v2-free-tools-page-card .v2-free-tools-page-card-title { color: var(--v2-blue-dark1) !important; font-size: 1.25rem; font-style: normal; font-weight: 600; line-height: 1.5rem; letter-spacing: -0.024rem; margin-bottom: 1rem; } .v2-free-tools-page .v2-free-tools-page-main-content .v2-free-tools-page-card .v2-free-tools-page-card-description { color: var(--v2-gray-dark2); font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: 1.5rem; padding-bottom: 1.5rem; margin-bottom: 0; display: block; } @media screen and (max-width: 768px) { .v2-free-tools-page-bg .v2-free-tools-page-bg-svg-1 { filter: blur(200px); } } /* ---------- END: V2 FREE TOOLS PAGE ---------- */ /* ---------- V2 FREE TOOL PAGE ---------- */ .v2-free-tool-page { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 0; padding-top: 8rem; margin-bottom: 0; overflow: hidden; } .v2-free-tool-page .v2-free-tool-page-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .v2-free-tool-page-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .v2-free-tool-page-bg .v2-free-tool-page-bg-svg-1 { border-radius: 83rem; /* background: linear-gradient(180deg, #EBF9FF 0%, #DBF1FB 100%); */ background: #DFF2FB; filter: blur(306.1000061035156px); width: 1200px; height: 600px; margin: 0 auto; margin-top: 12rem; position: relative; } .v2-free-tool-page .v2-free-tool-page-card-image { backdrop-filter: blur(3px); border-radius: var(--border-radius-large); border: 1px solid rgba(0, 0, 0, 0.08); background: linear-gradient(0deg, rgba(255, 255, 255, 0.90) 0%, #FFF 100%); box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 7px 3px 0px rgba(0, 0, 0, 0.01), 0px 4px 2px 0px rgba(0, 0, 0, 0.02), 0px 2px 2px 0px rgba(0, 0, 0, 0.03), 0px 0px 1px 0px rgba(0, 0, 0, 0.04); padding: var(--space-20); display: flex; align-items: center; justify-content: center; height: var(--space-90); width: var(--space-90); max-width: none; transition: all 0.2s ease-in-out; overflow: hidden; margin: 0 auto; margin-bottom: 1rem; font-size: 40px; } .v2-free-tool-page .v2-free-tool-page-main-content { margin: 0 auto; padding-top: 3rem; } .v2-free-tool-page .v2-free-tool-page-main-content .v2-free-tool-page-main-content-inner { position: relative; max-width: 600px; margin: 0 auto; margin-bottom: 5rem; } .v2-free-tool-page .v2-free-tool-page-main-content .v2-free-tool-page-main-content-inner.max-width-800 { max-width: 800px; } .v2-free-tool-page .v2-free-tool-page-main-content .v2-free-tool-page-main-content-inner.max-width-1000 { max-width: 1000px; } .v2-free-tool-page .v2-free-tool-page-main-content .v2-free-tool-page-main-content-inner.max-width-max { max-width: var(--v2-header-width); } .v2-free-tool-page .v2-free-tool-page-main-content .v2-free-tool-page-main-content-inner.v2-free-tool-page-main-content-inner-short .free-tool-main-card .free-tool-main-card-inner { min-height: 8rem; } .free-tool-main-card { margin: 0 auto; } .free-tool-main-card .roi-calculator-roi-section { border-radius: 0 1.25rem 1.25rem 0; background: linear-gradient(180deg, var(--grayscale3) 0%, rgba(255, 255, 255, 0.00) 100%); box-shadow: none; } .free-tool-main-card-inner { min-height: 35rem; z-index: 2; position: relative; border-radius: 1.25rem; border: 1px solid #016197; box-shadow: 0px -11px 27.4px -10px rgba(0, 61, 118, 0.04), 0px -2px 24px -12px rgba(0, 76, 118, 0.06); backdrop-filter: blur(26.200000762939453px); border-bottom: 1px solid transparent; clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 1.25rem), calc(100% - 1.25rem) 100%, 1.25rem 100%, 0 calc(100% - 1.25rem) ); } .free-tool-main-card-bg { opacity: 0.5; background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.00) 100%); position: absolute; border-radius: 1.25rem; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; z-index: 1; } .free-tool-bulk-content { z-index: 4; position: relative; border-radius: 1.25rem; } .free-tool-bulk-content .free-tool-bulk-content-inner { /* padding: var(--space-20); */ } .free-tool-bulk-content-bg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border-radius: 1.25rem; background: var(--white); } .free-tool-main-card-fancy-corner { height: 113px; width: 173px; position: absolute; z-index: -1; top: -43px; } .free-tool-main-card-fancy-corner-left { left: -75px; background-image: url('https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/a2d08c6d-5cdc-4a2c-ba6e-bb93cd87e802.svg'); } .free-tool-main-card-fancy-corner-right { right: -75px; background-image: url('https://website-images.growsurf.com/site-images/b90d3589-b2f5-4e75-bf91-c0fba9e89952/6b16d680-74d6-43da-b54d-d78dcbdbbbc3.svg'); } .free-tool-main-card-left, .free-tool-main-card-right { position: absolute; top: 5rem; width: 100%; } .free-tool-main-card-inner:before { content: ''; position: absolute; top: -1px; /* Width of the main card's border */ width: 100%; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--white) 100%); z-index: 3; border-radius: 1.25rem; /* border-radius of the main card */ } .free-tool-main-card-left .free-tool-main-card-inner:before, .free-tool-main-card-right .free-tool-main-card-inner:before { background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, var(--white) 30%); } .free-tool-main-card-inner:before { left: -1px; /* Width of the main card's border */ right: -1px; /* Width of the main card's border */ width: calc(100% + 2px); } .free-tool-main-card-left { transform: rotate(-7.64deg); left: -3.5rem; } .free-tool-main-card-left .free-tool-main-card-inner:before { left: -1px; /* Width of the main card's border */ } .free-tool-main-card-right { transform: rotate(7.64deg); right: -3.5rem; } .free-tool-main-card-right .free-tool-main-card-inner:before { right: -1px; /* Width of the main card's border */ } .free-tool-main-card:after { z-index: 3; content: ''; top: 0; position: absolute; width: calc(50%); left: -1.25rem; right: -1.25rem; margin: 0 auto; height: 1px; border-radius: 1.25rem; /* border-radius of the main card */ background: rgba(255,255,255,0.3); } .free-tool-main-card:before { z-index: 4; content: ''; top: 0; position: absolute; width: calc(100% - 1.25rem * 2); left: -1.25rem; right: -1.25rem; margin: 0 auto; height: 1px; border-radius: 1.25rem; /* border-radius of the main card */ background: radial-gradient(circle at center, var(--white) 0%, rgba(255, 255, 255, 0) 100%); } .free-tool-reward-idea-card > .card2 { border-radius: 1.25rem; padding: 2rem !important; box-shadow: 0px 10px 3px 0px rgba(0, 0, 0, 0.00), 0px 7px 3px 0px rgba(0, 0, 0, 0.01), 0px 4px 2px 0px rgba(0, 0, 0, 0.02), 0px 2px 2px 0px rgba(0, 0, 0, 0.03), 0px 0px 1px 0px rgba(0, 0, 0, 0.04); } .free-tool-info-cards-col { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .free-tool-info-cards-row { width: 50%; } .free-tool-info-card { padding: 2rem; border-radius: var(--border-radius-large); box-shadow: 0px 1px 2px 0px rgba(46, 63, 95, 0.08), 0px 4px 6px 0px rgba(46, 63, 95, 0.04), 0px 24px 40px -16px rgba(37, 60, 104, 0.08); background: var(--white); } .free-tool-info-card-list { list-style: none; margin-left: 0; padding-left: 0; margin-bottom: 0; } .free-tool-info-card-list.free-tool-info-card-list-ordered { list-style: decimal; margin-left: 1.5rem; padding-left: 0; margin-bottom: 0; } .free-tool-info-card-list.free-tool-info-card-list-checkmarks li:before { content: url('data:image/svg+xml;utf8,'); width: 1rem; height: 1rem; display: inline; margin-right: 0.5rem; vertical-align: middle; } .free-tool-info-card-list.free-tool-info-card-list-stars li:before { content: url('data:image/svg+xml;utf8,'); width: 1rem; height: 1rem; display: inline; margin-right: 0.5rem; vertical-align: middle; } @media screen and (max-width: 768px) { .v2-free-tool-page-bg .v2-free-tool-page-bg-svg-1 { filter: blur(200px); } } @media screen and (max-width: 703px) { .free-tool-info-cards-col { flex-direction: column; } .free-tool-info-cards-row { width: 100%; } } /* ---------- END: V2 FREE TOOL PAGE ---------- */ /* ---------- V2 HOW IT WORKS PAGE ---------- */ .v2-how-it-works-page { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 0; padding-top: 8rem; } .v2-how-it-works-page .v2-how-it-works-page-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; } .v2-how-it-works-page .v2-how-it-works-page-content { position: relative; z-index: -1; margin-top: -8rem; } .v2-how-it-works-page .v2-how-it-works-meat-section { margin-top: 5rem; position: relative; z-index: -1; } @media screen and (max-width: 768px) { .v2-how-it-works-page .v2-how-it-works-meat-section { margin-top: 0; } .v2-how-it-works-page .v2-how-it-works-page-content { margin-top: -2rem; } } /* ---------- END: V2 HOW IT WORKS PAGE ---------- */ /* ---------- V2 HOW IT WORKS MEAT ---------- */ .how-it-works-meat-container { background: unset; width: 100%; z-index: 2; position: relative; padding-bottom: 0; padding-top: 4rem; margin-bottom: 0; } .how-it-works-meat-container .how-it-works-meat-inner { padding: var(--space-20); margin: 0 auto; max-width: var(--max-width-1200); z-index: 3; position: relative; padding-bottom: 3rem; margin-bottom: -4rem; } .how-it-works-meat-fancy-border-divider { position: relative; width: 100%; margin: 0 auto; display: flex; justify-content: center; } .how-it-works-meat-fancy-border-divider svg { width: 100%; } .how-it-works-meat-container .home-hero-grid-visual-section { top: -5rem; } .how-it-works-meat-container .home-hero-grid-visual-section .tab-pane { background: var(--white); } .how-it-works-meat-container .home-hero-grid-visual-section .tab-pane .card5 { border-radius: var(--border-radius-regular); background: rgba(255, 255, 255, 0.80); box-shadow: 0px 1px 1px 0px rgba(0, 61, 118, 0.04), 0px 3px 3px 0px rgba(0, 61, 118, 0.03), 0px 6px 4px 0px rgba(0, 83, 118, 0.02), 0px 11px 4px 0px rgba(0, 83, 118, 0.01), 0px 32px 24px -12px rgba(0, 76, 118, 0.06), 0px 0px 0px 1px rgba(1, 97, 151, 0.04); backdrop-filter: blur(26.200000762939453px); } .how-it-works-meat-container .how-it-works-meat-bg-container { width: 100%; overflow-x: hidden; } .how-it-works-meat-container .how-it-works-meat-bg-container .how-it-works-meat-bg-inner { width: 100%; height: 100%; overflow: visible; /* Allow overflow for the inner container */ } .how-it-works-meat-container .how-it-works-meat-bg-container .how-it-works-meat-bg-inner .how-it-works-meat-bg-svg-1 { z-index: -1; position: absolute; left: 50%; transform: translateX(-50%); width: 100%; max-width: 38.125rem; flex-shrink: 0; border-radius: 49.375rem; background: linear-gradient(180deg, #EBF9FF 0%, #DBF1FB 100%); filter: blur(150px); height: 300px; right: 0; top: unset; max-width: 960px; margin-top: 7rem; } @media screen and (max-width: 768px) { .how-it-works-meat-container .how-it-works-meat-bg-container .how-it-works-meat-bg-inner .how-it-works-meat-bg-svg-1 { max-width: 100%; filter: blur(50px); } } @media screen and (max-width: 480px) { .how-it-works-meat-container .how-it-works-meat-bg-container .how-it-works-meat-bg-inner .how-it-works-meat-bg-svg-1 { filter: blur(30px); } } @media screen and (max-width: 600px) { .how-it-works-meat-container .how-it-works-meat-main-image img { margin-bottom: 1rem; } } /* ---------- END: V2 HOW IT WORKS MEAT ---------- */ /* ---------- V2 DEVELOPER TOOLKIT ---------- */ .developer-toolkit { padding: 1rem; margin: 0 auto; } /* ---------- END: V2 DEVELOPER TOOLKIT ---------- */ /* ---------- V2 BLOG ---------- */ .v2-category-items { display: flex; gap: 0.5rem; align-items: center; justify-content: center; margin: 0 auto; flex-wrap: wrap; } .v2-category-items.justify-content-flex-start { justify-content: flex-start; } .v2-category-item { font-weight: var(--font-weight-regular); font-size: var(--font-size-small); white-space: nowrap; border-radius: 3.5rem; border: 1px solid #D6E3EB; background: #F7FCFF; box-shadow: 0px 2px 2px -1px rgba(7, 1, 19, 0.04), 0px 1px 1px -0.5px rgba(7, 1, 19, 0.04), 0px 0.5px 0.5px 0px rgba(7, 1, 19, 0.04), 0px 2px 8px 0px rgba(255, 255, 255, 0.05) inset, 0px 1px 3px 0px rgba(255, 255, 255, 0.12) inset, 0px 0.5px 0.5px 0px rgba(255, 255, 255, 0.16) inset; backdrop-filter: blur(3px); width: fit-content; padding: 2px 10px; color: #2E2E34; } .v2-category-item:hover, .v2-category-item:focus, .v2-category-item:active { color: #23355E; } .v2-blog-post-card { height: 100%; width: 100%; padding: 0.5rem; border-radius: 1.25rem; background: rgba(255, 255, 255, 0.80); box-shadow: 0px 1px 1px 0px rgba(0, 61, 118, 0.04), 0px 3px 3px 0px rgba(0, 61, 118, 0.03), 0px 6px 4px 0px rgba(0, 83, 118, 0.02), 0px 11px 4px 0px rgba(0, 83, 118, 0.01), 0px 32px 24px -12px rgba(0, 76, 118, 0.06), 0px 0px 0px 1px rgba(1, 97, 151, 0.04); backdrop-filter: blur(26.200000762939453px); } .v2-blog-post-card-image-thumbnail { border-radius: 0.75rem; background: #EEF8FB; background-size: cover; backdrop-filter: blur(50.95000076293945px); background-position: center; } .v2-blog-post-card-headline { color: #192B55; font-size: 1rem; font-style: normal; font-weight: 600; line-height: 1.5rem; /* 150% */ letter-spacing: -0.01919rem; } .v2-blog-post-text-content { padding: 1rem; padding-bottom: 0.5rem; } .v2-blog-post-card-text { color: #696873; font-size: 0.875rem; font-style: normal; font-weight: 400; margin-bottom: 0.5rem; line-height: 1.5rem; /* 171.429% */ } .v2-blog-post-card-author-and-date { opacity: 0.95; color: #23355E; font-size: 0.875rem; font-style: normal; font-weight: 500; line-height: 1.375rem; text-transform: capitalize; overflow: hidden; } .v2-blog-post-card-author-and-date a { color: rgba(22, 180, 254, 0.98); } .v2-blog-post-card-author-and-date-top-divider { position: relative; height: 8px; margin-bottom: 0.5rem; width: 100%; } .v2-blog-post-card-author-and-date-top-divider svg { } .v2-post-date { color: #71707A; text-align: center; font-size: 0.875rem; font-style: normal; font-weight: 400; line-height: 1.375rem; /* 157.143% */ text-transform: capitalize; } /* ---------- END: V2 BLOG ---------- */ .flex-wrap-wrap { flex-wrap: wrap;} .compare-vs { background: var(--gray-light); color: var(--black); border-radius: 12px; background: #E1E1E1; color: #000; display: flex; justify-content: center; align-items: center; height: 35px; font-size: 1.5rem; width: 45px; min-height: 35px; min-width: 45px; font-weight: bold; letter-spacing: 0; margin: 15px; line-height: 1; margin-top: 25px; padding-bottom: 5px; } .alternatives-compare-list ul li p { margin-bottom: 0; } .landing-page-changing-text { margin-top: 0; position: relative; text-align: left; transition: transform 350ms ease, opacity 350ms ease; will-change: transform, opacity; } .landing-page-changing-text.regular { font-weight: normal !important; } /* SEO + accessibility fallback */ .landing-page-changing-text::after { content: attr(data-seo); position: absolute; left: -9999px; visibility: hidden; } .flip-horizontal { /* Flips the element horizontally */ transform: scaleX(-1); /* Vendor prefixes for older browsers */ -webkit-transform: scaleX(-1); -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -ms-transform: scaleX(-1); } .v2-integration-page-affiliate-hero-container { display: flex; /* align-items: center; */ justify-content: space-between; gap: 45px; } .v2-integration-page-affiliate-hero-content { flex: 1; } .v2-integration-page-affiliate-chart-hero-visual { flex: 1; max-width: 400px; } @media (max-width: 1200px) { .v2-integration-page-affiliate-hero-container { flex-direction: column; padding-bottom: 1rem !important; } .v2-integration-page-affiliate-chart-hero-visual { margin: 0 auto; } }