html { line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0 } footer, header, section { display: block } h1 { font-size: 2em; margin: 0.67em 0 } a { background-color: transparent; -webkit-text-decoration-skip: objects } img { border-style: none } svg:not(:root) { overflow: hidden } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit } html { box-sizing: border-box } *, *:before, *:after { box-sizing: inherit } body { background: #fff; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased } ul { margin-top: 0; margin-bottom: 24px; padding-left: 24px } ul { list-style: disc } img { height: auto; max-width: 100%; vertical-align: middle } img, svg { display: block } html { font-size: 18px; line-height: 27px } @media (min-width: 641px) { html { font-size: 20px; line-height: 30px; letter-spacing: -0.1px } } body { color: #6F8394; font-size: 1rem } body { font-family: "Hind Vadodara", sans-serif } a { color: inherit; text-decoration: underline } a:hover, a:active { outline: 0; text-decoration: none } h1, h2, h4, .h2, .h4 { clear: both; color: #1F2B35; font-family: "Mukta", sans-serif; font-weight: 500 } h1 { font-size: 42px; line-height: 52px; letter-spacing: -0.1px } @media (min-width: 641px) { h1 { font-size: 56px; line-height: 66px; letter-spacing: -0.1px } } h2, .h2 { font-size: 36px; line-height: 46px; letter-spacing: -0.1px } @media (min-width: 641px) { h2, .h2 { font-size: 42px; line-height: 52px; letter-spacing: -0.1px } } h4, .h4 { font-size: 20px; line-height: 30px; letter-spacing: -0.1px } @media (min-width: 641px) { h4, .h4 { font-size: 24px; line-height: 34px; letter-spacing: -0.1px } } @media (max-width: 640px) { .h2-mobile { font-size: 36px; line-height: 46px; letter-spacing: -0.1px } .h3-mobile { font-size: 24px; line-height: 34px; letter-spacing: -0.1px } } .text-light { color: #6F8394 } .text-light a { color: #6F8394 } .text-sm { font-size: 18px; line-height: 27px; letter-spacing: -0.1px } .text-xs { font-size: 16px; line-height: 24px; letter-spacing: -0.1px } h1, h2, .h2 { margin-top: 48px; margin-bottom: 16px } h4, .h4 { margin-top: 24px; margin-bottom: 4px } p { margin-top: 0; margin-bottom: 24px } .container { width: 100%; margin: 0 auto; padding-left: 16px; padding-right: 16px } @media (min-width: 481px) { .container { padding-left: 24px; padding-right: 24px } } .container { max-width: 1128px } .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; word-wrap: normal !important } .screen-reader-text:focus { border-radius: 2px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; display: block; font-size: 16px; letter-spacing: -0.1px; font-weight: 500; line-height: 16px; text-transform: uppercase; text-decoration: none; background-color: #fff; color: #0081F6 !important; border: none; height: auto; left: 8px; padding: 16px 32px; top: 8px; width: auto; z-index: 100000 } .list-reset { list-style: none; padding: 0 } .text-center { text-align: center } .has-top-divider { position: relative } .has-top-divider::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; display: block; height: 1px; background: #E2E8ED } .m-0 { margin: 0 } .mt-0 { margin-top: 0 } .mb-8 { margin-bottom: 8px } .mt-24 { margin-top: 24px } .mb-24 { margin-bottom: 24px } .mb-32 { margin-bottom: 32px } .pb-24 { padding-bottom: 24px } .button { display: inline-flex; font-family: "Mukta", sans-serif; font-size: 16px; letter-spacing: -0.1px; font-weight: 700; line-height: 16px; text-decoration: none !important; background-color: #fff; color: #0081F6 !important; border: none; border-radius: 4px; cursor: pointer; justify-content: center; padding: 16px 32px; height: 48px; text-align: center; white-space: nowrap } .button:active { outline: 0 } .button::before { border-radius: 4px } .button-shadow { position: relative } .button-shadow::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: 0 8px 16px rgba(31, 43, 53, 0.12); mix-blend-mode: multiply; transition: box-shadow .15s ease } .button-shadow:hover::before { box-shadow: 0 8px 16px rgba(31, 43, 53, 0.25) } .button-primary { color: #fff !important; transition: background .15s ease } .button-primary { background: #ff678c; background: linear-gradient(65deg, #FF4D79 0, #FF809F 100%) } .button-primary:hover { background: #ff6c90; background: linear-gradient(65deg, #ff527d 0, #ff85a3 100%) } .button-primary.button-shadow::before { box-shadow: 0 8px 16px rgba(255, 77, 121, 0.25) } .button-primary.button-shadow:hover::before { box-shadow: 0 8px 16px rgba(255, 77, 121, 0.4) } .site-header { position: relative; padding: 24px 0 } .site-header-inner { position: relative; display: flex; justify-content: space-between; align-items: center } .hero { position: relative; text-align: center; padding-top: 40px } .hero::before { content: ''; position: absolute; bottom: 0; right: 0; height: 230px; width: 80%; background: #2294fb; background: linear-gradient(to top right, #0081F6 0, #44A6FF 100%) } .hero-inner { position: relative } .hero-title { font-weight: 700 } .hero-paragraph { margin-bottom: 32px } .hero-illustration { margin-top: 40px; padding-bottom: 40px } .hero-illustration svg { width: 100%; max-width: 320px; height: auto; margin: 0 auto; overflow: visible } @media (min-width: 641px) { .hero { text-align: left; padding-top: 92px; padding-bottom: 80px } .hero::before { left: 620px; height: 800px; width: 100% } .hero-inner { display: flex } .hero-copy { padding-right: 48px; min-width: 512px } .hero-illustration { margin-top: -68px; padding-bottom: 0 } .hero-illustration svg { max-width: none; width: 528px } } @media (min-width: 1025px) { .hero::before { left: auto; width: 43% } .hero-copy { padding-right: 88px; min-width: 552px } } .features-wrap { display: flex; flex-wrap: wrap; justify-content: center; margin-right: -12px; margin-left: -12px } .features-wrap:first-child { margin-top: -12px } .features-wrap:last-child { margin-bottom: -12px } .feature { padding: 12px; width: 276px; max-width: 276px; flex-grow: 1; } .feature-inner { height: 100%; background: #fff; padding: 40px 24px; box-shadow: 0 16px 48px #E2E8ED; border-radius: 15px; } @supports (-ms-ime-align: auto) { .feature-inner { box-shadow: 0 16px 48px rgba(31, 43, 53, 0.12) } } .feature-icon { display: flex; justify-content: center } .feature-title { margin-top: 12px; margin-bottom: 8px } @media (min-width: 641px) { .features { position: relative } .features .section-square { position: absolute; top: 0; left: 0; height: 240px; width: 44%; background: #F6F8FA } } .pricing { position: relative; overflow: hidden } .pricing::before { content: ''; position: absolute; top: calc(100% - 200px); left: 0; width: 100%; height: 200px; background: #1F2B35; overflow: hidden } .pricing .section-title { margin-bottom: 48px } .pricing-tables-wrap { display: flex; flex-wrap: wrap; justify-content: center; margin-right: -12px; margin-left: -12px } .pricing-tables-wrap:last-child { margin-bottom: -12px } .pricing-table { padding: 12px; width: 344px; max-width: 344px; flex-grow: 1 } .pricing-table-inner { position: relative; display: flex; flex-wrap: wrap; background: #fff; padding: 24px; height: 100%; border-radius: 15px; } .pricing-table-inner>* { position: relative; width: 100% } .pricing-table-inner::before { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-shadow: 0 16px 48px #E2E8ED; mix-blend-mode: multiply; border-radius: 15px; } @supports (-ms-ime-align: auto) { .pricing-table-inner::before { box-shadow: 0 16px 48px rgba(31, 43, 53, 0.12) } } .pricing-table-header { position: relative } .pricing-table-header::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; display: block; height: 1px; background: #E2E8ED } .pricing-table-title { font-family: "Mukta", sans-serif; color: #1F2B35 } .pricing-table-price-currency { color: #6F8394 } .pricing-table-features li { display: flex; align-items: center; margin-bottom: 14px } .pricing-table-features li .list-icon { display: inline-flex; width: 16px; height: 12px; margin-right: 12px } @media (min-width: 641px) { .pricing .section-square { position: absolute; top: calc(100% - 440px); right: 0; height: 240px; width: 44%; background: #F6F8FA } .pricing .section-title { margin-bottom: 64px } } @supports (-ms-ime-align: auto) { } .section-inner { position: relative; padding-top: 48px; padding-bottom: 48px } @media (min-width: 641px) { .section-inner { padding-top: 80px; padding-bottom: 80px } } .site-footer { font-size: 14px; line-height: 20px; letter-spacing: 0px; background: #1F2B35 } .site-footer a { text-decoration: none } .site-footer a:hover, .site-footer a:active { color: #6F8394; text-decoration: underline } .site-footer-inner { position: relative; display: flex; flex-wrap: wrap; padding-top: 40px; padding-bottom: 40px } .site-footer-inner.has-top-divider::before { background: rgba(255, 255, 255, 0.08) } .footer-brand, .footer-links, .footer-social-links, .footer-copyright { flex: none; width: 100%; display: inline-flex; justify-content: center } .footer-brand, .footer-links, .footer-social-links { margin-bottom: 24px } .footer-social-links li+li { margin-left: 16px } .footer-social-links li { display: inline-flex } .footer-social-links li a { padding: 8px } @media (min-width: 641px) { .site-footer-inner { justify-content: space-between } .footer-brand, .footer-links, .footer-social-links, .footer-copyright { flex: 50% } .footer-brand, .footer-copyright { justify-content: flex-start } .footer-links, .footer-social-links { justify-content: flex-end } .footer-links { order: 1; margin-bottom: 0 } }