@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}


* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

*:before,
*:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/*-----bootstrap style reset-----*/

@media (min-width: 576px) {
	.container {
		max-width: 100%;
	}
}

@media (min-width: 768px) {
	.container {
		max-width: 750px;
	}
}

@media (min-width: 992px) {
	.container {
		max-width: 960px;
	}
}

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

@media (min-width: 1300px) {
	.container {
		max-width: 1230px;
	}
}

.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12,
.col,
.col-auto,
.col-sm-1,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-10,
.col-sm-11,
.col-sm-12,
.col-sm,
.col-sm-auto,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12,
.col-md,
.col-md-auto,
.col-lg-1,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-10,
.col-lg-11,
.col-lg-12,
.col-lg,
.col-lg-auto,
.col-xl-1,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-10,
.col-xl-11,
.col-xl-12,
.col-xl,
.col-xl-auto,
.col-xxl-1,
.col-xxl-2,
.col-xxl-3,
.col-xxl-4,
.col-xxl-5,
.col-xxl-6,
.col-xxl-7,
.col-xxl-8,
.col-xxl-9,
.col-xxl-10,
.col-xxl-11,
.col-xxl-12,
.col-xxl,
.col-xxl-auto {
	padding-right: 15px;
	padding-left: 15px;
}

.container {
	padding-right: 15px;
	padding-left: 15px;
}

.row {
	margin-left: -15px;
	margin-right: -15px;
}




img {
	max-width: 100%;
	height: auto;
}

body {
	font-family: "Nunito Sans", serif;
	color: #4F4F4F;
	font-size: 24px;
	font-weight: 400;
}

h1 {
	font-size: 70px;
	line-height: 42px;
	color: #4F4F4F;
	font-weight: 700;
}

h2 {
	font-size: 50px;
	line-height: 55px;
	color: #1A33D3;
	font-weight: 700;
}

a {
	-webkit-transition: all 300ms ease-in;
	-moz-transition: all 300ms ease-in;
	-ms-transition: all 300ms ease-in;
	-o-transition: all 300ms ease-in;
	transition: all 300ms ease-in;
}

p {
	font-size: 18px;
	line-height: 28px;
	color: #000000;
	font-weight: 400;
	margin-bottom: 20px;
}

ul li {
	list-style: none;
}

strong {
	font-weight: 800;
}















.mainouter {
	overflow: hidden;
}

.header-container {
	float: left;
	width: 100%;
	padding: 15px 0;
	background: #ffffff;
	box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.04);
	position: fixed;
	top: 0;
	z-index: 100;
}

.main-menu {
	width: auto;
	float: right;
	padding-top: 9px;
}

.main-menu ul {
	display: flex;
	gap: 0 40px;
	align-items: center;
}

.main-menu ul li {
	list-style: none;
}

.main-menu ul li a {
	color: #000;
	font-size: 22px;
	text-decoration: none;
	cursor: pointer;
}

.main-menu ul li a:hover {
	color: #F48220;
}

.logo {
	width: 250px;
}

.termsTrigger {
	cursor: pointer;
}

.banner-container {
	float: left;
	width: 100%;
	padding: 100px 0 70px;
	position: relative;
}

.banner-content {
	float: left;
	width: 65%;
}

.banner-content img {
	width: 693px;
	margin-bottom: 36px;
}

.banner-content p {
	color: #4F4F4F;
	font-size: 20px;
	line-height: 35px;
	margin-bottom: 36px;
}

.banner-content ul {
	display: flex;
	gap: 0 75px;
	align-items: center;
	margin-bottom: 50px;
}

.banner-content ul li img {
	width: 220px;
	margin: 0;
}

.banner-content p a {
	font-weight: 800;
	color: #4F4F4F;
}

.banner-content .mainBtn {
	margin-bottom: 40px;
}

.banner-image {
	float: right;
	width: 50%;
	position: absolute;
	right: 0;
	bottom: 0;
}

