* {
    color: #1D1D3F;
    margin: 0;
    padding: 0;
    font-family: Lexend Deca;
  }

  p {
    font-size: 18px;;
  }

  html, body {
    overflow-x: hidden;
    max-width: 100%;

  }

  @media (max-width: 770px) {
    p {
      font-size: 14px;
    }
    h2 {
      font-size: 25px;
    }
  }











/* APP STYLES */










.App {
    display:flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    position: relative;

  }

  h2 {
    font-size: 35px;
    font-weight: 1000;
  }

  /* Background Waves */

  .wave {
    background-color: #eef8ff;
    width: 100%;
    height: 70rem;
    position: absolute;
    top: 110rem;
    z-index: -2;
  }

  .wave-2 {
    background-color: #eef8ff;
    width: 100%;
    height: 70rem;
    position: absolute;
    top: 238rem;
    z-index: -2;
  }

  .custom-shape-divider-bottom-1741376254 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
  }

  .custom-shape-divider-bottom-1741376254 svg {
    position: relative;
    display: block;
    width: calc(211% + 1.3px);
    height: 144px;
  }

  .custom-shape-divider-bottom-1741376254 .shape-fill {
    fill: #FFFFFF;
  }

  /** For mobile devices **/
  @media (max-width: 767px) {
    .custom-shape-divider-bottom-1741376254 svg {
        width: calc(183% + 1.3px);
        height: 117px;
    }
  }

  .custom-shape-divider-top-1741376554 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
  }

  .custom-shape-divider-top-1741376554 svg {
    position: relative;
    display: block;
    width: calc(211% + 1.3px);
    height: 144px;
  }

  .custom-shape-divider-top-1741376554 .shape-fill {
    fill: #FFFFFF;
  }

  /** For mobile devices **/
  @media (max-width: 767px) {
    .custom-shape-divider-top-1741376554 svg {
        width: calc(183% + 1.3px);
        height: 117px;
    }
  }

  @media (max-width: 1000px) {
    .wave {
      height: 90rem;
      top: 120rem;
    }

    .wave-2 {
      height: 95rem;
      top: 292rem;
    }
  }

  @media (max-width: 770px) {
    .wave {
      height: 70rem;
      top: 110rem;
    }

    .wave-2 {
      height: 78rem;
      top: 248rem;
    }
  }










  /* MAIN STYLES */












  .main {
    width: 100%;
    height: 55rem;
    position: relative;
    /* z-index: -1; */
    display: flex;
    flex-direction: column;
    align-items: center;

}

.hero-text {
    position: absolute;
    z-index: 1;
    top: 15rem;
    display: flex;
    flex-direction: column;
    width:1300px;
    max-width: 100%;
}

.hero-text h1 {
    margin-inline: 2rem;
    color: #FFFFFF;
    font-size: 60px;
    width: 600px;
    margin-bottom: 4rem;
    line-height: 100%;
}

.hero-text p {
    margin-inline: 2rem;
    color: #FFFFFF;
    width: 400px;
    margin-bottom: 3rem;
    line-height: 170%;
}

.hero-bttn {
    text-decoration: none;
    display: flex;
    justify-content: center;
    background: #3156c2;
	color: White;
	border: none;
	padding: 10px;
    border-radius: 10px;
	font: inherit;
    font-size: 20px;
	cursor: pointer;
	outline: inherit;
    margin-inline: 2rem;
    width:200px;
    transition: 0.3s;
}

.hero-bttn:hover {

    background: #fff;
	color: #3156c2;

}

video {
    max-width: 100%;
    max-height: 100%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}

.custom-shape-divider-bottom-1741365428 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1741365428 svg {
    position: relative;
    display: block;
    width: calc(211% + 1.3px);
    height: 144px;
}

.custom-shape-divider-bottom-1741365428 .shape-fill {
    fill: #FFFFFF;
}

