/* Settings */ :root { /* global text variables */ --hyphens: manual; /* transitions */ --transition: all ease-in-out 0.3s; /* box shadows */ --box-shadow-small: 0px 5px 20px 0px rgba(69, 45, 121, 0.10); --box-shadow-big: 0px 9px 20px 0px rgba(69, 45, 121, 0.10), 0px 24px 50px 0px rgba(149, 70, 219, 0.20); } :root { /* Base colors */ --base-color--1: #FF0998; --base-color--2: #09FFB9; --base-color--3: #370178; --base-color--4: #210346; --base-color--5: #6B2BAA; --base-color--6: #9546DB; --base-color--7: #FCEFFF; /* base color naming base on figma */ --pink: #FF0998; --green: #09FFB9; --mojo-purple: #370178; --dark-purple: #210346; --royal-purple: #6B2BAA; --bright-purple: #9546DB; --pink-light: #FCEFFF; /* base color naming base on figma RGBA version */ --pink-rgba: rgba(255, 9, 152, 1); --green-rgba: rgba(9, 255, 185, 1); --mojo-purple-rgba: rgba(55, 1, 120, 1); --dark-purple-rgba: rgba(33, 3, 70, 1); --royal-purple-rgba: rgba(107, 43, 170, 1); --bright-purple-rgba: rgba(149, 70, 219, 1); --pink-light-rgba: rgba(252, 239, 255, 1); /* general colors */ --white: #ffffff; --black: #000; } :root{ /* This is setting variables for evertyhing that is in font.css which contains font-weight, text decoration and font-family */ --paragraph-small-font-family: Montserrat, sans-serif; --paragraph-font-family: Montserrat, sans-serif; --blockquote-font-family: Montserrat, sans-serif; --blockquote-font-weight: 600; --paragraph-large-font-family: Montserrat, sans-serif; --link-font-family: Montserrat, sans-serif; --h1-font-family: Montserrat, sans-serif; --h1-font-weight: 600; --h2-font-family: Montserrat, sans-serif; --h2-font-weight: 600; --h3-font-family: Montserrat, sans-serif; --h3-font-weight: 600; --h4-font-family: Montserrat, sans-serif; --h4-font-weight: 600; --h5-font-family: Montserrat, sans-serif; --h5-font-weight: 600; --subheading-font-family: Montserrat, sans-serif; --subheading-font-weight: 600; --h6-font-family: Montserrat, sans-serif; --h6-font-weight: 600; /* === H1 === */ --h1-font-size-desktop: 4.6875rem; --h1-font-size-mobile: 3.0rem; --h1-transform: none; --h1-line-height: 1.1; --h1-letter-spacing-desktop: -2; --h1-letter-spacing-mobile: -1; /* === H2 === */ --h2-font-size-desktop: 3.4375rem; --h2-font-size-mobile: 2.0rem; --h2-transform: none; --h2-line-height: 1.2; --h2-letter-spacing-desktop: 0; --h2-letter-spacing-mobile: 0; /* === H3 === */ --h3-font-size-desktop: 2.375rem; --h3-font-size-mobile: 1.75rem; --h3-transform: none; --h3-line-height: 1.2; --h3-letter-spacing-desktop: 0; --h3-letter-spacing-mobile: 0; /* === H4 === */ --h4-font-size-desktop: 1.75rem; --h4-font-size-mobile: 1.5625rem; --h4-transform: none; --h4-line-height: 1.2; --h4-letter-spacing-desktop: 0; --h4-letter-spacing-mobile: 0; /* === H5 === */ --h5-font-size-desktop: 1.25rem; --h5-font-size-mobile: 1.125rem; --h5-transform: none; --h5-line-height: 1.4; --h5-letter-spacing-desktop: 0; --h5-letter-spacing-mobile: 0; /* === H6 === */ --h6-font-size-desktop: 1.0rem; --h6-font-size-mobile: 1.0rem; --h6-transform: none; --h6-line-height: 1.5; --h6-letter-spacing-desktop: 0; --h6-letter-spacing-mobile: 0; /* === Subheading === */ --subheading-font-size-desktop: 0.875rem; --subheading-font-size-mobile: 0.875rem; --subheading-transform: uppercase; --subheading-line-height: 1; --subheading-letter-spacing-desktop: 0; --subheading-letter-spacing-mobile: 2; /* === Paragraph === */ --paragraph-font-size-desktop: 16px; --paragraph-font-size-mobile: 15; --paragraph-transform: ; --paragraph-line-height: 1.5; --paragraph-letter-spacing-desktop: 0; --paragraph-letter-spacing-mobile: 0; /* === Paragraph (Large) === */ --paragraph-large-font-size-desktop: 1.25rem; --paragraph-large-font-size-mobile: 1.125rem; --paragraph-large-line-height: 1.4; --paragraph-large-letter-spacing-desktop: 0; --paragraph-large-letter-spacing-mobile: 0; /* === Paragraph (Small) === */ --paragraph-small-font-size-desktop: 0.8125rem; --paragraph-small-font-size-mobile: 0.8125rem; --paragraph-small-line-height: 1.5; --paragraph-small-letter-spacing-desktop: 0; --paragraph-small-letter-spacing-mobile: 0; /* === Links === */ --link-font-size-desktop: 1.0rem; --link-font-size-mobile: 0.9375rem; --link-transform: ; --link-line-height: 1.5; --link-letter-spacing-desktop: ; --link-letter-spacing-mobile: 0; /* === Blockquote === */ --blockquote-font-size-desktop: 2.375rem; --blockquote-font-size-mobile: 1.5625rem; --blockquote-transform: ; --blockquote-line-height: 1.3; --blockquote-letter-spacing-desktop: 0; --blockquote-letter-spacing-mobile: 0; } :root { /* Label text */ --form-label-color: #000000; --form-label-font-family: {font=Montserrat, font_set=GOOGLE, styles={font-family=Montserrat, sans-serif, font-style=normal, font-weight=normal, text-decoration=none}, size=null, size_unit=null, color=null, variant=regular, fallback=sans-serif, style=font-family: Montserrat, sans-serif; font-style: normal; font-weight: normal; text-decoration: none, css=font-family: Montserrat, sans-serif;}; --form-label-font-size-desktop: 0.8125rem; --form-label-font-size-mobile: 0.8125rem; --form-label-font-weight: regular; --form-label-transform: none; --form-label-spacing-bottom: 0.625rem; /* Input text */ --form-input-color: #370178; --form-input-font-family: {font=Montserrat, font_set=GOOGLE, styles={font-family=Montserrat, sans-serif, font-style=normal, font-weight=normal, text-decoration=none}, size=null, size_unit=null, color=null, variant=regular, fallback=sans-serif, style=font-family: Montserrat, sans-serif; font-style: normal; font-weight: normal; text-decoration: none, css=font-family: Montserrat, sans-serif;}; --form-input-font-size-desktop: 1.0rem; --form-input-font-size-mobile: 0.9375rem; --form-input-font-weight: regular; --form-input-transform: none; /* Placeholder text */ --form-placeholder-color: #370178; /* Error text */ --form-error-color: #000000; /* Input fields */ --form-input-background-color: rgba(255, 255, 255, 0%); --form-input-border-color: #370178; --form-input-border-focus-color: #000000; --form-input-border-size: 0.125rem; --form-input-border-radius: 3.4375rem; --form-input-padding-top: 0.875rem; --form-input-padding-bottom: 0.875rem; --form-input-padding-right: 1.5625rem; --form-input-padding-left: 1.25rem; /* Misc text */ --form-misc-size-desktop: 1.0rem; --form-misc-size-mobile: 0.9375rem; /* Form fields */ --form-field-spacing-top: 10px; --form-field-spacing-bottom: 40px; --form-field-gap: 32px; --placeholder-opacity: 1; --text-area-min-height: 120px; /* Multilists checkboxes and radio buttons */ --multi-list-gap: 7px; --multi-list-spacing-top: 10px; /* Checkboxes and Radio buttons general spacing to label */ --label-check-spacing: 16px; /* Date */ --form-date-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.8076 0C7.03038 0 7.24404 0.0884998 7.40157 0.24603C7.5591 0.403561 7.6476 0.617218 7.6476 0.84V2.4108H16.668V0.8508C16.668 0.628018 16.7565 0.414361 16.914 0.25683C17.0716 0.0992998 17.2852 0.0108 17.508 0.0108C17.7308 0.0108 17.9444 0.0992998 18.102 0.25683C18.2595 0.414361 18.348 0.628018 18.348 0.8508V2.4108H21.6C22.2363 2.4108 22.8466 2.66349 23.2966 3.11332C23.7467 3.56315 23.9997 4.17329 24 4.8096V21.6012C23.9997 22.2375 23.7467 22.8477 23.2966 23.2975C22.8466 23.7473 22.2363 24 21.6 24H2.4C1.76369 24 1.15342 23.7473 0.703368 23.2975C0.253315 22.8477 0.000318156 22.2375 0 21.6012L0 4.8096C0.000318156 4.17329 0.253315 3.56315 0.703368 3.11332C1.15342 2.66349 1.76369 2.4108 2.4 2.4108H5.9676V0.8388C5.96792 0.616226 6.05656 0.402877 6.21405 0.245606C6.37155 0.0883348 6.58503 -2.27116e-07 6.8076 0ZM1.68 9.2904V21.6012C1.68 21.6958 1.69862 21.7894 1.73481 21.8767C1.77099 21.9641 1.82403 22.0435 1.89088 22.1103C1.95774 22.1772 2.03711 22.2302 2.12447 22.2664C2.21182 22.3026 2.30545 22.3212 2.4 22.3212H21.6C21.6946 22.3212 21.7882 22.3026 21.8755 22.2664C21.9629 22.2302 22.0423 22.1772 22.1091 22.1103C22.176 22.0435 22.229 21.9641 22.2652 21.8767C22.3014 21.7894 22.32 21.6958 22.32 21.6012V9.3072L1.68 9.2904ZM8.0004 17.5428V19.542H6V17.5428H8.0004ZM12.9996 17.5428V19.542H11.0004V17.5428H12.9996ZM18 17.5428V19.542H15.9996V17.5428H18ZM8.0004 12.7704V14.7696H6V12.7704H8.0004ZM12.9996 12.7704V14.7696H11.0004V12.7704H12.9996ZM18 12.7704V14.7696H15.9996V12.7704H18ZM5.9676 4.0896H2.4C2.30545 4.0896 2.21182 4.10822 2.12447 4.14441C2.03711 4.18059 1.95774 4.23362 1.89088 4.30048C1.82403 4.36734 1.77099 4.44671 1.73481 4.53407C1.69862 4.62142 1.68 4.71505 1.68 4.8096V7.6116L22.32 7.6284V4.8096C22.32 4.71505 22.3014 4.62142 22.2652 4.53407C22.229 4.44671 22.176 4.36734 22.1091 4.30048C22.0423 4.23362 21.9629 4.18059 21.8755 4.14441C21.7882 4.10822 21.6946 4.0896 21.6 4.0896H18.348V5.2044C18.348 5.42718 18.2595 5.64084 18.102 5.79837C17.9444 5.9559 17.7308 6.0444 17.508 6.0444C17.2852 6.0444 17.0716 5.9559 16.914 5.79837C16.7565 5.64084 16.668 5.42718 16.668 5.2044V4.0896H7.6476V5.1936C7.6476 5.41638 7.5591 5.63004 7.40157 5.78757C7.24404 5.9451 7.03038 6.0336 6.8076 6.0336C6.58482 6.0336 6.37116 5.9451 6.21363 5.78757C6.0561 5.63004 5.9676 5.41638 5.9676 5.1936V4.0896Z' fill='black'/%3E%3C/svg%3E"); /* Dropdown */ --form-dropdown-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10' fill='none'%3E%3Cpath d='M1 1.5L8 8.5L15 1.5' stroke='%23FF0998' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); /* Checkbox buttons */ --form-checkbox-bg-color: transparent; --form-checkbox-width: 20px; --form-checkbox-height: 20px; /* for the icon visit https://yoksel.github.io/url-encoder/ and paste your svg in and copy the ready for css part */ --form-checkbox-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='18' height='18' rx='2' stroke='%23370178' stroke-width='2'/%3E%3C/svg%3E%0A"); --form-checkbox-checked-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='18' height='18' rx='2' stroke='%23370178' stroke-width='2'/%3E%3Crect x='4' y='4' width='12' height='12' rx='2' fill='%23FF0998'/%3E%3C/svg%3E "); --form-checkbox-icon--white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='1' y='1' width='18' height='18' rx='2' stroke='white' stroke-width='2'/%3E%3C/svg%3E"); --form-checkbox-checked-icon--white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Crect x='1' y='1' width='18' height='18' rx='2' stroke='%23ffffff' stroke-width='2'/%3E%3Crect x='4' y='4' width='12' height='12' rx='2' fill='%23ffffff'/%3E%3C/svg%3E"); /* Radio buttons */ --form-radio-bg-color: transparent; --form-radio-width: 20px; --form-radio-height: 20px; /* for the icon visit https://yoksel.github.io/url-encoder/ and paste your svg in and copy the ready for css part */ --form-radio-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='18' height='18' rx='9' stroke='%23370178' stroke-width='2'/%3E%3C/svg%3E "); --form-radio-checked-icon: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='18' height='18' rx='9' stroke='%23370178' stroke-width='2'/%3E%3Crect x='4' y='4' width='12' height='12' rx='6' fill='%23FF0998'/%3E%3C/svg%3E "); } :root { --button-line-height: 1; --button-font-style: normal; --button-letter-spacing: normal; /* Global button settings */ --button-font-family: Montserrat; --button-font-size-desktop: 1.125rem; --button-font-size-mobile: 1.125rem; --button-font-weight: 600; --button-transform: none; --button-padding-top: 1.1875rem; --button-padding-bottom: 1.1875rem; --button-padding-right: 3.75rem; --button-padding-left: 3.75rem; --button-padding-top-mobile: 1.1875rem; --button-padding-bottom-mobile: 1.1875rem; --button-padding-right-mobile: 3.75rem; --button-padding-left-mobile: 3.75rem; --button-border-size: 0.125rem; --button-border-radius: 1.875rem; --button-border-style: solid; --button-border-color: #09FFB9; --button-border-color-hover: #ffffff; --button-background-color: #09FFB9; --button-background-color-hover: #ffffff; --button-text-color: #000000; --button-text-color-hover: #000000; /* Button 1 */ --button-one-font-family: Montserrat; --button-one-font-size-desktop: 1.125rem; --button-one-font-size-mobile: 1.125rem; --button-one-font-weight: 600; --button-one-transform: none; --button-one-padding-top: 1.1875rem; --button-one-padding-bottom: 1.1875rem; --button-one-padding-right: 3.75rem; --button-one-padding-left: 3.75rem; --button-one-padding-top-mobile: 1.1875rem; --button-one-padding-bottom-mobile: 1.1875rem; --button-one-padding-right-mobile: 3.75rem; --button-one-padding-left-mobile: 3.75rem; --button-one-border-size: 0.125rem; --button-one-border-radius: 1.875rem; --button-one-border-style: solid; --button-one-border-color: #09FFB9; --button-one-border-color-hover: #ffffff; --button-one-background-color: #09FFB9; --button-one-background-color-hover: #ffffff; --button-one-text-color: #000; --button-one-text-color-hover: #000; /* Button 2 */ --button-two-font-family: Montserrat; --button-two-font-size-desktop: 1.125rem; --button-two-font-size-mobile: 1.125rem; --button-two-font-weight: 600; --button-two-transform: none; --button-two-padding-top: 1.1875rem; --button-two-padding-bottom: 1.1875rem; --button-two-padding-right: 3.75rem; --button-two-padding-left: 3.75rem; --button-two-padding-top-mobile: 1.1875rem; --button-two-padding-bottom-mobile: 1.1875rem; --button-two-padding-right-mobile: 3.75rem; --button-two-padding-left-mobile: 3.75rem; --button-two-border-size: 0.125rem; --button-two-border-radius: 1.875rem; --button-two-border-style: solid; --button-two-border-color: #FF0998; --button-two-border-color-hover: #ffffff; --button-two-background-color: #FF0998; --button-two-background-color-hover: #ffffff; --button-two-text-color: #ffffff; --button-two-text-color-hover: #000000; /* Button 3 */ --button-three-font-family: Montserrat; --button-three-font-size-desktop: 1.125rem; --button-three-font-size-mobile: 1.125rem; --button-three-font-weight: 600; --button-three-transform: none; --button-three-padding-top: 1.1875rem; --button-three-padding-bottom: 1.1875rem; --button-three-padding-right: 3.75rem; --button-three-padding-left: 3.75rem; --button-three-padding-top-mobile: 1.1875rem; --button-three-padding-bottom-mobile: 1.1875rem; --button-three-padding-right-mobile: 3.75rem; --button-three-padding-left-mobile: 3.75rem; --button-three-border-size: 0.125rem; --button-three-border-radius: 1.875rem; --button-three-border-style: solid; --button-three-border-color: #370178; --button-three-border-color-hover: #370178; --button-three-background-color: rgba(55, 1, 120, 0%); --button-three-background-color-hover: #370178; --button-three-text-color: #370178; --button-three-text-color-hover: #ffffff; /* Button 4 */ --button-four-font-family: Montserrat; --button-four-font-size-desktop: 1.125rem; --button-four-font-size-mobile: 1.125rem; --button-four-font-weight: 600; --button-four-transform: none; --button-four-padding-top: 1.1875rem; --button-four-padding-bottom: 1.1875rem; --button-four-padding-right: 3.75rem; --button-four-padding-left: 3.75rem; --button-four-padding-top-mobile: 1.1875rem; --button-four-padding-bottom-mobile: 1.1875rem; --button-four-padding-right-mobile: 3.75rem; --button-four-padding-left-mobile: 3.75rem; --button-four-border-size: 0.125rem; --button-four-border-radius: 1.875rem; --button-four-border-style: solid; --button-four-border-color: #ffffff; --button-four-border-color-hover: #ffffff; --button-four-background-color: rgba(0, 0, 0, 0%); --button-four-background-color-hover: #ffffff; --button-four-text-color: #ffffff; --button-four-text-color-hover: #000000; /* Button 5 */ --button-five-font-family: Montserrat; --button-five-font-size-desktop: 1.125rem; --button-five-font-size-mobile: 1.125rem; --button-five-font-weight: 600; --button-five-transform: none; --button-five-padding-top: 1.1875rem; --button-five-padding-bottom: 1.1875rem; --button-five-padding-right: 3.75rem; --button-five-padding-left: 3.75rem; --button-five-padding-top-mobile: 1.1875rem; --button-five-padding-bottom-mobile: 1.1875rem; --button-five-padding-right-mobile: 3.75rem; --button-five-padding-left-mobile: 3.75rem; --button-five-border-size: 0.125rem; --button-five-border-radius: 1.875rem; --button-five-border-style: solid; --button-five-border-color: #ffffff; --button-five-border-color-hover: #FF0998; --button-five-background-color: #ffffff; --button-five-background-color-hover: #FF0998; --button-five-text-color: #370178; --button-five-text-color-hover: #ffffff; } :root { --tags-font-size-desktop: 0.8125rem; --tags-font-size-mobile: 0.8125rem; --tags-font-weight: 600; --tags-transform: none; --tag-background: rgba(0, 0, 0, 0%); --tag-border-color: #370178; --tag-text-color: #370178; --tag-hover-background: #370178; --tag-hover-border-color: #370178; --tag-hover-text-color: #ffffff; --tag-border-width: 0.125rem; --tag-border-radius: 3.125rem; --form-tag-padding-top: 0.625rem; --form-tag-padding-bottom: 0.625rem; --form-tag-padding-right: 1.875rem; --form-tag-padding-left: 1.875rem; } :root { --base-padding: 1rem; --max-width: 1440px; --grid-gap: 50px; --flex-gap: 35px; } /* Generic */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ scroll-behavior: smooth; } /* Respect prefers-reduced-motion setting */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; overflow-x: hidden; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type='search']::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } *, *:before, *:after { box-sizing: border-box; } /* Objects */ /* Responsive grid */ .row-fluid { width: 100%; *zoom: 1; } .row-fluid:before, .row-fluid:after { display: table; content: ""; } .row-fluid:after { clear: both; } .row-fluid [class*="span"] { display: block; float: left; width: 100%; min-height: 1px; margin-left: 2.127659574%; *margin-left: 2.0744680846382977%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .span12 { width: 99.99999998999999%; *width: 99.94680850063828%; } .row-fluid .span11 { width: 91.489361693%; *width: 91.4361702036383%; } .row-fluid .span10 { width: 82.97872339599999%; *width: 82.92553190663828%; } .row-fluid .span9 { width: 74.468085099%; *width: 74.4148936096383%; } .row-fluid .span8 { width: 65.95744680199999%; *width: 65.90425531263828%; } .row-fluid .span7 { width: 57.446808505%; *width: 57.3936170156383%; } .row-fluid .span6 { width: 48.93617020799999%; *width: 48.88297871863829%; } .row-fluid .span5 { width: 40.425531911%; *width: 40.3723404216383%; } .row-fluid .span4 { width: 31.914893614%; *width: 31.8617021246383%; } .row-fluid .span3 { width: 23.404255317%; *width: 23.3510638276383%; } .row-fluid .span2 { width: 14.89361702%; *width: 14.8404255306383%; } .row-fluid .span1 { width: 6.382978723%; *width: 6.329787233638298%; } .container-fluid { *zoom: 1; } .container-fluid:before, .container-fluid:after { display: table; content: ""; } .container-fluid:after { clear: both; } @media (max-width: 767px) { .row-fluid { width: 100%; } .row-fluid [class*="span"] { display: block; float: none; width: auto; margin-left: 0; } } @media (min-width: 768px) and (max-width: 1139px) { .row-fluid { width: 100%; *zoom: 1; } .row-fluid:before, .row-fluid:after { display: table; content: ""; } .row-fluid:after { clear: both; } .row-fluid [class*="span"] { display: block; float: left; width: 100%; min-height: 1px; margin-left: 2.762430939%; *margin-left: 2.709239449638298%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .span12 { width: 99.999999993%; *width: 99.9468085036383%; } .row-fluid .span11 { width: 91.436464082%; *width: 91.38327259263829%; } .row-fluid .span10 { width: 82.87292817100001%; *width: 82.8197366816383%; } .row-fluid .span9 { width: 74.30939226%; *width: 74.25620077063829%; } .row-fluid .span8 { width: 65.74585634900001%; *width: 65.6926648596383%; } .row-fluid .span7 { width: 57.182320438000005%; *width: 57.129128948638304%; } .row-fluid .span6 { width: 48.618784527%; *width: 48.5655930376383%; } .row-fluid .span5 { width: 40.055248616%; *width: 40.0020571266383%; } .row-fluid .span4 { width: 31.491712705%; *width: 31.4385212156383%; } .row-fluid .span3 { width: 22.928176794%; *width: 22.874985304638297%; } .row-fluid .span2 { width: 14.364640883%; *width: 14.311449393638298%; } .row-fluid .span1 { width: 5.801104972%; *width: 5.747913482638298%; } } @media (min-width: 1280px) { .row-fluid { width: 100%; *zoom: 1; } .row-fluid:before, .row-fluid:after { display: table; content: ""; } .row-fluid:after { clear: both; } .row-fluid [class*="span"] { display: block; float: left; width: 100%; min-height: 1px; margin-left: 2.564102564%; *margin-left: 2.510911074638298%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .span12 { width: 100%; *width: 99.94680851063829%; } .row-fluid .span11 { width: 91.45299145300001%; *width: 91.3997999636383%; } .row-fluid .span10 { width: 82.905982906%; *width: 82.8527914166383%; } .row-fluid .span9 { width: 74.358974359%; *width: 74.30578286963829%; } .row-fluid .span8 { width: 65.81196581200001%; *width: 65.7587743226383%; } .row-fluid .span7 { width: 57.264957265%; *width: 57.2117657756383%; } .row-fluid .span6 { width: 48.717948718%; *width: 48.6647572286383%; } .row-fluid .span5 { width: 40.170940171000005%; *width: 40.117748681638304%; } .row-fluid .span4 { width: 31.623931624%; *width: 31.5707401346383%; } .row-fluid .span3 { width: 23.076923077%; *width: 23.0237315876383%; } .row-fluid .span2 { width: 14.529914530000001%; *width: 14.4767230406383%; } .row-fluid .span1 { width: 5.982905983%; *width: 5.929714493638298%; } } /* Clearfix */ .clearfix { *zoom: 1; } .clearfix:before, .clearfix:after { display: table; content: ""; } .clearfix:after { clear: both; } /* Visibilty Classes */ .hide { display: none; } .show { display: block; } .invisible { visibility: hidden; } .hidden { display: none; visibility: hidden; } /* Responsive Visibilty Classes */ .visible-phone { display: none !important; } .visible-tablet { display: none !important; } .hidden-desktop { display: none !important; } @media (max-width: 767px) { .visible-phone { display: inherit !important; } .hidden-phone { display: none !important; } .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important; } } @media (min-width: 768px) and (max-width: 1139px) { .visible-tablet { display: inherit !important; } .hidden-tablet { display: none !important; } .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important ; } } /* Content wrappers for blog post and system templates */ .content-wrapper { padding: 0 20px; margin: 0 auto; } /* Drag and drop layout styles */ .dnd-section > .row-fluid { margin: 0 auto; } @media (max-width: 767px) { .dnd-section .dnd-column { padding: 0; } } /* Elements */ html { font-size: 16px default; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: var(--paragraph-font-family); font-size: var(--paragraph-font-size-desktop); font-style: var(--paragraph-font-style); font-weight: var(--paragraph-font-weight); text-decoration: var(--paragraph-text-decoration); line-height: var(--paragraph-line-height); letter-spacing: var(--paragraph-letter-spacing); overflow-wrap: break-word; word-wrap: break-word; hyphens: var(--hyphens); } html[lang^='ja'] body, html[lang^='zh'] body, html[lang^='ko'] body { line-break: strict; overflow-wrap: normal; word-break: break-all; } section.base ul:not(.inputs-list) { display: flex; flex-direction: column; gap: 10px; list-style-type: none; margin: 0; padding: 0; } section.base ol:not(.inputs-list) { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; margin-left: 20px; } section.base ul:not(.inputs-list) li { position: relative; padding-left: 33px; } section.base ol:not(.inputs-list) li::marker { font-weight: 600; color: var(--pink); } section.base ul:not(.inputs-list) li::before { content: ""; position: absolute; top: 3px; left: 0; width: 18px; height: 18px; background-size: contain; background-position: center center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9.00166 18C7.75682 18 6.58674 17.7638 5.49142 17.2914C4.3961 16.8189 3.44337 16.1778 2.63321 15.368C1.82305 14.5581 1.18161 13.6058 0.708868 12.5109C0.236289 11.4161 0 10.2463 0 9.00166C0 7.75682 0.236289 6.58674 0.708868 5.49142C1.18129 4.3961 1.8225 3.44337 2.6325 2.63321C3.4425 1.82305 4.395 1.18161 5.49 0.708868C6.585 0.236289 7.755 0 9 0C9.9979 0 10.9421 0.15 11.8326 0.45C12.7232 0.75 13.5401 1.16842 14.2835 1.70526L13.2558 2.75661C12.6437 2.33503 11.9806 2.00708 11.2666 1.77276C10.5526 1.53829 9.79705 1.42105 9 1.42105C6.9 1.42105 5.11184 2.15921 3.63553 3.63553C2.15921 5.11184 1.42105 6.9 1.42105 9C1.42105 11.1 2.15921 12.8882 3.63553 14.3645C5.11184 15.8408 6.9 16.5789 9 16.5789C11.1 16.5789 12.8882 15.8408 14.3645 14.3645C15.8408 12.8882 16.5789 11.1 16.5789 9C16.5789 8.66716 16.5571 8.33803 16.5133 8.01261C16.4696 7.68718 16.404 7.37076 16.3165 7.06334L17.4643 5.90661C17.6379 6.39355 17.7707 6.89455 17.8624 7.40961C17.9541 7.9245 18 8.45463 18 9C18 10.245 17.7638 11.415 17.2914 12.51C16.8189 13.605 16.1778 14.5575 15.368 15.3675C14.5581 16.1775 13.6058 16.8187 12.5109 17.2911C11.4161 17.7637 10.2463 18 9.00166 18ZM7.65545 13.0299L3.95716 9.33158L4.95545 8.33329L7.65545 11.0333L17.0017 1.67258L18 2.67087L7.65545 13.0299Z' fill='%23FF0998'/%3E%3C/svg%3E"); } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin: 0; margin-bottom: 20px; clear: both; } h1, .h1 { font-family: var(--h1-font-family); font-size: var(--h1-font-size-desktop); font-style: var(--h1-font-style); font-weight: var(--h1-font-weight); line-height: var(--h1-line-height); text-decoration: var(--h1-text-decoration); letter-spacing: var(--h1-letter-spacing); text-transform: var(--h1-transform); } h1.small, .h1.small, .title-small h1 { font-size: 3.438rem; line-height: 110%; letter-spacing: -1px; font-style: normal; font-weight: 600; } h2, .h2 { font-family: var(--h2-font-family); font-size: var(--h2-font-size-desktop); font-style: var(--h2-font-style); font-weight: var(--h2-font-weight); line-height: var(--h2-line-height); text-decoration: var(--h2-text-decoration); letter-spacing: var(--h2-letter-spacing); text-transform: var(--h2-transform); } h3, .h3 { font-family: var(--h3-font-family); font-size: var(--h3-font-size-desktop); font-style: var(--h3-font-style); font-weight: var(--h3-font-weight); line-height: var(--h3-line-height); text-decoration: var(--h3-text-decoration); letter-spacing: var(--h3-letter-spacing); text-transform: var(--h3-transform); } h4, .h4 { font-family: var(--h4-font-family); font-size: var(--h4-font-size-desktop); font-style: var(--h4-font-style); font-weight: var(--h4-font-weight); line-height: var(--h4-line-height); text-decoration: var(--h4-text-decoration); letter-spacing: var(--h4-letter-spacing); text-transform: var(--h4-transform); } h5, .h5 { font-family: var(--h5-font-family); font-size: var(--h5-font-size-desktop); font-style: var(--h5-font-style); font-weight: var(--h5-font-weight); line-height: var(--h5-line-height); text-decoration: var(--h5-text-decoration); letter-spacing: var(--h5-letter-spacing); text-transform: var(--h5-transform); } h6, .h6 { font-family: var(--h6-font-family); font-size: var(--h6-font-size-desktop); font-style: var(--h6-font-style); font-weight: var(--h6-font-weight); line-height: var(--h6-line-height); text-decoration: var(--h6-text-decoration); letter-spacing: var(--h6-letter-spacing); text-transform: var(--h6-transform); } p { margin: 0; font-family: var(--paragraph-font-family); font-size: var(--paragraph-font-size-desktop); font-style: var(--paragraph-font-style); font-weight: var(--paragraph-font-weight); line-height: var(--paragraph-line-height); text-decoration: var(--paragraph-text-decoration); letter-spacing: var(--paragraph-letter-spacing); text-transform: var(--paragraph-transform); } p.small { font-family: var(--paragraph-small-font-family); font-size: var(--paragraph-small-font-size-desktop); font-style: var(--paragraph-small-font-style); font-weight: var(--paragraph-small-font-weight); line-height: var(--paragraph-small-line-height); text-decoration: var(--paragraph-small-text-decoration); letter-spacing: var(--paragraph-small-letter-spacing); text-transform: var(--paragraph-small-transform); } p.large { margin-bottom: 20px; font-family: var(--paragraph-large-font-family); font-size: var(--paragraph-large-font-size-desktop); font-style: var(--paragraph-large-font-style); font-weight: var(--paragraph-large-font-weight); line-height: var(--paragraph-large-line-height); text-decoration: var(--paragraph-large-text-decoration); letter-spacing: var(--paragraph-large-letter-spacing); text-transform: var(--paragraph-large-transform);; } p.large + .btn-group { margin-top: 20px; } p.small:not(:last-of-type), p.small:not(:last-child), p.large:not(:last-of-type), p.large:not(:last-child), p:not(:last-of-type), p:not(:last-child){ margin-bottom: 20px; } a { font-family: var(--link-font-family); font-size: var(--link-font-size-desktop); font-style: var(--link-font-style); font-weight: var(--link-font-weight); line-height: var(--link-line-height); text-decoration: underline; letter-spacing: var(--link-letter-spacing); text-transform: var(--link-transform); transition: var(--transition); color: var(--mojo-purple); text-decoration-color: var(--pink); text-underline-offset: 7px; } a:hover { color: var(--mojo-purple); text-decoration-color: var(--mojo-purple); } blockquote { margin: 0; margin-bottom: 25px; padding: 0; font-family: var(--blockquote-font-family); font-size: var(--blockquote-font-size-desktop); font-style: var(--blockquote-font-style); font-weight: var(--blockquote-font-weight); line-height: var(--blockquote-line-height); text-decoration: var(--blockquote-text-decoration); letter-spacing: var(--blockquote-letter-spacing); text-transform: var(--blockquote-transform); } .subheading { display: block; margin-bottom: 20px; font-family: var(--subheading-font-family); font-size: var(--subheading-font-size-desktop); font-style: var(--subheading-font-style); font-weight: var(--subheading-font-weight); line-height: var(--subheading-line-height); text-decoration: var(--subheading-text-decoration); letter-spacing: 2px; text-transform: var(--subheading-transform); } @media only screen and (max-width: 767px) { body { font-size: var(--paragraph-font-size-mobile); line-height: var(--paragraph-line-height); letter-spacing: var(--paragraph-letter-spacing); } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-bottom: 20px; } h1, .h1, .title-small h1 { font-size: var(--h1-font-size-mobile); line-height: var(--h1-line-height); letter-spacing: var(--h1-letter-spacing); } h1.small, .h1.small { font-size: 2rem; line-height: 120%; } h2, .h2 { font-size: var(--h2-font-size-mobile); line-height: var(--h2-line-height); letter-spacing: var(--h2-letter-spacing); } h3, .h3 { font-size: var(--h3-font-size-mobile); line-height: var(--h3-line-height); letter-spacing: var(--h3-letter-spacing); } h4, .h4 { font-size: var(--h4-font-size-mobile); line-height: var(--h4-line-height); letter-spacing: var(--h4-letter-spacing); } h5, .h5 { font-size: var(--h5-font-size-mobile); line-height: var(--h5-line-height); letter-spacing: var(--h5-letter-spacing); } h6, .h6 { font-size: var(--h6-font-size-mobile); line-height: var(--h6-line-height); letter-spacing: var(--h6-letter-spacing); } p { font-size: var(--paragraph-font-size-mobile); line-height: var(--paragraph-line-height); letter-spacing: var(--paragraph-letter-spacing); } p.small { font-size: var(--paragraph-small-font-size-mobile); line-height: var(--paragraph-small-line-height); letter-spacing: var(--paragraph-small-letter-spacing); } p.large { font-size: var(--paragraph-large-font-size-mobile); line-height: var(--paragraph-large-line-height); letter-spacing: var(--paragraph-large-letter-spacing); } a { font-size: var(--link-font-size-mobile); line-height: var(--link-line-height); letter-spacing: var(--link-letter-spacing); } blockquote { font-size: var(--blockquote-font-size-mobile); line-height: var(--blockquote-line-height); letter-spacing: var(--blockquote-letter-spacing); } .subheading { margin-bottom: 20px; font-size: var(--subheading-font-size-mobile); line-height: var(--subheading-line-height); letter-spacing: var(--subheading-letter-spacing); } } /* BG Colors */ .bg-color-4 { background-color: #210346; } .bg-color-5 { background-color: #6B2BAA; } .bg-color-6 { background-color: #9546DB; } .bg-color-7 { background-color: #FCEFFF; } .bg-color-1 { background-color: #FF0998; } .bg-color-2 { background-color: #09FFB9; } .bg-color-3 { background-color: #370178; } .bg-black { background-color: var(--black); } .bg-white { background-color: var(--white); } form .hs-richtext, form .hs-richtext p { margin-bottom: 0.5rem; font-size: var(--form-misc-size-mobile); } form label.hs-form-checkbox-display span, form label.hs-form-radio-display span, form label.hs-form-booleancheckbox-display span { font-size: var(--form-misc-size-mobile); margin-top: 2px; } @media only screen and (min-width: 768px) { form label.hs-form-checkbox-display span, form label.hs-form-radio-display span, form label.hs-form-booleancheckbox-display span, form .hs-richtext, form .hs-richtext p { font-size: var(--form-misc-size-desktop); } } form .hs-richtext img { max-width: 100% !important; } .legal-consent-container { margin-bottom: 2rem; } form .legal-consent-container .hs-form-booleancheckbox-display>span { margin-left: 0; } /* Fields */ form .hs-form-field { position: relative; display: flex; flex-direction: column; justify-content: flex-start; float: none !important; width: 100% !important; margin-bottom: 1.4rem; } form .hs-form-field .input { margin-right: 0 !important; } form .hs-form-field ul { list-style-type: none; margin: 0; padding: 0; } form fieldset { border: none; max-width: 100% !important; } form fieldset:not(:last-of-type) { margin-bottom: 1.4rem; } form fieldset .hs-form-field { margin-bottom: 0; } form fieldset.form-columns-2, form fieldset.form-columns-3 { display: grid; align-items: flex-start; grid-gap: 1.4rem 1.4rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { form fieldset.form-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } form fieldset.form-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Labels */ form label { display: block; margin-bottom: var(--form-label-spacing-bottom); color: var(--form-label-color); font-family: var(--form-label-font-family); font-size: var(--form-label-font-size-mobile); line-height: 1; font-weight: var(--form-label-font-weight); text-transform: var(--form-label-transform); } @media only screen and (min-width: 768px) { form label { font-size: var(--form-label-font-size-desktop); } } form .inputs-list.multi-container label span, form .hs-form-booleancheckbox label span { color: initial; } /* Form Title */ .form-title { margin-bottom: 0; } /* Help text */ form legend { font-size: 0.875rem; } /* Inputs */ form input[type=text], form input[type=search], form input[type=email], form input[type=password], form input[type=tel], form input[type=number], form input[type=file], form select, form textarea { display: inline-block; width: 100%; border: var(--form-input-border-size) solid var(--form-input-border-color); border-radius: var(--form-input-border-radius); background-color: var(--form-input-background-color); padding: var(--form-input-padding-top) var(--form-input-padding-right) var(--form-input-padding-bottom) var(--form-input-padding-left); color: var(--form-input-color); font-family: var(--form-input-font-family); font-size: var(--form-input-font-size-mobile); line-height: 1.3; font-weight: var(--form-input-font-weight); text-transform: var(--form-input-transform); } @media only screen and (min-width: 768px) { form input[type=text], form input[type=search], form input[type=email], form input[type=password], form input[type=tel], form input[type=number], form input[type=file], form select, form textarea { font-size: var(--form-input-font-size-desktop); } } form textarea { resize: vertical; line-height: 1.2; border-radius: 10px; } form input::placeholder, form select::placeholder, form textarea::placeholder { opacity: 1; color: var(--form-placeholder-color); } form input:focus, form input:focus-visible, form input:focus-within, form input:active, form input:target, form select:focus, form select:focus-visible, form select:focus-within, form select:active, form select:target, form textarea:focus, form textarea:focus-visible, form textarea:focus-within, form textarea:active, form textarea:target { border-color: var(--form-input-border-focus-color); outline: none; box-shadow: none; } form legend.hs-field-desc { position: absolute; right: 0; width: auto !important; } /* Inputs - date picker */ .hs-dateinput { position: relative; } .hs-dateinput:before { content: ''; position: absolute; right: var(--form-input-padding-right); top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-image: var(--form-date-icon); } .fn-date-picker .pika-table thead th { color: #FFF; } .fn-date-picker td.is-selected .pika-button { border-radius: 0; box-shadow: none; } .fn-date-picker td .pika-button:hover, .fn-date-picker td .pika-button:focus { border-radius: 0 !important; color: #FFF; } /* Inputs - file picker */ form input[type=file] { border-radius: 0; background-color: transparent; border: initial; padding: initial; } .hs-fieldtype-select .input { position: relative; } .hs-fieldtype-select .input select { position: relative; } .hs-fieldtype-select .input::after { content: ""; display: block; position: absolute; width: 14px; height: 7px; right: var(--form-input-padding-right); top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: var(--form-dropdown-icon); } select.hs-input { appearance: none; } /* GDPR */ /* Validation */ .hs-form-required { color: var(--form-error-color); } .hs-input.invalid.error { border-color: var(--form-error-color); } .hs-error-msg { margin-top: 0.35rem; color: var(--form-error-color); } form input.hs-input.invalid.error { border-color: var(--pink); } /* Submit button */ form input[type=submit], form .hs-button { cursor: pointer; display: inline-block; text-align: center; transition: all 0.15s linear; white-space: normal; } /* Captcha */ .grecaptcha-badge { margin: 0 auto; } /* Position label text against custom radio and checkboxes */ ul.inputs-list.multi-container { display: flex; flex-direction: column; align-items: flex-start; gap: var(--multi-list-gap); margin-top: var(--multi-list-spacing-top); } label.hs-form-booleancheckbox-display, label.hs-form-checkbox-display, label.hs-form-radio-display { cursor: pointer; display: flex; align-items: center; gap: var(--label-check-spacing); } /* Custom checkbox */ input[type="checkbox"] { position: relative; cursor: pointer; appearance: none; width: var(--form-checkbox-width); height: var(--form-checkbox-height); } input[type="checkbox"]::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: var(--form-checkbox-width); height: var(--form-checkbox-height); background-image: var(--form-checkbox-icon); background-size: contain; background-position: center; background-repeat: no-repeat; transition: var(--transition); } input[type="checkbox"]:checked::before { background-image: var(--form-checkbox-checked-icon); } /* Custom Radio Button Styling */ /* Target radio inputs inside any label with the common HubSpot structure */ .hs-form-radio-display input[type="radio"] { position: relative; cursor: pointer; appearance: none; /* Hide default radio button */ -webkit-appearance: none; -moz-appearance: none; width: var(--form-radio-width); height: var(--form-radio-height); margin: 0; padding: 0; background-color: var(--form-radio-bg-color); } .hs-form-radio-display input[type="radio"]::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: var(--form-radio-width); height: var(--form-radio-height); background-image: var(--form-radio-icon); background-size: contain; background-position: center; background-repeat: no-repeat; transition: var(--transition); pointer-events: none; } .hs-form-radio-display input[type="radio"]:checked::before { background-image: var(--form-radio-checked-icon); } /* Buttons */ .form-button--custom input[type="submit"].hs-button { border: var(--button-two-border-size) var(--button-two-border-style) #FF0998 !important; background-color: #FF0998 !important; color: var(--white) !important; } .form-button--custom input[type="submit"].hs-button:hover { border: var(--button-two-border-size) var(--button-two-border-style) var(--white) !important; background-color: var(--white) !important; color: var(--black) !important; box-shadow: var(--box-shadow-big) !important; } .btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: 35px; margin-top: 35px; } .btn-group.btn-group--small { gap: 20px; } .btn-group.btn-group--small .btn, .btn-group.btn-group--small a.btn { padding: 16px 45px; } /* Button styling */ .btn, a.btn, .form-button input[type="submit"].hs-button { cursor: pointer; display: inline-flex; text-align: center; transition: var(--transition); white-space: normal; width: 100%; justify-content: center; padding: var(--button-padding-top-mobile) var(--button-padding-right-mobile) var(--button-padding-bottom-mobile) var(--button-padding-left-mobile); border: var(--button-border-size) var(--button-border-style) var(--button-border-color); border-radius: var(--button-border-radius); background-color: var(--button-background-color); color: var(--button-text-color); font-family: var(--button-font-family), sans-serif; font-size: var(--button-font-size-mobile); line-height: var(--button-line-height); font-style: var(--button-font-style); font-weight: var(--button-font-weight); letter-spacing: var(--button-letter-spacing); text-transform: var(--button-transform); text-decoration: none; } @media only screen and (min-width: 600px) { .btn, a.btn, .form-button input[type="submit"].hs-button { width: auto; justify-content: flex-start; } } @media only screen and (min-width: 768px) { .btn, a.btn, .form-button input[type="submit"].hs-button { padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left); font-size: var(--button-font-size-desktop); } } .btn.w-icon, a.btn.w-icon { display: flex; align-items: center; gap: 10px; } .btn.w-icon img, a.btn.w-icon img { max-width: 16px; width: 100%; height: 16px; object-fit: contain; margin-bottom: 2px; } .btn:hover, a.btn:hover { border: var(--button-border-size) var(--button-border-style) var(--button-border-color-hover); background-color: var(--button-background-color-hover); color: var(--button-text-color-hover); box-shadow: var(--box-shadow-big); text-decoration: none; } .btn:focus-visible, a.btn:focus-visible { border: var(--button-border-size) var(--button-border-style) blue; } .btn .button-icon, a.btn .button-icon { display: block; transition: var(--transition); } .btn .button-icon-hover, a.btn .button-icon-hover { display: none; transition: var(--transition); } .btn:hover .button-icon, a.btn:hover .button-icon { display: none; } .btn:hover .button-icon-hover, a.btn:hover .button-icon-hover { display: block; } /* Button variations */ .btn--1, a.btn--1, .form-button--1 input[type="submit"].hs-button { padding: var(--button-one-padding-top-mobile) var(--button-one-padding-right-mobile) var(--button-one-padding-bottom-mobile) var(--button-one-padding-left-mobile); border: var(--button-one-border-size) var(--button-one-border-style) var(--button-one-border-color); border-radius: var(--button-one-border-radius); background-color: var(--button-one-background-color); color: var(--button-one-text-color); font-family: var(--button-one-font-family), sans-serif; font-size: var(--button-one-font-size-mobile); font-weight: var(--button-one-font-weight); text-transform: var(--button-one-transform); } .btn--1:hover, a.btn--1:hover, .form-button--1 input[type="submit"].hs-button:hover { border: var(--button-one-border-size) var(--button-one-border-style) var(--button-one-border-color-hover); background-color: var(--button-one-background-color-hover); color: var(--button-one-text-color-hover); } .btn--2, a.btn--2, .form-button--2 input[type="submit"].hs-button { padding: var(--button-two-padding-top-mobile) var(--button-two-padding-right-mobile) var(--button-two-padding-bottom-mobile) var(--button-two-padding-left-mobile); border: var(--button-two-border-size) var(--button-two-border-style) var(--button-two-border-color); border-radius: var(--button-two-border-radius); background-color: var(--button-two-background-color); color: var(--button-two-text-color); font-family: var(--button-two-font-family), sans-serif; font-size: var(--button-two-font-size-mobile); font-weight: var(--button-two-font-weight); text-transform: var(--button-two-transform); } .btn--2:hover, a.btn--2:hover, .form-button--2 input[type="submit"].hs-button { border: var(--button-two-border-size) var(--button-two-border-style) var(--button-two-border-color-hover); background-color: var(--button-two-background-color-hover); color: var(--button-two-text-color-hover); } .btn--3, a.btn--3, .form-button--3 input[type="submit"].hs-button { padding: var(--button-three-padding-top-mobile) var(--button-three-padding-right-mobile) var(--button-three-padding-bottom-mobile) var(--button-three-padding-left-mobile); border: var(--button-three-border-size) var(--button-three-border-style) var(--button-three-border-color); border-radius: var(--button-three-border-radius); background-color: var(--button-three-background-color); color: var(--button-three-text-color); font-family: var(--button-three-font-family), sans-serif; font-size: var(--button-three-font-size-mobile); font-weight: var(--button-three-font-weight); text-transform: var(--button-three-transform); } .btn--3:hover, a.btn--3:hover, .form-button--3 input[type="submit"].hs-button:hover { border: var(--button-three-border-size) var(--button-three-border-style) var(--button-three-border-color-hover); background-color: var(--button-three-background-color-hover); color: var(--button-three-text-color-hover); } .btn--4, a.btn--4, .form-button--4 input[type="submit"].hs-button { padding: var(--button-four-padding-top-mobile) var(--button-four-padding-right-mobile) var(--button-four-padding-bottom-mobile) var(--button-four-padding-left-mobile); border: var(--button-four-border-size) var(--button-four-border-style) var(--button-four-border-color); border-radius: var(--button-four-border-radius); background-color: var(--button-four-background-color); color: var(--button-four-text-color); font-family: var(--button-four-font-family), sans-serif; font-size: var(--button-four-font-size-mobile); font-weight: var(--button-four-font-weight); text-transform: var(--button-four-transform); } .btn--4:hover, a.btn--4:hover, .form-button--4 input[type="submit"].hs-button:hover { border: var(--button-four-border-size) var(--button-four-border-style) var(--button-four-border-color-hover); background-color: var(--button-four-background-color-hover); color: var(--button-four-text-color-hover); } .btn--5, a.btn--5, .form-button--5 input[type="submit"].hs-button { padding: var(--button-five-padding-top-mobile) var(--button-five-padding-right-mobile) var(--button-five-padding-bottom-mobile) var(--button-five-padding-left-mobile); border: var(--button-five-border-size) var(--button-five-border-style) var(--button-five-border-color); border-radius: var(--button-five-border-radius); background-color: var(--button-five-background-color); color: var(--button-five-text-color); font-family: var(--button-five-font-family), sans-serif; font-size: var(--button-five-font-size-mobile); font-weight: var(--button-five-font-weight); text-transform: var(--button-five-transform); } .btn--5:hover, a.btn--5:hover, .form-button--5 input[type="submit"].hs-button:hover { border: var(--button-five-border-size) var(--button-five-border-style) var(--button-five-border-color-hover); background-color: var(--button-five-background-color-hover); color: var(--button-five-text-color-hover); } @media only screen and (min-width: 768px) { .btn--1, a.btn--1, .form-button--1 input[type="submit"].hs-button { padding: var(--button-one-padding-top) var(--button-one-padding-right) var(--button-one-padding-bottom) var(--button-one-padding-left); font-size: var(--button-one-font-size-desktop); } .btn--2, a.btn--2, .form-button--2 input[type="submit"].hs-button { padding: var(--button-two-padding-top) var(--button-two-padding-right) var(--button-two-padding-bottom) var(--button-two-padding-left); font-size: var(--button-two-font-size-desktop); } .btn--3, a.btn--3, .form-button--3 input[type="submit"].hs-button { padding: var(--button-three-padding-top) var(--button-three-padding-right) var(--button-three-padding-bottom) var(--button-three-padding-left); font-size: var(--button-three-font-size-desktop); } .btn--4, a.btn--4, .form-button--4 input[type="submit"].hs-button { padding: var(--button-four-padding-top) var(--button-four-padding-right) var(--button-four-padding-bottom) var(--button-four-padding-left); font-size: var(--button-four-font-size-desktop); } .btn--5, a.btn--5, .form-button--5 input[type="submit"].hs-button { padding: var(--button-five-padding-top) var(--button-five-padding-right) var(--button-five-padding-bottom) var(--button-five-padding-left); font-size: var(--button-five-font-size-desktop); } } /* Icon button */ .btn--icon, a.btn--icon { display: flex; align-items: center; gap: 10px; padding-left: 0; padding-right: 0; border: 2px solid transparent; background-color: transparent; color: var(--royal-purple); } .btn--icon:hover, a.btn--icon:hover { box-shadow: none; border: 2px solid transparent; background-color: transparent; color: var(--royal-purple); } .btn--icon img, a.btn--icon img { margin-bottom: 2px; /* offset for lineheight to center icon */ } .mobile-buttons .btn--icon, .mobile-buttons a.btn--icon { padding: 0; } .mobile-buttons .btn--icon span, .mobile-buttons a.btn--icon span { display: none; } .mobile-buttons .btn--icon img, .mobile-buttons a.btn--icon img { width: 20px; height: 20px; object-fit: contain; } /* site-nav buttons */ .site-nav .wrapper .btn, .site-nav .wrapper a.btn { font-size: 16px; font-style: normal; font-weight: 400; line-height: 20px; } .btn--full, a.btn--full { padding: 15px 48px; border-radius: 30px; border: 2px solid var(--royal-purple); background: var(--royal-purple); color: var(--white) } .btn--full:hover, a.btn--full:hover { border: 2px solid var(--royal-purple); background: var(--royal-purple); color: var(--white) } .tags { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px; } .tag { cursor: pointer; display: inline-flex; text-align: center; transition: var(--transition); white-space: normal; text-decoration: none; border: var(--tag-border-width) solid var(--tag-border-color); border-radius: var( --tag-border-radius); background-color: var(--tag-background); padding: var(--form-tag-padding-top) var(--form-tag-padding-right) var(--form-tag-padding-bottom) var(--form-tag-padding-left); color: var(--tag-text-color); font-family: var(--tags-font-family); font-size: var(--tags-font-size-mobile); line-height: 1; font-weight: var(--tags-font-weight); text-transform: var(--tags-transform); } @media only screen and (min-width: 768px) { .tag { font-size: var(--tags-font-size-desktop); } } .tag:hover, .tag.active { text-decoration: none; border: var(--tag-border-width) solid var(--tag-hover-border-color); background-color: var(--tag-hover-background); color: var(--tag-hover-text-color); } .hamburger-wrapper { display: flex; align-items: center; max-width: 25px; width: 100%; height: 25px; } .hamburger { display: flex; position: relative; width: 25px; height: 2px; background-color: var(--royal-purple); cursor: pointer; transition: all 0.3s ease; } .hamburger::before, .hamburger::after { content: ""; position: absolute; width: 25px; height: 2px; background: var(--royal-purple); transition: all 0.3s ease; } .hamburger::before { top: -10px } .hamburger::after { top: 10px; right: 0; width: 15px; } .hamburger.hamburger-open { background: transparent; } .hamburger.hamburger-open::before { transform: rotate(45deg); top: 0; } .hamburger.hamburger-open::after { transform: rotate(-45deg); top: 0; width: 25px; } .video-container { position: relative; overflow: hidden; padding-bottom: 56.25%; background-size: cover; background-repeat: no-repeat; } @media only screen and (min-width: 768px) { .video-container { min-height: 490px; } } .video-container video { position: absolute; width: 100%; height: 100%; background-size: cover; transform: none; margin-left: 0; object-fit: contain; } .video-container--youtube { padding-bottom: 0; } .video-thumbnail { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 1; opacity: 1; transition: var(--transition); cursor: pointer; border-radius: 30px; overflow: clip; } @media only screen and (min-width: 768px) { .video-thumbnail { min-height: 490px; } } .video-thumbnail .bg-image-container.object-cover { display: flex; } .video-thumbnail .bg-image-container.object-cover img { width: 100%; height: 100%; object-fit: cover; } .video-thumbnail::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 10; background-color: rgba(#000,0.5); } .video-thumbnail.is-hidden { opacity: 0; visibility: hidden; } .video-thumbnail + video { visibility: hidden; } .video-thumbnail.is-hidden + video { visibility: visible; } .play { background-color: var(--white); display: flex; align-items: center; justify-content: center; height: 60px; width: 60px; position: absolute; outline: none; appearance: none; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 100; border-radius: 50%; transition: var(--transition); filter: drop-shadow(0px 5px 20px rgba(69, 45, 121, 0.10)); } .play::before { position: relative; content: ''; display: block; width: 0; height: 0; margin-top: 2px; margin-left: 6px; border-style: solid; border-width: 17.5px 0 17.5px 23px; transition: var(--transition); border-color: transparent transparent transparent var(--royal-purple); z-index: 100; } .video-thumbnail:hover .play, .video-thumbnail:focus-visible .play { background-color: var(--royal-purple); filter: drop-shadow(0px 24px 50px rgba(149, 70, 219, 0.20)) drop-shadow(0px 9px 20px rgba(69, 45, 121, 0.10)); } .video-thumbnail:hover .play::before, .video-thumbnail:focus-visible .play::before { border-color: transparent transparent transparent var(--white); } @media only screen and (min-width: 768px) { .play { height: 107px; width: 107px; } .play::before { margin-left: 11px; border-width: 23px 0 23px 31px; } } .youtube { background-color: var(--black); position: relative; padding-top: 56.25%; overflow: hidden; } .youtube::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--black); opacity: .3; } .youtube img { width: 100%; height: auto; top: -16.84%; left: 0; } .youtube img, .youtube iframe { position: absolute; } .youtube iframe { z-index: 2; height: 100%; width: 100%; top: 0; left: 0; } /* Utilities */ /* * Base styles */ .base { padding-left: var(--base-padding); padding-right: var(--base-padding); } .base .wrapper { display: flex; flex-direction: column; max-width: var(--max-width); width: 100%; margin: 0 auto; } .base.big-shadow { position: relative; } .base.big-shadow .wrapper { position: relative; } .base.big-shadow .wrapper > div { z-index: 8; } .big-shadow .wrapper::after { content: ""; max-width: 283px; width: 100%; height: 242px; position: absolute; z-index: 2; bottom: -30px; left: 50%; transform: translateX(-50%); border-radius: 82.961px; opacity: 0.2; background: var(--dark-purple); filter: blur(44.84352493286133px); } @media only screen and (min-width: 768px) { .big-shadow .wrapper::after { max-width: 1252px; height: 435px; bottom: -55px; border-radius: 230.652px; opacity: 0.3; background: var(--royal-purple); filter: blur(124.67691040039062px); } } .bg-graphic { position: absolute; z-index: 1; top: 60px; left: 0; width: 100%; height: 100%; overflow: hidden; } .img-cover, .image-wrapper.img-cover { display: flex; max-width: 100%; width: 100%; height: 100%; } .img-cover img, .image-wrapper.img-cover img { width: 100%; height: 100%; object-fit: cover; } .centered-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } /* * Color change */ .base .wrapper.content--white h1, .base .wrapper.content--white h2, .base .wrapper.content--white h3, .base .wrapper.content--white h4, .base .wrapper.content--white h5, .base .wrapper.content--white h6, .base .wrapper.content--white blockquote, .base .wrapper.content--white a:not(.btn), .base .wrapper.content--white p, .base .wrapper.content--white span:not(.btn-text), .base .wrapper.content--white div { color: var(--white); } .base .wrapper.content--white a:not(.btn):hover { color: var(--white); opacity: 0.8; } .base .wrapper.content--white form label { color: var(--white); } .base .wrapper.content--white form .inputs-list.multi-container label span, .base .wrapper.content--white form .hs-form-booleancheckbox label span { color: var(--white); } .base .wrapper.content--white form input[type=text], .base .wrapper.content--white form input[type=search], .base .wrapper.content--white form input[type=email], .base .wrapper.content--white form input[type=password], .base .wrapper.content--white form input[type=tel], .base .wrapper.content--white form input[type=number], .base .wrapper.content--white form input[type=file], .base .wrapper.content--white form select, .base .wrapper.content--white form textarea { border: var(--form-input-border-size) solid var(--white); color: var(--white); } .base .wrapper.content--white form input::placeholder, .base .wrapper.content--white form select::placeholder, .base .wrapper.content--white form textarea::placeholder { color: var(--white); opacity: 0.8; } .base .wrapper.content--white input[type="checkbox"]::before { background-image: var(--form-checkbox-icon--white); } .base .wrapper.content--white input[type="checkbox"]:checked::before { background-image: var(--form-checkbox-checked-icon--white); } section.base .wrapper.content--white ul:not(.inputs-list) li::before, section.base .wrapper .content--white ul:not(.inputs-list) li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9.00166 18C7.75682 18 6.58674 17.7638 5.49142 17.2914C4.3961 16.8189 3.44337 16.1778 2.63321 15.368C1.82305 14.5581 1.18161 13.6058 0.708868 12.5109C0.236289 11.4161 0 10.2463 0 9.00166C0 7.75682 0.236289 6.58674 0.708868 5.49142C1.18129 4.3961 1.8225 3.44337 2.6325 2.63321C3.4425 1.82305 4.395 1.18161 5.49 0.708868C6.585 0.236289 7.755 0 9 0C9.9979 0 10.9421 0.15 11.8326 0.45C12.7232 0.75 13.5401 1.16842 14.2835 1.70526L13.2558 2.75661C12.6437 2.33503 11.9806 2.00708 11.2666 1.77276C10.5526 1.53829 9.79705 1.42105 9 1.42105C6.9 1.42105 5.11184 2.15921 3.63553 3.63553C2.15921 5.11184 1.42105 6.9 1.42105 9C1.42105 11.1 2.15921 12.8882 3.63553 14.3645C5.11184 15.8408 6.9 16.5789 9 16.5789C11.1 16.5789 12.8882 15.8408 14.3645 14.3645C15.8408 12.8882 16.5789 11.1 16.5789 9C16.5789 8.66716 16.5571 8.33803 16.5133 8.01261C16.4696 7.68718 16.404 7.37076 16.3165 7.06334L17.4643 5.90661C17.6379 6.39355 17.7707 6.89455 17.8624 7.40961C17.9541 7.9245 18 8.45463 18 9C18 10.245 17.7638 11.415 17.2914 12.51C16.8189 13.605 16.1778 14.5575 15.368 15.3675C14.5581 16.1775 13.6058 16.8187 12.5109 17.2911C11.4161 17.7637 10.2463 18 9.00166 18ZM7.65545 13.0299L3.95716 9.33158L4.95545 8.33329L7.65545 11.0333L17.0017 1.67258L18 2.67087L7.65545 13.0299Z' fill='%2309FFB9'/%3E%3C/svg%3E"); } section.base .wrapper .content--white ol:not(.inputs-list) li::marker { font-weight: 600; color: var(--green); } /* * Spacing */ .pt-sm { padding-top: 25px; } .pt-md { padding-top: 35px; } .pt-lg { padding-top: 80px; } .pt-xxl { padding-top: 180px; } @media only screen and (min-width: 768px) { .pt-sm { padding-top: 45px; } .pt-md { padding-top: 85px; } .pt-lg { padding-top: 120px; } .pt-xxl { padding-top: 220px; } } .pb-sm { padding-bottom: 25px; } .pb-md { padding-bottom: 35px; } .pb-lg { padding-bottom: 80px; } .pb-xxl { padding-bottom: 120px; } @media only screen and (min-width: 768px) { .pb-sm { padding-bottom: 45px; } .pb-md { padding-bottom: 85px; } .pb-lg { padding-bottom: 120px; } .pb-xxl { padding-bottom: 180px; } } /* * Content widths */ .wrapper.wrapper--sm { max-width: calc(var(--max-width)/12 * 6); } .wrapper.wrapper--md { max-width: calc(var(--max-width)/12 * 8); } .wrapper.wrapper--lg { max-width: calc(var(--max-width)/12 * 10); } /* * Grids */ .grid { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; } @media only screen and (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 1080px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } } .flex-wrap { display: flex; align-items: center; gap: var(--flex-gap); flex-wrap: wrap; } .flex-wrap--center { justify-content: center; } /* * Hiding content */ /* hidden mobile down */ @media only screen and (max-width: 600px) { .hidden-sm { display: none !important; } } /* hidden tablet down */ @media only screen and (max-width: 767px) { .hidden-md { display: none !important; } } /* hidden laptops down */ @media only screen and (max-width: 991px) { .hidden-lg { display: none !important; } } /* hidden desktop down */ @media only screen and (max-width: 1199px) { .hidden-xl { display: none !important; } } /* hidden desktop */ @media only screen and (min-width: 1200px) { .hidden-desk { display: none !important; } } /* Components */ .site-nav { position: fixed; z-index: 31; top: 12px; left: 0; width: 100%; padding-left: var(--base-padding); padding-right: var(--base-padding); } .site-nav .wrapper { position: relative; max-width: 1520px; width: 100%; padding: 16px 16px; margin: 0 auto; border-radius: 20px; background: var(--white); box-shadow: var(--box-shadow-small); } .site-nav .wrapper .main-nav-wrapper { display: flex; justify-content: space-between; align-items: center; } .site-nav .wrapper .main-nav-wrapper .logo { display: flex; max-width: 136px; } @media only screen and (min-width: 992px) { .site-nav .wrapper { padding: 16px 38px; } .site-nav .wrapper .main-nav-wrapper .logo { max-width: 202px; } } .site-nav .wrapper .main-nav-wrapper .logo img { object-fit: contain; width: 100%; height: auto; } /* mobile nav */ .mobile-nav { display: none; overflow: scroll; max-height: 90vh; } .hamburger-open .mobile-nav { display: block; } body.hamburger-open { position: relative; overflow: hidden; } body.hamburger-open:after { content: ""; position: absolute; z-index: 18; top: 0; left: 0; width: 100%; height: 100%; background: rgba(33, 3, 70, 0.50); } /* mobile nav buttons */ .mobile-nav-buttons { display: flex; align-items: center; gap: 25px; } .mobile-nav-buttons .btn.btn--icon img { width: 25px; object-fit: contain; height: 25px; } .mobile-nav-buttons .btn.btn--icon .btn-text { display: none; } .mobile-nav-buttons .btn.btn--full { display: none; } /* no nav version lp */ .site-nav.site-nav--lp { position: absolute; } .site-nav.site-nav--lp .wrapper { position: relative; max-width: 1520px; width: 100%; padding: 16px 38px; margin: 0 auto; border-radius: 20px; background: transparent; box-shadow: none; } .footer { background-color: var(--dark-purple); padding-top: 85px; } @media only screen and (min-width: 768px) { .footer { padding-top: 170px; } } /* top footer */ .footer .top-footer { display: grid; grid-template-columns: 1fr; gap: 45px; color: var(--white); padding-bottom: 45px; } @media only screen and (min-width: 768px) { .footer .top-footer { grid-template-columns: repeat(2,1fr); gap: 85px; padding-bottom: 110px; } } @media only screen and (min-width: 1200px) { .footer .top-footer { grid-template-columns: repeat(4,1fr); } } .footer-col.contact { order: 4; } .footer-col.links { order: 2; } .footer-col.links-two { order: 3; } .footer-col.address { order: 1; } @media only screen and (min-width: 768px) { .footer-col.contact { order: 1; } .footer-col.links { order: 2; } .footer-col.links-two { order: 3; } .footer-col.address { order: 4; } } .footer .top-footer .footer-col span { display: block; } .footer .top-footer .footer-col .h5, .footer .top-footer .footer-col .h6, .footer .top-footer .footer-col p, .footer .top-footer .footer-col a { color: var(--white); } .footer .top-footer .footer-col .h5 { margin-bottom: 20px; } .footer .top-footer .footer-col .h6 { margin-top: 40px; } @media only screen and (min-width: 768px) { .footer .top-footer .footer-col .h5 { margin-bottom: 35px; } .footer .top-footer .footer-col .h6 { margin-top: 85px; } } .footer .top-footer .footer-col a.subtitle-link { display: flex; align-items: center; gap: 10px; } .footer .top-footer .footer-col a.subtitle-link img { max-width: 14px; width: 100%; height: auto; object-fit: contain; margin-bottom: 3px; } .footer-links { display: flex; flex-direction: column; gap: 10px; } .footer .top-footer .footer-col .footer-links a { text-decoration: none; transition: var(--transition); } .footer .top-footer .footer-col .footer-links a:hover { text-decoration: underline; } .footer .top-footer .footer-col .footer-addresses .h6 { margin-top: 30px; } /* bottom footer */ .footer .bottom-footer { display: flex; flex-direction: column; gap: 35px; padding-top: 35px; padding-bottom: 35px; border-top: 1px solid rgba(250, 250, 250, 0.3); color: rgba(250, 250, 250, 0.7); } @media only screen and (min-width: 600px) { .footer .bottom-footer { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; } } .footer .bottom-footer a { color: rgba(250, 250, 250, 0.7); text-decoration: none; transition: var(--transition); } .footer .bottom-footer a:hover { text-decoration: underline; } .footer .bottom-footer .cert { display: flex; flex-direction: column; gap: 20px; } @media only screen and (min-width: 600px) { .footer .bottom-footer .cert { flex-direction: row; align-items: center; } } .footer .bottom-footer .cert img { max-width: 66px; width: 100%; height: auto; object-fit: contain; } .footer .bottom-footer .links { display: flex; flex-direction: column; gap: 10px; min-width: 20%; } @media only screen and (min-width: 600px) { .footer .bottom-footer .links { flex-direction: row; align-items: center; gap: 30px; } } .footer .bottom-footer .some, .footer .bottom-footer .some a { display: flex; align-items: center; gap: 35px; } /* mobile specifics */ .footer .some-mobile { display: flex; align-items: center; gap: 35px; order: 5; } @media only screen and (min-width: 768px) { .footer .some-mobile { display: none; } } .main-nav ul { list-style-type: none; margin: 0; padding: 0; display: flex; gap: 30px; } .main-nav ul li a { display: flex; align-items: center; gap: 8px; color: var(--black); text-decoration: none; transition: var(--transition); } .main-nav ul li a svg path { transition: var(--transition); stroke: var(--black); } .main-nav ul li:hover a { text-decoration: none; color: var(--royal-purple); } .main-nav ul li:hover a svg path { stroke: var(--royal-purple); } ul li.has-submenu { position: relative; } ul.sub-menu { display: none; } ul.sub-menu svg.sub-menu-arrow { position: absolute; left: 100px; top: -14px; width: 30px; height: 30px; } .main-nav ul li.has-submenu ul.sub-menu { display: none; flex-direction: column; gap: 20px; position: absolute; top: 75px; left: -75px; padding: 30px 20px; min-width: 230px; border-radius: 30px; background-color: var(--white); box-shadow: var(--box-shadow-small); } .nav-buttons, .mobile-nav-buttons { margin-top: 0; } /* Show submenu on hover OR when focus is within the li (parent or submenu links) */ .main-nav ul li.has-submenu:hover ul.sub-menu, .main-nav ul li.has-submenu:focus-within ul.sub-menu { display: flex; } .main-nav ul li.has-submenu:hover ul.sub-menu::before, .main-nav ul li.has-submenu:focus-within ul.sub-menu::before { content: ""; display: block; position: absolute; top: -50px; left: 0; min-width: 230px; height: 50px; } .main-nav ul li.has-submenu ul.sub-menu li a { display: flex; align-items: center; gap: 15px; color: var(--black); text-decoration: none; transition: var(--transition); } .main-nav ul li.has-submenu ul.sub-menu li a svg { margin-bottom: 2px; } .main-nav ul li.has-submenu ul.sub-menu li a:hover, .main-nav ul li.has-submenu ul.sub-menu li a:focus-visible { color: var(--royal-purple); } .main-nav ul li.has-submenu ul.sub-menu li a img.sublink-icon, .main-nav ul li.has-submenu ul.sub-menu li a img.sublink-icon-hover { transition: var(--transition); margin-bottom: 2px; } .main-nav ul li.has-submenu ul.sub-menu li a .sublink-icon { display: block; } .main-nav ul li.has-submenu ul.sub-menu li a:hover .sublink-icon { display: none; } .main-nav ul li.has-submenu ul.sub-menu li a .sublink-icon-hover { display: none; } .main-nav ul li.has-submenu ul.sub-menu li a:hover .sublink-icon-hover { display: block; } /* mobile nav */ .mobile-nav { padding-bottom: 75px; padding-left: 16px; padding-right: 16px; } .mobile-nav .btn { margin-top: 35px; } .mobile-nav ul { list-style-type: none; margin: 0; padding: 0; } .mobile-nav ul li { padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(149, 70, 219, 0.2); } .mobile-nav ul li:last-of-type { border-bottom: none; } .mobile-nav ul li a { display: flex; align-items: center; justify-content: space-between; color: var(--black); text-decoration: none; } .mobile-nav ul li a span.nav-dropdown-mobile { display: flex; justify-content: flex-end; max-width: 25%; width: 100%; } .mobile-nav ul li.has-submenu.active .sub-menu { display: flex; flex-direction: column; } .mobile-nav ul li ul.sub-menu li { border-bottom: none; padding-top: 12.5px; padding-bottom: 12.5px; } .mobile-nav ul li.has-submenu.active > a { color: var(--royal-purple); } .mobile-nav ul li.has-submenu.active > a .nav-dropdown-mobile svg { transform: rotate(180deg); } .mobile-nav ul li.has-submenu.active > a .nav-dropdown-mobile svg path { stroke: var(--royal-purple); } .mobile-nav ul li.has-submenu .sub-menu li a { display: flex; gap: 10px; align-items: center; justify-content: flex-start; } /* Modules */ .contact__header, .contact__body { position: relative; max-width: 100%; width: 100%; overflow: hidden; } .contact__header { min-height: 225px; border-radius: 30px 30px 0 0; } .contact__header .image-wrapper { position: relative; display: flex; height: 100%; width: 100%; } .contact__body { padding: 40px 13px 65px 13px; border-radius: 0 0 30px 30px; } .contact__body .content-wrapper { position: relative; z-index: 4; padding: 0; margin: 0; } @media only screen and (min-width: 768px) { .contact .wrapper { flex-direction: row; } .contact__header, .contact__body { max-width: 50%; } .contact__header { border-radius: 30px 0 0 30px; } .contact__body { padding: 80px 30px; border-radius: 0 30px 30px 0; } } @media only screen and (min-width: 1200px) { .contact__body { padding: 130px 120px; } } /* modifiers */ @media only screen and (min-width: 768px) { .contact--reversed .wrapper { flex-direction: row-reverse; } .contact--reversed .contact__header { border-radius: 0 30px 30px 0; } .contact--reversed .contact__body { border-radius: 30px 0 0 30px; } } .text.text--70-30 .wrapper, .text.text--30-70 .wrapper, .text.text--50-50 .wrapper { display: flex; flex-direction: column; gap: 20px; } @media only screen and (min-width: 768px) { .text.text--50-50 .wrapper { flex-direction: row; gap: 50px; } .text.text--70-30 .wrapper, .text.text--30-70 .wrapper { flex-direction: row; gap: 90px; } .text.text--70-30 .text__body { max-width: 35%; width: 100%; } .text.text--30-70 .text__header { max-width: 35%; width: 100%; } .text.text--50-50 .text__header, .text.text--50-50 .text__body { max-width: 50%; width: 100%; } } .cards .cards__header { margin-bottom: 45px; } .cards .cards__body { gap: 60px; } .card .card__header { height: 260px; border-radius: 30px; overflow: hidden; margin-bottom: 20px; } .card .card__header .image-wrapper { height: 100%; } @media only screen and (min-width: 768px) { .cards .cards__header { margin-bottom: 75px; } .cards .cards__body { gap: 50px; } } /* modifier */ .card.card--w-bg { padding: 40px 30px; background-color: var(--white); border-radius: 30px; overflow: hidden; } .card.card--centered { display: flex; flex-direction: column; justify-content: center; text-align: center; } .card.card--centered .card__header.logo { margin: 0 auto; } .card__header.logo, .card__header.icon { height: auto; display: flex; border-radius: 0; } .card__header.logo { max-width: 170px; } .card__header.icon { max-width: 55px; width: 100%; height: 55px; } .card__header.icon img, .card__header.logo img { width: 100%; height: auto; object-fit: contain; } .blog-cards .wrapper { gap: 60px; } .blog-cards__header { display: flex; flex-direction: column; gap: 20px; } @media only screen and (min-width: 768px) { .blog-cards__header { flex-direction: row; align-items: center; justify-content: space-between; } } .blog-cards .blog-card { display: flex; flex-direction: column; border-radius: 30px; overflow: hidden; background-color: var(--white); transition: var(--transition); } .blog-cards .blog-card:hover { box-shadow: 0px 9px 20px 0px rgba(69, 45, 121, 0.10), 0px 24px 50px 0px rgba(149, 70, 219, 0.20); } .blog-cards .blog-card .blog-card-image { position: relative; height: 275px; overflow: hidden; } .blog-cards .blog-card .blog-card-image img { transition: var(--transition); } .blog-cards .blog-card:hover .blog-card-image img { transform: scale(1.2); } @media screen and (prefers-reduced-motion: reduce) { .blog-cards .blog-card:hover .blog-card-image img { transform: none; } } .blog-cards .blog-card-readtime { position: absolute; right: 20px; bottom: 20px; margin-bottom: 0; color: var(--white); padding: 3px 10px; background-color: rgba(0, 0, 0, 0.40); border-radius: 50px; } .blog-cards .blog-card .blog-card-content { padding: 30px; } .blog-cards .blog-card .blog-card-content a.h4 { color: var(--black); display: block; margin-bottom: 20px; } .subscription .wrapper .content { display: flex; position: relative; flex-direction: column; gap: 10px; border-radius: 30px; overflow: hidden; padding: 45px 16px; } .subscription .wrapper .content .bg-graphic { top: 0; justify-content: flex-end; } .subscription .wrapper .content .bg-graphic img { max-width: 100%; } .subscription__header { position: relative; z-index: 4; } .subscription__body { position: relative; z-index: 4; width: 100%; } .subscription__body .legal-consent-container { margin-bottom: 1rem; } @media only screen and (min-width: 768px) { .subscription .wrapper .content { flex-direction: row; align-items: center; gap: 75px; } .subscription .wrapper .content { padding: 45px 16px; } .subscription__header { max-width: 40%; } .subscription .wrapper .content .bg-graphic img { max-width: 40%; } } @media only screen and (min-width: 1080px) { .subscription .wrapper .content{ gap: 120px; } .subscription .wrapper .content { padding: 95px 120px; } } .base.logo-slider { padding-left: 0; padding-right: 0; } .base.logo-slider .wrapper { max-width: 2000px; } .logo-slider__header { max-width: 1440px; margin: 0 auto; margin-bottom: 55px; padding-left: var(--base-padding); padding-right: var(--base-padding); } .logo-slider__body .logo { display: flex; align-items: center; } .logo-slider__body .logo img { width: 100%; object-fit: contain; aspect-ratio: 16/9; } .logo-slider__body .swiper-wrapper { transition-timing-function: linear; } /* logo wall */ .logo-wall .logo-wall__body { margin-top: 65px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; } .logo-wall .logo-wall__body .logo { display: flex; align-items: center; max-width: 150px; } .logo-wall .logo-wall__body .logo img { object-fit: contain; aspect-ratio: 4/3; width: 100%; height: auto; } @media only screen and (min-width: 600px) { .logo-wall .logo-wall__body { grid-template-columns: repeat(3, 1fr); gap: 80px; } } @media only screen and (min-width: 768px) { .logo-wall .logo-wall__body { grid-template-columns: repeat(4, 1fr); gap: 80px; } } @media only screen and (min-width: 1080px) { .logo-wall .logo-wall__body { grid-template-columns: repeat(5, 1fr); gap: 160px; } } .txt-media .wrapper { gap: 40px; flex-direction: column-reverse; } .txt-media__header, .txt-media__body { width: 100%; } .txt-media__header { position: relative; } .txt-media__body p:last-of-type { margin-bottom: 0; } .txt-media__header .media-wrapper { position: relative; z-index: 4; border-radius: 15px; overflow: hidden; } .txt-media__header.shadow .media-wrapper { box-shadow: 0px 3.064px 12.257px 0px rgba(69, 45, 121, 0.10); } @media only screen and (min-width: 768px) { .txt-media .wrapper { flex-direction: row; gap: 90px; align-items: center; } .txt-media__header, .txt-media__body { max-width: 50%; } .txt-media__header .media-wrapper { border-radius: 30px; } } /* shadows */ .txt-media__header.shadow::after { content: ""; max-width: 502px; width: 100%; height: 218px; position: absolute; z-index: 2; bottom: -55px; left: 50%; transform: translateX(-50%); border-radius: 92.5px; opacity: 0.2; background: var(--royal-purple); filter: blur(50px); } /* modifier */ @media only screen and (min-width: 768px) { .txt-media.txt-media--reversed .wrapper { flex-direction: row-reverse; } } .hero { position: relative; overflow: hidden; } .hero .bg-graphic { z-index: 1; bottom: 0; right: 0; left: auto; width: 100%; max-width: 950px; height: 1000px; } .hero .bg-graphic.big { max-width: 1550px; height: 100%; top: 0; bottom: auto; right: 0; } @media only screen and (min-width: 768px) { .hero .bg-graphic { bottom: 0; right: 0; left: auto; } } .hero .hero__header, .hero .hero__body { position: relative; z-index: 4; } .hero .hero__header { position: relative; z-index: 8; } /* modifiers */ .hero__header--sm { max-width: 500px; } .hero__header--md { max-width: 860px; } .hero__header--lg { max-width: 1080px; } .hero--text-image .wrapper { gap: 30px; } .hero--text-image .hero__header { width: 100%; } .hero__header--md { max-width: 860px; } .hero__header--lg { max-width: 1080px; } @media only screen and (min-width: 768px) { .hero--text-image .wrapper { flex-direction: row; align-items: center; gap: 90px; } .hero__header--text-image-sm { max-width: 520px; } .hero__header--text-image-md { max-width: 720px; } .hero__header--text-image-md + .hero__body.img-cover { width: 100%; max-width: 630px; } } .hero--text-image .hero__body.img-cover { flex-direction: column; } .hero--text-image .hero__body.img-cover img { border-radius: 30px; overflow: hidden; } /* some share */ .hero .hero__body .hero-some { display: flex; align-items: center; justify-content: flex-end; gap: 36px; margin-top: 10px; } .hero .hero__body .hero-some svg { width: 20px; height: 20px; } .hero .hero__body .hero-some .subheading { margin-bottom: 0; } .hero .hero__body .hero-some a { display: flex; } @media only screen and (min-width: 768px) { .hero .hero__body .hero-some svg { width: 30px; height: 30px; } } .hero-slider { position: relative; overflow: clip; } .hero-slider .bg-graphic.big { top: 0; left: auto; right: -100px; max-width: 1440px; } .hero-slider .bg-graphic.big img { object-fit: contain; object-position: top; width: 100%; height: 100%; } .hero-slider .wrapper { flex-direction: column-reverse; padding-top: 140px; padding-bottom: 75px; } @media only screen and (min-width: 768px) { .hero-slider .bg-graphic.big { right: 0; } .hero-slider .wrapper { padding-top: 220px; padding-bottom: 0; } .hero-slider .bg-graphic.big img { object-fit: cover; } } .hero-slider__header { position: relative; z-index: 11; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; text-align: center; } .hero-slider__header .subheading, .hero-slider__header .title { display: none; } .hero-slider__body { position: relative; } .hero-slider .mobile-title { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; margin-bottom: 30px; } @media only screen and (min-width: 1080px) { .hero-slider .wrapper { flex-direction: row; align-items: center; gap: 40px; } .hero-slider__header { display: block; text-align: initial; } .hero-slider__header .subheading, .hero-slider__header .title { display: block; } .hero-slider__body { max-width: 60% } .hero-slider .mobile-title { display: none; } } .hero-slider__body .swiper { max-width: 1050px; padding-bottom: 70px; /* off set for dot pagination */ } @media only screen and (min-width: 768px) { .hero-slider__body .swiper { padding-bottom: 140px; /* off set for dot pagination */ } } .hero-slider__body .hero-slide { display: flex; align-items: center; position: relative; padding-right: 15px; padding-left: 15px; height: auto; } @media only screen and (min-width: 600px) { .hero-slider__body .hero-slide{ padding-right: 60px; padding-left: 60px; } } @media only screen and (min-width: 1080px) { .hero-slider__body .swiper { width: 55vw; } } @media only screen and (min-width: 1200px) { .hero-slider__body .hero-slide { padding-right: 120px; padding-left: 120px; } } .hero-slider__body .hero-slide-image { position: relative; } .hero-slider__body .hero-slide-image.shadow::after { content: ""; max-width: 80%; width: 100%; height: 130px; position: absolute; z-index: 2; bottom: 0px; left: 50%; transform: translateX(-50%); border-radius: 206px; opacity: 0.3; background: var(--royal-purple); filter: blur(50px); } @media only screen and (min-width: 768px) { .hero-slider__body .hero-slide-image.shadow::after { height: 450px; bottom: -55px; } } .hero-slider__body .hero-slide-image img { position: relative; z-index: 3; border-radius: 30px; overflow: clip; } .hero-slider__body .hero-slide-image.img-contain img { width: 100%; height: auto; object-fit: contain; } .hero-slide-box { position: absolute; z-index: 5; max-width: 240px; padding: 15px 26px; border-radius: 10px; } .hero-slide-box .h6 { margin-bottom: 5px; } .hero-slide-box.bg-white { background-color: var(--white); color: var(--royal-purple); } .hero-slide-box.bg-purple { background-color: var(--bright-purple); color: var(--white); } .hero-slider__body .hero-slide-box-left { display: none; left: 0; bottom: 10%; } .hero-slider__body .hero-slide-box-right { right: 0; top: 10%; } @media only screen and (min-width: 600px) { .hero-slider__body .hero-slide-box-left { display: block; } } /* slider nav */ .hero-slider__body .swiper-button-prev, .hero-slider__body .swiper-button-next { overflow: hidden; display: flex; opacity: 0; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; background-color: var(--white); filter: drop-shadow(0px 5px 20px rgba(69, 45, 121, 0.10)); transition: var(--transition); } .hero-slider__body .swiper-button-prev.swiper-button-disabled, .hero-slider__body .swiper-button-next.swiper-button-disabled { opacity: 0; } .hero-slider__body .swiper-button-prev { left: -23px !important; } .hero-slider__body .swiper-button-next { right: -23px !important; } .hero-slider__body .swiper-button-prev svg, .hero-slider__body .swiper-button-next svg { width: 15px; height: 15px; } .hero-slider__body .swiper-button-prev svg { transform: rotate(180deg); } .hero-slider__body .swiper-button-prev svg path, .hero-slider__body .swiper-button-next svg path { fill: var(--royal-purple); } .hero-slider__body .swiper-button-prev::after, .hero-slider__body .swiper-button-next::after { content: none; display: none; } .hero-slider__body .swiper-pagination { display: flex; align-items: center; justify-content: center; gap: 25px; } .hero-slider__body .swiper-pagination .swiper-pagination-bullet { position: relative; margin: 0 !important; padding: 0 !important; } .hero-slider__body .swiper-pagination-clickable { top: auto !important; bottom: 30px !important; } @media only screen and (min-width: 768px) { .hero-slider__body .swiper-pagination-clickable { bottom: 100px !important; } } .hero-slider__body .swiper-pagination-clickable .swiper-pagination-bullet { transition: var(--transition); background-color: var(--mojo-purple); opacity: 1; } .hero-slider__body .swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 31px; border-radius: 6px; background-color: var(--bright-purple); } @media only screen and (min-width: 1080px) { .hero-slider__body .swiper-button-prev, .hero-slider__body .swiper-button-next { opacity: 0; } .hero-slider__body:hover .swiper-button-prev, .hero-slider__body:hover .swiper-button-next { opacity: 1; } .hero-slider__body:hover .swiper-button-prev.swiper-button-disabled, .hero-slider__body:hover .swiper-button-next.swiper-button-disabled, .hero-slider__body .swiper-button-prev.swiper-button-disabled, .hero-slider__body .swiper-button-next.swiper-button-disabled { opacity: 0; } .hero-slider__body .swiper-button-prev:hover, .hero-slider__body .swiper-button-next:hover { background-color: var(--royal-purple); box-shadow: 0px 9px 20px 0px rgba(69, 45, 121, 0.10), 0px 24px 50px 0px rgba(149, 70, 219, 0.20); } .hero-slider__body .swiper-button-prev:hover svg path, .hero-slider__body .swiper-button-next:hover svg path { fill: var(--white); } } @media only screen and (min-width: 1200px) { .hero-slider__body .swiper-button-prev, .hero-slider__body .swiper-button-next { width: 75px; height: 75px; } .hero-slider__body .swiper-button-prev { left: -40px !important; } .hero-slider__body .swiper-button-next { right: -40px !important; } .hero-slider__body .swiper-button-prev svg, .hero-slider__body .swiper-button-next svg { width: 30px; height: 30px; } } .hero-slider__body .swiper-slide { opacity: 0.2; transition: opacity 0.6s ease; } .hero-slider__body .swiper-slide-active { opacity: 1; transition: opacity 0.6s ease; } .hero-form { position: relative; overflow: hidden; } .hero-form .bg-graphic { z-index: 1; bottom: 0; right: 0; left: auto; width: 100%; max-width: 950px; height: 1000px; } .hero-form .bg-graphic.big { max-width: 1550px; top: auto; } .hero-form .bg-graphic.img-cover img { object-fit: cover; } @media only screen and (min-width: 768px) { .hero-form .bg-graphic { bottom: 0; right: 0; left: auto; } } .hero-form .wrapper { gap: 40px; flex-direction: column; } .hero-form__header, .hero-form__body { position: relative; z-index: 3; width: 100%; } @media only screen and (min-width: 768px) { .hero-form .wrapper { flex-direction: row; gap: 90px; align-items: center; } .hero-form__body { max-width: 550px; } } .hero-form__header.content--white { color: var(--white); } .hero-form__header.content--white a { color: var(--white); } .hero-form__header.content--white a:hover { color: var(--white); } .hero-form .hero-form-addresses { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 45px; } .hero-form .hero-form-addresses .hero-form-address { width: 100%; } .hero-form .hero-form-addresses .hero-form-address a { display: flex; align-items: center; gap: 10px; } @media only screen and (min-width: 600px) { .hero-form .hero-form-addresses .hero-form-address { max-width: 45%; } } .hero-form__body { position: relative; } .hero-form__body .form-wrapper { position: relative; z-index: 4; padding: 40px; padding-bottom: 50px; border-radius: 30px; overflow: hidden; background-color: var(--white); } .hero-form__body .form-title { text-align: center; margin-bottom: 20px; } @media only screen and (min-width: 600px) { .hero-form__body .form-wrapper.form-button .hs_submit.hs-submit { display: flex; justify-content: flex-end; } } /* shadow */ .hero-form__body.shadow::after { content: ""; max-width: 502px; width: 100%; height: 218px; position: absolute; z-index: -1; bottom: -55px; left: 50%; transform: translateX(-50%); border-radius: 92.5px; opacity: 0.2; background: var(--royal-purple); filter: blur(50px); } .faq .wrapper { gap: 20px; flex-direction: column; } .faq__header, .faq__body { width: 100%; } @media only screen and (min-width: 768px) { .faq .wrapper { flex-direction: row; gap: 150px; } .faq__header, .faq__body { max-width: 50%; } } .faq__body { display: flex; flex-direction: column; gap: 20px; } .faq-item { padding: 20px; border-radius: 20px; border: 1px solid rgba(149, 70, 219, 0.10); background-color: transparent; transition: var(--transition); background-color: var(--white); } .faq-item .faq-item__header { display: flex; justify-content: space-between; gap: 40px; cursor: pointer; } .faq-item .faq-item__header:focus-visible { border: none; outline: none; } .faq-item .faq-item__header:focus-visible .faq-readmore { border: 1px solid blue; } .faq-item .faq-item__header .h4 { margin-bottom: 0; } .faq-readmore { position: relative; max-width: 28px; width: 100%; height: 28px; } .faq-readmore::before, .faq-readmore::after { content: ""; position: absolute; top: 0; left: 16px; width: 5px; height: 28px; background-color: #FF0998; transition: var(--transition); } @media only screen and (min-width: 768px) { .faq-readmore { max-width: 38px; height: 38px; } .faq-readmore::before, .faq-readmore::after { height: 37px; } } .faq-readmore::before { transform: rotate(90deg); } .faq-item.active { box-shadow: 0px 9px 20px 0px rgba(69, 45, 121, 0.10), 0px 24px 50px 0px rgba(149, 70, 219, 0.20); } .faq-item.active .faq-readmore::after { transform: rotate(90deg); } .faq-item__body { overflow: hidden; height: 0; transition: height 0.3s ease; } .faq-item__body .faq-item-content { padding-top: 20px; } .quote-slider__header { margin-bottom: 45px; } @media only screen and (min-width: 768px) { .quote-slider__header { margin-bottom: 60px; } } .quote-slider__body .quote-slide { display: grid; grid-template-columns: 1fr } .quote-slider__body .quote-slide .quote-slide__header, .quote-slider__body .quote-slide .quote-slide__body { position: relative; max-width: 100%; width: 100%; overflow: hidden; } .quote-slider__body .quote-slide .quote-slide__header { display: flex; flex-direction: column; gap: 40px; align-items: center; justify-content: center; text-align: center; width: 100%; padding: 70px 55px; color: var(--white); border-radius: 0 0 30px 30px; order: 2; } .quote-slide__header img { max-width: 150px; } .quote-slide__header .quote { font-size: 1.563rem; font-style: normal; font-weight: 600; line-height: 130%; } .quote-slide__header .author .subheading { margin-bottom: 10px; } .quote-slider__body .quote-slide .quote-slide__body { width: 100%; border-radius: 30px 30px 0 0; order: 1; max-height: 280px; } @media only screen and (min-width: 768px) { .quote-slider__body .quote-slide { display: grid; grid-template-columns: 60% 40%; } .quote-slider__body .quote-slide .quote-slide__header { border-radius: 30px 0 0 30px; order: 1; } .quote-slide__header .quote { font-size: 2.375rem; } .quote-slider__body .quote-slide .quote-slide__body { order: 2; border-radius: 0 30px 30px 0; max-height: 100%; } } /* slider nav */ @media only screen and (min-width: 992px) { .quote-slider__body:hover .swiper-button-prev, .quote-slider__body:hover .swiper-button-next { opacity: 1; } } .quote-slider__body .swiper-button-prev, .quote-slider__body .swiper-button-next { overflow: hidden; display: flex; opacity: 1; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; background-color: var(--white); filter: drop-shadow(0px 5px 20px rgba(69, 45, 121, 0.10)); transition: var(--transition); } .quote-slider__body .swiper-button-prev { left: -10px !important; } .quote-slider__body .swiper-button-next { right: -10px !important; } @media only screen and (min-width: 992px) { .quote-slider__body .swiper-button-prev, .quote-slider__body .swiper-button-next { opacity: 0; } } @media only screen and (min-width: 1200px) { .quote-slider__body .swiper-button-prev, .quote-slider__body .swiper-button-next { width: 75px; height: 75px; } .quote-slider__body .swiper-button-prev { left: -10px !important; } .quote-slider__body .swiper-button-next { right: -10px !important; } } @media only screen and (min-width: 1680px) { .quote-slider__body .swiper-button-prev { left: -38px !important; } .quote-slider__body .swiper-button-next { right: -38px !important; } } .quote-slider__body .swiper-button-prev:hover, .quote-slider__body .swiper-button-next:hover { background-color: var(--royal-purple); box-shadow: 0px 9px 20px 0px rgba(69, 45, 121, 0.10), 0px 24px 50px 0px rgba(149, 70, 219, 0.20); } .quote-slider__body .swiper-button-prev svg, .quote-slider__body .swiper-button-next svg { width: 15px; height: 15px; } @media only screen and (min-width: 1200px) { .quote-slider__body .swiper-button-prev svg, .quote-slider__body .swiper-button-next svg { width: 30px; height: 30px; } } .quote-slider__body .swiper-button-prev svg { transform: rotate(180deg); } .quote-slider__body .swiper-button-prev svg path, .quote-slider__body .swiper-button-next svg path { fill: var(--royal-purple); } .quote-slider__body .swiper-button-prev:hover svg path, .quote-slider__body .swiper-button-next:hover svg path { fill: var(--white); } .quote-slider__body .swiper-button-prev::after, .quote-slider__body .swiper-button-next::after { content: none; display: none; } .quote-slider__body .swiper-pagination-clickable { top: auto !important; bottom: -40px !important; } .quote-slider__body .swiper-pagination-clickable .swiper-pagination-bullet { transition: var(--transition); background-color: var(--mojo-purple); opacity: 1; } .quote-slider__body .swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active { width: 31px; border-radius: 6px; background-color: var(--bright-purple); } .team-slider { padding-right: 0; overflow: hidden; } @media only screen and (min-width: 992px) { .team-slider .wrapper { display: grid; grid-template-columns: 30% 70%; gap: 35px; } } @media only screen and (min-width: 1440px) { .team-slider .wrapper { grid-template-columns: 30% 72%; gap: 95px; } } @media only screen and (min-width: 1680px) { .team-slider .wrapper { position: relative; } } .team-slider__header { padding-right: var(--base-padding); margin-bottom: 45px; } .team-slider { position: relative; } @media only screen and (min-width: 992px) { .team-slider .swiper { padding-right: 130px; } .team-slider__header { margin-bottom: 0; } } .team-slide { position: relative; } .team-slide::after { content: ""; max-width: 300px; width: 100%; height: 135px; position: absolute; z-index: 2; bottom: 105px; left: 50%; transform: translateX(-50%); border-radius: 92.5px; opacity: 0.2; background: var(--royal-purple); filter: blur(50px); } .team-slide .content-wrapper { display: flex; flex-direction: column; align-items: center; gap: 20px; position: relative; z-index: 8; padding: 40px 50px; border-radius: 30px; background: var(--white); overflow: hidden; } .team-slide .team-member-image { border-radius: 50%; overflow: hidden; max-width: 145px; width: 100%; height: 145px; } .team-slide .team-member-name { text-align: center; } .team-slide .team-member-name .h5 { margin-bottom: 10px; } .team-slide .team-member-link a { display: flex; gap: 10px; align-items: center; text-decoration: none; font-size: 13px; font-weight: 600; line-height: 150%; } .team-slide .team-member-link a:hover { text-decoration: none; } /* slider nav */ @media only screen and (min-width: 992px) { .team-slider:hover .swiper-button-next { opacity: 1; } } .team-slider .swiper-button-next { overflow: hidden; display: flex; opacity: 1; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; background-color: var(--white); filter: drop-shadow(0px 5px 20px rgba(69, 45, 121, 0.10)); transition: var(--transition); right: 2%; } @media only screen and (min-width: 992px) { .team-slider .swiper-button-next { opacity: 0; } } @media only screen and (min-width: 1200px) { .team-slider .swiper-button-prev, .team-slider .swiper-button-next { width: 75px; height: 75px; } } @media only screen and (min-width: 1680px) { .team-slider .wrapper .swiper-button-next { right: -55px; } } .team-slider .swiper-button-next:hover { background-color: var(--royal-purple); box-shadow: 0px 9px 20px 0px rgba(69, 45, 121, 0.10), 0px 24px 50px 0px rgba(149, 70, 219, 0.20); } .team-slider .swiper-button-next svg { width: 15px; height: 15px; } @media only screen and (min-width: 1200px) { .team-slider .swiper-button-next svg { width: 30px; height: 30px; } } .team-slider .swiper-button-next svg path { fill: var(--royal-purple); } .team-slider .swiper-button-next:hover svg path { fill: var(--white); } .team-slider .swiper-button-prev::after, .team-slider .swiper-button-next::after { content: none; display: none; } .video .wrapper { border-radius: 30px; overflow: hidden; } .video .wrapper .video-thumbnail { display: block; } .video .wrapper .video-thumbnail .bg-image-container.object-cover { height: 100%; } .video .wrapper .video-thumbnail .bg-image-container.object-cover img { width: 100%; height: 100%; object-fit: cover; } .timeline .wrapper { max-width: 1080px; margin: 0 auto; } .timeline__header { margin-bottom: 35px; } .timeline__body { display: flex; flex-direction: column; align-items: center; } .timeline-nav { display: inline-flex; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 45px; border-bottom: 1px solid var(--bright-purple); } .timeline-item { position: relative; appearance: none; outline: none; border: none; background-color: transparent; padding-bottom: 10px; cursor: pointer; } .timeline-item:focus-visible { border: 1px solid var(--mojo-purple); } .timeline-item.is-active { font-weight: 600; color:var(--mojo-purple); } .timeline-item.is-active::after { content: ""; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 2px; background-color:var(--mojo-purple); } .timeline-panel { display: none; align-items: center; gap: 35px; } .timeline-panel.is-active { display: flex; flex-direction: column; } .timeline-text { width: 100%; } .timeline-image { border-radius: 30px; overflow: hidden; } @media only screen and (min-width: 768px) { .timeline__header { margin-bottom: 65px; } .timeline-nav { gap: 60px; margin-bottom: 100px; } .timeline-item { padding-bottom: 25px; } .timeline-panel { gap: 70px; } .timeline-panel.is-active { flex-direction: row; } .timeline-text { max-width: 50%; } } .case-study-facts-wrapper { padding: 35px 30px; border-radius: 30px; display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; } @media only screen and (min-width: 768px) { .case-study-facts-wrapper { padding: 55px 50px; border-radius: 30px; gap: 40px; } .fact-1 { max-width: 25%; width: 100%; } } @media only screen and (min-width: 1080px) { .case-study-facts-wrapper { padding: 75px 70px; flex-wrap: nowrap; } } .case-study-facts-wrapper .fact .title h1, .case-study-facts-wrapper .fact .title h2, .case-study-facts-wrapper .fact .title h3, .case-study-facts-wrapper .fact .title h4, .case-study-facts-wrapper .fact .title h5, .case-study-facts-wrapper .fact .title h6 { color: var(--green); } .single-quote__header { padding-left: 20px; padding-right: 20px; border-left: 4px solid var(--royal-purple); max-width: 1080px; } .single-quote__header blockquote { color: var(--royal-purple); margin-bottom: 30px; } .single-quote__header .subheading { margin-bottom: 0; } @media only screen and (min-width: 768px) { .single-quote__header { padding-left: 40px; padding-right: 40px; } } .numbers__header { margin-bottom: 60px; max-width: 960px; } .numbers__header.centered-content { margin: 0 auto; text-align: center; } .numbers__body.grid.grid-3 { gap: 60px; } .number-wrapper { display: inline-flex; align-items: baseline; gap: 0.2em; } .numbers__body .number-item .number-wrapper span.number, .numbers__body .number-item .number-wrapper span.suffix { font-size: 6.25rem; font-style: normal; font-weight: 500; line-height: 150%; color: var(--green); } @media only screen and (min-width: 768px) { .numbers__body .number-item .number-wrapper span.number, .numbers__body .number-item .number-wrapper span.suffix { font-size: 8.125rem; } .numbers__body.grid.grid-3 { gap: 120px; } } /* Counter specific */ .counter .number { display: flex; position: relative; overflow: hidden; height: 130px; } .counter .number-strip { display: block; transition: transform 1s ease-out; } .counter .number-strip div { height: 1em; line-height: 1em; } .counter .number-strip div.green { color: var(--green) !important; } @media only screen and (min-width: 768px) { .counter .number { display: flex; position: relative; overflow: hidden; height: 165px; } } .slider-tabber { overflow: hidden; } .slider-tabber__header { max-width: 960px; margin: 0 auto; margin-bottom: 35px; } .slider-tabber__body { display: flex; flex-direction: column; align-items: center; } .slider-tabber-nav { display: none; justify-content: center; flex-wrap: wrap; gap: 20px; margin-bottom: 45px; border-bottom: 1px solid var(--bright-purple); } .slider-tabber-item { position: relative; appearance: none; outline: none; border: none; background-color: transparent; cursor: pointer; padding-left: 0; } .slider-tabber-item:focus-visible { border: 1px solid blue; } .slider-tabber-item.is-active { font-weight: 600; color:var(--mojo-purple); } .slider-tabber-text { width: 100%; } .slider-tabber-image { border-radius: 30px; overflow: hidden; } @media only screen and (min-width: 768px) { .slider-tabber__header { margin-bottom: 65px; } .slider-tabber-nav { gap: 60px; margin-bottom: 100px; } .slider-tabber-item { padding-bottom: 25px; } .slider-tabber-panel { gap: 70px; } .slider-tabber-panel.is-active { flex-direction: row; } .slider-tabber-text { max-width: 50%; } .slider-tabber-item { padding-bottom: 10px; } .slider-tabber-item.is-active::after { content: ""; position: absolute; left: 0; bottom: 0; display: block; width: 100%; height: 2px; background-color:var(--mojo-purple); } } /* tabber nav mobile */ .slider-tabber-nav-mobile { width: 100%; border-bottom: 1px solid var(--bright-purple); padding-bottom: 20px; padding-top: 20px; } .slider-tabber-nav-mobile .slider-tabber-item { display: flex; align-items: center; justify-content: space-between; width: 100%; } .slider-tabber-nav-mobile .slider-tabber-item svg { transform: rotate(180deg); } .slider-tabber-item.is-active svg { transform: rotate(0deg); } @media only screen and (min-width: 768px) { .slider-tabber-nav { display: inline-flex; } .slider-tabber-nav-mobile { display: none; } } /* slider */ .slider-tab-content__header { padding-bottom: 50px; } @media only screen and (min-width: 768px) { .slider-tab-content__header { padding-bottom: 100px; } } .slider-tab-slider { width: 100%; position: relative; min-height: 260px; } .slider-tab-slider .swiper { position: absolute; top: 0; left: 0; width: 100vw; height: 250px; max-width: 1050px; } .slider-tabber .slider-tab-content { position: relative; gap: 35px; display: none; gap: 55px; padding-right: 0; padding-top: 45px; } .slider-tabber .slider-tab-content.is-active { display: flex; flex-direction: column-reverse; } .slider-tabber-image { height: 250px; } .slider-tabber-image.img-cover img { height: auto; } .slider-tab-slider .slider-tab-slide { border-radius: 30px; overflow: hidden; } @media only screen and (min-width: 768px) { .slider-tab-slider .swiper { width: 70vw; min-height: 420px; } .slider-tabber .slider-tab-content { gap: 70px; padding-top: 0; } .slider-tabber .slider-tab-content.is-active { flex-direction: row; } .slider-tab-content__header { max-width: 30%; } .slider-tabber-image { min-height: 420px; height: auto; } } /* slider nav */ @media only screen and (min-width: 992px) { .slider-tabber:hover .swiper-button-next, .slider-tabber:hover .swiper-button-prev { opacity: 1; } } .slider-tabber .swiper-button-next, .slider-tabber .swiper-button-prev { overflow: hidden; display: flex; opacity: 1; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; background-color: var(--white); filter: drop-shadow(0px 5px 20px rgba(69, 45, 121, 0.10)); transition: var(--transition); top: 50%; transform: translateY(-50%); } .slider-tabber .swiper-button-next { right: 0; } .slider-tabber .swiper-button-prev { left: 0; } @media only screen and (min-width: 768px) { .slider-tabber .swiper-button-next { right: 0; } .slider-tabber .swiper-button-prev { left: -21px; } } @media only screen and (min-width: 992px) { .slider-tabber .swiper-button-next, .slider-tabber .swiper-button-prev { opacity: 0; } } @media only screen and (min-width: 1200px) { .slider-tabber .swiper-button-prev, .slider-tabber .swiper-button-next { width: 75px; height: 75px; } } @media only screen and (min-width: 1440px) { .slider-tabber .swiper-button-next { right: 0px; } .slider-tabber .swiper-button-prev { left: -37px; } } .slider-tabber .swiper-button-next:hover, .slider-tabber .swiper-button-prev:hover { background-color: var(--royal-purple); box-shadow: 0px 9px 20px 0px rgba(69, 45, 121, 0.10), 0px 24px 50px 0px rgba(149, 70, 219, 0.20); } .slider-tabber .swiper-button-next svg, .slider-tabber .swiper-button-prev svg { width: 15px; height: 15px; } @media only screen and (min-width: 1200px) { .slider-tabber .swiper-button-next svg, .slider-tabber .swiper-button-prev svg { width: 30px; height: 30px; } } .slider-tabber .swiper-button-prev svg { transform: rotate(180deg); } .slider-tabber .swiper-button-next svg path, .slider-tabber .swiper-button-prev svg path { fill: var(--royal-purple); } .slider-tabber .swiper-button-next:hover svg path, .slider-tabber .swiper-button-prev:hover svg path { fill: var(--white); } .slider-tabber .swiper-button-prev::after, .slider-tabber .swiper-button-next::after { content: none; display: none; } .sticky-content { overflow: clip; } .sticky-content__header { position: relative; } .sticky-content__header .bg-element { position: absolute; top: -100px; left: -20px; height: auto; max-width: 100%; overflow: clip; } .sticky-content__header .image.shadow { position: relative; box-shadow: 0px 3.064px 12.257px 0px rgba(69, 45, 121, 0.10); border-radius: 15px; } .sticky-content .images-wrapper { display: none; } .sticky-content__header .image .image-wrapper { position: relative; z-index: 3; } .sticky-content__body { position: relative; } .sticky-content__body .content-wrapper { position: sticky; top: 280px; right: 0; padding-bottom: 100px; padding: 0; } .sticky-content .image-slider, .sticky-content .swiper-button-next { display: block; } .sticky-content .image-slider { margin-bottom: 70px; } .sticky-content__header .bg-element { position: absolute; top: -80px; left: -20px; height: 100%; max-width: 100vw; width: 100%; overflow: visible; } @media only screen and (max-width: 767px) { .sticky-content__header .bg-element .bg-wrapper img { object-fit: contain; height: 330px; width: 100%; } } @media only screen and (min-width: 768px) { .sticky-content__header { max-width: 50%; width: 100%; } .sticky-content__header .image .image-wrapper { border-radius: 30px; overflow: hidden; } .sticky-content__header .image.shadow { border-radius: 30px; } .sticky-content .wrapper { flex-direction: row; gap: 90px; } .sticky-content .images-wrapper { display: flex; flex-direction: column; gap: 150px; width: 100%; } .sticky-content .image-slider, .sticky-content .swiper-button-next { display: none; } .sticky-content__header .bg-element { position: absolute; top: 120px; left: -20%; } .sticky-content__header .bg-element .bg-wrapper { position: sticky; top: 0; } } /* shadows */ .sticky-content__header .image.shadow::after { content: ""; max-width: 502px; width: 100%; height: 218px; position: absolute; z-index: 2; bottom: -55px; left: 50%; transform: translateX(-50%); border-radius: 92.5px; opacity: 0.2; background: var(--royal-purple); filter: blur(50px); } /* slider */ .sticky-content .image-slider .swiper { width: 100vw; } .sticky-content .image-slider .swiper-slide { height: auto; box-shadow: 0px 3.064px 12.257px 0px rgba(69, 45, 121, 0.10); } .sticky-content .image-slider .image.shadow { height: 100%; border-radius: 15px; overflow: hidden; } /* slider nav */ .sticky-content .swiper-button-next { overflow: hidden; display: flex; opacity: 1; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; background-color: var(--white); filter: drop-shadow(0px 5px 20px rgba(69, 45, 121, 0.10)); transition: var(--transition); right: 0; } .sticky-content .swiper-button-next svg { width: 15px; height: 15px; } .sticky-content .swiper-button-next svg path { fill: var(--royal-purple); } .sticky-content .swiper-button-next::after { content: none; display: none; }