:root {
             /*    Dark blue or Deep Koamaru */
             /*             --color-1: #102079;*/
             --color-1: #2457a8;
             /*    Purple or Vivid Violet */
             /*             --color-2: #8A40A6;*/
             --color-2: #CD73EC;
             /*    Light white / Catskill White */
             --color-3: #F9FAFC;
             /*    White */
             --color-4: #fff;
         }

         /* 
         @font-face {
             font-family: "ReadexPro";
             src: url("fonts/ReadexPro-SemiBold.woff") format("woff");
             font-weight: 600;
         }

         @font-face {
             font-family: "ReadexPro";
             src: url("fonts/ReadexPro-Regular.woff") format("woff");
             font-weight: 400;
         } */

         a {
             text-decoration: none
         }

         img {
             max-width: 100%;
         }

         html,
         body {
             height: 100%;
             width: 100%;
             font-family: "Inter", sans-serif;
             /*             overflow-x: hidden*/
         }

         body {
             /* font-family: 'Lato', sans-serif; */
             font-weight: 500;
             font-size: 16px;
             line-height: 1.7;
             color: #66809c;
         }

         .btn.btn--apple-pay img {
             margin-top: -5px
         }

         h1,
         h2,
         h3 {
             /* font-family: 'Playfair Display', serif; */
             font-weight: 400;
             color: var(--color-1);
         }

         h1 {
             color: var(--color-2);
         }

         h2 {
             font-size: 48px;
             color: var(--color-1);
             font-weight: 600;
         }

         h3 {
             font-size: 28px;
             font-weight: 600;
         }

         h4 {
             font-size: 24px;
             font-weight: 600;
         }

         p {
             color: var(--color-1);
         }

         .btn {
             font-size: 16px;
             padding: 13px 24px;
             box-sizing: border-box;
             border-radius: 0;
             line-height: 20px;
             border-radius: 7px;
             /* text-transform: uppercase; */
             font-weight: 600;
         }

         .btn--1 {
             border: none;
             background: var(--color-1);
             color: var(--color-1);
         }

         .btn--1:hover {
             color: var(--color-1);
             background: var(--color-4);

         }

         .btn--2 {
             border: none;
             background: var(--color-2);
             color: var(--color-1);
         }

         .btn--2:hover {
             color: var(--color-4);
             background: var(--color-1);

         }

         .btn.btn--black {
             background-color: #000;
             border: 1px solid #000;
             color: #fff;
             height: 51px ;
             line-height: 23px;
         }

         .btn.btn--black:hover {
             background-color: var(--color-1);
             border-color: var(--color-1);
         }

         .google-pay-btn {
             color: #334155;
         }

         .google-pay-btn:hover {
             background-color: var(--color-1);
             color: #fff;
         }


         p.sub-heading {
             font-family: 'Playfair Display', serif;
             color: #CD73EC;
             font-size: 24px;
             margin-bottom: 0;
             font-weight: 700
         }


         p.sub-heading.has-line {
             display: flex;
             align-items: center
         }

         p.sub-heading span.line {
             width: 54px;
             height: 3px;
             display: inline-block;
             background-color: var(--color-2);
             margin-left: 10px;
         }

         p.sub-heading+h2 {
             font-family: "ReadexPro";
             font-size: 32px;
             font-weight: 600
         }

         @media screen and (min-width: 768px) {}

         @media screen and (min-width: 1200px) {
             .container {
                 max-width: 1140px;
             }
         }

         @media screen and (max-width: 1200px) {
             h2 {
                 font-size: 36px;
             }
         }

         @media screen and (max-width: 768px) {
             .mobile-hide {
                 display: none;
             }


         }

         @media screen and (max-width: 576px) {
             h2 {
                 font-size: 30px;
             }

             p.sub-heading+h2 {
                 font-size: 26px;
             }

             .btn {
                 font-size: 15px;
                 padding: 10px 15px;
                 line-height: 20px;
             }

         }

         section {
             scroll-margin-top: 84px;
         }

         /* HEADER STARTS*/

         header {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             z-index: 99;
             padding: 50px 0
         }

         header.fixed-header {
             background-color: var(--color-1);
             background-color: #fff;
             padding: 10px 0;
             box-shadow: 0px 1px 10px rgba(0, 0, 0, .2);
         }

         header a.navbar-brand img {
             width: 287px;
         }

         header nav.navbar {
             padding: 0 0 !important;
             background-color: transparent !important
         }

         header nav.navbar a.nav-link {
             padding-left: 25px !important;
             padding-right: 25px !important;
             font-family: "ReadexPro";
             font-weight: 600
         }

         header nav.navbar a.nav-link:hover {
             color: var(--color-2);
         }

         header nav.navbar a.btn {
             border: 1px solid #fff;
             border: 1px solid var(--color-1);
             color: #fff;
             margin-left: 15px;
         }

         header nav.navbar a.btn:hover {
             background-color: #fff;
             color: var(--color-1);
         }

         header nav .navbar-toggler {
             border: 1px solid #fff;
         }

         @media screen and (max-width: 991px) {
             header {
                 padding: 20px 0px 50px
             }


             header nav.navbar {
                 /*                 background-color: #031424 !important;*/
             }

             header nav.navbar .btn {
                 margin-top: 15px;
                 margin-left: 0 !important
             }

             header nav.navbar ul.navbar-nav {
                 align-items: center;
                 background-color: var(--color-1);
                 padding: 25px 0
             }

             header nav.navbar a.nav-link {
                 text-align: center;
             }

         }

         @media screen and (max-width: 576px) {
             header {
                 padding-top: 10px;
                 padding-bottom: 10px;
                 box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
             }

             header nav .navbar-toggler {
                 padding: 0 !important;
             }

             header a.header-mobile-btn {
                 margin-top: 0 !important
             }

             header a.navbar-brand img {
                 width: 200px;
             }

         }


         /* HEADER ENDS */


         /*HERO SLIDER*/
         /*HERO SLIDER*/
         /*HERO SLIDER*/


         .hero {
             /* padding-top: 200px; */
             text-align: center;
             /* padding: 200px 15px 0; */
             padding: 200px 0px 0;
         }

         .hero .hero-caption {
             padding-left: 15px;
             padding-right: 15px
         }

         .hero .hero-caption h2 {
             margin-bottom: 40px;
         }

         .hero img.banner-img {
             width: 100%;
         }

         .hero .google-pay-btn {
             border: 1px solid #e9eff7;
             margin-right: 15px;
         }

         @media screen and (max-width: 768px) {
             .hero img.banner-img {
                 margin-top: 50px;
             }
         }

         @media screen and (max-width: 576px) {
             .hero {
                 padding: 100px 0px 0;
             }
         }

         section.meaningful {
             padding: 100px 0;
             color: #fff;
             background-color: #113d80;
             background-image: url('images/lines/lines-top-left.jpg'), url('images/lines/lines-bottom-right.jpg');
             background-size: 40%, 57%;
             /* or use contain / cover as needed */
             background-repeat: no-repeat, no-repeat;
             background-position: top left, bottom right;
         }

         section.meaningful .google-pay-btn {
             background-color: #fff;
             color: #000;
         }

         section.meaningful .btn-boxes {
             margin-top: 125px;
             display: flex;
         }

         section.meaningful .btn-boxes .btn {
             display: flex;
             align-items: center;
         }

         section.meaningful .btn-boxes .btn:first-child {
             margin-right: 9px;
             border: 1px solid #fff;
         }
         
         section.meaningful .btn-boxes .btn:first-child:hover {
            background-color: var(--color-one);
            color: #fff;
         }



         section.meaningful .heading-box {
             text-align: center;
             margin-bottom: 75px;
         }

         section.meaningful .heading-box h2 {
             background: -webkit-linear-gradient(#eee, #333);
             background: -webkit-linear-gradient(#345a93, #8198bc);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             font-size: 38px
         }

         section.meaningful .heading-box h3 {
             font-size: 48px;
             font-weight: 600;
         }

         section.meaningful h2,
         section.meaningful h3,
         section.meaningful p {
             color: #fff;

         }

         section.meaningful .left-col-box p {
             font-weight: 600;
             font-size: 40px;
             line-height: 1.3;
             max-width: 490px;
         }

         section.meaningful .right-col p {
             font-weight: 300;
             margin-top: -70px;
             margin-left: 70px;
             font-size: 18px;
         }

         section.meaningful .left-col-box {
             padding: 50px 32px;
             border-radius: 50px;
             background-color: rgba(24, 69, 136, 0.4);
             backdrop-filter: blur(3px);
         }

         section.meaningful .right-col img {
             width: 350px;
         }

         @media screen and (max-width: 992px) {
             section.meaningful {
                 text-align: center;
             }

             section.meaningful .left-col-box {
                 margin-bottom: 75px;
             }

             section.meaningful .left-col-box p {
                 max-width: none;
             }

             section.meaningful .right-col p {
                 margin-left: 0px;
             }

             section.meaningful .btn-boxes {
                 justify-content: center;
                 margin-top: 50px;
             }
         }

         @media screen and (max-width: 576px) {
             section.meaningful .left-col-box {
                 margin-bottom: 50px;
             }

             section.meaningful .heading-box {
                 margin-bottom: 50px;
             }

             section.meaningful .left-col-box {
                 padding: 30px 20px;
             }

             section.meaningful .heading-box h3 {
                 font-size: 26px;
             }

             section.meaningful .left-col-box p {
                 font-size: 24px;
             }
         }


         section.how-it-works {
             padding: 100px 0;
             text-align: center;
             background-image: url('images/left-reading.png'), url('images/right-reading.png');
             background-position: top left, top right;
             background-size: 300px;
             background-repeat: no-repeat;
             text-align: center;
         }



         section.how-it-works h2 {
             /* font-family: "Playfair Display", serif; */
             /* font-style: italic; */
             color: #113D80;
             font-weight: 700;
         }

         section.how-it-works p.number {
             font-family: "Playfair Display", serif;
             font-style: italic;
             font-weight: bold;
             background-color: #1f56a8;
             color: #fff;
             border-radius: 50%;
             width: 32px;
             height: 32px;
             margin: 0 auto 20px;
             display: flex;
             align-items: center;
             justify-content: center;
             position: relative;
             z-index: 3;
         }

         section.how-it-works .bottom-content {
             /* background-image: url('images/lines/curve-lines.png');
             background-repeat: no-repeat;
             background-size: contain; */
             position: relative
         }

         section.how-it-works .bottom-content img.curve-lines {
             position: absolute;
             z-index: 5;
             width: 100%;
             height: auto;
             left: 0;
             bottom: 120px;
             pointer-events: none;
         }


         section.how-it-works .bottom-content h3 {
             font-size: 24px;
             max-width: 230px;
             margin: 0 auto;
             font-family: "Playfair Display", serif;
             /* font-weight: bold; */
         }

         section.how-it-works p {
             max-width: 240px;
             margin: 15px auto;
             color: #334155;
             line-height: 1.4;
         }

         section.how-it-works .col-left {
             background-image: url('images/lines/dot.png');
             background-size: 10px;
             background-position: calc(100% - 50px) 25px;
             background-repeat: no-repeat;
             /* margin-top: 155px; */
             margin-top: 195px;
         }

         section.how-it-works .col-right {
             background-image: url('images/lines/dot.png');
             background-size: 10px;
             background-position: 40px 75px;
             background-repeat: no-repeat;
             /* margin-top: 155px; */
             margin-top: 195px;


         }

         section.how-it-works .col-center img {
             pointer-events: none;
         }

         section.how-it-works .col-center {
             background-image: url('images/lines/dot.png');
             background-size: 10px;
             background-position: calc(100% - 50px) 0px;
             background-repeat: no-repeat;
         }

         section.how-it-works .col-center .content {
             margin-top: -125px;
         }

         section.how-it-works .heading-box {
             margin-bottom: 100px;
         }


         @media screen and (max-width: 1200px) {
             section.how-it-works .col-right {
                 background-image: url('images/lines/dot.png');
                 background-size: 10px;
                 background-position: 40px 75px;
                 background-repeat: no-repeat;
                 /* margin-top: 155px; */
                 margin-top: 195px;
             }
         }

         @media screen and (max-width: 576px) {

             section.how-it-works {
                 padding-bottom: 0px;
             }

             section.how-it-works h2+h3 {
                 font-size: 24px;
                 margin-top: 20px;
             }
         }

         section.live-reading {
             padding: 100px 0;
             background-image: linear-gradient(to bottom, #fff, #D0DBEC);
         }

         section.live-reading img {
             width: 100%;
             pointer-events: none;
         }


         section.live-reading h2 {
             color: #113D80;
             font-weight: 700;
             font-size: 40px;
             margin-bottom: 20px;
         }

         section.live-reading h3 {
             margin-bottom: 65px;
         }


         section.live-reading .heading-box {
             text-align: center;
             margin-bottom: 50px;
         }

         section.live-reading .box {
             background-color: #fff;
             border-radius: 15px;
             overflow: hidden;
             min-height: 240px;
             /* box-shadow: 1px 1px 10px rgba(0, 0, 0, .1); */
             box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;

             display: flex;
             flex-direction: column;
             justify-content: space-between;
             margin-left: 5px;
             margin-right: 5px;
         }

         section.live-reading .box-1 {
             height: 100%;
         }

         section.live-reading .box p {
             padding: 0 30px;
             color: #334155;
             font-size: 20px;
             line-height: 1.3;
         }

         section.live-reading .box h4 {
             padding: 30px 30px 0;
             color: var(--color-1);
         }

         section.live-reading .box-2 {
             margin-bottom: 40px;
         }

         section.live-reading .box-2 img {
             width: 75%;
         }

         section.live-reading .box-3 img {
             width: 75%;
         }

         section.live-reading .box-4 {
             margin-bottom: 40px;
         }

         section.live-reading .box img {
             text-align: center;
             display: block;
             margin: 0 auto;
         }

         section.live-reading .box-4 img {
             width: 50%;
         }

         section.live-reading .box.box-5 img {
             width: 40%;
             margin-left: auto;
             margin-right: 0
         }

         @media screen and (max-width: 576px) {
             section.live-reading h2 {
                 font-size: 32px;
             }

             section.live-reading h3 {
                 font-size: 24px;
             }
         }



         @media screen and (min-width: 768px) {
             .show-on-mobile {
                 display: none;
             }
         }



         @media screen and (max-width: 1400px) {
             section.how-it-works .col-left {
                 margin-top: 155px;
             }

             section.how-it-works .col-right {
                 margin-top: 155px;


             }

             section.how-it-works .col-center {}

         }

         @media screen and (max-width: 1200px) {

             section.how-it-works .col-left,
             section.how-it-works .col-right {
                 margin-top: 110px;
             }

             section.live-reading .box p {
                 font-size: 18px;
             }
         }

         @media screen and (max-width: 992px) {
             section.how-it-works {
                 background-size: 150px;
             }

             section.how-it-works .col-center .content {
                 margin-top: -75px;
             }

             section.how-it-works .col-left,
             section.how-it-works .col-right {
                 margin-top: 95px;
                 margin-top: 145px;
             }

             section.live-reading {
                 text-align: center;
             }
         }

         @media screen and (max-width: 768px) {
             section.how-it-works .mobile-hide {
                 display: none;
             }

             section.how-it-works .show-on-mobile.content {
                 margin-top: -200px !important;
             }

             section.how-it-works .col-center .content {
                 margin-top: 75px;
             }

             section.how-it-works .col-right {
                 margin-top: 75px
             }
         }

         @media screen and (max-width: 576px) {
             section.how-it-works .show-on-mobile.content {
                 margin-top: -125px !important;
             }
         }


         section.new-journey .left-col img {
             margin-bottom: 25px;
         }


         section.new-journey .google-pay-btn {
             border: 1px solid #e9eff7;
             margin-right: 15px;
         }

         section.new-journey .right-col h2 {
             /* font-family: "Playfair Display", serif; */
             /* font-style: italic; */
             /* font-weight: bold; */
             color: #113D80;
             font-weight: 400;
         }

         section.new-journey .right-col h2.first-heading {
             margin-bottom: 0
         }

         section.new-journey .right-col h2.second-heading {
             font-weight: 600;
         }

         section.new-journey .right-col p.first-para {
             font-weight: 600;
             color: #334155;
             font-size: 28px;
             line-height: 1.2;
             margin-top: 15px;
         }

         section.new-journey .right-col p.second-para {
             color: #576880;
             font-weight: 400;
             font-size: 22px;
             margin-top: 10px;
             margin-bottom: 30px;
         }

         section.new-journey .right-col {
             padding-left: 50px;
             display: flex;
             flex-direction: column;
             justify-content: center;
             height: 100%;
             max-width: 550px
         }

         @media screen and (max-width: 992px) {
             section.new-journey .right-col {
                 text-align: center;
                 padding-bottom: 75px;
                 padding-left: 0;
                 margin: 0 auto;
             }

             section.new-journey {
                 padding-top: 75px;
             }
         }

         @media screen and (max-width: 576px) {

             section.new-journey .right-col p.second-para {
                 font-size: 18px;
             }
         }

         footer {
             background-color: #002c70;
             color: #fff;
             padding: 100px 0 0;
         }

         footer ul {
             margin-bottom: 0
         }

         footer img {
             width: 92px;
         }

         footer * {
             color: #fff;
         }

         footer h2 {
             background: -webkit-linear-gradient(#eee, #333);
             background: -webkit-linear-gradient(#33568d, #bbc7d9);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }

         footer .ft-box-1 p {
             font-size: 18px;
             max-width: 300px;
         }

         /* footer .ft-box-2 h2,
         footer .ft-box-3 h2,
         footer .ft-box-4 h2 {
             font-style: italic; 
             font-family: "Playfair Display", serif;
         } */

         footer .footer-top ul>li>a {
             padding: 5px 10px;
             font-weight: 400;
             font-size: 18px;
         }

         footer .footer-top ul>li>a:hover {
             /* color: skyblue; */
             color: #93a6c3;

         }

         footer .footer-bottom h2 {
             font-size: 24px;
         }

         footer .footer-bottom {
             margin-top: 50px;
             background-image: url('images/footer-bottom-line.png');
             background-repeat: repeat-x;
             background-size: contain;
             background-position: left 100%;
             padding-bottom: 35px;
         }

         footer .ft-box-4 {
             text-align: right;
         }

         footer .ft-box-4 a {
             text-decoration: none !important;
             outline: none;
             border: none;
         }

         footer .ft-box-4 a svg {
             width: 26px;
             height: auto;
             margin: 0 2px;
             display: inline-block;
         }

         footer .ft-box-4 a:hover svg {
             fill: #fff;
         }

         footer .ft-box-4 a:hover path {
             stroke: rgb(99, 163, 246)
         }

         footer .ft-box-4 i {
             text-decoration: none;
             padding: 5px 10px;
             border: 2px solid #fff;
             border-radius: 5px;
             width: 32px;
             display: flex;
             justify-content: center;
             align-items: center;
             height: 32px;
             margin: 0 5px;

         }

         footer .footer-copyright {
             padding: 40px 0;
             opacity: .75;
         }

         footer .footer-copyright p {
             margin-bottom: 0
         }

         footer .footer-copyright p,
         footer .footer-copyright a {
             font-weight: 400;
         }

         footer .footer-copyright ul {
             list-style: none;
             text-decoration: none;
         }

         footer p {
             text-decoration: none;
         }

         footer .footer-copyright ul li,
         footer .footer-copyright ul li a {
             text-decoration: none !important;
         }

         footer .footer-copyright ul li:first-child {
             padding-right: 15px;
         }

         footer .footer-copyright a:hover {
             color: #93a6c3;
         }

         @media screen and (max-width: 767px) {
             footer {
                 text-align: center;
             }

             footer img {
                 margin-bottom: 25px;
             }

             footer .footer-copyright {
                 flex-wrap: wrap;
                 justify-content: center !important;
             }

             footer .footer-copyright ul {
                 padding-left: 0
             }

             footer .footer-copyright p {
                 flex-basis: 100%;
             }

             footer .ft-box-1 {
                 margin-bottom: 40px
             }

             footer .ft-box-1 p {
                 margin: 0 auto;
             }

             footer .ft-box-4 ul {
                 padding-left: 0
             }

             footer .ft-box-4 {
                 text-align: center;
             }
         }