/** For mobile devices **/
@media (max-width: 1000px) {
    .custom-shape-divider-bottom-1741365428 svg {
        width: calc(183% + 1.3px);
        height: 70px;
    }

    .hero-text {
        top: 10rem;
    }

    .hero-text h1 {
        width:400px;
        font-size: 40px;

    }

    .hero-text p {
        width:400px;
        font-size: 14px;
    }

    .hero-bttn {
        font-size: 15px;
        width: 120px;
    }
    .main {
        height: 650px;
    }
}

@media (max-width: 770px) {
    .custom-shape-divider-bottom-1741365428 svg {
        width: calc(183% + 1.3px);
        height: 50px;
    }

    .hero-text h1 {
        width:300px;
        font-size: 30px;

    }

    .hero-text p {
        width:300px;
        font-size: 14px;
    }

    .hero-bttn {
        font-size: 12px;
        width: 100px;
    }

    .main {
        height: 600px;
    }
}








/* NAV STYLES */









.nav-cont {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1;
    transition: background-color 0.3s ease-in-out;
    background-color: transparent;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid #597add7c;
}

.nav-cont.scrolled {
    background-color: #3156c2;
    backdrop-filter: blur(10px);
    border-bottom: none;
}



.nav {
    width: 1500px;
    max-width: 100% ;
    border-radius: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem;
    gap: 1rem;
    color: white;
    border-bottom: 1px black;
}

.nav-links ul {
    display: flex;
    list-style: none;
    gap: 3.5rem;
    margin-right: 2rem;
    align-items: center;

}

.nav-links a {
    color: #fff;
    font-weight: 200;
    cursor: pointer;
}

.nav-links-drop ul {
    display: flex;
    flex-direction: column;
    list-style: none;
    gap: 3.5rem;
    margin-right: 2rem;
    align-items: center;

}

.nav-links-drop li {
    color: white;
    font-weight: 200;
    cursor: pointer;
}

a.nav-link {
    text-decoration: none;
    color: #ffffff;
    font-weight: 400;
}


