* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

body {
  font-family: "Poppins", serif;
}

/* hero section */

.hero {
  height: 120vh;
  background: url("images/landingpageimg/Rectangle\ 62\ \(1\).png");
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white;
  height: 10vh;
  width: 70vw;
  margin: auto;
  border-radius: 15px;
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.458);
  position: fixed;
  top: 0;
  margin-top: 4vh;
  margin-left: 14vw;
  z-index: 99;
}

.iconsbox {
  width: 2vw;
  display: inline;
}

.barsicon,
.logoicon {
  display: none;
}

.logoBox {
  display: inline-block;
  margin-left: 2.2vw;
}

.wblogo {
  height: 8.8vh;
}

.navBox {
  list-style: none;
  width: 24vw;
  height: 4vh;
  margin: auto;
  display: flex;
  justify-content: space-between;
}

.navul {
  list-style-type: none;
  margin: auto;
  display: flex;
  justify-content: space-between;
  width: 22vw;
}

.navli {
  font-size: 2.2vh;
  text-align: center;
  color: black;
  height: 3vh;
}

a.Alink-nav:link,
a.Alink-nav:visited {
  color: #757575;
  text-decoration: none;
  font-weight: 400;
  border: none;
}

a.Alink-nav:hover:not(.active) {
  color: black;
  font-weight: 400;
}

a.Alink-nav:hover {
  color: black;
}

a.Alink-nav:active,
.active {
  color: #6f42c1;
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 1vh;
  border-bottom: 1.5px solid #6f42c1;
}

.signupbuttonsBox {
  display: flex;
  justify-content: space-between;
  height: 7vh;
  width: 17vw;
  margin-right: 2.2vw;
}

a.Alink-signup:link,
a.Alink-signup:visited {
  background: none;
  color: black;
  width: 8vw;
  height: 6.6vh;
  text-decoration: none;
  align-content: center;
  text-align: center;
  font-family: "Poppins", serif;
  font-size: 2.2vh;
  border: 1px solid #6f42c1;
  border-radius: 8px;
  font-weight: 400;
  font-style: normal;
  cursor: pointer;
}

a.Alink-signup:hover,
a.Alink-signup:active {
  background-color: black;
  color: white;
  width: 8vw;
  height: 6.6vh;
  align-content: center;
  text-decoration: none;
  text-align: center;
  font-size: 2.2vh;
  font-family: "Poppins", serif;
  font-weight: 400;
  border: none;
  border-radius: 8px;
  transition: 0.3s ease-in;
}

a.Alink-signin:link,
a.Alink-signin:visited {
  background-color: #6f42c1;
  color: white;
  width: 8vw;
  height: 6.6vh;
  text-decoration: none;
  align-content: center;
  text-align: center;
  font-family: "Poppins", serif;
  font-size: 2.2vh;
  border-radius: 10px;
  font-weight: 400;
  font-style: normal;
  border: none;
  cursor: pointer;
}

a.Alink-signin:hover,
a.Alink-signin:active {
  background-color: #5d37a1;
  color: white;
  width: 8vw;
  height: 6.6vh;
  align-content: center;
  text-decoration: none;
  text-align: center;
  font-size: 2.2vh;
  font-family: "Poppins", serif;
  font-weight: 400;
  border-radius: 10px;
  border: none;
  transition: 0.3s ease-in;
}

.heroContent {
  width: 96vw;
  height: 90vh;
  display: flex;
  justify-content: space-between;
  margin: auto;
}

.hC-textbox {
  width: 35vw;
  height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 2vw;
  margin-top: 8vh;
  overflow: hidden;
}

h1 {
  font-size: 11.5vh;
  line-height: 11vh;
  color: black;
  font-weight: 500;
  letter-spacing: -0.3vw;
}

.h1yellow {
  font-size: 11.8vh;
  color: #fec107;
  text-shadow: 1px 1px 2px black;
  font-weight: 700;
  letter-spacing: 0.05vw;
}

.h1purple {
  font-size: 11.8vh;
  color: #8762cb;
  text-shadow: 1px 1px 2px black;
  font-weight: 700;
  letter-spacing: 0.05vw;
}

.hCpara {
  font-size: 2.9vh;
  color: black;
}

a.Alink-proceedButton:link, a.Alink-proceedButton:visited {
    background-color: #6f42c1;
    color: white;
    width: 28vw;
    height: 8.8vh;
    display: flex;
    text-decoration: none;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-family: "Poppins", serif;
    font-size: 2.2vh;
    border-radius: 15px;
    font-weight: 400;
    font-style: normal;
    margin-left: 0vw;
    border: none;
    margin-top: 0vh;
    cursor: pointer;
}
  
a.Alink-proceedButton:hover, a.Alink-proceedButton:active {
    background-color: #5d37a1;
    color: white;
    width: 29vw;
    height: 9vh;
    display: flex;
    align-items: center;
    text-decoration: none;
    text-align: center;
    justify-content: center;
    font-size: 2.2vh;
    font-family: "Poppins", serif;
    font-weight: 400;
    border-radius: 20px;
    margin-left: 0vw;
    margin-top: 0vh;
    border: none;
    transition: 0.4s ease-in-out;
}

.proceedarrow {
  margin-top: 1vh;
  margin-left: 1vw;
}

.arrowforward {
  height: 3vh;
}

.hC-imgbox {
  width: 55vw;
  margin-top: 3vh;
  display: inline;
  position: relative;
  animation-name: hCani;
  animation-duration: 4s;
  animation-delay: 0s;
  animation-iteration-count: 10;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes hCani {
  0% {
    top: 20px;
    bottom: 0px;
  }
  25% {
    top: 0px;
    bottom: 20px;
  }
  50% {
    top: 20px;
    bottom: 0px;
  }
  75% {
    top: 0px;
    bottom: 20px;
  }
  100% {
    top: 20px;
    bottom: 0px;
  }
}

.hCimg {
  height: 87vh;
}

.stats {
  width: 100%;
  height: 35vh;
  align-content: center;
  background-image: url("images/landingpageimg/Rectangle\ 108.png");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position-x: 100%;
  background-position-y: 100%;
  background-size: cover;
  background-origin: padding-box;
  z-index: 0;
  object-fit: cover;
  object-position: 10% 100%;
  position: relative;
  filter: grayscale(100%, 100%);
}

.statoverlay {
  width: 100%;
  height: 35vh;
  z-index: 1;
  background-color: #5e37a197;
  position: absolute;
  bottom: 0;
}

.statsBox {
  width: 90vw;
  height: 28vh;
  margin: auto;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  z-index: 2;
}

.statBox1,
.statBox2,
.statBox3 {
  width: 20vw;
  height: 25vh;
  align-content: center;
  z-index: 2;
}

.statNo {
  color: white;
  font-size: 8.8vh;
  text-align: center;
  font-weight: 600;
  text-shadow: 1px 1px 5px #fec00722;
}

.statPara {
  color: white;
  font-size: 2.5vh;
  text-align: center;
  font-weight: 300;
  text-shadow: 1px 1px 5px #2d1a4e;
}

.offers {
  height: 225vh;
  padding-top: 10vh;
  position: relative;
}

.offersShapes {
  height: 218vh;
  width: 100%;
  position: absolute;
  z-index: 0;
}

.offS1 {
  position: absolute;
  left: 42vw;
}

.offS1img {
  height: 15vw;
}

.offS2 {
  position: absolute;
  top: 70vh;
}

.offS2img {
  height: 30vw;
}

.offS3 {
  position: absolute;
  right: 0vw;
  top: 140vh;
}

.offS3img {
  height: 30vw;
}

h2 {
  font-size: 7vh;
  color: black;
  text-align: center;
  font-weight: 500;
}

.h2purple {
  font-size: 7.1vh;
  color: #6f42c1;
  font-weight: 700;
}

.h2yellow {
  font-size: 7.1vh;
  color: #fec107;
  font-weight: 700;
}

.offersGrid {
  height: 180vh;
  width: 90vw;
  margin: auto;
  margin-top: 4vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.oG1,
.oG2 {
  height: 81vh;
  width: 85vw;
  margin: auto;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  z-index: 1;
}

/* the div */
#myModal,
#myModalB {
  display: none; /* Hidden by default */
  position: absolute; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 20px; /* Location of the box */
  top: 8vw;
  margin: auto;
  height: 65vh;
  width: 50vw;
  overflow: auto;
  background-color: black; /* Fallback color */
  background-color: #ebebeb; /* Black w/ opacity */
  border-radius: 2vw;
  border: 3px solid #5d37a1;
}

#myModalC,
#myModalD {
  display: none;
  position: absolute;
  z-index: 1;
  padding-top: 20px;
  top: 121vh;
  margin: auto;
  height: 65vh;
  width: 50vw;
  overflow: auto;
  background-color: black;
  background-color: #ebebeb;
  border-radius: 2vw;
  border: 3px solid #5d37a1;
}

/* the image */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

#img01,
#img01B,
#img01C,
#img01D {
}

#caption,
#captionB,
#captionC,
#captionD {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: justify;
  color: black;
  padding-top: 3vh;
  height: 50px;
  font-size: 2.3vh;
}

.modal-content,
#caption,
#captionB,
#captionC,
#captionD {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.close,
.closeB,
.closeC,
.closeD {
  position: absolute;
  top: 1vh;
  right: 3vw;
  color: black;
  font-size: 5vh;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus,
.closeB:hover,
.closeB:focus,
.closeC:hover,
.closeC:focus,
.closeD:hover,
.closeD:focus {
  color: #6f42c1;
  text-decoration: none;
  cursor: pointer;
}

.oG1-expense,
.oG1-budgets,
.oG2-split,
.oG1-savings {
  background-color: white;
  height: 79.7vh;
  width: 30vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 15px;
  box-shadow: 1px 1px 2px black;
}

.oG-imgBox {
  margin-top: 1.5vh;
}

.oG-img,
#myImg,
#myImgB,
#myImgC,
#myImgD {
  height: 40vh;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover,
#myImgB:hover,
#myImgC:hover,
#myImgD:hover {
  opacity: 0.7;
}

