:root { --main-color: #201678; --secondary-color: #736DA6; --accent-1: #3CB9B6; --accent-2: #E91D60; --bg-light: #F3F2FC; --dark-text: #201678; } #div1 { background-color: var(--main-bg-color); } *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; font-family: sofia-pro, sans-serif; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } sup { font-size: 12px; vertical-align: super; } a.citation { color: var(--accent-1); font-size: 12px; display: block; margin-top: 10px; } h1 { font-size: 63px; font-weight: bold; color: var(--main-color); line-height: 76px; } strong { font-weight: bold; } .accent-1-text { color: var(--accent-1); } .accent-2-text { color: var(--accent-2); } .logo { display: flex; align-content: center; } .logo img { width: 100%; max-width: 200px } .outer-wrapper.header .inner-wrapper>*+* { margin-left: 50px; } .banner-text-wrapper { display: flex; position: relative; z-index: 6; background: #F8F8F8; mix-blend-mode: multiply; } .banner-text-heading h1+p { font-size: 27px; color: var(--main-color); position: relative; z-index: 99999999999; margin-top: 20px; } img.banner-decoration { position: absolute; left: -200px; bottom: -70px; z-index: 5; width: 420px; } .banner-image-wrapper { width: 100%; position: relative } .banner-image { padding: 2rem; text-align: center; } .banner-text { width: 100%; max-width: 1100px; display: grid; margin: auto; justify-items: center; } .banner-text-heading { max-width: 700px; padding: 1rem; } .banner-cta-wrapper { width: 700px; padding: 1rem; max-width: 100%; color: var(--main-color); margin-top: 3rem; } .banner-cta-icon-wrapper { display: flex; gap: 20px; margin-top: 20px; flex-wrap: wrap; } a.banner-cta-item img { height: 40px; } a.banner-cta-item { padding: 1rem; border-radius: 6px; position: relative; cursor: pointer; transition: all 0.2s linear; } a.banner-cta-item:hover { background: #ECECEC; transition: all 0.2s linear; } a.banner-cta-item:hover::after { content: url("../svg/Icon-check.svg"); position: absolute; top: 5px; right: 5px; transition: all 0.2s linear; } .banner-cta-wrapper>p { font-size: 22px; } .banner-table-savings { position: absolute; bottom: 80px; left: -80px; border-radius: 10px; box-shadow: 0 0 30px rgb(0 0 0 / 30%); animation: pulse-top-bottom 5s infinite ease-in; } @keyframes pulse-top-bottom { 0% { transform: translateY(0); } 50% { transform: translateY(35px); } 100% { transform: translateY(0); } } .header-banner-text { display: flex; align-items: center; max-height: 100px; justify-content: space-between; width: 100%; max-width: 1100px; } .header-banner-image { width: 100%; height: 100px; background: var(--main-color); display: flex; align-items: center; } .hero-section { position: relative; background: #fff; } .inner-wrapper { max-width: 1600px; margin: 0 auto } .outer-wrapper.header .inner-wrapper { display: flex; padding: 1rem; justify-content: space-between; } ul.header-text-nav, .footer-nav ul { display: flex; align-items: center; justify-content: center; } .header-text-nav-wrapper { display: flex; align-items: center; } ul.header-text-nav li a { padding: 2rem; color: var(--main-color); font-size: 18px; } .main-color-bg { background: var(--main-color) } .white-text { color: #fff !important } .banner { display: grid; grid-template-columns: 6fr 4fr; } .banner-image img { max-width: 550px; } .banner-image { background: var(--main-color); } .banner-image { padding: 100px 0 100px 0; } .outer-wrapper.provider-wrapper { position: relative; z-index: 99999; background: #fff; } h2 { font-size: 40px; font-weight: bold; } .provider { background: var(--main-color); display: flex; padding: 0 2rem; border-radius: 10px; align-items: center; justify-content: space-around; transform: translateY(-20px); } .provider--text { color: #fff; } .provider--text p { font-size: 27px; } .provider--icons { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 20px; align-items: center; justify-items: center; padding: 1rem; } .outer-wrapper.how-it-works { display: grid; padding: 2rem 0 4rem 0; position: relative; overflow: hidden; background: url("assets/images/bg-hiw.png"); background-position: right; background-size: 10%; background-repeat: no-repeat; background-size: contain; } .how-it-works--heading { text-align: center; margin: 2rem 0; } .how-it-works--items-wrapper { display: grid; grid-template-columns: 1fr; justify-items: center; grid-gap: 60px; } .how-it-works-item { background: #F3F2FC; padding: 0 0 1rem 0; border-radius: 10px; transform: translateX(-150px); min-width: 320px; max-width: 480px; box-shadow: 0 3px 20px rgba(115, 109, 166, 0.11); position: relative; } .how-it-works-item:nth-child(2) { transform: translateX(100px); } .how-it-works-item:nth-child(3) { transform: translateX(-50px); } .how-it-works-item:nth-child(1):after { content: url("assets/svg/icon-hiw-1.svg"); position: absolute; top: -15px; right: -15px; } .how-it-works-item:nth-child(2):after { content: url("assets/svg/icon-hiw-2.svg"); position: absolute; top: -15px; right: -15px; } .how-it-works-item:nth-child(2):before { content: url("assets/svg/icon-hiw-connector.svg"); position: absolute; top: -15px; left: -185px; } .how-it-works-item:nth-child(3):after { content: url("assets/svg/icon-hiw-3.svg"); position: absolute; top: -15px; right: -15px; } .how-it-works-item:nth-child(3):before { content: url("assets/svg/icon-hiw-connector.svg"); position: absolute; top: -15px; right: -185px; transform: scaleX(-1); } .how-it-works-item p { transform: translateX(-20px); color: #736DA6; font-size: 22px; } .how-it-works--heading h2 { color: var(--main-color); } p.item-heading { font-size: 37px; color: var(--main-color); } .hiw-lottie { position: absolute; right: -600px; opacity: 0.1; } .hiw-lottie lottie-player { width: 200px !important; } .switch-supplier { display: flex; align-items: flex-start; justify-content: space-between; } .switch-supplier--cta-wrapper { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px 40px; margin-top: 4rem; } a.switch-supplier--cta { background: rgba(32, 22, 120, 0.08); padding: 1rem; border-radius: 10px; display: grid; gap: 20px; transition: all 0.2s linear; width: 100%; grid-template-columns: 44px 1fr; align-items: center; } a.switch-supplier--cta:hover { background: var(--main-color); transition: all 0.2s linear; } a.switch-supplier--cta:hover p { transition: all 0.2s linear; color: #fff; } a.switch-supplier--cta:hover .icon-ss { display: none } a.switch-supplier--cta:hover .icon-ss-hvr { display: block } a.switch-supplier--cta p { display: grid; text-transform: uppercase; font-size: 15px; color: rgba(32, 22, 120, 0.7); } span.ss-cta-heading { text-transform: none; font-size: 25px; } /*======== footer styles=========*/ .footer { background: var(--bg-light); width: 100%; } .footer .inner-wrapper { display: grid; } .footer-newsletter { text-align: center; max-width: 520px; margin: 3rem auto 0 auto; width: 100%; } .footer-disclaimer .policytext p a { display: inline-block; margin: 0 10px; } .newsletter-wrapper { border-radius: 20px; position: relative; padding: 1rem; display: flex; align-items: stretch; gap: 20px; } a.newsletter-cta { background: var(--main-color); display: flex; align-items: center; padding: 1rem 2rem; border-radius: 5px; color: #fff; text-align: center; justify-content: center; } a.newsletter-cta:hover { background: var(--accent-1); } .footer-newsletter h1 { font-size: 22px; margin: 0; line-height: normal; } .footer-logo { display: grid; justify-items: center; } .footer-nav { padding: 2rem 0; } .footer-logo img { margin: 0 auto; max-width: 300px; } .footer-nav ul { justify-content: center; margin: 2rem 0 0 0; gap: 30px; } .footer-nav ul a { font-size: 20px; font-weight: 500; letter-spacing: 2px; } .footer-disclaimer p { text-align: center; padding: 0 1rem 2rem; margin: 0; } /**************** ==================================== Form Page styles ================================ *****************/ .banner-form { background: #fff; width: 100%; max-width: 650px; margin: 0 auto; position: relative; z-index: 22; box-shadow: 0 3px 20px rgba(115, 109, 166, 0.11); border-radius: 10px; overflow: hidden; padding: 20px 0; } .form-page .banner-text { display: block; } .form-page .banner-text-wrapper { background: #3cb9b61c; padding: 2rem 10px; } .outer-wrapper.thank-you { min-height: 50vh; background: #3cb9b61c; display: grid; align-items: center; justify-content: center; padding: 1rem; } .thank-you-page .thank-you-wrapper { max-width: 600px; background: #fff; padding: 3rem; border-radius: 10px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.2); margin: 0 auto; position: relative; z-index: 9999; } .thank-you-wrapper h2 { font-size: 32px; margin-bottom: 10px; color: var(--main-color); } .form-progress-bar-wrapper { background: #f1f1f1; display: flex; max-width: 90%; margin: 20px auto 0 auto; /*=======Added margin top as heading is hidden=======*/ border-radius: 60px !important; } .form-progress-bar { padding: 2px 10px; background: #3cb9b6; display: inline-block; border-radius: 60px !important; font-size: 10px; width: 10%; -webkit-transition: width 1s ease-out; -moz-transition: width 1s ease-out; -o-transition: width 1s ease-out; transition: width 1s ease-out; } .form-progress { padding: 5px; display: inline-block; text-align: center; width: 100%; color: #fff; } /*===========Form Styles============*/ em.err { color: #e14a1c; margin: 3px 0 0 0; display: block; font-size: 14px; font-weight: bold; } h1.form-heading { font-size: 32px; line-height: 36px; text-align: center; padding: 1rem; } .text-center { text-align: center } .banner-form .steps { overflow: hidden; margin-top: 1rem; padding: 0 1rem; } .banner-form .steps .form-row:last-child { margin-bottom: 10px; } .secure-icon a { display: flex; align-items: flex-end; gap: 5px; justify-content: center; margin: 0rem 1rem 2rem; } .secure-icon p { text-align: center; margin: 0 0 1rem 0; font-size: 12px; } .secure-icon img { max-width: 100px } .banner-form h3 { font-size: 23px; color: var(--main-color); } /*label img { max-width: 30px !important; max-height: 30px !important; }*/ .form-input.radio-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } /*.radio-buttons p { flex: 1; margin: 0 20px; }*/ .form-row { margin: 20px 0; } .radio-buttons input { display: none; } .radio-buttons p label { border: 1px solid var(--main-color); color: var(--dark-text); cursor: pointer; position: relative; border-radius: 5px; transition: border-color 0.2s ease-in-out; } .radio-buttons input+label:hover, .radio-buttons input:checked+label { border-color: var(--accent-2); background-color: var(--light-bg); transition: border-color 0.2s ease-in-out; color: var(--accent-2); } .radio-buttons p label span { display: block; text-align: center; font-size: 16px; padding: 15px 5px; font-weight: 500; } .form-input.management-provider.radio-buttons, .form-input.type-of-service.radio-buttons, .form-input.start-service.radio-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); grid-gap: 20px; } .form-input.how-many-bags.radio-buttons, .form-input.how-often-bags.radio-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(185px, 1fr)); grid-gap: 20px; } .form-button { text-align: center } span.form-time img { width: 20px; } span.form-time { text-align: center; display:flex; font-size: 13px; padding: 5px 10px; border-radius: 5px; color: var(--accent-1); align-items: center; gap: 5px; width: 100%; justify-content: center; } span.highlight-text img { width: 20px; } span.highlight-text { background: #e8fdf0; display: inline-flex; font-size: 13px; padding: 5px 10px; border-radius: 5px; color: var(--accent-1); margin-bottom: 10px; line-height: 18px; align-items: center; gap: 7px; } button.form-submit-button { border: none; margin: 1.5rem auto 1rem auto; display: grid; padding: 1rem; border-radius: 10px; background: var(--main-color); ; color: #fff; font-size: 18px; width: 100%; max-width: 350px; cursor: pointer; transition: all 0.2s ease-in; } button.form-submit-button:hover, button.form-submit-button.green-button:hover { background: var(--dark-text); box-shadow: 0 0 50px rgb(255 230 54 / 30%); transition: all 0.2s ease-in; } button.form-submit-button.green-button { max-width: 350px; background: var(--accent-2); font-size: 22px; padding: 1.5rem 1rem; font-weight: bold; } .button-tagline { font-size: 16px; font-weight: 400; } p.privacy-policy-form { text-align: center; font-size: 12px; } .form-item.dob { display: flex; gap: 20px; max-width: 580px; margin: 0 auto; } .form-input { margin: 0 20px; } .form-item.dob .form-input.select-option, .form-item.name-title .form-input.select-option { margin: 0 2px; width: 100%; } .form-item.dob .form-input.select-option:first-child, .form-item.name-title .form-input.select-option:first-child { margin-left: 0; } .form-item.dob .form-input.select-option:last-child, .form-item.name-title .form-input.select-option:last-child { margin-right: 0; } .name-title { display: grid; max-width: 580px; margin: 0 auto; justify-content: space-between; grid-gap: 10px; grid-template-columns: 2fr 5fr; } label { color: var(--dark-text); font-size: 24px; font-weight: bold; display: block; text-align: center; } .steps>label { margin-bottom: 20px; font-size: 22px; } select, input { border: 1px solid; padding: 1rem 10px; width: 100%; cursor: pointer; position: relative; border-color: var(--main-color); border-radius: 5px; } a.form-back-button { margin: 0 auto; display: block; max-width: 200px; text-align: center; color: var(--main-color); font-weight: bold; text-decoration: none; padding: 10px 20px; transition: all 0.2s ease-in; } a.form-back-button:hover { background: #f0f8ff; border-radius: 5px; transition: all 0.2s ease-in; } .form-privacy-wrapper { display: flex; align-items: center; justify-content: space-between; } .form-privacy-wrapper a { color: var(--main-color); } .form-privacy-wrapper a:hover { color: var(--dark-text); } .footer-logo>img+p { margin-top: 10px; } .footer-nav ul a { font-size: 16px; font-weight: 500; letter-spacing: 0px; margin: 5px auto; display: block; } .outer-wrapper.switch-supplier-wrapper, .outer-wrapper.how-it-works { position: relative; z-index: 1; background: #fff; } .hidden { display: none } .form-page .banner-text-heading { text-align: center; } .form-page .banner-text-heading { max-width: 100%; } .form-page .banner-text-heading h1+p { margin-top: 0px; } .form-page .form-wrapper { padding-bottom: 2rem; width: 100%; } p.privacy-policy { text-align: center; } .form-page .form-benefits .inner-wrapper { display: grid; margin: 3rem auto; padding: 0 2rem; grid-gap: 20px; grid-template-columns: 1fr 1fr; justify-items: center; } .form-page .form-benefits { position: relative; overflow: hidden } .form-page .form-benefits-wrapper { display: grid; margin: auto; } .form-page .form-benefits--txt p { color: var(--dark-txt); margin: 10px 0; } .form-benefits--heading h2 { color: var(--main-color); } .form-page .form-benefits--txt p { color: var(--main-color); margin: 20px 0; font-size: 20px; } .form-page .form-benefits--img { display: grid; margin: auto; } .form-page .form-benefits--img img { max-width: 100%; } .form-benefits-cta { text-align: center; margin: 0 auto; display: inline-block; color: #fff; background: var(--accent-2); padding: 1rem 2rem; border-radius: 5px; transition: background 0.2s linear; } .form-benefits-cta:hover { background: var(--main-color); transition: background 0.2s linear; } .form-benefits--txt { position: relative; z-index: 999999999999999; } .disclaimer-text a { word-wrap: break-word; font-size: 12px; display: inline-block; margin-top: 10px; color: var(--accent-1); } .privacy-terms-wrapper strong { font-weight: bold; margin-top: 20px; display: block; } .privacy-terms-wrapper { max-width: 1300px; margin: 0 auto; background: #fff; position: relative; z-index: 99999999; padding: 2rem; } @media screen and (min-width: 960px) and (max-width: 1360px) { h1 { font-size: 52px; line-height: 59px; } h2 { font-size: 30px; line-height: 36px; } .provider--text p { font-size: 20px; } .banner-image img { max-width: 100%; } .inner-wrapper { padding: 1rem; } .switch-supplier { align-items: flex-end; } .switch-supplier--cta-wrapper { grid-template-columns: 1fr; } } @media screen and (max-width: 960px) { h1 { font-size: 33px; line-height: 34px; text-align: center; } h2 { font-size: 25px; line-height: 30px; text-align: center; } .thank-you-wrapper h2 { font-size: 22px; line-height: 130%; text-align: left; } .outer-wrapper.header .inner-wrapper { justify-content: center; } .logo img, .footer-logo img { max-width: 180px; margin: 0 auto; } .header-text-nav-wrapper { display: none; } .banner-text-wrapper { flex-direction: column; mix-blend-mode: unset; background: none; padding: 0 20px !important; } .banner-table-savings { left: 0; } .banner-image img { max-width: 100%; } .footer-nav ul { flex-direction: column; gap: 5px; margin: 2rem 0 0; } .banner-cta-wrapper { width: 100%; text-align: center; margin-top: 0; } .banner-cta-wrapper>p { font-size: 18px; margin-bottom: 5px; } .banner-text-heading { max-width: 700px; padding: 1rem 0; text-align: center; } .banner-cta-icon-wrapper { display: grid; grid-template-columns: 1fr 1fr; max-width: 360px; margin: 0 auto; } a.banner-cta-item { text-align: center; } .banner-text-heading h1+p { font-size: 16px; margin-top: 10px; } .provider { flex-direction: column; transform: translateY(0); border-radius: 0; } .provider--text p { font-size: 16px; } .provider--icons { padding: 2rem 0; } .how-it-works-item { transform: translateX(0) !important; min-width: 300px; max-width: 300px; } .how-it-works-item p { font-size: 16px; } p.item-heading { font-size: 27px; } .outer-wrapper.switch-supplier-wrapper { padding: 1rem 1rem 0; } .switch-supplier { flex-direction: column; gap: 30px; align-items: center; } .switch-supplier--cta-wrapper { grid-template-columns: 1fr; margin-top: 2rem; } a.switch-supplier--cta p { font-size: 11px; } span.ss-cta-heading { font-size: 20px; } .m-hidden { display: none } .form-page .form-benefits .inner-wrapper { margin: 1rem; grid-gap: 40px 0; grid-template-columns: 1fr; padding: 1rem; } .form-benefits--heading { text-align: center; } .form-page .banner-text-heading h1+p { margin: 10px 0; } .form-input { margin: 20px 0; } .form-page .form-benefits--txt p { font-size: 16px; text-align: center; } .hero-section { background: #f8f8f8; } .form-benefits-cta { display: block; } .newsletter-wrapper { flex-direction: column; } }