.nav-logo {
    color:white;
    text-decoration: none;
    font-size: 25px;
    margin-left: 2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.nav-logo img {
    width:40px;
}

.nav-app-store:hover {

    background: #58a1ff;
	color: rgb(255, 255, 255);

}

.menu-dropdown {
    height: 30px;
    width: 30px;
    display: none; /* Hide by default */
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    background-color: #2a3b4900;
    border-radius: 15px;
    position: fixed;
    top: 0px;
    right: 20px;
    cursor: pointer;
    transition: height 0.7s ease, width 0.7s ease, background-color 0.7s ease;
    z-index: 1000;
}

.menu-dropdown.menu-active {
    height: 333px;
    width: 200px;
    border-radius: 5px;
    background-color: #3156c2;
    border: 1px solid #121a3363;
}

.menu-content {
    background: transparent;
    color: white;
    opacity: 0;
    max-height: 300px;
    visibility: hidden;
    transition: opacity 0.5s ease, max-height 0.5s ease, visibility 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    width: 160px;
    border-radius: 5px;
    padding: 20px;
    padding-top: 5px;
    z-index: 1000;
}

.menu-dropdown.menu-active .menu-content {
    visibility: visible;
    opacity: 1;
    max-height: 300px;
    pointer-events: auto;
    transition-delay: 0.3s;
}

.menu-content ul {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
    gap:2rem;
}

.menu-content li {
    font-size: 1.2rem;
    padding: 10px 0;
    transition: color 0.5s ease;
    cursor: pointer;
}

.dropbtn {
    color: white;
    background: none;
    border: none;
    padding: 10px;
    padding-right: 11px;
    cursor: pointer;
    outline: inherit;
}

.drop-btn {
    width: 30px;
}

@media only screen and (max-width: 770px) {
.nav-links {
    display: none;
}

.menu-dropdown {
    display: flex; /* Ensures the dropdown icon is visible on small screens */
}

.nav-app-store{
    background-color: transparent;
    color: #fff;
}

.nav-cont {
    background-color: #3156c2;
    border-bottom: none;
}
}

@media only screen and (max-width: 1000px) {
    .nav-logo {
        font-size: 20px;
        margin-left: 1rem;
    }

    .nav-logo img {
        width:35px;
    }
    .nav-links ul {
        gap: 2.5rem;
    }
}

a.nav-app-store {
    text-decoration: none;
    display: flex;
    justify-content: center;
    background: #ffffff;
	color: rgb(0, 0, 0);
	border: none;
	padding: 5px;
    border-radius: 10px;
	font: inherit;
	cursor: pointer;
	outline: inherit;
    width:auto;
    padding-inline: 10px;
    transition: 0.3s;
}






/* BODY STYLES */











.body {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

 /* Phone Sections*/
.shape-cont{
    position: relative;
    width: 0;
    height:0;
    z-index: -1;
    animation: rotate 2s infinite alternate-reverse ease-in-out;
}

@keyframes rotate {
    0%{rotate: 0;}
    100%{transform: rotate(1.5deg)}
}
.a-1 {
    position: absolute;
    top:-5rem;
    left: -5rem;
    width: 150px;
}

.a-2 {
    position: absolute;
    top: 28rem;
    left: 7rem;
    width: 400px;
}

.a-3 {
    position: absolute;
    top:5rem;
    left: 35rem;
    width: 50px;
}

.a-4 {
    position: absolute;
    top:-30rem;
    left: 5rem;
    width: 30px;
}

.b-1{
    position: absolute;
    top:-10rem;
    left: -5rem;
    width: 300px;
}

.b-2{
    position: absolute;
    top:33rem;
    left: 15rem;
    width: 200px;
}

.b-3{
    position: absolute;
    top:0rem;
    left: -45rem;
    width: 50px;
}

.b-4{
    position: absolute;
    top:18rem;
    left: 40rem;
    width: 30px;
}

.c-1{
    position: absolute;
    top: -53rem;
    left: 10rem;
    width: 300px;
}

.c-2{
    position: absolute;
    top: -10rem;
    left: -7rem;
    width: 300px;
}

.c-3{
    position: absolute;
    top: 10rem;
    left: 35rem;
    width: 50px;
}

.c-4{
    position: absolute;
    top: 7rem;
    left: -10rem;
    width: 30px;
}

.d-1{
    position: absolute;
    top: 20rem;
    left: -5rem;
    width: 400px;
}

.d-2{
    position: absolute;
    top: -5rem;
    left: 0rem;
    width: 200px;
}

.d-3{
    position: absolute;
    top: 15rem;
    left: 35rem;
    width: 30px;
}

.d-4{
    position: absolute;
    top: 5rem;
    left: -5rem;
    width: 70px;
}

.e-1{
    position: absolute;
    top: 10rem;
    left: -5rem;
    width: 300px;
}

.e-2{
    position: absolute;
    top: 45rem;
    left: 15rem;
    width: 200px;
}

.e-3{
    position: absolute;
    top: -25rem;
    left: 60rem;
    width: 200px;
}

.e-4{
    position: absolute;
    top: -10rem;
    left: 80rem;
    width: 200px;
}

.f-1{
    position: absolute;
    top: -8rem;
    left: -5rem;
    width: 200px;
}

.f-2{
    position: absolute;
    top: 33rem;
    left: 10rem;
    width: 400px;
    overflow:auto;
}

.f-3{
    position: absolute;
    top: 13rem;
    left: 30rem;
    width: 40px;
}

.f-4{
    position: absolute;
    top: -2rem;
    left: 50rem;
    width: 30px;
}

@media (max-width: 1000px) {
    .e-1{
        position: absolute;
        top: 0rem;
        left: -5rem;
        width: 200px;
    }
}

@media (max-width: 770px) {
    .a-1 {
        position: absolute;
        top:-6rem;
        left: -3rem;
        width: 100px;
    }

    .a-2 {
        position: absolute;
        top: 20rem;
        left: 7rem;
        width: 300px;
    }

    .a-3 {
        display: none;
    }

    .a-4 {
        display: none;
    }

    .b-1{
        position: absolute;
        top:-10rem;
        left: -3rem;
        width: 200px;
    }

    .b-2{
        position: absolute;
        top:25rem;
        left: 13rem;
        width: 120px;
    }

    .b-3{
        display: none;
    }

    .b-4{
        display: none;
    }

    .c-1{
        position: absolute;
        top: -47rem;
        left: 8rem;
        width: 200px;
    }

    .c-2{
        position: absolute;
        top: -10rem;
        left: -2rem;
        width: 170px;
    }

    .c-3{
        display: none;
    }

    .c-4{
        display: none;
    }

    .d-1{
        display: none;
    }

    .d-2{
        display: none;
    }

    .d-3{
        display: none;
    }

    .d-4{
        display: none;
    }

    .e-1{
        position: absolute;
        top: 0rem;
        left: -5rem;
        width: 200px;
    }

    .e-2{
        display: none;
    }

    .e-3{
        display: none;
    }

    .e-4{
        display: none;
    }

    .f-1{
        position: absolute;
        top: -8rem;
        left: -5rem;
        width: 150px;
    }

    .f-2{
        position: absolute;
        top: 22rem;
        left: 5rem;
        width: 300px;
        overflow:auto;
    }

    .f-3{
        position: absolute;
        top: 13rem;
        left: 30rem;
        width: 40px;
    }

    .f-4{
        position: absolute;
        top: -2rem;
        left: 50rem;
        width: 30px;
    }

}


.phone {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    margin-block: 5rem;
    margin-bottom: 15rem;
    justify-content: space-between;
}

.phone section {
    max-width: 100%;
    margin-inline: 4rem;
}

.mobile-phone {
    display: none;
}

.phone section img{
    width:350px;
}

.phone .right {
    filter: drop-shadow(25px 10px 30px rgba(0, 0, 0, 0.300) )
}

.phone .left {
    filter: drop-shadow(-25px 10px 30px rgba(0, 0, 0, 0.300) );
    padding-bottom: 12%;
}

.phone-text {
    max-width: 100%;
    margin-inline: 4rem;
}

.phone-text h2{
    width: 377px;
    margin-block:2rem;
    max-width: 100%;
    margin-left: 0;
}

.phone-text p{
    width: 450px;
    margin-block:1rem;
    line-height: 170%;
    margin-bottom: 2rem;
    max-width: 100%;
}

.phone-bttn{
    text-decoration: none;
    background: none;
	color: #3156c2;
	border: solid 2px #3156c2 ;
	padding: 5px;
    padding-inline:15px;
    border-radius: 10px;
	font: inherit;
	cursor: pointer;
	outline: inherit;
    transition: 0.3s;
}

.phone-bttn:hover{

    background: #3156c2;
	color: #fff;
}

@media (max-width: 1000px) {
    .phone-bttn{

        background: #3156c2;
        color: #ffffff;
        padding-inline: 80px;
    }

    .phone {
        flex-direction: column;
        margin-inline: 0px;
    }

    .phone-text{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 2rem;
        margin-inline: 2rem;
    }

    .phone-text h2{
        text-align: center;
        font-size: 30px;
    }

    .phone-text p{
        text-align: center;
        width:80%
    }
    .mobile-phone {
        display: flex;
    }

    .phone-hidden{
        display: none;
    }

}

@media (max-width: 770px) {

    .phone section img{
        width:270px;
    }

    .phone-text h2{
        font-size: 20px;
    }

}


 /* Getting started */

.how-to {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    max-width: 100%;
}

.how-to::before,
.how-to::after {
    content: "";
    flex: 1;
    height: 2px; /* Thickness of the line */
    background-color: #000; /* Line color */
}

.how-to h2 {
    padding: 0 10px;
    white-space: nowrap;
}

.body-gs {
    display: flex;
    align-items: center;
    width:1300px;
    max-width: 100%;
    margin-block: 5rem;
    justify-content: space-between;

}

.gs-step {
    background-color: grey;
    width: 60px;
    max-width: 100%;
    height: 60px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    margin-inline: 4rem;

}

.gs-li {
    display: flex;
    align-items: center;
    margin-block: 4rem;
    max-width: 100%;
}

.gs-li h3 {
    font-weight: 400;
    font-size: 25px;
    margin-bottom: 1rem;
    max-width: 100%;
}

.gs-li p {
    width: 400px;
    max-width: 100%;

}
.gs-li a {
    width: 400px;
    max-width: 100%;
    text-decoration: none;
}


.gs-image {
    margin-inline: 4rem;
    max-width: 100%;
    height: 700px;
}
.gs-transaction-img {
    height: 700px;
}

@media (max-width: 1000px) {
    .body-gs {
        display: flex;
        flex-direction: column;

    }
    .gs-image {
        display: none;
    }

    .gs-step {
        margin-inline: 3rem;
    }
}

@media (max-width: 770px) {
    .gs-step {
        margin-inline: 2rem;
        width: 40px;
        height: 40px;
        font-size: 20px;
        min-width: 40px;
    }

    .gs-text {
        width:100%
    }
    .gs-li h3 {
        font-size: 20px;
    }

    .gs-li p {
        font-size: 12px;
        width: 90%;

    }
    .gs-li a {
        font-size: 12px;
        width: 90%;
    }
    .how-to h2 {
        padding: 0 10px;
        font-size: 25px;
    }
    .body-gs {

        margin-block: 2rem;


    }
}


 /* Blog */

.body-blog {
    display: flex;
    flex-direction: column;
    width:1300px;
    max-width: 100%;
    margin-block: 5rem;
    justify-content: space-between;

}

.body-blog h2{
    margin-bottom: 6rem;
    margin-left: 4rem;
    margin-top: 8rem;
    width: 100%;
}

.blog-image img {
    width: 250px;
    height: 250px;
    border-radius: 20px;
    object-fit: cover;
    filter: drop-shadow(-25px 10px 30px rgba(0, 0, 0, 0.300));
    margin-inline: 4rem;
    transition: 0.3s;
}

.body-blog-article {
    display: flex;
    margin-bottom: 4rem;
}

.blog-text {
    margin-left: 40px;
    margin-right: 4rem;
}

.blog-text h3{
    font-size: 30px;
    width:600px;
    line-height: 100%;
    margin-bottom: 0.5rem;
}

.blog-sub {
    color: rgb(163, 163, 163);
    margin-bottom: 1rem;
}

.blog-text p {
    margin-bottom: 1rem;
}

.blog-button {
    background: #1D1D3F;
    display: flex;
    justify-content: center;
    text-decoration: none;
	color: White;
	border: none;
	padding: 5px;
    padding-inline: 15px;
    border-radius: 10px;
	font: inherit;
	cursor: pointer;
	outline: inherit;
    font-size: 18px;
    font-weight: 600;
    width:130px;
}

.blog-button-view-more {
    display: flex;
    align-items: center;
    border: 2px solid #3156c2;
    text-decoration: none;
	color: #3156c2;
	padding: 5px;
    padding-inline: 15px;
    padding-left: 100px;
    border-radius: 10px;
	font: inherit;
	cursor: pointer;
	outline: inherit;
    font-size: 22px;
    font-weight: 600;
    width:220px;
    margin-left: 4rem;
    transition: 0.3s;
}

.blog-button-view-more:hover{

    background: #3156c2;
	color: #fff;
}
@media (max-width: 1000px) {
    .body-blog-article {
        display: flex;
        flex-direction: column;
        margin-bottom: 4rem;
    }

    .body-blog h2{
        margin-bottom: 4rem;
        margin-left: 2rem;
        margin-top: 0rem;
        width: 100%;
        font-size: 30px;
    }

    .blog-image img {
        width: 90%;
        margin-bottom:2rem;
        margin-inline: 2rem;

    }

    .body-blog h3{
        width: 100%;
        font-size: 24px;
    }

    .blog-button-view-more {
        margin-left: 2rem;
        width: 150px;
        padding-left: 50px
    }
}

@media (max-width: 770px) {
    .blog-image img {
        width: 85%;
    }
    .body-blog h2{
        font-size: 25px;
    }

}

/* About */

.about-us {
    display: flex;
    flex-direction: column;
    width:1300px;
    max-width: 100%;
    justify-content: space-between;
    margin-top: 15rem;
    padding-bottom: 7rem;
    border-bottom: 2px solid #ddd;
    margin-right:2rem
}

#about {
    scroll-margin-top: 100px;
}

.about-us h2{
    margin-left: 4rem;
    margin-bottom: 4rem;
}


.about-us p{
    margin-left: 4rem;
    width: 800px;
    max-width: 80%;
    line-height: 180%;
}

@media (max-width: 770px) {
    .about-us {
        margin-top: 5rem;
        padding-bottom: 3rem;

    }
    .about-us p{
        max-width: 70%;
        margin-left:2rem;
    }
    .about-us h2{
        font-size: 25px;
        margin-left:2rem;
    }
}







/* CONTACT STYLES */








.contact-cont {
    display: flex;
    justify-content: center;
    width: 100%;
}

.contact {
    display:flex;
    justify-content: left;
    width: 1330px;
    max-width: 100%;
    margin-top: 7rem;
    margin-bottom: 10rem;
}

#contact {
    scroll-margin-top: 100px;
}