.oG-txtBox {
  width: 27vw;
  height: 35vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.oG-txth4 {
  font-size: 4.5vh;
  line-height: 5.5vh;
  color: black;
}

.oG-txtpara {
  font-size: 2.2vh;
  color: black;
}

.oGlearn {
  font-size: 2.1vh;
  color: #6f42c1;
  text-decoration: none;
  font-weight: 500;
  cursor: pointer;
  width: 15vw;
  height: 7vh;
  align-content: center;
  text-align: left;
}

a.Alink-oGlearn2:link,
a.Alink-oGlearn2:visited {
  background-color: #6f42c1;
  color: white;
  width: 28vw;
  height: 9vh;
  display: flex;
  text-decoration: none;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-family: "Poppins", serif;
  font-size: 2.2vh;
  border-radius: 8px;
  font-weight: 400;
  font-style: normal;
  margin: auto;
  border: none;
  cursor: pointer;
  position: absolute;
  margin-top: 7vh;
  left: 36vw;
}

a.Alink-oGlearn2:hover,
a.Alink-oGlearn2:active {
  background-color: #5d37a1;
  color: white;
  width: 28vw;
  height: 9vh;
  display: flex;
  align-items: center;
  text-decoration: none;
  text-align: center;
  justify-content: center;
  font-size: 2.2vh;
  font-family: "Poppins", serif;
  font-weight: 400;
  border-radius: 8px;
  margin-left: 0vw;
  margin-top: 0vh;
  border: none;
  transition: 0.3s ease-in;
  position: absolute;
  margin-top: 7vh;
}

.accomplish {
  height: 95vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-top: 7vh;
  background: linear-gradient(white, #fec107);
}

.wantpara {
  font-size: 3vh;
  color: black;
  text-align: center;
  margin-top: 6vh;
}

.accomplishGrid {
  height: 60vh;
  width: 80vw;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin-bottom: 5vh;
  position: relative;
  margin: auto;
}

.accG1, .accG2, .accG3, .accG4, .accG5, .accG6 {
    background-color: #ffffff;
    height: 44vh;
    width: 50vw;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    border-radius: 4vh;
    border-bottom: 4px solid #ac95d6;
    padding: 2vw;
    box-shadow: 2px 2px 5px #8762cb;
}

.mySlides {
  display: none;
}

.accG-img1 {
    height: 7.7vh;
    margin: auto;
    margin-left: 21vw;
    margin-bottom: 6vh;
}

.accG-img2 {
    height: 10vh;
    margin-left: 21vw;
    margin-bottom: 6vh;
}

.accG-img3 {
    height: 10.2vh;
    margin-left: 21vw;
    margin-bottom: 6vh;
}

.accG-img4 {
    height: 9.5vh;
    margin-left: 21vw;
    margin-bottom: 6vh;
}

.accG-img5 {
    height: 10vh;
    margin-left: 21vw;
    margin-bottom: 6vh;
}

.accG-img6 {
    height: 9.6vh;
    margin-left: 21vw;
    margin-bottom: 6vh;
}

.accG-para {
    color: black;
    font-size: 4vh;
    font-weight: 600;
    text-align: center;
    line-height: 4vh;
    transform: translateY(-50%);
    margin-bottom: 2vh;
}

a.Alink-accG:link, a.Alink-accG:visited {
    font-size: 2.8vh;
    color: black;
    text-decoration: none;
    display: flex;
    height: 4vh;
    width: 16vw;
    justify-content: space-around;
    text-align: center;
    align-items: center;
    margin: auto;
}

a.Alink-accG:hover, a.Alink-accG:active {
    font-size: 2.8vh;
    color: #5d37a1;
    text-decoration: none;
    display: flex;
    height: 4vh;
    width: 18vw;
    font-weight: 500;
    align-items: center;
    transition: 0.5s ease-out;
}

.accG-proceedarrow {
  margin-top: 0.5vh;
}

.yellowarrowforward {
  height: 3.3vh;
}

.prev {
  cursor: pointer;
  position: absolute;
  top: 40%;
  left: 0;
  width: auto;
  padding: 10px;
  margin-top: 0px;
  color: black;
  font-weight: bold;
  font-size: 5vh;
  transition: 0.6s ease;
  border-radius: 1vw;
  user-select: none;
  z-index: 2;
}

.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  right: 0;
  width: auto;
  padding: 10px;
  margin-top: 0px;
  color: black;
  font-weight: bold;
  font-size: 5vh;
  transition: 0.6s ease;
  border-radius: 1vw;
  user-select: none;
  z-index: 2;
}

.prev:hover,
.next:hover {
  background-color: #ac95d6ad;
  color: #5d37a1;
}

.accG-dots {
  margin: auto;
  position: absolute;
  bottom: 0;
}

.dot {
    cursor: pointer;
    height: 12px;
    width: 12px;
    margin: 0 2px;
    background-color: #ac95d6;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot:hover,
.dot:active {
  background-color: #5d37a1;
}

.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {
    opacity: 0.4;
  }
  to {
    opacity: 1;
  }
}

.people {
  height: 111vh;
  width: 100%;
  padding-top: 10vh;
  background-color: #fec107;
}

.pshape {
  height: 60vh;
  position: absolute;
  z-index: 0;
  margin-top: 20vh;
}

.peopleSliderHint {
    display: none;
}

.peopleGrid {
    height: 82vh;
    width: 90vw;
    display: flex;
    margin: auto;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.pG2a, .pG2, .pG3 {
    height: 70vh;
    width: 20vw;
    background-color: white;
    z-index: 2;
    box-shadow: 1px 1px 10px 1px black;
    border-radius: 4vh;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: auto;
    padding: 2vw;
    color: black;
    /*
    animation-duration: 10s;
    animation-delay: 0s;
    animation-iteration-count: 10;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-name: fadeup;*/
}

/*

@keyframes pGani {
    0% {top:20px; bottom:0px;}
    25% {top:0px; bottom:20px;}
    50% {top:20px; bottom:0px;}
    75% {top:0px; bottom:20px;}
    100% {top:20px; bottom:0px;}
}
    */

.pG2a:hover, .pG2:hover, .pG3:hover {
    height: 65vh;
    width: 20vw;
    background-color: rgb(255, 255, 255);
    z-index: 2;
    color: white;
    box-shadow: 1px 1px 10px 1px #5d37a1;
    border-radius: 4vh;
    transition: 0.5s ease-in-out;
    transform: scale(1.1,1.1);
}

.pGimg {
    height: 18vh;
    margin: auto;
    display: inline;
}

.pGName {
    font-size: 4vh;
    color: black;
    line-height: 4vh;
}

.pGtext {
    font-size: 2vh;
    color: black;
}

.people-dots {
  position: absolute;
  margin: auto;
  width: 20vw;
  height: 10vh;
  bottom: 0vh;
  top: 40vh;
}

.pdot {
  background-color: #757575;
}

.subscription {
    height: 120vh;
    width: 100%;
    padding-top: 10vh;
}

.subShape {
  position: relative;
  z-index: 0;
}

.subShape-img {
    position: absolute;
    top: 18vh;
    height: 80vh;
}

.subsGrid {
    width: 80vw;
    height: 90vh;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 5;
    margin-top: 3vh;
    align-items: center;
}

.subsG1, .subsG2, .subsG3 {
    width: 25vw;
    height: 80vh;
    z-index: 6;
    background: linear-gradient(#e8e1f5, #e8e1f5, #e8e1f5, #e8e1f5,#bfafdb);
    border-radius: 30px;
    border: 1px solid #6f42c1;
    padding: 2vw;
}

/*
.subs-ani {
    animation-name: subs-ani;
  animation-duration: 20s;
  animation-delay: 2s;
  animation-iteration-count: 5;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes subs-ani {
    0% {background-color: #ac95d6;}
    50% {background-color: #e8e1f5;}
    100% {background-color: #ac95d6;}
  } 
*/

.subsG1-imgbox {
    width: 22vw;
    margin: auto;
    margin-bottom: 1vh;
    padding-bottom: 2vh;
    border-bottom: 1px solid black;
}

.subsG-img {
    height: 14vh;
    margin: auto;
    margin-left: 6.5vw;
}

.subsG-label-main {
    font-size: 2.2vh;
    color: black;
    text-align: center;
}

.subsG1-textbox {
}

.subsG-label {
    font-size: 2.2vh;
    color: black;
    text-align: left;
}

.subsG-para {
    color: black;
    font-size: 2vh;
}

.subsG-pSpan {
  color: #e8e1f5;
  font-size: 1.2vh;
}

.subsG-label {
}

.subsG-ulli {
    width: 21vw;
}

.subsG-ul {
    list-style-type: none;
}

.subsG-li {
    color: black;
    font-size: 2vh;
    display: flex;
    line-height: 3.5vh;
}

.subsG-li-bullet {
}

.bullet {
    height: 2.2vh;
    padding-top: 0.5vh;
}

.subsG-button {
    width: 20vw;
    height: 10vh;
    margin-top: 2vh;
    display: flex;
}

a.Alink-subsG:link, a.Alink-subsG:visited {
    background-color: #6f42c1;
    text-decoration: none;
    height: 8.5vh;
    color: white;
    padding: 1.3vw;
    border-radius: 10px;
    font-size: 2.2vh;
}   

a.Alink-subsG:hover, a.Alink-subsG:active {
    background-color:#5d37a1;
    text-decoration: none;
    height: 8.5vh;
    color: white;
    padding: 1.3vw;
    border-radius: 10px;
    font-size: 2.2vh;
    transition: 0.5s ease-in-out;
}

.faqs {
  height: 200vh;
  width: 100%;
  position: relative;
  background-color: #382161;
}

.faqShapes {
  width: 100%;
  height: 200vh;
  position: absolute;
  z-index: 1;
  display: inline-block;
}

.faqShape1 {
  position: absolute;
  height: 80vh;
  bottom: 0vh;
  z-index: 1;
}

.faqShape2 {
  position: absolute;
  height: 50vh;
  right: 0vw;
  z-index: 1;
}

.faqBox {
  border: 2px solid white;
  width: 60vw;
  height: 180vh;
  border-radius: 4vh;
  margin: auto;
  z-index: 3;
  position: absolute;
  background-color: #160d27;
  box-shadow: 2px 2px 16px 6px #160d27;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding-top: 4vh;
  top: 14vh;
  left: 25vw;
 
}

.faqTextBox {
  z-index: 3;
  /* border: 2px solid yellow; */
  width: 55vw;
  height: 160vh;
  margin: auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  
}

.faq-h2 {
  color: white;
  font-size: 6vh;
  text-align: center;
  font-weight: 500;
  display: inline-block;
}

.fTB {
  /* border: 2px solid plum; */
  width: 42vw;
}

.faqHeading {
  color: white;
  font-size: 2.8vh;
  font-weight: 400;
}

#faqPara, #faqPara1, #faqPara2, #faqPara3, #faqPara4, #faqPara5, #faqPara6, #faqPara7, #faqPara8, #faqPara9, #faqPara10, #faqPara11 {
  color: #160d27;
  font-size: 1.9vh;
  font-weight: 400;
  display: none;
  background-color: white;
  padding: 1vw;
  border-radius: 1vw;
}

a.Alink-why:link, a.Alink-why:visited {
  text-decoration: none;
  display: flex;
  cursor: pointer;
}

a.Alink-why:hover, .whyiconimg:hover {
  color: #6f42c1;
}

a.Alink-why:active, .whyiconimg:active {
  color: #5d37a1;
}

.takecontrol {
  height: 80vh;
  background-color: white;
}

.control-box {
  margin-top: 6rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.control-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 48vw;
  height: 50vh;
  justify-content: space-around;
}

.control-head {
  font-size: 5vh;
  color: black;
  text-align: center;
  font-weight: 600;
}

.control-body {
  font-size: 2rem;
  color: rgb(36, 35, 35);
  padding-top: 2rem;
  padding-bottom: 2rem;
  text-align: center;
  width: 42vw;
}

.get-started-btn {
  background: rgb(111, 66, 193);
  border-radius: 1.2rem;
  border: none;
  color: white;
  width: 20vw;
  height: 9vh;
  font-size: 2.7vh;
  font-family: "Poppins", sans-serif;
}

.get-started-btn:hover {
  background: #5d37a1;
  border-radius: 1.2rem;
  border: none;
  color: white;
  width: 20vw;
  height: 9vh;
  transition: 0.5s ease-in-out;
}

footer {
  height: 84vh;
  background: #160d27;
}

.footer-container {
  display: flex;
  flex-direction: row;
  height: 80vh;
  width: 90vw;
  margin: auto;
  align-self: center;
  margin-top: 8vh;
}

.contact {
  margin: auto;
  display: flex;
  flex-direction: column;
  height: 35vh;
  justify-content: space-between;
}

#footer-logo {
  width: 17vw;
}

.footerHeading {
  color: white;
  font-size: 1.4vh;
  text-align: left;
}

.social-media {
  margin-top: -1.8rem;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

#media-icon {
  height: 5.5vh;
}

.footer-links-menu {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  padding: 2rem;
  height: 60vh;
  width: 62vw;
  align-self: center;
  justify-content: space-between;
}

.footer-links {
  margin-top: 1.5rem;
  width: 17vw;
}

.footerHeading {
  font-size: 2rem;
  color: white;
  font-weight: 500;
}

.footerul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  margin-top: 2rem;
  justify-content: space-between;
}