.graphic-img {
	position: absolute;
}

.ball1 {
	bottom: 26px;
	left: -57px;
	animation: ball1 4s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

.ball2 {
	bottom: -27px;
	animation: ball2 4s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

.ball3 {
	bottom: 14px;
	left: 195px;
	width: 20px;
	animation: ball3 4s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

.coin1 {
	bottom: 43px;
	left: 116px;
	animation: coin1 4s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

.volcano {
	bottom: 0;
	left: 159px;
	height: 400px;
	width: 417px;

}

.volImage {
	position: absolute;
	top: 0px;
	left: 0px;
	animation: fadeInOut 4s infinite ease-in-out;
}

.volImage1 {
	animation-delay: 6s;
	z-index: 1;
}

.volImage2 {
	animation-delay: 4s;
	z-index: 2;
}

.rocket {
	left: 232px;
	bottom: 30px;
	width: 266px;
	animation: rocket 4s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
	z-index: 10;
}

.ball4 {
	left: 528px;
	bottom: 29px;
	animation: ball4 4s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

.ball5 {
	left: 493px;
	bottom: -6px;
	animation: ball5 4s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

.ball6 {
	left: 566px;
	bottom: 0;
	width: 256px;
	animation: ball6 4s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

.ball7 {
	bottom: -11px;
	left: 155px;
	animation: ball7 4s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

.coin2 {
	left: 480px;
	bottom: 410px;
	width: 93px;
	animation: coin2 4s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}

.coin3 {
	left: 570px;
	bottom: 231px;
	width: 193px;
	animation: coin3 4s cubic-bezier(0.215, 0.610, 0.355, 1) infinite;
}


/*ball1*/
@keyframes ball1 {

	0%,
	100% {
		transform: scale(1.2);
	}

	40%,
	60% {
		transform: scale(1);
	}
}

/*ball2*/
@keyframes ball2 {

	0%,
	100% {
		transform: scale(1.2);

	}

	40%,
	60% {
		transform: scale(1);
	}
}

/*ball3*/
@keyframes ball3 {
	0% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-30px);
	}

	60% {
		transform: translateY(-30px);
	}

	100% {
		transform: translateY(0);
	}
}


/*ball4*/
@keyframes ball4 {
	0% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-50px);
	}

	60% {
		transform: translateY(-50px);
	}

	100% {
		transform: translateY(0);
	}
}

/*ball5*/
@keyframes ball5 {
	0% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(10px);
	}

	60% {
		transform: translateY(10px);
	}

	100% {
		transform: translateY(0);
	}
}


/*ball6*/
@keyframes ball6 {
	0% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(40px);
	}

	60% {
		transform: translateY(40px);
	}

	100% {
		transform: translateY(0);
	}
}

/*ball7*/
@keyframes ball7 {

	0%,
	100% {
		bottom: -11px;
	}

	40%,
	60% {
		bottom: -20px;
	}
}

/*volcano*/
@keyframes fadeInOut {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*Coin1*/
@keyframes coin1 {

	0%,
	100% {
		transform: translate(0, 0);
		/* Start and end at original position */
	}

	50% {
		transform: translate(17.50px, -40px);
		/* Move along a 100° angle */
	}
}

/*Coin2*/
@keyframes coin2 {

	0%,
	100% {
		transform: translate(0, 0);
		/* Start and end at original position */
	}

	50% {
		transform: translate(17.50px, -10px);
		/* Move along a 100° angle */
	}
}

/*Coin3*/
@keyframes coin3 {

	0%,
	100% {
		transform: translate(0, 0);
		/* Start and end at original position */
	}

	50% {
		transform: translate(-17.50px, -40px);
		/* Move along a 120° angle */
	}
}

/*Rocket*/
@keyframes rocket {
	0% {
		transform: translateY(0);
	}

	40% {
		transform: translateY(-30px);
	}

	60% {
		transform: translateY(-30px);
	}

	100% {
		transform: translateY(0);
	}
}

.content-container {
	float: left;
	width: 100%;
	padding-top: 128px;
}

.firstSection {
	position: relative;
}

.mainBtn {
	font-family: "Nunito Sans";
	font-size: 22px;
	font-weight: 700;
	color: #ffffff;
	text-decoration: none;
	padding: 8px 47px 8px 20px;
	border-radius: 100px;
	display: inline-block;
}

.yellow {
	border: 2px solid #F48220;
	background: #F48220 url("../images/svg/angle_right_white.svg") no-repeat 140px center;
}

.yellow:hover {
	background: #ffffff url("../images/svg/angle_right_orange.svg") no-repeat 140px center;
	color: #F48220;
}

.white {
	border: 2px solid #ffffff;
	color: #4F4F4F;
	text-decoration: underline;
	background: #ffffff url("../images/svg/angle_right_black.svg") no-repeat 140px center;
}

.white:hover {
	border: 2px solid #F48220;
	background: #ffffff url("../images/svg/angle_right_orange.svg") no-repeat 140px center;
	color: #F48220;
}

.mainBtn img {
	width: 24px;
	margin: 0 0 0 4px;
}

.content-section {
	float: left;
	width: 100%;
	padding: 100px 0;
}

.grey {
	background: #F2F2F2;
}

.section-head {
	text-align: center;
	padding-bottom: 50px;
}

.section-head h2 {
	padding-bottom: 50px;
}

.section-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px 0;
	width: 100%;
	padding: 0 170px;
	margin-bottom: 90px;
}

.grid-single {
	width: 250px;
	background-color: #ffffff;
	display: flex;
	gap: 63px 0;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	border-radius: 20px;
	height: 270px;
	text-align: center;
	-webkit-transition: all 600ms ease;
	-moz-transition: all 600ms ease;
	-ms-transition: all 600ms ease;
	-o-transition: all 600ms ease;
	transition: all 600ms ease;
	padding: 30px 0;

}

.grid-single img {
	/* -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease; */
	transition: all 600ms ease;
}

.grid-single:hover img {
	transform: translateY(-8px);
}

.grid-single:hover {
	box-shadow: 0px 15px 18px 0px #D9BAFF;
	/* background: #ECECEC; */
}

.grid-single span {
	font-size: 26px;
	font-weight: 500;
	line-height: 34px;
}

.bottom-section {
	width: 100%;
	display: flex;
	gap: 30px 0;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.list-section {
	float: left;
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding-bottom: 50px;
}

.list-content {
	float: left;
	width: 60%;
	padding-top: 20px;
}

.list-content ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* 3 columns with equal width */
	gap: 20px 60px;
}

.list-content ul li {
	list-style: none;
	float: left;
	border-bottom: 1px solid #4F4F4F;
	padding-bottom: 15px;
	margin-bottom: 15px;
	display: flex;
	align-items: center;
	gap: 0 13px;
}

.list-content ul li span {
	font-size: 20px;
}

.list-content ul li img {
	align-self: flex-start;
	width: 30px;
}

.image-right {
	float: right;
}

.image-right img {
	width: 400px;
}

.timeline-section {
	display: flex;
}

.timeline-left {
	float: left;
	width: 55%;
}

.timeline-left .left-content .mainBtn:hover {
	background-color: #4F4F4F;
}

.left-content {
	background: #4F4F4F;
	padding: 60px 30px;
}

.left-content p {
	color: #ffffff;
	line-height: 30px;
}

.left-content .mainBtn {
	margin-bottom: 30px;
}

.terms-condition a {
	font-weight: 800;
	color: #4F4F4F;
}

.terms-condition a:hover {
	color: #F48220;
}

.left-content .terms-condition a {
	color: #ffffff;
}

.timeline-right {
	width: 45%;
	padding-left: 50px;
	align-self: center;
}

.timeline-right ul li {
	border-bottom: 1px solid #C8A7F0;
	padding: 0 20px 35px 0;
	display: flex;
	align-items: flex-start;
	gap: 0 20px;
	margin-bottom: 40px;
}

.timeline-right ul li:last-child {
	margin-bottom: 0;
}

.programme-name {
	color: #4F4F4F;
	font-size: 20px;
}

.programme-time {
	font-size: 20px;
	font-weight: 700;
	color: #1A33D3;
}

.accordion-button::after {
	background: url(../images/svg/plus.svg) no-repeat center center;
	background-size: 30px 30px;
	width: 30px;
	height: 30px;
}

.accordion-button:not(.collapsed)::after {
	background: url(../images/svg/minus.svg) no-repeat center center;
	background-size: 30px 30px;
	width: 30px;
	height: 30px;
}

.accordion-item {
	border-radius: 0;
	border-left: 0;
	border-right: 0;
	border-top: 0;
	border-bottom-color: #522D7F;
}

.accordion-button {
	font-size: 20px;
	font-weight: 500;
	background-color: none;
	padding: 10px 0;
	font-family: "Inter", sans-serif;
}

.accordion-button.collapsed {
	background-color: none;
}

.accordion-button.collapsed:focus {
	box-shadow: none;
	background-color: none;
}

.accordion-button:not(.collapsed) {
	background-color: transparent !important;
	color: #4F4F4F;
	font-family: "Inter", sans-serif;
	box-shadow: none;
	font-weight: 500;
	font-size: 20px;
	/* line-height: 30px; */
}

.accordion-button:focus {
	outline: 0;
	box-shadow: none;
}

.accordion-body {
	padding: 0 0 20px 0;
	font-size: 18px;
	font-family: "Inter", sans-serif;
	color: #4F4F4F;
}

.faq-content {
	padding-bottom: 98px;
}

.terms-block {
	float: left;
	width: 100%;
	padding-top: 80px;
}

.terms-block h2 {
	text-align: center;
	padding-bottom: 50px;
	border-bottom: 1px solid #C0C0C0;
}

.terms-block .accordion-button {
	padding: 25px 0 25px 0;
	font-size: 20px;
}

.terms-block .accordion-button span {
	padding: 0 76px 0 0;
	font-size: 20px;
	line-height: 30px;
}

.terms-block h2.accordion-header {
	padding: 0;
}

.accordion-item:last-of-type .accordion-button.collapsed {
	border-radius: 0;
}

.terms-block .accordion-item:last-of-type {
	border-bottom: 1px solid #C0C0C0;
	border-radius: 0;
}

.terms-block h2.accordion-header {
	border: none;
}

.button-text {
	align-items: center;
	gap: 0 30px;
}

.bank-left {
	float: left;
	width: 50%;
}

.bank-left h2 {
	padding-bottom: 20px;
}

.info-accordion {
	float: right;
	width: 50%;
	padding-left: 60px;
}

.info-accordion .accordion-button {
	color: #4F4F4F;
	font-weight: 500;
}

.info-accordion .accordion-body p {}

.list-block {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	/* 3 columns with equal width */
	gap: 20px;
}

.list-block li {
	font-size: 16px;
	display: flex;
	gap: 0 9px;
	font-weight: 500;
}

.list-block li img {
	width: 26px;
	align-self: flex-start;
}

.about-section h2 {
	padding-bottom: 30px;
	color: #522D7F;
}

.contact-info {
	float: left;
	width: 100%;
	height: 330px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	background: url(../images/about_bg.png) no-repeat left top;
}

.contact-info h2 {
	color: #ffffff;
	padding-bottom: 25px;
}

.contact-info p {
	color: #ffffff;
}

.contact-info p a {
	color: #ffffff;
}

.contact-info p a:hover {
	color: #F48220;
}

.footer-container {
	float: left;
	width: 100%;
}

.footer-top {
	float: left;
	width: 100%;
	background: #EAEAEA;
	padding: 110px 0 100px;
}

.footer-content {
	float: left;
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 0 80px;
	gap: 0 50px;
}

.first-colm {
	float: left;
	width: 37%;
}

.social-icons {
	float: left;
	width: 100%;
	padding-top: 50px;
}

.social-icons ul {
	float: left;
	width: 100%;
	display: flex;
	gap: 0 20px;
}

.social-icons ul li {
	list-style: none;
}

.social-icons ul li img {
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}

.social-icons ul li img:hover {
	opacity: 0.5;
}

.social-icons span {
	float: left;
	width: 100%;
	padding-bottom: 5px;
}

.second-colm {
	float: left;
	width: 17%;
}

.second-colm ul li {
	list-style: none;
	margin-bottom: 5px;
}

.second-colm ul li a {
	color: #531F75;
	font-size: 20px;
	text-decoration: none;
	font-weight: 500;
}

.second-colm ul li a:hover {
	color: #F48220;
}

.third-colm {
	float: left;
	width: 40%;
}

.third-colm address {
	float: left;
	color: #000;
	font-size: 18px;
}

.address-single {
	float: left;
	width: 100%;
	margin-bottom: 25px;
}

.address-single span,
.address-single address a,
.address-single a {
	float: left;
	width: 100%;
	color: #000;
	font-size: 18px;
	text-decoration: none;
}

.address-single a:hover {
	color: #F48220;
}

.address-single h5 {
	color: #531F75;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 14px;
}

.terms-list li {
	background: url(../images/svg/caret_right.svg) no-repeat left -4px;
	color: #1F1D21;
	font-size: 20px;
	margin-bottom: 35px;
	padding: 0 0 0 60px;
}

.footer-bottom {
	float: left;
	width: 100%;
	background: #531F75;
}

.scrollTop {
	position: fixed;
	right: 10px;
	bottom: 110px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px 0;
	cursor: pointer;
}

.scrollTop span {
	font-size: 14px;
	color: #380C55;
}

.copyright {
	color: #FFF;
	font-size: 20px;
	padding: 28px 0;
}

.footer-menu {
	float: right;
	padding: 32px 0 25px;
}

.footer-menu ul {
	display: flex;
}

.footer-menu ul li {
	list-style: none;
	position: relative;
	line-height: 20px;
	padding: 0 9px 0 11px;
}

.footer-menu ul li:before {
	position: absolute;
	left: 0;
	top: 0;
	content: "";
	width: 2px;
	height: 23px;
	border-radius: 33px;
	background: #ffffff;
}

.footer-menu ul li:first-child:before {
	display: none;
}

.footer-menu ul li a {
	color: #FFF;
	font-size: 20px;
	text-decoration: none;
}

.footer-menu ul li a:hover {
	color: #F48220;
}


.show-mobile {
	display: none;
}

#nav-icon3 {
	width: 40px;
	height: 40px;
	right: 20px;
	top: 0;
	position: absolute;
	margin: 20px auto;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}

.offcanvas {
	width: 350px !important;
}

.offcanvas-body {
	padding: 0;
}

#nav-icon3 span {
	display: block;
	position: absolute;
	height: 5px;
	width: 100%;
	background: #522D7F;
	border-radius: 9px;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-moz-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
}

#nav-icon3 span:nth-child(1) {
	top: 0px;
}

#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
	top: 12px;
}

#nav-icon3 span:nth-child(4) {
	top: 24px;
}

#nav-icon3.open span:nth-child(1) {
	top: 18px;
	width: 0%;
	left: 50%;
}

#nav-icon3.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

#nav-icon3.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

#nav-icon3.open span:nth-child(4) {
	top: 18px;
	width: 0%;
	left: 50%;
}

.rocket-static {
	display: none;
}

.about-bank h2 {
	color: #263289;
}