.contact h2 {
    margin-bottom: 2rem;
}

form {
    max-width: 1200px;
    width:100%;
    background: #fff;
    margin-left: 4rem;
}

.inputbox .field {
    width: 50%;
    height: 20px;
    border:none;
    border-bottom: 2px solid #ddd;
    outline:none;
    padding: 10px;
    font-size: 16px;
    margin-top: 20px;
}

.inputbox .field.mess {
    height: 100px;
    resize: none;
}

form button {
    background: #ffffff;
	color: #1D1D3F;
	border: none;
	padding: 5px;
    border-radius: 10px;
	font: inherit;
	cursor: pointer;
	outline: inherit;
    font-size: 18px;
    font-weight: 600;
    width:130px;
    border: solid 1px #1D1D3F;
    margin-top: 1rem;
    margin-right: 1rem;
    transition: 0.3s;
}

form button:hover{
    background: #1D1D3F;
	color: #fff;

}

@media (max-width: 770px) {
    form {

        margin-left: 2rem;
    }
    .inputbox .field {
        width: 70%;
    }
    .contact {
        margin-top: 5rem;
        margin-bottom: 7rem;
    }
    .contact h2 {
        font-size: 25px;
    }

}






/* FOOTER STYLES */










.bottom {
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.partners {
    display: flex;
    flex-direction: column;
    width:1300px;
    max-width: 100%;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-inline: 2rem;
}

.partners .old-c{
 width:100%;
 max-width: 100%;
 margin-inline: 2rem;
 display: flex;
 justify-content: space-between;
 align-items: center;
}

.partners img {
    filter:saturate(0%);
    margin-inline: 2rem
}

.partners .telus {
    height: 90px;
}

.partners .rogers {
    height: 90px;
}

.partners .aws {
    height: 50px;
}

.partners .plaid {
    height: 50px;
}

.partners p {
    color:rgb(156, 156, 156)
}

.footer {
    width:100%;
    max-width: 100%;
    background-color: #3156c2;
    color: #fff;
    padding-bottom: 1rem;
}

.footer h2 {
    font-weight: 600;
    letter-spacing: 0.2rem;
}

.footer footer {
    display: flex;
    justify-content: center;
}

.footer-container{
    margin-top: 2rem;
    display: flex;
    align-items: center;
    flex-direction: column;

}

.footer-links-sub {
    display:flex;
    margin-bottom:2rem;
}
.btn-social {
    border-radius: 100px;
    border: solid 2px white;
    display: flex;
    padding: 20px;
    margin:10px;
    transition: 0.3s;
}

.btn-social:hover {
    background-color: #fff;
}

.btn-social:hover svg {
    fill: #3156c2;
}

.btn-social:hover .brand {
    fill: #3156c2;
}

.btn-social svg {
    width: 45px;
    height: 45px;
    fill:white;
}

.brand{
    fill:white;
}

.footer h2 {
 color: #fff;
}

.copyright .container small {
    color: #fff;

}

@media (max-width: 1000px) {
    .partners .telus {
        height: 80px;
    }

    .partners .rogers {
        height: 80px;
    }

    .partners .aws {
        height: 40px;
    }

    .partners .plaid {
        height: 40px;
    }

    .partners p {
        font-size: 12px;
    }
}

@media (max-width: 770px) {
    .partners .telus {
        height: 40px;
    }

    .partners .rogers {
        height: 40px;
    }

    .partners .aws {
        height: 17px;
    }

    .partners .plaid {
        height: 17px;
    }

    .partners img {
        margin-inline: 1rem
    }

    .partners p {
        font-size: 10px;
        margin-inline: 1rem;
    }

    .btn-social svg {
        width: 25px;
        height: 25px;
    }

    .btn-social {
        padding: 10px;
    }

    .footer h2 {
        font-size: 20px;
       }
}









/* BLOG POST STYLES */
















#blog-post {
    display: flex;
    flex-direction: column;
    width:100%;
    max-width: 100%;
    align-items: center;
}