.footerli {
  font-size: 1.6rem;
  color: white;
  font-family: "poppins", serif;
  font-weight: 300;
  cursor: pointer;
}

a.Alink-faq:link, a.Alink-faq:visited {
  color: white;
  text-decoration: none;
  cursor: pointer;
}

a.Alink-faq:hover, a.Alink-faq:active {
  color: #ac95d6;
  transition: 0.3s ease-in-out;
}



/* Tablet screen */

@media (max-width: 1024px),
  (max-width: 1228px),
  (max-width: 820px),
  (max-width: 768px) {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    font-size: 62.5%;
  }

  body {
    font-family: "Poppins", serif;
  }

  /* hero section */

  .hero {
    height: 110vh;
    background-image: url("images/landingpageimg/Rectangle\ 62\ \(1\).png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position-x: 30%;
    background-position-y: 45%;
    background-size: cover;
    background-origin: padding-box;
    z-index: 0;
    object-fit: cover;
    object-position: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    height: 6.6vh;
    width: 80vw;
    margin: auto;
    border-radius: 18px;
    box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.458);
    position: fixed;
    top: 0;
    margin-top: 4vh;
    margin-left: 10vw;
    z-index: 99;
  }

    .iconsbox {
        width: 2vw;
        display: inline;
    }
    
    .barsicon, .logoicon {
        display: none;
    }
    
    .logoBox {
        display: inline-block;
        margin-left: 2.2vw;
    }
    
    .wblogo {
        height: 5vh;
    }
    
    .navBox {
        list-style: none;
        width: 26vw;
        height: 3vh;
        margin: auto;
    }
    
    .navul {
        list-style-type: none;
        margin: auto;
        width: 25vw;
        display: flex;
        justify-content: space-between;
    }
    
    .navli {
        font-size: 1.1vh;
        text-align: center;
        color: black;
        height: 3vh;
    }
    
    a.Alink-nav:link,
    a.Alink-nav:visited {
        color: #757575;
        text-decoration: none;
        font-weight: 400;
        border: none;
    }
    
    a.Alink-nav:hover:not(.active) {
        color: black;
        font-weight: 400;
    }
    
    a.Alink-nav:hover {
        color: black;
    }
    
    a.Alink-nav:active,
    .active {
        color: #6f42c1;
        font-weight: 500;
        text-decoration: none;
        padding-bottom: 1vh;
        border-bottom: 1.5px solid #6f42c1;
    }
    
    .signupbuttonsBox {
        display: flex;
        justify-content: space-between;
        height: 4vh;
        width: 17.7vw;
        margin-right: 2.2vw;
    }
    
    a.Alink-signup:link, a.Alink-signup:visited {
        background: none;
        color: black;
        width: 8vw;
        height: 3.5vh;
        text-decoration: none;
        align-content: center;
        text-align: center;
        font-family: "Poppins", serif;
        font-size: 1.1vh;
        border: 1px solid #6f42c1;
        border-radius: 8px;
        font-weight: 400;
        font-style: normal;
        cursor: pointer;
    }
      
    a.Alink-signup:hover, a.Alink-signup:active {
        background-color: black;
        color: white;
        width: 8vw;
        height: 3.5vh;
        align-content: center;
        text-decoration: none;
        text-align: center;
        font-size: 1.1vh;
        font-family: "Poppins", serif;
        font-weight: 400;
        border: none;
        border-radius: 8px;
        transition: 0.3s ease-in;
    }
    
    a.Alink-signin:link, a.Alink-signin:visited {
        background-color: #6f42c1;
        color: white;
        width: 8vw;
        height: 3.5vh;
        text-decoration: none;
        align-content: center;
        text-align: center;
        font-family: "Poppins", serif;
        font-size: 1.1vh;
        border-radius: 10px;
        font-weight: 400;
        font-style: normal;
        border: none;
        cursor: pointer;
    }
      
    a.Alink-signin:hover, a.Alink-signin:active {
        background-color: #5d37a1;
        color: white;
        width: 8vw;
        height: 3.5vh;
        align-content: center;
        text-decoration: none;
        text-align: center;
        font-size: 1.1vh;
        font-family: "Poppins", serif;
        font-weight: 400;
        border-radius: 10px;
        border: none;
        transition: 0.3s ease-in;
    }
    
    .heroContent {
        width: 98vw;
        height: 85vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: auto;
    }
    
    .hC-textbox {
        width: 80vw;
        height: 40vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: auto;
        margin-top: 4vh;
    }
    
    h1 {
        font-size: 5.1vh;
        line-height: 6.6vh;
        color: black;
        text-align: center;
    }
    
    .h1yellow {
        font-size: 5.2vh;
        color: #fec107;
        text-shadow: 1px 1px 2px black;
        font-weight: 600;
    }
    
    .h1purple {
        font-size: 5.2vh;
        color: #8762cb;
        text-shadow: 1px 1px 2px black;
        font-weight: 600;
    }
    
    .hCpara {
        font-size: 1.6vh;
        color: black;
        text-align: center;
        margin-top: 2vh;
        margin-bottom: 2vh;
    }
    
    a.Alink-proceedButton:link, a.Alink-proceedButton:visited {
        background-color: #6f42c1;
        color: white;
        width: 30vw;
        height: 5vh;
        display: flex;
        text-decoration: none;
        align-items: center;
        text-align: center;
        justify-content: center;
        font-family: "Poppins", serif;
        font-size: 1.5vh;
        border-radius: 8px;
        font-weight: 400;
        font-style: normal;
        margin: auto;
        border: none;
        margin-top: 0vh;
        cursor: pointer;
    }
      
    a.Alink-proceedButton:hover, a.Alink-proceedButton:active {
        background-color: #5d37a1;
        color: white;
        width: 30vw;
        height: 5vh;
        display: flex;
        align-items: center;
        text-decoration: none;
        text-align: center;
        justify-content: center;
        font-size: 1.5vh;
        font-family: "Poppins", serif;
        font-weight: 400;
        border-radius: 8px;
        margin: auto;
        margin-top: 0vh;
        border: none;
        transition: 0.3s ease-in;
    }
    
    .proceedarrow {
        margin-top: 0.6vh;
        margin-left: 1vw;
    }
    
    .arrowforward {
        height: 1.8vh;
    }
    
    .hC-imgbox {
        margin-top: 2vh;
        display: inline;
        position: relative;
        animation-name: hCani;
        animation-duration: 4s;
        animation-delay: 0s;
        animation-iteration-count: 10;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
        margin: auto;
        width: 90vw;
    }
    
    @keyframes hCani {
        0% {top:20px; bottom:0px;}
        25% {top:0px; bottom:20px;}
        50% {top:20px; bottom:0px;}
        75% {top:0px; bottom:20px;}
        100% {top:20px; bottom:0px;}
    }
    
    .hCimg {
        height: 50vh;
        z-index: 0;
    }

    .stats {
        width: 100%;
        height: 22vh;
        align-content: center;
        background-image: url('images/landingpageimg/Rectangle\ 108.png');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position-x: 81.5%;
        background-position-y: 10%;
        background-size: cover;
        background-origin: padding-box;
        z-index: 0;
        object-fit: cover;
        object-position: 10% 10%;
        position: relative;
        filter: grayscale(100%, 100%);
    }
    
    .statoverlay {
        width: 100%;
        height: 22vh;
        z-index: 1;
        background-color: #5e37a197;
        position: absolute;
        bottom: 0;
    }
    
    .statsBox {
        width: 97vw;
        height: 17vh;
        margin: auto;
        display: flex;
        justify-content: space-around;
        align-items: center;
        z-index: 2;
    }
    
    .statBox1, .statBox2, .statBox3 {
        width: 30vw;
        height: 15vh;
        align-content: center;
        z-index: 2;
    }
    
    .statNo {
        color: white;
        font-size: 3.5vh;
        text-align: center;
        font-weight: 600;
        text-shadow: 1px 1px 5px #fec00722;
    }
    
    .statPara {
        color: white;
        font-size: 1.3vh;
        text-align: center;
        font-weight: 300;
        text-shadow: 1px 1px 5px #2d1a4e;
    }
    
    .offers {
        height: 135vh;
        padding-top: 5vh;
        position: relative;
    }

  .offersShapes {
    height: 113vh;
    width: 100%;
    position: absolute;
    z-index: 0;
  }

  .offS1 {
    position: absolute;
    left: 42vw;
  }

  .offS1img {
    height: 15vw;
  }

  .offS2 {
    position: absolute;
    top: 48vh;
  }

  .offS2img {
    height: 30vw;
  }

  .offS3 {
    position: absolute;
    right: 0vw;
    top: 90vh;
  }

  .offS3img {
    height: 30vw;
  }

    h2 {
        font-size: 3vh;
        color: black;
        text-align: center;
        font-weight: 500;
        z-index: 7;
    }

    .h2purple {
        font-size: 3vh;
        color: #6f42c1;
        font-weight: 700;
    }

    .h2yellow {
        font-size: 3vh;
        color: #fec107;
        font-weight: 700;
    }

  .offersGrid {
    height: 104vh;
    width: 90vw;
    margin: auto;
    margin-top: 4vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .oG1,
  .oG2 {
    height: 48vh;
    width: 85vw;
    margin: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 1;
  }

  /* the div */
  #myModal {
    display: none; /* Hidden by default */
    position: absolute;
    z-index: 1; /* Sit on top */
    padding-top: 20px; /* Location of the box */
    top: 18vh;
    margin: auto;
    height: 35vh;
    width: 45vw;
    overflow: auto;
    background-color: black; /* Fallback color */
    background-color: #f2f2f2; /* Black w/ opacity */
    border-radius: 5vw;
    box-shadow: 1px 1px 2px #fec107;
  }

  #myModalB {
    display: none;
    position: absolute;
    z-index: 1;
    padding-top: 20px;
    top: 18vh;
    margin: auto;
    height: 35vh;
    width: 45vw;
    overflow: auto;
    background-color: black;
    background-color: #f2f2f2;
    border-radius: 5vw;
    box-shadow: 1px 1px 2px #fec107;
  }

  #myModalC {
    display: none;
    position: absolute;
    z-index: 1;
    padding-top: 20px;
    top: 70vh;
    margin: auto;
    height: 35vh;
    width: 45vw;
    overflow: auto;
    background-color: black;
    background-color: #f2f2f2;
    border-radius: 5vw;
    box-shadow: 1px 1px 2px #fec107;
  }

  #myModalD {
    display: none;
    position: absolute;
    z-index: 1;
    padding-top: 20px;
    top: 70vh;
    margin: auto;
    height: 35vh;
    width: 45vw;
    overflow: auto;
    background-color: black;
    background-color: #f2f2f2;
    border-radius: 5vw;
    box-shadow: 1px 1px 2px #fec107;
  }

  /* the image */
  .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
  }

  #caption,
  #captionB,
  #captionC,
  #captionD {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: justify;
    color: black;
    padding-top: 3vh;
    height: 50px;
    font-size: 1.5vh;
  }

  .modal-content,
  #caption,
  #captionB,
  #captionC,
  #captionD {
    animation-name: zoom;
    animation-duration: 0.6s;
  }

  @keyframes zoom {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }

  .close,
  .closeB,
  .closeC,
  .closeD {
    position: absolute;
    top: 1vh;
    right: 3vw;
    color: black;
    font-size: 5vh;
    font-weight: bold;
    transition: 0.3s;
  }

  .close:hover,
  .close:focus,
  .closeB:hover,
  .closeB:focus,
  .closeC:hover,
  .closeC:focus,
  .closeD:hover,
  .closeD:focus {
    color: #6f42c1;
    text-decoration: none;
    cursor: pointer;
  }

  .oG1-expense,
  .oG1-budgets,
  .oG2-split,
  .oG1-savings {
    background-color: white;
    height: 47vh;
    width: 38vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    box-shadow: 1px 1px 2px black;
  }

  .oG-imgBox {
    margin-top: 1.5vh;
  }

  #img01,
  #img01B,
  #img01C,
  #img01D {
  }

  .oG-img,
  #myImg,
  #myImgB,
  #myImgC,
  #myImgD {
    height: 17vh;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
  }

  #myImg:hover,
  #myImgB:hover,
  #myImgC:hover,
  #myImgD:hover {
    opacity: 0.7;
  }

  .oG-txtBox {
    width: 33vw;
    height: 26vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

    .oG-txth4 {
        font-size: 2.5vh;
        line-height: 3vh;
        color: black;
        margin-top: 1vh;
    }

    .oG-txtpara {
        font-size: 1.4vh;
        color: black;
    }

  .oGlearn {
    font-size: 1.2vh;
    color: #6f42c1;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    width: 14vw;
    height: 3.3vh;
    align-content: center;
    text-align: left;
  }

    a.Alink-oGlearn2:link, a.Alink-oGlearn2:visited {
        background-color: #6f42c1;
        color: white;
        width: 50vw;
        height: 5vh;
        display: flex;
        text-decoration: none;
        align-items: center;
        text-align: center;
        justify-content: center;
        font-family: "Poppins", serif;
        font-size: 1.5vh;
        border-radius: 15px;
        font-weight: 400;
        font-style: normal;
        margin: auto;
        border: none;
        cursor: pointer;
        position: absolute;
        margin-top: 5vh;
        left: 24vw;
    }

    a.Alink-oGlearn2:hover, a.Alink-oGlearn2:active {
        background-color: #5d37a1;
        color: white;
        width: 50vw;
        height: 5vh;
        display: flex;
        align-items: center;
        text-decoration: none;
        text-align: center;
        justify-content: center;
        font-size: 1.5vh;
        font-family: "Poppins", serif;
        font-weight: 400;
        border-radius: 15px;
        border: none;
        transition: 0.3s ease-in;
        position: absolute;
        margin-top: 5vh;
    }

    .accomplish {
        height: 72vh;
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-top: 7vh;
        background: linear-gradient( white, #fec107);
    }
    
    .wantpara {
        font-size: 2vh;
        color: black;
        text-align: center;
        margin-top: 6vh;
    }
    
    .accomplishGrid {
        height: 45vh;
        width: 90vw;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-bottom: 5vh;
        position: relative;
        margin: auto;
    }
    
    .accG1, .accG2, .accG3, .accG4, .accG5, .accG6 {
        background-color: #ffffff;
        height: 30vh;
        width: 60vw;
        margin: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        align-content: center;
        justify-content: space-between;
        border-radius: 4vh;
        border-bottom: 4px solid #ac95d6;
        padding: 2.2vw;
        box-shadow: 2px 2px 5px #8762cb;
    }
    
    .mySlides {
        display: none;
    }
    
    .accG-img1 {
        height: 6vh;
        margin-left: 23vw;
        margin-bottom: 6vh;
    }
    
    .accG-img2 {
        height: 8vh;
        margin-left: 23vw;
        margin-bottom: 6vh;
    }
    
    .accG-img3 {
        height: 8vh;
        margin-left: 22vw;
        margin-bottom: 6vh;
    }
    
    .accG-img4 {
        height: 9vh;
        margin-left: 23vw;
        margin-bottom: 6vh;
    }
    
    .accG-img5 {
        height: 9.2vh;
        margin-left: 22vw;
        margin-bottom: 6vh;
    }
    
    .accG-img6 {
        height: 7vh;
        margin-left: 24vw;
        margin-bottom: 6vh;
    }
    
    .accG-para {
        color: black;
        font-size: 2vh;
        font-weight: 600;
        text-align: center;
        line-height: 3vh;
        transform: translateY(-50%);
    }
    
    a.Alink-accG:link, a.Alink-accG:visited {
        font-size: 1.7vh;
        color: black;
        text-decoration: none;
        display: flex;
        height: 4vh;
        width: 29vw;
        text-align: left;
        align-items: center;
        justify-content: space-around;
        margin-left: 2vw;
        margin: auto;
        margin-top: -2vh;
    }
    
    a.Alink-accG:hover, a.Alink-accG:active {
        font-size: 1.7vh;
        color: #5d37a1;
        text-decoration: none;
        display: flex;
        height: 4vh;
        width: 33vw;
        font-weight: 600;
        align-items: center;
        transition: 0.5s ease-out;
        
    }
    
    .accG-proceedarrow {
        margin-top: 0.6vh;
    }
    
    .yellowarrowforward {
        height: 3vh;
    }
    
    .prev {
        cursor: pointer;
        position: absolute;
        top: 40%;
        left: 0;
        width: auto;
        padding: 10px;
        margin-top: 0px;
        color: black;
        font-weight: bold;
        font-size: 4vh;
        transition: 0.6s ease;
        border-radius: 1vw;
        user-select: none;
        z-index: 2;
    }
    
    .next {
        cursor: pointer;
        position: absolute;
        top: 40%;
        right: 0;
        width: auto;
        padding: 10px;
        margin-top: 0px;
        color: black;
        font-weight: bold;
        font-size: 5vh;
        transition: 0.6s ease;
        border-radius: 1vw;
        user-select: none;
        z-index: 2;
    }
    
    .prev:hover,
    .next:hover {
        background-color: #ac95d6ad;
        color: #5d37a1;
    }
    
    .accG-dots {
        margin: auto;
        position: absolute;
        bottom: 0;
    }
    
    .dot {
        cursor: pointer;
        height: 15px;
        width: 15px;
        margin: 0 2px;
        background-color: #e0e0e0;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.6s ease;
    }
    
    .dot:hover, .dot:active {
        background-color: #5d37a1;
    }
    
    .fade {
        animation-name: fade;
        animation-duration: 1.5s;
    }
      
    @keyframes fade {
        from {
          opacity: 0.4;
        }
        to {
          opacity: 1;
        }
    }

    .people {
        height: 80vh;
        width: 100%;
        padding-top: 10vh;
        background-color: #fec107;
    }
    
    .pshape {
        height: 50vh;
        position: absolute;
        z-index: 0;
        margin-top: 10vh;
    }

    .peopleSliderHint {
        display: none;
    }
    
    .peopleGrid {
        height: 60vh;
        width: 96vw;
        display: flex;
        margin: auto;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    
    .pG2a, .pG2, .pG3 {
        height: 47vh;
        width: 25vw;
        background-color: white;
        z-index: 2;
        box-shadow: 1px 1px 10px 1px black;
        border-radius: 3vh;
        padding: 2vw;
        color: black;
        /*
        animation-duration: 10s;
        animation-delay: 0s;
        animation-iteration-count: 10;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
        animation-name: fadeup;*/
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .pG2a:hover, .pG2:hover, .pG3:hover {
        height: 47vh;
        width: 25vw;
        background-color: rgb(255, 255, 255);
        z-index: 2;
        color: white;
        box-shadow: 1px 1px 10px 1px #5d37a1;
        border-radius: 3vh;
        padding: 2vw;
        transition: 0.4s ease-in-out;
        transform: scale(1.1,1.1);
    }

    /*
    @keyframes pGani {
        0% {top:20px; bottom:0px;}
        25% {top:0px; bottom:20px;}
        50% {top:20px; bottom:0px;}
        75% {top:0px; bottom:20px;}
        100% {top:20px; bottom:0px;}
    }
    */

    @keyframes fadeup {
        0% {top: -50px; display: block;}
        100% {top: 0px; display: none;}

    }
    
    .pGimg {
        height: 6vh;
        margin-bottom: 4vh;
        margin: auto;
        display: inline-block;
        margin-left: 5vw;
    }
    
    .pGName {
        font-size: 2.5vh;
        color: black;
        text-align: center;
        line-height: 2vh;
    }
    
    .pGtext {
        font-size: 2vh;
        color: black;
        text-align: justify;
    }
    
    .people-dots {
        position: absolute;
        margin: auto;
        width: 15vw;
        height: 5vh;
        bottom: 0vh;
        top: 50vh;
        margin-left: 37vw;
    }
    
    .pdot {
        background-color: #757575;
    }

    .subscription {
        height: 274vh;
        width: 100%;
        padding-top: 6vh;
    }
    
    .subShape {
        position: relative;
        z-index: 0;
    }
    
    .subShape-img {
        position: absolute;
        top: 0vh;
        height: 50vh;
    }
    
    .subsGrid {
        width: 90vw;
        height: 250vh;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 5;
        margin-top: 7vh;
        align-items: center;
    }
    
    .subsG1, .subsG2, .subsG3 {
        width: 70vw;
        height: 77vh;
        z-index: 6;
        background: linear-gradient(#e8e1f5, #e8e1f5, #e8e1f5, #e8e1f5,#bfafdb);
        border-radius: 3vh;
        border: 1px solid #6f42c1;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    
    /*
    .subs-ani {
        animation-name: subs-ani;
      animation-duration: 20s;
      animation-delay: 2s;
      animation-iteration-count: 5;
      animation-direction: alternate;
      animation-timing-function: ease-in-out;
    }
    
    @keyframes subs-ani {
        0% {background-color: #ac95d6;}
        50% {background-color: #e8e1f5;}
        100% {background-color: #ac95d6;}
      } 
    */
    
    .subsG1-imgbox {
        width: 55vw;
        margin: auto;
        display: flex;
        flex-direction: column;
        border-bottom: 1px solid black;
    }
    
    .subsG-img {
        height: 12vh;
        margin: auto;
    }

    .subsG-label-main {
        font-size: 2.5vh;
        color: black;
        text-align: center;
    }
    
    .subsG1-textbox {
        width: 60vw;
        margin: auto;
        margin-left: 3vw;
    }

    .subsG-label {
        font-size: 2.5vh;
        color: black;
        text-align: left;
    }
    
    .subsG-para {
        color: black;
        font-size: 2vh;
    }

    .subsG-pSpan {
      color: #e8e1f5;
      font-size: 1.2vh;
    }
    
    .subsG-ulli {
        width: 55vw;
    }
    
    .subsG-ul {
        list-style-type: none;
    }
    
    .subsG-li {
        color: black;
        font-size: 2vh;
        display: flex;
        line-height: 3.5vh;
    }
    
    .subsG-li-bullet {
    
    }
    
    .bullet {
        height: 2.2vh;
        padding-top: 0.5vh;
    }
    
    .subsG-button {
        width: 50vw;
        height: 10vh;
        margin-top: 2vh;
        display: flex;
       margin: auto;
    }
    
    a.Alink-subsG:link, a.Alink-subsG:visited {
        background-color: #6f42c1;
        text-decoration: none;
        height: 8vh;
        width: 45vw;
        color: white;
        border-radius: 1.8vh;
        font-size: 2vh;
        display: flex;
        align-items: center;
        text-align: center;
        padding-left: 15vw;
    }   
    
    a.Alink-subsG:hover, a.Alink-subsG:active {
        background-color:#5d37a1;
        text-decoration: none;
        height: 8vh;
        width: 46vw;
        color: white;
        border-radius: 2vh;
        font-size: 2vh;
        transition: 0.5s ease-in-out;
        text-align: center;
    }

    .faqs {
      height: 180vh;
      width: 100%;
      position: relative;
      background-color: #382161;
    }
    
    .faqShapes {
      width: 100%;
      height: 180vh;
      position: absolute;
      z-index: 1;
      display: inline-block;
    }
    
    .faqShape1 {
      position: absolute;
      height: 50vh;
      bottom: 0vh;
      z-index: 1;
    }
    
    .faqShape2 {
      position: absolute;
      height: 30vh;
      right: 0vw;
      z-index: 1;
    }
    
    .faqBox {
      border: 2px solid white;
      width: 86vw;
      height: 160vh;
      border-radius: 4vh;
      margin: auto;
      z-index: 3;
      position: absolute;
      background-color: #160d27;
      box-shadow: 2px 2px 16px 6px #160d27;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding-top: 4vh;
      top: 10vh;
      left: 6.6vw;
    }
    
    .faqTextBox {
      z-index: 3;
      /* border: 2px solid yellow; */
      width: 80vw;
      height: 145vh;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .faq-h2 {
      color: white;
      font-size: 3.3vh;
      text-align: center;
      font-weight: 500;
      display: inline-block;
    }
    
    .fTB {
      /* border: 2px solid plum; */
      width: 70vw;
      margin: auto;
    }
    
    .faqHeading {
      color: white;
      font-size: 2.1vh;
      font-weight: 400;
    }
    
    #faqPara, #faqPara1, #faqPara2, #faqPara3, #faqPara4, #faqPara5, #faqPara6, #faqPara7, #faqPara8, #faqPara9, #faqPara10, #faqPara11 {
      color: #160d27;
      font-size: 1.3vh;
      font-weight: 300;
      display: none;
      background-color: white;
      padding: 1vw;
      border-radius: 1vw;
    }
    
    a.Alink-why:link, a.Alink-why:visited {
      text-decoration: none;
      display: flex;
      cursor: pointer;
    }
    
    a.Alink-why:hover, .whyiconimg:hover {
      color: #6f42c1;
    }
    
    a.Alink-why:active, .whyiconimg:active {
      color: #5d37a1;
    }

    .takecontrol {
      width: 100%;
      height: 47vh;
    }
    
    .control-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      height: 50vh;
    }

    .control-image {
      margin-left: 2vw;
    }

    .ctrlimg {
      height: 22vh;
    }
    
    .control-text {
      display: flex;
      flex-direction: column;
      height: 27vh;
      width: 55vw;
      justify-content: space-between;
    }
    
    .control-head {
      color: black;
      font-size: 2.4vh;
      text-align: left;
      font-weight: 600;
      display: inline-block;
      width: 55vw;
    }
    
    .control-body {
      font-size: 1.7vh;
      color: rgb(36, 35, 35);
      text-align: left;
      width: 55vw;
    }
    
    .get-started-btn {
      background: rgb(111, 66, 193);
      border-radius: 1.2rem;
      border: none;
      color: white;
      width: 55vw;
      height: 5vh;
      font-size: 1.8vh;
    }

    .get-started-btn:hover {
      background: #382161;
      border-radius: 1.2rem;
      border: none;
      color: white;
      width: 55vw;
      height: 5vh;
      font-size: 1.8vh;
    }

    footer {
      background: #160d27;
      height: 125vh;
    }
    
    .footer-container {
      margin-top: 8rem;
      background: rgb(22, 13, 39);
      padding-bottom: 5rem;
      display: flex;
      flex-direction: column;
      padding-top: 2.5rem;
      height: 120vh;
      width: 95vw;
    }
    
    .contact {
      margin: auto;
      width: 70vw;
      height: 30vh;
    }
    
    #footer-logo {
      height: 9vh;
      width: 53vw;
      margin: auto;
    }
    
    .footerHeading {
      color: rgb(245, 245, 245);
      font-size: 1.4rem;
      margin-top: 1.2rem;
      text-align: left;
    }
    
    .social-media {
      margin-top: 1.2rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    
    #media-icon {
      height: 5vh;
      border: 1px solid #ac95d6;
      border-radius: 50%;
    }
    
    .footer-links-menu {
      margin-top: 2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      width: 90vw;
      height: 80vh;
    }
    
    .footer-links {
      margin-top: 1.5rem;
      width: 36vw;
    }
    
    .footerHeading {
      font-size: 2vh;
      color: rgb(255, 255, 255);
    }
    
    .footerul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
      margin-top: 2rem;
    }
    
    .footerli {
      font-size: 1.6rem;
      color: rgb(230, 229, 229);
      font-family: "poppins", serif;
      cursor: pointer;
    }

    a.Alink-faq:link, a.Alink-faq:visited {
      color: white;
      text-decoration: none;
      cursor: pointer;
    }
    
    a.Alink-faq:hover, a.Alink-faq:active {
      color: #ac95d6;
      transition: 0.3s ease-in-out;
    }

    
}

/* Mobile screen */

@media (max-width: 932px),
  (max-width: 850px),
  (max-width: 600px),
  (max-width: 412px),
  (max-width: 390px),
  (max-width: 375px),
  (max-width: 360px) {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  html {
    font-size: 62.5%;
  }

  body {
    font-family: "Poppins", serif;
  }

  /* hero section */

  .hero {
    height: 100vh;
    width: 100%;
    background-image: url("images/landingpageimg/Rectangle\ 62\ \(1\).png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position-x: 30%;
    background-position-y: 45%;
    background-size: cover;
    background-origin: padding-box;
    z-index: 0;
    object-fit: cover;
    object-position: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /*
  .hamburger {
    background-color: rgb(255, 255, 255);
    padding: 1rem;
    border-radius: 100rem;
    box-shadow: 0px 3px 3px rgb(190, 190, 190);
    z-index: 1000;
    display: block;
  }

  #burger {
    -webkit-transition: all 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
  }

  .hamburger.active {
    margin-left: -4rem;
    position: fixed;
    margin-top: 0.5rem;
    box-shadow: none;
    padding: 0rem;
    display: block;
  }

  .hamburger.active #burger:nth-child(2) {
    opacity: 0;
  }

  .hamburger.active #burger:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    width: 2rem;
    background-color: rgb(111, 66, 193);
  }

  .hamburger.active #burger:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    width: 2rem;
    background-color: rgb(111, 66, 193);
  }

  .burger-span-one {
    display: block;
    width: 1.5rem;
    height: 0.2rem;
    margin-top: 0.2rem;
    margin-bottom: 0.5rem;
    -webkit-transition: all 0, 3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: rgb(111, 66, 193);
  }

  .burger-span-two {
    display: block;
    width: 2.2rem;
    height: 0.2rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    -webkit-transition: all 0, 3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: rgb(111, 66, 193);
  }

  .burger-span-three {
    display: block;
    width: 1.2rem;
    height: 0.2rem;
    margin-top: 0.5rem;
    margin-bottom: 0.3rem;
    -webkit-transition: all 0, 3s ease-in-out;
    transition: all 0.3s ease-in-out;
    background-color: rgb(111, 66, 193);
  }
    */

  .iconsbox {
    width: 100%;
    height: 10vh;
    margin-top: 2vh;
    display: flex;
    justify-content: space-between;
    z-index: 100;
  }

  .barsicon,
  .logoicon {
    display: inline;
  }

  .bars:hover,
  .bars:active {
    height: 7vh;
  }


  .bars {
    height: 8vh;
  }

  .wblogo2 {
    height: 5.2vh;
    margin-top: 2.2vh;
    margin-left: 7.7vw;
  }

  nav {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(255, 255, 255);
    height: 39vh;
    width: 93vw;
    margin: auto;
    border-radius: 15px;
    box-shadow: 1px 1px 60px 60px rgba(0, 0, 0, 0.645);
    position: absolute;
    top: 0;
    right: 3.5vw;
    margin-top: 3.5vh;
    z-index: 99;
  }

  .logoBox {
    display: none;
    margin-left: 3vw;
  }

  .wblogo {
    height: 4.4vh;
  }

  .navBox {
    list-style: none;
    width: 40vw;
    height: 16vh;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 4vh;
  }

    nav.show {
        display: flex;
        transition: 1s ease-in-out;
    }
    
    .navul {
        list-style-type: none;
        width: 30vw;
        height: 13vh;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .navli {
        font-size: 1.8vh;
        text-align: center;
        color: black;
    }
    
    a.Alink-nav:link,
    a.Alink-nav:visited {
        color: #757575;
        text-decoration: none;
        font-weight: 400;
        border: none;
    }
    
    a.Alink-nav:hover:not(.active) {
        color: black;
        font-weight: 400;
    }
    
    a.Alink-nav:hover {
        color: black;
    }
    
    a.Alink-nav:active,
    .active {
        color: #6f42c1;
        font-weight: 600;
        text-decoration: none;
        padding-bottom: 0.6vh;
        border: none;
    }
    
    .signupbuttonsBox {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 13vh;
        width: 77vw;
        margin-bottom: 0.2vh;
        margin: auto;
    }
    
    a.Alink-signup:link, a.Alink-signup:visited {
        background: none;
        color: black;
        width: 75vw;
        height: 5vh;
        text-decoration: none;
        align-content: center;
        text-align: center;
        font-family: "Poppins", serif;
        font-size: 2vh;
        border: 1px solid #6f42c1;
        border-radius: 7px;
        font-weight: 400;
        font-style: normal;
        cursor: pointer;
        margin: auto;
    }
      
    a.Alink-signup:hover, a.Alink-signup:active {
        background-color: black;
        color: white;
        width: 75vw;
        height: 5vh;
        align-content: center;
        text-decoration: none;
        text-align: center;
        font-size: 2vh;
        font-family: "Poppins", serif;
        font-weight: 400;
        border: none;
        border-radius: 7px;
        transition: 0.3s ease-in;
    }
    
    a.Alink-signin:link, a.Alink-signin:visited {
        background-color: #6f42c1;
        color: white;
        width: 75vw;
        height: 5vh;
        text-decoration: none;
        align-content: center;
        text-align: center;
        font-family: "Poppins", serif;
        font-size: 2vh;
        border-radius: 7px;
        font-weight: 400;
        font-style: normal;
        border: none;
        cursor: pointer;
        margin: auto;
    }
      
    a.Alink-signin:hover, a.Alink-signin:active {
        background-color: #5d37a1;
        color: white;
        width: 75vw;
        height: 5vh;
        align-content: center;
        text-decoration: none;
        text-align: center;
        font-size: 2vh;
        font-family: "Poppins", serif;
        font-weight: 400;
        border-radius: 7px;
        border: none;
        transition: 0.3s ease-in;
    }
    
    .heroContent {
        width: 95vw;
        height: 75vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: auto;
        margin-top: 5vw;
    }
    
    .hC-textbox {
        width: 91vw;
        height: 31vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin: auto;
        margin-top: 0vh;
    }
    
    h1 {
        font-size: 4vh;
        line-height: 5.7vh;
        color: black;
        text-align: center;
    }
    
    .h1yellow {
        font-size: 4vh;
        color: #fec107;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.402);
        font-weight: 600;
    }
    
    .h1purple {
        font-size: 4vh;
        color: #8762cb;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.365);
        font-weight: 600;
    }
    
    .hCpara {
        font-size: 1.5vh;
        color: black;
        text-align: center;
        margin-top: 3vh;
        margin-bottom: 3vh;
    }
    
    a.Alink-proceedButton:link, a.Alink-proceedButton:visited {
        background-color: #6f42c1;
        color: white;
        width: 50vw;
        height: 5vh;
        display: flex;
        text-decoration: none;
        align-items: center;
        text-align: center;
        justify-content: center;
        font-family: "Poppins", serif;
        font-size: 1.7vh;
        border-radius: 7px;
        font-weight: 400;
        font-style: normal;
        margin: auto;
        border: none;
        margin-top: 0vh;
        cursor: pointer;
    }
      
    a.Alink-proceedButton:hover, a.Alink-proceedButton:active {
        background-color: #5d37a1;
        color: white;
        width: 55vw;
        height: 5vh;
        display: flex;
        align-items: center;
        text-decoration: none;
        text-align: center;
        justify-content: center;
        font-size: 1.1vh;
        font-family: "Poppins", serif;
        font-weight: 400;
        border-radius: 7px;
        margin: auto;
        margin-top: 0vh;
        border: none;
        transition: 0.3s ease-in;
    }
    
    .proceedarrow {
        margin-top: 0.5vh;
        margin-left: 1vw;
    }
    
    .arrowforward {
        height: 1.8vh;
    }
    
    .hC-imgbox {
        margin-top: 0vh;
        display: inline;
        position: relative;
        animation-name: hCani;
        animation-duration: 4s;
        animation-delay: 0s;
        animation-iteration-count: 10;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
        margin: auto;
        width: 95vw;
        height: 40vh;
    }
    
    @keyframes hCani {
        0% {top:20px; bottom:0px;}
        25% {top:0px; bottom:20px;}
        50% {top:20px; bottom:0px;}
        75% {top:0px; bottom:20px;}
        100% {top:20px; bottom:0px;}
    }
    
    .hCimg {
        height: 32.5vh;
        z-index: 0;
    }

  .stats {
    width: 100%;
    height: 30vh;
    align-content: center;
    background-image: url("images/landingpageimg/Rectangle\ 108.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position-x: 78.8%;
    background-position-y: 10%;
    background-size: cover;
    background-origin: padding-box;
    z-index: 0;
    object-fit: cover;
    object-position: 10% 10%;
    position: relative;
    filter: grayscale(100%, 100%);
  }

  .statoverlay {
    width: 100%;
    height: 30vh;
    z-index: 1;
    background-color: #5e37a197;
    position: absolute;
    bottom: 0;
  }

  .statsBox {
    width: 80vw;
    height: 28vh;
    margin: auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
    align-items: center;
    z-index: 2;
  }

  .statBox1,
  .statBox2,
  .statBox3,
  .statBox4 {
    width: 31vw;
    height: 11vh;
    align-content: center;
    z-index: 2;
  }

  .statNo {
    color: white;
    font-size: 3.8vh;
    text-align: center;
    font-weight: 600;
    text-shadow: 1px 1px 5px #fec00722;
  }

  .statPara {
    color: white;
    font-size: 1.5vh;
    text-align: center;
    font-weight: 300;
    text-shadow: 1px 1px 5px #2d1a4e;
  }

  .offers {
    height: 220vh;
    padding-top: 5vh;
    position: relative;
  }

  .offersShapes {
    height: 218vh;
    width: 100%;
    position: absolute;
    z-index: 0;
  }

  .offS1 {
    position: absolute;
    left: 42vw;
  }

  .offS1img {
    height: 25vw;
  }

  .offS2 {
    position: absolute;
    top: 95vh;
  }

  .offS2img {
    height: 45vw;
  }

  .offS3 {
    position: absolute;
    right: 0vw;
    top: 190vh;
  }

  .offS3img {
    height: 40vw;
  }

  h2 {
    font-size: 3vh;
    color: black;
    text-align: center;
    font-weight: 600;
    line-height: 3.6vh;
  }

  .h2purple {
    font-size: 3vh;
    color: #6f42c1;
    font-weight: 600;
  }

  .h2yellow {
    font-size: 3vh;
    color: #fec107;
    font-weight: 600;
  }

  .offersGrid {
    height: 200vh;
    width: 90vw;
    margin: auto;
    margin-top: 4vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .oG1,
  .oG2 {
    height: 94vh;
    width: 72vw;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1;
  }

  /* the div */
  #myModal {
    display: none; /* Hidden by default */
    position: absolute; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 20px; /* Location of the box */
    top: 39vw;
    margin: auto;
    height: auto;
    width: 90vw;
    overflow: auto;
    background-color: black; /* Fallback color */
    background-color: #f2f2f2; /* Black w/ opacity */
    border-radius: 8vw;
    box-shadow: 1px 1px 2px #fec107;
  }

  #myModalB {
    display: none;
    position: absolute;
    z-index: 1;
    padding-top: 20px;
    top: 67vh;
    margin: auto;
    height: auto;
    width: 90vw;
    overflow: auto;
    background-color: black;
    background-color: #f2f2f2;
    border-radius: 8vw;
    box-shadow: 1px 1px 2px #fec107;
  }

  #myModalC {
    display: none;
    position: absolute;
    z-index: 1;
    padding-top: 20px;
    top: 118vh;
    margin: auto;
    height: auto;
    width: 90vw;
    overflow: auto;
    background-color: black;
    background-color: #f2f2f2;
    border-radius: 8vw;
    box-shadow: 1px 1px 2px #fec107;
  }

  #myModalD {
    display: none;
    position: absolute;
    z-index: 1;
    padding-top: 20px;
    top: 167vh;
    margin: auto;
    height: auto;
    width: 90vw;
    overflow: auto;
    background-color: black;
    background-color: #f2f2f2;
    border-radius: 8vw;
    box-shadow: 1px 1px 2px #fec107;
  }

  /* the image */
  .modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
  }

  .img01,
  .img01B,
  .img01C {
  }

  #caption,
  #captionB,
  #captionC, #captionD {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: justify;
    color: black;
    padding-top: 3vh;
    height: 50px;
    font-size: 1.6vh;
  }

  .modal-content,
  #caption,
  #captionB,
  #captionC, #captionD {
    animation-name: zoom;
    animation-duration: 0.6s;
  }

  @keyframes zoom {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }

  .close,
  .closeB,
  .closeC {
    position: absolute;
    top: 1vh;
    right: 3vw;
    color: black;
    font-size: 4.3vh;
    font-weight: bold;
    transition: 0.3s;
  }

  .close:hover,
  .close:focus,
  .closeB:hover,
  .closeB:focus,
  .closeC:hover,
  .closeC:focus {
    color: #6f42c1;
    text-decoration: none;
    cursor: pointer;
  }

  .oG1-expense,
  .oG1-budgets,
  .oG2-split,
  .oG1-savings {
    background-color: white;
    height: 45vh;
    width: 70vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    box-shadow: 1px 1px 2px black;
  }

  .oG-imgBox {
    margin-top: 1.5vh;
  }

  .oG-img,
  #myImg,
  #myImgB,
  #myImgC {
    height: 18vh;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
  }

  #myImg:hover,
  #myImgB:hover,
  #myImgC:hover {
    opacity: 0.7;
  }

  .oG-txtBox {
    width: 62vw;
    height: 22vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: auto;
  }

  .oG-txth4 {
    font-size: 2.3vh;
    line-height: 2.5vh;
    color: black;
    text-align: center;
  }

  .oG-txtpara {
    font-size: 1.4vh;
    color: black;
    text-align: left;
    word-wrap: break-word;
  }

  .oGlearn {
    font-size: 1.3vh;
    color: #6f42c1;
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    width: 44vw;
    height: 4vh;
    align-content: center;
    text-align: left;
    cursor: pointer;
  }

  a.Alink-oGlearn2:link,
  a.Alink-oGlearn2:visited {
    background-color: #6f42c1;
    color: white;
    width: 80vw;
    height: 5vh;
    display: flex;
    text-decoration: none;
    align-items: center;
    text-align: center;
    justify-content: center;
    font-family: "Poppins", serif;
    font-size: 1.5vh;
    border-radius: 10px;
    font-weight: 400;
    font-style: normal;
    margin: auto;
    border: none;
    cursor: pointer;
    position: absolute;
    margin-top: 5vh;
    left: 10vw;
  }

  a.Alink-oGlearn2:hover,
  a.Alink-oGlearn2:active {
    background-color: #5d37a1;
    color: white;
    width: 80vw;
    height: 4vh;
    display: flex;
    align-items: center;
    text-decoration: none;
    text-align: center;
    justify-content: center;
    font-size: 1.5vh;
    font-family: "Poppins", serif;
    font-weight: 400;
    border-radius: 10px;
    border: none;
    transition: 0.3s ease-in;
    position: absolute;
    margin-top: 5vh;
  }

  .accomplish {
    height: 55vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 10vh;
    background: linear-gradient(white, #fec107);
  }

  .wantpara {
    font-size: 1.8vh;
    color: black;
    text-align: center;
    margin-top: 3vh;
  }

  .accomplishGrid {
    height: 29vh;
    width: 95vw;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-bottom: 5vh;
    position: relative;
    margin: auto;
  }

  .accG1,
  .accG2,
  .accG3,
  .accG4,
  .accG5,
  .accG6 {
    background-color: #ffffff;
    height: 22vh;
    width: 70vw;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-content: center;
    justify-content: space-between;
    border-radius: 3vh;
    border-bottom: 3px solid #ac95d6;
    padding: 2vw;
  }

  .mySlides {
    display: none;
  }

  .accG-img1 {
    height: 4vh;
    margin-left: 26vw;
    margin-bottom: 3vh;
  }

  .accG-img2 {
    height: 6vh;
    margin-left: 26vw;
    margin-bottom: 3vh;
  }

  .accG-img3 {
    height: 6vh;
    margin-left: 26vw;
    margin-bottom: 3vh;
  }

  .accG-img4 {
    height: 6vh;
    margin-left: 26vw;
    margin-bottom: 3vh;
  }

  .accG-img5 {
    height: 6vh;
    margin-left: 26vw;
    margin-bottom: 3vh;
  }

  .accG-img6 {
    height: 6vh;
    margin-left: 26vw;
    margin-bottom: 3vh;
  }

  .accG-para {
    color: black;
    font-size: 1.6vh;
    font-weight: 600;
    text-align: center;
    line-height: 2vh;
    transform: translateY(-50%);
  }

  a.Alink-accG:link,
  a.Alink-accG:visited {
    font-size: 1.3vh;
    color: black;
    text-decoration: none;
    display: flex;
    height: 4vh;
    width: 35vw;
    text-align: left;
    align-items: center;
    justify-content: space-between;
    margin-left: 2vw;
  }

  a.Alink-accG:hover,
  a.Alink-accG:active {
    font-size: 1.3vh;
    color: #5d37a1;
    text-decoration: none;
    display: flex;
    height: 4vh;
    width: 38vw;
    font-weight: 600;
    align-items: center;
    transition: 0.5s ease-out;
  }

  .accG-proceedarrow {
    margin-top: 0.5vh;
  }

  .yellowarrowforward {
    height: 3vh;
  }

  .prev {
    cursor: pointer;
    position: absolute;
    top: 40%;
    left: 0;
    width: auto;
    padding: 10px;
    margin-top: 0px;
    color: black;
    font-weight: bold;
    font-size: 3vh;
    transition: 0.6s ease;
    border-radius: 1vw;
    user-select: none;
    z-index: 2;
  }

  .next {
    cursor: pointer;
    position: absolute;
    top: 40%;
    right: 0;
    width: auto;
    padding: 10px;
    margin-top: 0px;
    color: black;
    font-weight: bold;
    font-size: 3vh;
    transition: 0.6s ease;
    border-radius: 1vw;
    user-select: none;
    z-index: 2;
  }

  .prev:hover,
  .next:hover {
    background-color: #ac95d6ad;
    color: #5d37a1;
  }

  .accG-dots {
    margin: auto;
    position: absolute;
    bottom: 0;
  }

  .dot {
    cursor: pointer;
    height: 10px;
    width: 10px;
    margin: 0 2px;
    background-color: #e0e0e0;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
  }

  .dot:active .active, .dot:hover {
    background-color: #5d37a1;
  }

  .fade {
    animation-name: fade;
    animation-duration: 1.5s;
  }

  @keyframes fade {
    from {
      opacity: 0.4;
    }
    to {
      opacity: 1;
    }
  }

    .people {
        height: 140vh;
        width: 100%;
        padding-top: 5vh;
        background-color: #fec107;
    }
    
    .pshape {
        height: 35vh;
        position: absolute;
        z-index: 0;
        margin-top: 40vh;
    }

    .peopleSliderHint {
        margin: auto;
        position: relative;
        text-align: center;
        display: flex;
        font-weight: 100;
        font-size: 1.3vh;
        color: #fff0c3;
        text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.356);
        left: 6vw;
        top: 6vh;
        z-index: 0;
        width: 40vw;
    }
    
    .peopleGrid {
        height: 122vh;
        width: 90vw;
        display: flex;
        flex-direction: column;
        margin: auto;
        justify-content: space-between;
        position: relative;
        padding-top: 2vh;
    }
    
    .pG2a {
        height: 37vh;
        width: 70vw;
        background-color: white;
        box-shadow: 1px 1px 10px 1px black;
        border-radius: 3vh;
        padding: 5vw;
        color: black;
        position: absolute;
        margin: auto;
        z-index: 3;
        /*
        animation-name: pGani;
        animation-duration: 2s;
        animation-delay: 0s;
        animation-iteration-count: 10;
        animation-direction: alternate;
        animation-timing-function: ease-in-out;
        animation-name: fadeup; */
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .pG2 {
        height: 37vh;
        width: 70vw;
        background-color: white;
        box-shadow: 1px 1px 10px 1px black;
        border-radius: 3vh;
        padding: 5vw;
        color: black;
        position: absolute;
        top: 42vh;
        margin: auto;
        z-index: 1;
        /* animation-name: pGani;
        animation-duration: 10s;
        animation-delay: 0s;
        animation-iteration-count: 10;
        animation-direction: alternate;
        animation-timing-function: ease-in-out; */
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    .pG3 {
        height: 37vh;
        width: 70vw;
        background-color: white;
        box-shadow: 1px 1px 10px 1px black;
        border-radius: 3vh;
        padding: 5vw;
        color: black;
        position: absolute;
        margin-top: 80vh;
        /* margin-left: 10vw; */
        z-index: 1;
        /* animation-name: pGani;
        animation-duration: 10s;
        animation-delay: 0s;
        animation-iteration-count: 10;
        animation-direction: alternate;
        animation-timing-function: ease-in-out; */
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    
    .pG2a:hover, .pG2:hover, .pG3:hover {
        height: 37vh;
        width: 70vw;
        background-color: rgb(255, 255, 255);
        color: white;
        box-shadow: 1px 1px 10px 1px #5d37a1;
        border-radius: 3vh;
        padding: 5vw;
        transform: scale(1.1,1.1);
    }
    
    /*
    @keyframes pGani {
        0% {top:20px; bottom:0px;}
        25% {top:0px; bottom:20px;}
        50% {top:20px; bottom:0px;}
        75% {top:0px; bottom:20px;}
        100% {top:20px; bottom:0px;}
    }
    

    @keyframes fadeup {
        0% {top: -20px; display: block;}
        100% {top: 0px; display: none;}
    }
     */
    
    .pGimg {
        height: 8vh;
        margin: auto;
        display: flex;
    }
    
    .pGName {
        font-size: 2.2vh;
        color: black;
        text-align: center;
        margin-top: 2vh;
    }
    
    .pGtext {
        font-size: 1.5vh;
        color: black;
        text-align: justify;
    }
    
    .people-dots {
        position: absolute;
        margin: auto;
        width: 15vw;
        height: 5vh;
        bottom: 0vh;
        top: 50vh;
        margin-left: 30vw;
    }
    
    .pdot {
        background-color: #757575;
    }

    .subscription {
        height: 290vh;
        width: 100%;
        padding-top: 6vh;
    }
    
    .subShape {
        position: relative;
        z-index: 0;
    }
    
    .subShape-img {
        position: absolute;
        top: 55vh;
        height: 50vh;
        z-index: 0;
    }
    
    .subsGrid {
        width: 90vw;
        height: 270vh;
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        z-index: 5;
        margin-top: 5vh;
        align-items: center;
    }
    
    .subsG1, .subsG2, .subsG3 {
        width: 82vw;
        height: 86vh;
        z-index: 6;
        background: linear-gradient(#e8e1f5, #e8e1f5, #e8e1f5, #e8e1f5,#bfafdb);
        border-radius: 4vh;
        border: 1px solid #6f42c1;
        padding: 2vw;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }
    
    /*
    .subs-ani {
        animation-name: subs-ani;
      animation-duration: 20s;
      animation-delay: 2s;
      animation-iteration-count: 5;
      animation-direction: alternate;
      animation-timing-function: ease-in-out;
    }
    
    @keyframes subs-ani {
        0% {background-color: #ac95d6;}
        50% {background-color: #e8e1f5;}
        100% {background-color: #ac95d6;}
      } 
    */
    
    .subsG1-imgbox {
        width: 70vw;
        margin: auto;
        margin-bottom: 1vh;
        padding-bottom: 2vh;
        border-bottom: 1px solid black;
        display: flex;
        flex-direction: column;
    }
    
    .subsG-img {
        height: 13vh;
        margin: auto;
    }

    .subsG-label-main {
        font-size: 2.6vh;
        color: black;
        text-align: center;
        line-height: 3vh;
        margin-top: 1vh;
    }
    
    .subsG1-textbox {
        width: 70vw;
        margin: auto;
    }

    .subsG-label {
        font-size: 2.3vh;
        color: black;
        text-align: left;
        line-height: 3vh;
    }
    
    .subsG-para {
        color: black;
        font-size: 2vh;
    }

    .subsG-pSpan {
      color: #e8e1f5;
      font-size: 1.5vh;
    }
    
    .subsG-ulli {
        width: 63vw;
    }
    
    .subsG-ul {
        list-style-type: none;
    }
    
    .subsG-li {
        color: black;
        font-size: 2vh;
        display: flex;
        line-height: 3.5vh;
    }
    
    .subsG-li-bullet {
    
    }
    
    .bullet {
        height: 2.2vh;
        padding-top: 0.5vh;
    }
    
    .subsG-button {
        width: 60vw;
        height: 10vh;
        margin-top: 2vh;
        display: flex;
        margin: auto;
    }
    
    a.Alink-subsG:link, a.Alink-subsG:visited {
        background-color: #6f42c1;
        text-decoration: none;
        height: 7vh;
        width: 55vw;
        color: white;
        border-radius: 1.8vh;
        font-size: 2.2vh;
        display: flex;
        align-items: center;
        text-align: center;
        margin: auto;
    }   
    
    a.Alink-subsG:hover, a.Alink-subsG:active {
        background-color: #382161;
        text-decoration: none;
        height: 7vh;
        width: 55vw;
        color: white;
        border-radius: 1.8vh;
        font-size: 2.2vh;
        transition: 0.5s ease-in-out;
        text-align: center; 
    }

    .faqs {
      height: 180vh;
      width: 100%;
      position: relative;
      background-color: #382161;
    }
    
    .faqShapes {
      width: 100%;
      height: 180vh;
      position: absolute;
      z-index: 1;
      display: inline-block;
    }
    
    .faqShape1 {
      position: absolute;
      height: 30vh;
      bottom: 0vh;
      z-index: 1;
    }
    
    .faqShape2 {
      position: absolute;
      height: 20vh;
      right: 0vw;
      z-index: 1;
    }
    
    .faqBox {
      border: 2px solid white;
      width: 90vw;
      height: 166vh;
      border-radius: 4vh;
      margin: auto;
      z-index: 3;
      position: absolute;
      background-color: #160d27;
      box-shadow: 2px 2px 16px 6px #160d27;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      padding-top: 4vh;
      top: 10vh;
      left: 4.8vw;
    }
    
    .faqTextBox {
      z-index: 3;
      /* border: 2px solid yellow; */
      width: 80vw;
      height: 155vh;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    
    .faq-h2 {
      color: white;
      font-size: 3.5vh;
      text-align: center;
      font-weight: 500;
      display: inline-block;
    }
    
    .fTB {
      /* border: 2px solid plum; */
      width: 70vw;
      margin: auto;
    }
    
    .faqHeading {
      color: white;
      font-size: 2vh;
      font-weight: 400;
    }
    
    #faqPara, #faqPara1, #faqPara2, #faqPara3, #faqPara4, #faqPara5, #faqPara6, #faqPara7, #faqPara8, #faqPara9, #faqPara10, #faqPara11 {
      color: #160d27;
      font-size: 1.3vh;
      font-weight: 300;
      display: none;
      background-color: white;
      padding: 1vw;
      border-radius: 1vw;
      width: 68vw;
    }
    
    a.Alink-why:link, a.Alink-why:visited {
      text-decoration: none;
      display: flex;
      cursor: pointer;
    }
    
    a.Alink-why:hover, .whyiconimg:hover {
      color: #6f42c1;
    }
    
    a.Alink-why:active, .whyiconimg:active {
      color: #5d37a1;
    }

    .takecontrol {
      width: 100%;
      height: 70vh;
    }
    
    .control-box {
      display: flex;
      flex-direction: column;
      height: 72vh;
    }

    .control-image {
      margin: auto;
    }

    .ctrlimg {
      height: 30vh;
    }
    
    .control-text {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 80vw;
    }
    
    .control-head {
      color: black;
      font-size: 2.6vh;
      text-align: center;
      font-weight: 600;
      display: inline-block;
      width: 90vw;
    }
    
    .control-body {
      font-size: 1.9vh;
      color: rgb(36, 35, 35);
      padding-top: 2rem;
      padding-bottom: 2rem;
      text-align: center;
      width: 90vw;
    }
    
    .get-started-btn {
      background: rgb(111, 66, 193);
      border-radius: 1.2rem;
      border: none;
      color: rgb(255, 255, 255);
      width: 46vw;
      height: 6vh;
      font-size: 2vh;
    }

    .get-started-btn:hover {
      border: 2px solid #5d37a1;
      border-radius: 1.2rem;
      border: none;
      color: rgb(255, 255, 255);
      width: 46vw;
      height: 6vh;
      font-size: 2vh;
    }

    footer {
      background: #160d27;
      height: 125vh;
    }
    
    .footer-container {
      margin-top: 8rem;
      background: rgb(22, 13, 39);
      padding-bottom: 5rem;
      display: flex;
      flex-direction: column;
      padding-top: 2.5rem;
      height: 120vh;
      width: 95vw;
    }
    
    .contact {
      margin: auto;
      width: 70vw;
      height: 30vh;
    }
    
    #footer-logo {
      height: 9vh;
      width: 53vw;
      margin: auto;
    }
    
    .footerHeading {
      color: rgb(245, 245, 245);
      font-size: 1.4rem;
      margin-top: 1.2rem;
      text-align: left;
    }
    
    .social-media {
      margin-top: 1.2rem;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    
    #media-icon {
      height: 5vh;
      border: 1px solid #ac95d6;
      border-radius: 50%;
    }
    
    .footer-links-menu {
      margin-top: 2rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      width: 90vw;
      height: 80vh;
    }
    
    .footer-links {
      margin-top: 1.5rem;
      width: 36vw;
    }
    
    .footerHeading {
      font-size: 2vh;
      color: rgb(255, 255, 255);
    }
    
    .footerul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
      margin-top: 2rem;
    }
    
    .footerli {
      font-size: 1.6rem;
      color: rgb(230, 229, 229);
      font-family: "poppins", serif;
      cursor: pointer;
    }

    a.Alink-faq:link, a.Alink-faq:visited {
      color: white;
      text-decoration: none;
      cursor: pointer;
    }
    
    a.Alink-faq:hover, a.Alink-faq:active {
      color: #ac95d6;
      transition: 0.3s ease-in-out;
    }
}