@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');

* {
	margin: 0;
	padding: 0;
}

.padding_0 {
	padding: 0;
}

body {
	font-family: 'Quicksand', sans-serif;
}

h2 {
	font-weight: 900;
}

figure {
	margin-bottom: 0;
}

.header {
	background-color: #25eab5d1;
}

header {
	background-color: #25eab5d1;
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1;
}

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

.navbar-collapse {
	align-items: center;
	justify-content: flex-end;
}

.top-logo figure a {
	text-decoration: none;
	color: #fff;
	margin-left: 20px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.right-btns { 
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.right-btns h2 {
	color: #fff;
	margin-bottom: 0;
}

.subs-card:nth-child(3),
.subs-card:nth-child(6) {
	margin-right: 0;
}

.right-btns .business {
	background-color: #fff;
    border-radius: 6px;
    color: #25eab5;
    box-shadow: 0 1px 4px rgb(0 0 0 / 60%);
    padding: 4px 12px;
    text-decoration: none;
    font-weight: 900;
    transition: .5s ease-in-out;
    margin: 0 20px;
}

.right-btns .business:hover {
	background-color: #cdcdcd;
	color: #fff;
}

.right-btns .user {
	background-color: #fff;
    border-radius: 6px;
    color: #25eab5;
    box-shadow: 0 1px 4px rgb(0 0 0 / 60%);
    padding: 4px 30px;
    text-decoration: none;
    font-weight: 900;
    transition: .5s ease-in-out;
}

.right-btns .user:hover {
	background-color: #cdcdcd;
	color: #fff;
}

#top-banner {
	/* background-color: rgb(106, 222, 179); */
	margin-top: 62px;
	/* position: relative; */
}

.bg-green {
	background-color: rgb(106, 222, 179);
}

section .banner-right {
	padding-top: 150px;
	padding-bottom: 65px;
}

.banner-right .banner-mob figure{
	animation-name: moveInleft;
    animation-duration: 3s;
    height: 550px;
    width: 500px;
    position: absolute;
    top: -91px;
    left: -7px;
}

.banner-right .banner-mob {
	position: relative;
}

.banner-right .banner-mob figure img {
	height: 100%;
}




@keyframes moveInleft {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }

    80% {
        transform: translateX(10px);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

.banner-right .banner-cup {
	text-align: center;
}

.bottom-wave figure {
	width: 100%;
}

.bottom-wave figure img {
	width: 100%;
}

.banner-left .mid-section p {
	/* width: 55%; */
    font-size: 25px;
    margin: 0 0 0 auto;
    text-align: center;
    color: #fff;
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
}

.banner-left .top-section h1 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 900;
    color: #fff;
	/* width:55%; */
    text-align: center;
    margin: 0 0 0 auto;
	font-size: 3.2rem;
}

.banner-left .app-store-icon figure {
	/* width:55%; */
    text-align: center;
    margin: 0 0 0 auto;
}

.banner-left .app-store-icon figure a img {
	box-shadow: 0px 1px 4px 0px rgb(0 0 0 / 60%);
    border-radius: 6px;
}

.banner-left {
	position: absolute;
	top: 18%;
    left: 21%;
}

.banner-left .top-section {
	width: 40%;
	margin-bottom: 30px;
}

.banner-left .mid-section {
	width: 40%;
	margin-bottom: 30px;
}

.banner-left .app-store-icon {
	width: 40%;
}

.holder{
	position: static;
    color: #fff;
}
  
  .right-bar{
	position: fixed;
    right: 0px;
    bottom: 0px;
    top: 30%;
	list-style: none;
    padding: 10px;
    width: 14%;
    height: 308px;
    background-color: transparent;
	text-align: right;
  }
  
  .right-bar a{
	display:block;
	padding: 6px 6px;
	color:#000;
	text-decoration:none;
  }

  .right-bar a span {
	margin-left: 20px;
  }
  
  
  .act{ 
	background-color: transparent; 
}

.act span i {
	font-weight: 900;
}

.upper-mid h1 {
	font-size: 29px;
    text-align: center;
    font-weight: 900;
    color: #30dd9d;
}

.upper-mid p {
	font-size: 19px;
    text-align: center;
	min-height: 114px;
	color: #000;
}

/*.navbar-nav {
	display: none;
}*/

.navbar .show {
	display: -webkit-box;
	transition: .5s ease-in-out;
}

.upper-mid figure {
	height: 300px;
}

.upper-mid figure img {
	height: 100%;
	width: 100%;
}

.moving-mug {
	background-image: url(../images/top-wave.webp);
    background-size: cover;
    background-repeat: no-repeat;
	margin-top: 50px;
}

.moving-mug figure {
	height: 250px;
}

@keyframes moveInright {
    30% {
        opacity: 0;
        transform: translateX(180px);
    }

    80% {
        transform: translateX(0px);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

.moving-mug figure img {
	height: 100%;
	animation-name: moveInright;
    animation-duration: 3s;
	position: relative;
	top: 65px;
}

.moving-mug-bottom {
	background-image: url(../images/bottom-wave.webp);
    background-size: cover;
    background-repeat: no-repeat;
	margin: 0;
}

.moving-mug-bottom figure {
	height: 72%;
	margin-left: 4rem;
}

.moving-mug-bottom figure img {
	height: 100%;
	animation-name: moveleft;
    animation-duration: 3s;
	position: relative;
	top: 65px;
}

@keyframes moveleft {
    0% {
        opacity: 0;
        transform: translateX(-250px);
    }

    80% {
        transform: translateX(0px);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

.subs-card {
    background-color: #fff;
    margin: 20px 20px;
    border-radius: 12px;
    box-shadow: 0px 1px 4px 0px rgb(0 0 0 / 60%);
    text-align: center;
    width: 397px;
    padding: 12px 12px;

}


.width-for-benefit {
	width: 400px !important;
}

.subs-card h1 {
	font-size: 30px;
    text-align: center;
    font-weight: 900;
    color: #30dd9d;
	font-family: 'Quicksand', sans-serif;
}

.subs-card p {
	font-size: 26px;
	font-weight: 900;
	color: #333333;
	font-family: 'Quicksand', sans-serif;
}

.subs-heading {
	margin-top: 68px;
}

.subs-heading p {
	font-size: 40px;
	font-weight: 900;
	font-family: 'Quicksand', sans-serif;
	animation-name: moveup;
    animation-duration: 3s;
}

@keyframes moveup {
    00% {
        opacity: 0;
        transform: translateY(80px);
    }

    80% {
        transform: translateY(0px);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

.benefits-head {
    margin-top: 45px;
    margin-bottom: 30px;
}	

.benefits-head h1 {
	font-size: 40px;
    text-align: center;
    font-weight: 900;
    color: #30dd9d;
	font-family: 'Quicksand', sans-serif;	
}

.white-head h1 {
	font-size: 40px;
    text-align: center;
    font-weight: 900;
    color: #fff;
	font-family: 'Quicksand', sans-serif;
}

.white-head p {
	font-size: 22px;
	text-decoration: underline;
    text-align: center;
    font-weight: 900;
    color: #fff;
	font-family: 'Quicksand', sans-serif;
}

.green-head p {
	font-size: 40px;
    text-align: center;
    font-weight: 900;
    color: #30dd9d;
	font-family: 'Quicksand', sans-serif;
}

.custom-name {
	color: #fff;
	font-weight: 900;
	font-size: 22px;
	padding: 2px 10px;
}

.navbar-nav .nav-item .nav-link {
	background-color: #fff;
    color: #000;
    font-weight: 900;
    border-radius: 10px;
    padding: 7px 22px;
	margin-right: 10px;
	transition: .5s ease-in-out;
}

.benefits-partitions .benefits-section {
    margin-right: 48px;
    margin-bottom: 40px;
    background-color: #fff;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 1px 4px 7px 1px rgb(0 0 0 / 25%);
    width: 400px;
}

.benefits-partitions .benefits-section:nth-child(3) {
	margin-right: 0;
}

.benefits-partitions .benefits-section:nth-child(6) {
	margin-right: 0;
}

.benefits-partitions .benefits-section h1 {
	color: #30dd9d;
	font-size: 32px;
	font-weight: 900;
	font-family: 'Quicksand', sans-serif;
}

.benefits-partitions .benefits-section p {
	font-size: 23px;
	font-weight: 900;
	color: #333333;
	font-family: 'Quicksand', sans-serif;	
}

.modernising-bg .top-wave-img figure{
	height: 100%;
	width: 100%;
}

.modernising-bg .top-wave-img figure img {
	height: 100%;
	width: 100%;
}

.modernising-bg .bot-wave-img figure{
	height: 100%;
	width: 100%;
}

.modernising-bg .bot-wave-img figure img {
	height: 100%;
	width: 100%;
}

.modernising-bg {
	background-color: rgb(106, 222, 179);
	align-items: center;
}

.modernising-img {
	display: flex;
	align-items: center;
}

.modernising-img figure {
	height: 250px;
	width: 100%;
	display: flex;
	justify-content: flex-sta40;
}

.modernising-img figure img {
	height: 100%;
}


.modernising-btns {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.modernising-btns a {
	background-color: #fff;
    padding: 6px 40px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 21px;
    letter-spacing: 1px;
	color: #30dd9d;
	font-weight: 900;
	font-family: 'Quicksand', sans-serif;
	transition: .5s ease-in-out;
	box-shadow: 0px 1px 4px 0px rgb(0 0 0 / 60%);
}

.modernising-btns a:hover {
	background-color: #737272;
	color: #fff;
}

.mr-3 {
	margin-right: 2rem;
}

.modernising p {
	font-size: 40px;
	font-weight: 900;
	color: #fff;
	font-family: 'Quicksand', sans-serif;
}

.about-sec .about-items figure{
	width: 80%;
	height: 80%;
	margin: 0 auto;
}

.about-sec .about-items figure img {
	width: 100%;
	height: 100%;
	box-shadow: 0px 1px 4px 0px rgb(0 0 0 / 60%);
}

.about-sec .about-items p {
	font-size:31px;
	font-weight: 900;
	color: #30dd9d;
	font-family: 'Quicksand', sans-serif;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 93px;
}

.about-sec {
	margin: 60px 0 20px 0;
}

.second-last-sec {
	background-image: url(../images/top-wave.webp);
    background-size: 100%;
    background-repeat: no-repeat;
	margin: 0;
	background-color: rgb(106, 222, 179);
    padding-top: 250px;
}

.big-mug figure {
	height: 500px;
	width: 500px;
	margin: 0 auto;
}

.big-mug figure img {
	height: 100%;
}

.second-last-sec p {
	font-size: 40px;
	font-weight: 900;
	margin-top: 25px;
	margin-bottom: 20px;
	color: #fff;
	font-family: 'Quicksand', sans-serif;
}

.final-app-icon figure img {
	box-shadow: 0px 1px 4px 0px rgb(0 0 0 / 60%);
	border-radius: 8px;
}

.bottom-social ul {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 0;
	margin-bottom: 0;
}

.bottom-social ul li a{
	color: #fff;
	text-decoration: none;
	padding: 0 12px;
	font-size: 18px;
}

.bottom-social p {
	font-size: 14px;
	font-weight: 500;
	margin-top: 8px;
	margin-bottom: 0;
	padding-bottom: 30px;
	text-align: center;
	color: #fff;
}

.footer-tabs ul {
	list-style: none;
	padding-left: 0;
}

footer {
	background-color: rgb(106, 222, 179);
}

.footer .footer-tabs p {
	font-size: 24px;
	color: #1b382d;
	font-weight: 900;
	font-family: 'Quicksand', sans-serif;
}

.footer .footer-tabs ul li {
	margin-bottom: 20px;
}

.footer .footer-tabs ul li a{
	background-color: #50a786;
	color: #fff;
	padding: 8px 20px;
	font-weight: 900;
	text-decoration: none;
    border-radius: 25px;
	transition: .5s ease-in-out;
}

.footer .footer-tabs ul li a:hover {
	background-color: #fff;
	color: #50a786;
}

.footer .footer-tabs figure {
	height: 62px;
	width: 200px;
	margin:0 auto;
}

.footer .footer-tabs figure img {
	height: 100%;
	width: 100%;
	box-shadow: 0px 1px 4px 0px rgb(0 0 0 / 60%);
	border-radius: 8px;
}

.summary .summary-transition figure {
	height: 100%;
	width: 100%;
}

.summary .summary-transition figure img {
	height: 100%;
	width: 100%;
	animation-name: summaryInleft;
    animation-duration: 3s;
}

@keyframes summaryInleft {
    0% {
        opacity: 0;
        transform: translateX(-400px);
    }

    80% {
        transform: translateX(10px);
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

.wrapper {
	width: 60%;
	margin: 0 auto;
  }
  
  h1 {
	margin-bottom: 20px;
  }
  
  /* .container {
	background-color: white;
	color: black;
	border-radius: 20px;
	box-shadow: 0 5px 10px 0 rgb(0,0,0,0.25);
	margin: 20px 0;
  } */
  
  .question {
	font-size: 1.2rem;
	font-weight: 600;
	position: relative;
	display: flex;
	align-items: center;
	cursor: pointer;
	margin-bottom: 10px;
	transition: .5s ease-in-out;
  }

  .question:hover span {
	background-color: rgb(80, 167, 134);
  }

  .question p {
    background-color: #f7fdfb;
    margin: 0;
    padding: 36px 28px;
    width: 100%;
	color: #000;
    /* margin-bottom: 10px; */
}

.question span {
    padding: 18px 28px;
    width: 100px;
    font-size: 44px;
	color: #000;
    background-color: #e9faf3;
	transition: .5s ease-in-out;
}
  
  /* .question::after {
	content: "\002B";
	font-size: 2.2rem;
	position: absolute;
	right: 20px;
	transition: 0.2s;
  }
  
  .question.active::after {
	transform: rotate(45deg);
  } */
  
  .answercont {
	max-height: 0;
	overflow: hidden;
	transition: 0.3s;
  }
  
  .answer {
	padding: 0 20px 20px;
	line-height: 1.5rem;
	color: #000;
  }
  
  .question.active + .answercont {
  }
  
  @media screen and (max-width: 790px){
	html {
	  font-size: 14px;
	}
	.wrapper {
	width: 80%;
  }
  }

  .faq-list {
	list-style: upper-alpha;
  }

  .for-searchbox {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
  }

  .searchbox{
    position:relative;
    min-width:50px;
    width:0%;
    height:50px;
    overflow:hidden;    
    -webkit-transition: width 0.6s; 
    -moz-transition: width 0.6s;
    -ms-transition: width 0.6s;
    -o-transition: width 0.6s;
    transition: width 0.6s;
}

.searchbox-input{
    top:0;
    right:0;
    border:0;
    outline:0;
    /* background:#dcddd8; */
	border-bottom: 2px solid rgb(106, 222, 179);
    width:100%;
    height:50px;
    margin:0;
    padding:0px 55px 0px 20px;
    font-size:20px;
    color: #000;
	transition: .5s ease-in-out;
}
.searchbox-input::-webkit-input-placeholder {
    color: #000;
    opacity:0.8;
}
.searchbox-input:-moz-placeholder {
        color: #000;
    opacity:0.8;
}
.searchbox-input::-moz-placeholder {
        color: #000;
    opacity:0.8;
}
.searchbox-input:-ms-input-placeholder {
        color: #000;
    opacity:0.8;35614969071
}

.searchbox-icon,
.searchbox-submit{
    width:50px;
    height:50px;
    display:block;
    position:absolute;
    top:0;
    font-family:verdana;
    font-size:22px;
    right:0;
    padding:0;
    margin:0;
    border:0;
    outline:0;
    line-height:50px;
    text-align:center;
    cursor:pointer;
    color:#000;
    background:rgb(106, 222, 179);
}

.sign-up figure {
	height: 88%;
    width: 45%;
}

.sign-up figure img {
	height: 100%;
	width: 100%;
}

.sign-up-head h1 {
	text-align: right;
}

.sign-up-main {
	align-items: center;
}

.searchbox-open{
    width:100%;
}
.center {

  text-align: center;
  margin: 0 auto;
  float: none;
  margin-top: 40px;
}

.mobile-partitions .screenshots figure {
	width: 100%;
	height: 100%;
}

.mobile-partitions .screenshots figure img {
	width: 100%;
	height: 100%;
}

.sign-up-img figure {
	width: 100%;
	height: 100%;
	padding: 0;
}

.sign-up-img figure img {
	height: 100%;
	width: 100%;
}

.demo-msg label {
	color: #6adeb3;
	font-weight: 900;
	margin-bottom: 4px;
}

.for-input input {
	width: 100%;
	outline: #6adeb3;
	box-shadow: 0.00px 1.00px 4px 0px rgba(0,0,0,0.2);
	border: 2px solid #6adeb3;
	border-radius: 16px;
	padding: 14px 14px;
    text-align: center;
	background-color: #e1f8f0;
	-webkit-appearance: none;
	transition: .5s ease-in-out;
}

.for-input input:focus {
	box-shadow: 0 4px 9px rgb(106, 222, 179);
}

.input-textarea textarea {
	width: 100%;
	outline: #6adeb3;
	box-shadow: 0.00px 1.00px 4px 0px rgba(0,0,0,0.2);
	border: 2px solid #6adeb3;
	border-radius: 16px;
    text-align: center;
	padding: 6px 4px;
	background-color: #e1f8f0;
	transition: .5s ease-in-out;
}

.input-textarea textarea:focus {
	box-shadow: 0 4px 9px rgb(106, 222, 179);
}


.for-input input[type=number]::-webkit-inner-spin-button, 
.for-input input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

.demo-submit {
	padding: 18px 72px;
    border: 2px solid #6adeb3;
    outline: none;
    background-color: #6adeb3;
    color: #fff;
    font-weight: 900;
    border-radius: 16px;
	transition: .5s ease-in-out;
	text-decoration: none;
}

.demo-submit:hover {
	background-color: transparent;
	color: #6adeb3;
}

.privacy-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	padding: 100px 0;
}

.privacy-banner figure {
	width: 110px;
}

.privacy-banner figure img {
	width: 100%;
}

.privacy-banner h1 {
    font-size: 50px;
    font-weight: 900;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 10px;
    color: #fff;
    font-family: 'Quicksand', sans-serif;
}

.privacy-width {
	width: 70%;
    margin: 0 0 80px auto;
}

.side-menu ul {
	list-style: none;
}

.side-menu ul li {
	padding: 17px 4px;
}

.side-menu ul li a{
	text-decoration: none;
	font-weight: 900;
	color: #000;
	transition: .5s ease-in-out;
}

.side-menu ul li a:hover {
	color: #4743c5;
}

.privacy-width h1 {
	font-size: 30px;
	font-weight: 900;
	margin-bottom: 6px;
}

.active-nav {
	color: #4743c5 !important;
}

.tandc-width {
	width: 70%;
    margin: 0 0 80px auto;
}

.tandc-width h5 {
	font-weight: 900;
	margin-bottom: 6px;
}

.tandc-width h1 {
	font-weight: 900;
	font-size: 40px;
}