#blog-post .container{
    margin-inline: 4rem;
    margin-top: 7rem;
    max-width: 1300px;
}

/* Blog Post Section */

section#blog-post {
    padding: 50px 0;
    font-family: -apple-system;
    color: #4d4d4d;
}
/*
section#blog-post h1 {
  font-size: 36px;
  margin-bottom: 20px;
}
 */

.blog-indent {
    margin-left: 7rem;
}

/* Mobile Device Text Sizing */
.blog-h1 {
    font-size: 200%;
    line-height: 1;
    margin: 0 0 30px 0;
    font-weight: bold;
}

.blog-h2 {
    font-size: 175%;
    line-height: 1.2;
    margin-top: 40px;
    font-weight: bold;
    color: #000000;
}

.blog-h3 {
    font-size: 150%;
    line-height: 1.2;
    margin-top: 40px;
}

.blog-h4 {
    font-size: 150%;
    line-height: 1.2;
}

.blog-h5 {
    font-size: 125%;
    line-height: 1.2;
}

.blog-h6 {
    font-size: 100%;
    line-height: 1.2;
}

.blog-p {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 18px;
}
.blog-p-italic {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 18px;
    font-style: italic;
}

/* Desktop Text Sizing */
@media (min-width: 576px) {
    .blog-h1 {
        font-size: 300%;
        line-height: 1;
        margin: 0 0 30px 0;
        font-weight: bold;
    }
    .blog-h2 {
        font-size: 250%;
        line-height: 1.2;
        margin-top: 40px;
        font-weight: bold;
    }
    .blog-h3 {
        font-size: 200%;
        line-height: 1.2;
        margin-top: 40px;
    }
    .blog-h4 {
        font-size: 150%;
        line-height: 1.2;
    }
    .blog-p {
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 22px;
    }
    .blog-p-italic {
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 22px;
        font-style: italic;
    }
}

