/*
|-----------------------------------------------------------------
| ACCESS BANK GROUP
|-----------------------------------------------------------------
| START DATE: 9th October 2020
| REMARKS: Nativebrands Digital Agency;
| Main CSS Stylesheet
|-----------------------------------------------------------------
|
| Please do not edit any content here, if any changes has to be made,
| create a new file and link it to the corresponding page.
|
*/

/*
|-----------------------------------------------------------------
| # RESET CSS
|-----------------------------------------------------------------
| http://meyerweb.com/eric/tools/css/reset/ 
| v2.0 | 20110126
| License: none (public domain)
------------------------------------------------------------------
*/

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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

a, a:hover {
	color: inherit;
}

button {
	border: none;
	outline: none;
}

/*
|-----------------------------------------------------------------
| TABLE OF CONTENTS
|-----------------------------------------------------------------
| 1. Font Faces
| 2. General Classes
| 3. Large header banner
| 4. Featured box
| 5. Carousel One
| 6. News strip
| 7. Footer
|
*/


/*
|-----------------------------------------------------------------
| # FONT FACE FAMILIES
|-----------------------------------------------------------------
*/

@font-face {
	font-family: "EffraCorp-Bold";
	src: url("../fonts/EffraCorp-Bold.eot");
	src: url("../fonts/EffraCorp-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/EffraCorp-Bold.woff2") format("woff2"), url("../fonts/EffraCorp-Bold.woff") format("woff"), url("../fonts/EffraCorp-Bold.ttf") format("truetype"), url("../fonts/EffraCorp-Bold.svg#EffraCorp-Bold") format("svg");
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: "EffraCorp-Medium";
	src: url("../fonts/EffraCorp-Medium.eot");
	src: url("../fonts/EffraCorp-Medium.eot?#iefix") format("embedded-opentype"), url("../fonts/EffraCorp-Medium.woff2") format("woff2"), url("../fonts/EffraCorp-Medium.woff") format("woff"), url("../fonts/EffraCorp-Medium.ttf") format("truetype"), url("../fonts/EffraCorp-Medium.svg#EffraCorp-Medium") format("svg");
	font-weight: 500;
	font-style: normal;
}

@font-face {
	font-family: "EffraCorp-Regular";
	src: url("../fonts/EffraCorp-Regular.eot");
	src: url("../fonts/EffraCorp-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/EffraCorp-Regular.woff2") format("woff2"), url("../fonts/EffraCorp-Regular.woff") format("woff"), url("../fonts/EffraCorp-Regular.ttf") format("truetype"), url("../fonts/EffraCorp-Regular.svg#EffraCorp-Regular") format("svg");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "EffraCorp-Light";
	src: url("../fonts/EffraCorp-Light.eot");
	src: url("../fonts/EffraCorp-Light.eot?#iefix") format("embedded-opentype"), url("../fonts/EffraCorp-Light.woff2") format("woff2"), url("../fonts/EffraCorp-Light.woff") format("woff"), url("../fonts/EffraCorp-Light.ttf") format("truetype"), url("../fonts/EffraCorp-Light.svg#EffraCorp-Light") format("svg");
	font-weight: 300;
	font-style: normal;
}

@font-face {
	font-family: "EffraCorp-Italic";
	src: url("../fonts/EffraCorp-Italic.eot");
	src: url("../fonts/EffraCorp-Italic.eot?#iefix") format("embedded-opentype"), url("../fonts/EffraCorp-Italic.woff2") format("woff2"), url("../fonts/EffraCorp-Italic.woff") format("woff"), url("../fonts/EffraCorp-Italic.ttf") format("truetype"), url("../fonts/EffraCorp-Italic.svg#EffraCorp-Italic") format("svg");
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: "EffraCorp-BoldItalic";
	src: url("../fonts/EffraCorp-BoldItalic.eot");
	src: url("../fonts/EffraCorp-BoldItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/EffraCorp-BoldItalic.woff2") format("woff2"), url("../fonts/EffraCorp-BoldItalic.woff") format("woff"), url("../fonts/EffraCorp-BoldItalic.ttf") format("truetype"), url("../fonts/EffraCorp-BoldItalic.svg#EffraCorp-BoldItalic") format("svg");
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: "EffraCorp-MediumItalic";
	src: url("../fonts/EffraCorp-MediumItalic.eot");
	src: url("../fonts/EffraCorp-MediumItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/EffraCorp-MediumItalic.woff2") format("woff2"), url("../fonts/EffraCorp-MediumItalic.woff") format("woff"), url("../fonts/EffraCorp-MediumItalic.ttf") format("truetype"), url("../fonts/EffraCorp-MediumItalic.svg#EffraCorp-MediumItalic") format("svg");
	font-weight: 500;
	font-style: italic;
}

@font-face {
	font-family: "EffraCorp-LightItalic";
	src: url("../fonts/EffraCorp-LightItalic.eot");
	src: url("../fonts/EffraCorp-LightItalic.eot?#iefix") format("embedded-opentype"), url("../fonts/EffraCorp-LightItalic.woff2") format("woff2"), url("../fonts/EffraCorp-LightItalic.woff") format("woff"), url("../fonts/EffraCorp-LightItalic.ttf") format("truetype"), url("../fonts/EffraCorp-LightItalic.svg#EffraCorp-LightItalic") format("svg");
	font-weight: 300;
	font-style: italic;
}

.text-italized {
	font-family: "EffraCorp-italic";
}

html,
body {
	font-family: "EffraCorp-Regular";
	line-height: normal;
	scroll-behavior: smooth;
	line-height: 1.5;
}

@media (max-width: 974px) {
	body {
		font-size: 90%;
	}
}

@media (max-width: 574px) {
	body {
		font-size: 80%;
	}
}


/*
|-----------------------------------------------------------------
| # IMPORTANT HELPER CLASSES
|-----------------------------------------------------------------
*/

:root {
	--orange-color: #ee7e01;
	--private-banking-color: #000000;
	--blue-color: var(--business-brand);
	--green-color: #a4c519;
	--gray-color: #f1f1f1;
	--base-brand: #ee7e01;
	--personal-brand: #a4c519;
	--private-brand: #000000;
	--business-brand: #014086;
	--xclusive-brand: #003624;
	--secondary-1-brand: #007168;
	--secondary-2-brand: #b8061f;
	--white-brand: #ffffff;
}

/* add scroll margin top to all id's*/
[id] {
	/* or try 8rem*/
	scroll-margin-top: 14ex;
}

.border {
	border: 1px solid #aaa !important;
	;
}


.offering-card h4 {
	font-size: 1.3em;
	text-transform: capitalize;
}

.page-desc {
	background-repeat: no-repeat;
}

.vertical_bottom {
	vertical-align: bottom;
}

.benefit_header {
	width: 100%;
	background: url(../images/ways-to-bank/visa_card_mid_bg.png) no-repeat;
	background-size: cover;
	height: 40vh;
	display: flex;
	align-items: center;
}

	.benefit_header > div {
		width: 90%;
	}

.benefit_cards {
	width: 90%;
	margin: -5rem auto auto;
}

	.benefit_cards h4 {
		margin-bottom: 0.75rem;
		text-transform: uppercase;
	}

	.benefit_cards p {
		font-size: 1em;
	}

.no_bg_accordion {
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;
}

	.no_bg_accordion:first-child {
		border-top: 2px solid #cccccc;
	}

	.no_bg_accordion:last-child {
		border-bottom: 2px solid #cccccc;
	}

.accordion_toggle_icon {
	background-color: var(--blue-color);
	border: 1px solid var(--blue-color);
	border-radius: 50%;
	width: 35px;
	height: 35px;
	color: white;
}
.accor-header.white-text h5 {
	color: white !important;
}
.white_accordion .accordion_toggle_icon {
	background-color: white;
	border: 1px solid white;
	color: var(--blue-color);
}

.white_accordion [aria-expanded="false"] .accordion_toggle_icon {
	background-color: transparent;
	color: white !important;
}

[aria-expanded="false"] .accordion_toggle_icon {
	background-color: transparent;
	color: var(--blue-color) !important;
}

	[aria-expanded="false"] .accordion_toggle_icon .toggle_icon::before {
		font-family: "Font Awesome 5 Free";
		content: "\f067" !important;
		display: inline-block;
		font-weight: 600;
		transition: all 0.3s;
	}

.no_bg_accordion_body {
	padding: 1rem;
	list-style-type: "- ";
}

.nested_list {
	border-left: 7px solid hsla(25, 83%, 53%, 0.2);
}

.shadow_light {
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.15);
}

.w-24 {
	height: 24px;
	width: 24px;
}

.text-dark {
	color: #000 !important;
}

.text-green {
	color: #9bc002;
}

.text-link-blue {
	color: var(--business-brand);
}

.tx-bold {
	font-family: "EffraCorp-Bold";
}

.text-grey-44 {
	color: #444444;
}

.text-grey-55 {
	color: #555555;
}

.text-grey-66 {
	color: #666666;
}

.object-cover {
	object-fit: cover;
}

.object-top {
	object-position: top;
}

.bg_dark_blue {
	background: #04366f;
}

/* BACKGROUND COLORS */

.bg-orange {
	background: var(--orange-color) !important;
}

.bg-blue {
	background-color: var(--business-brand);
}

.bg-green {
	background-color: var(--green-color);
}

.bg-grey-f1 {
	background: #f1f1f1;
}

.bd-b-white {
	border-bottom: 1px solid white;
}

.bd-2b-grey {
	border-bottom: 2px solid #e0e0e0;
}

.bd-r-grey {
	border-right: 1px solid #444444;
}

.outline-none {
	outline-width: 0 !important;
}

/* LINE HEIGHT */

.lh-1 {
	line-height: 1;
}

.lh-12 {
	line-height: 1.2;
}

.lh-2 {
	line-height: 2;
}

.lh-25 {
	line-height: 2.5;
}

.tx-weight-300 {
	font-weight: 300 !important;
}

/* FONT SIZE */

.tx-11 {
	font-size: 11px !important;
}

.tx-14 {
	font-size: 14px !important;
}

.tx-root {
	font-size: 100%;
}

.tx-16 {
	font-size: 1rem;
}

.tx-18 {
	font-size: 1.15em;
}

.tx-20 {
	font-size: 1.3em;
}

.tx-22 {
	font-size: 1.22em;
}

.tx-24 {
	font-size: 1.5em;
}

.tx-30 {
	font-size: 1.9em;
}

.tx-32 {
	font-size: 2em;
}

.tx-36 {
	font-size: 2.25em;
}

.tx-40 {
	font-size: 2.5em;
}

.tx-48 {
	font-size: 3em;
}

.max-w-500 {
	max-width: 500px;
}

.max-w-700 {
	max-width: 700px;
}

.pos-relative {
	position: relative;
}

.section-gap {
	margin-top: 4rem;
	margin-bottom: 4rem;
}

.lgt-gap {
	margin-top: 10em;
}

.bordered_accordion_body {
	background: transparent;
	border-width: 0px 8px;
	border-style: solid;
	border-color: #eeb58b;
}

.accor-header {
	font-size: 1.2em;
}

.banner-slant-line {
	position: absolute;
	width: 10px;
	height: 40vw;
	max-height: 400px;
	min-height: 100px;
	transform: rotate(40deg);
	background: #ee7e01;
	top: -55px;
	left: 0;
	z-index: 99;
}

.banner-slant-line-new {
	position: absolute;
	width: 10px;
	height: 40vw;
	max-height: 400px;
	min-height: 100px;
	transform: rotate(40deg);
	background: #ee7e01;
	top: -13%;
	left: 0;
	z-index: 99;
}

@media (max-width: 985px) {
	.banner-slant-line-new {
		top: 5%;
	}
}

@media (max-width: 767px) {
	.banner-slant-line-new {
		display: none;
	}
}

.fill {
	background-position: center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	-o-background-size: cover;
}

.text-blue {
	color: var(--business-brand);
}

.white-icon {
	color: white;
}

.btn {
	border-radius: 0;
	/* font-weight: bold; */
	transition: all 0.2s;
}

.form-control {
	border-radius: 0;
}

.btn:hover {
	transform: translateY(-1px);
	opacity: 0.9;
}

.btn:focus,
.btn:visited {
	box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
	transform: translateY(3px);
}

.btn-green {
	background: #9bc002;
	color: white;
}

.btn-orange {
	background: #eb7824;
	color: white;
}

.btn-white {
	background: white;
	color: black;
}

.btn-blue {
	background: var(--business-brand);
	color: white;
}

	.btn-blue:hover,
	.btn-blue:active,
	.btn-orange:hover,
	.btn-blue:visited,
	.btn-green:hover,
	.btn-green:visited {
		color: white;
	}

.btn-outline {
	background-color: transparent;
	border-color: white;
}

.btn-outline-blue {
	background-color: transparent;
	border-color: white;
	color: var(--business-brand);
	border-color: var(--business-brand);
}

.btn-outline-white {
	background-color: transparent;
	border-color: white;
	color: white;
}

	.btn-outline-white:hover {
		color: white;
		opacity: 0.8;
	}

	.btn-outline-white:active,
	.btn-outline-white:focus {
		transform: translateY(2px);
		outline-color: white;
	}

.bend-line {
	width: 55px;
	min-height: 38px;
	height: 100%;
	clip-path: polygon(81% 0, 100% 0%, 49% 100%, 31% 100%);
	background-color: #f98537;
	/* margin-right: -.96rem; */
	z-index: 3;
}

.text-orange {
	color: var(--orange-color) !important;
}

.text-green {
	color: var(--green-color) !important;
}

.center-item {
	display: flex;
	align-items: center;
	justify-content: center;
}

.space-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.space-item_end {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

#custom-scrollbar::-webkit-scrollbar-track {
	/* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); */
	background: rgba(249, 133, 55, 0.3);
	width: 5px;
}

#custom-scrollbar::-webkit-scrollbar {
	width: 5px;
	background-color: #f5f5f5;
}

#custom-scrollbar::-webkit-scrollbar-thumb {
	width: 5px;
	border-radius: 0px;
	box-shadow: inset 0 0 6px #f985374d;
	-webkit-box-shadow: inset 0 0 6px #f985374d;
	background-color: #555;
	background: #f98537;
}

#private #custom-scrollbar::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, 0.3);
}

#private #custom-scrollbar::-webkit-scrollbar {
	background-color: #1a1a1a;
}

#private #custom-scrollbar::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 6px var(--white-brand);
	-webkit-box-shadow: inset 0 0 6px var(--white-brand);
	background: var(--white-brand);
}

/* Desktop */

@media (min-width: 575px) {
	.desktop-view {
		display: block;
	}

	.tablet-view {
		display: none;
	}

	.mobile-view {
		display: none;
	}
}

/* Mobile */

/* @media (max-width: 570px) {
    .desktop-view {
        display: none;
    }
    .mobile-view {
        display: block;
    }
    .tablet-view {
        display: none;
    }
} */

/* COMPONENTS */

/* Back to top */

a.black-link {
	color: black;
	text-decoration: underline !important;
}

#myBtn {
	display: none;
	position: fixed;
	bottom: 100px;
	right: 30px;
	/* z-index: 99; */
	font-size: 18px;
	border: none;
	outline: none;
	background-color: rgb(255, 255, 255);
	color: #ed782a;
	cursor: pointer;
	padding: 0.3em;
	z-index: 1000;
	/* clip-path: polygon(0 0, 100% 0%, 86% 100%, 0% 100%); */
	-webkit-box-shadow: -8px 3px 19px -4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: -8px 3px 19px -4px rgba(0, 0, 0, 0.2);
	box-shadow: -8px 3px 19px -4px rgba(0, 0, 0, 0.2);
}

@media (max-width: 700px) {
	#myBtn {
		padding: 0.6em;
	}
}

/* LARGE HEADER BANNER */

.large-header-banner {
	position: relative;
	height: 600px;
	/* min-height: 60vh; */
	/* max-height: 100vh; */
}

	.large-header-banner .heading {
		font-weight: 500;
		font-size: 4em;
		line-height: 97.69%;
		color: #f9f9f9;
		margin-bottom: 1rem;
	}

	.large-header-banner .text {
		font-weight: normal;
		font-size: 1.3em;
		line-height: 135%;
		color: #ffffff;
		max-width: 467px;
	}

@media (max-width: 375px) {
	.large-header-banner {
		height: 500px;
	}
}

.large-header-banner .carousel {
	height: 100%;
	overflow: hidden;
}

.large-header-banner-indicator {
	justify-content: flex-start;
	bottom: 30px;
	padding: 0 15px;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	align-items: flex-end;
	/* margin-left: 18%; */
}

.business_header_indicator {
	bottom: 170px;
}

.scroll-down {
	position: absolute;
	right: 0;
	bottom: -70px;
	background-color: #f98537;
	width: 80px;
	height: 110px;
	cursor: pointer;
	z-index: 3;
}

	.scroll-down i {
		color: white;
		bottom: 25px;
		left: 50%;
		transform: translateX(-50%);
		position: absolute;
		font-size: 32px;
	}

.carousel-inner {
	height: 100%;
	position: relative;
	<<<<<<< HEAD width:auto;
	======= >>>>>>> parent of f60391f (Merge pull request #152 from nativebrands/stanley)
}

.large-header-banner .item1 {
	background: url(../images/banners/banner1.svg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.large-header-banner .heading {
	font-weight: 300;
	font-size: 60px;
	color: #f9f9f9;
	opacity: 1 !important;
	max-width: 550px;
}

.carousel-item {
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

@media (max-width: 500px) {
	.large-header-banner .heading {
		font-size: 40px;
	}

	.large-header-banner .carousel-indicators {
		bottom: 30px;
		/* left: 5%; */
		margin-right: auto;
		margin-left: auto;
	}

	.scroll-down {
		position: absolute;
		right: 30px;
		background-color: #f98537;
		width: 60px;
		height: 70px;
		cursor: pointer;
	}

		.scroll-down i {
			color: white;
			bottom: 15px;
			left: 50%;
			transform: translateX(-50%);
			position: absolute;
			font-size: 25px;
		}
}

/* FEATURED BOX */

.featured-boxes {
	background: #f9f9f9;
	z-index: 1;
	overflow: hidden;
	box-shadow: 30px 10px 20px 30px rgba(0, 0, 0, 0.07);
}

.swiper_indicator {
	display: none;
}

.lg_padding_top {
	padding-top: 5rem;
}

@media (max-width: 700px) {
	a.featured-box {
		padding: 2rem 1rem !important;
	}

	.md_padding_top {
		padding-top: 3rem;
	}

	.lg_padding_top {
		padding-top: 5rem;
	}

	.lg_margin_top {
		margin-top: 5rem;
	}

	.special.featured-boxes {
		display: block;
	}

	.special.featured-boxes {
		transform: translateY(50%);
		z-index: 1000;
		clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
		width: 90%;
		margin-right: auto;
		margin-left: auto;
		left: 0;
		right: 0;
	}

	.container.featured-boxes-container-new {
		padding-right: 0;
		padding-left: 0;
	}

	.container.featured-boxes-container-others {
		padding-right: 0;
		padding-left: 0;
	}

	.swiper-slide-active {
		width: 100%;
	}

		.swiper-slide-active .featured-box {
			box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.05);
		}

			.swiper-slide-active .featured-box::after {
				width: 100%;
				animation: elongate 0.3s linear;
			}

	.swiper_indicator {
		display: block;
	}

		.swiper_indicator .swiper-pagination-bullets {
			position: relative;
			bottom: 20px;
			left: 0;
			width: 100%;
		}

	.ways_to_bank.swiper-pagination-bullets {
		bottom: -3px;
	}

	.translatedY120 {
		/* transform: translateY(70px); */
		bottom: -70px !important;
	}

	.swiper_indicator .swiper-pagination-bullets .swiper-pagination-bullet {
		border-radius: 0;
		height: 2px;
		width: 41px;
		margin: 0 4px;
	}

	.swiper_indicator .swiper-pagination-bullet-active {
		background-color: #a4c618;
		height: 4px;
	}

	.blue-theme .swiper_indicator .swiper-pagination-bullet-active {
		background-color: var(--business-brand);
	}

	.orange-theme .swiper_indicator .swiper-pagination-bullet-active {
		background-color: #eb7824;
	}
}

@media (min-width: 700px) and (max-width: 1000px) {
	.featured-box {
		line-height: 1.2;
		font-size: small;
	}

		.featured-box img {
			width: 35px;
		}
}

a.featured-box {
	text-decoration: none;
	color: #666666;
	display: flex;
	align-items: center;
	padding: 3rem 1rem;
	transition: border-bottom, box-shadow 0.2s;
	position: relative;
	height: 100%;
	max-height: 170px;
	/* max-width: 411px; */
}

@media (max-width: 1200px) {
	a.featured-box {
		padding: 1.5rem 1rem;
	}
}

.featured-box::after {
	content: "";
	height: 5px;
	background: #a4c618;
	position: absolute;
	bottom: 0;
	left: 0;
}

.featured-box::after {
	background: #a4c618;
}

.blue-theme .featured-box::after {
	background: var(--business-brand);
}

.blue-bg {
	background: var(--business-brand) !important;
}

.orange-theme .featured-box::after {
	background: #eb7824;
}

.featured-box:hover,
.featured-box:focus {
	box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.05);
}

	.featured-box:hover.featured-box::after,
	.featured-box:focus.featured-box::after {
		width: 100%;
		animation: elongate 0.3s ease-out;
	}

@keyframes elongate {
	0% {
		width: 0;
		opacity: 0.5;
	}

	100% {
		width: 100%;
		opacity: 1;
	}
}

.featured-box .icon {
	margin-right: 1rem;
}

.featured-title {
	font-weight: 500;
	font-size: 1.5em;
	line-height: 1.5;
	color: #666666;
}

/* For showcase */

.carousel-1,
.carousel-2 {
	min-height: 560px;
	overflow: hidden;
	background: #f1f1f1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 3rem 0;
	/* width: 100vw; */
}

.carousel-2-new {
	height: 390px;
	background: var(--business-brand);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	margin-bottom: 14rem;
	padding-top: 5.5rem;
	/* width: 100vw; */
}

@media (max-width: 500px) {
	.carousel-2-new {
		margin-bottom: 18rem;
	}
}

.carousel-1 .controls {
	width: 51px;
	height: 51px;
	border-radius: 50%;
	border: 2px solid #666666;
	transition: transform 0.2s;
}

.controls:hover,
.controls:active,
.controls:focus {
	outline-width: 0px;
	transform: scale(1.1);
}

.carousel-1 .content {
	display: grid;
	grid-template-columns: max-content 1fr;
	align-items: center;
	column-gap: 2rem;
}

@media (max-width: 992px) {
	.carousel-1 .desktop-view {
		display: none;
	}

	.carousel-1 .tablet-view {
		display: block;
	}

	.carousel-1 .controls {
		display: none;
	}

	.carousel-1 .heading {
		font-size: 30px;
	}

	.carousel-1 .carousel-items {
		display: flex;
		width: 100%;
		scrollbar-width: thin;
		overflow-x: auto;
		height: 400px;
	}
}

@media (max-width: 600px) {
	.carousel-1 .content {
		grid-template-columns: 1fr;
	}

	.carousel-1 .carousel-items {
		width: 90%;
		max-width: 550px;
	}
}

@media (max-width: 375px) {
	.carousel-1 .carousel-items {
		width: 90%;
		max-width: 375px;
	}
}

.carousel-1 .content .carousel {
	width: 100%;
}

.carousel-1 .text .heading {
	font-weight: 300;
	font-size: 36px;
	line-height: 120.19%;
	color: #666666;
}

.carousel-items {
	/* width: 100%; */
	height: 100%;
	display: flex;
	align-items: center;
}

	.carousel-items .item-card {
		margin-right: 2rem;
	}

.item-card {
	/* width: 240px;
    height: 300px; */
	min-width: 266px;
	height: 304px;
	background: #f9f9f9;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
	display: grid;
	grid-template-rows: 1fr 100px;
	flex: 33.3%;
}

	.item-card > img {
		object-fit: cover;
		height: 100%;
		width: 100%;
	}

.item-card-shell-new {
	height: 320px;
	width: 100%;
	max-width: 350px;
	margin: 0 auto;
}

.item-card-new {
	min-width: 266px;
	height: 100%;
	background: #f9f9f9;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	width: 100%;
}

	.item-card-new > div {
		height: 50%;
		width: 100%;
	}

	.item-card-new > img {
		object-fit: cover;
		height: 50%;
		width: 100%;
	}

/* CAROUSEL ITEM TWO */

.carousel-2 {
	position: relative;
}

.carousel-header {
	position: relative;
	font-weight: 300;
	font-size: 40px;
	line-height: 47px;
	color: #444444;
}

/* .carousel-2 .carousel-indicators {
    margin-left: auto;
    margin-right: 5%;
    top: -50px;
    justify-content: flex-end;
    bottom: auto;
} */

/* position: static; */

.top_indicators {
	position: static;
	margin-right: 0;
}

.carousel-2 .carousel-indicators li {
	background-color: var(--business-brand);
}

@media (max-width: 500px) {
	.carousel-header {
		text-align: left;
		color: #444444;
		margin-bottom: 3rem;
		font-size: 28px;
	}

	.carousel-2 .carousel-indicators {
		margin-left: auto;
		margin-right: auto;
		justify-content: center;
		/* position: static; */
	}
}

/* NEWS STRIP */

.news-strip {
	background: #fef3eb;
	/* background: #EEEEEE; */
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 0;
	z-index: 101;
	
}

#private .news-strip {
	background: #1a1a1a;
	color: white;
}

.news-strip .tag {
	background-color: #eeeeee;
	height: 38px;
	z-index: 1;
	align-items: center;
	display: flex;
	width: 25%;
	min-width: fit-content;
	/* padding: 0 5em; */
	padding: 0 0.5rem;
	font-weight: bold;
	font-size: 12px;
	color: #555555;
	text-transform: uppercase;
	white-space: nowrap;
	justify-content: flex-end;
}

	.news-strip .tag::after {
		content: "";
		width: 44px;
		left: 19%;
		height: 100%;
		position: absolute;
		background-color: #eeeeee;
		clip-path: polygon(0 0, 100% 0, 57% 100%, 0% 100%);
	}

#private .news-strip .tag {
	background-color: #1a1a1a;
}

	#private .news-strip .tag::after {
		background-color: #1a1a1a;
	}

#private .strip {
	color: white;
}

.news-strip .bend-line {
	width: 55px;
	height: 38px;
	clip-path: polygon(81% 0, 100% 0%, 49% 100%, 31% 100%);
	background-color: #f98537;
	margin-right: -0.96rem;
	z-index: 3;
}

.news-strip .strip-wrapper {
	display: flex;
	overflow: hidden;
	width: 100%;
}

.strip-wrapper:hover .strip {
	animation-play-state: paused;
}

.strip_2 {
	/* animation: scroll 15s linear infinite;
	-moz-animation: translateX(100%);
	-webkit-animation: translateX(100%);
	animation: translateX(100%); */
	font-size: 13px;
	color: #555555;
	display: inline !important;
	margin-right: 30px;
}

.strip {
	animation: scroll 15s linear infinite;
	-moz-animation: translateX(100%);
	-webkit-animation: translateX(100%);
	animation: translateX(100%);
	font-size: 13px;
	color: #555555;
	display: block;
	float: left;
	margin-right: 30px;
	white-space: nowrap;
}

.strip1,
.strip2,
.strip3 {
	transform: translateX(100%);
	font-size: 13px;
	color: #555555;
	display: inline-block;
	width: 100%;
	margin-right: -10px;
	white-space: nowrap;
	animation: marquee 10s linear infinite;
}

.strip2 {
	animation-delay: 5s;
	color: teal;
}

.strip3 {
	animation-delay: 6s;
	color: red;
}

@keyframes marquee {
	from {
		transform: translateX(90%);
	}

	to {
		transform: translateX(-150%);
	}
}

@keyframes marquee2 {
	from {
		transform: translateX(90%);
	}

	to {
		transform: translateX(-200%);
	}
}

@keyframes marquee3 {
	from {
		transform: translateX(90%);
	}

	to {
		transform: translateX(-200%);
	}
}
/* Move it (define the animation) */

@-moz-keyframes scroll {
	from {
		-moz-transform: translateX(100%);
	}

	to {
		-moz-transform: translateX(-100%);
	}
}

@media (max-width: 454px) {
	.news-strip .tag::after {
		width: 35px;
		left: 92px;
	}
}

@media (min-width: 1200px) {
	.news-strip .tag {
		/* width: 35%; */
		padding-right: 2rem;
		z-index: 3;
	}

		.news-strip .tag::after {
			content: "";
			width: 60px;
			z-index: -1;
		}
}

@media (min-width: 1850px) {
	.news-strip .tag::after {
		width: 68px;
	}
}

@-webkit-keyframes scroll {
	0% {
		-webkit-transform: translateX(100%);
	}

	100% {
		-webkit-transform: translateX(-100%);
	}
}

@keyframes scroll {
	0% {
		-moz-transform: translateX(100%);
		/* Firefox bug fix */
		-webkit-transform: translateX(100%);
		/* Firefox bug fix */
		transform: translateX(100%);
	}

	100% {
		-moz-transform: translateX(-100%);
		/* Firefox bug fix */
		-webkit-transform: translateX(-100%);
		/* Firefox bug fix */
		transform: translateX(-100%);
	}
}

/*
|-----------------------------------------------------------------
| FOOTER
| 1.Helpful tool
| 2.Newsletter
| 3. Main Footer
|-----------------------------------------------------------------
*/

/* HELPFUL TOOL */

.helpful-tools {
	background-color: white;
	color: #555555;
	padding-top: 2rem;
	padding-bottom: 2rem;
	margin: auto;
}

#private .helpful-tools {
	background: #404040;
	color: white;
}

#emerging .helpful-tools {
	background: hsl(0, 0%, 100%);
}

.helpful-tools-heading {
	font-size: 22px;
	line-height: 26px;
	margin-bottom: 1rem;
}

.helpful-tools-wrapper {
	display: flex;
	width: 100%;
	height: 200px;
	scrollbar-width: thin;
}

@media (max-width: 1200px) {
	.helpful-tools-wrapper {
		overflow-x: scroll;
	}
}

#custom-scrollbar::-webkit-scrollbar-track {
	background: rgba(249, 133, 55, 0.3);
}

#custom-scrollbar::-webkit-scrollbar {
	height: 5px;
	background-color: #f5f5f5;
}

#custom-scrollbar::-webkit-scrollbar-thumb {
	border-radius: 0px;
	box-shadow: inset 0 0 6px #f985374d;
	-webkit-box-shadow: inset 0 0 6px #f985374d;
	background-color: #555;
	background: #f98537;
}

.helpful-tool-box {
	width: 176px;
	height: 151px;
	border: 4px solid hsla(212, 99%, 26%, 0.2);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1rem;
	transition: all 0.2s;
	margin: auto;
	margin-right: 1rem;
}

.base-theme .helpful-tool-box {
	border: 4px solid rgba(254, 243, 235, 1);
}

#private .helpful-tool-box {
	border: 4px solid hsla(0, 0%, 100%, 0.2);
}

.helpful-tool-box:hover,
.helpful-tool-box:focus,
.helpful-tool-box:active {
	background: #f98537;
	box-shadow: 0px 30px 50px rgba(249, 133, 55, 0.6);
	color: white;
	text-decoration: none;
	border: 0;
	transform: scale(1.02);
}

.helpful-tool-box:focus,
.helpful-tool-box:active {
	transform: scale(1);
}

	.helpful-tool-box:hover > svg.tool-icon > g > path,
	.helpful-tool-box:focus > svg.tool-icon > g > path {
		fill: #ffffff;
	}

	.helpful-tool-box:hover > .helpful-tool-text,
	.helpful-tool-box:focus > .helpful-tool-text {
		color: #ffffff;
	}

	.helpful-tool-box:hover > svg.tool-icon > path,
	.helpful-tool-box:focus > svg.tool-icon > path {
		fill: #ffffff;
	}

.helpful-tool-text {
	font-weight: 500;
	font-size: 1rem;
	color: #555555;
}

#private .helpful-tool-text {
	color: white;
}

#private .tool-icon > g > path[fill="#014086"] {
	fill: white;
}

#private .tool-icon > path[fill="#014086"] {
	fill: white;
}

/* NEWSLETTER */

.newsletter {
	background: var(--base-brand);
	box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
	color: #ffffff;
	clip-path: polygon(0 0, 100% 0%, 99% 100%, 0% 100%);
	width: 95%;
	position: absolute;
	margin-top: -35px;
	z-index: 1;
	padding: 1rem 0;
}

#newsletterForm {
	display: none;
}

#private .newsletter {
	background: #141414;
}

#personal .newsletter {
	background: var(--base-brand);
	box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
}

#business .newsletter {
	background: var(--base-brand);
}

.newsletter-text {
	color: white;
	line-height: 1.3;
}

	.newsletter-text .title {
		font-size: 16px;
		font-weight: bold;
		/* margin-bottom: 10px; */
	}

	.newsletter-text .text {
		font-size: 12px;
	}

.newsletter .input {
	height: 42px;
	width: 322px;
	border: 1px solid #ffffff;
	box-sizing: border-box;
	background-color: transparent;
	color: white;
	padding: 1rem;
}

.newsletter-form .input:not(:last-child) {
	margin-right: 1rem;
}

.newsletter-form .input::placeholder {
	color: inherit;
}

.newsletter-form .input:focus {
	outline: 1px solid #ffffff;
}

.newsletter-form .btn {
	height: 42px;
	width: 117px;
}

/* Main Footer */

.main-footer {
	background: url(../images/access-logo-bg.svg) no-repeat right bottom;
	background-color: var(--business-brand);
	padding: 5rem 0 3rem;
	overflow: hidden;
	background-size: contain;
}

@media (max-width: 1024px) {
	.mobile-view {
		display: block;
	}

	.newsletter.mobile-view {
		display: block;
	}

	.newsletter-form {
		flex-direction: column;
	}

		.newsletter-form .input,
		.newsletter .btn {
			margin-top: 10px;
			margin-bottom: 10px;
			text-align: center;
			width: 100%;
		}

	.newsletter.desktop-view {
		display: none;
	}

	.newsletter {
		background: var(--base-brand);
		clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
		width: 100%;
		position: static;
		margin-top: 0;
	}

	.main-footer {
		padding-top: 2.5rem;
	}

		.main-footer .desktop-view {
			/* background: none; */
			display: none;
			background-size: 50%;
			padding-top: 2rem;
		}

	.main-footer-wrapper .title {
		color: white;
		text-transform: uppercase;
		font-size: 18px;
		padding: 0;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.main-footer-wrapper > li {
		margin: 1.5rem 0;
	}

	.accordion-header {
		background-color: transparent;
		width: 100%;
		outline: none !important;
		padding-right: none;
		padding-left: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}

		.accordion-header[aria-expanded="true"] .footer_toggle_icon::before {
			font-family: "Font Awesome 5 Free";
			content: "\f068" !important;
			display: inline-block;
			font-weight: 600;
			transition: all 0.3s;
		}

		.accordion-header .fa-minus {
			display: none;
		}
}

/*New CSS*/
.title-banner h1 {
	font-size: 36px;
	position: relative;
}

/*New CSS*/
.title-banner-overlay:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient( 90deg, rgba(0, 0, 0, 0.90) 0%, rgba(0, 0, 0, 0) 50% );
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 0;
}

#private .main-footer {
	background-color: #101010;
}

#personal .main-footer {
	background-color: var(--business-brand);
}

#business .main-footer {
	background-color: var(--business-brand);
}

.main-footer-wrapper {
	line-height: 2;
}

	.main-footer-wrapper .title {
		color: white;
		text-transform: uppercase;
		font-size: 18px;
	}

	.main-footer-wrapper .link {
		color: #cccccc;
		font-size: 14px;
	}

.footer-contact {
	clip-path: polygon(0 0, 100% 0%, 98.2% 100%, 0% 100%);
	width: 100%;
	padding: 1.2rem;
	border: 1px solid rgba(255, 255, 255, 0.5);
	position: relative;
	margin-top: 1rem;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

	.footer-contact:before {
		content: "";
		position: absolute;
		top: 0;
		right: -35px;
		border-right: 100px solid #fff;
		border-bottom: 100px solid transparent;
		width: 0;
		z-index: 1;
		transform: rotate(60deg);
	}

.footer-cookie {
	width: 90%;
	padding: 1.2rem;
	position: fixed;
	bottom: 1rem;
	left: 50%;
	transform-style: preserve-3d;
	transform: translateX(-50%) translateZ(5px);
	z-index: 1000002;
	margin-top: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	background-color: #fff;
}

.social-icons,
.footer-contact .middle {
	color: #cccccc;
}

	.social-icons .icon {
		font-size: 22px;
		color: white;
		margin: 0 0.8rem;
	}
.copyright {font-size: 1em;}
.copyright p {
	white-space: nowrap;
}

.copyright,
.copyright .bend-line {
	height: 52px;
}

.copyright-links a:hover {
	color: black;
}

#private .copyright {
	background-color: #101010;
	color: #777777;
}

#personal .copyright {
	background-color: #fff;
}

#business .copyright {
	background-color: #fff;
}

/* Tablet */

@media (max-width: 1042px) {
	.footer-contact {
		clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.copyright-links {
		display: none;
	}

	.copyright .logo {
		display: none;
	}

	.footer-contact > * {
		margin-bottom: 1rem;
		text-align: center;
	}

	.footer-contact:before {
		display: none;
	}
}

/* PRIVATE BANKING */

body#private {
	background-color: black;
	line-height: 1.5;
}

.private-banner-indicators {
	justify-content: flex-start;
	bottom: 30px;
	margin-left: 0;
}

#private .heading {
	font-weight: normal;
	color: hsla(0, 0%, 98%, 0.8);
	/* opacity: 0.8; */
	line-height: 113.19%;
	margin-bottom: 1rem;
	font-size: 24px default;
}

#private .main.heading {
	font-size: 30px;
}

#private .text {
	color: hsla(0, 0%, 98%, 0.8);
	font-size: 1.2rem;
}

.private-about-section {
	color: white;
}

	.private-about-section .heading {
		text-align: center;
		max-width: 300px;
		margin: auto;
		font-size: 30px;
	}

	.private-about-section .text,
	.mission-text {
		font-size: 18px;
		text-align: center;
		max-width: 530px;
		margin: auto;
	}

.about-grid {
	display: grid;
	grid-template-rows: 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr;
}

.img-container {
	grid-row: 1 /3;
	grid-column: 1 / -1;
	width: 100%;
}

.about-cards {
	grid-row: 2 /4;
	grid-column: 1 / -1;
}

.about-cards {
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	max-width: 1000px;
	margin-right: auto;
	margin-left: 3rem;
}

.about-card::after {
	position: absolute;
	content: "";
	width: 100%;
	height: 0%;
	clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
	background-color: #333;
	bottom: 0;
	left: 0;
	z-index: -1;
	transition: 0.2s cubic-bezier(0.25, 1, 0.3, 1);
}

.about-card:hover::after {
	height: 40%;
	transition: 0.4s cubic-bezier(0.25, 1, 0.3, 1);
}

.about-card:nth-child(2),
.about-ancor-2 {
	transform: translateY(20%);
}

.about-card {
	/* max-width: 455px; */
	z-index: 1;
	height: 403px;
	height: 403px;
	padding: 2rem;
	position: relative;
	background: #1a1a1a;
}

	.about-card .icon {
		width: 32px;
		height: 32px;
	}

.own-your-bank {
	display: flex;
	width: 90%;
	margin-left: auto;
}

.img-wrapper {
	flex: 33.3%;
}

	.img-wrapper img {
		object-fit: cover;
		width: 100%;
		height: 100%;
	}

.own-your-bank .content {
	display: flex;
	flex-direction: column;
	padding: 3rem;
	align-items: flex-start;
	justify-content: center;
	flex: 50%;
}

	.own-your-bank .content > div {
		width: 95%;
		max-width: 350px;
	}

	.own-your-bank .content .heading {
		font-size: 1.8rem;
		color: var(--base-brand) !important;
		width: 55%;
		margin-bottom: 0.5rem !important;
	}

	.own-your-bank .content .text {
		font-size: 1rem;
		margin-bottom: 0.5rem !important;
	}

.services {
	background-color: #141414;
	padding: 5rem 0;
}

.service-card {
	background: #000000;
	padding: 2rem;
	border-bottom: 6px solid var(--base-brand);
	height: 300px;
	/* max-width: 342px; */
	margin-right: auto;
	margin-left: auto;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	transition: transform 0.3s;
}

	.service-card:hover {
		cursor: pointer;
		transform: translateY(-5px);
	}

.contact-us {
	position: absolute;
	bottom: -50px;
	width: 85%;
	right: 50%;
	transform: translateX(50%);
	margin-right: auto;
	/* z-index: 50; */
}

.contact-us-card {
	background-color: #000000;
	max-width: 372px;
	padding: 2rem;
	height: 60%;
	min-height: 300px;
}

.contact-us-button {
	background: linear-gradient(0deg, var(--base-brand), var(--base-brand));
	height: 70px;
	width: 70px;
	transform: translateY(-100%);
}

@media (min-width: 995px) {
	.contact-us-card {
		min-height: 400px;
	}
}

@media (max-width: 995px) {
	.contact-us {
		position: relative;
		width: 100%;
		margin-right: auto;
	}

	.contact-us-card {
		height: 30%;
		min-height: 400px;
		width: 100%;
		max-width: 100%;
	}

	.contact-us-button {
		display: none;
	}
}

@media (min-width: 1700px) {
	.own-your-bank {
		grid-template-columns: max-content 1fr;
		max-width: 1200px;
		margin-right: auto;
		margin-left: auto;
		width: 100%;
		justify-content: center;
	}

	.img-wrapper {
		grid-column: 1 / 2;
	}

	.own-your-bank .content {
		grid-column: 2 /3;
	}
}

@media (max-width: 995px) {
	.about-cards {
		grid-template-columns: 1fr;
		margin-left: auto;
		margin-top: -5%;
	}
}

@media (max-width: 975px) {
	.img-container {
		grid-row: 1;
		grid-column: 1;
		width: 100%;
	}

	.about-grid {
		display: grid;
		grid-template-rows: 1fr;
		grid-template-columns: 1fr;
	}

	.about-card:nth-child(2),
	.about-ancor-2 {
		transform: translateY(0);
	}

	.about-card {
		height: 340px;
	}
}

@media (max-width: 600px) {
	.own-your-bank {
		flex-direction: column;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
}

/* END OF PRIVATE BANKING STYLES */

/* PERSONAL BANKING */

.personal-header-banner {
	height: 700px;
}

	.personal-header-banner .item1 {
		background: url(../images/banners/personal-banknig-banner.png);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		align-items: center;
		/* padding-top: 10%;
    padding-bottom: 10%; */
	}

		.personal-header-banner .item1 .container {
			/* padding-top: 10%; */
			padding-bottom: 15%;
		}

	.personal-header-banner .heading {
		font-weight: bold;
		font-size: 55px;
		line-height: 0.95;
		color: #ffffff;
		margin-bottom: 1rem;
	}

	.personal-header-banner .text {
		font-weight: normal;
		font-size: 16px;
		line-height: 160%;
		color: #ffffff;
		max-width: 375px;
		margin-bottom: 1rem;
	}

#personal .featured-boxes,
.clipped_featured_boxes,
.business_featured_boxes {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 99;
	width: 100%;
	clip-path: polygon(0 0, 95% 0%, 95% 100%, 0% 100%);
}

.clipped_featured_boxes {
	clip-path: polygon(0 0, 95% 0%, 95% 100%, 0% 100%);
}

.personal-banking-details .heading {
	font-weight: normal;
	font-size: 28px;
	line-height: 33px;
	color: #444444;
}

.personal-banking-details .text {
	font-weight: normal;
	font-size: 18px;
	line-height: 157.19%;
	color: #666666 default;
}

.personal-banking-details {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr 1fr;
	min-height: 500px;
}

.grid-lg {
	grid-column: 1 / span 2;
	grid-row: 1 / 2;
	background: #f9f9f9;
	padding: 2rem;
}

.grid-sm.is-card {
	background: #f9f9f9;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.15);
	border-top: 1px solid #cccccc;
	padding: 2rem;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}

.scroll-down-box {
	padding: 1rem;
	background: #a4c618;
	width: 226px;
	height: 168px;
	color: white;
	font-weight: bold;
	font-size: 1.2em;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-decoration: none !important;
}

	.scroll-down-box .feather {
		width: 32px;
		height: 32px;
	}

.label {
	background: #85091b;
	font-size: 22px;
	padding: 1rem;
	position: absolute;
	justify-content: space-between;
	top: -60px;
	width: 200px;
	right: 0;
	height: 60px;
}

.join-us-section {
	background: url(../images/personal-banking/banner-3.png);
	background-size: cover;
	background-position: top;
	min-height: 700px;
}

.join--wrapper {
	position: absolute;
	max-width: 577px;
	width: 50%;
	/* max-height: 501px; */
	height: 70%;
	left: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
	padding: 0 5vw;
	text-align: left;
	background: #85091b;
}

	.join--wrapper .heading {
		font-size: 36px;
	}

	.join--wrapper .text {
		font-size: 21px;
	}

@media (min-width: 998px) {
	#personal .large-header-banner-indicator {
		bottom: 175px;
	}
}

@media (max-width: 998px) {
	#personal .large-header-banner .heading {
		font-size: 45px;
	}

	#personal .item1 {
		align-items: center;
		padding-top: 0%;
		padding-bottom: 0%;
	}

	#personal .featured-boxes {
		position: relative;
		clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
		transform: translateY(-30px);
		overflow: hidden;
		width: 90%;
	}

	.personal-banking-details {
		grid-template-columns: 1fr;
		margin-top: 10rem;
	}

	.grid-lg {
		grid-column: 1;
		grid-row: 1;
		background: #f9f9f9;
		padding: 2rem;
	}

	.scroll-down-box {
		width: 100%;
		height: max-content;
		flex-direction: row;
	}

	.join-us-section {
		height: 1000px;
		background: url(../images/personal-banking/sm-banner-3.png) no-repeat;
		background-size: cover;
		background-position: top;
	}

	.join--wrapper {
		height: 50%;
		width: 100%;
	}
}

@media (max-width: 575px) {
	#personal .large-header-banner .heading {
		font-size: 36px;
	}

	#personal .large-header-banner {
		height: 500px;
	}
}

/* EMERGING BANKING */

.emerging-banner .heading {
	font-weight: 500;
	font-size: 4em;
	line-height: 97.69%;
	color: #f9f9f9;
	margin-bottom: 1rem;
}

.emerging-banner .text {
	font-weight: normal;
	font-size: 1.3em;
	line-height: 135%;
	color: #ffffff;
	max-width: 467px;
}

.emerging-banner .large-header-banner-indicator {
	bottom: 130px;
}

.emerging-banner .item1 {
	background: url(../images/emerging-banking/banner-1.png);
	background-size: cover;
	background-position: center center;
}

.emerging-featured-boxes,
#corporate .featured-boxes {
	transform: translateY(-70px);
	left: 0;
	right: 0;
	position: absolute;
	background: transparent;
	box-shadow: none;
	/* z-index: 1; */
	box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.05);
}

	.emerging-featured-boxes > .content {
		box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.05);
	}

.emerging-about-section {
	background-color: var(--business-brand);
	position: relative;
	padding: 2rem 0 4rem 0;
}

	.emerging-about-section .header-wrapper {
		padding-top: 0%;
		/* padding-bottom: ; */
	}

	.emerging-about-section .heading {
		font-weight: normal;
		font-size: 2em;
		line-height: 120%;
		color: #fff;
		max-width: 595px;
		margin: auto;
	}

	.emerging-about-section .text {
		margin: auto;
		font-weight: normal;
		font-size: 1em;
		line-height: 160%;
		color: rgb(247, 243, 243);
		max-width: 815px;
	}

.emerging-about-card .heading {
	color: #057a82;
}

.emerging-about-card {
	/* transform: translateY(50px); */
	box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.1);
}

	.emerging-about-card img {
		max-height: 250px;
		height: auto;
		min-height: 250px;
		object-fit: cover;
	}

	.emerging-about-card .content {
		flex-basis: 66.6%;
		height: 100%;
	}

.emerging-about-card {
	background-color: var(--base-brand);
	max-height: 250px;
}

	.emerging-about-card .content {
		background-color: var(--base-brand);
		display: flex;
		align-items: center;
		padding: 1rem;
		height: 100%;
	}

	.emerging-about-card .emerging-about-card-img {
		clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
		width: 45%;
	}

@media (max-width: 577px) {
	.emerging-about-card .emerging-about-card-img {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		width: 100%;
	}
}

.emerging-about-card .heading {
	font-weight: 500;
	font-size: 21px;
	line-height: 124.69%;
	color: var(--white-brand);
}

.emerging-about-card .text {
	font-weight: normal;
	font-size: 16px;
	line-height: 160%;
	color: var(--white-brand);
	display: -webkit-box;
	-webkit-line-clamp: 4; /* number of lines to show */
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 1rem 0;
}

.sme-zone-wrapper {
	height: 500px;
	background-size: cover;
	background-position: center center;
	display: flex;
	align-items: center;
}

.negative-margin-2 {
	margin-top: -0.8rem !important;
}

.sme-zone-card {
	position: relative;
	overflow: hidden;
	padding: 7%;
	max-width: 543px;
	min-width: min-content;
	width: 50%;
	height: 367px;
	background: radial-gradient( 97.57% 210.75% at 0.9% 2.98%, #ffffff 0%, rgba(255, 255, 255, 0.64) 100% );
	backdrop-filter: blur(42px);
	justify-content: center;
	display: flex;
	flex-direction: column;
}

	.sme-zone-card .banner-slant-line {
		height: 60%;
		max-height: 300px;
	}

	.sme-zone-card .sm-heading {
		font-weight: normal;
		font-size: 24px;
		line-height: 140%;
		/* identical to box height, or 34px */
		color: #9bc002;
	}

.light-green-txt {
	color: #9bc002;
}

.sme-zone-card .heading {
	font-weight: 500;
	font-size: 28px;
	line-height: 140%;
	/* or 39px */
	color: #444444;
}

.sme-zone-card .text {
	font-size: 18px;
	line-height: 150%;
	/* or 27px */
	color: #444444;
}

.help-center-card .content {
	padding: 2rem;
}

.help-center-card.item-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: space-between;
	background: var(--business-brand);
	margin: auto 0;
	height: 100%;
	width: 100%;
	box-shadow: none;
}

.help-center-card .heading {
	font-weight: normal;
	font-size: 2.5em;
	line-height: 105%;
	margin-bottom: 1.5rem;
	margin-left: 5rem;
	max-width: 400px;
	/* color: #fff; */
}

@media (max-width: 992px) {
	.help-center-card .heading {
		margin-left: 0rem;
		max-width: 400%;
	}
}

.help-center-card img {
	width: 100%;
	height: 80%;
	object-fit: cover;
}

.help-center-card .text {
	font-weight: normal;
	font-size: 1.2em;
	line-height: 1.5;
	/* or 28px */
	color: #fff;
}

@media (max-width: 992px) {
	.help-center-left {
		width: 100%;
		padding: 0;
		margin-bottom: 2rem;
	}
}

.help-center-right {
	display: flex;
	width: 100%;
	margin-bottom: 4rem;
	flex-direction: column;
	align-items: space-between;
	justify-content: space-between;
	background: #fff;
}

/* @media (min-width:550px) and (max-width:992px){
  .help-center-right{
	max-height:150px;
	margin-bottom:25rem;
  }
} */

@media (max-width: 992px) {
	.help-section-container {
		margin: 3rem;
		margin-right: 10rem;
		margin: auto;
		max-width: 650px;
	}
}

@media (max-width: 768px) {
	.help-section-container {
		margin: auto;
		margin: 2rem;
	}
}

@media (max-width: 567px) {
	.help-section-container {
		margin: auto;
		margin: 1rem;
		padding: 0;
	}

	.help-center-right {
		margin-bottom: 1rem;
	}
}

@media (min-width: 1200px) {
	.help-center-right {
		margin: auto;
		/* margin-left:2rem; */
		margin-bottom: 7rem;
	}
}

@media (min-width: 992px) {
	.help-section-container {
		padding-right: 2rem;
	}
}
/*

 */

.help-center-lines {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	justify-content: flex-start;
	margin-bottom: 1.5rem;
	padding: 2rem;
	background: #fff;
}

	.help-center-lines p {
		font-size: 1.2rem;
	}

	.help-center-lines h4 {
		font-size: 1.5rem;
	}

.detail-wrapper {
	background: var(--base-brand);
	height: 100%;
	max-height: 200px;
	min-height: 180px;
	position: relative;
	align-self: flex-end;
	padding: 1rem 2rem 1rem 1rem;
	/* clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%); */
	width: 100%;
}

	.detail-wrapper .content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-start;
		height: 100%;
	}

	.detail-wrapper .heading {
		font-size: 1.2em;
		line-height: 1.5;
		/* or 50px */
		color: #fff;
		max-width: 230px;
		text-align: left;
	}

	.detail-wrapper .text {
		font-weight: normal;
		font-size: 1em;
		color: #fff;
	}

@media (max-width: 992px) {
	.help-center-lines {
		margin-bottom: 5rem;
	}
}

@media (max-width: 600px) {
	.help-center-lines {
		margin-bottom: 1rem;
	}
}

@media (max-width: 500px) {
	.help-center-lines {
		margin-bottom: 2rem;
	}

	.detail-wrapper {
		padding: 1rem 1rem 1rem 1rem;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}

		.detail-wrapper .heading {
			font-size: 1.6em;
		}

		.detail-wrapper .text {
			font-size: 1.4em;
		}
}

@media (max-width: 991px) {
	#emerging .featured-boxes,
	#corporate .featured-boxes {
		transform: translateY(30px);
		position: static;
		background: #ffffff;
		box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.05);
		z-index: 1;
	}

	.emerging-about-card {
		transform: translateY(0);
		box-shadow: 0px 30px 30px rgba(0, 0, 0, 0.1);
	}
}

@media (max-width: 768px) {
	.sme-zone-card {
		width: 100%;
	}
}

@media (max-width: 576px) {
	.help-center-card,
	.emerging-banner,
	.emerging-about-section {
		font-size: 80%;
	}

	.emerging-about-card {
		flex-direction: column;
		margin-top: 2rem;
	}

		.emerging-about-card img {
			flex-basis: 100%;
			object-fit: cover;
			max-height: 146px;
			width: 100%;
		}

		.emerging-about-card .content {
			flex-basis: 100%;
		}

	.emerging-about-card {
		max-height: max-content;
	}

	.sme-zone-card .banner-slant-line {
		height: 50%;
	}

	.detail-wrapper {
		text-align: center;
		font-size: 80%;
	}

		.detail-wrapper > * {
			justify-content: center;
			align-items: center;
		}
}

/* ABOUT US  */

.about-title-banner .awards {
	background: url(../images/about-images/banner-1.png);
	height: 400px;
}

.about-title-banner .heading {
	font-size: 3em;
	color: #ffffff;
}

.about-title-banner .text {
	font-size: 1.2em;
	line-height: 1.5;
	max-width: 365px;
	color: #ffffff;
}

.history-section-text {
	background: #f1f1f1;
	padding: 2em;
}

	.history-section-text .heading {
		font-size: 2.5em;
		line-height: 47px;
		color: #444444;
	}

	.history-section-text .heading-2 {
		font-size: 4.5em;
		line-height: 47px;
		color: #444444;
	}

	.history-section-text .text {
		font-weight: normal;
		font-size: 1.1em;
		line-height: 171.19%;
		/* or 27px */
		color: #666666;
	}

	.history-section-text .text-2 {
		font-weight: normal;
		font-size: 1.1em;
		line-height: 100%;
		/* or 27px */
		color: #666666;
	}

.award-box > .d-flex {
	align-items: center;
}

.history-section-text .award-box {
	margin-top: 3rem;
	background: var(--base-brand);
	color: white;
	padding: 2rem;
	max-width: 325px;
	clip-path: polygon(0 0, 100% 0%, 90% 100%, 0% 100%);
	width: 100%;
	transform: translateY(50px);
}

@media (max-width: 992px) {
	.history-section-text .award-box {
		margin-top: -1rem;
		margin-bottom: 4rem;
	}
}

.watch-video {
	background: url("../images/about-images/DSC_8939-1024x1024.png");
	background-position: center;
	background-size: cover;
	min-height: 500px;
}

	.watch-video > * {
		opacity: 1;
	}

.f-125 {
	font-size: 1.25rem;
}

.watch-padding {
	padding: 1.2rem 1.7rem;
}

.history .text {
	font-size: 1.2em;
	line-height: 171.19%;
	color: #666666;
	margin-bottom: 1rem;
}

.multi-colored-line {
	height: 6px;
	margin-top:-5px;
	width: 100vw;
	z-index: 3;
	background: linear-gradient( to right, #114c8d 40%, #9bc002 40%, #9bc002 65%, #eb7824 65%, #eb7824 85%, #057a82 85%, #057a82 100% );
}

.map-visualization .heading {
	font-weight: 300;
	font-size: 2.6em;
	max-width: 588px;
	margin: auto;
	line-height: 47px;
	text-align: center;
	color: #444444;
	display: flex;
	flex-direction: column;
}

/*
.gallery-container .swiper-slide {
	width:80vw !important;
} */

.gallery-container {
	overflow: hidden;
}

.gallery-slide-shell {
	height: 550px;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	background-color: #eee;
	overflow: hidden;
	width: 90vw;
	margin: 0 auto;
}

.gallery-slide-shell-2 {
	height: 615px;
	background-position: top center;
	background-size: cover;
	background-repeat: no-repeat;
	position: relative;
	background-color: #eee;
	overflow: hidden;
	width: 100vw;
	margin: 0 auto;
	z-index: 1;
}

/*.about-gallery-slide-1 {
	background-image: url("../images/about-images/access-building.png");
}

.about-gallery-slide-2 {
	background-image: url("../images/about-images/About_Us-LEVEL.png");
}

.about-gallery-slide-3 {
	background-image: url("../images/about-images/corporate-philisophy-2.png");
}*/

@keyframes loadLine {
	0% {
		width: 0%;
	}

	100% {
		width: 100%;
	}
}

.loading-line {
	width: 0%;
	height: 8px;
	background-color: var(--base-brand);
	position: absolute;
	bottom: 0;
	left: 0;
	animation-name: loadLine;
	animation-iteration-count: infinite;
	animation-duration: 5s;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

.gallery-section {
	overflow: hidden;
}

.gallery-section-2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	overflow: hidden;
}

.gallery-quote-marks {
	position: absolute;
	width: 3rem;
	height: auto;
	left: 24rem;
	bottom: 11.5rem;
	z-index: 2;
}

.gallery-quote-marks-2 {
	position: absolute;
	width: 3rem;
	height: auto;
	right: 1rem;
	top: -1rem;
	z-index: 2;
}

.gallery-strip {
	top: -13% !important;
}

.gallery-strip-2 {
	bottom: -10% !important;
	transform: rotate(-145deg);
	right: 4%;
	left: revert;
	top: revert;
}

.gallery-box {
	position: absolute;
	bottom: 3rem;
	left: 3rem;
	max-width: 493px;
	width: 80%;
	height: 197px;
}

@media (max-width: 500px) {
	.gallery-box {
		height: 245px;
	}
}

.statement-box {
	width: 100%;
	height: 100%;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	position: absolute;
	bottom: 0rem;
	left: 0rem;
	background: radial-gradient( 97.57% 210.75% at 0.9% 2.98%, #ffffff 0%, rgba(255, 255, 255, 0.41) 100% );
	backdrop-filter: blur(42px);
	clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
	overflow: hidden;
	text-overflow: ellipsis;
}

	.statement-box > h3 {
		font-size: 1.3rem;
	}

	.statement-box > p {
		font-size: 1rem;
		display: -webkit-box;
		-webkit-line-clamp: 6; /* number of lines to show */
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

@media (max-width: 767px) {
	.gallery-quote-marks {
		left: 80%;
		bottom: 93%;
	}
}

.stat-box {
	max-width: 493px;
	height: 197px;
	width: 80%;
	display: flex;
	clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
	position: absolute;
	bottom: 0;
	left: 6vw;
	background: #9bc002;
	transform: translateY(50px);
}

.stat-1,
.stat-2 {
	/* padding: 2rem; */
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	height: 100%;
	flex-basis: 45%;
}

.stat-1 {
	border-right: 2px solid hsla(0, 0%, 100%, 0.5);
}

.stat-box .lg-text {
	font-size: 4em;
	line-height: 1em;
	text-align: center;
	color: #ffffff;
	display: block;
}

.stat-box .sm-text {
	font-size: 20px;
	display: block;
	line-height: 23px;
	text-align: center;
	color: #ffffff;
}

.annual-report {
	background-position: center;
	background-size: cover;
	height: 645px;
	margin-top: 4rem;
	/* height: 100%; */
	position: relative;
	margin-bottom: 0;
}

.content-card {
	z-index: 3;
	background: #057a82;
	padding: 3rem;
	margin-left: auto;
	max-width: 438px;
	height: 449px;
	display: flex;
	width: 100%;
	flex-direction: column;
	justify-content: center;
}

@media (max-width: 767px) {
	.content-card {
		padding: 1.5rem;
	}
}

.content-card .heading {
	font-style: normal;
	font-weight: normal;
	font-size: 32px;
	line-height: 37px;
	color: #ffffff;
}

.content-card .text {
	font-weight: normal;
	font-size: 18px;
	line-height: 171.19%;
	/* or 31px */
	color: #ffffff;
	margin-bottom: 3rem;
	margin-top: 1rem;
}

.main-caption {
	background: url(../images/about-images/main-caption-bg.png);
	background-size: cover;
	background-position: top;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 80%;
	margin-right: auto;
	height: 195px;
	padding: 5%;
	font-size: 2.5rem;
}

.caption {
	font-weight: normal;
	font-size: 2.5em;
	line-height: 47px;
	/* identical to box height */
	color: var(--business-brand);
}

.caption-text {
	background: #f1f1f1;
	width: 80%;
	margin-left: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	padding: 5%;
}

	.caption-text .text {
		font-weight: normal;
		font-size: 1.2em;
		max-width: 653px;
		line-height: 1.6;
		/* or 36px */
		color: #444444;
	}

@media (max-width: 576px) {
	.annual-report .container {
		padding: 0 !important;
	}

	body {
		font-size: 80%;
	}

	.award-box {
		align-items: center;
		display: none;
	}

	.stat-box {
		max-width: 493px;
		height: 150px;
		width: 80%;
		display: flex;
		clip-path: polygon(0 0, 100% 0%, 95% 100%, 0% 100%);
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		gap: 1rem;
		background: #9bc002;
		transform: translateY(50px);
	}

		.stat-box .lg-text {
			font-size: 2em;
		}

	#history-section {
		margin-top: 0;
	}

	.watch-video {
		background-position: center;
		background-size: cover;
		height: 320px;
		min-height: 320px;
	}

	.main-caption {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	.caption-text {
		width: 100%;
		padding: 10%;
	}
}

/*     --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px; */

/* CORPORATE BANKING */

.connect_box {
	position: absolute;
	top: 25%;
	bottom: 25%;
	right: 25%;
	left: 25%;
	/* background-color: var(--blue-color); */
	border: 3px solid var(--blue-color);
}

.corporate-about-section {
	background: #f1f1f1;
	padding-bottom: 5%;
}

	.corporate-about-section .heading {
		font-weight: normal;
		font-size: 2.1em;
		color: #555555;
	}

	.corporate-about-section .text {
		font-size: 1.2em;
		color: #555555;
	}

	.corporate-about-section .header-wrapper {
		padding-top: 15%;
		/* padding-bottom: ; */
	}

.corporate-banner .item1 {
	background: url(../images/banners/corporate-banking.png);
	background-size: cover;
	background-position: center center;
}

.flow-card.item2 {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/corporate-banking/sm-banner-2.png);
}

.flow-card.item3 {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/corporate-banking/sm-banner-3.png);
}

.flow-card.item4 {
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/corporate-banking/sm-banner-4.png);
}

.flow-card {
	height: 395px;
	background: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url(../images/corporate-banking/sm-banner-1.png);
	display: flex;
}

	.flow-card .heading {
		font-size: 1.6em;
		line-height: 1.2;
		margin-bottom: 0.6em;
		color: #444444;
	}

	.flow-card .text {
		font-weight: normal;
		font-size: 1em;
		line-height: 1.4;
		/* or 25px */
		color: #666666;
	}

	.flow-card .content {
		margin-top: auto;
		background-color: white;
		padding: 1rem;
		max-width: 499px;
		width: 90%;
	}

/* contact section */

.move-down {
	transform: translateY(6.5rem);
}

@media (min-width: 1000px) {
	.move-down {
		transform: translateY(3rem);
	}
}

.move-down2 {
	transform: translateY(10rem);
}

.contact-section2 {
	min-height: 320px;
	margin-bottom: 15rem;
}

.contact-section2-container {
	width: 90%;
	margin: auto;
}

.contact-section {
	min-height: 450px;
	background: var(--business-brand);
	position: relative;
}

.contact-section-main {
	width: 90%;
	margin: auto;
}

@media (min-width: 1200px) {
	.contact-section {
		height: 400px;
	}
}

@media (max-width: 500px) {
	.contact-section-main {
		width: 100%;
		padding: 0 1rem;
	}

	.contact-section2-container {
		width: 100%;
		padding: 0 1rem;
	}
}

.contact-section .heading {
	font-size: 2.1em;
	line-height: 1.2;
}

.contact-section .text {
	font-size: 1.3em;
	line-height: 1.8;
}

.contact-section .text-2 {
	max-width: 500px;
}

.contact-section .form-wrapper .heading {
	color: var(--business-brand);
	font-size: 1.8em;
}

.contact-section .form-wrapper {
	background: #ffffff;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
	padding: 2em;
}

	.contact-section .form-wrapper .form-control {
		background: #f1f1f1;
		border: 0;
		border-radius: 0;
		padding: 2rem 1rem;
	}

@media (min-width: 100px) {
	.contact-section .form-wrapper .form-control {
		padding: 1.5rem 1rem;
	}
}

/*  MEDIA */

.media-header-banner .item1 {
	background: url(../images/media/banner-1.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.media-header-banner .heading {
	font-weight: 300px;
	line-height: 1;
	font-size: 3.2em;
}

.banner-links {
	font-weight: bold;
	font-size: 1.2em;
	line-height: 160%;
	color: #ffffff;
	display: block;
	padding-bottom: 0.5rem;
}

	.banner-links:hover {
		text-decoration: none;
	}

	.banner-links::after {
		content: "";
		display: block;
		height: 4px;
		width: 100%;
		transition: all 0.3s;
		background-color: white;
	}

	.banner-links:hover::after {
		background-color: var(--base-brand);
	}

	.banner-links.active::after {
		background-color: var(--base-brand);
	}

.media.helpful-tools {
	background-color: var(--business-brand);
	position: relative;
	padding-top: 0rem;
	padding-bottom: 0rem;
	color: #fff;
}

.tool-box {
	width: 176px;
	height: 151px;
	border: 3px solid #01408633;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 1rem;
	transition: transform 0.3s;
	margin: auto;
	text-decoration: none;
	margin-right: 1rem;
}

.subscribe-form {
	max-width: 570px;
	width: 100%;
	will-change: transform;
	padding: 1rem;
	padding-left: 2.5rem;
	color: white;
	transform: translateY(-70px);
	right: 0;
	z-index: 100;
	position: absolute;
	background: radial-gradient( 97.57% 210.75% at 0.9% 2.98%, #ffffff 0%, rgba(255, 255, 255, 0.53) 100% );
	backdrop-filter: blur(42px);
	clip-path: polygon(10% 0%, 100% 0, 100% 100%, 0% 100%);
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-left: 1rem;
}

@media (max-width: 787px) {
	.subscribe-form {
		transform: translate(0%, 0px);
		left: revert;
		padding-left: 1rem;
		backdrop-filter: blur(0px);
		clip-path: polygon(0% 0%, 100% 0, 100% 100%, 0% 100%);
		justify-content: center;
		margin: 0 auto;
		flex-direction: column;
		gap: 0.5rem;
		position: relative;
	}
}

.subscribe-form-group {
	border: 2px solid #000;
	padding: 0.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 1rem;
}

@media (max-width: 500px) {
	.subscribe-form-group {
		flex-direction: column;
		width: 100%;
	}

		.subscribe-form-group button {
			width: 100%;
		}
}

.subscribe-form-group .form-control {
	border: none;
	border-radius: 0px;
	padding: 0.5rem;
	color: var(--private-brand);
	background: transparent;
	box-shadow: none;
}

	.subscribe-form-group .form-control:focus {
		box-shadow: none;
	}

.tool-box:hover {
	transform: translateY(-10px);
	text-decoration: none;
}

.center-item {
	display: flex;
	align-items: center;
	justify-content: center;
}

#custom-scrollbar.blue::-webkit-scrollbar-track {
	background: #0140864d;
	width: 5px;
	height: 4px;
}

#custom-scrollbar.blue::-webkit-scrollbar {
	background-color: #f5f5f5;
}

#custom-scrollbar.blue::-webkit-scrollbar-thumb {
	box-shadow: inset 0 0 6px #0140864d;
	-webkit-box-shadow: inset 0 0 6px #0140864d;
	background-color: #555;
	background: var(--business-brand);
}

/*.media-photo-1 {
	background-image: url("../images/media/photo-1.png");
}

.media-photo-2 {
	background-image: url("../images/media/photo-2.png");
}

.media-photo-3 {
	background-image: url("../images/media/photo-3.png");
}

.media-photo-4 {
	background-image: url("../images/media/photo-1.png");
}

.media-photo-5 {
	background-image: url("../images/media/photo-2.png");
}

.media-photo-6 {
	background-image: url("../images/media/photo-3.png");
}*/

.career-strip {
	display: block;
	left: 3%;
	top: -10%;
}

@media (max-width: 767px) {
	.career-strip {
		left: 10%;
	}
}

.media-photo {
	background-size: cover;
	background-position: top center;
	height: 30rem;
	/*width: 400px;*/
	position: relative;
	overflow: hidden;
}

.photos-glass {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	position: absolute;
	bottom: 5%;
	left: 5%;
	width: 90%;
	clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
	background: radial-gradient( 97.57% 210.75% at 0.9% 2.98%, #ffffff 0%, rgba(255, 255, 255, 0.53) 100% );
	backdrop-filter: blur(42px);
}

.photos-glass-header {
	font-size: 1em;
}

.photos-glass-text {
	font-size: 0.8em;
}

.photos-section {
	/* background-image: url("../images/ways-to-bank/promotions-photo.png"); */
	background-position: center;
	background-size: cover;
	color: #fff;
	/*display: flex;*/
	justify-content: flex-start;
	align-items: center;
	margin: auto;
	/* margin: 0 !important; */
	/* overflow-x: hidden; */
	padding: 4rem 0;
	/*padding-bottom: 6rem;*/
	background: #ffffff;
	width: 100%;
	/* height: 32rem; */
}

.photos-section2 {
	background-image: url("../images/ways-to-bank/promotions-photo.png");
	background-position: center;
	background-size: cover;
	color: #fff;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin: auto;
	margin-bottom: 6rem;
	margin-top: 4rem;
	/* margin: 0 !important; */
	/* overflow-x: hidden; */
	position: relative;
	width: 85%;
	height: 32rem;
}

/*@media (max-width: 567px) {
	.photos-section {
		width: calc(100% - 20px);
		height: 32rem;
	}
	.photos-section2 {
		width: calc(100% - 20px);
		height: 32rem;
	}
}*/

/* .photos-section > div {
	background: radial-gradient(
		97.57% 210.75% at 0.9% 2.98%,
		#ffffff 0%,
		rgba(255, 255, 255, 0.41) 100%
	);
	backdrop-filter: blur(42px);
	padding: 4rem 5rem;
	clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
	height: 100%;
	width: 500px;
} */

.photos-section p {
	font-size: 1.2rem;
}

@media (max-width: 767px) {
	.photos-section {
		padding: 4rem 0rem;
	}

	.photos-section2 {
		padding: 4rem 0rem;
	}

	/* .photos-section > div {
		width: 80%;
		padding: 4rem 2.5rem;
		clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
	} */
}

.photos-section footer {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 1.5rem;
}

.photos-section .photos-swiper-button-prev,
.photos-section .photos-swiper-button-next {
	color: var(--white-brand);
	border: 2px solid var(--white-brand);
	position: static;
	margin: 0 10px;
	transition: transform 0.3s;
	border-radius: 50%;
	height: 50px;
	width: 50px;
	display: grid;
	place-items: center;
}

.orange-theme .photos-swiper-button-prev,
.orange-theme .photos-swiper-button-next {
	color: var(--orange-color);
	border: 2px solid var(--orange-color);
}

.orange-theme .swiper-button-prev,
.orange-theme .swiper-button-next {
	color: var(--orange-color);
	border: 2px solid var(--orange-color);
}

.swiper-control:focus,
.swiper-control:active {
	outline-width: 0;
	transform: scale(1.1);
}

.access-help-center-swiper {
	overflow-x: hidden;
}

.photos-swiper-container {
	width: 100%;
	height: auto;
	overflow-x: hidden;
	padding: 1rem 0;
	margin: auto;
}

/* .photos-swiper-container .swiper-wrapper{
	width:80%;
	margin:auto;
} */

.swiper-container-horizontal > .swiper-pagination-progressbar {
	height: 4px;
	left: 0;
	top: auto;
	bottom: 0;
}

.photos-swiper-container-horizontal > .photos-swiper-pagination-progressbar {
	height: 4px;
	left: 0;
	top: auto;
	bottom: 0;
}

.featured-news {
	background: #f1f1f1;
	min-height: 700px;
	padding: 4rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.underlined-header {
	border-bottom: 5px solid var(--business-brand);
}

.underlined-header-white {
	border-bottom: 5px solid #fff;
}

.underlined-header .heading {
	font-size: 1.8em;
}

.underlined-header-white .heading {
	font-size: 1.8em;
	color: #fff;
}

.news-card {
	background: #f9f9f9;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
	transition: box-shadow background 0.3s ease-out;
}

	.news-card:hover {
		background: #f7f7f7;
		text-decoration: none;
		box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.1);
	}

	.news-card .news-card-img {
		clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
	}

@media (max-width: 992px) {
	.news-card .news-card-img {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
}

.news-card .heading {
	font-weight: 500;
	font-size: 21px;
	line-height: 124.69%;
	/* or 26px */
	color: var(--business-brand);
	display: -webkit-box;
	-webkit-line-clamp: 2; /* number of lines to show */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-card .text {
	font-weight: normal;
	font-size: 16px;
	line-height: 160%;
	/* or 26px */
	color: #444444;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* number of lines to show */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.news-card footer {
	border-top: 2px solid hsla(212, 99%, 26%, 0.2);
	padding-top: 1rem;
}

.date {
	font-weight: 500;
	/* font-size: 16px; */
	line-height: 160%;
	/* color: #777777; */
}

.full-date {
	font-weight: 500;
	line-height: 160%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.news-card {
	flex-wrap: wrap;
}

	.news-card img {
		max-height: 220px;
		height: auto;
		min-height: 220px;
		object-fit: cover;
		width: 100%;
		/* max-width: 190px; */
	}

.press-section {
	padding: 4rem 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.press-release-card .heading {
	font-weight: normal;
	font-size: 1.5em;
	line-height: 1;
	/* or 26px */
	color: #fff;
	max-width: 800px;
}

.press-release-card .feather {
	color: #fff;
}

.press-release-card {
	padding: 1rem 0;
	transition: transform 0.5s ease-out;
	border-bottom: 1px solid #fff;
}

	.press-release-card:hover {
		text-decoration: none;
		transform: scale(1.01);
	}

	.press-release-card img {
		width: 90px;
		height: 94px;
		object-fit: cover;
	}

.presentations {
	background: #f1f1f1;
	padding: 4rem 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.presentation-card {
	display: block;
	height: 300px;
	transition: transform 0.3s;
	background: url(../images/svgIcons/pdf.svg) no-repeat;
	background-color: #f9f9f9;
	background-position: 1rem 190px;
	background-size: 70px;
	padding: 1.3em;
	font-weight: normal;
	font-size: 1.2em;
	line-height: 130%;
	/* or 26px */
	color: var(--business-brand);
	transition: background-color color transform 0.3s ease-out;
	border-bottom: 7px solid #e3e8ef;
	will-change: transform;
}

	.presentation-card .full-date {
		font-size: 0.8em;
		color: #000;
	}

	.presentation-card:hover {
		background-color: #f7f7f7;
		background: url(../images/svgIcons/pdf-2.svg) no-repeat;
		background-color: #f9f9f9;
		background-position: 1rem 190px;
		background-size: 70px;
		color: var(--business-brand);
		text-decoration: none;
		transform: scale(1.05);
		border-bottom: 7px solid var(--business-brand);
	}

.video-gallery {
	padding: 4rem 0;
	background: var(--personal-brand);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.videos-grid {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 1rem;
	height: 800px;
	position: relative;
}

	.videos-grid .videos-swiper-container {
		width: 100%;
		height: 70%;
		overflow: hidden;
	}

.videos-swiper-container img {
	width: 7rem;
}

.video-thumb {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	max-width: 280px;
	margin: 0 auto;
	color: #fff;
	height: 100%;
}

	.video-thumb .img-gal {
		height: 80%;
	}

	.video-thumb img {
		width: 3.5rem;
	}

	.video-thumb .heading {
		font-size: 1rem;
	}

	.video-thumb .full-date {
		font-size: 0.9rem;
	}

.videos-grid .thumbnail-swiper-container {
	height: 30%;
	width: 100%;
	overflow: hidden;
	position: relative;
}

@media (max-width: 767px) {
	.videos-grid .thumbnail-swiper-container {
		width: 80%;
		margin: 0 auto;
	}
}

.thumbnail-swiper-container .swiper-slide .image-gal {
	filter: brightness(0.5);
}

.thumbnail-swiper-container .swiper-slide-thumb-active .image-gal {
	filter: brightness(1);
}

/*.videos-grid .thumbnail-swiper-button-prev,
.videos-grid .thumbnail-swiper-button-next {
	position: absolute;
	color: #fff;
	bottom: 17%;
	z-index: 3;
}

.videos-grid .thumbnail-swiper-button-prev {
	left: -5%;
}

.videos-grid .thumbnail-swiper-button-next {
	right: -5%;
}
*/
.videos-grid .thumbnail-swiper-button-prev,
.videos-grid .thumbnail-swiper-button-next {
	position: absolute;
	color: #fff;
	bottom: 17%;
	z-index: 3;
}

.videos-grid .thumbnail-img-swiper-button-next {
	position: absolute;
	color: #fff;
	right: 1%;
	top: 35%;
	font-size: 18px;
	z-index: 3;
	cursor: pointer;
}

.videos-grid .thumbnail-img-swiper-button-prev {
	position: absolute;
	color: #fff;
	font-size: 18px;
	top: 35%;
	left: 1%;
	z-index: 3;
	cursor: pointer;
}

.videos-grid .thumbnail-swiper-button-prev {
	left: -5%;
}

.videos-grid .thumbnail-swiper-button-next {
	right: -5%;
}

.item-lg {
	grid-column: 1 / span 2;
	grid-row: 1 / span 2;
}

.image-gal {
	background-position: top center;
	background-size: cover;
}

.image-gal-1 {
	background-image: url("../images/media/image-gal-1.png");
}

.image-gal-2 {
	background-image: url("../images/media/image-gal-2.png");
}

.image-gal-3 {
	background-image: url("../images/media/image-gal-3.png");
}

.image-gal-4 {
	background-image: url("../images/media/image-gal-4.png");
}

@media (max-width: 575px) {
	.press-release-card .heading {
		font-size: 1.4em;
	}

	.image-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(3, 150px);
		gap: 1rem;
	}

	.item-lg {
		grid-column: 1 / -1;
		grid-row: 1 / span 1;
	}
}

@media (max-width: 308px) {
	.subscribe-form {
		margin-top: 3rem;
	}
}

/* CAREERS */

.career-header-banner .item1 {
	background: url(../images/careers/header-banner.png) no-repeat;
	background-position: center center;
	background-size: cover;
}

.intro-section {
	background: #f1f1f1;
	padding-bottom: 5rem;
	position: relative;
	z-index: 3;
}

.lg-card-wrapper {
	transform: translateY(-40px);
}

.lg-card {
	padding: 2rem;
	height: 370px;
}

.intro-section .heading {
	font-weight: normal;
	font-size: 1.8em;
	line-height: 120%;
	color: #f9f9f9;
	max-width: 225px;
	margin-bottom: 1rem;
}

.lg-card .text {
	font-weight: normal;
	font-size: 20px;
	line-height: 1.3;
	/* or 35px */
	color: #ffffff;
}

.lg-card:nth-child(1) {
	background: var(--business-brand);
}

.lg-card:nth-child(2) {
	background: #eb7824;
}

.sm-card {
	width: 336px;
	height: 305px;
	color: #ffffff;
	background: #9bc002;
	padding: 2rem;
	position: relative;
}

	.sm-card::after {
		width: 80px;
		height: 100px;
		color: #ffffff;
		background: #cccccc;
		position: absolute;
		content: "";
		left: -80px;
		top: 0;
	}

	.sm-card .text {
		font-weight: normal;
		font-size: 20px;
		line-height: 1.6;
		/* or 35px */
		color: #ffffff;
	}

.xs-card,
.sm-card {
	text-decoration: none !important;
}

.xs-card {
	width: 253px;
	height: 243px;
	background: #8b8b8b;
	padding: 2rem;
}

.intro-section .content {
	font-size: 1.2em;
	line-height: 1.6;
	/* or 29px */
	color: #444444;
	transform: translateY(-70px);
}

.intro-heading {
	max-width: 236px;
	font-weight: normal;
	font-size: 2em;
	line-height: 1.2;
	margin-bottom: 1.5rem;
}

.triangle-down {
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 27px solid #fff;
	position: absolute;
	top: -50px;
	left: 49%;
}

.top_fixed_box {
	position: absolute;
	top: 0;
	height: 100px;
	width: 80px;
	background-color: var(--green-color);
	padding-bottom: 1rem;
	color: white;
	transform: translateY(-50%);
}

.opportunity-section {
	height: 675px;
	/* height: 100%; */
	/* background: url(../images/careers/mid-sect-banner.png) no-repeat; */
	background-position: center center;
	background-size: cover;
	background-color: #f1f1f1;
	/* display: flex; */
	z-index: 3;
}

.opportunity-container {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}

#opportunities {
	min-height: 320px;
}

	#opportunities #opportunity-id li {
		background-color: #ee7e01;
	}

.opportunity-section .content {
	margin-top: auto;
	transform: translateY(50%);
	background: #003624;
	color: rgba(255, 255, 255, 0.8);
	/* padding: 4rem; */
	line-height: 1.7;
}

	.opportunity-section .content .pad-4 {
		padding: 4rem;
	}

.opportunity-section .text {
	font-size: 1em;
}

.opportunity-section .text-2 {
	font-size: 0.8em;
}

.opportunity-section .bold {
	font-weight: 600;
}

.opportunity-section .opportunity-slide img {
	border-radius: 50%;
	margin-bottom: 1.5rem;
}

.opportunity-section .text.right-text {
	/*width: 65%;*/
	width: 100%;
	text-align: center;
}

.opportunity-section .content .col-lg-7 {
	border-right: 1px solid rgba(255, 255, 255, 0.4);
}

@media (max-width: 992px) {
	.opportunity-section .content .col-lg-7 {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.4);
		/* padding: 2rem; */
	}

	.sm-card {
		width: 100%;
	}

		.sm-card::after {
			display: none;
		}
}

@media (max-width: 500px) {
	.opportunity-section .text.right-text {
		width: 95%;
	}
}

.opportunity-section .content .heading {
	font-weight: 300;
	font-size: 2em;
	line-height: 140%;
	margin-bottom: 2.5rem;
	color: #f9f9f9;
}

.stats {
	color: var(--business-brand);
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
}

	.stats .heading {
		font-weight: 300;
		font-size: 3.75em;
	}

	.stats .text {
		font-size: 1.25em;
		color: var(--business-brand);
	}

.internship-section {
	min-height: 250px;
	background: #f1f1f1;
	/* margin-bottom: 15rem; */
}

.environments {
	background: #f1f1f1;
	position: relative;
	margin-top: 0rem;
	padding-top: 15rem;
	padding-bottom: 10rem;
	margin-bottom: 2rem;
	overflow: hidden;
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);
}

	.environments .heading {
		font-size: 2.25em;
		line-height: 1.2;
		color: #444444;
		margin-bottom: 1rem;
	}

	.environments .text {
		font-size: 1.2em;
		line-height: 1.6;
		color: #444444;
	}

.floated-box {
	position: absolute;
	width: 65%;
	height: 75%;
	left: 10%;
	bottom: -10%;
	background: url("../images/careers/SVGIcons/access-daimond.svg") no-repeat;
	background-size: contain;
	background-position: center;
}

@media (max-width: 992px) {
	.intro-section .content {
		transform: translateY(0px);
	}

	.floated-box {
		width: 80%;
		bottom: -30%;
	}

	.xs-card {
		width: 100%;
	}
}

@media (max-width: 991px) {
	.environments {
		padding-top: 30rem;
		margin-bottom: 4rem;
	}
}

@media (max-width: 767px) {
	.intro-section {
		margin-top: 3rem;
	}
}

@media (max-width: 767px) {
	.content-wrapper {
		order: 1;
		-ms-flex-order: 1;
	}

	.xs-card {
		margin-left: auto;
		margin-bottom: 1.5rem;
		/* transform: translateY(-60px); */
		width: 100%;
	}

	.sm-card {
		width: 100%;
	}

	.environments {
		padding-top: 40rem;
		clip-path: polygon(0 0, 100% 0, 100% 98%, 0% 100%);
		padding-bottom: 5rem;
	}
}

@media (max-width: 575px) {
	.environments {
		padding-top: 40rem;
	}

	.lg-card {
		height: 245px;
	}

		.lg-card .text {
			font-size: 16px;
		}

	.sm-card .text {
		font-size: 16px;
	}

	.intro-section .content {
		margin: 2em 0;
		transform: translateY(0px);
	}

	.intro-section .heading {
		font-size: 1.5em;
	}

	.stats {
		flex-direction: column;
		text-align: center;
		margin-top: 25rem;
	}

	.sm-card {
		width: 100%;
	}

	.floated-box {
		display: none;
	}
}

@media (max-width: 535px) {
	.environments {
		padding-top: 40rem;
	}
}

@media (max-width: 410px) {
	.environments {
		padding-top: 45rem;
	}
}

@media (max-width: 380px) {
	.environments {
		padding-top: 50rem;
	}
}

@media (max-width: 360px) {
	.environments {
		padding-top: 55rem;
	}
}

@media (max-width: 300px) {
	.environments {
		padding-top: 64rem;
	}
}

/* BUSINESS BANKING */

.business-header-banner {
	height: 700px;
}

	.business-header-banner .item1 {
		background: url(../images/business-images/header-banner.png);
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		align-items: center;
	}

		.business-header-banner .item1 .container {
			padding-bottom: 15vh;
		}

.acc-card {
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	margin-bottom: 1rem;
}

	.acc-card .top img {
		width: 100%;
		max-height: 220px;
		object-fit: cover;
	}

	.acc-card:hover {
		text-decoration: none;
	}

	.acc-card .bottom {
		background-color: white;
		padding: 2em;
	}

	.acc-card .heading {
		font-weight: 500;
		font-size: 1.6em;
		line-height: 1;
		color: #444444 default;
		margin-bottom: 0.6em;
	}

	.acc-card .text {
		font-size: 1.15em;
		line-height: 1.6;
		/* or 28px */
		color: #666666;
	}

@media (max-width: 575px) {
	.business-account {
		transform: translateY(70px);
	}
}

/* CONTACT US */

.contact-banner .item1 {
	background: url(../images/contact/contact-banner.png) no-repeat;
	background-size: cover;
	background-position: center;
	line-height: 0.9;
}

.cta-1 {
	background: url(../images/contact/contact-mid-1.png) no-repeat;
}

.cta-2 {
	background: url(../images/contact/contact-mid-2.png) no-repeat;
}

.cta-3 {
	background: url(../images/contact/contact-mid-3.png) no-repeat;
}

.cta {
	background-size: cover;
	background-position: center center;
	height: 100vw;
	max-height: 560px;
}

.contact-clip {
	clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
}

.contact-top {
	padding-top: 8rem;
}

.contact-card2 {
	position: absolute;
	width: 90%;
	max-width: 24rem;
	height: 100%;
	max-height: 450px;
	left: 5%;
	display: flex;
	flex-direction: column;
	bottom: 0;
	background: var(--business-brand);
	box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.05);
	transform: translateY(70px);
	border-top: 1rem solid var(--base-brand);
}

.contact-card-left {
	position: absolute;
	width: 90%;
	max-width: 24rem;
	height: 100%;
	max-height: 240px;
	left: 5%;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	bottom: 0;
	box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.05);
	transform: translateY(40px);
}

.contact-card-right {
	position: absolute;
	width: 90%;
	max-width: 24rem;
	height: 100%;
	max-height: 240px;
	right: 5%;
	justify-content: space-around;
	display: flex;
	flex-direction: column;
	bottom: 0;
	box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.05);
	transform: translateY(40px);
}

.blue-card {
	background: var(--business-brand);
}

.contact-card.orange-card {
	background: var(--orange-color);
}

.cta .green-card {
	background: #9bc002;
	transform: translateY(-20px);
	box-shadow: 0px 50px 50px rgba(0, 0, 0, 0.15);
}

.social-contact {
	border-top: 2px solid #eb7824;
	border-bottom: 2px solid #eb7824;
}

	.social-contact .grid-wrapper {
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(6, 1fr);
		height: 100%;
		overflow-x: auto;
	}

.soc-media-card {
	font-size: 1.15em;
	transition: all 0.3s;
	min-width: 165px;
	min-height: 180px;
}

	.soc-media-card .fab {
		margin-bottom: 0.5em;
		color: #444444;
		font-size: 30px;
	}

	.soc-media-card:hover {
		background: #fff3eb;
		text-decoration: none;
	}

@media (max-width: 575px) {
	.cta {
		background-size: cover;
		background-position: center center;
		height: 100vw;
		max-height: 560px;
		width: 100%;
	}

		.cta .blue-card {
			left: 0;
			width: 100%;
			height: max-content;
			/* max-height: 160px; */
			position: absolute;
			transform: translateY(0);
		}
}

/* WAYS TO BANK */

.way2back-header-banner {
	height: 650px;
	display: grid;
	grid-template-rows: auto max-content;
}

/* .way2back-header-banner .item1 {
    background: url(../images/ways-to-bank/header-banner.png) no-repeat;
    background-size: cover;
    background-position: center;
} */

.transformedY .featured-boxes {
	margin-top: -5rem;
	clip-path: polygon(0 0, 95% 0%, 95% 100%, 0% 100%);
}

.text {
	font-weight: normal;
	line-height: 1.6;
}

.ways2-bank {
	background-color: #eeeeee;
}

.ways2-bank-grid {
	display: grid;
	grid-template-columns: 15vw 25% 1fr;
}

.nav-wrapper {
	grid-column: 2 / 3;
}

.tab-content {
	grid-column: 3 / 4;
}

	.tab-content .left {
		background-color: white;
		padding: 2.5em 2em 4rem;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

.ways-to-bank-nav .nav-item {
	display: block;
	width: 100%;
	padding: 0.8em;
	/* margin: .4em 0; */
	transition: background-color 0.3s;
	color: #555555;
	font-size: 1.15em;
}

	.ways-to-bank-nav .nav-item:hover,
	.ways-to-bank-nav .nav-item.active {
		background-color: white;
		text-decoration: none;
		color: var(--private-brand);
	}

/* Old tamanda */

.tamada-section {
	background: #a4c618;
	padding: 5rem 0 0;
	position: relative;
	overflow: hidden;
	min-height: 1000px;
	height: 100vh;
}

	.tamada-section .bg-dot {
		background: #ffffff;
		opacity: 0.2;
		border-radius: 50%;
		position: absolute;
		z-index: 0;
	}

.dot-lg {
	width: 45vw;
	height: 45vw;
	bottom: -20%;
	left: 20%;
}

.dot-sm {
	width: 172px;
	height: 172px;
	bottom: 0;
	right: 15%;
}

.dot-md {
	opacity: 0.5;
	width: 293px;
	height: 293px;
	bottom: 30%;
	right: 20%;
}

.tamada-section .text {
	font-size: 1.15em;
	text-align: center;
	color: #ffffff;
	max-width: 500px;
	margin: auto;
}

.tamada-section .tamada {
	text-align: center;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
}

.contact-section .white-card {
	position: relative;
	height: 292px;
	font-weight: 500;
	padding: 2rem;
	background: #ffffff;
	font-size: 18px;
	display: grid;
	z-index: 1;
	grid-template-rows: 60px 1fr 20px;
}

	.contact-section .white-card::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 0%;
		clip-path: polygon(0 30%, 100% 0, 100% 100%, 0% 100%);
		background: #feebee;
		bottom: 0;
		left: 0;
		z-index: -1;
		transition: 0.2s cubic-bezier(0.25, 1, 0.3, 1);
	}

	.contact-section .white-card:hover::after {
		height: 40%;
		color: #b8061f;
		transition: 0.4s cubic-bezier(0.25, 1, 0.3, 1);
	}

	.contact-section .white-card:hover {
		color: #b8061f;
	}

@media (min-width: 107px) {
	.contact-section .white-card .text-w {
		font-size: 95%;
	}
}
/* .contact-section .white-card:nth-child(1) {
	color:#B8061F;
	background:linear-gradient(170deg , white 60% , #FEEBEE 40%)
} */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
	max-width: 650px;
	gap: 1.5rem;
	margin-left: auto;
}

	.contact-grid .a {
		display: block !important;
	}

.tamada_section {
	/* padding-top: 5rem; */
	/* padding-bottom: 5rem; */
}

.round_bg {
	position: absolute;
	max-height: 800px;
	right: -5%;
	height: 50vw;
	width: 50vw;
	border-radius: 50%;
	background-color: white;
	bottom: -20%;
}

@media (max-width: 700px) {
	.round_bg {
		right: 5%;
	}
}

.tamanda_container img {
	transform: scale(1.1) translateY(-27px);
}

@media (max-width: 700px) {
	.tamanda_container img {
		transform: scale(0.8) translateY(74px);
	}

	.tamada_section .translated-right {
		transform: translate(0);
	}
}

/*New CSS Starts*/
/* WAYS TO BANK */
.way2back-header-banner {
	height: 650px;
	display: grid;
	grid-template-rows: auto max-content;
}

/* .way2back-header-banner .item1 {
    background: url(../images/ways-to-bank/header-banner.png) no-repeat;
    background-size: cover;
    background-position: center;
} */
.acccess-service-container {
	margin-top: 150px !important;
}

.access-services-bulb {
	position: relative;
	width: 100%;
	height: 100%;
}

	.access-services-bulb img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}

.access-money-service-image-bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: -15%;
}

	.access-money-service-image-bg img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}

@media only screen and (max-width: 768px) {
	/* For mobile phones: */
	.access-money-service-image-bg {
		top: 0;
		margin-top: 20px;
		margin-bottom: 100px !important;
	}

	.introduction-header {
		margin-top: -80px;
	}

	.features-bg-container {
		margin-top: -10px !important;
	}

	.access-services-bulb {
		margin-top: 30px;
	}
}

@media (min-width: 768px) and (max-width: 992px) {
	.access-services-bulb {
		margin-top: 70px;
	}
}

.features-bg-container {
	display: flex;
	justify-content: center;
	background: #B8061F;
	margin-top: -140px;
	padding-top: 30px;
	position: relative;
}

.features-swiper {
	/* width: 90%; */
	display: flex;
	justify-content: space-between;
}

.transformedY .featured-boxes {
	margin-top: -5rem;
	clip-path: polygon(0 0, 95% 0%, 95% 100%, 0% 100%);
}

.text {
	font-weight: normal;
	line-height: 1.6;
}

.ways2-bank {
	background-color: #eeeeee;
}

.ways2-bank-grid {
	display: grid;
	grid-template-columns: 15vw 25% 1fr;
}

.nav-wrapper {
	grid-column: 2 / 3;
}

.tab-content {
	grid-column: 3 / 4;
}

	.tab-content .left {
		background-color: white;
		padding: 2.5em 2em 4rem;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

.ways-to-bank-nav .nav-item {
	display: block;
	width: 100%;
	padding: 0.8em;
	/* margin: .4em 0; */
	transition: background-color 0.3s;
	color: #555555;
	font-size: 1.15em;
}

	.ways-to-bank-nav .nav-item:hover,
	.ways-to-bank-nav .nav-item.active {
		background-color: white;
		text-decoration: none;
		color: var(--private-brand);
	}

.swiper-content {
	margin-top: 70px !important;
	z-index: 999;
	position: relative;
	display: none;
}

.swiper-slide-active .swiper-content {
	display: block;
}

.card-line {
	position: absolute;
	top: -55px;
	width: 1.3px;
	background: #ffff;
	height: 50px;
	left: 47%;
}
/* XTRAVAGANZA PAGE  */
.xtravaganza-images-container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.xtravaganza-image-right-container {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: start;
	margin-top: -30px;
}

.xtravaganza-images-container img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.xtravaganza-image-right-container img {
	width: 95%;
	height: 95%;
	object-fit: contain;
	object-position: center;
}
/* Old tamanda */

.tamada-section {
	background: #a4c618;
	padding: 5rem 0 0;
	position: relative;
	overflow: hidden;
	min-height: 1000px;
	height: 100vh;
}

	.tamada-section .bg-dot {
		background: #ffffff;
		opacity: 0.2;
		border-radius: 50%;
		position: absolute;
		z-index: 0;
	}

.dot-lg {
	width: 45vw;
	height: 45vw;
	bottom: -20%;
	left: 20%;
}

.dot-sm {
	width: 172px;
	height: 172px;
	bottom: 0;
	right: 15%;
}

.dot-md {
	opacity: 0.5;
	width: 293px;
	height: 293px;
	bottom: 30%;
	right: 20%;
}

.tamada-section .text {
	font-size: 1.15em;
	text-align: center;
	color: #ffffff;
	max-width: 500px;
	margin: auto;
}

.tamada-section .tamada {
	text-align: center;
	position: absolute;
	bottom: 0;
	right: 0;
	left: 0;
}

.contact-section .white-card {
	position: relative;
	height: 292px;
	font-weight: 500;
	padding: 2rem;
	background: #ffffff;
	font-size: 18px;
	display: grid;
	z-index: 1;
	grid-template-rows: 60px 1fr 20px;
}

	.contact-section .white-card::after {
		position: absolute;
		content: "";
		width: 100%;
		height: 0%;
		clip-path: polygon(0 30%, 100% 0, 100% 100%, 0% 100%);
		background: #feebee;
		bottom: 0;
		left: 0;
		z-index: -1;
		transition: 0.2s cubic-bezier(0.25, 1, 0.3, 1);
	}

	.contact-section .white-card:hover::after {
		height: 40%;
		color: #b8061f;
		transition: 0.4s cubic-bezier(0.25, 1, 0.3, 1);
	}

	.contact-section .white-card:hover {
		color: #b8061f;
	}

.limit-border-line {
	width: 3px;
	height: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 46%;
	background: #EE7E01;
}

@media (min-width: 107px) {
	.contact-section .white-card .text-w {
		font-size: 95%;
	}
}
/* .contact-section .white-card:nth-child(1) {
	color:#B8061F;
	background:linear-gradient(170deg , white 60% , #FEEBEE 40%)
} */
.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
	max-width: 650px;
	gap: 1.5rem;
	margin-left: auto;
}

	.contact-grid .a {
		display: block !important;
	}

.tamada_section {
	/* padding-top: 5rem; */
	/* padding-bottom: 5rem; */
}

.round_bg {
	position: absolute;
	max-height: 800px;
	right: -5%;
	height: 50vw;
	width: 50vw;
	border-radius: 50%;
	background-color: white;
	bottom: -20%;
}

@media (max-width: 700px) {
	.round_bg {
		right: 5%;
	}
}

.tamanda_container img {
	transform: scale(1.1) translateY(-27px);
}

@media (max-width: 700px) {
	.tamanda_container img {
		transform: scale(0.8) translateY(74px);
	}

	.tamada_section .translated-right {
		transform: translate(0);
	}
}

/*New CSS Ends*/

/* tamada chat */

.chat {
	max-width: 800px;
	position: absolute;
	top: 200px;
	right: 0;
	left: 0;
}

.translated-left {
	transform: translateX(-20px);
}

.translatedY50 {
	transform: translateY(50%);
}

.translated-down {
	transform: translateY(30px);
}

.translated-right {
	transform: translateX(60px);
}

.message-box {
	background-color: white;
	height: 100px;
	width: 240px;
	padding: 0 10px;
	filter: drop-shadow(0px 15px 30px rgba(0, 0, 0, 0.1));
	border-radius: 5px;
	box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.1);
	clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 85% 75%, 85% 100%, 75% 75%, 0% 75%);
}

	.message-box.left {
		clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 24% 75%, 15% 100%, 14% 75%, 0% 75%);
	}

.tamada-icon {
	background-color: var(--business-brand);
	height: 45px;
	width: 45px;
	border-radius: 50%;
}

/* SUSTAINABLE BANKING */

.sustainable-about-section {
	background: #f1f1f1;
}

	.sustainable-about-section .text {
		font-size: 1rem;
	}

.sustainable-banner .item1 {
	background: url(../images/sustainable-banking/header-banner.png) no-repeat;
	background-size: cover;
	background-position: center;
}

.about-text {
	padding: 15% 0 10%;
	line-height: 1.6;
}

.green-card {
	width: 326px;
	/* height: 145px; */
	padding: 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #9bc002;
}

@media (max-width: 991px) {
	.ways2-bank-grid {
		display: grid;
		grid-template-columns: 1fr;
		padding: 1rem;
	}

	.nav-wrapper {
		grid-column: 1;
	}

	.tab-content {
		grid-column: 1;
	}
}

@media (max-width: 575px) {
	.tamada-section {
		min-height: 700px;
	}

	.chat {
		top: 300px;
	}
}

/* CUSTOMER SUPPORT */

/* header banner */

.customer-support-banner .item1 {
	/* background:  */
	background: linear-gradient( 90deg, hsla(0, 0%, 0%, 0.8) 0%, rgba(203, 207, 208, 0) 97.73% ), url(../images/customer-support/header-banner.png);
	/* opacity: 0.8; */
	background-size: cover;
	background-position: center;
}

.floated-blue-card {
	background: var(--business-brand);
	max-width: 474px;
	width: 100%;
	height: 159px;
	padding: 2rem;
	position: relative;
	transform: translateY(-50%);
	border-bottom: 5px solid #f98537;
}

/* support types */

.support-card {
	/* width: 366px; */
	height: 183px;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: white;
	color: #999999;
	box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.05);
	position: relative;
}

	.support-card::after {
		background: url(../images/svgIcons/finger-print.svg) 80% bottom no-repeat;
		content: "";
		opacity: 0.3;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		position: absolute;
	}

	.support-card.bvn::after {
		background-image: url(../images/svgIcons/finger-print.svg);
	}

	.support-card.question::after {
		background-image: url(../images/svgIcons/question-mark.svg);
	}

	.support-card.download::after {
		background-image: url(../images/svgIcons/download.svg);
	}

/* search form */

.search-form {
	max-width: 930px;
	display: flex;
	align-items: center;
	margin-right: auto;
	margin-left: auto;
	height: 55px;
}

.search-input {
	height: 100%;
	border: none;
}

	.search-input:focus {
		box-shadow: none;
	}

.search-button {
	background-color: var(--business-brand);
	color: white;
	height: 100%;
	border: none;
	outline-width: 0 !important;
	padding: 0 1rem;
}

	.search-button.bg-green {
		background-color: var(--green-color);
	}

/* support carousel */

.support-carousel-controller {
	height: 50px;
	max-width: 120px;
	margin-top: 5rem;
}

.round-blue-btn {
	width: 50px;
	border: 2px solid var(--business-brand);
	height: 50px;
	border-radius: 50%;
	background-color: transparent;
	color: var(--business-brand);
	transition: all 0.3s;
}

	.round-blue-btn:focus,
	.round-blue-btn:active,
	.round-blue-btn:hover {
		transform: scale(1.1);
		color: var(--business-brand);
	}

.about-customer-support {
	position: relative;
	height: 1000px;
	display: grid;
	grid-template-rows: 1fr max-content;
}

.floated-banner {
	background: url(../images/customer-support/md-banner.png) top right no-repeat;
	background-size: cover;
	width: 50%;
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
}

.download-button {
	width: 313px;
	height: 80px;
	z-index: 4445555;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 1.3em;
}

.chevron-card {
	display: grid;
	grid-template-columns: 2fr 1fr;
	height: 220px;
	width: 100%;
}

	.chevron-card .left p {
		max-width: 260px;
	}

	.chevron-card .left {
		clip-path: polygon(85% 0, 100% 50%, 85% 100%, 0% 100%, 0 42%, 0% 0%);
		background: #f98537;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 1rem;
	}

	.chevron-card .right {
		margin-left: -6rem;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.chevron-card.first .right {
		background: url(../images/customer-support/xs-banner.png) no-repeat;
	}

	.chevron-card.second .right {
		background: url(../images/customer-support/xs-banner-2.png) no-repeat;
	}

/* MAP SECTION */

.cookies-modal-header,
.cookies-modal-footer,
.cookies-modal-content {
	border: none;
	border-radius: 0;
}

.cookies-modal-header {
	padding-bottom: 0;
}

.cookies-modal-footer {
	padding-top: 0;
}

.cookies-modal-content .banner-slant-line {
	height: 70%;
}

.cookies-modal-content .modal-dialog {
	height: 90%;
	width: 100%;
	margin-right: 0;
}

.cookies-modal-content {
	padding: 0.7em 1em 1em;
	max-width: 356px;
	max-height: 300px;
	overflow: hidden;
	position: absolute;
	right: 60px;
	bottom: 30px;
}

.cookies-modal-footer .btn {
	flex: 1;
}

/* GOOGLE MAP */

.map-section {
	min-height: 575px;
	/* background: rgba(133, 104, 104, 0.247); */
}

.map-content-wrapper {
	left: 20px;
	max-width: 380px;
	position: absolute;
	z-index: 12;
	bottom: 30px;
}

.bh-sl-container .bh-sl-loc-list {
	-webkit-box-shadow: 0 0px 6px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0px 6px rgba(0, 0, 0, 0.3);
	-webkit-box-shadow: 0px;
	box-shadow: 0px;
	height: 64%;
	height: 300px;
	width: 100%;
	margin-top: 1rem;
}

.bh-sl-container .bh-sl-map {
	width: 100%;
}

.info-pop-details {
	font-family: "EffraCorp-Regular";
}

/* PRESS RELEASE */

.press_list {
	margin-bottom: 3em;
}

.press_box {
	list-style: none;
	padding: 1rem 3rem;
	margin: 0;
	position: relative;
	padding-top: 3em;
	min-height: 200px;
	background: #f9f9f9;
	transition: background 0.5s;
}

	.press_box:hover {
		background-size: 125px;
		background: url(../images/svgIcons/pdf-fade.svg) white;
		/* opacity: ; */
		background-repeat: no-repeat;
		background-position: bottom left;
		box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.1);
	}

.main.press_box {
	background: white;
}

.press_box:hover .floated_shape,
.press_box.main .floated_shape {
	opacity: 1;
}

.floated_shape {
	clip-path: polygon(50% 0%, 100% 0, 100% 100%, 20% 100%, 0 0);
	transition: all 0.3s;
	height: 50px;
	width: 130px;
	background-color: var(--orange-color);
	color: white;
	opacity: 0.2;
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 1rem;
}

.paginate_current {
	background: #ffffff;
	border: 2px solid #cccccc;
	height: 50px;
	width: 50px;
}

.paginate_buttons .btn {
	height: 50px;
	width: 50px;
}

.newsletter-gray {
	background: #777777 !important;
}
/* newsletter */

.form_wrapper {
	color: #777777;
	min-height: 240px;
	background: #f1f1f1;
	border: 1px solid #aaaaaa;
	display: flex;
	align-items: center;
	padding: 2rem;
	background: url(../images/media/sm-banner.png) no-repeat;
	background-size: contain;
	background-position: center right;
}

	.form_wrapper .form {
		display: flex;
		padding: 5px;
		height: 65px;
		box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.1);
		max-width: 72%;
	}

.input_field {
	flex: 1;
	border: none;
	height: 100%;
	background: transparent;
	outline: none;
	padding: 1rem;
}

.form .send_icon {
	transform: rotate(48deg);
}

/* speeches and presentation */

.content_list li:not(:last-child) {
	border-bottom: 1px solid #c6cdd6;
}

.pdf_icon_path {
	fill: #555555;
}

.content_list li .btn {
	display: flex;
	align-items: center;
}

	.content_list li .btn svg {
		margin-right: 5px;
	}

	.content_list li .btn:hover {
		background-color: var(--blue-color);
		color: white;
	}

.btn:hover .pdf_icon_path {
	fill: white;
}

.header_box {
	background: white;
	width: max-content;
	padding: 1rem 5rem 1rem 1rem;
	clip-path: polygon(0 0, 80% 0%, 100% 100%, 0% 100%);
}

.swiper-slide {
	height: auto;
}

.custom_container {
	display: grid;
	grid-template-columns: 1fr 2fr;
}

.access_photos {
	/*padding-left: 15%;*/
}

/* Carousel with thumbnail */

.carousel {
	position: relative;
}

.carousel-item img {
	object-fit: cover;
	width: 35%;
}

@media (max-width: 992px) {
	.opportunity-slide {
		justify-content: flex-start !important;
	}

	.carousel-item img {
		width: 25%;
	}
}

@media (max-width: 767px) {
	.carousel-item img {
		width: 35%;
	}
}

@media (max-width: 500px) {
	.carousel-item img {
		width: 50%;
	}
}

@media (max-width: 360px) {
	.carousel-item img {
		width: 70%;
	}
}

#carousel-thumbs {
	background: rgba(255, 255, 255, 0.3);
	bottom: 0;
	left: 0;
	padding: 0 40px;
	right: 0;
	position: static;
}

	#carousel-thumbs img {
		border: 5px solid transparent;
		cursor: pointer;
	}

		#carousel-thumbs img:hover {
			border-color: rgba(255, 255, 255, 0.3);
		}

	#carousel-thumbs .selected img {
		border-color: var(--orange-color);
	}

.carousel-control-prev,
.carousel-control-next {
	width: 50px;
}

@media all and (max-width: 767px) {
	.carousel-container #carousel-thumbs img {
		border-width: 3px;
	}
}

@media all and (min-width: 576px) {
	.carousel-container #carousel-thumbs {
		position: absolute;
	}
}

@media all and (max-width: 576px) {
	.carousel-container #carousel-thumbs {
		background: #ccccce;
	}
}

/* Media : Leave a comment Form */

.form_input {
	width: 100%;
	margin-bottom: 2rem;
	box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.05);
	border: none;
	padding: 1rem;
}

.related_gallery_box {
	position: relative;
	display: block;
	transition: all 0.5s;
}

	.related_gallery_box::after {
		display: block;
		content: "";
		position: absolute;
		height: 100%;
		width: 100%;
		bottom: 0;
		top: 0;
		transition: background 0.5s;
		/* background-color: red; */
	}

	.related_gallery_box .title {
		position: absolute;
		bottom: 30px;
		width: 100%;
		z-index: 2;
	}

	.related_gallery_box:hover.related_gallery_box::after {
		background: linear-gradient(0deg, #000000 0%, rgba(0, 0, 0, 0) 53.46%);
		animation: elongateY 0.4s;
	}

@keyframes elongateY {
	from {
		height: 0;
		opacity: 0.2;
	}

	to {
		height: 100%;
		opacity: 1;
	}
}

.image_multiple_carousel #myCarousel img {
	max-height: 504px;
}

/* VIDEOS */

.videos_detail img {
	width: 100%;
}

.videos_detail {
	position: absolute;
	bottom: 20px;
	width: 90%;
	background: white;
	padding: 0.5rem 1rem;
	right: 0;
	left: 0;
	margin: auto;
	font-size: 24px;
	/* line-height: 29px; */
	/* identical to box height */
	color: #444444;
	display: flex;
}

.video_count {
	font-size: 18px;
	display: grid;
	gap: 0.5rem;
	align-items: center;
	grid-template-columns: auto auto;
	border-left: 1px solid rgba(0, 0, 0, 0.2);
	padding: 5px;
	padding-left: 1rem;
}

.video_icon {
	color: var(--orange-color);
}

.modal-dialog img {
	object-fit: cover;
}

/* video modal */

.video_modal {
	position: relative;
	width: 100%;
}

	.video_modal .btn_play {
		color: white;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.video_modal .btn svg polygon {
		fill: white;
	}

	.video_modal .btn:hover svg {
		transform: scale(1.2);
	}

	.video_modal .btn svg {
		/* transform: scale(2); */
		transition: all 0.3s;
		width: 86px;
		stroke-width: 1px;
		height: 86px;
	}

.video_modal_content {
	background-color: transparent;
	border: none;
	border-radius: 0.3rem;
}

/* list */

.list_group li {
	padding: 0.3rem 0;
}

/*  */

.tip_boxes > .tip_box {
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.tip_boxes .tip_box:first {
	border-right: 1px solid rgba(0, 0, 0, 0.1);
}

.sm-box {
	display: grid;
	grid-template-rows: 2fr 1fr;
	height: 140px;
	background: #f1f1f1;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

	.sm-box > img {
		height: 100%;
		object-fit: cover;
	}

	.sm-box > div:first-child {
		box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
		background: #f1f1f1;
	}

	.sm-box > div:last-child {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0 1rem;
	}

.sm-box2 {
	display: flex;
	flex-direction: column;
	height: 140px;
	background: #f1f1f1;
	box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

	.sm-box2 > img {
		height: 65%;
		object-fit: cover;
	}

	.sm-box2 > div:first-child {
		box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
		background: #f1f1f1;
	}

	.sm-box2 > div:last-child {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0 1rem;
	}

.new_container {
	width: 80%;
	max-width: 1140px;
	margin: auto;
}

.horizontal_tabs {
	position: absolute;
	top: -40px;
	left: 0;
	border-bottom: none;
}

	.horizontal_tabs .nav-link {
		background: #fff;
		color: #000;
		margin: 0;
		border: none;
	}

		.horizontal_tabs .nav-link.active {
			background: var(--orange-color);
			color: #fff;
		}

.bordered_right_box {
	padding: 2rem;
	border-left: 5px solid var(--orange-color);
}

.form_control2 {
	background: #fff;
	border: 2px solid #000 !important;
	/* padding: 1.3em 1em; */
	height: 50px;
	font-size: 1.2em;
	color: #444444;
}

.form_control {
	background: #f4f3f3;
	border: none;
	/* padding: 1.3em 1em; */
	height: 55px;
	font-size: 1.2em;
	color: #444444;
}

	.form_control:focus {
		background-color: #f4f3f3;
	}

/* Updates 17th May, 2021 */

bg-black {
	background: var(--private-brand) !important;
}

bg-white {
	background: var(--private-brand) !important;
}

.effra-bold {
	font-family: "EffraCorp-Bold" !important;
}

.effra-medium {
	font-family: "EffraCorp-Medium" !important;
}

.effra-light {
	font-family: "EffraCorp-Light" !important;
}

.effra-italic {
	font-family: "EffraCorp-Italic" !important;
}

.effra-italic-bold {
	font-family: "EffraCorp-BoldItalic" !important;
}

.effra-italic-medium {
	font-family: "EffraCorp-MediumItalic" !important;
}

.effra-italic-light {
	font-family: "EffraCorp-LightItalic" !important;
}

.translatedY25 {
	transform: translateY(-25%);
}

/* FEATURED BOX */

.featured-boxes-new {
	color: var(--white-brand);
	z-index: 5;
	overflow: hidden;
	filter: drop-shadow(0px 10px 30px rgba(0, 0, 0, 0.1));
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0 auto;
}

#sustainable .featured-boxes-new {
	height: 280px;
	transform: translateY(-40px) !important;
}

#sustainable .underline {
	text-decoration: underline;
}

#sustainable .acc-btn {
	cursor: pointer;
}

.featured-boxes-container-new {
	background: var(--personal-brand);
	clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
	width: 100%;
	max-width: revert;
}

.featured-boxes-container-others {
	background: var(--personal-brand);
	clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
	width: 100%;
	max-width: revert;
}

#business .featured-boxes-container-new,
#personal .featured-boxes-container-new,
.white-theme {
	background: radial-gradient( 97.57% 210.75% at 0.9% 2.98%, #ffffff 0%, rgb(255 255 255 / 90%) 100% );
	backdrop-filter: blur(100px);
	clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
}

#business .featured-boxes-container-others,
#personal .featured-boxes-container-others,
.white-theme {
	background: radial-gradient( 97.57% 210.75% at 0.9% 2.98%, #ffffff 0%, rgb(255 255 255 / 90%) 100% );
	backdrop-filter: blur(100px);
	clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
}

@media (max-width: 600px) {
	#business .featured-boxes-container-new,
	#personal .featured-boxes-container-new {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
}

@media (max-width: 600px) {
	#business .featured-boxes-container-others,
	#personal .featured-boxes-container-others {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
}

#sustainable .featured-boxes-container-new {
	background: var(--business-brand);
	color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	height: 100%;
}

#sustainable .featured-boxes-container-others {
	background: var(--business-brand);
	color: #fff;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	height: 100%;
}

#sustainable .swiper-slide {
	height: 100%;
}

.swiper_indicator {
	display: none;
}

.lg_padding_top {
	padding-top: 5rem;
}

.share-block {
	font-size: 0.8rem;
}

.share-left {
	background-color: #cccccc;
	color: #444444;
	padding: 0.5rem;
	font-weight: 600;
}

.share-figures {
	padding: 0.5rem;
	gap: 0.5rem;
	background-color: #fff;
	color: var(--business-brand);
}

@media (max-width: 700px) {
	.share-block {
		display: none !important;
	}

	.featured-boxes-container-new {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}

	.featured-boxes-container-others {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}

	a.featured-box-new {
		padding: 2rem 2rem !important;
	}

	.md_padding_top {
		padding-top: 3rem;
	}

	.lg_padding_top {
		padding-top: 5rem;
	}

	.lg_margin_top {
		margin-top: 5rem;
	}

	.special.featured-boxes-new {
		display: block;
	}

	.special.featured-boxes-new {
		transform: translateY(0%); 
		z-index: 1000;
		/* clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%); */
		width: 90%;
		margin-right: auto;
		margin-left: auto;
		left: 0;
		right: 0;
		margin-bottom: 1rem;
	}

	.container.featured-boxes-container-new {
		padding-right: 0;
		padding-left: 0;
	}

	.container.featured-boxes-container-others {
		padding-right: 0;
		padding-left: 0;
	}

	.swiper-slide-active {
		width: 100%;
	}

		.swiper-slide-active .featured-box-new {
			box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.05);
		}

			.swiper-slide-active .featured-box-new::after {
				width: 100%;
				animation: elongate 0.3s linear;
			}

	.swiper_indicator {
		display: block;
	}

		.swiper_indicator .swiper-pagination-bullets {
			position: relative;
			bottom: 20px;
			left: 0;
			width: 100%;
		}

	.ways_to_bank.swiper-pagination-bullets {
		bottom: -3px;
	}

	.translatedY120 {
		/* transform: translateY(70px); */
		bottom: -70px !important;
	}

	.swiper_indicator .swiper-pagination-bullets .swiper-pagination-bullet {
		border-radius: 0;
		height: 2px;
		width: 41px;
		margin: 0 4px;
		background-color: #222;
		transition: 0.2s ease-in;
	}

	.swiper_indicator .swiper-pagination-bullet-active {
		height: 4px !important;
		background-color: var(--personal-brand) !important;
		transition: 0.2s ease-in;
	}

	#business .swiper_indicator .swiper-pagination-bullet-active {
		background-color: var(--business-brand) !important;
	}

	#base .swiper_indicator .swiper-pagination-bullet-active {
		background-color: var(--base-brand) !important;
	}

	.blue-theme .swiper_indicator .swiper-pagination-bullet-active {
		background-color: var(--business-brand) !important;
	}

	.orange-theme .swiper_indicator .swiper-pagination-bullet-active {
		background-color: #222;
	}
}

@media (min-width: 700px) and (max-width: 1000px) {
	.featured-box-new {
		line-height: 1.2;
		font-size: small;
	}

		.featured-box-new img {
			width: 35px;
		}
}

@media (max-width: 320px) {
	.featured-boxes-new {
		transform: translateY(-15px);
	}
}

a.featured-box-new {
	text-decoration: none;
	color: var(--white-brand);
	border-left: 1px solid var(--white-brand);
	display: flex;
	align-items: center;
	padding: 1rem 2rem;
	transition: border-bottom, box-shadow 0.2s;
	position: relative;
	height: 100%;
	max-height: 170px;
	flex-direction: column;
	align-items: flex-start;
	/* max-width: 411px; */
}

#sustainable a.featured-box-new {
	height: 290px;
	max-height: 290px;
	color: var(--white-brand) !important;
	border-left: 1px solid var(--white-brand) !important;
	justify-content: space-between;
	padding: 2rem;
}

#business a.featured-box-new,
#personal a.featured-box-new {
	border-left: 1px solid var(--private-brand);
}

@media (max-width: 1200px) {
	a.featured-box-new {
		padding: 1rem 2rem;
	}
}

.featured-box-new::after {
	content: "";
	height: 5px;
	background: var(--white-brand);
	position: absolute;
	bottom: 0;
	left: 0;
}

.featured-box-new::after {
	background: var(--white-brand);
}

#business .featured-box-new::after {
	background: var(--business-brand);
}

#personal .featured-box-new::after {
	background: var(--personal-brand);
}

.blue-theme .featured-box-new::after {
	background: var(--business-brand);
}

.orange-theme .featured-box-new::after {
	background: #eb7824;
}

.white-theme .featured-box-new::after {
	background: #eb7824;
	width: 0;
}

.featured-box-new:hover,
.featured-box-new:focus {
	box-shadow: 0px 20px 30px rgba(0, 0, 0, 0.05);
}

	.featured-box-new:hover.featured-box-new::after,
	.featured-box-new:focus.featured-box-new::after {
		width: 100%;
		animation: elongate 0.3s ease-out;
	}

@keyframes elongate {
	0% {
		width: 0;
		opacity: 0.5;
	}

	100% {
		width: 100%;
		opacity: 1;
	}
}

.featured-box-new .icon {
	margin-right: 1rem;
}

.featured-title-new {
	font-weight: 600;
	font-size: 1.2em;
	line-height: 1.5;
	color: var(--private-brand);
}

.featured-text-new {
	color: var(--private-brand);
	font-size: 1rem;
}

#sustainable .featured-box-new .icon {
	color: #fff;
}

#sustainable .featured-title-new {
	color: var(--white-brand);
}

#sustainable .featured-text-new {
	color: var(--white-brand);
	display: -webkit-box;
	-webkit-line-clamp: 4; /* number of lines to show */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.width-90 {
	width: 90%;
	margin: 0 auto;
	gap: 1rem;
	display: flex;
	flex-direction: column;
}

.access-more-main {
	margin-top: 0rem;
	padding: 1rem;
	padding-top: 3rem;
	padding-bottom: 14rem;
	background-color: #eeeeee;
	clip-path: polygon(0 0%, 100% 0, 100% 70%, 0% 100%);
}

.access-more-container {
	height: 200px;
	margin: 2.5rem auto 10rem auto;
	overflow: hidden;
	position: relative;
}

.access-more-text {
	z-index: 3;
	text-align: center;
	font-size: 0.85rem;
	max-width: 70%;
}

.access-more-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.8rem;
	height: 100%;
}

.access-more-icon {
	z-index: 3;
	transition: 0.1s ease-in;
}

	.access-more-icon.smaller-icon {
		display: none;
	}

@media (max-width: 600px) {
	.access-more-icon.larger-icon {
		display: none;
	}

	.access-more-icon.smaller-icon {
		display: block;
	}
}

@keyframes circle-in-center {
	from {
		clip-path: circle(125%);
	}

	to {
		clip-path: circle(0%);
	}
}

.access-more-img {
	z-index: 1;
	clip-path: circle(0%);
	height: 100%;
	position: absolute;
	filter: brightness(0.6);
	animation: 0.4s cubic-bezier(0.25, 1, 0.3, 1) circle-in-center both;
}

@keyframes circle-out-center {
	from {
		clip-path: circle(0%);
	}

	to {
		clip-path: circle(125%);
	}
}

.access-more-box:hover .access-more-img {
	animation: 1s cubic-bezier(0.25, 1, 0.3, 1) circle-out-center both;
	display: block;
}

.access-more-box:hover svg.access-more-icon .path-1,
.access-more-box:focus svg.access-more-icon .path-1 {
	fill: #ffffff;
	transition: 0.2s ease-in;
}

.access-more-box:hover > .access-more-text,
.access-more-box:focus > .access-more-text {
	color: #ffffff;
	transition: 0.2s ease-in;
}

.access-more-box:hover > svg.access-more-icon,
.access-more-box:focus > svg.access-more-icon {
	transform: scale(1.2);
	transition: 0.1s ease-in;
}

.more-about-banking-swiper-btn-prev {
	position: absolute;
	cursor: pointer;
	z-index: 5;
	left: 2.3rem;
	top: 50%;
	border-radius: 5rem;
	width: 40px;
	height: 40px;
}

.more-about-banking-swiper-btn-next {
	position: absolute;
	cursor: pointer;
	z-index: 5;
	right: 2.3rem;
	top: 50%;
	border-radius: 5rem;
	width: 40px;
	height: 40px;
}

.access-money-swiper-button-prev {
	position: absolute;
	top: 175px;
	left: -173px;
	width: 40px !important;
	height: 40px !important;
	cursor: pointer;
	z-index: 5;
}

.access-money-swiper-button-next {
	position: absolute;
	top: 175px;
	right: -172px;
	width: 40px !important;
	height: 40px !important;
	cursor: pointer;
	z-index: 5;
}

.access-more-swiper-button-prev {
	position: absolute;
	cursor: pointer;
	z-index: 5;
	left: -2rem;
	top: 65%;
	border-radius: 5rem;
	width: 40px;
	height: 40px;
}

.access-more-swiper-button-next {
	position: absolute;
	cursor: pointer;
	z-index: 5;
	right: -2rem;
	top: 65%;
	border-radius: 5rem;
	width: 40px;
	height: 40px;
}

.access-top {
	font-size: 1rem;
}

.access-top-title {
	font-size: 2rem;
	gap: 0.4rem;
	display: inline;
	line-height: 1.9rem;
	margin-bottom: 0.7rem;
	text-align: center;
}

@media (max-width: 700px) {
	.access-top {
		font-size: 0.8rem;
	}

	.access-top-title {
		font-size: 1.5rem;
		gap: 0.5rem;
		flex-wrap: wrap;
	}

	.access-more-swiper-button-prev {
		left: 0rem;
	}

	.access-more-swiper-button-next {
		right: 0rem;
	}
}

@media (max-width: 350px) {
	.access-top-title {
		gap: 0rem;
	}
}

.access-top-subtitle {
	width: 96%;
	max-width: 700px;
	text-align: center;
	margin: 0 auto;
}

.payday-calc {
	width: 100%;
	margin: -25rem auto 0rem;
}

.payday-calc-container {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
	height: 400px;
	position: relative;
}

.payday-calc-float {
	clip-path: polygon(20% 0%, 100% 0, 100% 100%, 0% 100%);
	background-color: var(--white-brand);
	padding: 2rem 2rem 2rem 5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.7rem;
	position: relative;
	height: 100%;
	width: 100%;
	margin-right: 0;
}

@media (max-width: 1200px) {
	.payday-calc-float-parent {
		width: 45%;
	}
}

.payday-calc-float-parent {
	height: 85%;
	filter: drop-shadow(0px 50px 50px rgba(0, 0, 0, 0.15));
	z-index: 2;
	position: absolute;
	top: 50%;
	right: 0%;
	transform: translateY(-50%);
}

.payday-calc-float-top {
	width: 50%;
	text-align: center;
	font-size: 1rem;
}

.payday-calc-float-amount {
	color: var(--base-brand);
	font-size: 2.5rem;
}

.payday-calc-float-text {
	width: 80%;
	display: inline;
	justify-content: flex-start;
	align-items: center;
	text-align: center;
	font-size: 1rem;
}

	.payday-calc-float-text > div {
		display: inline;
	}

.payday-calc-box {
	background-color: var(--base-brand);
	height: 100%;
	width: 75%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 0rem;
}

.payday-calc-box-1 {
	width: 40%;
	padding: 2rem 0rem 2rem 2rem;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	gap: 1rem;
	font-size: 1rem;
	border-right: 1px solid var(--white-brand);
}

.payday-calc-box-2 {
	height: 100%;
	padding: 3rem;
	width: fit-content;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	gap: 1.5rem;
}

	.payday-calc-box-2 > p {
		font-size: 1rem;
	}

.payday-calc-title {
	font-size: 2rem;
}

.payday-calc-box-text {
	width: 80%;
	font-size: 1rem;
}

.payday-calc-terms {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	background-color: #c76b05;
	padding: 0.6rem;
}

.loan-drag-calc {
	position: relative;
	width: 100%;
	aspect-ratio: 1;
	max-width: 15rem;
}

.loan-amount {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate3d(-50%, -50%, 0);
	font-size: 1.6rem;
	z-index: 5;
}

.loan-drag-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	background-color: #f7bf80;
	border-radius: 50%;
	padding-bottom: 25%;
	transform: translate3d(-50%, -50%, 0);
}

	.loan-drag-circle:before {
		content: "";
		position: absolute;
		top: 5%;
		left: 5%;
		width: 90%;
		height: 90%;
		background-color: var(--base-brand);
		border-radius: 50%;
	}

	.loan-drag-circle .loan-drag-dot {
		position: absolute;
		top: 0;
		left: 47.5%;
		width: 4%;
		height: 50%;
		transform: rotate(0deg);
		transform-origin: center bottom;
	}

		.loan-drag-circle .loan-drag-dot:before {
			content: "";
			position: absolute;
			background-color: var(--white-brand);
			border: 5px solid var(--base-brand);
			border-radius: 50%;
			width: 520%;
			height: 0;
			aspect-ratio: 1;
			transform: translate3d(-25%, -35%, 0);
			padding-bottom: 400%;
			cursor: pointer;
		}

@media (max-width: 1000px) {
	.payday-calc {
		margin: -60rem auto 0rem;
	}

	.access-more-main {
		padding-bottom: 50rem;
		clip-path: polygon(0 0%, 100% 0, 100% 80%, 0% 100%);
	}

	.payday-calc {
		margin-bottom: 15rem;
	}

	.payday-calc-float-parent {
		right: 50%;
		bottom: 0%;
		transform: translate(50%, 35%);
		width: 90%;
	}

	.payday-calc-float {
		clip-path: polygon(0 0, 100% 20%, 100% 100%, 0% 100%);
		padding: 5rem 2rem 5rem 2rem;
		height: auto;
	}

	.payday-calc-container {
		flex-direction: column;
		height: auto;
	}

	.payday-calc-box {
		width: 100%;
		flex-direction: column;
	}

	.payday-calc-box-text,
	.payday-calc-title {
		width: 100%;
		text-align: center;
	}

	.payday-calc-box-1 {
		width: 100%;
		border-right: 0;
		border-bottom: 1px solid var(--white-brand);
		padding: 2rem;
	}

	.payday-calc-box-2 {
		width: 100%;
		padding: 2rem 2rem 10rem 2rem;
		justify-content: center;
		align-items: center;
	}
}

@media (max-width: 575px) {
	.payday-calc-float-parent {
		transform: translate(50%, 60%);
		height: auto;
	}

	.payday-calc {
		width: 92%;
	}

	.payday-calc-float-amount {
		font-size: 1.8rem;
	}

	.payday-calc-float-top {
		width: 70%;
	}

	.payday-calc-float-text {
		width: 100%;
	}
}

.service {
	padding: 0rem 1rem;
}

.service-container {
	margin: 2rem auto;
	position: relative;
	overflow: hidden;
}

.service-box {
	width: 98%;
	max-width: 400px;
	height: 350px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding: 1rem;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #000;
}

.more-1 {
	background-image: url("../images/home/t-bills.png");
}

.more-2 {
	background-image: url("../images/home/901-banking.png");
}

.more-3 {
	background-image: url("../images/home/early-savers.png");
}

.service-img {
	width: 45px;
	transform: translateY(50px);
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.service-title {
	font-size: 1.2rem;
	transform: translateY(50px);
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.service-text {
	font-size: 1rem;
	transform: translateY(50px);
	opacity: 0;
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.service-title-2 {
	font-size: 1.2rem;
	transform: translateY(30px);
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.service-text-2 {
	font-size: 1rem;
	transform: translateY(30px);
	opacity: 1;
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.service-box .btn {
	transform: translateY(50px);
	opacity: 0;
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.service-box:hover .service-img {
	transform: translateY(0px);
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.service-box:hover .service-title {
	transform: translateY(0px);
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.service-box:hover .service-text {
	transform: translateY(0px);
	opacity: 1;
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.service-box:hover .service-title-2 {
	transform: translateY(0px);
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.service-box:hover .service-text-2 {
	transform: translateY(0px);
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.service-box:hover .btn {
	transform: translateY(0px);
	opacity: 1;
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.service-glass {
	width: 100%;
	background: radial-gradient( 97.57% 210.75% at 0.9% 2.98%, #ffffff 0%, rgba(255, 255, 255, 0.6) 100% );
	backdrop-filter: blur(20px);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 0.5rem;
	height: 132px;
	overflow: hidden;
	transition: 0.4s cubic-bezier(0.25, 1, 0.3, 1);
	will-change: contents;
}

.service-glass-2 {
	width: 100%;
	background: radial-gradient( 97.57% 210.75% at 0.9% 2.98%, #ffffff 0%, rgba(255, 255, 255, 0.6) 100% );
	backdrop-filter: blur(20px);
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 0.5rem;
	height: 160px;
	overflow: hidden;
	transition: 0.4s cubic-bezier(0.25, 1, 0.3, 1);
	will-change: contents;
}

.service-box:hover .service-glass {
	height: 240px;
	transition: 0.4s cubic-bezier(0.25, 1, 0.3, 1);
}

.service-box:hover .service-glass-2 {
	height: 245px;
	transition: 0.4s cubic-bezier(0.25, 1, 0.3, 1);
}

.service-swiper-button-prev {
	position: absolute;
	cursor: pointer;
	z-index: 5;
	left: -2rem;
	top: 60%;
	border-radius: 5rem;
	width: 40px;
	height: 40px;
	transform: translateY(-50%);
}

.service-swiper-button-next {
	position: absolute;
	cursor: pointer;
	z-index: 5;
	right: -2rem;
	top: 60%;
	border-radius: 5rem;
	width: 40px;
	height: 40px;
	transform: translateY(-50%);
}

.service_swiper_indicator {
	height: 5px;
}

.service-swiper-pagination {
	height: 5px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 0.1rem;
}

.service_swiper_indicator .swiper-pagination-bullets .swiper-pagination-bullet {
	border-radius: 0;
	height: 2px;
	width: 41px;
	margin: 0 4px;
	background-color: #222;
	transition: 0.2s ease-in;
}

.service_swiper_indicator .swiper-pagination-bullet-active {
	height: 4px !important;
	background-color: var(--secondary-1-brand) !important;
	transition: 0.2s ease-in;
}

#personal .service_swiper_indicator .swiper-pagination-bullet-active {
	background-color: var(--private-brand) !important;
}

#business .service_swiper_indicator .swiper-pagination-bullet-active {
	background-color: var(--private-brand) !important;
}

@media (max-width: 700px) {
	.service-swiper-button-prev {
		left: 0rem;
	}

	.service-swiper-button-next {
		right: 0rem;
	}

	.service-box {
		max-width: 280px;
	}
}

@media (max-width: 800px) {
	.service-box {
		max-width: 280px;
	}
}

@media (max-width: 400px) {
	.service-title {
		font-size: 1rem;
	}

	.service-text {
		font-size: 0.8rem;
	}

	.service-glass {
		height: 135px;
	}

	.service-box:hover .btn {
		transform: scale(0.8);
		transform-origin: left;
	}
}

.access-promotion {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 400px;
	position: relative;
	max-width: 1440px;
	margin: 0 auto;
	overflow: hidden;
}

.access-promotion-img {
	width: 60%;
	height: 100%;
	z-index: 1;
	position: absolute;
	top: 0;
	right: 0;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-image: url("../images/home/hyundai.png");
}

.access-promotion-block {
	background-color: var(--base-brand);
	padding: 2rem 2rem 2rem 10vw;
	clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
	height: 100%;
	width: 45%;
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	align-self: flex-end;
	gap: 0.1rem;
}

	.access-promotion-block::before {
		content: "";
		position: absolute;
		width: 98%;
		height: 100%;
		clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
		background: var(--personal-brand);
		top: 0;
		left: 0px;
		z-index: -1;
	}

	.access-promotion-block h4 {
		font-size: 1.6rem;
		line-height: 2rem;
	}

	.access-promotion-block h2 {
		font-size: 3rem;
		line-height: 2.5rem;
	}

	.access-promotion-block p {
		width: 90%;
		font-size: 1.1rem;
		max-width: 30rem;
	}

	.access-promotion-block .btn {
		margin: 1.5rem 0;
	}

@media (max-width: 767px) {
	.access-promotion-block::before {
		display: none;
	}

	.access-promotion {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		height: auto;
		width: 90%;
	}

	.access-promotion-block p {
		font-size: 1rem;
	}

	.access-promotion-block {
		position: relative;
		width: 100%;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
		padding: 1.7rem 2rem 1rem 2rem;
		background: var(--personal-brand);
		border-bottom: 10px solid var(--base-brand);
	}

	.access-promotion-img {
		position: relative;
		width: 100%;
		aspect-ratio: 2 / 1;
	}
}

.solutions-section {
	padding: 0rem 1rem;
	margin-top: 2rem;
}

.solutions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	grid-template-rows: auto;
	grid-gap: 2rem;
	padding-top: 1.5rem;
	/* margin-bottom: 2rem; */
}

.solutions-card {
	width: 100%;
	max-width: 370px;
	position: relative;
	height: 30rem;
	margin: 0 auto;
}

.solutions-section .solutions-card:nth-child(3) {
	/*width: 100%;*/
}

.solutions-img {
	width: 100%;
	z-index: 1;
}

.solutions-button {
	margin-top: auto;
}

.solutions-body {
	z-index: 3;
	background-color: var(--business-brand);
	clip-path: polygon(0 0, 100% 0, 97% 100%, 0 100%);
	padding: 1.5rem;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	font-size: 1rem;
	gap: 0.7rem;
	min-height: 14rem;
	width: 95%;
	margin-left: 0;
	position: absolute;
	left: 0;
	bottom: 5%;
	filter: drop-shadow(0px 50px 50px rgba(0, 0, 0, 0.1));
}

.solutions-body-head {
	/*font-size: 1.5rem;*/
	font-size: 1.313rem;
}

.solutions-body-text {
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (max-width: 350px) {
	.solutions-card {
		width: 100%;
		height: 22rem;
		margin: 0 auto;
	}

	.solutions-body {
		bottom: 5%;
		font-size: 0.8rem;
		height: 12rem;
		min-height: auto;
	}

	.solutions-body-head {
		font-size: 1rem;
	}

	.solutions-body-text {
		display: -webkit-box;
		-webkit-line-clamp: 2; /* number of lines to show */
		-webkit-box-orient: vertical;
	}

	.solutions-button a {
		font-size: 0.7rem !important;
	}
}

.solutions-body::after {
	content: "";
	position: absolute;
	width: 12px;
	height: 100%;
	transform: rotate(2.5deg);
	background: var(--base-brand);
	bottom: 0%;
	right: 0;
	z-index: 1;
}

.head-text {
	width: 100%;
	max-width: 25rem;
	font-size: 1.2rem;
}

/*.about-bg {
	background-image: url("../images/about-images/Access-Africa-inBanner.png");
}*/

/*.about-bg-2 {
	background-image: url("../images/about-images/Perception-Management.png");
}*/

.block-quote {
	padding: 0 1rem;
	border-left: 8px solid var(--base-brand);
	font-size: 1.3rem !important;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	line-height: 1.3rem;
	gap: 0.5rem;
}

.block-quote2 {
	padding: 0 1rem;
	border-left: 8px solid var(--base-brand);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 0.5rem;
}

.quote-marks {
	width: 1.5rem;
}

.title-block {
	height: 400px;
	position: relative;
}

.explore-container {
	height: 320px;
	position: absolute;
	width: 100%;
	overflow: hidden;
}

.explore_top_indicators {
	height: 10px;
	width: 10rem;
}

@media (max-width: 500px) {
	.explore_top_indicators {
		position: absolute;
	}
}

.explore-swiper-pagination {
	height: 5px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 0.1rem;
}

.explore_top_indicators .swiper-pagination-bullets .swiper-pagination-bullet {
	border-radius: 0;
	height: 2px;
	width: 41px;
	margin: 0 4px;
	background-color: var(--white-brand);
	transition: 0.2s ease-in;
}

.explore_top_indicators .swiper-pagination-bullet-active {
	height: 4px !important;
	background-color: var(--white-brand) !important;
	transition: 0.2s ease-in;
}

.career-cards-deck {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	grid-gap: 1.5rem;
}

	.career-cards-deck .career-1 {
		transform: translateY(15px);
	}

	.career-cards-deck .career-3 {
		transform: translateY(15px);
		box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.15);
	}

	.career-cards-deck .career-4 {
		box-shadow: 0px 30px 50px rgba(0, 0, 0, 0.15);
	}

.career-slider-1 {
	background-image: url("../images/careers/career-slider-1.png");
}

.career-slider-2 {
	background-image: url("../images/careers/career-slider-2.png");
}

.career-slider-3 {
	background-image: url("../images/careers/career-slider-3.png");
}

.career-1 {
	background-image: url("../images/careers/staff-creche.png");
}

.career-2 {
	background-image: url("../images/careers/sports-bar.png");
}

.career-3 {
	background-image: url("../images/careers/gym.png");
}

.career-4 {
	background-image: url("../images/careers/lunchroom.png");
}

@media (max-width: 992px) {
	.career-cards-deck .career-1 {
		transform: translateY(0px);
	}

	.career-cards-deck .career-3 {
		transform: translateY(0px);
	}
}

.career-gallery-slide-1 {
	background-image: url("../images/careers/mid-sect-banner-2.png");
}

.career-gallery-slide-2 {
	background-image: url("../images/careers/mid-sect-banner.png");
}

.media-slider-1 {
	background-image: url("../images/media/Guest-at-the-Everard-Read-Gallery-Booth-with-Work-by-Nelson-Makamo_ART-X-Lagos-2019.png");
}

.media-slider-2 {
	background-image: url("../images/careers/career-slider-1.png");
}

.media-slider-3 {
	background-image: url("../images/careers/career-slider-2.png");
}

#private .dropdown-menu .menu {
	background: #1a1a1a;
	color: #fff;
}

.exclusive-photo {
	clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}

@media (max-width: 600px) {
	.exclusive-photo {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
}

.terrain-bg {
	background-image: url("../images/private-banking/terrain-pattern.svg");
	background-position: top center;
	background-size: cover;
	background-color: #1a1a1a;
}

.reduce-width {
	margin: 0 auto;
	width: 55%;
}

@media (max-width: 767px) {
	.reduce-width {
		width: 95%;
	}
}

.service-card .text {
	display: -webkit-box;
	-webkit-line-clamp: 3; /* number of lines to show */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.about-cards .heading {
	font-size: 1.8rem;
	width: 100%;
	max-width: 210px;
}

.about-cards .text {
	font-size: 20px !important;
}

.internet-banking-bottom-bg {
	background-color: #fdf1e9;
}

#private .internet-banking-bottom-bg {
	background-color: #1a1a1a;
}

.private-slider-1 {
	background-image: url("../images/private-banking/private-slide-1.png");
}

.access-black-cards {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	margin-top: 7rem;
}

	.access-black-cards .content {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 1rem;
		width: 50%;
	}

	.access-black-cards .heading {
		font-size: 1.8rem;
		margin-bottom: 0rem !important;
	}

	.access-black-cards .img-wrapper {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		width: 50%;
	}

@media (max-width: 767px) {
	.access-black-cards {
		flex-direction: column;
		margin-top: 5rem;
	}

		.access-black-cards .content {
			justify-content: center;
			align-items: flex-start;
			gap: 1rem;
			width: 100%;
		}

		.access-black-cards .img-wrapper {
			display: flex;
			justify-content: center;
			align-items: flex-start;
			width: 100%;
		}
}

.helpful-tools-container {
	height: 200px;
	overflow: hidden;
	position: relative;
}

.helpful-tools-text {
	z-index: 3;
	text-align: center;
	font-size: 0.85rem;
}

.helpful-tools-box {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.8rem;
	height: 100%;
}

.helpful-tools-icon {
	z-index: 3;
	transition: 0.1s ease-in;
}

@keyframes circle-in-center {
	from {
		clip-path: circle(125%);
	}

	to {
		clip-path: circle(0%);
	}
}

.helpful-tools-img {
	z-index: 1;
	clip-path: circle(0%);
	height: 100%;
	position: absolute;
	filter: brightness(0.6);
	animation: 0.4s cubic-bezier(0.25, 1, 0.3, 1) circle-in-center both;
}

@keyframes circle-out-center {
	from {
		clip-path: circle(0%);
	}

	to {
		clip-path: circle(125%);
	}
}

.helpful-tools-box:hover .helpful-tools-img {
	animation: 1s cubic-bezier(0.25, 1, 0.3, 1) circle-out-center both;
	display: block;
}

.emerging-banner-1 {
	background-image: url("../images/emerging-banking/banner-1.png");
}

.emerging-banner-2 {
	background-image: url("../images/emerging-banking/banner-2.png");
}

.emerging-banner-3 {
	background-image: url("../images/emerging-banking/banner-3.png");
}

.help-section {
	background-color: var(--business-brand);
	color: rgba(68, 68, 68, 1);
	padding-top: 4rem;
}

	.help-section .gap {
		gap: 2rem;
	}

.help-center-phone {
	position: absolute;
	right: 13%;
	bottom: 0%;
	width: 40%;
}

@media (max-width: 500px) {
	.help-center-phone {
		display: none;
	}

	.help-section {
		padding: 2.5rem 0;
	}
}

.sme-card-img-1 {
	background-image: url(../images/emerging-banking/lg-banner-1.png);
}

.sme-card-img-2 {
	background-image: url(../images/emerging-banking/lg-banner-2.png);
}

.sme-thumbnail-swiper-button-next {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid var(--business-brand);
	color: var(--business-brand);
	transform: translateY(50%);
	margin-left: 1rem;
}

.sme-thumbnail-swiper-button-prev {
	margin-right: 1rem;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid var(--business-brand);
	color: var(--business-brand);
	transform: translateY(50%);
}

.sme-thumbnail-swiper-button-next:hover {
	background: var(--business-brand);
	color: var(--white-brand);
}

.sme-thumbnail-swiper-button-prev:hover {
	background: var(--business-brand);
	color: var(--white-brand);
}

.sme-thumbnail-swiper-container {
	height: 100%;
	width: 90%;
}

.sme-swiper-container {
	/* transform: translateY(-10px); */
	margin-top: -10px;
	width: 100%;
	overflow-x: hidden;
}

.sme-thumbnail-swiper-container .swiper-wrapper {
	height: 100%;
	width: 100%;
}

.sme-thumbnail-container {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	height: 70px;
	background: transparent;
	z-index: 2;
}

.sme-thumb {
	background: #fff;
	display: grid;
	place-items: center;
	border-left: 1px solid #444;
	border-right: 1px solid #444;
	font-size: 1rem;
	color: #000;
	padding: 1rem 1.5rem;
	height: 100%;
	min-width: 200px;
	width: 100%;
	position: relative;
	transition: 0.2s ease-in;
	cursor: pointer;
}

	.sme-thumb:hover {
		color: #fff;
		background: var(--base-brand);
		transition: 0.2s ease-in;
	}

.swiper-slide-thumb-active .sme-thumb {
	color: #fff;
	background: var(--base-brand);
	transition: 0.2s ease-in;
	border-left: 1px solid var(--base-brand);
	border-right: 1px solid var(--base-brand);
}

.sme-thumbnail-swiper-container {
	height: 100%;
	z-index: 2;
}

	.sme-thumbnail-swiper-container .swiper-slide-thumb-active {
		position: relative;
	}

	.sme-thumbnail-swiper-container .swiper-slide-visible {
		z-index: 6;
	}

	.sme-thumbnail-swiper-container .swiper-wrapper {
		height: 60px;
	}

	.sme-thumbnail-swiper-container .swiper-slide-thumb-active::after {
		content: "";
		display: block;
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid var(--base-brand);
		position: absolute;
		left: 50%;
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
		bottom: -10px;
	}

.sustainable-banner-1 {
	background-image: url("../images/sustainable-banking/sustainable-header-banner.png");
}

.sustainable-w-bg {
	background-image: url("../images/sustainable-banking/Wcomm.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.sustainable-banking-communities {
	padding: 10rem 0 0rem 0;
}

.sustainable-banking-best {
	padding: 4rem 0 10rem 0;
	height: 60rem;
}

.sustainable-initiative-top-left {
	padding: 0 4rem;
	transform: translateX(25%);
	margin: 1.5rem 0;
}

	.sustainable-initiative-top-left .heading,
	.sustainable-initiative-top-left .text {
		width: 100%;
		max-width: 320px;
	}

	.sustainable-initiative-top-left .heading,
	.sustainable-initiative-bottom-right .heading {
		font-size: 1.7rem;
	}

	.sustainable-initiative-top-left .text,
	.sustainable-initiative-bottom-right .text {
		font-size: 1rem;
	}

.sustainable-initiative-bottom-right {
	transform: translateX(0%);
	margin: 1.5rem 0;
	padding: 0 4rem;
}

	.sustainable-initiative-bottom-right .heading,
	.sustainable-initiative-bottom-right .text {
		width: 100%;
		max-width: 355px;
	}

.img-100vw {
	width: 100%;
	max-width: 100vw;
}

.sustainable-banking-padding {
	padding: 0rem !important;
}

.sustainable-banking-fit-height {
	height: fit-content;
	/* max-width: 100vw; */
}

@media (max-width: 992px) {
	.sustainable-order-2 {
		order: 2;
	}

	.sustainable-initiative-top-left {
		padding: 2rem 1rem;
		transform: translateX(0%);
		margin: 0;
	}

	.sustainable-initiative-bottom-right {
		margin: 0;
		padding: 2rem 1rem;
	}

		.sustainable-initiative-top-left .heading,
		.sustainable-initiative-bottom-right .heading {
			font-size: 1.5rem;
		}

		.sustainable-initiative-top-left .text,
		.sustainable-initiative-bottom-right .text {
			font-size: 0.8rem;
		}
}

* {
	box-sizing: border-box;
}

.strips {
	min-height: 80vh;
	text-align: center;
	overflow: hidden;
	color: white;
}

.strips__strip {
	will-change: width, left, z-index, height;
	position: absolute;
	width: 25.5%;
	min-height: 80vh;
	overflow: hidden;
	cursor: pointer;
	transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

	.strips__strip:nth-child(1) {
		left: 0;
	}

	.strips__strip:nth-child(2) {
		left: 25vw;
	}

	.strips__strip:nth-child(3) {
		left: 50vw;
	}

	.strips__strip:nth-child(4) {
		left: 75vw;
	}

	.strips__strip:nth-child(1) .strip__content {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/sustainable-banking/communtity-section-1.png");
		background-position: center;
		background-size: cover;
		transform: translate3d(-100%, 0, 0);
		-webkit-animation-name: strip1;
		animation-name: strip1;
		-webkit-animation-delay: 0.1s;
		animation-delay: 0.1s;
	}

	.strips__strip:nth-child(2) .strip__content {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/sustainable-banking/communtity-section-2.png");
		background-position: center;
		background-size: cover;
		transform: translate3d(0, 100%, 0);
		-webkit-animation-name: strip2;
		animation-name: strip2;
		-webkit-animation-delay: 0.2s;
		animation-delay: 0.2s;
	}

	.strips__strip:nth-child(3) .strip__content {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/sustainable-banking/communtity-section-3.png");
		background-position: center;
		background-size: cover;
		transform: translate3d(0, -100%, 0);
		-webkit-animation-name: strip3;
		animation-name: strip3;
		-webkit-animation-delay: 0.3s;
		animation-delay: 0.3s;
	}

	.strips__strip:nth-child(4) .strip__content {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/sustainable-banking/communtity-section-4.png");
		background-position: center;
		background-size: cover;
		transform: translate3d(0, 100%, 0);
		-webkit-animation-name: strip4;
		animation-name: strip4;
		-webkit-animation-delay: 0.4s;
		animation-delay: 0.4s;
	}

	.strips__strip:nth-child(5) .strip__content {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/sustainable-banking/communtity-section-5.png");
		background-position: center;
		background-size: cover;
		transform: translate3d(100%, 0, 0);
		-webkit-animation-name: strip5;
		animation-name: strip5;
		-webkit-animation-delay: 0.5s;
		animation-delay: 0.5s;
	}

@media screen and (max-width: 760px) {
	.strips {
		min-height: 100vh;
	}

	.strips__strip {
		min-height: 25vh;
	}

		.strips__strip:nth-child(1) {
			top: 0;
			left: 0;
			width: 100%;
		}

		.strips__strip:nth-child(2) {
			top: 25vh;
			left: 0;
			width: 100%;
		}

		.strips__strip:nth-child(3) {
			top: 50vh;
			left: 0;
			width: 100%;
		}

		.strips__strip:nth-child(4) {
			top: 75vh;
			left: 0;
			width: 100%;
		}
}

.strips .strip__content {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
	animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-decoration: none;
}

	.strips .strip__content:hover:before {
		transform: skew(-30deg) scale(3) translate(0, 0);
		opacity: 0.1;
	}

	.strips .strip__content:before {
		content: "";
		position: absolute;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: white;
		opacity: 0.05;
		transform-origin: center center;
		transform: skew(-30deg) scaleY(1) translate(0, 0);
		transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	}

.strips .strip__inner-text {
	will-change: transform, opacity;
	position: absolute;
	z-index: 5;
	top: 50%;
	left: 50%;
	width: 70%;
	max-width: 650px;
	transform: translate(-50%, -50%) scale(0.5);
	opacity: 0;
	transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.strips__strip--expanded {
	width: 100%;
	top: 0 !important;
	left: 0 !important;
	z-index: 3;
	cursor: default;
}

@media screen and (max-width: 760px) {
	.strips__strip--expanded {
		min-height: 100vh;
	}
}

.strips__strip--expanded .strip__content:hover:before {
	transform: skew(-30deg) scale(1) translate(0, 0);
	opacity: 0.05;
}

.strips__strip--expanded .strip__title {
	opacity: 0;
}

.strips__strip--expanded .strip__inner-text {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

.strip__title {
	display: block;
	margin: 0;
	position: relative;
	z-index: 2;
	width: 100%;
	font-size: 0.9rem;
	color: white;
	transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

@media screen and (max-width: 760px) {
	.strip__title {
		font-size: 15px;
	}
}

.strip__close {
	position: absolute;
	/* right: 3vw; */
	left: calc(50% - 15px);
	top: 3vw;
	opacity: 0;
	z-index: 10;
	transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
	cursor: pointer;
	transition-delay: 0.5s;
}

.strip__close--show {
	opacity: 1;
}

@-webkit-keyframes strip1 {
	0% {
		transform: translate3d(-100%, 0, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes strip1 {
	0% {
		transform: translate3d(-100%, 0, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes strip2 {
	0% {
		transform: translate3d(0, 100%, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes strip2 {
	0% {
		transform: translate3d(0, 100%, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes strip3 {
	0% {
		transform: translate3d(0, -100%, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes strip3 {
	0% {
		transform: translate3d(0, -100%, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes strip4 {
	0% {
		transform: translate3d(0, 100%, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes strip4 {
	0% {
		transform: translate3d(0, 100%, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}

@-webkit-keyframes strip5 {
	0% {
		transform: translate3d(100%, 0, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}

@keyframes strip5 {
	0% {
		transform: translate3d(100%, 0, 0);
	}

	100% {
		transform: translate3d(0, 0, 0);
	}
}

/* #cClock { */
/* width: 100%; */
/* height: ; */
/* aspect-ratio: 1; */
/* } */

/* #cClockWrap { */
/* width: 100%; */
/* height: 480px; */
/* } */

.clock-dial :focus {
	outline: none;
	font-size: 62%;
}

.clock-dial {
	padding: 2rem 0;
	color: #000;
	font-family: "Open sans", sans-serif;
	font-size: 2rem;
	font-weight: 300;
}

.dial-img-1 {
	background-image: url("../images/sustainable-banking/dial-img-1.png");
}

.dial-img-2 {
	background-image: url("../images/sustainable-banking/dial-img-2.png");
}

.dial-img-3 {
	background-image: url("../images/sustainable-banking/dial-img-3.png");
}

.dial-img-4 {
	background-image: url("../images/sustainable-banking/dial-img-4.png");
}

.dial-img-5 {
	background-image: url("../images/sustainable-banking/dial-img-5.png");
}

.dial-img-6 {
	background-image: url("../images/sustainable-banking/dial-img-6.png");
}

.dial-img-7 {
	background-image: url("../images/sustainable-banking/dial-img-7.png");
}

.dial-img-8 {
	background-image: url("../images/sustainable-banking/dial-img-8.png");
}

.cClock {
	width: 91.2rem;
	height: 91.2rem;
	margin: 0 auto;
	overflow: hidden;
	background: #1a1a1a;
	border-radius: 50%;
	position: absolute;
	left: 25%;
	transform-origin: top;
	transform: scale(0.6) translateX(-50%);
}

@media (max-width: 1200px) {
	.cClock {
		left: 20%;
		transform-origin: top;
		transform: scale(0.55) translateX(-50%);
	}

	.sustainable-banking-communities {
		padding: 4rem 0 0rem 0;
	}
}

@media (max-width: 992px) {
	.cClock {
		left: -2.5%;
		transform-origin: top;
		transform: scale(0.5) translateX(-50%);
	}
}

@media (max-width: 767px) {
	.cClock {
		left: -33.5%;
		transform-origin: top;
		transform: scale(0.4) translateX(-50%);
	}

	.sustainable-banking-best {
		height: 55rem;
	}
}

@media (max-width: 620px) {
	.cClock {
		left: -45%;
		transform-origin: top;
		transform: scale(0.34) translateX(-50%);
	}

	.sustainable-banking-best {
		height: 48rem;
	}
}

@media (max-width: 525px) {
	.cClock {
		left: -62.5%;
		transform-origin: top;
		transform: scale(0.27) translateX(-50%);
	}

	.sustainable-banking-best {
		height: 40rem;
	}
}

@media (max-width: 490px) {
	.cClock {
		left: -82.5vw;
		transform-origin: top;
		transform: scale(0.23) translateX(-50%);
	}

	.sustainable-banking-best {
		height: 37rem;
	}
}

@media (max-width: 420px) {
	.cClock {
		left: -100vw;
		transform-origin: top;
		transform: scale(0.2) translateX(-50%);
	}

	.sustainable-banking-best {
		height: 34rem;
	}
}

@media (max-width: 380px) {
	.cClock {
		left: -120vw;
		transform-origin: top;
		transform: scale(0.2) translateX(-50%);
	}

	.sustainable-banking-best {
		height: 34rem;
	}
}

@media (max-width: 340px) {
	.cClock {
		left: -150.5%;
		transform-origin: top;
		transform: scale(0.2) translateX(-50%);
	}

	.sustainable-banking-best {
		height: 34rem;
	}
}

@media (max-width: 318px) {
	.cClock {
		left: -160.5%;
		transform-origin: top;
		transform: scale(0.17) translateX(-50%);
	}

	.sustainable-banking-best {
		height: 34rem;
	}
}

@media (max-width: 310px) {
	.cClock {
		left: -160.5vw;
		transform-origin: top;
		transform: scale(0.17) translateX(-50%);
	}

	.sustainable-banking-best {
		height: 34rem;
	}
}

.cClock__txt {
	display: inline-block;
	vertical-align: middle;
	white-space: normal;
}

	.cClock__txt .heading {
		font-size: 3rem;
	}

	.cClock__txt .text {
		font-size: 1.8rem;
		font-weight: 300;
	}

	.cClock__txt .button-container {
		transform: scale(1.6);
		margin-top: 1rem;
	}

.cClock__item {
	width: 55.2rem;
	height: 55.2rem;
	padding: 7rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	background: #fff;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	text-align: center;
	white-space: nowrap;
	display: flex;
	justify-content: center;
	align-items: center;
}

	.cClock__item:after {
		content: "";
		display: inline-block;
		width: 1px;
		height: 100%;
		margin-left: -1px;
		vertical-align: middle;
	}

	.cClock__item.is-active {
		opacity: 1;
		visibility: visible;
	}

.cClock__item--spinner {
	opacity: 1;
	visibility: visible;
	background: transparent;
	overflow: visible;
	transition: transform 0.8s;
	pointer-events: none;
}

	.cClock__item--spinner:after {
		content: "";
		display: block;
		border: 70px solid transparent;
		border-bottom: 160px solid #fff;
		position: absolute;
		bottom: 100%;
		left: 50%;
		margin: 0 0 -20px -70px;
	}

.cClock__img {
	display: block;
	width: 120%;
	height: 110%;
	position: absolute;
	top: 0;
	left: 0;
	transform: skew(-38.58deg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	cursor: pointer;
}

	.cClock__img:before {
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background: #1a1a1a;
		opacity: 0.75;
	}

	.cClock__img:hover:before,
	.is-active .cClock__img:before {
		opacity: 0;
	}

.cClock__btn {
	position: absolute;
	width: 45.6rem;
	height: 45.6rem;
	padding: 0;
	transform-origin: 100% 100%;
	overflow: hidden;
	left: 0;
	top: 0;
	border: none;
}

	.cClock__btn:nth-child(1) {
		transform: rotate(90deg) skew(38.58deg);
	}

		.cClock__btn:nth-child(1) .cClock__img {
			transform: skew(-38.58deg) rotate(270deg);
		}

	.cClock__btn:nth-child(2) {
		transform: rotate(141.42deg) skew(38.58deg);
	}

		.cClock__btn:nth-child(2) .cClock__img {
			transform: skew(-38.58deg) rotate(218.58deg);
		}

	.cClock__btn:nth-child(3) {
		transform: rotate(192.84deg) skew(38.58deg);
	}

		.cClock__btn:nth-child(3) .cClock__img {
			transform: skew(-38.58deg) rotate(167.16deg);
		}

	.cClock__btn:nth-child(4) {
		transform: rotate(244.26deg) skew(38.58deg);
	}

		.cClock__btn:nth-child(4) .cClock__img {
			transform: skew(-38.58deg) rotate(115.74deg);
		}

	.cClock__btn:nth-child(5) {
		transform: rotate(295.68deg) skew(38.58deg);
	}

		.cClock__btn:nth-child(5) .cClock__img {
			transform: skew(-38.58deg) rotate(64.32deg);
		}

	.cClock__btn:nth-child(6) {
		transform: rotate(347.1deg) skew(38.58deg);
	}

		.cClock__btn:nth-child(6) .cClock__img {
			transform: skew(-38.58deg) rotate(12.9deg);
		}

	.cClock__btn:nth-child(7) {
		transform: rotate(38.58deg) skew(38.58deg);
	}

		.cClock__btn:nth-child(7) .cClock__img {
			transform: skew(-38.58deg) rotate(321.42deg);
		}

@-webkit-keyframes spin {
	0% {
		transform: rotate(10deg);
	}

	50% {
		transform: rotate(-10deg);
	}

	100% {
		transform: rotate(10deg);
	}
}

@keyframes spin {
	0% {
		transform: rotate(10deg);
	}

	50% {
		transform: rotate(-10deg);
	}

	100% {
		transform: rotate(10deg);
	}
}

.management-label {
	font-size: 1.5rem;
	border-bottom: 1px solid var(--base-brand);
	color: #444444;
}

.management-tab {
	padding-top: 0.5rem !important;
}

.corporate-bg {
	background-image: url("../images/about-images/corporate-bg2.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.corporate-profile-page-box {
	background-image: url("../images/corporate-profile-page-box.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.business-page-box {
	background-image: url("../images/business-images/business-page-box.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.history-page-box {
	background-image: url("../images/history-page-box.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.corp-gov-box-bg {
	background-image: url("../images/corp-gov-box-bg.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.corporate-phil-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/about-images/corporate-bg.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.corporate-profile-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/about-images/corporate-profile-bg.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.our-history-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/about-images/our-history-bg.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.our-business-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/about-images/our-business-bg.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.awards-banner {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%);
	/*background-repeat: no-repeat;
	background-size: cover;*/
}

.awards-bg {
	background-image: url("../images/about-images/history-bg.png");
	background-repeat: no-repeat;
	background-size: cover;
}

.core-value-card-grid {
	display: grid;
	grid-template: repeat(4, 1fr) / repeat(2, 1fr);
	grid-auto-flow: row;
	grid-gap: 1.5rem;
}

@media (max-width: 767px) {
	.core-value-card-grid {
		grid-template: repeat(4, 1fr) / repeat(1, 1fr);
		grid-auto-flow: revert;
	}
}

.core-value-card {
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: relative;
	clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
}

	.core-value-card span {
		color: #444;
	}

	.core-value-card::after {
		content: "";
		position: absolute;
		width: 10px;
		height: 100%;
		left: 0;
		top: 0;
	}

	.core-value-card.c1::after {
		background-color: var(--business-brand);
	}

	.core-value-card.c2::after {
		background-color: var(--secondary-1-brand);
	}

	.core-value-card.c3::after {
		background-color: var(--base-brand);
	}

	.core-value-card.c4::after {
		background-color: var(--business-brand);
	}

	.core-value-card.c5::after {
		background-color: var(--secondary-2-brand);
	}

	.core-value-card.c6::after {
		background-color: var(--personal-brand);
	}

.opportunities-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/careers/opportunities-banner.png");
}

.opportunities-box-bg {
	background-image: url("../images/careers/opportunities-box-bg.png");
}

.working-at-acess-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/careers/opportunities-banner.png");
}

.work-environment-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/careers/work-environment-bg.png");
}

.work-environment-bg-clear {
	background-image: url("../images/careers/work-environment-bg.png");
}

.career-path-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/careers/career-path-bg.png");
}

.work-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/careers/work-bg.png");
}

.people-mgt-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/careers/people-mgt-bg.png");
}

.recruitment-process-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/careers/recruitment-process-bg.png");
}

.biz-adv-page-desc-bg {
	background-image: url("../images/biz-adv-page-desc-bg.png");
}

.people-mgt-bg-clear {
	background-image: url("../images/careers/people-mgt-bg.png");
}

.recruitment-process-bg-clear {
	background-image: url("../images/careers/recruitment-process-bg.png");
}

.recruitment-process-desc-bg {
	background-image: url("../images/careers/recruitment-process-desc-bg.png");
}

.careers-grid {
	padding-top: 1.5rem;
	/* margin-bottom: 2rem; */
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 2rem;
}

.careers-img {
	width: 100%;
	height: 35%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.careers-button {
	margin-top: auto;
}

.careers-body {
	background-color: var(--white-brand);
	padding: 1.5rem;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	font-size: 1rem;
	gap: 0.7rem;
	min-height: 14rem;
	width: 100%;
	height: 65%;
}

.careers-card {
	width: 100%;
	max-width: 340px;
	position: relative;
	height: 500px;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	/* margin: 0 auto; */
}

.careers-body-text {
	overflow: hidden;
	text-overflow: ellipsis;
	color: #000;
	font-size: 1.1rem;
}

.careers-body-head {
	font-size: 1.4rem;
}

@media (max-width: 350px) {
	.careers-card {
		margin: 0 auto;
	}

	.careers-body {
		padding: 1rem;
	}

	.careers-body-head {
		font-size: 1.4rem;
	}

	.careers-body-text {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		display: -webkit-box;
		-webkit-line-clamp: 5;
		overflow: hidden;
		font-size: 1rem;
	}
}

.custom-select,
.form-control {
	border: none;

	/* box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1); */
}

.page-link {
	color: var(--base-brand);
}

	.page-link:hover {
		color: var(--base-brand);
	}

.page-item.active .page-link {
	background: var(--base-brand);
	border: 1px solid var(--base-brand);
}

.page-item.next > a,
.page-item.previous > a {
	background: rgba(238, 126, 1, 0.15);
	color: var(--base-brand);
}

.page-item.next.disabled > a,
.page-item.previous.disabled > a {
	background: rgba(238, 126, 1, 0.15);
	color: var(--base-brand);
	pointer-events: none;
	cursor: auto;
}

.global-table thead th {
	color: #fff;
	background: var(--business-brand);
	border-bottom: 0px solid var(--business-brand);
	vertical-align: top;
}

table.global-table {
	border-collapse: collapse !important;
}

.global-table th {
	border: 0px solid var(--base-brand);
}

#personal .global-table thead th {
	color: #fff;
	background: var(--personal-brand);
	border-bottom: 0px solid var(--personal-brand);
	vertical-align: top;
}

#private .global-table thead th {
	color: #fff;
	background: var(--private-brand);
	border-bottom: 0px solid var(--private-brand);
	vertical-align: top;
}

.global-table td,
.global-table th {
	border-right: 2px solid var(--base-brand);
	vertical-align: top;
}

.global-table thead tr th:last-child {
	border-right: 0px;
}

.global-table tbody tr td:last-child {
	border-right: 0px;
}

.global-table td {
	border-top: 2px solid #fff;
	border-bottom: 0px solid #fff;
	border-left: 0px solid #fff;
	border-right: 2px solid var(--base-brand);
	background: white;
}

.global-table.table-striped td {
	background: #e6ecf3;
}

.global-table td:last-child {
	border-right: 0px;
}

.global-table.table-striped tbody tr:nth-of-type(odd) {
	background-color: #e6ecf3;
}

.global-table.table-striped tbody tr:nth-of-type(even) {
	background-color: #e6ecf3;
}

#personal .global-table td {
	background-color: #edf3d1;
}

#personal .global-table td {
	background-color: #edf3d1;
}

.z2 {
	z-index: 2;
}

.z3 {
	z-index: 3;
}

.z5 {
	z-index: 5;
}

.z100 {
	z-index: 100;
}

.comment-text-area {
	height: 8rem !important;
	resize: none;
}

.cursor-pointer {
	cursor: pointer;
}

.loans-banner-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/emerging-banking/loans-banner.png");
}

.edu-loan-banner-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/emerging-banking/edu-loan-banner.png");
}

.tech-loan-banner-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/emerging-banking/tech-loan-banner.png");
}

.health-loan-banner-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/emerging-banking/health-loan-banner.png");
}

.loyality-lending-banner-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/emerging-banking/loyality-lending-banner.png");
}

.mediloan-banner-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/emerging-banking/mediloan-banner.png");
}

.installment-banner-bg {
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 71.37%), url("../images/emerging-banking/installment-banner.png");
}

.edu-loan-box-bg {
	background-image: url("../images/emerging-banking/edu-loan-box-bg.png");
}

.health-loan-box-bg {
	background-image: url("../images/health-loan-box-bg.png");
}

.installment-box-bg {
	background-image: url("../images/emerging-banking/installment-box-bg.png");
}

.loyality-lending-box-bg {
	background-image: url("../images/emerging-banking/loyality-lending-box-bg.png");
}

.mediloan-box-bg {
	background-image: url("../images/emerging-banking/mediloan-box-bg.png");
}

.tech-loan-box-bg {
	background-image: url("../images/emerging-banking/tech-loan-box-bg.png");
}

.ways-to-bank-banner-1 {
	background-image: url("../images/ways-to-bank/ways-to-bank-banner.png");
}

.customer-support-banner-1 {
	background-image: url("../images/customer-support/customer-support.png");
}

.border-bottom-main {
	border-bottom: 1px solid var(--base-brand);
}

.nav-tabs .nav-item {
	margin-bottom: -1px;
	z-index: 0;
}

.stop-scrolling {
	height: 100%;
	overflow: hidden;
}

.deck-card {
	width: 32%;
	min-width: 250px;
	height: 170px;
	margin: 2rem auto;
}

.deck-cards div:nth-child(1) {
	border-bottom: 4px solid var(--base-brand);
}

.deck-cards div:nth-child(2) {
	border-bottom: 4px solid var(--personal-brand);
}

.deck-cards div:nth-child(3) {
	border-bottom: 4px solid var(--secondary-1-brand);
}

.promo-card {
	background-color: #fff;
	border-top: 3px solid var(--base-brand);
	padding: 1.5rem 0rem 1.5rem 1.2rem;
	margin: 2rem 0 !important;
}

	.promo-card span {
		display: flex !important;
		justify-content: center;
		align-items: center;
		border: 3px solid #fff;
		position: relative;
		z-index: 2;
	}

@media (max-width: 768px) {
	.promo-card .box-container {
		display: none;
	}
}

.promo-card .box-container::after {
	position: absolute;
	content: "";
	top: 0.4rem;
	right: 0%;
	height: 2.5rem;
	width: 45%;
	background: rgba(238, 126, 1, 0.3);
}

.flex-wrapper {
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
}

.promo-img {
	max-width: 100%;
}

@media (max-width: 768px) {
	.flex-wrapper {
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
}

.xtra-height {
	height: 550px;
	margin: 0 auto 8rem;
}

.xtra-translate {
	right: 0;
	bottom: -4rem;
}

.premium-offer-card .card-text {
	cursor: pointer;
	transition: 0.1s ease-in;
}

.premium-offer-card:hover .card-text {
	text-decoration: underline;
	transition: 0.1s ease-out;
}

.personal-banking-1 {
	background-image: url("../images/personal-banking/personal-banking-lg-banner.png");
}

.personal-more-1 {
	background-image: url("../images/personal-banking/service-1.png");
}

.personal-more-2 {
	background-image: url("../images/personal-banking/service-2.png");
}

.personal-more-3 {
	background-image: url("../images/personal-banking/service-3.png");
}

.sme-personal-img {
	background-image: url(../images/personal-banking/sme-personal-img.png);
}

.women-zone-card {
	position: relative;
	/* overflow: hidden; */
	padding: 7%;
	padding-top: 14%;
	max-width: 543px;
	min-width: min-content;
	width: 50%;
	height: 430px;
	background: #85091b;
	justify-content: center;
	display: flex;
	flex-direction: column;
}

	.women-zone-card > img {
		position: absolute;
		top: -3rem;
		left: 50%;
		transform: translateX(-50%);
	}

@media (max-width: 767px) {
	.women-zone-card {
		width: 100%;
	}
}

.mid-card {
	width: 90%;
	min-width: 350px;
	flex: 1;
}

.h-mid {
	height: 400px;
}

.corporate-banner-1 {
	background-image: url("../images/corporate-banking/corporate-banner-1.png");
}

.corporate-banner-2 {
	background-image: url("../images/corporate-banking/corporate-fold-2.png");
}

.corporate-banner-3 {
	background-image: url("../images/corporate-banking/corporate-fold-3.png");
}

/********************************************************************************************************************
*STYLING FOR PAYDAY LOAN
*********************************************************************************************************************/

.linear-orange-bg {
	background: linear-gradient(var(--orange-color), var(--gray-color) 60%);
}

.bg-gray-custom {
	background: var(--gray-color) !important;
}

.payday-loan-right {
	padding: 0 1rem !important;
	margin: 0;
}

.payday-loan-card {
	width: 450px;
}

@media (min-width: 992px) {
	.payday-loan-right {
		padding-right: 4rem !important;
	}
}

@media (max-width: 872px) {
	.image-display-sm {
		display: none !important;
	}

	.payday-loan-card {
		margin: 2rem 0;
	}
}

.slider-wrap {
	position: relative;
}

	.slider-wrap .slider-value {
		padding: 0.5rem;
		font-size: 0.9rem;
		background-color: var(--orange-color);
		border-radius: 4px;
		position: relative;
		width: fit-content;
		color: white;
		top: -10px;
	}

.range-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 7px;
	padding: 0 !important;
	background: var(--orange-color);
	outline: none;
	border-radius: 5px;
	opacity: 0.7;
	-webkit-transition: 0.2s;
	transition: opacity 0.2s;
}

	.range-slider:hover {
		opacity: 1;
	}

	.range-slider::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 25px;
		height: 25px;
		border-radius: 50%;
		border: 5px solid var(--orange-color);
		background: white;
		cursor: pointer;
	}

	.range-slider::-moz-range-thumb {
		width: 25px;
		height: 25px;
		border-radius: 50%;
		border: 5px solid var(--orange-color);
		background: white;
		cursor: pointer;
	}

.banner-slant-line-md {
	width: 98%;
	max-width: 400px;
	height: 8px;
	position: absolute;
	background: #ee7e01;
	transform: rotate(-05deg) skewY(-40deg) translateY(-110px) translateX(-3.8px);
	top: 50px;
	z-index: 99;
}

@media (max-width: 800px) {
	.banner-slant-line-md {
		max-width: 280px;
		transform: rotate(-05deg) skewY(-40deg) translateY(-110px) translateX(-1px);
	}
}

.emerging-about-card-blue-theme {
	background: #fff !important;
}

	.emerging-about-card-blue-theme .content {
		background: #fff !important;
	}

	.emerging-about-card-blue-theme .heading {
		color: var(--business-brand);
	}

	.emerging-about-card-blue-theme .text {
		color: rgba(68, 68, 68, 1);
	}

.help-section-white-theme,
.help-center-card-white-theme {
	background: #f1f1f1 !important;
}

	.help-center-card-white-theme .heading {
		color: var(--business-brand);
	}

	.help-center-card-white-theme .text {
		color: #444444;
	}

@media (min-width: 992px) {
	.help-center-right {
		width: 100%;
		max-width: 550px;
	}
}

.flows-section {
	background: #f1f1f1;
	margin-top: 0;
}

	.flows-section .heading {
		font-weight: normal;
		font-size: 2.2em;
		line-height: 100%;
		color: #014086;
		max-width: 595px;
		margin: auto;
	}

	.flows-section .text {
		margin: auto;
		font-weight: normal;
		font-size: 1.1em;
		line-height: 160%;
		color: #444444;
		max-width: 815px;
	}

@media (max-width: 576px) {
	.flow-section {
		font-size: 80%;
	}
}

.flows-container {
	width: 90%;
	margin: 2rem auto;
	margin-bottom: 4rem;
	position: relative;
	display: flex;
	justify-content: center;
}

.flows-section-cards {
	margin: 2rem auto;
	position: relative;
	overflow: hidden;
}

.flows-item {
	background-position: center;
	background-size: cover;
}

.flows-item-1 {
	background-image: url(../images/corporate-banking/flow-1.jpg);
}

.flows-item-2 {
	background-image: url(../images/corporate-banking/flow-2.jpg);
}

.flows-item-3 {
	background-image: url(../images/corporate-banking/flow-3.jpg);
}

.flows-item-4 {
	background-color: linear-gradient(rgba(0, 0, 0, 0), 0% #000000, 78.74%);
	background-image: url(../images/corporate-banking/flow-4.jpg);
}

.flows-section-card {
	width: 302px;
	height: 450px;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	position: relative;
	background-position: center;
	background-size: cover;
	object-fit: contain;
	background-repeat: no-repeat;
}

.flows-item-1 {
	/*background-size: 100% 100%;*/
}

.flows-section-textarea {
	width: 100%;
	/* background:linear-gradient( rgba(0, 0, 0, 0) 0% , rgba(36, 36, 36, 0.856) 40%); */
	background: linear-gradient(180.06deg, rgba(0, 0, 0, 0) 25.53%, #000000 84.13%);
	display: flex;
	padding: 1rem;
	margin: 0;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	height: 500px;
	color: #fff;
	overflow: hidden;
	transition: 0.4s cubic-bezier(0.25, 1, 0.3, 1);
}

.flows-section-card:hover .flows-section-textarea {
	height: 100%;
	background: #014086;
	justify-content: center;
	transition: 0.4s cubic-bezier(0.25, 1, 0.3, 1);
}

.flows-title {
	font-size: 1.5rem;
}

.flows-text {
	font-size: 0.9rem;
	color: rgb(240, 239, 239);
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

@media (max-width: 400px) {
	.flows-title {
		font-size: 1rem;
	}

	.flows-text {
		font-size: 0.8rem;
	}

	.service-glass {
		height: 135px;
	}

	.flows-section-card:hover .btn {
		transform: scale(0.8);
		transform-origin: left;
	}
}

.flows-swiper-container {
	width: 100%;
	max-width: revert;
}

.flows-btn {
	opacity: 0;
	transform: translateY(50px);
}

@media (max-width: 600px) {
	.flows-section-textarea {
		height: 100%;
		background: #013f86e7;
		justify-content: center;
		transition: 0.4s cubic-bezier(0.25, 1, 0.3, 1);
	}

	.flows-btn {
		opacity: 1;
		transform: translateY(0);
	}
}

.flows-section-card:hover .flows-btn {
	opacity: 1;
	transform: translateY(0);
}

.flows-card-process {
	position: absolute;
	top: 80px;
	right: -29px;
	width: 0;
	height: 0;
	border-left-style: solid;
	border-left-width: 30px;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	z-index: 99;
}

.contact-section-process {
	position: absolute;
	top: 0px;
	right: calc(50% - 25px);
	width: 0;
	height: 0;
	border-left-style: solid;
	border-left-width: 25px;
	border-right: 25px solid transparent;
	border-top: 25px solid transparent;
	border-left-color: transparent;
	border-top-color: #f1f1f1;
	z-index: 99;
}

.flows-section-card .process-1 {
	border-left-color: #100501f8;
}

.flows-section-card .process-2 {
	border-left-color: #545252e0;
}

.flows-section-card .process-3 {
	border-left-color: #274f8cdc;
}

.flows-section-card .process-4 {
	border-left-color: #fcf8df;
}

.flows-section-card:hover .flows-card-process {
	transition: 0.6s;
	border-left-color: var(--business-brand);
}

@media (max-width: 400px) {
	.flows-section {
		padding: 1rem 0 !important;
	}

	.flows-card-process {
		display: none;
	}
}

@media (max-width: 1200px) {
	.flows-container {
		flex-wrap: wrap;
		max-width: 800px;
		margin-top: 4rem;
		gap: 0.5rem;
	}

	.flows-card-process {
		display: none;
	}

	.flows-section-card {
		width: 49%;
	}
}

@media (max-width: 600px) {
	.flows-container {
		width: 100%;
		padding: 1rem;
		margin-top: 1rem;
		gap: 3rem 0;
	}

	.flows-section-card {
		width: 100%;
		max-width: 300px;
	}
}

.why-access {
	margin-top: -4rem;
}

.why-access-cards {
	display: flex;
	justify-content: center;
	margin: auto;
	gap: 2rem;
	flex-wrap: wrap;
}

@media (min-width: 1300px) {
	.why-access-cards {
		justify-content: space-between;
	}

	.sw-con {
		transform: translateX(30px);
	}
}

@media (min-width: 1400px) {
	.why-access-cards {
		justify-content: center;
	}

	.access-more-section-container {
		max-width: 1115px;
		margin: auto;
	}
}

.why-access-card {
	max-width: 350px;
	min-height: 280px;
	border: 1px solid rgba(238, 126, 1, 1);
	background: #fdf2e6;
}

@media (max-width: 400px) {
	.why-access-card {
		max-width: 320px;
		min-height: 240px;
	}

	.why-access-cards {
		margin-top: 1rem !important;
	}
}

.why-access-container {
	width: 90%;
	margin: auto;
	padding: 3rem 0 !important;
}

	.why-access-container .heading {
		color: rgba(1, 64, 134, 1);
	}

@media (max-width: 992px) {
	.why-access-container {
		padding: 2rem 0 !important;
	}
}

@media (max-width: 576px) {
	.why-access-container {
		width: 100%;
		margin: auto;
		padding: 1rem !important;
	}
}

.access-more-section {
	background: #f1f1f1;
	padding: 2rem 0;
}

	.access-more-section .heading {
		line-height: 95%;
	}

@media (min-width: 1000px) {
	.access-more-section header {
		max-width: 350px;
		margin-right: auto;
		margin-left: -1rem;
	}

	.access-more-section {
		padding: 5rem 0;
		padding-top: 4rem;
	}
}

.access-more-section-container {
	width: 90%;
	margin: auto;
}

@media (max-width: 500px) {
	.access-more-section-container {
		width: 100%;
		padding: 1rem;
	}
}

.access-more-section-card {
	max-width: 350px;
	margin: auto;
	background: #fff;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

	.access-more-section-card img {
		width: 100%;
		object-fit: cover;
	}

.access-more-section-swiper {
	overflow-x: hidden;
}

.access-more-section-button-prev,
.offers-section-button-prev {
	position: absolute;
	cursor: pointer;
	z-index: 5;
	left: -2rem;
	top: 55%;
	border-radius: 5rem;
	width: 40px;
	height: 40px;
	transform: translateY(-50%);
}

.access-more-section-button-next,
.offers-section-button-next {
	position: absolute;
	cursor: pointer;
	z-index: 5;
	right: -2rem;
	top: 55%;
	border-radius: 5rem;
	width: 40px;
	height: 40px;
	transform: translateY(-50%);
}

@media (max-width: 500px) {
	.access-more-section-button-prev,
	.offers-section-button-prev {
		left: -1.5rem;
	}

	.access-more-section-button-next,
	.offers-section-button-next {
		right: -1.5rem;
	}
}

.access-more-section-indicator {
	height: 5px;
}

.access-more-section-pagination {
	height: 5px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 0.1rem;
}

.access-more-section-indicator
.access-more-section-pagination-bullets
.swiper-pagination-bullet {
	border-radius: 0;
	height: 2px;
	width: 41px;
	margin: 0 4px;
	background-color: #222;
	transition: 0.2s ease-in;
}

.access-more-section-indicator .access-more-section-pagination-bullet-active {
	height: 4px !important;
	background-color: var(--secondary-1-brand) !important;
	transition: 0.2s ease-in;
}

.access-money {
	min-height: 500px;
	background-color: var(--personal-brand);
	background-image: url(../images/ways-to-bank/access-money-bg.png);
	background-position: bottom right;
	background-size: 300px;
	background-repeat: no-repeat;
}

@media (min-width: 1200px) {
	.access-money {
		background-size: 400px;
	}
}

.access-money .img-container {
	max-width: 250px;
	position: relative;
	margin-left: 3.5rem;
	padding: 00px;
}

.access-money .left-part {
	display: flex;
	/* height:inherit !important; */
	height: 550px !important;
	margin: auto;
	justify-content: center;
	flex-direction: row;
	background: url(../images/ways-to-bank/access-money-bg-2.png);
	background-position: bottom center;
	background-repeat: no-repeat;
	background-size: 450px;
}

@media (max-width: 576px) {
	.access-money .left-part {
		height: 450px !important;
		background-size: 90%;
		width: 90% !important;
	}

	.access-money .img-container {
		max-width: 50%;
	}
}

@media (max-width: 400px) {
	.access-money .left-part {
		height: 300px !important;
		background-size: 90%;
	}

	.access-money .img-container {
		max-width: 50%;
	}
}

@media (max-width: 320px) {
	.access-money .left-part {
		height: 270px !important;
		background-size: 90%;
	}

	.access-money .img-container {
		max-width: 55%;
	}
}

@media (min-width: 1200px) {
	.access-money .left-part {
		justify-content: flex-start;
		background-position: bottom left;
	}

	.access-money .img-container {
		margin-left: 7rem;
		padding: 00px;
	}

	.access-money .right-part {
		margin-bottom: 1.7rem;
	}
}

.access-money .img-container img {
	width: 100%;
	position: absolute;
	bottom: 0;
}

	.access-money .img-container img:nth-child(1) {
		left: -4rem;
		z-index: 99;
	}

.access-money .left-part-wrapper {
	overflow: hidden;
	position: relative;
}

	.access-money .left-part-wrapper .banner-slant-line {
		height: 60%;
		max-height: 300px;
	}

.photos-section .container-fluid {
	position: relative;
}

.photos-section {
	position: relative;
	/* overflow:hidden; */
}

.photos-section2 {
	position: relative;
	/* overflow:hidden; */
}

.photos-section-gap {
	position: relative;
}

.photos-section .content {
	width: 470px;
	clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
	position: absolute;
	z-index: 9999;
	bottom: -18rem;
	overflow: auto !important;
}

.photos-section2 .content {
	width: 470px;
	clip-path: polygon(0 0, 100% 0, 92% 100%, 0% 100%);
	position: absolute;
	z-index: 9999;
	bottom: -3rem;
	overflow: auto !important;
}

.photos-section .content .img-container {
	margin: auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #f8f8faa8;
	display: grid;
	place-content: center;
}

.photos-section2 .content .img-container {
	margin: auto;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	position: relative;
	background: #f8f8faa8;
	display: grid;
	place-content: center;
}

.photos-section .content .img-container img {
	transform: translateY(25px) translateX(15px);
}

.photos-section2 .content .img-container img {
	transform: translateY(25px) translateX(15px);
}

@media (max-width: 567px) {
	.photos-section .content {
		width: calc(100% - 32px);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		position: absolute;
		bottom: -18rem;
	}

	.photos-section2 .content {
		width: calc(100% - 32px);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		position: absolute;
		bottom: -3rem;
	}

	.photos-section .content .img-container {
		transform: scale(0.8);
	}

	.photos-section2 .content .img-container {
		transform: scale(0.8);
	}
}

.tamada_section {
	background: var(--base-brand);
}

@media (min-width: 992px) {
	.tamada_section {
		background: linear-gradient(90deg, var(--base-brand) 50%, white 50%);
	}
}

.contact-section .content .lg {
	line-height: 90%;
}

@media (min-width: 992px) {
	.contact-section .content {
		max-width: 350px;
	}
}

.access-help-center-card img {
	max-height: 200px;
	height: auto;
	min-height: 200px;
	object-fit: cover;
}

.access-help-center-card .content {
	flex-basis: 66.6%;
	height: 100%;
}

.access-help-center-card {
	background-color: var(--white-brand);
	max-height: 200px;
	margin: auto;
}

	.access-help-center-card .content {
		background-color: var(--white-brand);
		/* display: flex;
	align-items: center; */
		padding: 1rem;
		height: 100%;
	}

		.access-help-center-card .content .blue-text {
			display: block;
			padding-top: 20rem;
			font-size: 1rem;
		}

	.access-help-center-card .access-help-center-card-img {
		clip-path: polygon(10% 0%, 100% 0, 100% 100%, 0% 100%);
		width: 40%;
	}

@media (max-width: 577px) {
	.access-help-center-card .access-help-center-card-img {
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		width: 100%;
	}
}

.access-help-center-card .heading {
	/* font-weight: 500;
	font-size: 21px; */
	line-height: 94.69%;
}

.access-help-center-card .text {
	font-weight: normal;
	/* font-size: 16px;
	line-height: 100%; */
	display: -webkit-box;
	-webkit-line-clamp: 4; /* number of lines to show */
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 576px) {
	.access-help-center-card {
		flex-direction: column-reverse;
		margin-top: 2rem;
		max-width: 300px;
		width: 100%;
	}

		.access-help-center-card img {
			flex-basis: 100%;
			object-fit: cover;
			max-height: 146px;
			width: 100%;
			overflow: hidden;
		}

		.access-help-center-card img {
			flex-basis: 100%;
			object-fit: cover;
			max-height: 146px;
			width: 100%;
			overflow: hidden;
		}

		.access-help-center-card .content {
			flex-basis: 100%;
			width: 100%;
			margin: auto;
			padding-bottom: 2rem;
		}

	.access-help-center-card {
		max-height: max-content;
	}
}

.access-help-center-card {
	max-width: 600px;
}

@media (min-width: 700px) {
	.access-help-center-cards {
		width: 90%;
		margin: auto;
	}
}

@media (max-width: 400px) {
	.access-help-center-cards {
		width: 100%;
		margin: auto;
	}

	.access-help-center-card {
		width: 100% !important;
		max-width: 400px !important;
		margin: auto;
	}
}

.max-width {
	max-width: 450px;
	margin: auto;
}

.access-more-info {
}

	.access-more-info .section {
		width: 100%;
	}

		.access-more-info .section .image,
		.access-more-info .section .content {
			height: 400px;
		}

			.access-more-info .section .image .img-container {
				width: 100%;
				height: 100%;
				overflow: hidden;
			}

			.access-more-info .section .image img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				transition: 0.2s;
			}

				.access-more-info .section .image img:hover {
					height: 110%;
				}

		.access-more-info .section .content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			position: relative;
		}

	.access-more-info .section-1 .content-1 {
		background: var(--base-brand);
	}

	.access-more-info .section-2 .content-2 {
		background: var(--personal-brand);
	}

	.access-more-info .section-3 .content-3 {
		background: var(--business-brand);
	}

	.access-more-info .section .text {
		max-width: 450px;
	}

.access-more-info-process.process-1,
.access-more-info-process.process-3 {
	position: absolute;
	top: calc(50% - 40px);
	left: -60px;
	width: 0;
	height: 0;
	border-left-style: solid;
	border-left-width: 30px;
	border-bottom: 30px solid transparent;
	border-right: 30px solid transparent;
	border-top: 30px solid transparent;
	z-index: 99;
	border-left-color: transparent;
}

.access-more-info-process.process-1 {
	border-right-color: var(--base-brand);
}

.access-more-info-process.process-3 {
	border-right-color: var(--business-brand);
}

.access-more-info-process.process-2 {
	position: absolute;
	top: calc(50% - 40px);
	right: -29px;
	width: 0;
	height: 0;
	border-left-style: solid;
	border-left-width: 30px;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	z-index: 99;
	border-left-color: var(--personal-brand);
}

@media (max-width: 567px) {
	.access-more-info .section .image,
	.access-more-info .section .content {
		height: 300px;
	}
}

@media (max-width: 992px) {
	.access-more-info-process.process-1,
	.access-more-info-process.process-2,
	.access-more-info-process.process-3 {
		position: absolute;
		top: -60px;
		left: calc(50% - 30px);
		width: 0;
		height: 0;
		border-left-style: solid;
		border-left-width: 30px;
		border-bottom: 30px solid transparent;
		border-right: 30px solid transparent;
		border-top: 30px solid transparent;
		z-index: 99;
	}

	.access-more-info-process.process-1 {
		border-bottom-color: var(--base-brand);
	}

	.access-more-info-process.process-2 {
		border-bottom-color: var(--personal-brand);
		border-left-color: transparent;
	}

	.access-more-info-process.process-3 {
		border-bottom-color: var(--business-brand);
	}
}

.support-center-icon {
	transform: scale(0.7);
}

.support-center-icon-lg {
	transform: scale(0.6) translateY(20px);
}

.access-more-box:hover .support-center-icon .path-1 {
	fill: #ffffff;
	transition: 0.2s ease-in;
}

.download-app-card .container .download-qr {
	max-height: 350px;
}

.download-app-card .container .desc {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

	.download-app-card .container .desc .download-box {
		width: 100%;
		max-width: 300px;
	}

		.download-app-card .container .desc .download-box img {
			width: 48%;
			max-width: 140px;
		}

.download-app-card .container .download-qr img {
	width: 100%;
	max-width: 300px;
	display: block;
	margin-left: auto;
	height: 100%;
	padding-bottom: 0rem;
	/* transform:translateY(.42em); */
}

@media (max-width: 450px) {
	.download-app-card .container .download-qr img {
		width: 120%;
		margin-right: auto;
		margin-left: 0;
		transform: translateX(-0.62em);
	}

	.download-app-card .container .desc .heading {
		line-height: 98%;
		font-size: 1.2rem;
	}

	.download-app-card .container .desc .text {
		margin-top: 0.4rem;
		font-size: 0.7rem !important;
		line-height: 120%;
	}
}

.material-health-form input {
	padding-top: 1.6rem;
	padding-bottom: 1.6rem;
}

.material-health-form select {
	height: 50px;
}

.power-table {
	overflow-x: scroll !important;
}

.text-dark-green {
	color: rgba(5, 122, 130, 1);
}

.offers-more-section-swiper {
	width: 100%;
	overflow: hidden;
}

.offers-card {
	width: 260px;
	height: 450px;
	display: grid;
	grid-template-rows: 180px 3fr 60px !important;
	margin: auto;
	box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.1);
}

	.offers-card .img-cont {
		width: 100%;
		padding: 2rem;
		background: #fff;
	}

		.offers-card .img-cont img {
			width: 100%;
		}

.bg-dark-blue {
	background: rgba(44, 137, 194, 1);
}

.show-on-small-screen,
.show-on-large-screen {
	display: none;
}

@media (max-width: 567px) {
	.show-on-small-screen {
		display: block;
	}
}

@media (min-width: 567px) {
	.show-on-large-screen {
		display: block;
	}
}

.cClock-text-content {
	color: rgba(34, 34, 34, 1);
	font-size: 2rem !important;
}

.map-container {
	padding: 3.2rem 0.8rem;
	position: relative;
	display: inline-block;
}

	.map-container img {
		width: 90%;
	}

	.map-container .point {
		cursor: pointer;
		position: absolute;
		width: 0.7rem;
		height: 0.7rem;
		background-color: var(--base-brand);
		border-radius: 50%;
		transition: all 0.3s ease;
		will-change: transform, box-shadow;
		transform: translate(-50%, -50%);
		box-shadow: 0 0 0 rgba(var(--base-brand), 0.4);
		animation: pulse 3s infinite;
	}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(238, 126, 1, 0.5);
	}

	70% {
		box-shadow: 0 0 0 25px rgba(238, 126, 1, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(238, 126, 1, 0);
	}
}

.map-container .point:hover {
	animation: none;
	transform: translate(-50%, -50%) scale3D(1.35, 1.35, 1);
	box-shadow: 0;
}

.map-container .Nigeria {
	top: 56.9%;
	left: 49.3%;
}

.map-container .D_R_Congo {
	top: 60.3%;
	left: 51.8%;
}

.map-container .Gambia {
	top: 52.9%;
	left: 43.7%;
}

.map-container .Ghana {
	top: 77%;
	left: 27%;
}

.map-container .Kenya {
	top: 60%;
	left: 57.2%;
}

.map-container .Mozambique {
	top: 70.5%;
	left: 55.1%;
}

.map-container .Rwanda {
	top: 62.6%;
	left: 54.5%;
}

.map-container .Sierra_Leone {
	top: 57%;
	left: 44%;
}

.map-container .South_Africa {
	top: 74.5%;
	left: 53.3%;
}

.map-container .United_Kingdom {
	top: 33.3%;
	left: 46.8%;
}

.map-container .Zambia {
	top: 68.5%;
	left: 53.3%;
}

@media (max-width: 767px) {
	.map-container .point {
		width: 0.5rem;
		height: 0.5rem;
	}

	.map-container .Nigeria {
		top: 55.9%;
		left: 49.3%;
	}

	.map-container .D_R_Congo {
		top: 60.3%;
		left: 51.8%;
	}

	.map-container .Gambia {
		top: 52.9%;
		left: 43.7%;
	}

	.map-container .Ghana {
		top: 77%;
		left: 27%;
	}

	.map-container .Kenya {
		top: 58%;
		left: 57.2%;
	}

	.map-container .Mozambique {
		top: 65.5%;
		left: 55.1%;
	}

	.map-container .Rwanda {
		top: 60.6%;
		left: 54.5%;
	}

	.map-container .Sierra_Leone {
		top: 56%;
		left: 44%;
	}

	.map-container .South_Africa {
		top: 69.5%;
		left: 53.3%;
	}

	.map-container .United_Kingdom {
		top: 36.3%;
		left: 46.8%;
	}

	.map-container .Zambia {
		top: 63.5%;
		left: 53.3%;
	}
}

@media (max-width: 400px) {
	.map-container .point {
		width: 0.3rem;
		height: 0.3rem;
	}

	.map-container .Nigeria {
		top: 55.9%;
		left: 49.3%;
	}

	.map-container .D_R_Congo {
		top: 60.3%;
		left: 51.8%;
	}

	.map-container .Gambia {
		top: 51.5%;
		left: 43.9%;
	}

	.map-container .Ghana {
		top: 77%;
		left: 27%;
	}

	.map-container .Kenya {
		top: 56.5%;
		left: 56.8%;
	}

	.map-container .Mozambique {
		top: 64%;
		left: 54.8%;
	}

	.map-container .Rwanda {
		top: 57.6%;
		left: 54%;
	}

	.map-container .Sierra_Leone {
		top: 54%;
		left: 44.5%;
	}

	.map-container .South_Africa {
		top: 67%;
		left: 53%;
	}

	.map-container .United_Kingdom {
		top: 37.3%;
		left: 46.8%;
	}

	.map-container .Zambia {
		top: 61%;
		left: 53%;
	}
}

.video-item {
	cursor: pointer;
}

.why-choose-access {
	margin-top: 7rem;
}

	.why-choose-access header {
		max-width: 500px;
	}

	.why-choose-access .contents {
		position: relative;
		background-image: url("../images/corporate-banking/bg-1.png");
		background-size: cover;
		background-repeat: no-repeat;
		transition: background-image 0.5s;
	}

	.why-choose-access .access-bg-overlay::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		background-position: center center;
		background-repeat: no-repeat;
	}

	.why-choose-access .contents .content-item-box {
		border-left: 1px solid #fd7201;
		border-right: 1px solid #fd7201;
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		cursor: pointer;
		height: 500px;
	}

	.why-choose-access .contents .content-item {
		transition: all 0.4s;
		transform: translateY(2rem);
	}

	.why-choose-access .contents .content-item-box .btn {
		z-index: 99;
		opacity: 0;
		transition: all 0.5s;
	}

	.why-choose-access .contents .content-item-box:hover .content-item .btn {
		opacity: 1;
	}

	.why-choose-access .contents .content-item-box:hover .content-item {
		transition: 0.4s;
		animation: showInFull 0.3s linear 1;
		transform: translateY(-2rem);
	}

@keyframes showInFull {
	from {
		transform: translateY(2rem);
	}

	to {
		transform: translateY(-2rem);
	}
}

.why-choose-access .contents:hover .content-item-box .content-item {
	display: none;
}

	.why-choose-access .contents:hover .content-item-box .content-item.active {
		display: block;
	}

@media (max-width: 992px) {
	.why-choose-access .contents .content-item-box {
		border-top: 1px solid #fd7201;
		height: 200px;
	}

		.why-choose-access .contents .content-item-box:nth-child(1) {
			border-top: 0px solid #fd7201;
		}

	.why-choose-access .contents {
		background-size: cover contain;
		background-position: center;
		background-repeat: no-repeat;
	}

		.why-choose-access .contents .content-item-box:hover .content-item {
			transform: translateY(1rem);
		}

	@keyframes showInFull {
		from {
			transform: translateY(3rem);
		}

		to {
			transform: translateY(1rem);
		}
	}
}

@media (max-width: 400px) {
	.why-choose-access .contents .content-item-box {
		height: 300px;
	}
}

.content-item-1-bg {
	background-image: url(../images/corporate-banking/bg-2.png) !important;
}

.business-banner-1 {
	background-image: url("../images/business-banking/banner-1.png");
}

.business-banner-2 {
	background-image: url("../images/business-banking/banner-2.png");
}

.business-banner-3 {
	background-image: url("../images/emerging-banking/banner-3.png");
}

.bb-solutions-section {
	background-color: #f1f1f1;
	margin-top: -8rem;
}

	.bb-solutions-section .header-wrapper {
		transform: translateY(10rem);
	}

	.bb-solutions-section .heading {
		font-size: 2rem;
	}

	.bb-solutions-section .text {
		font-size: 1rem;
		max-width: 700px;
		text-align: center;
		margin: 0 auto;
	}

.bb-card-deck {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0;
	flex-wrap: wrap;
	margin: 2rem auto 0;
	transform: translateY(10rem);
}

.bb-card-common {
	width: 100%;
	max-width: 370px;
	height: 420px;
	margin: 0;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	flex-direction: column;
	padding: 1.5rem;
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	gap: 0.5rem;
	overflow: hidden;
	transition: 0.4s cubic-bezier(0.25, 1, 0.3, 1);
	will-change: contents;
	color: #fff;
}

.bb-card-1 {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 24.16%, #000000 100%), url("../images/business-banking/bb-1.png");
}

.bb-card-2 {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 24.16%, #000000 100%), url("../images/business-banking/bb-2.png");
}

.bb-card-3 {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 24.16%, #000000 100%), url("../images/business-banking/bb-3.png");
}

.bb-title {
	font-size: 1.2rem;
	transform: translateY(30px);
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
	will-change: contents;
}

.bb-text {
	font-size: 1rem;
	will-change: contents;
	transform: translateY(30px);
	opacity: 1;
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.bb-card-common:hover .bb-title {
	transform: translateY(0px);
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.bb-card-common:hover .bb-text {
	transform: translateY(0px);
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.bb-card-common .btn {
	will-change: contents;
	opacity: 0;
}

.bb-card-common:hover .btn {
	transform: translateY(0px);
	opacity: 1;
	transition: 0.6s cubic-bezier(0.25, 1, 0.3, 1);
}

.extra-pad-top {
	padding-top: 16rem;
	z-index: -1;
}

.mobile-banking-banner-1 {
	background-image: url("../images/mobile-banking/Rectangle 834.png");
}

.xtrav-banner-1 {
	background-image: url("../images/ways-to-bank/Rectangle 2.png");
}

.money-banner-1 {
	background-image: url("../images/ways-to-bank/Rectangle 2 (1).png");
}

.atm-banner {
	background-image: url("../images/ways-to-bank/atm-page-banner.png");
	background-size: cover;
	background-position: center center;
}

.phone-banking-banner {
	background-image: url("../images/ways-to-bank/901-banking-bg.png");
	background-size: cover;
	background-position: left left;
}

.atm-banner:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	transform: scale(-1);
	background: linear-gradient(270deg, rgba(0, 0, 0, 0.63) 0%, rgba(0, 0, 0, 0) 61.43%);
}

.rewards-banner-1 {
	background-image: url("../images/ways-to-bank/Rectangle 547.png");
}

.access-top-subtitle-new {
	max-width: 24rem;
}

.mobile-money-img {
	width: 8rem !important;
	height: auto;
	/* flex: 1; */
}

.rewards-banner-1 {
	background-image: url("../images/ways-to-bank/Rectangle 547.png");
}

.access-top-subtitle-new {
	max-width: 24rem;
}

.mobile-money-img {
	width: 8rem !important;
	height: auto;
	/* flex: 1; */
}

.mobile-money-qr {
	width: 6rem !important;
	height: 6rem;
	/* flex: 1; */
}

@media (min-width: 1000px) {
	.social-img-1 {
		transform: translateX(10rem);
	}

	.social-img-2 {
		transform: translateX(6rem);
	}

	.social-img-3 {
		transform: translateX(6rem);
	}

	.social-img-4 {
		transform: translateX(10rem);
	}

	.social-img-5 {
		transform: translateX(-10rem);
	}

	.social-img-6 {
		transform: translateX(-6rem);
	}

	.social-img-7 {
		transform: translateX(-6rem);
	}

	.social-img-8 {
		transform: translateX(-10rem);
	}
}

.whitespace-nowrap {
	white-space: nowrap;
}

.social-box-left {
	position: relative;
}

.social-box-right {
	position: relative;
}

.social-box-left::before {
	content: "";
	position: absolute;
	height: 1rem;
	width: 1rem;
	background-color: #fff;
	top: 50%;
	right: -0.5rem;
	transform: translateY(-50%) rotate(45deg);
}

.social-box-right::before {
	content: "";
	position: absolute;
	height: 1rem;
	width: 1rem;
	background-color: #fff;
	top: 50%;
	left: -0.5rem;
	transform: translateY(-50%) rotate(45deg);
}


/*Ways to Bank Tamada Chat*/


:root {
	--color1: #283747;
	--color2: #1446A0;
	--color3: #58D68D;
	--color4: #F8C7CC;
	--color5: #FCF7FF;
}

.mockchat,
.mockchat *,
.mockchat *:after,
.mockchat *:before {
	box-sizing: border-box;
}

.mockchat {
	position: relative;
	color: var(--color1);
	max-width: 400px;
	margin: 0 auto;
	height: auto;
	max-height: 400px;
	line-height: 1.25;
	perspective: 900px;
}


	.mockchat .device {
		width: 100%;
		overflow-x: visible;
		margin: 0 auto;
		padding-top: 200%;
		position: relative;
		transition: all .5s;
	}

		.mockchat .device .screen {
			position: absolute;
			width: calc(100% + 0px);
			height: calc(450px - 0px);
			top: 30%;
			left: 50%;
			transform: translate(-50%, -50%);
			background: transparent;
			box-shadow: inset 0 0 40px rgba(white, .7), 0 0 0 5px rgba(white, .15);
			overflow: hidden;
		}

@media (max-width: 370px) {
	.mockchat .device .screen {
		top: 40%;
	}
}

.app {
	width: 100%;
	max-width: 100%;
	height: auto;
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	align-content: flex-end;
	align-items: flex-end;
	flex-wrap: wrap;
	flex-direction: column;
	padding: 5em;
	overflow-y: scroll;
	transition: all 0.3s;
}

	.app::-webkit-scrollbar {
		display: none !important;
	}

.app {
	-ms-overflow-style: none; /* IE and Edge */
	scrollbar-width: none; /* Firefox */
}

@media (min-width:1200px) {
	.app {
		padding: 3.5rem;
	}
}

.reply {
	transform-origin: 100% 50%;
	margin: 2.25em 0 2.25em 1.5em !important;
	width: auto;
	background: #F2F2F2;
	border-radius: 1.5em;
	position: relative;
	padding: 0.75em 1em;
	box-shadow: 0 1px 10px rgba(black, 0.08);
	opacity: 0;
	transform: translateY(2em)scale(0.5);
	animation: mockchat-reply-pop cubic-bezier(0, 0.81, 0.58, 1.2) 0.4s;
	animation-fill-mode: forwards;
	text-align: right;
	transition: all 0.3s;
	max-height: 0;
}

	.reply:nth-child(2n - 1) {
		transform-origin: 0 50%;
		margin: 0.25em 1.5em 0.25em 1.5em !important;
		width: calc(100% - 3em);
		background: #F2F2F2;
		text-align: left;
	}

	.reply:after {
		display: block;
		content: "";
		background-color: #A4C519;
		background-image: url(../images/ways-to-bank/chat-img.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
		position: absolute;
		z-index: 9999999999;
		height: 3.9em;
		width: 3.9em;
		right: -4.5em;
		top: 0.0075em;
		border-radius: 99999px;
		font-size: 0.75em;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		justify-content: center;
		align-items: center;
		line-height: 1;
		font-weight: bold;
	}

	.reply:nth-child(2n - 1):after {
		display: block;
		content: "";
		background-color: #EE7E01;
		background-image: url(../images/ways-to-bank/chat-img.png);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
		position: absolute;
		z-index: 9999999999;
		height: 3.9em;
		width: 3.9em;
		left: -4.5em;
		top: 0.0075em;
		border-radius: 99999px;
		font-size: 0.75em;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		justify-content: center;
		align-items: center;
		line-height: 1;
		font-weight: bold;
	}

@media (max-width:992px) {
	.reply:nth-child(2n - 1):after {
		background-color: #fff;
	}
}

.reply.dots {
	transform-origin: 50% 50%;
	margin: 0.25em 35% 0.25em 35% !important;
	max-width: 30%;
	text-align: center;
	font-size: 1rem;
	line-height: 1;
}

	.reply.dots
	span {
		display: block;
		height: 4px;
		width: 4px;
		background: currentColor;
		display: inline-block;
		border-radius: 99999px;
		margin: 0.25em 0.15em;
		opacity: 0;
		animation: mockchat-dots 0.5s infinite alternate;
		transform: translateY(0.25em);
	}

		.reply.dots
		span:nth-child(2) {
			animation-delay: 0.1s;
		}

		.reply.dots
		span:nth-child(3) {
			animation-delay: 0.2s;
		}

	.reply.dots:after {
		display: none;
	}

@keyframes mockchat-dots {
	to {
		transform: translateY(-0.2em);
		opacity: 1;
	}
}

@keyframes mockchat-blink {
	to {
		opacity: 1;
	}
}

@keyframes mockchat-reply-pop {
	to {
		transform: none;
		font-size: 1rem;
		opacity: 1;
		max-height: 200px;
	}
}


/*New CSS*/

.list-items li {
	padding: 8px 0px;
}

	.list-items li:before {
		color: red;
		content: '';
		width: 25px;
		height: 25px;
		background: url('../../content/images/about-images/svgIcons/access-orange-icon.svg') no-repeat;
		padding-right: 35px;
		float: left;
	}





#sectionOne {
	margin-top: 80px !important;
}

#access-more {
	margin-top: 80px !important;
}

#moreInterest small {
	line-height: 1.2;
}

.plain-content {
	position: relative;
}

body#main .desc-box .page-down-arrow {
	background: var(--base-brand);
}

body#business .desc-box .page-down-arrow {
	background: var(--business-brand);
}

body#private .desc-box .page-down-arrow {
	background: var(--private-brand);
}

body#personal .desc-box .page-down-arrow {
	background: var(--personal-brand);
}

body#xclusive .desc-box .page-down-arrow {
	background: var(--xclusive-brand);
}

.social-icons a {
	padding: 0 5px;
	top: 3px;
	position: relative;
}

/* ======================================   NEW STYLES ADDITION/EXTRACTIONS ================================ */
/* =========================================									============================ */


/* CAREERS OPPURTUNITIES PAGE  */
.career-opp-card {
	background: #FFFFFF;
	border: none !important;
}

.limit-data {
	background: #E5EBE9;
	width: 95%;
	padding-top: 14px;
	padding-bottom: 14px;
}

/* VISA CARD PAGE  */
.visa-card-section {
	border-bottom: 1px solid rgb(68,68,68,.5);
	margin-right: 5px;
	margin-left: 5px;
}

.visa-logo-container {
	width: 80%;
	height: 80%;
	float: right;
}

	.visa-logo-container img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}

.visa-card {
	background: #FFFFFF;
	border: none !important;
	margin-top: 40px;
	margin-right: 20px;
	margin-left: -5px;
}

.visa-card-header {
	font-size: 23px;
	font-weight: 500;
}

.visa-card-img {
	height: 300px;
	width: 100%;
}

	.visa-card-img img {
		object-fit: cover;
		object-position: center center;
	}


/* Access Money page styles  */
.features-card {
	background: #FEFEFE;
	box-shadow: 0px 100px 100px rgba(0, 0, 0, 0.15);
	width: 100%;
	height: 120px;
	padding-top: 30px;
	padding-bottom: 30px;
	padding-right: 20px;
	display: flex;
	justify-content: center;
	align-items: start;
}

@media (max-width: 600px) {
	.features-card {
		margin-top: 30px !important;
		align-items: start;
		margin-left: 5px;
	}
}

/* icons wrap  */
.svg-icon-card {
	width: 60px;
	height: 60px;
	padding: 15px;
	border-radius: 50%;
	margin-right: 12px;
	margin-left: 15px;
}

	.svg-icon-card img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}

/* 901 atm features section  */
.atm-feature-img-container {
	width: 100%;
	height: 100%;
}

	.atm-feature-img-container img {
		width: 100%;
		height: 100%;
		margin-right: -34px;
	}

.support-img-container {
	margin-bottom: -7px;
}


/* 901 border line styles  */
.border-white-faq {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.border-bottom-faq {
	border-bottom: 1px solid #fff;
}

.border-bottom-faq-black {
	border-bottom: 1px solid #000000;
}

.border-black-faq {
	border-top: 1px solid #000000;
	border-bottom: 1px solid #000000;
}

/* Mobile banking images on 901 page */
.mobile-banking-sect-img {
	width: 90%;
	height: 90%;
}

	.mobile-banking-sect-img img {
		width: 100%;
		height: 100%;
		object-fit: contain;
		object-position: center;
	}

/* Sticky Nav styles  */
.sticky-tab {
	display: flex;
	text-align: center;
	justify-content: center;
	padding-top: 20px;
	padding-bottom: 20px;
}
#business {
	position: relative;
	z-index: 1;
}
#personal .sticky-tab {
	padding-top: 0;
	padding-bottom: 0;
}
#personal .sticky-tab a {
	padding-top: 20px;
	padding-bottom: 20px;
}
#personal .fr-view ul > li {
	display: flex;
}
/* SITE MAP PAGE STYLES  */
.sitemap {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	padding: 0;
}

	.sitemap a {
		position: relative;
		z-index: 10;
		display: inline-flex;
		flex-direction: column;
		padding: 0.5em 0.9em;
		border: none;
		font-weight: 700;
		text-decoration: none;
		color: #014086;
		background: #FFFFFF;
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
	}

		.sitemap a:before {
			margin-bottom: 0.3em;
			font-size: 0.8em;
			background: #000;
		}

.sitemap-main {
	position: relative;
	flex: 1 1 100%;
	order: 3;
	/* margin-bottom: 1em;*/
}

	.sitemap-main a {
		margin-bottom: 0.5em;
		margin-left: 0.2em;
	}

	.sitemap-main ul {
		position: relative;
		padding-left: 2em;
	}

	.sitemap-main > ul {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-start;
	}

		.sitemap-main > ul > li {
			flex: 1 1 auto;
		}

.sitemap li {
	margin-right: 0em;
	list-style: none;
}

/* Handle grid lines */
.sitemap-main li:before,
.sitemap-main li:after {
	display: inline-block;
	width: 1.5em;
	height: 2em;
	border: 2px solid #EE7E01;
	border-right: none;
	border-top: none;
	content: "";
}

.sitemap-main li:after {
	position: absolute;
	left: 2em;
	bottom: 0;
	width: 0px;
	height: 100%;
}

.sitemap-main ul:before {
	position: absolute;
	left: 0;
	top: -2.75em;
	display: block;
	width: 2px;
	height: 100%;
	background: #EE7E01;
	content: "";
}

.sitemap-main > ul:before {
	display: none;
}

.sitemap-main li:last-child:after {
	border-color: #EE7E01;
	bottom: 0;
	height: 2.7em;
}

/* The home/top level link */
.sitemap-root {
	margin-bottom: 2em;
}

	.sitemap-root > a {
		/* min-width: 8em; */
		background: #ffff;
		border-color: #EE7E01;
		color: #014086;
		background: #FFFFFF;
		text-align: center;
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
	}

		.sitemap-root > a:before {
			color: purple;
		}

		.sitemap-root > a:after {
			position: absolute;
			bottom: -2.6em;
			left: calc(2em - 1px);
			display: block;
			width: 2px;
			height: 2em;
			/* background: #EE7E01; */
			content: "";
		}

@media (min-width: 420px) {
	.sitemap {
		justify-content: space-between;
	}
}


/* Careers page styles  */

.people-cards {
	display: flex;
	flex-flow: row wrap;
	padding: 0 !important;
	margin: 0;
}

.people-card {
	margin-top: 20px;
	margin-bottom: 15px;
	width: calc((100% / 3) - 13px);
	transition: all 0.2s ease-in-out;
}

.p-card-header {
	margin-top: -5px;
	margin-bottom: -5px;
}

.p-card-link {
	color: var(--orange-color);
}

@media screen and (max-width: 991px) {
	.people-card {
		width: calc((100% / 2) - 30px);
	}
}

@media screen and (max-width: 767px) {
	.people-card {
		width: 100%;
	}
}

.people-card:hover .card__inner {
	transform: scale(1.05);
}

.card__inner {
	width: 100%;
	position: relative;
	cursor: pointer;
	background-color: #ffff;
	transition: all 0.2s ease-in-out;
	height: fit-content;
}

	.card__inner .card-img {
		width: 100%;
		height: 180px !important;
	}

		.card__inner .card-img img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			object-position: center;
		}

	.card__inner:after {
		transition: all 0.3s ease-in-out;
	}

.card__expander {
	transition: all 0.2s ease-in-out;
	background-color: #fff;
	width: 100%;
	position: relative;
	/* position: absolute; */
}

	.card__expander .fas {
		font-size: 0.95em;
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
		color: var(--orange-color)
	}

		.card__expander .fas:hover {
			opacity: 0.9;
		}

.people-card.is-collapsed .card__inner:after {
	content: "";
	opacity: 0;
}

.people-card.is-collapsed .card__expander {
	max-height: 0;
	min-height: 0;
	overflow: hidden;
	margin-top: 0;
	opacity: 0;
}

.people-card.is-expanded .card__inner {
	background: #014086;
	color: #fff;
}

	.people-card.is-expanded .card__inner:after {
		content: "";
		opacity: 1;
		display: block;
		height: 0;
		width: 0;
		position: absolute;
		bottom: -30px;
		left: calc(50% - 15px);
		border-left: 15px solid transparent;
		border-right: 15px solid transparent;
		border-bottom: 15px solid #fff;
	}

	.people-card.is-expanded .card__inner .p-card-body a {
		color: #fff;
	}

	.people-card.is-expanded .card__inner .fa:before {
		content: "";
	}

.people-card.is-expanded .card__expander {
	max-height: 1000px;
	min-height: 200px;
	overflow: visible;
	margin-top: 30px;
	opacity: 1;
	z-index: 999999;
}

.people-card.is-expanded:hover .card__inner {
	transform: scale(1);
}

.people-card.is-inactive .card__inner {
	pointer-events: none;
	opacity: 0.5;
}

.people-card.is-inactive:hover .card__inner {
	background-color: #949fb0;
	transform: scale(1);
}

@media screen and (min-width: 992px) {
	.people-card:nth-of-type(3n + 2) .card__expander {
		margin-left: calc(-100% - 30px);
	}

	.people-card:nth-of-type(3n + 3) .card__expander {
		margin-left: calc(-200% - 60px);
	}

	.people-card:nth-of-type(3n + 4) {
		clear: left;
	}

	.card__expander {
		width: calc(300% + 60px);
	}
}

@media screen and (min-width: 768px) and (max-width: 991px) {
	.people-card:nth-of-type(2n + 2) .card__expander {
		margin-left: calc(-100% - 30px);
	}

	.people-card:nth-of-type(2n + 3) {
		clear: left;
	}

	.card__expander {
		width: calc(200% + 30px);
	}
}

.access-no-display {
	display: none !important;
}

.swiper-pagination {
	/*display: none;*/
}

.swiper-container-horizontal {
	overflow: hidden;
	position: relative;
}

.photo-album .swiper-button-prev,
.photo-album .swiper-button-next {
	background-color: #fff;
	padding: 30px 20px;
}

.photo-album .swiper-button-next {
	right: 5%;
}

.photo-album .swiper-button-prev {
	left: 5%;
}

.photo-album .swiper-slide {
	margin: 0px !important;
}

.photo-album {
	margin-bottom: 100px !important;
}

	.photo-album .h2 {
		color: #014086;
		margin-bottom: 0px;
	}

	.photo-album p {
		color: #ee7e01;
		margin-bottom: 20px;
	}



.access-cards .nav-item {
	position: relative;
}

	.access-cards .nav-item .active {
		padding-left: 35px !important;
		padding-right: 35px !important;
		background: #a4c618 !important;
		color: white !important;
	}

		.access-cards .nav-item .active::after {
			position: absolute;
			content: "";
			width: 0px;
			height: 0px;
			border-top: 7px solid #a4c618;
			border-right: 7px solid transparent;
			border-bottom: 7px solid transparent;
			border-left: 7px solid transparent;
			bottom: -13px;
			left: 46%;
		}

.access-cards .tab-pane {
	width: 80% !important;
	margin-top: 30px;
	margin-bottom: 50px;
}

.access-cards .card-pane-green {
	background: #a4c618;
	color: #fff;
}

.access-cards .card-pane-light {
	background: #f6f9e8;
	color: #666666;
}

.access-cards .card-pill {
	border-radius: 0;
	padding: 0.5rem 1.3rem;
	font-size: 1rem;
	line-height: 1.5;
	border: 1px solid transparent;
	text-align: center;
	margin-top: 4px;
	min-width: max-content;
}

.access-cards table {
	border-collapse: separate !important;
	border-spacing: 4px !important;
}

.access-cards .table-wrap {
	width: 100%;
	overflow-x: auto;
}

@media only screen and (max-width: 600px) {
	.access-cards table {
		min-width: 800px;
	}

	.access-cards .nav-item a,
	.access-cards .nav-item .active {
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
		padding: 0.5rem !important;
	}

	.access-cards .tab-pane {
		width: 100% !important;
		margin-top: 30px;
	}
}

@media only screen and (max-width: 800px) and (min-width: 600px) {
	.access-cards .card-pill {
		height: 65px;
	}

	.access-cards .tab-pane {
		width: 100% !important;
		margin-top: 30px;
		overflow-x: scroll;
	}
}

.access-cards .btn-tab {
	border-radius: 0;
	padding: 0.5rem 1.3rem;
	font-size: 1rem;
	display: inline-block;
	line-height: 1.5;
	border: 1px solid transparent;
	transition: all 0.2s;
}

.access-cards .btn-tab-white {
	background: white !important;
	color: black !important;
}

.access-cards .swiper-button-prev,
.access-cards .swiper-button-next {
	background-color: #fff;
	padding: 30px;
	border-radius: 50em;
}

	.access-cards .swiper-button-prev:after,
	.access-cards .swiper-button-next:after {
		font-size: 25px;
	}

.access-cards .swiper-button-next {
	right: -1%;
}

.access-cards .swiper-button-prev {
	left: -1%;
}

.access-cards .swiper-container-horizontal {
	overflow: inherit;
}

.access-cards .swiper-container {
	width: 100%;
	padding-top: 50px;
	/* padding-bottom: 10px; */
}

.access-cards .swiper-slide {
	width: 33.33%;
	height: 100%;
}

.access-cards .swiper-slide {
	opacity: 0;
}

.access-cards .swiper-slide-prev,
.access-cards .swiper-slide-active,
.access-cards .swiper-slide-next {
	opacity: 1;
}

	.access-cards .swiper-slide-active img {
		overflow: hidden;
		filter: drop-shadow(0px 100px 110px rgba(0, 0, 0, 0.2));
	}

.access-cards .swiper-slide img {
	width: 80%;
	height: 70%;
	object-fit: contain;
	object-position: center;
}

.sticky {
	position: sticky;
	top: 12%;
	width: 100%;
	z-index: 10001;
}

.sticky-nav-active {
	border-bottom: 5px solid #ee7e01 !important;
}




.photos-card {
	color: #444444;
	width: 48%;
	margin-bottom: 3rem;
}

@media (max-width: 600px) {
	.photos-card {
		width: 100%;
	}
}

.photos-card .card-title {
	font-size: 2rem;
}

.photos-card > .card-text {
	font-size: 1rem;
	margin-bottom: 1rem;
}

.photos-card img.card-media {
	height: 370px;
	object-fit: cover;
}

.photos-card .btn {
	display: flex;
	width: fit-content;
	align-items: center;
}

.kpd_koopidtag, #kpd_koopidtag{
	z-index:100001;
}

em {
	font-style: italic;
	font-family: 'EffraCorp-Italic'
}
strong, b {
	font-weight:900
}


/*===================== BACK TO SCHOOL STYLE =========================*/
#back-to-school_pg .inner {
	width: 90%;
	max-width: 1300px;
	margin: 0 auto;
	position: relative;
	z-index: 5;
	padding: 4rem 0;
	gap: 2rem;
}

#back-to-school_pg .hero-section {
	background: url("../images/svgIcons/back-to-school-hero.svg") no-repeat center center;
	background-size: cover;
	position: relative;
	color: white;
	text-align: center;
	background-color: #014086;
}

	#back-to-school_pg .hero-section .inner {
		padding: 0;
	}

#back-to-school_pg .hero-inner {
	min-height: 800px;
}

#back-to-school_pg .hero-section h1.title {
	font-size: 3rem;
}

#back-to-school_pg .hero-section .sub-title {
	font-size: 1.25rem;
}

#back-to-school_pg .hero-section .tag {
	display: flex;
	gap: 0.7rem;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 0.8rem;
	background: #ffffff40;
}

#back-to-school_pg .hero-section .kids-wrap {
	width: 90%;
	min-height: 450px;
	margin-bottom: -1rem;
	position: relative;
}

	#back-to-school_pg .hero-section .kids-wrap .hero-bg {
		width: 100%;
		object-fit: cover;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	#back-to-school_pg .hero-section .kids-wrap .download-wrapper {
		position: absolute;
		bottom: 0rem;
		left: 50%;
		transform: translateX(-45%);
		width: 385px;
		color: black;
		background: #e2e8ea;
		height: 190px;
		border-radius: 190px 190px 0 0;
		display: flex;
		font-size: 1.125rem;
		justify-content: center;
		align-items: center;
	}

		#back-to-school_pg .hero-section .kids-wrap .download-wrapper p {
			max-width: 175px;
			text-align: center;
			margin: 0 auto;
		}

#back-to-school_pg .hero-section .tag::before {
	content: "";
	background: url("../images/svgIcons/access-icon-white.svg") no-repeat center center;
	width: 20px;
	height: 20px;
	background-size: 100% 100%;
}

.school-section {
	background-color: #f1f1f1;
	position: relative;
	overflow: hidden;
}

	.school-section .pattern {
		position: absolute;
		bottom: -400px;
		z-index: 1;
		right: 0;
	}

	.school-section .text-wrapper {
		width: 100%;
		max-width: 430px;
	}

	.school-section .text-wrapper {
		width: 100%;
		max-width: 430px;
	}

		.school-section .text-wrapper p {
			font-size: 18px;
		}

	.school-section .feature-wrapper {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		max-width: 640px;
	}

		.school-section .feature-wrapper > div,
		.school-section .feature-wrapper .feature-card {
			width: 50%;
			max-height: 320px;
		}

	.school-section .girl-feature {
		position: relative;
		background: var(--personal-brand);
		clip-path: polygon(25% 0%, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 28%);
	}

	.school-section .boy-feature {
		position: relative;
		background: var(--base-color);
		clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 100%, 0% 50%);
	}

	.school-section .girl-feature,
	.school-section .boy-feature {
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}

@media (max-width: 670px) {
	.school-section .feature-wrapper > div,
	.school-section .feature-wrapper .feature-card {
		width: 100%;
		max-height: 320px;
		min-height: 250px;
	}

	#back-to-school_pg .hero-section h1.title {
		font-size: 2rem;
	}

	#back-to-school_pg .hero-section .sub-title {
		font-size: 1rem;
	}

	#back-to-school_pg .hero-section .kids-wrap .download-wrapper {
		transform: translateX(-50%);
		max-width: 90%;
		height: auto;
		padding: 2rem 0;
	}

	#back-to-school_pg .hero-section .kids-wrap {
		min-height: 250px;
	}

		#back-to-school_pg .hero-section .kids-wrap .hero-bg {
			display: none;
		}

	#back-to-school_pg .hero-inner {
		min-height: unset;
	}
}

@media (max-width: 1000px) {
	#back-to-school_pg .hero-section {
		padding-top: 6rem !important;
	}
}

#back-to-school_pg .feature-card {
	background: white;
	padding: 1rem 1.5rem;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #dfdfdf;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1);
	font-size: 1.125rem;
}

	#back-to-school_pg .feature-card > div {
		display: flex;
		gap: 0.8rem;
		justify-content: center;
		align-items: flex-start;
	}

	#back-to-school_pg .feature-card a {
		font-weight: 700;
	}

#back-to-school_pg .features {
	width: 100%;
	max-width: unset;
	padding: 0;
}

	#back-to-school_pg .features .feature-card {
		height: 320px;
		box-shadow: 16px 16px 43px rgba(0, 0, 0, 0.16);
	}

#back-to-school_pg .row > div {
	padding: 1rem;
}

/* Additional Css by Bigsho Starts */

#back-to-school_pg .hero-section2 {
	background: url("../images/back-to-school/bs_banner_bg.png") no-repeat center center;
	background-size: cover;
	position: relative;
	color: black;
}

#back-to-school_pg .inner2 {
	position: relative;
	z-index: 5;
	padding: 4rem;
	/*gap: 2rem;*/
}

#back-to-school_pg .hero-inner2 {
	min-height: 700px;
}

#back-to-school_pg .hero-section2 h1.title {
	font-size: 3rem;
	font-family: EffraCorp-Light;
}

#back-to-school_pg .hero-section2 .sub-title {
	font-size: 1.25rem;
}



#back-to-school_pg .hero-section2 .kids-wrap {
	width: 90%;
	min-height: 450px;
	margin-bottom: -1rem;
	position: relative;
	margin-top: 2rem;
}

	#back-to-school_pg .hero-section2 .kids-wrap .hero-bg {
		width: 100%;
		object-fit: cover;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	#back-to-school_pg .hero-section2 .kids-wrap .download-wrapper2 {
		position: relative;
		color: black;
		background: transparent;
		height: auto;
		font-size: 1.125rem;
		justify-content: center;
		align-items: center;
	}

		#back-to-school_pg .hero-section2 .kids-wrap .download-wrapper2 p {
			margin: 0 auto;
		}

.mytag ul {
	padding: 0px;
	text-align: center;
	margin-top: -40px;
}

	.mytag ul li {
		display: inline-block;
		margin-right: 30px;
		text-align: center;
		line-height: 30px;
	}

		.mytag ul li:before {
			display: inline-block;
			content: "";
			width: 14px;
			height: 25px;
			background: url("../images/back-to-school/bs-pen.png");
			vertical-align: middle;
			margin-right: 5px;
		}




/****** Additional Css by Bigsho Ends ******/


/*======================= BANCASSURANCE PAGE ====================== */
#bancassurance-pg .inner {
	margin-left: auto;
	margin-right: auto;
}

.bancassurance-header {
	width: 100vw;
	margin-bottom: 3rem;
}

	.bancassurance-header .section {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
	}

		.bancassurance-header .section .header-top {
			display: flex;
			width: 100vw;
			flex-basis: 50%;
			margin: 3rem 0;
		}

.header-bar {
	position: absolute;
}

.bancassurance-header .section .header-top .heading-text {
	flex-basis: 40%;
	margin: 5rem 0 0 12rem;
}

	.bancassurance-header .section .header-top .heading-text h2 {
		font-style: normal;
		font-weight: 400;
		font-size: 50px;
		line-height: 120.7%;
	}

		.bancassurance-header .section .header-top .heading-text h2 br:first-child {
			display: none;
		}

.heading-text h2 span {
	font-weight: 700;
	font-size: 45px;
	line-height: 66.39px;
	color: #ee7e01;
	text-transform: uppercase;
}

.bancassurance-header .section .header-top .heading-text p {
	font-weight: 500;
}

	.bancassurance-header .section .header-top .heading-text p img {
		vertical-align: middle;
		margin-right: 0.3rem;
		width: 20px;
	}

.heading-image {
	flex-basis: 49%;
	/* padding: 5rem 5rem 0 0; */
}

	.heading-image img {
		width: 450px;
		position: absolute;
		top: 1%;
		right: 10%;
	}

.bancassurance-header .section .header-bottom {
	padding: 3rem 5rem;
	display: flex;
	align-items: center;
	align-self: flex-end;
	width: 100%;
	margin: 0 auto;
	bottom: 0;
	text-align: left;
	background: #057a82;
	color: #ffffff;
	z-index: 100;
	position: relative;
	background-position-x: left;
	background-repeat: no-repeat;
	background-size: 720px;
}

	.bancassurance-header .section .header-bottom .text {
		height: 100%;
		width: 60%;
	}

		.bancassurance-header .section .header-bottom .text h2 {
			font-size: 40px;
			font-weight: 500;
			text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		}

		.bancassurance-header .section .header-bottom .text p {
			font-style: normal;
			font-weight: 300;
			font-size: 15px;
			line-height: 157.19%;
			margin-top: 1rem;
		}

	.bancassurance-header .section .header-bottom img {
		position: absolute;
		width: 500px;
		right: 0;
	}

/* CORONATION INSURANCE */
/* #coronation-insurance{
  height: 100vh;
} */
#coronation-insurance {
	background-image: url(../../content/images/bancassurance/bg-coronation-help.svg);
	background-repeat: no-repeat;
	background-size: 150px;
	background-position-y: bottom;
}

.section-body {
	padding: 4rem;
	display: flex;
	flex-direction: column;
}

	.section-body .heading {
		width: 80vw;
		margin: auto;
		margin-bottom: 3rem;
		display: flex;
		justify-content: space-between;
	}

		.section-body .heading h3 {
			font-style: normal;
			font-weight: 700;
			font-size: 48px;
			line-height: 100.2%;
			flex-basis: 10%;
		}

		.section-body .heading p {
			flex-basis: 50%;
			font-style: normal;
			font-weight: 500;
			font-size: 16px;
			line-height: 157.19%;
		}

	.section-body .boxes {
		/*width: 60%;
		 align-self: flex-end; */
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
		flex-wrap: wrap;
	}

		.section-body .boxes .box p {
			padding: 0px !important;
			flex-basis: 80%;
		}

		.section-body .boxes .box {
			padding: 1rem;
			min-height: 10rem;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: left;
			color: #fff;
			font-weight: 400;
		}

			.section-body .boxes .box span {
				font-weight: 700;
			}

		.section-body .boxes .box-1 {
			background: #014086;
		}

		.section-body .boxes .box-2 {
			background: #ed782a;
		}

		.section-body .boxes .box-3 {
			background: #a4c618;
		}

		.section-body .boxes .box-4 {
			background: #b8061f;
		}

/* CORONATION HELP */
#coronation-help {
	background: #ee7e01;
}

.section-help {
	padding: 4rem 0;
	width: 80%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

	.section-help .heading {
		margin-bottom: 2rem;
		display: block;
		justify-content: space-between;
		color: white;
		text-align:center
	}

		.section-help .heading h3 {
			font-style: normal;
			font-weight: 700;
			font-size: 48px;
			line-height: 100.2%;
			flex-basis: 10%;
			margin-bottom:10px
			/* margin-left: 8rem; */
		}

		.section-help .heading p {
			flex-basis: 50%;
			font-style: normal;
			font-weight: 500;
			font-size: 16px;
			line-height: 157.19%;
			text-wrap:normal
			
		}

	.section-help .cards {
		margin-top: 2rem;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1.5rem;
		align-items: flex-start;
		flex-wrap: wrap;
	}

		.section-help .cards .card {
			padding: 2rem 2rem;
			width: 100%;
			min-height: 340px;
			display: flex;
			justify-content: flex-start;
			text-align: center;
			color: #000;
			font-weight: 400;
			border-radius: 0;
			text-align: left;
			margin-bottom: 1rem;
		}

			.section-help .cards .card h4 {
				font-weight: 700;
				font-size: 22px;
				margin-top: 0.5rem;
			}

			.section-help .cards .card p {
				font-weight: 400;
				line-height: 157.19%;
				font-size: 15px;
			}

			.section-help .cards .card img {
				align-self: center;
				width: 100%;
				object-fit: cover;
				height: 50%;
				min-height: 170px;
				clip-path: polygon(25% 0%, 100% 0, 100% 50%, 100% 100%, 0 100%, 0 23%);
			}

		.section-help .cards .card-6 img {
			height: 40%;
		}

.help-footer-text {
	font-weight: 400;
	font-size: 18px;
	line-height: 157.19%;
	color: #fff;
}

	.help-footer-text span {
		font-weight: bold;
	}

/* INTEREST FORM */
#interest-form {
	padding: 4rem 0;
	background-image: url("../../content/images/bancassurance/form-bg.svg");
	background-repeat: no-repeat;
	background-position-x: right;
	background-position-y: bottom;
}

.interest-form {
	width: 80%;
	margin: 0 auto;
}

	.interest-form h3 {
		font-weight: 500;
		font-size: 48px;
		line-height: 100.2%;
	}

	.interest-form p {
		font-weight: 400;
		font-size: 15px;
		margin-bottom: 2rem;
	}

	.interest-form form {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		margin-bottom: 3rem;
	}

		.interest-form form input, .interest-form form custom-select,  {
			background: #e9e9e9;
			height: 3rem;
			padding-left: 2rem;
			border: none;
			outline: none;
		}

			.interest-form form input::placeholder, interest-form > form custom-select::placeholder {
				font-weight: 200;
				color: #000;
				font-size: 14px;
			}

		.interest-form form .btn input[type=button], input[type=submit], input[type=reset] {
			border: none;
			outline: none;
			background: #ed782a !important;
			color: #fff;
			max-width:12rem;
			padding:10px 15px;
			margin-top: 1rem;
		}

/* FIND OUT MORE SECTION */
#find-out-more {
	background: #a4c618;
	color: #fff;
	padding: 4rem 0;
	background-image: url("../../content/images/bancassurance/telephone.svg");
	background-repeat: no-repeat;
	background-position-x: right;
}

.find-out-more {
	width: 80%;
	margin: 0 auto;
}

	.find-out-more h2 {
		font-weight: 400;
		font-size: 64px;
		line-height: 157.19%;
		margin-bottom: 1rem;
	}

	.find-out-more p {
		font-weight: 300;
		font-size: 18px;
		line-height: 157.19%;
		width: 40%;
		text-align: left;
	}

/* MEDIA QUERY */
@media (max-width: 800px) {
	.bancassurance-header {
		min-height: 100%;
	}

		.bancassurance-header .section .header-top {
			display: flex;
			flex-direction: column;
			flex-basis: 50%;
			width: 90%;
			margin-bottom: -3rem;
		}

	.heading-image {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 3rem;
	}

		.heading-image img {
			margin-left: 4rem;
			width: 320px;
			position: initial;
		}

	.bancassurance-header .section .header-top .heading-text {
		flex-basis: 100%;
		text-align: center;
		margin: 0;
		margin: 10rem 0rem 0 2rem;
	}

		.bancassurance-header .section .header-top .heading-text h2 {
			font-size: 30px;
			font-weight: bold;
		}

			.bancassurance-header .section .header-top .heading-text h2 span {
				font-size: 35px;
			}

			.bancassurance-header .section .header-top .heading-text h2 br:first-child {
				display: flex;
			}

	.bancassurance-header .section .header-bottom {
		width: 90%;
		margin: 0 auto;
	}

	.bancassurance-header .section .header-bottom {
		background-repeat: repeat-y;
		background-position-x: right;
		background-size: 300px;
		padding: 4rem 2rem 10rem 2rem;
	}

		.bancassurance-header .section .header-bottom .text {
			width: 100%;
			font-size: 50%;
		}

	/* CORONATION ASSURANCE */
	.section-body {
		width: 90%;
		margin: 0 auto;
		padding: 4rem 0;
		text-align: center;
		background-image: none;
	}

		.section-body .heading {
			flex-direction: column;
		}

			.section-body .heading h3 {
				margin-left: 0;
				margin-bottom: 1rem;
				font-size: 24px;
			}

			.section-body .heading p {
				margin-bottom: 1rem;
				margin-right: 0;
				font-size: 14px;
			}

		.section-body .boxes {
			gap: 0;
			grid-template-columns: 1fr;
			width: 100%;
			margin: 0 auto;
		}

			.section-body .boxes .box {
				width: 100%;
				padding: 1rem 4rem;
			}

	/* CORONATION HELP */
	.section-help {
		width: 90%;
		margin: 0 auto;
	}

		.section-help .heading {
			flex-direction: column;
			text-align: center;
		}

			.section-help .heading h3 {
				margin-bottom: 1rem;
				font-size: 24px;
			}

			.section-help .heading p {
				margin-bottom: 1rem;
				margin-right: 0;
				font-size: 14px;
			}

		.section-help .cards {
			margin: 0 auto;
			grid-template-columns: 1fr 1fr;
		}

			.section-help .cards .card {
				width: 100%;
				text-align: left;
				gap: 0.3rem;
			}

				.section-help .cards .card p {
					width: 100%;
					text-align: left;
					margin-top: 0.2rem;
				}

	.help-footer-text {
		margin-top: 2rem;
	}

	/* INTEREST FORM */
	#interest-form {
		padding: 3rem 0;
		background-image: none;
	}

	.interest-form {
		width: 90%;
	}

		.interest-form form .btn button, input {
			width: 100%;
		}

		.interest-form h3,
		p {
			text-align: center;
			margin: 0.9rem 0;
		}

	/* FIND OUT MORE */
	#find-out-more {
		font-size: 50%;
		background-image: url("../../content/images/bancassurance/telephone-mobile.svg");
		background-size: auto;
		padding: 2rem 0;
		background-position: right bottom;
	}

	.find-out-more {
		width: 90%;
	}

		.find-out-more h2 {
			font-size: 32px;
		}

		.find-out-more p {
			font-size: 14px;
			width: 80%;
			margin-bottom: 15rem;
		}
}

@media (max-width: 1000px) {
	.section-help .cards {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 500px) {
	.section-help .cards {
		grid-template-columns: 1fr;
		gap: 0;
		row-gap: 0;
	}
}



/*======================= FUND-AND-WIN PAGE ====================== */
#fund-and-win {
	background: #a4c618;
	/* height: 100vh; */
	position: relative;
}

	#fund-and-win .header-img {
		position: absolute;
	}

.fund-and-win {
	width: 90%;
	max-width: 1500px;
	margin: 0 auto;
	padding: 13rem 0;
	/* margin-bottom: 4rem; */
	color: #fff;
	display: flex;
	background-image: url("../images/fundandwin/FWD-header-img.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: right;
}

	.fund-and-win .image {
		display: none;
	}

	.fund-and-win .text {
		margin-left: 3rem;
		width: 90%;
		max-width: 580px;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		/* font-size: 20px; */
	}

		.fund-and-win .text p {
			font-weight: 400;
			font-size: 18px;
			line-height: 150%;
		}

		.fund-and-win .text h1 {
			font-weight: 500;
			font-size: 3.375rem;
			line-height: 1;
			/* margin: 0.5rem 0; */
		}

		.fund-and-win .text .white-button {
			width: fit-content;
			color: #A4C618;
		}

		.fund-and-win .text h1 span {
			font-size: 4rem;
			color: #EE7E01;
			font-weight: 700;
		}

	.fund-and-win .image {
		flex-basis: 59%;
	}

		.fund-and-win .image img {
			width: 100%;
		}

/* CASH PRIZE */
.cash-prize-cards {
	/* transform: translateY(-7rem); */
	width: 85%;
	max-width: 1300px;
	margin: 8rem auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 0px;
	grid-row-gap: 0px;
	gap: 1rem;
}

.cash-prize-card {
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.5rem;
	padding-top: 2rem;
	padding-bottom: 20%;
	gap: 0.5rem;
	flex: 1;
	height: auto;
}

	.cash-prize-card h4 {
		font-size: 25px !important;
		font-weight: 700;
		line-height: 100%;
		margin-bottom: .5rem;
	}

	.cash-prize-card p {
		font-size: 1rem;
		font-weight: 400;
		line-height: 150%;
	}

.cash-prize-cards .card-1 {
	background: #EE7E01;
}

.cash-prize-cards .card-2 {
	background: #014086;
	grid-column: span 2;
}

.cash-prize-cards .card-3 {
	background: #0F2331;
}

.cash-prize-cards .card-4 {
	background: #B8061F;
}

.cash-prize-cards .card-5 {
	background: #A4C618;
}

.cash-prize-card .support {
	width: 38px;
}

.cash-prize-cards .cash-prize-card > div {
	border: none !important;
	margin-top: 1rem;
}

.cash-prize-card h4 {
	font-weight: 500;
	font-size: 20px;
	line-height: 160%;
}

.cash-prize-card p {
	font-weight: 400;
	font-size: 15px;
	line-height: 160%;
	text-align: left;
	margin-top: 0;
}

	.cash-prize-card p:last-child {
		justify-self: flex-end;
	}

.cash-prize-card a {
	font-size: 12px;
	text-decoration: underline;
	margin-top: 0.5rem;
}

	.cash-prize-card a img {
		width: 15px;
		height: 15px;
		vertical-align: middle;
		margin-left: 2px;
	}

/* MEDIA QUERY FOR THE PRIZE BOXES */
@media (max-width: 800px) {
	.cash-prize-cards {
		display: flex;
		flex-direction: column;
		gap: .5rem;
		width: 90%;
		margin: 4rem auto;
		flex-direction: column;
	}

	.cash-prize-card {
		min-width: 300px;
		margin: 0;
		text-align: left;
	}
}

/* INTEREST-FORM */
#fundandwin-interest-form {
	background-color: #f1f1f1;
	padding: 5% 0;
	margin-bottom: 5rem;
	/* background-image: url('../content/images/fundandwin/interest-form-bg.png'); */
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: contain;
}

.fundandwin-interest-form {
	width: 90%;
	margin: 0 auto;
}

	.fundandwin-interest-form h3 {
		font-size: 3rem;
		line-height: 100%;
		font-weight: 400;
		color: #000000;
		margin: 0.5rem 0;
	}

	.fundandwin-interest-form p {
		font-size: 1rem;
		line-height: 100%;
		font-weight: 400;
		color: #000000;
		margin-bottom: 3rem;
	}

	.fundandwin-interest-form form input, .fundandwin-interest-form form .custom-select, .fundandwin-interest-form form .form-control {
		outline: none;
		border: none !important;
		background: #ffffff;
		padding: 1.7rem 2rem;
		width: 100%;
		margin: 8px 0px;
		color: #000000;
	}



		.fundandwin-interest-form .form input::placeholder, .fundandwin-interest-form form .custom-select::placeholder, .fundandwin-interest-form form .form-control::placeholder {
			font-size: 14px;
			line-height: 100%;
			font-weight: 400;
			color: #000000 !important;

		}


	/*.fundandwin-interest-form > form .select-selected, editing-form-control-nested-control .select-selected {

		color: #000000 !important
	}

	.fundandwin-interest-form form .btn input[type=button], input[type=submit], input[type=reset] {
		border: none;
		outline: none;
		background: #ed782a !important;
		color: #fff !important;
		max-width: 12rem;
		padding: 10px 15px !important;
		margin-top: 1rem;
	}


 .interest-form-accordion {
  background: #F7F7F7;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
}

.interest-form-accordion .header {
  border-bottom: 1px  #AFAFAF;
  display: flex;
  justify-content: space-between;
  padding: 1rem 2rem;
  align-items: center;

}

.interest-form-accordion p {
  margin: 0;
  font-size: 14px;
}

.interest-form-accordion .body {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #AFAFAF;
}

.interest-form-accordion .body p {
  cursor: pointer;
  padding: .5rem 2rem;
}

.interest-form-accordion .body p:first-child {
  margin-top: 1rem;
}

.interest-form-accordion .body p:last-child {
  margin-bottom: 1rem;
}

.interest-form-accordion .body p:hover {
  background-color: #ffffff;
} */


/* FUND AND WIN WINNERS */
#winners {
	background-color: #014086;
	padding: 4rem 0 0 0;
	background-image: url(../images/fundandwin/winners-bg.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: 440px;
	padding-bottom: 1rem;
}

.winners {
	width: 80%;
	margin: 0 auto;
	color: #fff;
}

	.winners h2 {
		font-weight: 400;
		font-size: 30px;
		line-height: 94.19%;
	}

	.winners hr {
		height: 5px;
		background: #fff;
		margin: 3rem 0;
	}

	.winners .cards {
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 0.3rem;
		row-gap: 0.8rem;
	}

	.winners .card {
		/* width: 210px; */
		height: 275px;
		padding: 1.5rem;
		display: flex;
		flex-direction: column;
		background: #f9f9f9;
		position: relative;
	}

		.winners .card h4 {
			font-weight: 400;
			font-size: 20px;
			line-height: 130%;
			color: #014086;
		}

		.winners .card p {
			font-weight: 400;
			font-size: 16px;
			line-height: 94.19%;
			color: #000000;
			margin-top: 0.5rem;
		}

			.winners .card p img {
				width: 12px;
				height: 12px;
				margin: 0;
			}

		.winners .card img {
			margin-top: 2.5rem;
			flex-basis: 50%;
			width: 100px;
		}

		.winners .card .bar {
			height: 8px;
			background: #a4c519;
			width: 100.5%;
			position: absolute;
			bottom: -1px;
			left: -1px;
		}

	.winners .btn {
		align-self: center;
		margin: 4rem auto;
		display: block;
		width: 10rem;
	}

/* MEDIA QUERY FOR THE WINNERS SECTION */
@media (max-width: 1000px) {
	.winners .cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 600px) {
	#winners {
		/* padding: 2rem 0 0 0; */
		background-image: none;
	}

	.winners {
		width: 90%;
		margin: 0 auto;
	}

		.winners .cards {
			flex-wrap: nowrap;
			flex-direction: column;
			gap: 0;
			display: block;
		}

		.winners .card {
			flex-direction: row;
			width: 100%;
			height: 5rem;
			padding: 0.5rem 1.5rem;
			background-image: url("../images/fundandwin/winners-mobile.svg");
			background-repeat: no-repeat;
			background-size: 20% 70%;
			justify-content: space-between;
			background-position: center right;
		}

			.winners .card .img {
				display: none;
			}
}

/* MEDIA QUERY FOR HEADER AND STANDALONE */
@media (max-width: 1000px) {
	#fund-and-win .header-img {
		position: unset;
	}

	#fund-and-win {
		overflow-x: hidden;
		/* padding-top: 200px; */
	}

	.fund-and-win {
		width: 100%;
		padding: 0;
		background: none;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

		.fund-and-win .image {
			display: flex;
			margin-top: -8rem;
		}

		.fund-and-win .text {
			margin: 0;
			text-align: center;
			margin: 1rem 0 8rem 0;
			width: 90%;
			font-size: 16px;
		}

			.fund-and-win .text h1 {
				font-size: 2.5rem;
			}

			.fund-and-win .text p {
				font-size: 14px;
			}

			.fund-and-win .text button {
				margin: 0 auto;
			}

	/* STAND ALONE */
	.stand-alone .body .image img {
		margin-top: 3rem;
	}

	#stand-alone {
		margin-bottom: 4rem;
	}

	.stand-alone {
		width: 90%;
		margin: 0rem auto;
	}

		.stand-alone .heading {
			margin: 0;
		}

			.stand-alone .heading h3:br {
				display: flex;
			}

		.stand-alone .body {
			flex-direction: column;
			margin: 0;
			max-width: unset;
		}

			.stand-alone .body .image {
				max-width: unset;
				margin: auto;
			}

				.stand-alone .body .image img {
					max-height: 400px;
				}

				.stand-alone .body .image .desktop {
					display: none;
				}

				.stand-alone .body .image .mobile {
					display: flex;
				}

		.stand-alone .cards {
			flex-wrap: wrap;
			margin-top: -1rem;
		}

			.stand-alone .cards .card {
				width: 100%;
				gap: 1rem;
				min-height: unset;
			}
}

@media (max-width: 700px) {
	.fund-and-win {
		flex-direction: column;
	}
}




/* ===================AUTOCLUB======================== */
.page-desc-span {
	font-weight: 700;
}

/* or 30px */
.plain-content-autoclub p:first-child {
	font-weight: 400;
	font-size: 1.25rem;
	line-height: 150%;
}

.plain-content-autoclub p:first-child span {
		font-weight: bold;
	}

.plain-content-autoclub p:last-child {
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 157.19%;
	margin-top: 1rem;
	color: #ee7e01;
}

.vehicle-finance {
	margin: 1.5rem 0;
	display: flex;
	flex-direction: column;
}

.vehicle-finance h2 {
		font-weight: 500;
		font-size: 4rem;
		line-height: 120.7%;
		color: #444444;
	}

	.vehicle-finance p {
		font-weight: 400;
		font-size: 1.125rem;
		line-height: 157.19%;
		color: #444444;
	}

.get-in-touch {
	color: #000;
}

.car-dealers {
	margin: 5rem 0;
}

	.car-dealers h2 {
		font-weight: 600;
		font-size: 1.5rem;
		line-height: 120.7%;
		color: #444444;
	}

	.car-dealers .click {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #e7e7e7;
		padding: 1rem 2rem;
		font-weight: 400;
		font-size: 1.125rem;
		line-height: 250%;
		color: #444444;
		margin-top: 1rem;
	}

	.car-dealers .options {
		margin-top: 1rem;
		padding: 1rem 2rem;
		background: #e7e7e7;
	}

		.car-dealers .options li {
			font-weight: 400;
			font-size: 1.125rem;
			line-height: 250%;
			color: #444444;
		}

.form-download {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.form-download-click {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 2rem;
}

/* .milage-calculator {
  width: 100%;
  margin: 0 auto;
  text-align: left;
  max-width: 500px; */
/* } */

.milage-calculator p {
	font-weight: 400;
	font-size: 14px;
	line-height: 157.19%;
	margin-bottom: 0.2rem;
}

.milage-calculator h2 {
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 100.2%;
}

.slider-body {
	width: 80%;
	margin: 0 auto;
}

.slide-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.slider-body-p {
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 157.19%;
	color: #444444;
	display: none;
	margin-bottom: 0.8rem;
	/* flex-basis: 20%; */
	/* text-align: right; */
}

.slide-content p {
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 157.19%;
	color: #444444;
	flex-basis: 20%;
	text-align: right;
}

.input-value {
	flex-basis: 20%;
	display: flex;
	flex-direction: column;
	text-align: right;
}

	.input-value input {
		border: none;
		outline: none;
		background: #eeeeee;
		padding: 0.7rem;
		width: 100%;
		max-width: 10rem;
		align-self: flex-end;
		text-align: right;
	}

.input-range {
	display: flex;
	flex-direction: column;
	flex-basis: 50%;
}

.range-value {
	position: absolute;
	bottom: -2rem;
	width: 50%;
	display: flex;
	justify-content: space-between;
}

.slider-value-adjust {
	top: -1.5rem;
	font-size: 14px;
	position: relative;
	width: 8rem;
	border-radius: 0 !important;
}

	.slider-value-adjust::after {
		content: "";
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid #ee7301;
		position: absolute;
		bottom: -0.6rem;
		left: 50%;
		transform: translateX(-50%);
	}

.range {
	-webkit-appearance: none;
	width: 100%;
	height: 12px;
	background: #eeeeee;
	outline: none;
	/* border-radius: 4px; */
	position: relative;
}

	.range::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 30px;
		height: 30px;
		background: #fff;
		cursor: pointer;
		border: 6px solid #ee7e01;
		transform: rotate(-45deg);
		border-radius: 4px;
	}

.loan-interest {
	width: 80%;
	margin: 0 auto;
	margin-top: 3rem;
	background-color: #2f2f2f;
	background-image: url("../images/autoclub/loan-interest-bg.png");
	background-position: right center;
	background-repeat: no-repeat;
	background-size: contain;
	/* height: 15rem; */
	padding: 2rem 0;
}

.table-mobile {
	display: none;
}

.loan-interest .content {
	width: 80%;
	margin: 0 auto;
	color: #fff;
	display: flex;
	flex-direction: column;
}

	.loan-interest .content a {
		width: fit-content;
	}

	.loan-interest .content h6 {
		font-weight: 400;
		font-size: 0.875rem;
		line-height: 157.19%;
		max-width: 60%;
	}

	.loan-interest .content .table-desktop {
		display: flex;
		justify-content: space-between;
		width: 100%;
		border-top: 4px solid #fff;
		margin-top: 1.5rem;
		/* padding: 1rem; */
	}

		.loan-interest .content .table-desktop p {
			color: #fff;
			font-weight: 400;
			font-size: 0.875rem;
			line-height: 176.2%;
			border-left: 4px solid #fff;
			padding: 1rem;
		}

			.loan-interest .content .table-desktop p:first-child {
				border: none;
			}

			.loan-interest .content .table-desktop p span {
				font-weight: 700;
			}

@media (max-width: 800px) {
	.vehicle-finance {
		align-items: center;
		justify-content: center;
		text-align: center;
		gap: 0.5rem;
		margin-top: 5rem;
	}

		.vehicle-finance p {
			order: 3;
			color: #000000;
			font-size: 14px;
		}

		.vehicle-finance h2 {
			font-weight: 500;
			font-size: 1.5rem;
			color: #000000;
		}

	.form-download-click-3 {
		width: 60%;
		margin: 0 auto;
	}

	.milage-calculator {
		text-align: center;
	}

	.slider-body {
		width: 90%;
		margin: 0 auto;
	}

	.slide-content .input-value {
		display: none;
	}

	.input-range {
		flex-basis: 100%;
		width: 80%;
		margin: 0 auto;
	}

	.range-value {
		width: 100%;
	}

	.slide-content p {
		flex-basis: 30%;
		align-self: flex-end;
		text-align: left;
		display: none;
	}

	.slider-body-p {
		display: flex;
		margin-bottom: 1.5rem;
	}
}

@media (max-width: 900px) {
	.loan-interest {
		background-image: url("../images/autoclub/loan-interest-bg-mobile.svg");
		background-position: right bottom;
		background-repeat: no-repeat;
		background-size: contain;
	}

		.loan-interest .content {
			width: 90%;
			margin: 0 auto;
		}

			.loan-interest .content a {
				align-self: center;
				width: 50%;
				max-width: 240px;
				margin-top: 0.6rem;
			}

			.loan-interest .content .table-desktop {
				display: none;
			}

			.loan-interest .content .table-mobile {
				display: flex;
				flex-direction: column;
				color: #fff;
			}

				.loan-interest .content .table-mobile hr {
					background: #fff;
					height: 4px;
					width: 100%;
				}

				.loan-interest .content .table-mobile p {
					color: #fff;
					padding: 1rem;
					padding-right: 0;
					border-left: 4px solid #fff;
				}

					.loan-interest .content .table-mobile p:first-child {
						border: none;
					}

				.loan-interest .content .table-mobile .upper,
				.loan-interest .content .table-mobile .lower {
					display: flex;
					justify-content: space-between;
				}

				.loan-interest .content .table-mobile .upper {
					border-bottom: 4px solid #fff;
				}

					.loan-interest .content .table-mobile .upper p:first-child {
						flex-basis: 60%;
					}

				.loan-interest .content .table-mobile .lower p:last-child {
					flex-basis: 60%;
				}

				.loan-interest .content .table-mobile .upper p:last-child {
					flex-basis: 40%;
				}

				.loan-interest .content .table-mobile .lower p:first-child {
					flex-basis: 40%;
				}
}


/* =================LATO===================== */

.lato-heading {
	font-weight: 500;
	font-size: 2rem;
	line-height: 150%;
	color: #014086;
}

.orange-color-p-tag {
	font-weight: 500;
	font-size: 1.45rem;
	line-height: 250%;
	color: #ee7e01 !important;
}

.bank-code {
	color: #014086;
	text-decoration: underline;
}

.lato-faq .body .questions .question {
	display: flex;
	align-items: stretch;
}

.FAQs-LATO table {
	border-collapse: separate;
	/* border-collapse: right collapse; */
	width: 100% !important;
	border-spacing: 0px 5px;
}

	.FAQs-LATO table td,
	th {
		border-right: 5px solid #eb7824;
		text-align: left;
		padding: 8px;
	}

	.FAQs-LATO table th {
		background: #9bc002;
		font-weight: 500;
		font-size: 20px;
		line-height: 24px;
		color: #ffffff;
	}

	.FAQs-LATO table td {
		background-color: #edf3d1;
		margin: 12px 12px 12px 12px;
		padding: 12px 12px 12px 12px;
		/* border-top: 1px solid red; */
		color: #555555;
		font-size: 14px;
		padding-left: 10px;
	}

		.FAQs-LATO table td:first-child {
			padding-left: 1rem;
			/* border-spacing: 20px; */
		}

		.FAQs-LATO table th:last-child,
		.FAQs-LATO table td:last-child {
			border-right: none;
		}

/* =================easy-buy-finance-scheme============================ */
/* .easy-buy-finance-title-banner-overlay {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      rgba(0, 0, 0, 0.44) 0%,
      rgba(0, 0, 0, 0) 54.77%),
    url("../images/easy-buy-finance-scheme/header-img.png"),
    url("../images/easy-buy-finance-scheme/header-img.png"), #e6e6e6;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 0;
} */

.eazy-buy-finance-orange-color {
	font-weight: 500;
	font-size: 1rem;
	line-height: 180%;
	color: #ee7e01;
}

.offers-body {
	display: flex;
	width: 90%;
	margin: 0 auto;
	justify-content: space-between;
	align-items: center;
	padding: 2rem 0;
}

.offer-body-2 {
	width: 95%;
	margin: 0 auto;
}

.offers-body .image {
	width: 48%;
}

.offers-body .text {
	width: 48%;
}

	.offers-body .text h2 {
		font-weight: 700;
		font-size: 1.5rem;
		line-height: 29px;
		color: #eb7824;
		margin-bottom: 0.7rem;
	}

	.offers-body .text li {
		margin: 0.3rem 0;
		font-weight: bold;
	}

.offers-body .image img {
	width: 100%;
}

@media (max-width: 800px) {
	.offers-body {
		flex-direction: column;
		align-items: center;
		width: 95%;
		margin: 0 auto;
	}

		.offers-body .text,
		.offers-body .image {
			width: 100%;
		}
}


/* ===================================VALENTINE PROMO===================================== */
/* #valentine-promo {
  max-width: 1500px;
  margin: 0 auto;
} */

.valentine-promo-header {
	height: 100vh;
	/* width: 80%; */
	max-height: 850px;
	margin: 0 auto;
	background-image: url("../images/valentine-promo/header-bgd-img.svg");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

	.valentine-promo-header img {
		width: 100%;
		height: 830px;
	}

	.valentine-promo-header .mobile {
		display: none;
	}

#love-things {
	background: #8e0006;
}

.love-things {
	display: flex;
	flex-direction: column;
	color: #fff;
	align-items: center;
}

	.love-things .heading {
		margin-top: 5rem;
		text-align: center;
		width: 500px;
	}

		.love-things .heading h2 {
			font-weight: 500;
			font-size: 3.5rem;
			line-height: 120.7%;
		}

		.love-things .heading p {
			font-weight: 400;
			font-size: 1.125rem;
			line-height: 157.19%;
		}

	.love-things .body {
		display: flex;
		max-width: 100%;
		justify-content: space-between;
	}

		.love-things .body .image {
			flex-basis: 60%;
		}

			.love-things .body .image img {
				width: 100%;
				margin-bottom: -0.4rem;
			}

		.love-things .body .text {
			flex-basis: 40%;
			justify-self: flex-start;
			align-self: center;
			display: flex;
			flex-direction: column;
			gap: 1.5rem;
			width: 90%;
			max-width: 450px;
			margin-right: 10%;
		}

			.love-things .body .text h3 {
				font-weight: 400;
				font-size: 1.5rem;
				line-height: 157.19%;
			}

			.love-things .body .text p {
				font-weight: 400;
				font-style: normal;
				font-size: 1rem;
				line-height: 157.19%;
			}

			.love-things .body .text a {
				font-weight: 400;
				font-style: normal;
				font-size: 1rem;
				line-height: 157.19%;
			}

#valentine-promo-cards {
	padding: 7rem 0;
}

.valentine-promo-cards {
	width: 85%;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	row-gap: 1rem;
}

	.valentine-promo-cards .valentine-promo-card {
		width: 90%;
		max-width: 350px; 
		min-height: 420px;
		display: flex;
		flex-direction: column;
		position: relative;
		padding: 1.5rem 0;
	}

		.valentine-promo-cards .valentine-promo-card img {
			position: absolute;
			right: 0;
			bottom: 0;
		}

	.valentine-promo-cards .promo-card-1 {
		background: #ee7e01;
	}

	.valentine-promo-cards .promo-card-2 {
		background: #057a82;
	}

	.valentine-promo-cards .promo-card-3 {
		background: #a4c618;
	}

	.valentine-promo-cards .promo-card-4 {
		background: #0f2331;
	}

	.valentine-promo-cards .promo-card-5 {
		background: #b8061f;
	}

	.valentine-promo-cards .promo-card-6 {
		background: #014086;
	}

	.valentine-promo-cards .valentine-promo-card .card-content {
		width: 90%;
		margin: 0 auto;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		color: #fff;
		z-index: 1000;
	}

		.valentine-promo-cards .valentine-promo-card .card-content a {
			width: 90%;
			max-width: 200px;
			font-weight: 400;
			font-size: 1rem;
			line-height: 150%;
		}

.card-content h3 {
	font-weight: 500;
	font-size: 1.5rem;
	line-height: 157.19%;
}

.card-content p {
	font-weight: 400;
	font-size: 1rem;
	line-height: 150%;
}

#emerging-business {
	background: #a4c618;
}

.emerging-business {
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
}

	.emerging-business .text {
		flex-basis: 30%;
		width: 90%;
		max-width: 450px;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		color: #fff;
		align-self: center;
	}

		.emerging-business .text h3 {
			font-weight: 500;
			font-size: 1.5rem;
			line-height: 157.19%;
		}

		.emerging-business .text p {
			font-weight: 400;
			font-size: 1em;
			line-height: 157.19%;
		}

		.emerging-business .text a {
			width: fit-content;
			/* max-width: 280px; */
		}

	.emerging-business .image {
		flex-basis: 50%;
		margin-bottom: -0.5rem;
	}

		.emerging-business .image img {
			width: 100%;
		}

/* MEDIA QUERY - MAX WIDTH 480PX */
@media (max-width: 480px) {
	.love-things .heading {
		width: 300px;
	}

	.love-things .body .text {
		margin: 0;
	}

	.love-things .heading h2 {
		font-size: 1.5rem;
	}

	.love-things .heading p {
		font-size: 0.8rem;
	}

	.love-things .body .text p {
		font-size: 0.8rem;
	}

	.love-things .body .text a {
		font-size: 0.8rem;
	}
}

/* MEDIA QUERY - MAX WIDTH 800PX */
@media (max-width: 800px) {
	.valentine-promo-header {
		width: 100%;
		height: 60vh;
		margin: 0 auto;
	}

	.love-things .body {
		width: 100%;
		flex-direction: column-reverse;
		margin-top: 3rem;
		text-align: center;
		justify-content: center;
		gap: 3rem;
	}

		.love-things .body .text {
			margin: 0;
		}

	#valentine-promo-cards {
		padding: 5rem 0;
	}

	.valentine-promo-cards {
		width: 95%;
		margin: 0 auto;
		align-items: center;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		row-gap: 0;
		overflow-wrap: unset;
	}

	.emerging-business {
		width: 100%;
		margin: 0 auto;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-top: 5rem;
	}

		.emerging-business .text {
			margin-bottom: 5rem;
			/* max-width: 350px; */
		}
}


/* =========================XTRAWINS============================ */
.plain-content-xtrawins p {
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 150%;
	color: #555555;
}

	.plain-content-xtrawins p span {
		font-weight: bold;
	}

.plain-content-xtrawins h2 {
	font-weight: 500;
	font-size: 1.75rem;
	line-height: 34px;
	color: #014086;
	margin: 0.5rem 0;
}

.main-content-quote {
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 180%;
	color: #444444;
}

.terms-condition {
	font-weight: bold;
}

.participate-p {
	font-weight: 400;
	font-size: 1.125rem;
	line-height: 150%;
	color: #555555;
}

	.participate-p span {
		font-weight: 700;
	}

.tab-winners.fund-and-win-tab {
	max-width: 1090px;
	margin: auto;
	margin-top: 5rem;
	margin-bottom: 0;
	width: 95%;
}

.tab-winners {
	margin-bottom: 4rem;
}

	.tab-winners h2 {
		font-weight: 500;
		font-size: 1.75rem;
		line-height: 34px;
		color: #014086;
		margin-bottom: 4rem;
	}

.tabs {
	/* margin-bottom: 1.3rem; */
	width: 60%;
	display: flex;
}

.trapezium-border {
	background-color: #ee7e01;
	color: #fff;
	height: 60px;
	display: flex;
	padding: 0 1rem;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-basis: 33%;
	min-width: max-content;
	width: 100%;
	margin-left: -0.5rem;
	font-weight: 500;
	font-size: 14px;
	clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
	border: 1px solid #cccccc;
}

	.trapezium-border button,
	.trapezium-border span {
		background: none;
		border: none;
		width: 100%;
		height: 100%;
		min-width: max-content;
		padding-right: 10%;
		color: inherit;
		outline: none;
	}

	.trapezium-border.active {
		background-color: #fff;
		color: #ee7301;
		border: 1px solid #cccccc;
	}

	.trapezium-border:first-child {
		margin-left: 0;
	}

.tab-winners .body {
	background-color: #fff;
	padding: 1rem 1.5rem;
}

@media (max-width: 600px) {
	.tab-winners .body {
		padding: 1rem 0rem;
	}
}

.tab-winners .body h3 {
	font-weight: 600;
	font-size: 1.625rem;
	line-height: 180%;
	color: #555555;
	border-bottom: 1px solid #ee7301;
	padding-bottom: 1rem;
}

.clip-tabs.white .tab-menu-item:after {
	background: white;
}

.tab-winners .body .list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1rem 5%;
	min-height: 77px;
}

	.tab-winners .body .list p {
		font-weight: 400;
		font-size: 1.125rem;
		line-height: 130%;
		color: #444444;
	}

	.tab-winners .body .list img {
		max-width: 88px;
		max-height: 70px;
		min-height: 80%;
	}

	.tab-winners .body .list:nth-child(even) {
		background: #fff9f4;
	}


/* =============EXPORTERS FORUM=============== */
.exporters-forum-title-banner-overlay:before {
	position: absolute;
	content: "";
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient( 90deg, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0) 54.77% ), url("../content/images/exporters-forum/header-img.png"), url("../images/exporters-forum/header-img.png"), #e6e6e6;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	z-index: 0;
}

.exporters-forum h2 {
	font-weight: 500;
	font-size: 2rem;
	line-height: 150%;
	color: #014086;
}

	.exporters-forum h2 span {
		color: #ee7e01;
	}

.orange-colored-desc {
	color: #ee7e01;
}



/* =========================FRAUD PAGE======================== */

.fraud-page-header {
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/* padding-top: 10rem; */
}

	.fraud-page-header .text {
		flex-basis: 40%;
		max-width: 400px;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

		.fraud-page-header .text h1 {
			font-weight: 700;
			font-size: 4rem;
			line-height: 97.69%;
			color: #b8061f;
		}

		.fraud-page-header .text p {
			font-weight: 400;
			font-size: 1rem;
			line-height: 150%;
			display: flex;
		}

		.fraud-page-header .text .first-p {
			margin: 1rem 0;
		}

		.fraud-page-header .text h3 {
			font-weight: 500;
			font-size: 2.5rem;
			line-height: 150%;
			color: #000000;
			margin-top: 2rem;
		}

	.fraud-page-header .image {
		flex-basis: 55%;
	}

		.fraud-page-header .image img {
			width: 100%;
		}

.youtube-video .upper,
.youtube-video .lower {
	width: 80%;
	margin: 0 auto;
	padding: 3rem 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

	.youtube-video .upper .text {
		flex-basis: 46%;
	}

		.youtube-video .upper .text p {
			font-size: 1rem;
			line-height: 150%;
			color: #000000;
		}

			.youtube-video .upper .text p:first-child,
			.youtube-video .upper .text p span {
				font-weight: 700;
			}

			.youtube-video .upper .text p:last-child {
				margin-top: 1rem;
			}

	.youtube-video .upper .image {
		width: 46%;
		height: 330px;
	}

		.youtube-video .upper .image iframe {
			border-radius: 1rem;
		}

	.youtube-video .lower .image {
		width: 32%;
		height: 240px;
	}

.youtube-video .image iframe {
	width: 100%;
	height: 100%;
	border-radius: 1rem;
	/* min-width: 500px; */
}

#fraud-types {
	margin: 4rem 0;
}

	#fraud-types .body {
		width: 80%;
		margin: 0 auto;
		background: #b8061f;
		color: #fff;
		display: flex;
		flex-direction: column;
		gap: 2rem;
		padding: 4rem 0;
		justify-content: center;
	}

		#fraud-types .body h3 {
			font-weight: 700;
			font-size: 1.125rem;
			line-height: 150%;
			text-align: center;
		}

.fraud-types {
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin: 0 auto;
}

.fraud-type {
	flex-basis: 31%;
	gap: 1.5rem;
}

.fraud-types p {
	font-weight: 500;
	font-size: 18px;
	line-height: 150%;
}

	.fraud-types p span {
		font-weight: 700;
	}

#theft-identiy {
	background-image: url("../images/fraud-page/theft-bgd.png");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	padding-top: 10%;
	padding-right: 10%;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	min-height: 50vh;
}

	#theft-identiy .theft-box {
		background: radial-gradient(97.57% 210.75% at 0.9% 2.98%, #ffffff 0%, rgba(255, 255, 255, 0.64) 100%);
		backdrop-filter: blur(42px);
		padding: 3rem;
		width: 60%;
		max-width: 750px;
		color: #000000;
	}

.theft-box h3 {
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 150%;
	margin: 1rem 0;
}

.theft-box p {
	font-weight: 400;
	font-size: 1rem;
	line-height: 150%;
}

	.theft-box p span {
		font-weight: bold;
	}

.theft-box-mobile {
	display: none;
}

.detections {
	width: 80%;
	margin: 4rem auto;
}

	.detections .detection {
		display: flex;
		justify-content: space-between;
		background: red;
		color: #fff;
		padding: 3rem 3rem;
	}

.detection h3 {
	font-weight: 700;
	font-size: 1.125rem;
	line-height: 157.19%;
	margin-bottom: 1rem;
}

.detection p {
	font-weight: 400;
	font-size: 1rem;
	line-height: 157.19%;
}

.detection .left {
	flex-basis: 45%;
}

.detection .right {
	flex-basis: 45%;
}

.detections .smishing-detect {
	background: #b8061f;
}

.detections .social-engineering {
	background: #ed782a;
}

.detections .identiy-theft {
	background: #2f2f2f;
}

.useful-tips .header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #a4c618;
	padding: 3rem;
}

	.useful-tips .header h2 {
		font-weight: 700;
		font-size: 1.5rem;
		line-height: 150%;
		color: #ffffff;
	}

	.useful-tips .header img {
		transform: rotate(180deg);
		cursor: pointer;
	}

.useful-tips .body {
	padding: 3rem;
	background: #edf3d1;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.detections .active .header img {
	transform: rotate(0deg);
}

.useful-tips .body .body-content {
	display: flex;
	font-size: 1rem;
	line-height: 150%;
	color: #444444;
}

	.useful-tips .body .body-content p span {
		font-weight: bold;
	}

#spotIt-shareIt {
	background: #057a82;
	background-image: url("../images/fraud-page/vibrating\ phone.png");
	background-position: right center;
	background-size: contain;
	background-repeat: no-repeat;
}

.spotIt-shareIt {
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	padding: 10% 0;
}

	.spotIt-shareIt .text {
		flex-basis: 100%;
		max-width: 520px;
	}

		.spotIt-shareIt .text h3 {
			font-weight: 600;
			font-size: 1.5rem;
			line-height: 150%;
		}

		.spotIt-shareIt .text p {
			font-weight: 400;
			font-size: 1rem;
			line-height: 150%;
		}

		.spotIt-shareIt .text div {
			margin-bottom: 1.5rem;
			margin-left: 10px;
		}

		.spotIt-shareIt .text p a {
			font-weight: 700;
		}

		.spotIt-shareIt .text p span {
			color: #ee7e01;
			font-weight: 600;
		}

#notice-section {
	background: #2f2f2f;
	background-image: url("../images/fraud-page/notice-bg.png");
	background-position: right bottom;
	background-size: 600px;
	background-repeat: no-repeat;
}

.notice-section {
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: #fff;
	padding: 10% 0;
}

	.notice-section .text {
		flex-basis: 100%;
		max-width: 540px;
	}

		.notice-section .text h3 {
			font-weight: 600;
			font-size: 1.5rem;
			line-height: 150%;
			margin-bottom: 10px;
		}

		.notice-section .text p {
			font-weight: 400;
			font-size: 1rem;
			line-height: 150%;
		}

			.notice-section .text p a {
				font-weight: 700;
			}

			.notice-section .text p span {
				font-weight: 700;
			}

		.notice-section .text .orange-colored {
			color: #ee7e01;
			font-weight: normal;
			padding: 3rem 0;
		}

@media (max-width: 480px) {
	.fraud-page-header .text h1 {
		font-size: 2rem;
	}

	.fraud-page-header .text p {
		font-size: 14px;
	}

	.fraud-page-header .text h3 {
		font-size: 1.5rem;
	}
}

@media (max-width: 840px) {
	.fraud-page-header {
		flex-direction: column;
		text-align: center;
		padding-top: 10rem;
		font-size: 50%;
		width: 90%;
		margin: 0 auto;
	}

		.fraud-page-header .text {
			align-items: flex-start;
			/* gap: 1rem; */
		}

			.fraud-page-header .text h1 {
				align-self: center;
			}

			.fraud-page-header .text h3 {
				align-self: center;
			}

			.fraud-page-header .text p {
				text-align: left;
			}

	.youtube-video .upper,
	.youtube-video .lower {
		width: 90%;
		margin: 0 auto;
		padding: 1.5rem 0;
	}

	.youtube-video .upper {
		gap: 2rem;
		flex-direction: column-reverse;
	}

	.youtube-video .lower {
		flex-direction: column;
		gap: 2rem;
	}

		.youtube-video .upper .image,
		.youtube-video .lower .image {
			width: 100%;
			height: 200px;
		}

	#fraud-types {
		margin: 2rem 0;
	}

		#fraud-types .body {
			width: 100%;
			margin: 0 auto;
		}

	.fraud-types {
		flex-direction: column;
		gap: 3rem;
	}

	.fraud-type p {
		font-size: 14px;
	}

	#theft-identiy {
		background-image: url("../images/fraud-page/identity-theft-bg-mobile.png");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.theft-box-desktop {
		display: none;
	}

	.theft-box-mobile {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		background: #fff;
		padding: 1.5rem;
	}

		.theft-box-mobile h3 {
			text-align: center;
			font-weight: bold;
		}

	.detections {
		width: 100%;
		margin: 0rem auto;
	}

		.detections .detection {
			flex-direction: column;
			gap: 7rem;
			padding: 4rem 2rem;
		}

	.detection h3 {
		margin-bottom: 0.5rem;
		font-size: 1rem;
		margin-bottom: 0.6rem;
	}

	.detection .center {
		text-align: center;
	}

	.detection p {
		font-size: 14px;
	}

	.useful-tips .header {
		flex-direction: column;
		gap: 1.5rem;
		justify-content: center;
		text-align: center;
		padding: 2rem 1.5rem;
	}

		.useful-tips .header h2 {
			font-size: 1rem;
		}

	.useful-tips .body {
		padding: 2rem 1rem;
	}
}

@media (max-width: 900px) {
	#spotIt-shareIt {
		background-position: center top;
		background-image: url("../images/fraud-page/vibrating-phone-mobile.png");
		background-position: center top;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.spotIt-shareIt {
		width: 90%;
		margin: 0 auto;
		/* justify-content: center; */
		align-items: center;
		padding: 0;
	}

		.spotIt-shareIt .text {
			margin: 30rem 0 10rem 0;
		}

			.spotIt-shareIt .text div {
				margin-left: 0;
			}

	#notice-section {
		background-position: center top;
		background-image: url("../images/fraud-page/notice-bgd-mobile.png");
		background-position: center top;
		background-size: contain;
		background-repeat: no-repeat;
	}

	.notice-section {
		width: 90%;
		margin: 0 auto;
		/* justify-content: center; */
		align-items: center;
		padding: 0;
	}

		.notice-section .text {
			margin: 30rem 0 10rem 0;
		}
}

.fr-view img.fr-dib {
	margin: 5px 10px !important;
}


/* XCLUSIVE PLUS */
#xclusive-plus_header {
	background: url("../images/xclusive-plus/header-bg.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.xclusive-plus_header {
	text-align: center;
	color: #fff;
	width: 90%;
	max-width: 611px;
	margin: 0 auto;
}

	.xclusive-plus_header h2 {
		font-size: 4rem;
		line-height: 100%;
	}

	.xclusive-plus_header h1 {
		font-size: 7.3rem;
		line-height: 100%;
		font-weight: lighter;
		margin: 1rem 0;
	}

	.xclusive-plus_header p {
		font-size: 1.125rem;
		line-height: 150%;
		font-weight: 400;
	}

/* XCLUSIVE PLUS BY ACCESS */
.xclusive-plus-by-access {
	transform: translateY(-9rem);
	display: flex;
	flex-direction: column;
	gap: 2rem;
	background: #f6f8f7;
	width: 90%;
	max-width: 1014px;
	margin: 0 auto;
}

	.xclusive-plus-by-access .upper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1.5rem;
		gap: 1rem;
		background: #ffffff;
	}

		.xclusive-plus-by-access .upper .upper-h2 {
			width: 37%;
			display: flex;
			justify-content: flex-end;
		}

			.xclusive-plus-by-access .upper .upper-h2 h2 {
				font-size: 3rem;
				line-height: 50%;
				font-weight: 400;
				color: #003726;
			}

		.xclusive-plus-by-access .upper h2 span {
			font-size: 1.5rem;
			line-height: 0%;
			font-weight: 700;
			color: #ee7e01;
		}

		.xclusive-plus-by-access .upper .right {
			background-color: #f9fbfa;
			padding: 3rem;
			padding-left: 4rem;
			clip-path: polygon(8% 0, 100% 0, 100% 100%, 0% 100%);
			width: 60%;
		}

	.xclusive-plus-by-access .lower {
		background-color: #ffffff;
		display: flex;
		gap: 1rem;
		overflow-x: auto;
	}

		.xclusive-plus-by-access .lower::-webkit-scrollbar-track {
			display: none;
		}

		.xclusive-plus-by-access .lower::-webkit-scrollbar {
			display: none;
		}

		.xclusive-plus-by-access .lower::-webkit-scrollbar-thumb {
			display: none;
		}

		.xclusive-plus-by-access .lower .lower-card {
			display: flex;
			min-width: 327px;
			flex-direction: column;
			gap: 1.5rem;
			padding: 1.5rem;
			border-top: 4px solid #003726;
			background: #f9fbfa;
		}

.lower-card h3 {
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 120%;
	color: #003726;
	max-width: 190px;
}

	.lower-card h3 span {
		color: #ee7e01;
	}

.lower-card p {
	font-size: 1rem;
	font-weight: 400;
	line-height: 150%;
	color: #4c5a56;
	max-width: 175px;
}

.lower-card a {
	font-size: 1rem;
	font-weight: 700;
	line-height: 120%;
	color: #003726;
}

/* E-BRONCHURE */
#e-bronchure {
	min-height: 100vh;
	background-color: #0a1814;
	padding: 5% 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.e-bronchure {
	width: 80%;
	margin: 0 auto;
	color: #ffffff;
	display: flex;
	margin-bottom: 3rem;
}

.mobile-bronchures {
	display: none;
}

.e-bronchure .left,
.e-bronchure .right {
	width: 50%;
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.e-bronchure .right {
	margin-top: 5rem;
}

.e-bronchure .card {
	background: #18201e;
	padding: 10%;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 95%;
	margin: 0 auto;
}

	.e-bronchure .card h3 {
		font-size: 3.5rem;
		line-height: 100%;
		font-family: "EffraCorp-Regular" !important;
		/* max-width: 390px; */
	}

	.e-bronchure .card p {
		font-family: "EffraCorp-Light" !important;
		font-weight: 400;
		font-size: 1.25rem;
		line-height: 150%;
		/* max-width: 390px; */
	}

	.e-bronchure .card .card-icon {
		width: 150px;
		height: 150px;
		border-radius: 50%;
		background: #0a1814;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 1rem;
	}

/* XCLUSIVE CLUB */
#xclusive-club {
	padding: 5% 0;
	background-image: url("../images/xclusive-plus/access-logo-bg.svg");
	background-position: left center;
	background-repeat: no-repeat;
	background-size: 500px;
}

	#xclusive-club .contact-form {
		width: 90%;
		max-width: 720px;
		margin: 0 auto;
		border-top: 5px solid #ee7e01;
		background-color: #ffffff;
		padding: 2%;
	}

		#xclusive-club .contact-form h2 {
			color: #003726;
			font-size: 2.5rem;
			line-height: 100%;
			font-weight: 400;
			margin-bottom: 2rem;
		}

		#xclusive-club .contact-form p {
			color: #4c5a56;
			font-size: 1rem;
			line-height: 175%;
			font-weight: 400;
			margin: 2rem 0;
		}

.xclusive-club {
	display: flex;
	flex-direction: column;
	color: #ffffff;
	align-items: center;
	justify-content: center;
	height: 540px;
	width: 90%;
	max-width: 1000px;
	margin: 0 auto;
	margin-top: 7rem;
	background-image: url("../images/xclusive-plus/xclusive-club-bg.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

	.xclusive-club h3 {
		font-size: 3rem;
		line-height: 100%;
		font-weight: 700;
	}

	.xclusive-club h1 {
		font-size: 5rem;
		line-height: 100%;
		font-weight: 700;
	}

.xclusive-slant-line {
	position: absolute;
	top: 0;
	left: 0;
}

#xclusive-club .contact-form .form-group select {
	-webkit-appearance: none;
	-moz-appearance: none;
	background: transparent;
	background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='30' viewBox='0 0 24 24' width='30' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position-x: 100%;
	background-position-y: center;
	border-radius: 2px;
	margin-right: 3rem !important;
	padding-right: 3rem !important;
}

.main-footer-xclusive-plus {
	background-color: #003726;
}

.hide {
	display: none;
}

.modal-window {
	position: fixed;
	top: 55%;
	left: 50%;
	max-height: 80vh;
	transform: translate(-50%, -50%);
	width: 40%;
	overflow-y: auto;
	background-color: white;
	padding: 2rem;
	border-radius: 5px;
	box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
	z-index: 1000;
	color: #000;
}

.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.modal-window::-webkit-scrollbar-track {
	background: rgba(249, 133, 55, 0.3);
	width: 7px;
}

.modal-window::-webkit-scrollbar {
	width: 7px;
	background-color: #f5f5f5;
}

.modal-window::-webkit-scrollbar-thumb {
	width: 5px;
	border-radius: 2px;
	box-shadow: inset 0 0 6px #f985374d;
	-webkit-box-shadow: inset 0 0 6px #f985374d;
	background-color: #555;
	background: #003726;
}

.modal-window .list-item li {
	display: flex;
	padding: 10px 0;
}

@media (max-width: 1200px) {
	.e-bronchure .card h3 {
		font-size: 3rem;
	}

	.e-bronchure .card .card-icon {
		width: 120px;
		height: 120px;
	}

		.e-bronchure .card .card-icon img {
			width: 60px;
			height: 60px;
		}
}

@media (max-width: 800px) {
	.xclusive-plus_header h2 {
		font-size: 1.25rem;
	}

	.xclusive-plus_header h1 {
		font-size: 3.5rem;
	}

	.xclusive-plus_header p {
		font-size: 0.875rem;
	}

	.xclusive-plus-by-access .upper {
		flex-direction: column;
		/* gap: 1.5rem; */
	}

		.xclusive-plus-by-access .upper .upper-h2 {
			width: 95%;
			display: flex;
			margin-top: 3rem;
			margin-bottom: 2rem;
			justify-content: flex-start;
		}

		.xclusive-plus-by-access .upper .right {
			background-color: #f9fbfa;
			padding: 1.5rem 1rem;
			/* padding-left: 4rem; */
			clip-path: polygon(0% 0, 100% 0, 100% 100%, 0% 100%);
			width: 95%;
		}

	/* E-BRONCHURE */
	#e-bronchure {
		padding-bottom: 5rem;
	}

	.e-bronchure {
		width: 100%;
		margin: 0 auto;
	}

		.e-bronchure .left,
		.e-bronchure .right {
			display: none;
		}

	.mobile-bronchures {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		margin: 4rem 0;
	}

	.e-bronchure .card {
		width: 90%;
		margin: 0 auto;
	}

		.e-bronchure .card h3 {
			font-size: 2rem;
		}

		.e-bronchure .card p {
			font-size: 1rem;
		}

		.e-bronchure .card .card-icon {
			width: 80px;
			height: 80px;
		}

			.e-bronchure .card .card-icon img {
				width: 40px;
				height: 40px;
			}

	/* XCLUSIVE CLUB */
	#xclusive-club {
		padding: 10% 0;
		background-image: none;
	}

		#xclusive-club .contact-form {
			padding: 5%;
		}

	.xclusive-club {
		height: 433px;
		margin-top: 5rem;
	}

		.xclusive-club h3 {
			font-size: 1.5rem;
			line-height: 100%;
			font-weight: 700;
		}

		.xclusive-club h1 {
			font-size: 2.5rem;
			line-height: 100%;
			font-weight: 700;
		}

	.xclusive-slant-line {
		width: 150px;
	}

	.modal-window {
		width: 80%;
		max-height: 60vh;
		padding: 1rem;
		top: 50%;
	}
}


/*====================== QATAR PAGE===================== */
#qatar_header {
	background: url("../images/qatar/header-bg.png");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	/* min-height: 100vh; */
	color: #fff;
	display: flex;
	align-items: center;
}

.qatar_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 85%;
	margin: 0rem auto 0 auto;
	/* max-width: 1500px; */
}




	.qatar_header .text-area {
		width: 60%;
		max-width: 600px;
		display: flex;
		flex-direction: column;
		/* align-items: center; */
		gap: 2rem;
	}

		.qatar_header .text-area h1 {
			font-weight: bold;
			font-size: 4rem;
			line-height: 150%;
		}

			.qatar_header .text-area h1 span {
				font-size: 90px;
			}

		.qatar_header .text-area p {
			font-weight: 400;
			font-size: 1.125rem;
			line-height: 150%;
		}

		.qatar_header .text-area .header-card {
			background: radial-gradient(#ffffff 0%, rgba(255, 255, 255, 0.6) 100%);
			/* backdrop-filter: blur(20px); */
			color: #222222;
			display: flex;
			flex-direction: column;
			max-width: 407px;
			margin-top: 2rem;
		}

			.qatar_header .text-area .header-card p {
				font-weight: 500;
				line-height: 150%;
				font-size: 1.125rem;
			}

				.qatar_header .text-area .header-card p span {
					color: #ee7e01;
				}

			.qatar_header .text-area .header-card .upper {
				padding: 2rem;
			}

			.qatar_header .text-area .header-card .lower {
				background-color: #EE7E01;
				color: white;
				padding: 1rem 2rem;
			}


	.qatar_header .image {
		width: 50%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
	}

		.qatar_header .image img {
			width: 150%;
			/* height: 100%; */
		}



/* CAMPAIGN FAQS */
#campaign-faqs {
	padding: 5% 0;
}

	#campaign-faqs h2 {
		font-weight: 700;
		font-size: 3rem;
		color: #222222;
		line-height: 100%;
		max-width: 600px;
	}

		#campaign-faqs h2 span {
			color: #F98537;
		}

.campaign-faqs {
	width: 85%;
	margin: 0 auto;
	/* max-width: 1500px; */
}

	.campaign-faqs .body {
		display: flex;
		justify-content: space-between;
	}

	.campaign-faqs .freq-asked-questions {
		/* margin: 0rem 0 4rem 0; */
		width: 70%;
		margin-top: 4rem;
	}

	.campaign-faqs .image {
		width: 25%;
		display: flex;
		flex-direction: column;
		gap: 10rem;
	}

		.campaign-faqs .image .image-1 img,
		.image-2 img {
			width: 100%;
		}



		.campaign-faqs .image .image-1 img {
			width: 100%;
		}

	.campaign-faqs .freq-asked-questions .questions {
		display: flex;
		flex-direction: column;
		gap: 0.7rem;
		/* width: 95%;
  margin: 0 auto; */
	}

		.campaign-faqs .freq-asked-questions .questions .question {
			background: #ffffff;
			box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
			display: flex;
			flex-direction: column;
			align-items: center;
			/* padding: 1rem; */
			cursor: pointer;
		}

		.campaign-faqs .freq-asked-questions .questions .heading {
			display: flex;
			justify-content: space-between;
			width: 100%;
			padding: 2rem;
		}

		.campaign-faqs .freq-asked-questions .questions .question .heading h3 {
			width: 85%;
			max-width: 700px;
			color: #444444;
			font-weight: 500;
			font-size: 1.125rem;
		}

		.campaign-faqs .freq-asked-questions .questions .question .heading .inactive-img {
			display: flex;
		}

		.campaign-faqs .freq-asked-questions .questions .question .heading .active-img {
			display: none;
		}

		/* ACTIVE CLASS */
		.campaign-faqs .freq-asked-questions .questions .active .heading {
			background-color: #EE7E01;
		}

			.campaign-faqs .freq-asked-questions .questions .active .heading h3 {
				font-weight: 500;
				/* font-size: 22px;
  line-height: 27px; */
				color: #ffffff;
				width: 85%;
				max-width: 700px;
			}

			.campaign-faqs .freq-asked-questions .questions .active .heading .inactive-img {
				display: none;
			}

			.campaign-faqs .freq-asked-questions .questions .active .heading .active-img {
				display: flex;
			}

/* accordion content util */
[data-accordion-content] {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.2s ease-in-out;
}

[data-accordion-header] {
	cursor: pointer;
}



/* CARD DESIGNS */

#card-design {
	color: #ffffff;
	background-color: #000000;
	background-image: url('../images/qatar/card-design-bg.png');
	background-position: bottom center;
	background-size: contain;
	background-repeat: no-repeat;
	min-height: 1049px;
	padding: 5% 0;
	text-align: center;
}

.card-design {
	/* max-width: 1500px; */
	margin: 0 auto;
}

	.card-design h2 {
		font-size: 3rem;
		font-weight: 500;
		line-height: 100%;
		margin-top: 2rem;
		margin-bottom: 7rem;
	}

.atm-cards {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
}

.atm-card {
	/* width: fit-content; */
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	/* height: 392px; */
}

	.atm-card img {
		/* width: 100%; */
		max-height: 337px;
	}

	.atm-card h3 {
		font-size: 2rem;
		font-weight: 500;
	}

.atm-cards::-webkit-scrollbar-track {
	display: none;
}

.atm-cards::-webkit-scrollbar {
	display: none;
}

.atm-cards::-webkit-scrollbar-thumb {
	display: none;
}

.card-design .service-swiper-button-prev,
.card-design .service-swiper-button-next {
	width: 100px !important;
	height: 100px;
}

.card-design > .fr-view img {
	position: absolute !important;
	max-width: 100%;
}
/* .card-design .swiper-wrapper{
  display: flex;
align-items: center;
justify-content: center;
} */

.main-footer-qatar {
	background-color: #000000;
}

@media (max-width:800px) {
	.card-design .service-swiper-button-prev,
	.card-design .service-swiper-button-next {
		width: 50px !important;
		height: 50px;
	}

	.qatar_header {
		flex-direction: column-reverse;
		width: 90%;
		margin: 10rem auto 4rem auto;
	}

		.qatar_header .image {
			width: 100%;
			margin: 0 auto;
		}

			.qatar_header .image img {
				width: 100%;
			}

		.qatar_header .text-area {
			width: 100%;
			max-width: 481px;
			text-align: center;
			align-items: center;
			gap: 1rem;
		}

		.qatar_header p {
			font-size: 1rem;
		}

		.qatar_header .text-area h1 {
			font-size: 40px;
		}

			.qatar_header .text-area h1 span {
				font-size: 5rem;
			}

		.qatar_header .text-area .header-card p {
			text-align: left;
			font-size: 1rem;
		}

		.qatar_header .text-area .header-card .upper {
			padding: 1.5rem;
		}

		.qatar_header .text-area .header-card .lower {
			padding: 1rem 1.5rem;
		}

	#campaign-faqs h2 {
		font-size: 2rem;
		max-width: 324px;
		margin-top: 4rem;
	}

	.campaign-faqs {
		width: 90%;
		margin: 0 auto;
		max-width: 1500px;
	}

		.campaign-faqs .body {
			display: flex;
			flex-direction: column;
		}

		.campaign-faqs .freq-asked-questions {
			/* margin: 0rem 0 4rem 0; */
			width: 100%;
			margin-top: 4rem;
		}

		.campaign-faqs .image {
			width: 100%;
			margin: 0 auto;
			display: flex;
			flex-direction: row-reverse;
			align-items: center;
			/* justify-content: space-between; */
		}

			.campaign-faqs .image .image-1,
			.campaign-faqs .image .image-2 {
				flex-basis: 50%;
			}

	#card-design {
		min-height: 653px;
	}

	.card-design h2 {
		font-size: 1.5rem;
		margin-bottom: 5rem;
	}

	.atm-card {
		width: 80%;
		gap: .5rem;
		/* height: max-content; */
		margin: 0 auto;
	}

		/* .atm-card img{
    width: 100%;
    height: 100%;
  } */

		.atm-card h3 {
			font-size: 1rem;
		}
}

/*Vehicle Finance*/
.list-value-prop {
	list-style: disc;
	padding-left: 20px;
}

	.list-value-prop li {
		padding-bottom: 10px;
	}

.vf .fr-view, .vf img.fr-dib {
	margin: 0px !important
}

/****************/
/****************/ 


/*New Title Banner Starts*/


.new-title-banner {
	position: relative;
	margin-bottom: -20px;
}

	.new-title-banner.no-title h1 {
		display: none;
	}

	.new-title-banner.contains-overlay:before {
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background: linear-gradient( 90deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 50% );
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 0;
	}

@media (max-width: 991px) {
	.new-title-banner {
		padding-top: 90px;
	}
}

.new-title-banner h1 {
	position: absolute;
	top: 40%;
	bottom: 0;
	vertical-align: middle;
	font-size: 2.5rem;
	z-index: 1;
}

.new-title-banner .img-fluid {
	width: 100%;
}

.new-slant-line {
	position: absolute;
	top: -20px;
	left: -20px;
	z-index: 0;
}

@media (max-width: 991px) {
	.new-slant-line {
		top: -40px;
		left: -40px;
	}

	.new-title-banner h1 {
		font-size: 1.5rem;
		top: 60%;
	}
}

@media (max-width: 465px) {
	.new-slant-line {
		top: -10px;
		left: -10px;
		width: 40%;
	}
}

/*New Title Banner Ends*/


/**NEFT TRANSACTION CSS**/

.neft-header {
	background-image: url("../images/NEFT/bannerNEFT.png");
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 85vh;
	display: flex;
	align-items: center;
}

	.neft-header .caption {
		font-family: "EffraCorp-Bold";
		font-style: normal;
		font-weight: 400;
		font-size: 67px;
		line-height: 100%;
	}

		.neft-header .caption span {
			display: block;
			font-family: "EffraCorp-Light";
			color: #222222;
		}

		.neft-header .caption p {
			font-family: "EffraCorp-Regular";
			font-size: 1.35rem;
			line-height: 125%;
			color: #222222;
			text-align: left;
		}

@media (max-width: 769px) {
	.neft-header {
		background-position: 80% 0;
	}

		.neft-header .caption {
			font-size: 37px;
			background-color: rgba(255, 255, 255, 0.75);
		}
}

@media (max-width: 1024px) {
	.neft-header {
		background-position: 80% 0;
	}

		.neft-header .caption {
			font-size: 50px;
			margin-top: 200px;
			background-color: rgba(255, 255, 255, 0.35);
			padding: 15px;
		}
}

.banner-slant-line {
	position: absolute;
	width: 10px;
	height: 40vw;
	max-height: 400px;
	min-height: 100px;
	transform: rotate(40deg);
	background: #ee7e01;
	top: -13%;
	left: 0;
	z-index: 99;
}

.multi-colored-line {
	width: 100% !important;
}

.light-gray {
	background-color: #F1F1F1;
}


.seamless-support {
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	height: auto;
	padding: 85px 0 40px;
}

	.seamless-support .neft-article {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 40px;
		background-image: url(../images/neft/seamless-support.png);
		background-repeat: no-repeat;
		width: 1273px;
		height: 224px;
	}

		.seamless-support .neft-article .caption {
			background-color: #ffffff;
			width: 622px;
			height: 143px;
			font-size: 1rem;
			padding: 30px 60px;
			display: flex;
			align-items: center;
			line-height: 150%;
		}

	.seamless-support button {
		border: none;
		position: absolute;
		left: 50px;
		bottom: 0px;
	}

		.seamless-support button.goto-more {
			display: absolute;
			align-items: center;
			width: 50px;
			height: 50px;
			background-color: #9BC002;
			color: #ffffff;
			font-size: 1.25rem;
		}

@media (max-width: 769px) {
	.seamless-support {
		padding: 45px 0 20px;
	}

		.seamless-support article {
			justify-content: center;
			padding: 40px;
			width: 100%;
			height: 250px;
		}
}

.page-down-arrow {
	position: absolute;
	left: 3rem;
	bottom: -1.6rem;
	background: #014086;
	color: #fff;
}

.neft-diamond-accounts {
	padding-top: 40px;
	padding-bottom: 80px;
	display: grid;
	gap: 135px;
	grid-template-columns: 385px auto;
	align-items: flex-start;
}

	.neft-diamond-accounts .message-txt {
		width: auto;
		font-family: "EffraCorp-Regular";
		font-style: normal;
		font-weight: 400;
		font-size: 2rem;
		line-height: 130%;
		padding-left: 70px;
	}

		.neft-diamond-accounts .message-txt p {
			margin-top: 5px;
			font-size: 1.15rem;
			line-height: 1.5;
		}

	.neft-diamond-accounts .photo-grid {
		width: auto;
	}

.access-watermark {
	background-image: url(../images/neft/access.png);
	background-repeat: no-repeat;
	background-position: 20% 215%;
	padding-bottom: 0rem;
	background-color: #eeeeee;
	clip-path: polygon(0 0%, 100% 0, 100% 95%, 0% 100%);
}

.more-overlay {
	position: absolute;
	bottom: 0;
	left: 20px;
	right: 20px;
	border-radius: 0;
	overflow: hidden;
	width: calc(100% - 40px);
	height: 0;
	transition: 0.5s ease;
}


.money-transfer {
	padding: 20px 0 0;
	width: 100%;
	height: 488px;
	background-image: url("../images/neft/money-transfer.png");
	background-repeat: no-repeat;
	background-position: right;
}

	.money-transfer .money-transfer-caption {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

		.money-transfer .money-transfer-caption .transaction {
			padding: 0;
			width: 459px;
			height: 270px;
			margin-top: 100px;
			font-size: 1.15rem;
		}

			.money-transfer .money-transfer-caption .transaction h3 {
				font-family: "EffraCorp-MediumItalic";
				font-weight: 400;
				font-size: 1.5rem;
				line-height: 140%;
				padding-top: 40px;
				padding-bottom: 24px;
			}

			.money-transfer .money-transfer-caption .transaction p {
				font-size: 1.15rem;
			}

@media (max-width: 1024px) {
	.money-transfer {
		background-position: 0;
	}

		.money-transfer .money-transfer-caption .transaction {
			height: 300px;
			padding: 15px;
			margin-top: 100px;
			font-size: 1.15rem;
			background-color: rgba(255, 255, 255, 0.75);
		}
}

@media (min-width: 1200px) {
	.money-transfer {
		padding: 20px 0 0;
		width: 100%;
		height: 488px;
		background-image: url("../images/neft/money-transfer.png");
		background-repeat: no-repeat;
		background-position: 0;
	}
}

@media (max-width: 769px) {
	.money-transfer {
		height: 825px;
		width: 100%;
		background-position: 80% 0;
	}

		.money-transfer .money-transfer-caption {
			margin-top: 450px;
		}

			.money-transfer .money-transfer-caption .transaction {
				width: 459px;
				height: auto;
				padding-top: 20px;
				margin-top: 20px;
				text-align: center;
			}
}

 /* ============= CBD CSR NEW LANDING PAGE STARTS HERE =============== */
 .text-access-blue {
 	color: #1f386d;
 }

 .bg-cream {
 	background: #fff5e4;
 }

 #csr_cbd_pg {
 	width: 100%;
 	height: 100%;
 }

 #csr_cbd_pg .banner-slant-line-new {
 	z-index: 0;
 }

 #csr_cbd_pg .hero-section {
 	background: url("/content/images/cbd-csr/cbd-csr-header.png") no-repeat center center;
 	background-size: cover;
 	position: relative;
 	color: white;
 	text-align: center;
 	min-height: 650px;
 	width: 100%;
 }

 #csr_cbd_pg .hero-section .inner {
 	width: 100%;
 }

 #csr_cbd_pg .hero-section h1.title {
 	font-size: 3rem;
 	line-height: normal;
 }

 #csr_cbd_pg .cbd-globe {
 	width: 700px;
 	height: auto;
 	z-index: 100;
 	position: relative;
 	max-width: 100%;
 	margin-top: -59%;
 	animation: animateGlobe 1.5s infinite alternate;
 }

 @keyframes animateGlobe {
 	from {
 		transform: translateY(0px);
 	}

 	to {
 		transform: translateY(30px);
 	}
 }

 #csr_cbd_pg .about-csr {
 	text-align: center;
 	width: 100vw;
 	background: #fff5e4;
 }

 #csr_cbd_pg .about-csr .content {
 	margin: 0 auto;
 	margin-top: -50px;
 	max-width: 730px;
 }

 #csr_cbd_pg .about-csr {
 	text-align: center;
 	width: 100vw;
 	background: #fff5e4;
 	padding-bottom: 30px;
 }

 #csr_cbd_pg .image-section {
 	background-color: white;
 	position: relative;
 	width: 100%;
 }

 #csr_cbd_pg .csr-past-images {
 	width: 100%;
 	max-width: 1350px;
 	height: auto;
 	margin: 0 auto;
 	margin-top: -60px;
 	opacity: 0;
 	transform: translateY(50px) scale(0.9);
 	transition: opacity 0.5s, transform 0.5s;
 }

 #csr_cbd_pg .csr-past-images.visible {
 	opacity: 1;
 	transform: translateY(0) scale(1);
 }

 #csr_cbd_pg .csr-info {
 	justify-content: space-around;
 	overflow: hidden;
 	margin-top: -5%;
 }

 #csr_cbd_pg .circle-carousel {
 	width: 75vw;
 	height: 75vw;
 	max-width: 800px;
 	max-height: 800px;
 	position: relative;
 	border-radius: 50%;
 	margin: 1rem auto 3rem;
 }

 #csr_cbd_pg .carousel-btns {
 	position: absolute;
 	top: -18%;
 	right: 0;
 	gap: 1rem;
 	z-index: 100;
 }

 #csr_cbd_pg .circle-carousel-text-section {
 	margin: auto;
 	min-height: 400px;
 }

 #csr_cbd_pg .carousel-content {
 	opacity: 0;
 	position: absolute;
 	transform: translateY(-100%);
 	transition: opacity 0.3s ease, transform 0.5s ease;
 	top: 50%;
 }

 #csr_cbd_pg .carousel-content b {
 	font-weight: 600;
 	margin-bottom: 0.5rem;
 }

 #csr_cbd_pg .carousel-content ul {
 	list-style-type: disc;
 	margin-left: 1.25rem;
 }

 #csr_cbd_pg .carousel-content.active {
 	opacity: 1;
 	transform: translateY(-50%);
 	transition: opacity 0.3s ease, transform 0.5s ease;
 }

 #csr_cbd_pg .circle-indicator {
 	width: 100%;
 	height: 100%;
 	transition: all 0.5s ease-out;
 	position: absolute;
 	transform: rotate(-10deg);
 	object-fit: contain;
 }

 #csr_cbd_pg .inner-circle {
 	width: 60%;
 	height: 60%;
 	position: absolute;
 	z-index: 5;
 	background-color: #ee7e01;
 	border-radius: 50%;
 	display: flex;
 	justify-content: flex-end;
 	align-items: center;
 	top: 50%;
 	left: 48%;
 	transform: translate(-50%, -50%);
 }

 #csr_cbd_pg .nigeria-map {
 	width: 60%;
 	height: 60%;
 	transform: translate(-30px);
 	position: relative;
 }

 #csr_cbd_pg .nigeria-map-img {
 	width: 100%;
 	height: 100%;
 }

 #csr_cbd_pg .nigeria-map .info-location {
 	position: absolute;
 	top: 25%;
 	left: 45%;
 	z-index: 10;
 	width: 15%;
 	height: 15%;
 	transform: translate(-250%, 180%);
 	transition: transform 0.3s ease;
 }

 #csr_cbd_pg .swiper-button-next::after,
 .swiper-button-prev::after {
 	display: none;
 }

 #csr_cbd_pg .swiper-button-next,
 #csr_cbd_pg .swiper-button-prev {
 	height: 40px;
 	width: 40px;
 	top: 120px;
 	margin: 0 5%;
 }

 #csr_cbd_pg .swiper-button-next:hover,
 #csr_cbd_pg .swiper-button-prev:hover {
 	background-color: var(--base-brand) !important;
 	color: white !important;
 }

 #csr_cbd_pg .swiper-container {
 	width: 100%;
 	height: 300px;
 	margin: 0 auto;
 }

 #csr_cbd_pg .swiper-slide {
 	display: flex;
 	justify-content: center;
 	align-items: center;
 	border-radius: 20px;
 	transform: scale(0.9);
 	transition: all 0.3s ease;
 	aspect-ratio: 16/9;
 	max-height: 300px;
 	min-height: 300px;
 	width: 50%;
 	transition: all 0.3s ease;
 }

 #csr_cbd_pg .swiper-slide-active img {
 	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
 }

 #csr_cbd_pg .swiper-slide img {
 	width: 100%;
 	height: 100%;
 	position: absolute;
 	inset: 0;
 	object-fit: cover;
 	border-radius: 20px;
 }

 #csr_cbd_pg .btn {padding: 0.4rem 0.6rem !important}

 @media screen and (min-width: 760px) {
 	#csr_cbd_pg .hero-section h1.title {
 		font-size: 5rem;
 		line-height: normal;
 	}

 	#csr_cbd_pg .about-csr {
 		padding-bottom: 150px;
 	}

 	#csr_cbd_pg .cbd-globe {
 		margin-top: -400px;
 	}

 	#csr_cbd_pg .about-csr .content {
 		margin-top: -100px;
 	}

 	#csr_cbd_pg .csr-past-images {
 		margin-top: -200px !important;
 	}

 	#csr_cbd_pg .circle-carousel-text-section {
 		min-height: 300px;
 	}

 	#csr_cbd_pg .swiper-button-next,
 	#csr_cbd_pg .swiper-button-prev {
 		top: 200px;
 	}

 	#csr_cbd_pg .swiper-container {
 		height: 600px;
 	}

 	#csr_cbd_pg .swiper-slide {
 		max-height: 500px;
 		width: 50%;
 	}

 	#csr_cbd_pg .swiper-slide-active {
 		transform: scale(1) scaleX(1.2);
 		z-index: 2;
 	}

 	#csr_cbd_pg .swiper-slide-active img {
 		box-shadow: 0px 50px 100px 0px rgba(0, 0, 0, 0.25);
 	}

 	#csr_cbd_pg .swiper-slide-next {
 		transform: translateX(-50%) scale(0.9);
 	}

 	#csr_cbd_pg .swiper-slide-prev {
 		transform: translateX(50%) scale(0.9);
 	}
 }

 @media screen and (min-width: 1024px) {
 	#csr_cbd_pg .carousel-btns {
 		top: -80px;
 	}

 	#csr_cbd_pg .circle-carousel-text-section {
 		max-width: 650px;
 		width: 37%;
 		min-height: 500px;
 	}

 	#csr_cbd_pg .circle-carousel {
 		margin: 0 0 0 -15%;
 		width: 60vw;
 		height: 60vw;
 	}

 	#csr_cbd_pg .nigeria-map {
 		width: 50%;
 		height: 50%;
 	}
 }

 @media screen and (min-width: 2000px) {
 	#csr_cbd_pg .circle-carousel {
 		margin: 0 0 0 -10%;
 	}
 }

 /**********************************************
* Additional Css for Retail Campaign Landing Page 
* By Niyi
************************************************/

 #rc>.large-header-banner-new .access-slide .image {
 	position: absolute;
 	top: 48% !important;
 	left: 50%;
 	background-size: cover;
 	min-width: 100%;
 	min-height: 100%;
 	z-index: 100;
 	width: 100%;
 	height: 600px !important;
 	transform: translateX(-50%) translateY(-50%);
 	transition: 0.3s filter linear;
 }

 .rc-banner {
 	background-size: cover;
 	background-position: center right;
 }

 .coffetee-bg {
 	background: url('/content/images/retail_campaign/coffettee.png');
 	background-size: cover;
 	min-height: 260px;
 }

 #rc>.h-mid {
 	height: 530px !important;
 }

 #rc_card .career-cards-deck {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)) !important;
 	grid-gap: 3rem 0rem;
 }

 #rc_card.environments {
 	padding-top: 6rem !important;
 	padding-bottom: 17rem !important;
 	margin-bottom: 0rem;


 }

 #rc_card div.career-1 {
 	background: url(/content/images/retail_campaign/visacard.png);
 	background-position: top center;
 	background-size: 100%;
 }

 #rc_card div.career-2 {
 	background: url(/content/images/retail_campaign/vehicle_fin.png);
 	background-position: top center;
 	background-size: 100%;
 }

 #rc_card div.career-3 {
 	background: url(/content/images/retail_campaign/diamondxtra.png);
 	background-position: top center;
 	background-size: 100%;
 }

 #rc_card div.career-4 {
 	background: url(/content/images/retail_campaign/healthxtra.png);
 	background-position: top center;
 	background-size: 100%;
 }

 #rc_card div.service-box {
 	height: 450px;
 }

 #rcbuz > div.emerging-business > div.image {
 	flex-basis: 60%;
 	margin-bottom: 0rem;
 }

 #rcxtra div.loan-drag-circle:before {
 	content: "";
 	position: absolute;
 	top: 5%;
 	left: 5%;
 	width: 90%;
 	height: 90%;
 	background-color: #a4c519;
 	border-radius: 50%;
 }

 #rcxtra div.loan-drag-circle {
 	position: absolute;
 	top: 50%;
 	left: 50%;
 	width: 100%;
 	height: 100%;
 	background-color: #ffffff;
 	border-radius: 50%;
 	padding-bottom: 25%;
 	transform: translate3d(-50%, -50%, 0);
 }

 #rcpoly{-webkit-clip-path: polygon(0 0, 100% 0%, 79% 100%, 0% 100%);
	clip-path: polygon(0 0, 100% 0%, 79% 100%, 0% 100%);
	position: relative;
	z-index: 100;
	margin-left: -20px;
	background: url(/content/images/retail_campaign/xtrawin.png);
	background-position: top center;
	background-size: cover;
	max-height: 370px;
	height: 300px;}

	#rc.fr-view {margin:0px !important}

 @media only screen and (max-width: 600px) {
	.rc-banner {
		background-position: center center;
		text-align: center;
 	}

	 #rc div.rc-banner .has-caption {
					margin-top:-150px !important
				}

	 #rc div.rc-banner .has-caption .banner-head{
								 	font-size:70%
								 }

	#rcpoly{ -webkit-clip-path:0;
		clip-path:none; 
	margin:0px !important;
	}

		#rc p {text-align: left;}
 }

 #access-more .fr-view img.fr-dib {
    margin: 7px 7px !important;
}


/************************************
**************************
Access More Campaign Landing Page
***************************************
*****************************************/
#access-more-pg {
	overflow-x: clip;
	--xclusive-brand: #057a82;
	--black-bg-color: #333333;
	background-color: #eeeeee;
  }
  #access-more-pg .inner {
	width: 90%;
	max-width: 1300px !important;
	margin: 0 auto !important;
  }
  #access-more-pg .list-group-item {
	background-color: transparent;
	padding: 0.5rem 0 !important;
  }
  #access-more-pg .main {
	display: flex;
	flex-direction: column;
  }
  #access-more-pg .bg-black {
	background-color: var(--black-bg-color) !important;
  }
  #access-more-pg .header-section {
	background: rgb(235, 120, 36);
	background: linear-gradient(
	  77deg,
	  rgba(235, 120, 36, 1) 40%,
	  rgba(154, 65, 0, 1) 100%
	);
	overflow-x: clip;
  }
  #access-more-pg .header-section .inner {
	min-height: max(800px, 100vh);
  }

  #access-more-pg .should-animate-text {
	clip-path: inset(0 0 100% 0); /* Initially, text is completely hidden */
	transform: translateY(100%);
  }
  #access-more-pg .animate-text {
	position: relative;
	overflow: hidden; /* Ensures the text doesn't show outside the intended area */
	animation: revealText 0.7s linear 1s forwards;
	animation-delay: var(--animate-delay);
  }
  @keyframes revealText {
	to {
	  clip-path: inset(0); /* Fully reveal the text */
	  transform: translateY(0%);
	}
  }
  #access-more-pg .scale-box {
	transform: scale(0.9);
	transform-origin: bottom;
	transition: transform 0.4s ease;
	transition-delay: var(--animate-delay);
  }
  #access-more-pg .animate-box.scale-box {
	transform: scale(1);
  }

  #access-more-pg .download-box img {
	max-height: 50px;
  }
  #access-more-pg .hero-img {
	position: absolute;
	top: 1vh;
	left: 8%;
	max-width: 350px;
	z-index: 10;
  }
  #access-more-pg .hero-img.plane {
	right: 8%;
	left: unset;
  }
  #access-more-pg .hero-img.cinema {
	right: 3%;
	left: unset;
	top: min(38vh, 350px);
  }
  #access-more-pg .hero-img.piggy {
	top: min(38vh, 340px);
	left: 3%;
  }
  #access-more-pg .hero-img {
	--opacity-animation-start: 30; /* When the opacity starts decreasing */
	--opacity-animation-end: 90; /* When the opacity reaches 0 */

	/* Calculate adjusted scroll for opacity transition */
	--adjusted-opacity-scroll: calc(
	  (var(--scroll) - var(--opacity-animation-start)) /
		(var(--opacity-animation-end) - var(--opacity-animation-start))
	);
	--clamped-opacity-scroll: max(
	  0,
	  min(1, var(--adjusted-opacity-scroll))
	); /* Clamp between 0 and 1 */

	/* Calculate opacity based on adjusted and clamped scroll */
	opacity: calc(1 - var(--clamped-opacity-scroll));
	--scale-factor: calc(
	  0.5 + (90 - max(var(--scroll) - 20, 0)) * 0.005
	); /* Scales down from 1 to 0.5 after 10% scroll */
	--start-x: 0; /* Adjust if needed for starting position */
	--end-x: 100; /* Middle of the screen */
	--offset-y: var(--scroll) * 5; /* Adjust if needed for vertical movement */
	--offset-x: calc(
	  var(--start-x) + (var(--end-x) - var(--start-x)) *
		(max(var(--scroll) - 10, 0) / 90)
	); /* Calculate the current X offset based on scroll progress, considering the direction towards the center */

	animation: animate-hero-img 1s linear 1.1s forwards;
	transform-origin: top;
	max-width: 0;
  }
  @keyframes animate-hero-img {
	to {
	  max-width: 350px;
	}
  }
  /* Adjust direction so all images move towards the center */
  #access-more-pg .hero-img.plane,
  #access-more-pg .hero-img.cinema {
	transform: translateX(calc(var(--offset-x) * -1%))
	  translateY(calc(var(--offset-y) * 1px)) scale(var(--scale-factor));
  }
  #access-more-pg .hero-img.piggy,
  #access-more-pg .hero-img.cards {
	transform: translateX(calc(var(--offset-x) * 1%))
	  translateY(calc(var(--offset-y) * 1px)) scale(var(--scale-factor));
  }

  #access-more-pg .hero-content {
	max-width: 375px;
	text-align: center;
	margin-top: 11vh;
	--animate-delay: 1s;
  }
  #access-more-pg .hero-content .animate-text {
	clip-path: inset(0 0 100% 0); /* Initially, text is completely hidden */
	transform: translateY(100%);
  }
  #access-more-pg .hero-mockup-wrap {
	position: absolute;
	bottom: calc(-1 * min(40%, 400px));
	transform: translateX(-50%) translateY(70%);
	max-width: 364px;
	width: 100%;
	left: 50%;
	z-index: 20;
	height: min(90%, 800px);
	animation: animate-mockup 1s ease-out 1s forwards;
	opacity: 0;
  }
  @keyframes animate-mockup {
	to {
	  opacity: 1;
	  transform: translateX(-50%) translateY(0);
	}
  }
  #access-more-pg .hero-mockup {
	position: relative;
	height: min(90%, 800px);
	/* bottom: calc(-1 * min(40%, 400px)); */

	--opacity-animation-start: 30; /* When the opacity starts decreasing */
	--opacity-animation-end: 80; /* When the opacity reaches 0 */

	/* Calculate adjusted scroll for opacity transition */
	--adjusted-opacity-scroll: calc(
	  (var(--scroll) - var(--opacity-animation-start)) /
		(var(--opacity-animation-end) - var(--opacity-animation-start))
	);
	--clamped-opacity-scroll: max(
	  0,
	  min(1, var(--adjusted-opacity-scroll))
	); /* Clamp between 0 and 1 */

	/* Calculate opacity based on adjusted and clamped scroll */
	opacity: calc(1 - var(--clamped-opacity-scroll));
	--scale-start: 1; /* Initial scale */
	--scale-end: 0.5; /* Final scale */
	--scale-down: calc(
	  var(--scale-start) -
		(
		  max(var(--scroll) - 30, 0) *
			(var(--scale-start) - var(--scale-end)) / 90
		)
	);

	transform: translateY(calc(1px * var(--scroll)))
	  scale(var(--scale-down));
	transition: transform 0.5s, opacity 0.5s;
  }
  #access-more-pg .hero-access-more-text {
	font-size: 12rem;
	position: absolute;
	top: 4rem;
	left: 50%;
	text-align: center;
	color: white;
	width: max-content;
	z-index: 1;

	/* Define when the animation should start and end in terms of scroll percentage */
	--animation-start: 0; /* Animation starts at 0% scroll */
	--animation-end: 70; /* Animation ends at 70% scroll */

	/* Adjust calculations to factor in the start and end points */
	--adjusted-scroll: calc(
	  (var(--scroll) - var(--animation-start)) /
		(var(--animation-end) - var(--animation-start))
	);
	/* Ensure that the scroll value is clamped between 0 and 1 */
	--clamped-scroll: max(0, min(1, var(--adjusted-scroll)));

	/* Define starting and ending Y offsets */
	--start-y-offset: -20rem;
	--end-y-offset: 0rem;

	/* Define starting and ending scale */
	--start-scale: 1;
	--end-scale: 0.3;

	/* Calculate current Y offset and scale based on clamped scroll progress */
	--y-offset: calc(
	  var(--start-y-offset) + (var(--end-y-offset) - var(--start-y-offset)) *
		var(--clamped-scroll)
	);
	--scale: calc(
	  var(--start-scale) + (var(--end-scale) - var(--start-scale)) *
		var(--clamped-scroll)
	);

	transform: translate(-50%, var(--y-offset)) scale(var(--scale));
	transition: transform 0.5s;

	animation: revealMoreText 1s ease-out 1.3s forwards;
	clip-path: inset(100% 0 0 0);
	overflow: hidden;
  }
  @keyframes revealMoreText {
	to {
	  overflow: unset;
	  clip-path: inset(0); /* Fully reveal the text */
	}
  }
  #access-more-pg .hero-access-more-text span {
	letter-spacing: -10px;
  }
  #access-more-pg .music-toggle {
	position: fixed;
	bottom: max(5%, 4rem);
	left: 5%;
	z-index: 100;
	background-color: white;
	border-radius: 25px;
	padding: 0.5rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	color: #000;
  }

  #access-more-pg .toggle-switch {
	display: inline-block;
	background: #ccc;
	border-radius: 16px;
	width: 42px;
	height: 21px;
	position: relative;
	vertical-align: middle;
	transition: background 0.25s;
  }
  #access-more-pg .toggle-switch:before,
  #access-more-pg .toggle-switch:after {
	content: "";
  }
  #access-more-pg .toggle-switch:before {
	display: block;
	background: linear-gradient(to bottom, #fff 0%, #eee 100%);
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
	width: 15px;
	height: 15px;
	position: absolute;
	top: 3px;
	left: 4px;
	transition: left 0.25s;
  }
  #access-more-pg .toggle:hover .toggle-switch:before {
	background: linear-gradient(to bottom, #fff 0%, #fff 100%);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
  }
  #access-more-pg .toggle-checkbox:checked + .toggle-switch {
	background: #ee7e01;
  }
  #access-more-pg .toggle-checkbox:checked + .toggle-switch:before {
	left: 21px;
  }

  #access-more-pg .toggle-checkbox {
	position: absolute;
	visibility: hidden;
	cursor: pointer;
  }

  #access-more-pg .toggle-label {
	margin: 0 10px 5px 5px;
	position: relative;
	top: 2px;
  }

  @media (max-width: 760px) {
	#access-more-pg .header-section {
	  padding-top: 90px;
	}
	#access-more-pg .music-toggle {
	  right: 5%;
	  left: unset;
	  bottom: 5.5%;
	}
	#access-more-pg .header-section .inner {
	  min-height: max(700px, 95vh);
	}
	#access-more-pg .hero-mockup {
	  width: auto;
	  height: min(90%, 650px);
	  margin: auto;
	}
	#access-more-pg .hero-mockup-wrap {
	  width: 100%;
	  display: flex;
	  height: min(90%, 650px);
	}
	#access-more-pg .hero-img {
	  max-width: 220px;
	  max-height: 220px;
	}
	#access-more-pg .hero-img.cards {
	  left: -30%;
	  top: -8%;
	}
	#access-more-pg .hero-img.plane {
	  right: -30%;
	  top: -8%;
	}
	#access-more-pg .hero-img.cinema {
	  right: -30%;
	}
	#access-more-pg .hero-img.piggy {
	  left: -30%;
	}
	#access-more-pg .hero-content {
	  margin-top: 20vh;
	}
  }

  @media (min-height: 900px) and (min-width: 1500px) {
	#access-more-pg .header-section .inner {
	  min-height: min(950px, 100vh);
	}
	#access-more-pg .hero-content {
	  margin-top: 18vh;
	  font-size: 18px;
	}
	#access-more-pg .hero-mockup-wrap {
	  max-width: 500px;
	}
	#access-more-pg .hero-mockup {
	  height: max(110%, 800px);
	}
	#access-more-pg .hero-img {
	  animation: animate-hero-img 1s linear 1.1s forwards;
	  top: 3vh;
	}
	@keyframes animate-hero-img {
	  to {
		max-width: 400px;
	  }
	}
  }

  /* ==== POSSIBILTIES SECTION ==== */
  #access-more-pg .possibilities-section {
	background-color: #c7c7c7;
	padding-top: min(45%, 100px);
	position: relative;
	padding-bottom: 5rem;
	overflow-x: clip;
	padding-top: 15rem;
  }
  #access-more-pg .possibilities-section .inner > p {
	font-size: 2.3rem;
	margin-bottom: 2rem;
  }
  #access-more-pg .cards-content-section {
	display: flex;
	gap: 2rem;
	justify-content: space-between;
  }
  @media (max-width: 760px) {
	#access-more-pg .possibilities-section {
	  padding-top: 10rem;
	}
	#access-more-pg .hero-access-more-text {
	  top: -1rem;
	  --start-y-offset: -16rem;
	}
	#access-more-pg .cards-content-section {
	  flex-direction: column;
	  gap: 1rem;
	}
	#access-more-pg .cards-content-section .possibilities-mockup {
	  order: 1;
	  left: 9%;
	}
	#access-more-pg .cards-content-section .left-cards,
	#access-more-pg .cards-content-section .right-cards,
	#access-more-pg .cards-content-section .possibilities-mockup {
	  display: flex;
	  max-height: unset;
	  width: 100%;
	  flex-direction: column;
	}
	#access-more-pg .cards-content-section .left-cards {
	  order: 2;
	}
	#access-more-pg .cards-content-section .right-cards {
	  order: 3;
	}
	#access-more-pg .cards-content-section .grid-card {
	  min-height: 270px;
	}
  }
  #access-more-pg .left-cards,
  #access-more-pg .right-cards {
	width: 30%;
	max-height: 600px;
  }
  #access-more-pg .possibilities-mockup {
	width: 29%;
	margin-right: -2rem;
	position: relative;
	z-index: 15;
	/* Initial scale and opacity */
	--start-scale-possibility: 0.7;
	--end-scale-possibility: 1;
	--opacity-start: 0.4;
	--opacity-end: 1;

	/* Calculate the start point for the possibility-mockup animation to begin */
	--animation-start-possibility: 60; /* Start slightly before hero-mockup completes */
	--animation-end-possibility: 90; /* Complete by the same point or slightly after hero-mockup */

	/* Adjusted scroll for this animation, ensuring it starts and ends at the defined points */
	--adjusted-scroll-possibility: calc(
	  (var(--scroll) - var(--animation-start-possibility)) /
		(
		  var(--animation-end-possibility) -
			var(--animation-start-possibility)
		)
	);
	--clamped-scroll-possibility: max(
	  0,
	  min(1, var(--adjusted-scroll-possibility))
	);

	/* Transition scale from 0.5 to 1 based on scroll */
	--scale-transition: calc(
	  var(--start-scale-possibility) +
		(var(--end-scale-possibility) - var(--start-scale-possibility)) *
		var(--clamped-scroll-possibility)
	);

	/* Transition opacity from 0.7 to 1 based on scroll */
	opacity: calc(
	  var(--opacity-start) + (var(--opacity-end) - var(--opacity-start)) *
		var(--clamped-scroll-possibility)
	);

	/* Apply the scale and initial translateY movement, adjust if needed for your specific design */
	transform: translateY(
		calc(-18rem + (18rem * var(--clamped-scroll-possibility)))
	  )
	  scale(var(--scale-transition));
	transition: transform 0.5s, opacity 0.5s;
  }
  #access-more-pg .left-cards {
	display: grid;
	gap: 1rem;
	grid-template-rows: 1fr 1fr 1fr 1fr;
	grid-template-columns: 1fr 1fr;
  }
  #access-more-pg .right-cards {
	display: grid;
	gap: 1rem;
  }
  #access-more-pg .grid-card {
	background-color: white;
	border-radius: 20px;
	padding: 1.15rem;
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: clip;
  }
  #access-more-pg .grid-card p {
	font-size: 1.5rem;
	color: #444444;
  }
  #access-more-pg .grid-card img {
	width: 40px;
	height: 40px;
	margin-top: auto;
  }
  #access-more-pg .grid-card .background-img {
	position: absolute;
	bottom: -40%;
	width: 100%;
	height: 100%;
	right: -10%;
	filter: grayscale(1);
	height: 100%;
	opacity: 0.2;
  }
  #access-more-pg .left-cards > div:first-child {
	grid-row-start: 1;
	grid-column-start: 1;
	grid-row-end: 3;
	grid-column-end: 3;
  }
  #access-more-pg .left-cards > div:nth-child(2) {
	grid-row-start: 3;
	grid-column-start: 1;
	grid-row-end: 5;
	grid-column-end: 2;
  }
  #access-more-pg .left-cards > div:nth-child(3) {
	grid-row-start: 3;
	grid-column-start: 2;
	grid-row-end: 4;
	grid-column-end: 3;
  }
  #access-more-pg .left-cards > div:nth-child(4) {
	grid-row-start: 4;
	grid-column-start: 2;
	grid-row-end: 5;
	grid-column-end: 3;
  }

  #access-more-pg .make-it-yours-section {
	padding-top: 5rem;
	position: relative;
	background: url("/content/images/access-more/make-it-yours-bg.png")
	  no-repeat;
	background-size: cover;
	background-position-x: left;
	background-origin: left;
	min-height: 900px;
	color: white;
	display: flex;
	align-items: end;
	flex-wrap: wrap-reverse;
  }
  #access-more-pg .make-it-yours-section > div {
	position: relative;
	z-index: 10;
  }
  #access-more-pg .make-it-yours-section::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.4);
	clip-path: inset(0 0 0 100%);
	transition: clip-path 0.7s;
  }
  #access-more-pg .make-it-yours-section.dark-overlay::after {
	clip-path: inset(0);
  }
  #access-more-pg .make-it-yours-section .left {
	width: 46%;
	max-width: 850px;
	display: flex;
	justify-content: right;
	align-items: stretch;
  }
  #access-more-pg .make-it-yours-section .left img {
	width: 100%;
  }
  #access-more-pg .make-it-yours-section .heading-text {
	font-size: 9rem;
	line-height: 6.2rem;
	letter-spacing: -9px;
	padding-bottom: 3rem;
  }
  #access-more-pg .make-it-yours-section .right {
	max-width: 450px;
	margin: auto 0;
  }
  @media (min-width: 1500px) {
	#access-more-pg .make-it-yours-section .right {
	  margin: auto;
	  margin-left: 10%;
	}
  }
  #access-more-pg .make-it-yours-section .right p {
	max-width: 320px;
	font-size: 1.375rem;
  }
  #access-more-pg .make-it-yours-section span {
	font-weight: 700;
  }
  #access-more-pg .theme-picker-wrap {
	display: flex;
	gap: 1rem;
  }
  #access-more-pg .theme-picker {
	position: relative;
	border-radius: 50%;
	width: 4rem;
	height: 4rem;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
  }

  @media (max-width: 1000px) {
	#access-more-pg .make-it-yours-section {
	  background: url("/content/images/access-more/mb-make-it-yours-bg.png")
		no-repeat;
	}
	#access-more-pg .make-it-yours-section .right {
	  margin: auto;
	  text-align: center;
	  width: 90%;
	  max-width: 350px;
	}
	#access-more-pg .make-it-yours-section .heading-text {
	  font-size: 5.5rem;
	  line-height: 4rem;
	  padding-bottom: 2rem;
	  letter-spacing: -2px;
	}
	#access-more-pg .make-it-yours-section .right p {
	  margin: auto;
	}
	#access-more-pg .make-it-yours-section .left {
	  flex-grow: 2;
	  margin-top: 4rem;
	}
	#access-more-pg .theme-picker {
	  width: 3.5rem;
	  height: 3.5rem;
	}
  }
  /* month feature section */
  #access-more-pg .month-feature-section {
	background-color: #eb7824;
	color: white;
	position: relative;
	z-index: 10;
	padding-bottom: 11rem;
  }
  #access-more-pg .month-feature-section h2 {
	font-size: 4rem;
	line-height: 3.5rem;
	margin: 1rem;
  }
  #access-more-pg .month-feature-section .bordered {
	width: max-content;
	margin: auto;
	border: 1px solid white;
  }
  #access-more-pg .month-feature-section .title-content {
	max-width: 490px;
	margin: 2rem auto;
  }
  #access-more-pg .month-feature-section .title-content p:not(.bordered) {
	font-size: 22px;
  }
  #access-more-pg .month-feature-section .box-content-wrap {
	background: url(/content/images/access-more/feature-of-the-month-bg.png)
	  no-repeat center;
	background-size: cover;
	border-radius: 30px;
	min-height: 650px;
	margin: 10rem 0 1rem 0;
  }
  #access-more-pg .month-feature-section .box-content {
	position: absolute;
	width: 90%;
	max-width: 460px;
	left: 50%;
	transform: translate(-50%, -8rem);
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	color: black;
	gap: 2rem;
	flex-wrap: wrap;
  }
  #access-more-pg .month-feature-section .text-content {
	width: 85%;
	border-radius: 30px;
	position: absolute;
	left: 50%;
	transform: translate(-50%, -2.6rem);
	padding: 2rem;
  }
  #access-more-pg .month-feature-section h3 {
	font-size: 2.5rem;
	font-weight: 500;
  }
  #access-more-pg .month-feature-section .feature-phone-mockup {
	margin: auto;
	width: 100%;
  }
  @media (max-width: 760px) {
	#access-more-pg .month-feature-section .inner {
	  width: 100%;
	}
	#access-more-pg .month-feature-section .title-content {
	  width: 90%;
	}
  }
  /* features section */
  #access-more-pg .features-section {
	margin-top: -2px;
	background: linear-gradient(180deg, #eb7824 10%, #eeeeee 60%, #eeeeee);
  }
  #access-more-pg .explore-box {
	padding: 3rem;
	border-radius: 30px;
	color: white;
	font-size: 1.2rem;
  }
  #access-more-pg .explore-box h3 {
	font-size: 1.75rem;
	font-weight: 500;
  }

  #access-more-pg .explore-box.reward-points {
	color: black;
	display: flex;
	gap: 2rem;
	align-items: center;
	background-color: #abc540;
  }
  #access-more-pg .explore-box.reward-points h3 {
	font-size: 2.25rem;
	font-weight: 700;
	max-width: 280px;
	line-height: 2.3rem;
  }
  #access-more-pg .wrapped-cards {
	display: flex;
	gap: 2rem;
	margin: 2rem 0;
  }

  #access-more-pg .features-section .inner {
    max-width: 1018px !important;
    margin: auto;
}
  #access-more-pg .features-section .h3 {
	max-width: 430px;
	font-size: 6rem;
	text-align: center;
	font-weight: 700;
	line-height: 71px;
	margin: 3rem auto 0;
	padding-bottom: 3rem;
	color: white;
  }
  #access-more-pg .features-section .explore-coin {
	width: max(100%, 300px);
	transition: transform 0.8s ease;
	max-width: 45%;
  }

  #access-more-pg .animate-box.reward-points.explore-box .explore-coin {
	transform: scale(1.5);
	transform-origin: left;
  }
  #access-more-pg .features-section .explore-box {
	width: 100%;
  }
  #access-more-pg .features-section .box-wrap {
	gap: 1.5rem;
	margin: 1.5rem 0;
  }
  #access-more-pg .features-section .download-app-box {
	color: black;
	margin-top: 1.5rem;
	position: relative;
	z-index: 10;
  }
  #access-more-pg .features-section .download-app-box .box-content {
	max-width: 416px;
	margin: auto;
  }
  #access-more-pg .features-section .download-app-box h2 {
	color: var(--orange-color);
	font-size: 4rem;
	font-weight: 700;
	line-height: 4rem;
	margin-bottom: 0.8rem;
  }
  #access-more-pg .features-section-mockup {
	width: 100%;
	margin-top: -200px;
	z-index: 1;
	position: relative;
  }
  @media (max-width: 760px) {
	#access-more-pg .features-section {
	  font-size: 14px;
	}
	#access-more-pg .features-section .box-wrap {
	  flex-direction: column;
	}
	#access-more-pg .features-section .explore-box.reward-points {
	  flex-direction: column-reverse;
	}
	#access-more-pg .features-section .explore-box {
	  padding: 1.5rem;
	}
	#access-more-pg .features-section .explore-coin,
	#access-more-pg .features-section .box-content {
	  width: 100%;
	  max-width: unset;
	}
	#access-more-pg .features-section .download-app-box h2 {
	  font-size: 2.5rem;
	  line-height: 2.5rem;
	}
	#access-more-pg .features-section .h3 {
	  font-size: 4rem;
	  margin-top: 0;
	  line-height: 50px;
	}
	#access-more-pg .explore-box h3 {
	  font-size: 1.5rem;
	}
	#access-more-pg .explore-box.reward-points h3 {
	  font-size: 2rem;
	}
	#access-more-pg .explore-box {
	  font-size: 1rem;
	}
	#access-more-pg .animate-box.reward-points.explore-box .explore-coin {
	  transform: scale(1);
	}
  }
  /* services section */
  #access-more-pg .services-section {
	background: linear-gradient(180deg, #f1f1f1, #f1f1f1, #eb7824);
	text-align: center;
	padding: 5rem 0 10rem;
	margin-bottom: -2px;
	--card-height: 730px;
	--card-margin: 2vw;
	--card-top-offset: 6.4rem;
  }
  #access-more-pg .services-wrap {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(var(--numcards), auto);
	gap: var(--card-margin);
  }
  #access-more-pg .services-section .h3 {
	color: #eb7824;
	max-width: 700px;
	margin: 0.5rem auto;
	padding-bottom: 5rem;
	font-size: 5rem;
	text-align: center;
	font-weight: 700;
	line-height: 71px;
  }
  #access-more-pg .services-section .inner > p {
	font-size: 1.25rem;
  }
  #access-more-pg .access-app-service-card {
	padding-top: 1rem;
	/* padding-top: calc(
	  1rem + (var(--index) - 1) * var(--card-top-offset)
	) !important; */
  }
  #access-more-pg .services-box {
	border-radius: 30px;
	padding: 3rem;
	color: #fff;
	text-align: left;
	box-shadow: 0px 60px 100px 0px rgba(0, 0, 0, 0.25);
	display: flex;
	gap: 1.5rem;
  }
  @media (min-width: 760px) {
	#access-more-pg .access-app-service-card {
	  padding-top: 1rem;
	  position: sticky;
	  top: 1rem;
	}
	#access-more-pg #card_1 {
	  --index: 1;
	  padding-top: 0rem;
	}
	#access-more-pg #card_2 {
	  --index: 2;
	  padding-top: 0rem;
	}
	#access-more-pg #card_3 {
	  --index: 3;
	  padding-top: 3rem;
	}
	#access-more-pg #card_4 {
	  --index: 4;
	  padding-top: 6rem;
	}
	#access-more-pg #card_5 {
	  --index: 5;
	  padding-top: 9rem;
	}
	#access-more-pg #card_6 {
	  --index: 6;
	  padding-top: 13rem;
	}
	#access-more-pg #card_7 {
	  --index: 7;
	  padding-top: 17rem;
	}
	@supports (animation-timeline: view()) {
	  #access-more-pg #card_1 {
		top: -3rem;
	  }
	  #access-more-pg .access-app-service-card {
		position: static;
	  }
	  #access-more-pg .services-wrap {
		--numcards: 7;
		view-timeline-name: --cards-element-scrolls-in-body;
	  }
	  #access-more-pg .access-app-service-card {
		--index0: calc(var(--index) - 1); /* 0-based index */
		--reverse-index: calc(
		  var(--numcards) - var(--index0)
		); /* reverse index */
		--reverse-index0: calc(
		  var(--reverse-index) - 1
		); /* 0-based reverse */
		position: sticky;
		top: 0;
	  }

	  #access-more-pg .services-box {
		--start-range: calc(var(--index0) / var(--numcards) * 100%);
		--end-range: calc((var(--index)) / var(--numcards) * 100%);
		animation: linear scale forwards;
		animation-timeline: --cards-element-scrolls-in-body;
		animation-range: exit-crossing var(--start-range) exit-crossing
		  var(--end-range);
	  }
	}
  }
  @keyframes scale {
	to {
	  transform: scale(calc(1.1 - calc(0.08 * var(--reverse-index))));
	}
  }
  #access-more-pg .services-box .box-title {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex-grow: 1;
  }
  #access-more-pg .services-box .box-title h4 {
	font-size: 2rem;
	font-weight: 500;
	margin-left: 0.5rem;
  }
  #access-more-pg .services-box .box-title img {
	width: 38px;
	height: 38px;
  }
  #access-more-pg .services-box .box-title p {
	font-size: 1.25rem;
	margin: 0.5rem auto 2rem;
  }
  #access-more-pg .services-box .box-features {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: auto;
	width: 75%;
  }
  #access-more-pg .services-box .box-features .feature-img {
	grid-column: span 2;
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 20px;
  }
  #access-more-pg .services-box .box-inner {
	border-radius: 20px;
	padding: 1rem;
	background-color: #00000038;
	width: 100%;
	height: 200px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 0.5rem;
  }
  #access-more-pg .services-box .icon {
	width: 40px;
	height: 40px;
  }
  @media (max-width: 760px) {
	#access-more-pg .services-box {
	  flex-direction: column;
	  padding: 1rem;
	  gap: 1rem;
	}
	#access-more-pg .services-box .box-features {
	  grid-template-rows: 170px 170px 170px;
	  grid-template-columns: 1fr 1fr;
	  width: 100%;
	  gap: 0.85rem;
	  height: auto;
	}
	#access-more-pg .services-box .box-inner {
	  order: 1;
	}
	#access-more-pg .services-box .box-inner,
	#access-more-pg .services-box .box-features .feature-img {
	  height: 170px;
	}
	#access-more-pg .services-box .box-features .feature-img {
	  order: -1;
	  grid-column: 1 / -1; /* Span full width, adapt if your grid changes */
	}
	#access-more-pg .services-box .box-title h4 {
	  font-size: 1.5rem;
	}
	#access-more-pg .services-box .box-title p {
	  font-size: 1rem;
	  margin: 0.5rem 0 1rem;
	}
	#access-more-pg .services-box .box-title img {
	  width: 25px;
	  height: 25px;
	}
  }
  #access-more-pg .make-it-yours-section .left img {
	display: none;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.5s, transform 0.5s;
  }

  #access-more-pg .make-it-yours-section .left img.selected {
	display: block;
	opacity: 1;
	transform: translateY(0);
  }

  #access-more-pg .make-it-yours-section .theme-picker::after {
	content: "";
	width: 70%;
	left: 50%;
	transform: translateX(-50%) scale(0);
	height: 8px;
	position: absolute;
	bottom: -0.8rem;
	border-radius: 20px;
	background-color: inherit;
	transition: transform 0.3s ease;
	transform-origin: left;
  }

  #access-more-pg
	.make-it-yours-section
	.top-theme-picker
	.theme-picker::after {
	bottom: unset;
	top: -0.8rem;
	background-color: #ee7e01;
  }

  #access-more-pg .make-it-yours-section .theme-picker.selected::after {
	transform: translateX(-50%) scale(1);
  }
  #access-more-pg .animate-out {
	opacity: 0;
	transform: translateY(20px);
  }

  #access-more-pg .faq-accordion .accordion-item {
	background-color: white;
	margin-top: 1rem;
  }