section#blog-post .metadata {
    color: #999;
    margin-bottom: 10px;
}

/* Mobile Img Sizing */
.blog-img-wide {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
}
.blog-img {
    max-width: 300px;
    height: auto;
}
.blog-img-left {
    max-width: 66vw;
    height: auto;
    text-align: left;
    margin: auto;
}
.blog-img-right {
    max-width: 66vw;
    height: auto;
    text-align: right;
    margin: auto;
}
.blog-img-in-p {
    max-width: 100%;
    margin: 1rem 0 1rem 0;
}

.blog-img-in-p-small {
    max-width: 66%;
    margin: 1rem 0 1rem 0;
    object-fit: cover;
}

/* Desktop Img Sizing */
@media (min-width: 576px) {
    .blog-img-wide {
        max-width: 100%;
        height: auto;
        margin-bottom: 20px;
    }
    .blog-img {
        max-width: 300px;
        height: auto;
    }
    .blog-img-left {
        max-width: 300px;
        height: auto;
        text-align: left;
        margin-right: 20px;
    }
    .blog-img-right {
        max-width: 300px;
        height: auto;
        text-align: right;
        margin-left: 20px;
    }
}

section#blog-post .blog-content {
    line-height: 1.8;
}

.hstack {
    display: flex;
}

.col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
    margin-right: 2rem;
}

.mw-100 {
    max-width: 100% !important;
}

.row{
    display:flex;
    align-items: center;
}

.chatbot-video {
    width: 100%;
    height: auto;
    display: block;
    position: absolute;
    top: -23px;
    left: 0;
    border-radius: 45px;
    transform: scale(0.91);
}

.video-container {
    position: relative !important;
    overflow: hidden;
}


@media (max-width: 767px) {
    .chatbot-video {
        width: 100%;
        height: 120%;
        display: block;
        position: absolute;
        top: -18px;
        left: 0;
        border-radius: 35px;
        transform: scale(0.91);
        }
}

.landing-cont {
    width:100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.landing-body {
    display: flex;
    width:100%;
    max-width: 1200px;
    justify-content: space-between;
    margin-right:7rem
}

.landing-body-text{
    margin-right:2rem;
}

.landing-h1 {
    font-size: 46px;
    line-height: 90%;
    width:300px;
    margin-bottom: 30px;
    margin-top:8rem;
}
.landing-body-text p {
    font-size: 22px;
    margin-bottom: 20px;
}

.landing-body-imgs{
 display: flex;
 position: relative;
}

.desktop-img{
    width: 800px;
    filter: drop-shadow(10px 10px 10px #0000003a);
}

.phone-img{
    width: 230px;
    top: 7rem;
    right:-7rem;
    height: auto;
    position: absolute;
    filter: drop-shadow(10px 10px 10px #0000003a);
}

.landing-background-img{
    width: 1700px;

    position: absolute;
    top: -20rem;
    right:-40rem;
    z-index: -10;
    overflow: hidden !important;
}

.landing-bg-container {
    position: relative;
    overflow: hidden;
    height: 100vh;
}

@media (max-width: 1400px) {
    .desktop-img{
        width: 600px;
    }

    .phone-img{
        width: 180px;
        right:-5rem;
    }

    .landing-body {

        max-width: 1000px;

    }

}

@media (max-width: 1400px) {
    .landing-h1 {
        font-size: 36px;
    }
}

@media (max-width: 1200px) {
    .desktop-img{
        width: 500px;
    }

    .phone-img{
        width: 160px;
        right:-5rem;
    }

    .landing-body {

        max-width: 850px;

    }

    .landing-h1 {
        font-size: 30px;
        line-height: 90%;
        width:300px;
        margin-bottom: 30px;
        margin-top:5rem;
    }
}


@media (max-width: 1000px) {

    .landing-body {
        flex-direction: column;
        align-items: center;
        margin: 0;
    }

    .landing-h1 {
        margin-top:0rem;
    }

    .landing-body-text{
        margin-bottom:4rem;
    }

    .phone-img{
        width: 120px;
        top: 3rem;
        right: -3rem
    }

    .landing-body-imgs{
        margin-right: 2rem
    }

    .desktop-img{
        width: 400px;
    }

}