@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3&display=swap");
@font-face {
  font-family: "calibri";
  src: url("/wp-content/themes/ubank/assets/fonts/calibri-regular.ttf");
  font-weight: 400;
}

@font-face {
  font-family: "calibri";
  src: url("/wp-content/themes/ubank/assets/fonts/calibri-italic.ttf");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "calibri";
  src: url("/wp-content/themes/ubank/assets/fonts/calibri-bold.ttf");
  font-weight: 700;
}

@font-face {
  font-family: "calibri";
  src: url("/wp-content/themes/ubank/assets/fonts/calibri-bold-italic.ttf");
  font-weight: 700;
  font-style: italic;
}

:root {
  --duration: 30s;
}

/*:root {
	--color-primary: #064366;
	--color-secondary: #9BB93C;
	--color-white: #fff;
	--color-black: #000;
	--main-text: #000;
	--color-grey: #6A747B;
	--color-danger: #B93C3C;
	--color-dark-grey: #666666;
	--global-color-white: #fff;
	--global-color-black: #000;
	--global-color-light-grey: #666666;
	--global-color-lgiht-blue: #3D7396;
	--global-color-sky-blue: #6E91AB;
	--global-primary-color: #064366;
	--bg-primary-color: #064366;
	--bg-secondary-color: #9BB93C;
	--bg-grey-color: #F5F5F5;
	--bg-overlay: rgba(0, 0, 0, 0.6);
	--bg-secondary-color: #9BB93C;
	--global-bg-color-white: #fff;
	--global-bg-body-white: #fff;
	--global-bg-body-grey: #F5F5F5;
	--global-border-color-dark-grey: #818181;
	 --global-img-color: grayscale(100%); 
	--global-bg-white: #fff;
	--global-heading-white: #fff;
	--global-heading-primary: #064366;
	--border-grey: #818181;
	--slider-bg-grey-color: #DBE3EA;
	--slider-gradient-bg-blue: transparent linear-gradient(270deg, #63A6D1 0%, #004573 100%) 0% 0% no-repeat padding-box;
	--footer-bg-color: rgba(6, 67, 102, 1);
	--text-white: #fff;
	--text-grey: #999999;
	--section-bg-image: url('/wp-content/uploads/2023/07/bg-img-1.png');
	--global-text-grey: #818181;
	--islamic-bg-secondary-color: #9BB93C;
	--islamic-secondary-color: #9BB93C;
	--global-img-color-hover: brightness(0) invert(1);
	--grey-img-color-filter: grayscale(100%);
	--green-img-color-filter: brightness(0) saturate(100%) invert(78%) sepia(21%) saturate(1206%) hue-rotate(29deg) brightness(86%) contrast(90%);
	--mega-menu-bg-color: #fffffff2;
}

html[data-theme="dark"] {
	--main-text: #fff;
	--color-primary: #fff;
	--color-secondary: #fff;
	--color-dark-grey: #D1D3D4;
	--bg-grey-color: #101C26;
	--global-color-black: #fff;
	--global-color-light-grey: #D1D3D4;
	--global-bg-color-white: #1E2F3C;
	--global-bg-body-white: #101C26;
	--global-bg-body-grey: #101C26;
	--global-border-color-dark-grey: #fff;
	--global-img-color: brightness(0) invert(1);
	--global-primary-color: #D7F573;
	--global-bg-white: #1E2F3C;
	--bg-overlay: rgba(0, 0, 0, 0.7);
	--global-heading-white: #fff;
	--global-heading-primary: #fff;
	--slider-bg-grey-color: #324758;
	--color-white: #000;
	--footer-bg-color: rgba(30, 47, 60, 1);
	--text-grey: #D1D3D4;
	--loan-section-overlay: rgba(30, 47, 60, 0.84);
	--section-bg-image: url('/wp-content/uploads/2023/08/bg-dark-mode.png');
	--global-text-grey: #fff;
	--islamic-secondary-color: #fff;
	--mega-menu-bg-color: #1E2F3CEB;
}
*/

body {
  /* font-family: "calibri"; */
  font-family: "Source Sans 3", sans-serif;
  font-weight: 400;
  padding: 70px 0px 0px 0px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--global-color-black);
  background-color: var(--global-bg-body-grey);
  transition: background 1s;
}

html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
a,
em,
img,
strong,
sub,
sup,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 0.5407911001em;
  font-weight: bold;
}

h1 {
  font-size: 35px;
}

h2 {
  /* font-size: 50px; */
  font-size: 30px;
  color: var(--global-color-black);
  font-weight: 700;
  margin-bottom: 20px;
}

h3 {
  font-size: 24px;
}

h4 {
  font-size: 20px;
}

h5 {
  font-size: 1.2em;
}

h6 {
  font-size: 1em;
}

p {
  margin-bottom: 1rem;
}

b,
strong {
  font-weight: 700;
}

a {
  text-decoration: none;
}

a:active,
a:focus {
  outline: 0;
  border: none;
  -moz-outline-style: none;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  text-decoration: none;
  color: var(--primary);
}

ul,
ol {
  margin: 1em 0;
  padding-left: 1.2em;
}

li {
  margin-bottom: 0.5em;
}

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

p + h2,
p + header h2,
p + h3,
p + h4,
ul + h2,
ul + header h2,
ul + h3,
ul + h4,
ol + h2,
ol + header h2,
ol + h3,
ol + h4,
table + h2,
table + header h2,
table + h3,
table + h4,
blockquote + h2,
blockquote + header h2,
blockquote + h3,
blockquote + h4,
form + h2,
form + header h2,
form + h3,
form + h4,
section + p {
  margin: 0;
}

.section-padding {
  padding: 50px 0px 50px 0px;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

tr th {
  padding: 15px 20px;
  background-color: var(--global-primary-color);
  font-size: 18px;
  color: var(--color-white);
}

tr td {
  padding: 20px 20px;
  color: var(--main-text);
}

#cat-detail-section br {
  display: none;
}

#cat-detail-section a {
  color: var(--global-primary-color);
}

#cat-detail-section a.ubank-btn-primary,
#cat-detail-section a.apply-for-btn {
  color: var(--color-white);
}

.slick-track {
  margin-left: 0;
}

section + br {
  display: none;
}

.single-page-template {
  padding-bottom: 50px;
}

.single-page-template table {
  margin-bottom: 20px;
  width: 100%;
  max-width: 648px;
  box-shadow: 0px 0px 10px 0px #00000010;
}

.single-page-template table th,
.single-page-template table td {
  border: 1px solid #b2b2b2;
  /* padding: 10px; */
}

#ubank-styling .frm_form_field.form-field.frm_top_container > input,
#ubank-styling .frm_form_field.form-field.frm_top_container > select {
  height: 48px;
  border-radius: 10px;
  background-color: transparent;
  border: 1px solid var(--border-grey);
  color: var(--color-dark-grey);
  width: 100%;
  text-indent: 5px;
}

#ubank-styling .frm_form_field.form-field.frm_top_container > input:focus {
  box-shadow: unset;
}

#ubank-styling .frm_form_field.form-field.frm_top_container > textarea {
  border-radius: 10px;
  background-color: transparent;
  border: 1px solid var(--border-grey);
  color: var(--color-dark-grey);
  width: 100%;
  text-indent: 5px;
}

#ubank-styling .frm_form_field.form-field.frm_top_container > label {
  color: var(--global-color-black);
  font-size: 16px;
}

#ubank-styling .frm_submit {
  display: flex;
  justify-content: flex-end;
}

#ubank-styling .frm_submit > button {
  display: inline-block;
  padding: 12px 30px 12px 30px;
  color: var(--color-white);
  text-transform: capitalize;
  font-size: 18px;
  background-color: var(--bg-primary-color);
  border-radius: 5px;
  font-weight: 700;
  border: none;
  outline: none;
  box-shadow: none;
}

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
select {
  height: 48px;
  border-radius: 10px;
  background-color: transparent;
  border: 1px solid var(--border-grey);
  color: var(--color-dark-grey);
  width: 100%;
  text-indent: 5px;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
select:focus,
textarea:focus {
  border-color: transparent;
  outline: 1px solid var(--global-primary-color);
  box-shadow: none;
}

input[disabled] {
  cursor: no-drop;
}

select {
  font-size: 14px;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='grey' height='24' viewBox='0 0 24 24' width='24' 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: calc(100% - 15px) 13px;
  border: 1px solid var(--border-grey);
  border-radius: 10px;
  padding: 12px;
  height: 48px;
  width: 100%;
  color: var(--color-dark-grey);
}

select option {
  background-color: var(--global-bg-body-white);
  color: var(--color-dark-grey);
  border: transparent;
  cursor: pointer;
}

.ubank-btn-primary {
  display: inline-block;
  padding: 8px 15px 8px 15px;
  color: var(--color-white);
  text-transform: capitalize;
  font-size: 16px;
  background-color: var(--bg-primary-color);
  border-radius: 5px;
  font-weight: 700;
  position: relative;
  border: none;
}

.ubank-btn-primary:hover {
  color: var(--color-white);
}

.ubank-btn-secondary {
  display: inline-block;
  padding: 15px 30px 15px 30px;
  color: var(--global-color-white);
  text-transform: capitalize;
  font-size: 25px;
  background-color: var(--bg-secondary-color);
  border-radius: 5px;
}

.section-heading > h2 {
  font-size: 40px;
  text-align: center;
  margin-bottom: 30px;
  color: var(--global-primary-color);
  font-weight: 400;
}

.multiline-heading-1,
.multiline-heading-2 {
  position: relative;
  margin-bottom: 70px;
}

.multiline-heading-1::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 3px;
  bottom: -15px;
  background-color: var(--global-color-white);
  border-radius: 10px;
}

.multiline-heading-2::after {
  position: absolute;
  content: "";
  width: 50px;
  height: 5px;
  bottom: -15px;
  background-color: var(--color-primary);
  border-radius: 5px;
}

.multiline-heading-1 h5 {
  font-size: 20px;
  color: var(--global-color-white);
  text-transform: uppercase;
  margin-bottom: 2px;
  font-weight: 400;
}

.multiline-heading-2 h5 {
  font-size: 20px;
  color: var(--global-color-black);
  text-transform: uppercase;
  margin-bottom: 2px;
  font-weight: 400;
}

.multiline-heading-1 h3 {
  font-size: 40px;
  color: var(--global-heading-white);
  text-transform: capitalize;
  margin-bottom: 2px;
  font-weight: 400;
}

.multiline-heading-2 h3 {
  font-size: 40px;
  color: var(--global-heading-primary);
  margin-bottom: 2px;
  font-weight: 400;
}

.multiline-heading-1 p {
  font-size: 20px;
  color: var(--global-color-white);
  margin-bottom: 5px;
  font-weight: 400;
}

.multiline-heading-2 p {
  font-size: 20px;
  color: var(--global-color-black);
  margin-bottom: 5px;
  font-weight: 400;
}

.double-line-heading {
  margin-bottom: 25px;
}

.double-line-heading h3 {
  font-size: 40px;
  color: var(--global-color-white);
  text-transform: capitalize;
  margin-bottom: 10px;
  font-weight: 400;
}

.double-line-heading p {
  font-size: 20px;
  color: var(--global-color-white);
  margin-bottom: 0px;
  font-weight: 400;
}

.category-section-heading {
  margin-bottom: 20px;
}

.category-section-heading h2 {
  font-size: 40px;
  color: var(--global-color-black);
  font-weight: 400;
}

.categories-template-heading {
  font-size: 30px;
  color: var(--global-color-black);
  font-weight: 400;
}

.view-all {
  display: block;
  margin-top: 40px;
  text-transform: uppercase;
  text-align: center;
  color: var(--text-grey);
  font-weight: 700;
}

/*-----------
  Bread Crumb
  ------------*/
.routing-wrapper {
  padding: 10px;
  margin: 0px 0px 15px 0px;
  background: var(--global-bg-color-white);
}

.custom-breadcrumb > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.custom-breadcrumb > ul > li {
  font-size: 14px;
  font-weight: 700;
  display: inline;
  text-transform: uppercase;
}

.custom-breadcrumb > ul > li > a {
  color: #007bff;
  text-decoration: none;
  text-transform: uppercase;
  color: var(--global-color-black);
  display: inline;
}

.custom-breadcrumb > ul li:last-child > a {
  color: var(--global-heading-primary);
}

.custom-breadcrumb > ul li:not(:last-child)::after {
  content: "/";
  margin: 0 8px;
  color: #999;
}

.custom-breadcrumb > ul > li a:hover {
  text-decoration: none;
}

.custom-breadcrumb > ul > li[aria-current="page"] {
  color: var(--global-heading-primary);
  text-transform: uppercase;
}

/*-----------
  Ubank-Card
  ------------*/
.ubank-card-wrapper {
  border-radius: 20px;
  background-color: var(--global-bg-white);
  overflow: hidden;
  min-height: 340px;
  position: relative;
  z-index: ;
}

.ubank-card-head {
  position: relative;
  min-height: 167px;
  line-height: 0;
}

.ubank-card-head::after {
  content: "";
  position: absolute;
  background-image: url(/wp-content/uploads/2023/09/header-bar1.png);
  height: 4px;
  width: 100%;
  background-size: cover;
  bottom: -12px;
  left: 0px;
  right: 0px;
}

.ubank-card-head img {
  width: 100%;
  height: 173px;
  object-fit: cover;
}

.galleryCard > img {
  width: 100%;
  /* height: 173px;
    object-fit: cover; */
}

.ribon-img img {
  width: 100%;
  height: 8px;
}

.ribon-img {
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.ubank-card-body {
  padding: 20px 20px 30px 20px;
}

.ubank-text-box span {
  font-size: 14px;
  color: var(--global-color-black);
  display: block;
  margin-top: 10px;
}

.ubank-text-box h4 {
  font-size: 20px;
  color: var(--global-color-black);
  margin-bottom: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-weight: 700;
}

.ubank-text-box p {
  font-size: 14px;
  color: var(--color-dark-grey);
  margin-bottom: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 400;
}

.ubank-text-box .page-over-view-box {
  min-height: 40px;
  max-height: 40px;
  margin-bottom: 15px;
  overflow: hidden;
}
/*.ubank-text-box .page-over-view-box > p:first-child{
	font-weight: 700;
}
*/

.ubank-text-box a {
  font-size: 14px;
  color: var(--global-heading-primary);
  text-transform: capitalize;
  font-weight: 700;
}

/*===================== 
    HOME-MODAL+SLIDER
 ======================*/

/** * Overlay * -- only show for tablet and up */
.modal-overlay,
.calc-modal-overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.6);
  opacity: 0;
  visibility: hidden;
  backface-visibility: hidden;
  transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1),
    visibility 0.6s cubic-bezier(0.55, 0, 0.1, 1);
}

.modal-overlay.active,
.calc-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

/** * Modal */
.home-modal {
  position: relative;
  margin: 0 auto;
  /*background-color: var(--global-bg-white);*/
  width: 90%;
  max-width: 500px;
  padding: 30px;
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
  backface-visibility: hidden;
  transform: scale(1.2);
  transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: 999 !important;
}
.calc-home-modal {
  position: relative;
  margin: 0 auto;
  background-color: var(--global-bg-white);
  width: 90%;
  max-width: 500px;
  padding: 30px;
  border-radius: 10px;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  backface-visibility: hidden;
  transform: scale(1.2);
  transition: all 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: 999 !important;
}
.calc-home-modal .frm_message {
  background-color: transparent !important;
  border: 0 !important;
}

.calc-home-modal .frm_message p {
  font-size: 30px;
  text-align: center;
  color: var(--color-primary) !important;
}

.calc-home-modal .with_frm_style.frm_style_formidable-style {
  text-align: center;
}

.calc-home-modal .frm-redirect-msg {
  font-size: 18px !important;
  color: var(--global-color-black);
}

.home-modal .close-modal {
  position: absolute;
  cursor: pointer;
  top: 34px;
  right: 45px;
  opacity: 0;
  backface-visibility: hidden;
  transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1),
    transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  transition-delay: 0.3s;
  z-index: 2;
}

.calc-home-modal .calc-close-modal {
  position: absolute;
  cursor: pointer;
  top: 2%;
  right: 20px;
  opacity: 0;
  backface-visibility: hidden;
  transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1),
    transform 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  transition-delay: 0.3s;
  z-index: 2;
}

.home-modal .home-modal-content,
.calc-home-modal .calc-home-modal-content {
  opacity: 0;
  backface-visibility: hidden;
  transition: opacity 0.6s cubic-bezier(0.55, 0, 0.1, 1);
  transition-delay: 0.3s;
}

.home-modal.active,
.calc-home-modal.active {
  visibility: visible;
  opacity: 1;
  transform: scale(1);
}

.home-modal.active .home-modal-content,
.calc-home-modal.active .calc-home-modal-content {
  opacity: 1;
}

.home-modal.active .close-modal,
.calc-home-modal.active .calc-close-modal {
  transform: translateY(10px);
  opacity: 1;
}

.home-modal.active .close-modal,
.calc-home-modal.active .calc-close-modal {
  height: 20px;
  width: 20px;
  font-size: 14px;
  color: var(--color-white);
  background-color: var(--global-primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.home-modal-content .home-modal-slider .slick-dots {
  bottom: -40px;
}

.home-modal-inner-content-slider h3 {
  font-weight: 700;
  font-size: 28px;
  color: var(--global-primary-color);
}

.home-modal-inner-content-slider p {
  font-weight: 400;
  font-size: 18px;
}

.home-modal-inner-content-slider ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: inline-block;
}

.home-modal-inner-content-slider ul li {
  margin: 0px 0px 10px 0px;
  padding: 0px 0px 0px 30px;
  font-size: 18px;
  font-weight: 400;
  position: relative;
}

.home-modal-inner-content-slider ul li::before {
  font-family: "FontAwesome";
  font-size: 14px;
  content: "\f105";
  color: var(--color-white);
  background-color: var(--global-primary-color);
  border-radius: 50%;
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 5px;
  transition: 0.4s;
}

.home-modal-inner-content-slider a {
  display: block;
  text-transform: uppercase;
  padding: 10px;
  background-color: var(--global-primary-color);
  text-align: center;
  border-radius: 5px;
  color: var(--color-white);
  font-weight: 700;
  max-width: 200px;
  margin: 0 auto;
}

.home-modal-slider .slick-prev {
  left: 12px;
}

.home-modal-slider .slick-next {
  right: 12px;
}

.home-modal-slider .slick-prev,
.home-modal-slider .slick-next {
  background-color: var(--global-primary-color);
  border-radius: 50%;
  height: 40px;
  width: 40px;
  z-index: 2;
}

.home-modal-slider .slick-disabled {
  background-color: #e4e4e4;
}

.home-modal-slider .slick-disabled::before {
  color: #333 !important;
}

.home-modal-slider .slick-prev::before {
  font-family: "FontAwesome" !important;
  content: "\f104" !important;
  color: var(--color-white);
}

.home-modal-slider .slick-next::before {
  font-family: "FontAwesome" !important;
  content: "\f105" !important;
  color: var(--color-white);
}

/*===================== 
    HEADER
  ======================*/
.desktop-menu {
  position: relative;
  z-index: 99999;
  background-color: var(--global-bg-body-grey);
}

header {
  position: relative;
  box-shadow: 0px 0px 10px 0px #0000001a;
}

.web-logo {
  margin-right: 30px;
  padding: 10px 0px 5px 0px;
}

.web-logo img {
  margin-right: 30px;
  width: 100%;
  max-height: 50px;
  max-width: 112px;
}

.top-header-wrapper {
  padding: 0px 40px 0px 40px;
  border-bottom: 1px solid var(--global-border-color-dark-grey);
}

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

.top-left-menu {
  display: flex;
  align-items: center;
}

.top-left-menu ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: flex;
}

.top-left-menu ul li {
  padding: 20px;
  margin: 0px;
  position: relative;
}

.top-left-menu ul li a {
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 700;
  position: relative;
}

.top-left-menu ul li:nth-child(2) a {
  color: var(--color-secondary);
}

.top-left-menu li.current_page_item > a {
  color: var(--color-primary) !important;
}

.top-left-menu li.current_page_item > a::after {
  content: "";
  position: absolute;
  top: 44px;
  width: auto;
  height: 5px;
  left: -10px;
  background: var(--color-primary);
  right: -10px;
}

.top-right-menu {
  display: flex;
  align-items: center;
}

.top-right-menu ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: flex;
}

.top-right-menu ul li {
  padding: 15px;
  margin: 0px;
}

.top-right-menu ul li a {
  color: var(--global-color-black);
  text-transform: capitalize;
  font-size: 14px;
  font-weight: 400;
  display: flex;
}

.top-right-menu ul li.current_page_item a {
  color: var(--color-primary);
  font-weight: 700;
}

.dark-mode-toggler {
  padding: 0px 0px 0px 0px;
}

.dark-mode-toggler > ul {
  display: flex;
  margin: 0px;
  padding: 0px;
  list-style: none;
  position: relative;
}

.dark-mode-toggler > ul::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 26px;
  height: 84%;
  width: 1px;
  background-color: var(--global-color-light-grey);
}

.dark-mode-toggler > ul > li {
  padding: 0px;
  position: relative;
  cursor: pointer;
  margin: 0;
  display: flex;
}

.dark-mode-toggler > ul > li:first-child {
  margin: 0px 20px 0px 0px;
}

.dark-mode-toggler > ul li img {
  filter: var(--global-img-color);
}

.active-color-mode {
  /*color: #9BB93C;*/
  filter: var(--green-img-color-filter);
}

.menu-language-switcher-container > ul > li {
  padding: 0px;
  margin: 0px;
}

.menu-language-switcher-container > ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* min-width: 100px; */
  background-color: var(--global-bg-white);
  border-radius: 20px;
  transition: 0.5s;
}

.menu-language-switcher-container > ul > li > a > span {
  font-size: 12px;
}

.menu-language-switcher-container > ul > li {
  border-radius: 20px;
  padding: 0px 8px 0px 8px;
}

.menu-language-switcher-container > ul > li.wpml-ls-current-language {
  background-color: var(--bg-primary-color);
  min-width: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.menu-language-switcher-container
  > ul
  > li.wpml-ls-current-language
  > a
  > span {
  color: var(--color-white);
}

#menu-item-wpml-ls-33-ur > a > span,
.menu-item-wpml-ls-33-ur > a > span {
  /*	margin: -8px 0px 0px 0px;
	padding: 4px 0px 4px 0px;*/
  font-family: "Jameel Noori Nastaleeq", serif;
}

.bottom-header-wrapper {
  padding: 0px 0px 0px 40px;
}

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

.bottom-left-menu nav > div > ul {
  margin: 0px;
  padding: 0px;
  display: flex;
  list-style: none;
}

.bottom-left-menu > nav > div > ul > li {
  padding: 20px 0px 20px 0px;
  margin: 0px 20px 0px 20px;
}

.menu-item-none > a {
  opacity: 0;
  display: none !important;
  pointer-events: none;
}

/* .bottom-left-menu nav>div>ul>li.menu-item-has-children::after {
	content: "";
	visibility: hidden;
	opacity: 0;
	position: absolute;
	height: 0;
	top: 129px;
	transition: all .6s ease;
	width: 100%;
	left: 0;
	right: 0;
	background: var(--global-bg-white);
	border-top: 3px solid #064366;
	z-index: 1;
}
 */
.bottom-left-meun ul > li > ul > li {
  width: 33.33%;
  padding: 0px 15px;
  margin-bottom: 20px;
}

.bottom-left-menu > nav > div > ul > li > ul {
  padding: 20px 40px 20px 40px;
  right: 0;
  margin: 0 auto;
  margin-top: 0px;
  top: 129px;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  left: 0;
  justify-content: normal;
  /*max-width: 1140px;*/
  z-index: 2;
  overflow: auto;
  max-height: 500px;
  list-style: none;
  background: var(--mega-menu-bg-color);
  border-top: 2px solid #e2e2e2;
  box-shadow: 0px 18px 29px 0px #00000021;
}

.bottom-left-menu > nav > div > ul > li:hover ul {
  visibility: visible;
  opacity: 1;
}

.bottom-left-menu > nav > div > ul > li.menu-item-has-children:hover:after {
  visibility: visible;
  opacity: 1;
  height: 100vh;
}

.bottom-left-menu > nav > div > ul > li > a {
  transition: 0.2s;
}

.bottom-left-menu > nav > div > ul > li:hover > a {
  color: var(--color-primary);
  transition: all 0.4s;
}

.bottom-left-menu > nav > div > ul > li.menu-item-has-children:first-child {
  padding: 20px 0px 20px 0px;
  margin: 0px 20px 0px 0px;
}

.bottom-left-menu > nav > div > ul > li > a {
  color: var(--global-color-black);
  text-transform: uppercase;
  font-size: 16px;
  font-weight: 400;
  position: relative;
  transition: all 0.4s;
}

.bottom-left-menu > nav > div > ul > li.menu-item-has-children > a:before {
  font-family: "fontAwesome";
  content: "\f0d7";
  right: -15px;
  position: absolute;
  color: var(--color-primary);
}

.bottom-left-menu > nav > div > ul > li > ul > li:first-child > a {
  font-size: 25px;
  text-transform: capitalize;
  /*color: var(--color-secondary);*/
  margin-bottom: 10px;
}

.bottom-left-menu > nav > div > ul > li > ul > li > a {
  display: block;
  margin-bottom: 0px;
  font-size: 20px;
  text-transform: capitalize;
  font-weight: 700;
}

.bottom-left-menu > nav > div > ul > li > ul > li > ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.bottom-left-menu > nav > div > ul > li > ul > li:first-child {
  width: 100%;
  margin-bottom: 0px;
}

.bottom-left-menu > nav > div > ul > li > ul > li {
  width: 25%;
  margin-bottom: 40px;
  position: relative;
  padding: 0px 40px 0px 40px;
}

.bottom-left-menu > nav > div > ul > li > ul > li::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 0px;
  height: 100%;
  border-right: 1px solid var(--global-color-light-grey);
}

.bottom-left-menu > nav > div > ul > li > ul > li:first-child:after {
  display: none;
}

.bottom-left-menu > nav > div > ul > li > ul > li:last-child:after {
  display: none;
}

#menu-item-5137::after {
  display: none;
}

.bottom-left-menu > nav > div > ul > li > ul > li > ul > li {
  position: relative;
  padding-left: 7px;
  transition: 0.4s;
  margin-bottom: 4px;
}

.bottom-left-menu > nav > div > ul > li > ul > li > ul > li:hover {
  margin-left: 5px;
}

.bottom-left-menu > nav > div > ul > li > ul > li > ul > li:hover > a {
  color: var(--color-secondary);
}

.bottom-left-menu > nav > div > ul > li > ul > li > ul > li:before {
  content: "\f105";
  font-family: "fontAwesome";
  font-weight: bold;
  font-size: 12px;
  color: var(--color-secondary);
  opacity: 0;
  transition: 0.4s;
  position: absolute;
  left: -5px;
  top: 4px;
}

.bottom-left-menu > nav > div > ul > li > ul > li > ul > li:hover::before {
  opacity: 1;
}

.bottom-left-menu > nav > div > ul > li > ul > li > ul > li > a {
  font-size: 14px;
}

.bottom-left-meun > nav > div > ul > li.menu-item-has-children > a::before {
  font-family: "fontAwesome";
  content: "\f0d7";
  position: relative;
  right: -5px;
}

.bottom-right-menu {
  display: flex;
  align-items: center;
}

.meta-bar {
  cursor: pointer;
}

.meta-bar ul {
  padding: 0px;
  margin: 0px;
  display: flex;
  list-style: none;
  position: relative;
}

.meta-bar ul:after {
  content: "";
  position: absolute;
  top: 6px;
  left: 30px;
  height: 50%;
  width: 1px;
  background-color: var(--global-color-light-grey);
}
.hide-pseudo::after {
  content: "" !important;
  display: none !important;
}

.meta-bar ul li {
  /*margin: 0px 10px 0px 10px;*/
}
.meta-bar ul li i {
  padding: 0px 5px 0px 5px;
}

.user-login-box {
  background-color: var(--login-bg);
  min-height: 68px;
  width: 300px;
  display: flex;
  align-items: center;
  padding: 0px 10px 0px 10px;
  color: var(--global-color-white);
  text-transform: uppercase;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

.custom-menus {
  display: none;
}

.custom-menus.active {
  display: block;
}

/*===================
    Mobile Header
  =====================*/

/* mob-top-header  */
.mob-top-header {
  padding: 10px;
  border-bottom: 4px solid var(--global-bg-white);
}

.mobile-main-menu .menu-top-left-menu-container > ul {
  display: flex;
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.mobile-main-menu .menu-top-left-menu-container > ul > li {
  margin: 0px;
  padding: 0px 8px 0px 5px;
}

.mobile-main-menu .menu-top-left-menu-container > ul > li > a {
  color: var(--color-primary);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 700;
  position: relative;
}
.mobile-main-menu .menu-top-left-menu-container > ul > li:nth-child(2) > a {
  color: var(--color-secondary);
}

.mobile-main-menu
  .menu-top-left-menu-container
  > ul
  > li.current_page_item
  > a {
  color: var(--color-primary);
}

.mobile-main-menu
  .menu-top-left-menu-container
  > ul
  > li.current_page_item
  > a::after {
  content: "";
  position: absolute;
  top: 29px;
  width: auto;
  height: 4px;
  left: -10px;
  right: -10px;
  background: var(--color-primary);
}

/* bottom menu */
.mob-bottom-header {
  padding: 10px 10px 5px;
}

.mob-bottom-header .side-toggler > img {
  width: 20px;
  height: 20px;
  filter: var(--global-img-color);
}

.mobile-menu {
  position: fixed;
  top: 0px;
  width: 100%;
  z-index: 9999;
  background-color: var(--global-bg-body-grey);
  border-bottom: 2px solid var(--static-primary-color);
}

.mob-side-bar {
  top: 106px;
  position: fixed;
  z-index: 999;
  left: -100%;
  width: 100%;
  height: calc(100vh - 106px);
  transition: all 0.5s ease 0s;
  background: var(--global-bg-white);
  overflow: auto;
  border-top: 2px solid var(--bg-primary-color);
  padding: 10px 15px 0px;
}

.open-mob-side-bar {
  left: 0%;
}

.mobile-side-bar-menus > nav > div > ul {
  padding: 0px;
  margin: 0px;
  list-style: none;
}

.mobile-side-bar-menus > nav > div > ul > li {
  margin: 15px 0px;
}

.mobile-side-bar-menus > nav > div > ul > li > a {
  text-transform: uppercase;
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
}

.mobile-side-bar-menus > nav > div > ul > li.menu-item-has-children::before {
  font-family: fontAwesome;
  content: "\f067";
  right: 15px;
  position: absolute;
  color: var(--color-primary);
}

.mobile-side-bar-menus > nav > div > ul > li > ul {
  padding: 0px;
  margin: 8px 15px 0px;
  list-style: none;
}

.mobile-side-bar-menus > nav > div > ul > li > ul > li > a {
  font-size: 18px;
  font-weight: 400;
  color: var(--bg-secondary-color);
}

.mobile-side-bar-menus > nav > div > ul > li > ul > li > ul {
  margin: 0px;
  padding: 0px 20px;
  list-style: none;
}

.mobile-side-bar-menus > nav > div > ul > li > ul > li > ul > li {
  margin: 0px;
}

.mobile-side-bar-menus > nav > div > ul > li > ul > li > ul > li > a {
  font-size: 16px;
  font-weight: 400;
}

.mobile-side-bar-menus
  > nav
  > div
  > ul
  > li
  > ul
  > li.menu-item-has-children::before {
  font-family: fontAwesome;
  content: "\f067";
  right: 15px;
  position: absolute;
  color: var(--color-primary);
}

.mobile-side-bar-menus
  > nav
  > div
  > ul
  > li
  > ul
  > li.expanded.menu-item-has-children::before {
  content: "\f068";
}

.mobile-side-bar-menus
  > nav
  > div
  > ul
  > li.expanded.menu-item-has-children::before {
  content: "\f068";
}

/* mob-bottom-header */
.mob-bottom-header .dark-mode-toggler {
  margin: 0px 30px;
  padding: 0px;
}

.dark-mode-toggler > ul li img {
  filter: var(--global-img-color);
}

/* menu-language-switcher */
.menu-language-switcher-container > ul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* min-width: 100px; */
  background-color: var(--global-bg-white);
  border-radius: 20px;
  transition: all 0.5s ease 0s;
  margin: 0px;
  padding: 0px;
  list-style: none;
  transition: 1s;
}
.page-id-482 #menu-item-wpml-ls-33-ur,
.page-id-7679 #menu-item-wpml-ls-33-ur,
.page-id-483 #menu-item-wpml-ls-33-ur,
.page-id-2020 #menu-item-wpml-ls-33-ur,
.page-id-3004 #menu-item-wpml-ls-33-ur,
.page-id-1256 #menu-item-wpml-ls-33-ur,
.page-id-1254 #menu-item-wpml-ls-33-ur,
.page-id-3019 #menu-item-wpml-ls-33-ur {
  display: none;
}
/*--------SEARCH-MEGA-DROPDOWN--------*/
.search-by-wrapper,
.voice-search-by-wrapper {
  position: absolute;
  width: 100%;
  min-height: 100vh;
  top: -900px;
  opacity: 0;
  z-index: 1;
  background: #004267e6;
  transition: 0.7s;
  overflow: hidden;
}

.search-by-wrapper-open {
  top: 129px;
  opacity: 1;
  z-index: 2;
}

.search-sub-wrapper {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.search-wrapper-btn-close {
  position: absolute;
  top: 40px;
  right: 50px;
  cursor: pointer;
}

.search-form-wrapper input {
  height: 44px;
  width: 100%;
  border-radius: 8px;
  margin-bottom: 10px;
  padding-left: 10px;
  border: none;
}

.search-input-icon-wrapper button i {
  color: var(--static-primary-color);
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

.search-form-wrapper input:focus-visible {
  outline: none;
}

.search-input-icon-wrapper {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.search-input-icon-wrapper button {
  background: none;
  border: none;
  position: absolute;
  right: 10px;
  top: 10px;
}

.search-input-icon-wrapper span {
  font-size: 12px;
  color: var(--maintext);
}

.search-input-icon-wrapper {
  position: relative;
}

.search-container {
  padding: 60px 0;
}

h1.search-output-heading {
  text-transform: uppercase;
  color: var(--main-text);
}

.search-container article {
  border-bottom: 1px solid var(--border-grey);
  margin-bottom: 20px;
}

.search-container .entry-title a {
  color: var(--color-primary);
}

/*===================== voice-search/ Dropdown ======================*/

.voice-search-icon label {
  display: block !important;
  text-align: center;
  margin-top: 100px;
  cursor: pointer;
}

.voice-search-icon .search-form-wrapper {
  position: absolute;
  left: 0;
  opacity: 0;
  width: 0;
  height: 0;
}

.voice-search-by-wrapper #voice-search label h3,
.voice-search-by-wrapper h5 {
  color: var(--text-white);
}

.search-input-icon-wrapper .universal-voice-search-button {
  display: none;
}

/* 
.microphone-container {
  position: relative;
  display: inline-block;
}

.circle {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #f46f22;
  animation: blink 1s infinite;
}

.microphone {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  max-width: 66px;
  font-size: 100px;
  color: white;
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }

  100% {
    opacity: 1;
  }
} */
.btn-mic {
  border: none;
  padding: 0;
  border-radius: 100%;
  width: 100px;
  height: 100px;
  font-size: 3em;
  color: #fff;
  padding: 0;
  margin: 0 auto;
  background: #f7610b;
  position: relative;
  z-index: 999;
  line-height: 100px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background-image: none;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
}

.pulse-ring {
  content: "";
  border: 5px solid var(--color-secondary);
  border-radius: 50%;
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0px;
  left: 0px;
  animation: pulsate infinite 1.5s;
}

.pulse-ring.delay {
  /* animation-delay: 1s; */
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(1, 1);
    opacity: 1;
  }

  100% {
    -webkit-transform: scale(1.3, 1.3);
    opacity: 0;
  }
}

.type2 {
  background: var(--color-secondary);
}

.type2 .pulse-ring {
  background: transparent;
}

/*===================== 
    HOME-TOP-SLIDER
  ======================*/

.home-main-slider {
  height: 613px;
}

.slider-bg-img {
  height: 100vh;
  padding: 50px 0px 0px 0px;
  background-size: cover;
  background-position: 100% 100%;
}

#home-slider .slick-dots {
  bottom: 150px;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 35px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.4s;
}

.slick-dots li button {
  display: block;
  width: 100%;
  height: 4px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background-color: var(--static-primary-color);
  /*text-indent: -9999px;*/
  text-indent: unset;
  transition: 0.3s;
}

.slick-dots li.slick-active {
  width: 60px;
}

.slick-dots li.slick-active button {
  width: 100%;
  background-color: var(--static-secondary-color);
}
.slick-dots li button::before {
  display: none;
}

.slider-text-box h1 {
  margin-bottom: 15px;
  font-size: 35px;
  line-height: 35px;
  font-weight: 400;
}

.slider-text-box h1 > strong {
  font-size: 60px;
  font-weight: 700;
  text-transform: capitalize;
  /*! margin-right: 15px; */
}

.slider-text-box p {
  margin-bottom: 15px;
  font-size: 24px;
  font-weight: 400;
}

.slider-text-box ul {
  margin: 0px 0px 20px 0px;
  padding: 0px;
  list-style: none;
}

.slider-text-box ul li {
  margin: 0px 0px 10px 0px;
  padding: 0px 0px 0px 30px;
  font-size: 18px;
  font-weight: 400;

  position: relative;
}

.slider-text-box ul li::before {
  font-family: "FontAwesome";
  font-size: 14px;
  content: "\f105";
  color: var(--color-white);
  background-color: var(--bg-primary-color);
  border-radius: 50%;
  height: 20px;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 5px;
  transition: 0.4s;
  text-align: center;
  padding: 0px 0px 0px 2px;
}

.slider-text-box ul li:last-child {
  margin: 0px;
}

#home-slider .slick-dotted.slick-slider {
  margin-bottom: 0px;
}

.home-main-slider .slick-prev {
  left: 0px !important;
  right: unset !important;
}

.home-main-slider .slick-next {
  right: 0px !important;
  left: unset !important;
}

.home-main-slider .slick-prev,
.home-main-slider .slick-next {
  /*background-color: var(--global-primary-color);*/
  border-radius: 50%;
  height: 40px;
  width: 40px;
  z-index: 2;
}

.home-main-slider.slick-disabled {
  background-color: #e4e4e4;
}

.home-main-slider .slick-disabled::before {
  color: #242323 !important;
}

.home-main-slider .slick-prev::before {
  font-family: "FontAwesome" !important;
  content: "\f104" !important;
  /*color: var(--color-white);*/
  font-size: 30px;
  color: #333;
}

.home-main-slider .slick-next::before {
  font-family: "FontAwesome" !important;
  content: "\f105" !important;
  /*color: var(--color-white);*/
  font-size: 30px;
  color: #333;
}

/*===================== 
    OUT-REACH-SLIDER
  ======================*/
#ubank-out-reach .out-reach-slider {
  padding: 0px 30px 0px 30px;
}

.pull-up-container {
  position: relative;
  top: -15px;
  margin-top: -104px;
  margin-bottom: -104px;
  z-index: 1;
}

.ubank-out-reach-wrapper {
  padding: 30px 0px 40px 0px;
  box-shadow: 0px 0px 20px #00000024;
  background-color: var(--global-bg-white);
  border-radius: 20px;
}

.out-reach-icon-box {
  margin-right: 30px;
}

.out-reach-icon-box img {
  filter: var(--global-img-color);
}

.out-reach-slider::before {
  content: "";
  position: absolute;
  width: 33px;
  height: 100%;
  background: var(--global-bg-white);
  right: 0;
  z-index: 2;
}

.out-reach-item {
  display: flex;
  justify-content: center;
  position: relative;
}

.out-reach-item::after {
  content: "";
  position: absolute;
  top: 22px;
  height: 29%;
  right: 1px;
  border-right: 1px solid var(--global-color-light-grey);
  padding-right: 10px;
}

.out-reach-text-box h4 {
  text-transform: uppercase;
  color: var(--global-color-black);
  margin-bottom: 5px;
  font-size: 16px;
  font-weight: 400;
}

.out-reach-text-box h2 {
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0px;
  font-size: 32px;
  font-weight: 700;
}

.out-reach-text-box sup {
  font-size: 20px;
  top: -11px;
  left: 1px;
}

#ubank-out-reach .slick-slide {
  height: auto;
}

#ubank-out-reach .ubank-out-reach-wrapper .slick-prev::before {
  content: url("/wp-content/uploads/2023/07/left-arrow.svg");
}

#ubank-out-reach .ubank-out-reach-wrapper .slick-next::before {
  content: url("/wp-content/uploads/2023/07/right-arrow.svg");
}

#ubank-out-reach .ubank-out-reach-wrapper .slick-prev {
  left: 12px !important;
  right: unset !important;
  z-index: 999;
}

#ubank-out-reach .ubank-out-reach-wrapper .slick-next {
  right: 12px !important;
  z-index: 999;
}

#ubank-out-reach .slick-next > img,
.slick-prev > img {
  filter: var(--global-img-color);
}

/*===================== 
    WHAT-WE-OFFER
  ======================*/

#what-we-offer {
  position: relative;
  background: url(/wp-content/uploads/2023/08/bg-dark-mode.png) no-repeat top;
  background-size: cover;
  background-attachment: fixed;
  padding: 175px 0px 100px 0px;
}

/*#what-we-offer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #064366d6;
}
*/
.inner-section {
  padding: 180px 0px 100px 0px;
}

.pos-rel {
  position: relative;
  z-index: 2;
}

.what-we-offer-slider {
  background-color: var(--global-bg-white);
  border-radius: 20px;
  padding: 0px 40px 0px 40px;
}

.what-we-offer-item {
  padding: 50px 20px;
  position: relative;
  border-right: 0.5px solid #70707026;
}

#what-we-offer .slick-slide:nth-child(4n) .what-we-offer-item {
  border-right: none;
}

.what-we-offer-item img {
  margin-bottom: 20px;
  filter: var(--global-img-color);
}

.what-we-offer-item h4 {
  color: var(--global-color-black);
  font-size: 20px;
  margin-bottom: 20px;
  font-weight: 700;
}

.what-we-offer-item p {
  color: var(--color-dark-grey);
  font-size: 14px;
  margin-bottom: 0px;
  min-height: 90px;
}

.what-we-offer-item p a:hover {
  color: var(--color-primary);
}

.what-we-offer-item h6 img {
  filter: var(--global-img-color);
}

#what-we-offer .slick-slide {
  height: auto;
}

#what-we-offer .slick-dots {
  width: auto;
  left: 0;
  bottom: -63px;
}

/*
#what-we-offer .slick-dots li {
	position: relative;
	display: inline-block;
	width: 13px;
	height: 13px;
	margin: 0 5px;
	padding: 0;
	cursor: pointer;
	border-radius: 50%;
	transition: 0.4s;
	background-color: #90ABBB;
}

#what-we-offer .slick-dots li.slick-active {
	width: 90px;
	height: 13px;
	border-radius: 7px;
	background-color: #C4E659;
}*/

#what-we-offer .slick-dots li {
  position: relative;
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.4s;
}

#what-we-offer .slick-dots li button {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  border-radius: 15px;
  background-color: var(--static-primary-color);
  text-indent: -9999px;
  transition: 0.3s;
}

#what-we-offer .slick-dots li.slick-active {
  width: 80px;
  height: 15px;
}

#what-we-offer .slick-dots li.slick-active button {
  width: 100%;
  height: 100%;
  background-color: var(--static-secondary-color);
}

/*===================== 
    BANKING-WITH-US
  ======================*/

#banking-with-us {
  background-color: var(--bg-grey-color);
}

.tabs {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  margin-bottom: 20px;
}

.tab {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 20px;
  text-transform: capitalize;
  color: var(--color-grey);
  font-weight: 400;
}

.tab.active {
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
  font-weight: 700;
}

.tab-content {
  /*padding: 10px;*/
}

.tab-item {
  display: none;
}

.tab-item.active {
  display: block;
}

/*===================== 
    DIGITAL-BANKING
  ======================*/

#digital-banking {
  position: relative;
  /*background: url(/wp-content/uploads/2024/02/bg-img-22.png) no-repeat top;
	background-attachment: fixed;
	background-size: auto;
	background-size: cover;*/
  padding: 70px 0px 20px 0px;
}

#digital-banking::after {
  content: "";
  background: url(/wp-content/uploads/2024/02/bg-img-22.png) no-repeat top;
  background-attachment: fixed;
  background-size: auto;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1000;
}
.page-template-islamic-banking-homepage .app-download {
  /* cursor-pointer:none; */
  pointer-events: none;
}
.app-text-box .mob-banking {
  display: inline-block;
  text-transform: uppercase;
  color: var(--color-white);
  padding: 15px 20px 15px 20px;
  background-color: var(--bg-primary-color);
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 400;
}

.app-text-box .app-download {
  font-size: 18px;
  display: inline-block;
  padding: 15px 22px 15px 22px;
  text-transform: capitalize;
  color: var(--color-white);
  background-color: var(--bg-primary-color);
  border-radius: 5px;
  font-weight: 700;
  z-index: 99;
  position: relative;
}

/*===================== 
    CALCULATE-LOAN
  ======================*/
#calculate-loan {
  position: relative;
}

#calculate-loan .calculator-slider .slick-prev,
#calculate-loan .calculator-slider .slick-next {
  background-color: var(--global-primary-color);
  border-radius: 50%;
  height: 40px;
  width: 40px;
  z-index: 2;
}

#ubank-styling #calculate-loan .calculator-slider .slick-prev {
  left: -25px;
  right: unset;
}
#ubank-styling #calculate-loan .calculator-slider .slick-next {
  right: -25px;
  left: unset;
}

#calculate-loan .calculator-slider .slick-disabled {
  background-color: #e4e4e4;
}

#calculate-loan .calculator-slider .slick-disabled::before {
  color: #333 !important;
}

#calculate-loan .calculator-slider .slick-prev::before {
  font-family: "FontAwesome" !important;
  content: "\f104" !important;
  color: var(--color-white);
}

#calculate-loan .calculator-slider .slick-next::before {
  font-family: "FontAwesome" !important;
  content: "\f105" !important;
  color: var(--color-white);
}

.calculator-slider .slick-dots {
  bottom: -60px;
}

.calculate-wrapper {
  background-color: var(--global-bg-white);
  border-radius: 10px;
  overflow: hidden;
}

.calculation-box {
  padding: 30px 40px 30px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.calc-heading-box h5 {
  color: var(--global-heading-primary);
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 400;
}

.calc-heading-box h3 {
  font-size: 30px;
  color: var(--global-heading-primary);
  font-weight: 400;
}

.slide-bar {
  border-radius: 8px;
  height: 7px;
  outline: none;
  transition: background 450ms ease-in;
  -webkit-appearance: none;
}

.slider {
  -webkit-appearance: none;
  height: 15px;
  background-color: var(--slider-bg-grey-color);
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border: 3px solid #a7c5db;
  background-image: url("/wp-content/uploads/2023/07/circle.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  box-shadow: 0px 0px 3px #537995b1;
  border-radius: 50%;
  opacity: 1;
  background-color: #fff;
}

.slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  background: transparent;
  background-image: url("/wp-content/uploads/2023/07/circle.svg");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  box-shadow: 0px 0px 5px #c6d0d7b0;
  border-radius: 50%;
  opacity: 1;
  background-color: #fff;
  border: 3px solid #a7c5db;
}

.min-max-amount {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.min-max-amount span {
  color: var(--global-color-light-grey);
  font-size: 14px;
  font-weight: 400;
}

.result-output-box {
  text-align: center;
  border: 1px solid var(--border-grey);
  padding: 10px 18px 10px 18px;
  border-radius: 5px;
}

.result-output-box h5 {
  font-size: 13px;
  color: var(--color-grey);
  margin-bottom: 5px;
  font-weight: 400;
}

.result-output-box h3 {
  font-size: 18px;
  color: var(--global-color-black);
  margin-bottom: 0px;
  font-weight: 700;
}

.apply-for-btn {
  display: block;
  text-transform: uppercase;
  padding: 15px;
  background-color: var(--global-primary-color);
  text-align: center;
  border-radius: 5px;
  color: var(--color-white);
  font-weight: 700;
}

.calc-heading-box .apply-for-btn:hover {
  color: var(--color-white);
}

.calculate-img-box {
  height: 100%;
}

.calculate-img-box img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.btn-disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}
/*===================== 
    AWARDS
  ======================*/
#awards-home {
  position: relative;
  background: url(/wp-content/uploads/2023/08/bg-dark-mode.png) no-repeat top;
  background-attachment: fixed;
  background-size: auto;
  background-size: cover;
}

#awards-home .view-all {
  color: var(--text-grey);
}

#awards-home .view-all:hover {
  color: var(--text-white);
}

#awards-recognition-banner {
  position: relative;
  background: url(/wp-content/uploads/2023/08/awards.png) no-repeat top;
  background-size: auto;
  background-size: cover;
  position: relative;
  height: 350px;
  display: flex;
  align-items: center;
}

.awards-card-wrapper {
  background-color: var(--global-bg-white);
  border-radius: 20px;
  padding: 20px;
}

.awards-card-img-box img {
  height: 150px;
  /* width: 150px; */
}

.awards-card-img-box {
  margin-bottom: 10px;
}

.awards-card-text-box h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  min-height: 50px;
}

.awards-card-text-box h4 {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 8px;
  color: var(--global-heading-primary);
}

.awards-card-text-box p {
  color: var(--color-dark-grey);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 20px;
}

.awards-view-more {
  text-align: right;
}

.awards-view-more a {
  color: var(--global-heading-primary);
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
}

/*--------AWards-New-Card-Design--------*/
.awards-recognition-card {
  background-color: var(--global-bg-white);
  border-radius: 20px;
  padding: 15px 15px 20px 15px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.awards-recognition-card::before {
  content: "";
  position: absolute;
  height: 125px;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  background: #6e91ab;
}

.awards-recognition-card-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--global-color-white);
  margin: 0 auto 20px auto;
}

/* .awards-recognition-card-detail {
	text-align: left;
} */

.awards-recognition-card-detail h3 {
  font-size: 16px;
  margin: 0px 0px 6px 0px;
  color: var(--global-color-black);
  font-weight: 700;
  min-height: 39px;
}

.awards-recognition-card-detail h5 {
  font-size: 14px;
  margin: 0px 0px 6px 0px;
  color: var(--global-heading-primary);
  font-weight: 700;
  min-height: 34px;
}

.awards-recognition-card-detail p {
  color: var(--color-dark-grey);
  font-size: 14px;
  line-height: 24px;
}

.awards-recognition-card-detail {
  margin: 0px 0px 15px 0px;
  max-height: 130px;
  overflow: hidden;
  transition: 0.5s;
  transition: all linear 0.1s;
}

.awards-recognition-card-detail.active {
  max-height: 1000px;
}

.remove-elipse {
  overflow: visible !important;
  text-overflow: initial !important;
  display: initial !important;
  -webkit-line-clamp: initial !important;
  -webkit-box-orient: initial !important;
}

.awards-recognition-card .read-more-award-detail {
  font-size: 14px;
  color: var(--global-heading-primary);
  text-transform: capitalize;
  font-weight: 700;
  cursor: pointer;
}

/*------------Award Details------------*/
.award-detail-card-wrapper {
  background-color: var(--global-bg-white);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.award-detail-card-wrapper img {
  width: 200px;
  height: 200px;
}

.award-detail-card-text h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.award-detail-card-text h4 {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 3px;
  color: var(--global-heading-primary);
}

.award-detail-card-text p {
  color: var(--color-dark-grey);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  margin-bottom: 20px;
}

.award-detail-card-content p {
  color: var(--color-dark-grey);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0px;
  margin-bottom: 20px;
}

/*===================== 
    STORIES
  ======================*/
#stories {
  position: relative;
  background-color: var(--bg-grey-color);
  background-size: auto;
  background-size: cover;
}

.shine-effect {
  position: relative;
  overflow: hidden;
  transition: 0.4s;
  line-height: 0;
}

/* .shine-effect::after {
	content: "";
	position: absolute;
	top: -110%;
	left: -210%;
	width: 200%;
	height: 200%;
	opacity: 0;
	transform: rotate(30deg);
	background: rgba(0, 0, 0, 0.13);
	background: linear-gradient(to right, rgba(0, 0, 0, 0.13) 0%, rgba(0, 0, 0, 0.13) 77%, rgba(0, 0, 0, 0.5) 92%, rgba(0, 0, 0, 0.0) 100%);
} */

/* .ubank-card-wrapper:hover .shine-effect::after {
	opacity: 1;
	top: -30%;
	left: -30%;
	transition-property: left, top, opacity;
	transition-duration: 0.7s, 0.7s, 0.15s;
	transition-timing-function: ease;
} */

/*------------Success Detail Page------------*/
.success-story-detail-content h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
  text-transform: capitalize;
}

.success-story-detail-content p {
  color: var(--color-dark-grey);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 0px;
  margin-bottom: 20px;
}

/*===================== 
    BANK-METAS
  ======================*/

#bank-metas {
  background-color: #3d7396;
  padding: 50px 0px 50px 0px;
  /*margin: 30px 0px 0px;*/
}

.bank-meta-wrapper {
  border-radius: 20px;
  padding: 33px 15px 27px 15px;
  background-color: var(--global-bg-white);
  transition: 0.5s;
  min-height: 118px;
}

.bank-meta-wrapper:hover {
  background-color: var(--bg-secondary-color);
}

.bank-meta-wrapper:hover .bank-meta-text-box h4 {
  color: var(--global-color-white);
}

.bank-meta-wrapper:hover .bank-meta-text-box p {
  color: var(--global-color-white);
}

.bank-meta-icon-box {
  margin-right: 16px;
}

.bank-meta-icon-box img {
  filter: var(--global-img-color);
}

.bank-meta-wrapper:hover .bank-meta-icon-box img {
  filter: var(--global-img-color-hover);
}

.bank-meta-text-box h4 {
  font-size: 20px;
  margin-bottom: 4px;
  font-weight: 700;
}

.bank-meta-text-box p {
  font-size: 14px;
  margin-bottom: 0px;
  color: var(--color-dark-grey);
}

/*===================== 
    CATEGORY PAGE
  ======================*/
#top-banner-image {
  background: url(/wp-content/uploads/2023/07/bg-img-5.png) no-repeat top;
  background-size: auto;
  background-size: cover;
  position: relative;
  height: 350px;
  display: flex;
  align-items: center;
}

#top-banner-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--bg-overlay);
}

.top-banner-text-box h2 {
  font-weight: 700;
  font-size: 40px;
  color: var(--global-color-white);
  margin-bottom: 5px;
}

.top-banner-text-box p {
  font-size: 22px;
  color: var(--global-color-white);
  font-weight: 400;
}

/*===================== 
    PRODCUTS-SLIDER-PAGE
  ======================*/

.product-slider .slick-prev {
  left: -40px;
  right: unset;
}

.product-slider .slick-next {
  right: -40px;
  left: unset;
}

.product-slider .slick-prev,
.product-slider .slick-next {
  background-color: var(--global-primary-color);
  border-radius: 50%;
  height: 40px;
  width: 40px;
  z-index: 2;
}

.product-slider .slick-disabled {
  background-color: #e4e4e4;
}

.product-slider .slick-disabled::before {
  color: #333 !important;
}

.product-slider .slick-prev::before {
  font-family: "FontAwesome" !important;
  content: "\f104" !important;
  color: var(--color-white);
}

.product-slider .slick-next::before {
  font-family: "FontAwesome" !important;
  content: "\f105" !important;
  color: var(--color-white);
}

/*===================== 
    CATEGORY DETAIL PAGE
  ======================*/

#cat-detail-section .detail-top-heading ul {
  margin: 0px 0px 16px 0px;
  padding: 0px;
  list-style: none;
}

#cat-detail-section .detail-top-heading ul li {
  position: relative;
  padding-left: 24px;
}

#cat-detail-section .detail-top-heading ul li::before {
  content: "";
  background-image: url(/wp-content/uploads/2023/10/arrow-left-circle.svg);
  filter: var(--global-img-color);
  background-repeat: no-repeat;
  width: 10px;
  height: 15px;
  position: absolute;
  padding-right: 20px;
  left: 0px;
  top: 5px;
  background-size: contain;
}

#detail-top-banner-image {
  background-size: cover;
  position: relative;
  height: 415px;
  display: flex;
  align-items: center;
  background-position: center center;
}

#detail-top-banner-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.5); */
  /* Adjust the color and opacity as needed */
}

.horizontal-bar-banner-img img {
  width: 100%;
  height: 5px;
  margin: 6px 0px 6px 0px;
  display: block;
}

.page-overview-text p {
  font-size: 15px;
  margin-bottom: 0px;
  color: var(--global-color-black);
  font-weight: 400;
}

.salient-feature-list-box {
  /*padding: 0px 200px 0px 0px;*/
  margin: 0px 0px 0px 0px;
}

.salient-feature-list-box h3,
.required-doc-box h3 {
  font-size: 25px;
  color: var(--global-color-black);
  margin-bottom: 20px;
  font-weight: 700;
}

.widget_text h4 {
  font-size: 25px;
  color: var(--global-color-black);
  margin-bottom: 20px;
  font-weight: 700;
}

.product-faq h4 {
  font-size: 25px;
  color: var(--global-color-black);
  margin-bottom: 20px;
  font-weight: 700;
}

.salient-feature-box-wrapper p br {
  display: block !important;
}

.salient-feature-box-wrapper {
  padding: 0px 20px 0px 20px;
  border: 1px solid #e2e2e2;
  background-color: var(--global-bg-white);
  border-radius: 10px;
  min-height: 72px;
  display: flex;
  align-items: center;
}

/* .salient-feature-list-box .salient-features-notes p {
	margin: 0px;
} */

/* .salient-feature-box-wrapper:before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; 
    width: 100%;
    height: 100%;

    z-index: -1; 
    transition: left 0.6s ease; 
    background: transparent linear-gradient(180deg, #004267 0%, #012D46 100%) 0% 0% no-repeat padding-box;
} */

.salient-feature-box-wrapper:hover:before {
  left: 0;
}

.salient-feature-box-wrapper p {
  font-size: 15px;
  color: var(--global-color-black);
  margin-bottom: 0px;
  font-weight: 400;
}

.required-doc-box {
  margin: 0px 0px 00px 0px;
}

#ubank-styling .required-doc-box ul {
  margin: 0px 0px 16px 0px;
  padding: 0px;
  list-style: none;
}

#ubank-styling .required-doc-box ul li {
  position: relative;
  padding-left: 24px;
}

#ubank-styling .required-doc-box ul li::before {
  content: "";
  background-image: url(/wp-content/uploads/2023/10/arrow-left-circle.svg);
  filter: var(--global-img-color);
  background-repeat: no-repeat;
  width: 10px;
  height: 15px;
  position: absolute;
  padding-right: 20px;
  left: 0px;
  top: 5px;
  background-size: contain;
}

.detail-side-box {
  margin-bottom: 50px;
}

.detail-side-box > h4 {
  font-size: 26px;
  font-weight: 700;
  color: var(--global-color-black);
  margin-bottom: 20px;
}

#ubank-styling .aside-box-slider {
  position: relative;
}

#ubank-styling .aside-box-slider .slick-slide {
  height: auto;
}

#ubank-styling .aside-box-slider .slick-dots {
  bottom: 12px;
}

#ubank-styling .aside-box-slider .slick-dots li {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 4px;
  margin: 0 2px;
  padding: 0;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.4s;
}

#ubank-styling .aside-box-slider .slick-dots li {
  background-color: var(--bg-primary-color);
}

#ubank-styling .aside-box-slider .slick-dots li.slick-active {
  width: 40px;
  background-color: var(--color-secondary);
}

#ubank-styling .aside-box-slider .slick-dots li button {
  visibility: hidden;
}

.aside-calc-box {
  background-color: var(--global-bg-white);
  padding: 20px 23px 20px 23px;
  border-radius: 20px;
}
.aside-calc-box.calc-heading-box > h5 {
  font-size: 0px;
  visibility: hidden;
  margin: 0px;
}

.aside-calc-box.calc-heading-box h3 {
  font-size: 20px;
}

.aside-calc-box select {
  padding: 10px;
  background-position-y: 11px;
}

.aside-calc-box .result-output-box h3 {
  font-size: 16px;
}

.aside-calc-box .result-output-box {
  text-align: center;
}

.aside-calc-box .result-output-box h5 {
  font-size: 11px;
}

.aside-calc-box .apply-for-btn {
  font-size: 15px;
  padding: 10px;
}

.aside-calc-box .calc-heading-box h5 {
  margin: 0px 0px 3px 0px;
}

.recommended-products .slick-prev {
  left: 0px;
}

.recommended-products .slick-next {
  right: 0px;
}

.recommended-products .slick-prev,
.recommended-products .slick-next {
  background-color: var(--global-primary-color);
  border-radius: 50%;
  height: 40px;
  width: 40px;
  z-index: 2;
}

.recommended-products .slick-disabled {
  background-color: #e4e4e4;
}

.recommended-products .slick-disabled::before {
  color: #333 !important;
}

.recommended-products .slick-prev::before {
  font-family: "FontAwesome" !important;
  content: "\f104" !important;
  color: var(--color-white);
}

.recommended-products .slick-next::before {
  font-family: "FontAwesome" !important;
  content: "\f105" !important;
  color: var(--color-white);
}

.success-story .slick-prev {
  left: 0px;
}

.success-story .slick-next {
  right: 0px;
}

.success-story .slick-prev,
.success-story .slick-next {
  background-color: var(--global-primary-color);
  border-radius: 50%;
  height: 40px;
  width: 40px;
  z-index: 2;
}

.success-story .slick-disabled {
  background-color: #e4e4e4;
}

.success-story .slick-disabled::before {
  color: #333 !important;
}

.success-story .slick-prev::before {
  font-family: "FontAwesome" !important;
  content: "\f104" !important;
  color: var(--color-white);
}

.success-story .slick-next::before {
  font-family: "FontAwesome" !important;
  content: "\f105" !important;
  color: var(--color-white);
}
/*===================== 
    SUCCESS STORY MAIN TEMPLATE
  ======================*/
/*---- Success Story Tab Pane  ---*/
#ubank-styling .stories-tabs {
  list-style-type: none;
  padding: 0px 50px 0px 50px;
  position: relative;
  max-width: 700px;
  display: flex;
  justify-content: center;
  margin: 20px auto;
}

.stories-tabs::before {
  content: "";
  position: absolute;
  border-bottom: 1px solid #d2d2d2;
  width: 100%;
  bottom: 1px;
  left: 0;
  right: 0;
  z-index: -1;
}

.stories-tab {
  padding: 0px 40px 5px 40px;
  margin: 0px;
  cursor: pointer;
  font-size: 16px;
  text-transform: capitalize;
  color: var(--maintext);
  font-weight: 400;
  font-size: 16px;
}

.stories-tab.active {
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
}

.stories-tab-content {
  /*padding: 10px;*/
}

.stories-tab-item {
  display: none;
}

.stories-tab-item.active {
  display: block;
}

/*===================== 
    TEAM-MANAGEMENT
  ======================*/
.team-box {
  position: relative;
}

.team-img-box img {
  border-radius: 20px;
}

.team-message-box {
  border-radius: 20px;
  background-color: var(--global-bg-white);
  max-width: 500px;
  max-height: 198px;
  overflow: hidden;
  transition: max-height 0.6s ease;
  position: absolute;
  top: 43px;
  right: 44px;
}

.team-message-box:hover {
  max-height: 2000px;
  /* Adjust this value based on your content's actual height */
  height: 100%;
}

.content {
  padding: 20px 20px 30px 20px;
  position: relative;
  height: 198px;
}

.team-message-box h3 {
  font-size: 18px;
  margin-bottom: 5px;
}

.team-message-box h5 {
  font-size: 14px;
  margin-bottom: 5px;
}

.team-message-box p {
  font-size: 14px;
  margin-bottom: 0px;
  max-width: 524px;
}

.content:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 20px;
  background: red;
  left: 0;
  bottom: 0;
}

.team-message-box:hover .content {
  height: 100%;
}

/*===================== 
    AWARDS
  ======================*/

.expandable-card {
  background-color: var(--global-bg-white);
  border-radius: 20px;
}

.expandable-div {
  background-color: var(--global-bg-white);
  max-height: 200px;
  overflow: hidden;
  transition: max-height 0.6s ease;
  /* Smooth animation for expanding */
  position: relative;
  padding: 20px 20px 15px 20px;
  /*border-bottom-right-radius: 20px;*/
  /*border-bottom-left-radius: 20px;*/
}

.expandable-div::after {
  content: " ";
  display: block;
  background-color: var(--global-bg-white);
  height: 54px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  transition: height 0.6s ease;
  /*border-bottom-right-radius: 20px;*/
  /*border-bottom-left-radius: 20px;*/
}

.expandable-div span {
  position: absolute;
  bottom: 15px;
  right: 28px;
  z-index: 1;
  text-transform: uppercase;
  font-size: 16px;
  margin: 0px;
}

.expandable-div.expanded {
  max-height: 1000px;
  /* Set a large enough value to accommodate the full content */
}

.expandable-div.expanded span {
  display: none;
}

.expandable-div.expanded::after {
  height: 0px;
  background-color: var(--global-bg-white);
  z-index: 999;
}

/*===================== 
   BORADS DIRECTORS
 ======================*/

#top-banner-image-bod {
  background: url(/wp-content/uploads/2023/08/bg-img-7.png) no-repeat top;
  background-size: auto;
  background-size: cover;
  position: relative;
  height: 350px;
  display: flex;
  align-items: center;
}

.board-directors-details {
  margin-top: 100px;
}

.board-directors-details .bod-box {
  background: var(--global-bg-white);
  border-radius: 10px;
  margin: 0px 0px 90px 0px;
  text-align: center;
  padding: 0px 24px 36px 24px;
}

.board-directors-details .box-img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  border: 7px solid #f5f5f5;
  position: relative;
  top: -65px;
  margin-bottom: -65px;
}

.board-directors-details .bod-box .box-detail h3 {
  font-size: 18px;
  margin: 0px 0px 6px 0px;
  color: var(--global-color-black);
  font-weight: 400;
}

.board-directors-details .bod-box .box-detail {
  margin-top: 30px;
}

.board-directors-details .bod-box .box-detail h5 {
  font-size: 14px;
  margin: 0px 0px 6px 0px;
  color: var(--global-heading-primary);
  font-weight: 400;
}

.board-directors-details .bod-box .box-detail p {
  color: var(--color-dark-grey);
  font-size: 12px;
  margin: 0;
}

.board-directors-details .bod-box .box-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*===================== 
    ABOUT US
  ======================*/
#top-banner-image-about {
  background: url(/wp-content/uploads/2023/08/banner-img.png) no-repeat top;
  background-size: auto;
  background-size: cover;
  position: relative;
  height: 350px;
  display: flex;
  align-items: center;
}

/*===================== 
    TEAM MANAGEMENT
======================*/
#top-banner-image-team-manage {
  background: url(/wp-content/uploads/2023/08/team-manage.png) no-repeat top;
  background-size: auto;
  background-size: cover;
  position: relative;
  height: 350px;
  display: flex;
  align-items: center;
}

.team-management-card {
  background-color: var(--global-bg-white);
  border-radius: 20px;
  /*border: 1px solid var(--bg-primary-color);*/
  padding: 15px 15px 20px 15px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.team-management-card::before {
  content: "";
  position: absolute;
  height: 125px;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  background: transparent linear-gradient(180deg, #004267 0%, #012d46 100%) 0%
    0% no-repeat padding-box;
}

.team-management-img {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--global-color-white);
  margin: 0 auto 20px auto;
}

.team-management-detail {
  text-align: center;
}

.team-management-detail h3 {
  font-size: 16px;
  margin: 0px 0px 6px 0px;
  color: var(--global-color-black);
  font-weight: 700;
}

.team-management-detail h5 {
  font-size: 14px;
  margin: 0px 0px 6px 0px;
  color: var(--global-heading-primary);
  font-weight: 400;
}

.team-management-detail p {
  color: var(--color-dark-grey);
  font-size: 14px;
  line-height: 24px;
}

.team-management-detail {
  margin: 0px 0px 15px 0px;
  max-height: 115px;
  overflow: hidden;
  transition: 0.5s;
  transition: all linear 0.1s;
}

.team-management-detail.active {
  max-height: 1000px;
}

.remove-elipse {
  overflow: visible !important;
  text-overflow: initial !important;
  display: initial !important;
  -webkit-line-clamp: initial !important;
  -webkit-box-orient: initial !important;
}

.team-management-card .read-more-team-detail {
  font-size: 14px;
  color: var(--global-heading-primary);
  text-transform: capitalize;
  font-weight: 700;
  cursor: pointer;
}

/*===================== 
     COMPANY INFO
 ======================*/

.company-info-card {
  background-color: var(--global-bg-white);
  border-radius: 20px;
  padding: 26px 23px 30px 23px;
  min-height: 135px;
  width: 100%;
}

.company-info-card h3 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 4px;
  text-transform: capitalize;
}

.company-info-card h5 {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 0px;
  text-transform: capitalize;
}

.address-card h4 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 4px;
  line-height: 18px;
}
.address-card a {
  display: block;
}

.address-icon {
  background-color: var(--global-bg-white);
  border-radius: 50%;
  padding: 15px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  margin: 0 auto 10px auto;
}

.address-icon img {
  width: 50px;
  height: 50px;
  filter: var(--global-img-color);
}

.address-card p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0px;
}

/*===================== 
    Gallery-Modal
  ======================*/

.galleryModal {
  background: #181d23bd;
  text-align: center;
  padding: 5%;
  z-index: 99999;
}

#closePopup {
  color: white;
  font-size: 35px !important;
  display: block;
  text-align: right;
  cursor: pointer;
}

/*  */

/*===================== 
    BRANCH-LOCATOR
  ======================*/
/*  #wpsl-stores, #wpsl-direction-details, #wpsl-gmap {
  height: 580px !important;
}*/
.branches-atm-menu-locator .menu-branches-atm-menu-container > ul {
  list-style-type: none;
  padding: 0px 50px 0px 50px;
  margin: 0;
  position: relative;
  max-width: 700px;
  display: flex;
  justify-content: center;
  margin: 20px auto;
  white-space: nowrap;
}

.branches-atm-menu-locator .menu-branches-atm-menu-container > ul::before {
  content: "";
  position: absolute;
  border-bottom: 1px solid #d2d2d2;
  width: 100%;
  bottom: 1px;
  left: 0;
  right: 0;
  z-index: -1;
}

.branches-atm-menu-locator .menu-branches-atm-menu-container > ul li {
  padding: 0px 40px 5px 40px;
  margin: 0px;
  cursor: pointer;
  font-size: 16px;
  text-transform: capitalize;
  color: var(--maintext);
  font-weight: 400;
  font-size: 16px;
}

.branches-atm-menu-locator
  .menu-branches-atm-menu-container
  > ul
  li.current_page_item {
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
}

.bank-map-box,
.contact-form-box {
  padding: 10px;
  border-radius: 20px;
  background-color: var(--global-bg-white);
}

.contact-form-box {
  padding: 20px;
  border-radius: 20px;
  background-color: var(--global-bg-white);
  height: 100%;
}

.bank-map-box iframe {
  border-radius: 10px;
}

.branch-box {
  padding: 20px 20px 20px 20px;
  border-radius: 20px;
  background-color: var(--global-bg-white);
  margin: 0px 0px 15px 0px;
}

.branch-box:last-child {
  margin: 0px 0px 0px 0px;
}

.branch-box h4 {
  font-size: 22px;
  font-weight: 700;
  color: var(--global-heading-primary);
  margin: 0px 0px 5px 0px;
}

.branch-meta-box p {
  position: relative;
  margin: 0px;
  padding: 0px 0px 0px 25px;
}

.branch-meta-box i {
  margin-right: 15px;
  position: absolute;
  left: 0px;
  top: 6px;
}

.branch-meta-box p strong {
  font-weight: 700;
  font-size: 18px;
}

.branch-meta-box p {
  font-weight: 400;
  font-size: 16px;
}

/*---------------Branch Locator Plugin Designing ---------------------*/
#ubank-styling #wpsl-wrap .wpsl-search {
  margin: 0px 0px 40px 0px;
}

#ubank-styling #wpsl-gmap {
  background-color: var(--global-bg-white);
  padding: 15px;
  border-radius: 10px;
}

#ubank-styling #wpsl-search-wrap > form {
  display: flex;
  align-items: center;
}

#ubank-styling #wpsl-search-wrap > form > div {
  display: flex;
  align-items: center;
  margin: 0px 10px 0px 10px;
}

#ubank-styling #wpsl-search-wrap > form .wpsl-input > div > label {
  font-size: 16px;
  font-weight: 700;
}

#ubank-styling #wpsl-search-wrap > form .wpsl-input > input {
  margin: 0px 2px 0px 2px;
}

#ubank-styling #wpsl-search-wrap > form #wpsl-category > label {
  font-size: 16px;
  font-weight: 700;
}

#ubank-styling #wpsl-search-wrap > form > div:first-child {
  margin: 0px 10px 0px 0px;
}

#ubank-styling .wpsl-search-btn-wrap > input {
  display: inline-block;
  padding: 12px 30px 12px 30px;
  color: var(--color-white);
  text-transform: capitalize;
  font-size: 18px;
  background-color: var(--bg-primary-color);
  border-radius: 5px;
  font-weight: 700;
  border: none;
  outline: none;
  box-shadow: none;
  background-image: unset;
}

#ubank-styling #wpsl-wrap > div {
  padding: 0px;
  background-color: unset;
}

#ubank-styling #wpsl-result-list {
  float: right;
  margin: 0px;
}

#ubank-styling #wpsl-gmap {
  float: left;
  margin: 0px;
}

#ubank-styling #wpsl-wrap #wpsl-result-list li {
  background-color: var(--global-bg-white);
  padding: 15px;
  border-radius: 15px;
  border-bottom: unset;
  margin: 0px 0px 15px 0px;
}

#ubank-styling #wpsl-wrap #wpsl-result-list li:last-child {
  margin-bottom: 0px;
}

#ubank-styling
  #wpsl-wrap
  #wpsl-result-list
  li
  .wpsl-store-location
  > p
  > strong {
  color: var(--global-heading-primary);
  font-size: 18px;
  font-weight: 700;
}

#ubank-styling
  #wpsl-wrap
  #wpsl-result-list
  li
  .wpsl-store-location
  > p
  > strong {
  color: var(--global-heading-primary);
  font-size: 18px;
  font-weight: 700;
}

#ubank-styling #wpsl-wrap #wpsl-result-list li .wpsl-store-location > p > span {
  font-size: 16px;
  font-weight: 400;
}

#ubank-styling #wpsl-wrap #wpsl-result-list li .wpsl-direction-wrap > a {
  font-size: 16px;
  font-weight: 700;
}

#ubank-styling #wpsl-result-list #wpsl-stores > ul {
  margin: 0px 10px 0px 10px;
}

#ubank-styling #wpsl-search-wrap > form .wpsl-dropdown {
  background-color: unset;
  height: 40px;
}

/*#ubank-styling #wpsl-search-wrap > form  .wpsl-dropdown.wpsl-active{
	border:2px solid var(--global-heading-primary);
}*/

#ubank-styling #wpsl-search-wrap > form .wpsl-dropdown:hover {
  box-shadow: unset;
}

#ubank-styling #wpsl-search-wrap > form .wpsl-dropdown > .wpsl-selected-item {
  color: var(--maintext);
}

#ubank-styling
  #wpsl-search-wrap
  > form
  .wpsl-dropdown
  > .wpsl-selected-item::after {
  border-top: 8px solid var(--main-text);
  margin: 0px;
  top: 41%;
}

#ubank-styling
  #wpsl-search-wrap
  > form
  .wpsl-dropdown.wpsl-active
  .wpsl-selected-item::after {
  border-bottom: none;
  margin: 0px;
}

#ubank-styling #wpsl-search-wrap .wpsl-dropdown div {
  color: var(--main-text);
  background-color: var(--global-bg-white);
}

#ubank-styling #wpsl-search-wrap .wpsl-dropdown > div > ul > li {
  color: var(--main-text);
}

#ubank-styling #wpsl-search-wrap .wpsl-dropdown > div > ul > li:hover {
  background-color: unset;
}

li.conventional-branch,
li.islamic-branch {
  position: relative;
}
li.conventional-branch::before {
  font-family: "FontAwesome";
  font-size: 18px;
  content: "\f041";
  color: var(--global-heading-primary);
  position: absolute;
  bottom: 17px;
  right: 31px;
}
li.islamic-branch::before {
  font-family: "FontAwesome";
  font-size: 18px;
  content: "\f041";
  color: var(--color-secondary);
  position: absolute;
  bottom: 17px;
  right: 31px;
}

/*===================== 
     CAREER
 ======================*/
.career-text-box p {
  font-size: 16px;
  font-weight: 400;
  color: var(--global-text-grey);
  margin-bottom: 50px;
}

#career-flow {
  position: relative;
  background: url(/wp-content/uploads/2023/08/bg-dark-mode.png) no-repeat top;
  background-size: auto;
  background-size: cover;
  padding: 100px 0px 100px 0px;
}

.career-intro {
  padding: 0px 0px 60px 0px;
}

.career-processing-steps {
  display: flex;
  justify-content: space-between;
  margin: 0px 0px 50px 0px;
}

.career-process-box {
  padding: 20px 30px 20px 30px;
  cursor: pointer;
  min-width: 240px;
}

.career-process-box.active {
  background-color: #00517b;
  border-radius: 20px;
}

.career-process-box span {
  font-size: 18px;
  font-weight: 400;
  color: var(--global-color-white);
  display: inline-block;
  border-radius: 50px;
  padding: 4px 20px;
  background-color: #055a86;
  margin-bottom: 15px;
}

.career-process-box.active span {
  color: #9bb93c;
}

.career-process-box h3 {
  font-size: 20px;
  font-weight: 400;
  color: var(--global-color-white);
  margin-bottom: 0px;
}

.career-process-item {
  display: none;
}

.career-process-item.active {
  display: block;
}

.career-process-img-box img {
  border-radius: 20px;
}

.career-process-text-box h2 {
  font-size: 40px;
  font-weight: 700;
  color: var(--global-color-white);
}

.career-process-text-box p {
  font-size: 21px;
  font-weight: 400;
  color: var(--global-color-white);
  margin: 0px;
}

.career-process-text-box span {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: var(--global-color-white);
  cursor: pointer;
}

.career-goals {
  padding: 40px 0px 40px 0px;
}

.goal-info {
  font-size: 16px;
  font-weight: 400;
  color: var(--global-text-grey);
  margin-bottom: 30px;
}

.career-goal-card {
  background-color: var(--global-bg-white);
  padding: 40px 20px 30px 20px;
  border-radius: 20px;
  text-align: center;
}

.goal-img-box {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 15px auto;
  background-color: #f5f5f5;
  border-radius: 50%;
}

.career-goal-card h3 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 15px;
}

.career-goal-card p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0px;
  line-height: 20px;
}

/*===================
    CONTACT-US
  =====================*/
.contact-info p {
  font-size: 16px;
  font-weight: 400;
  color: var(--global-text-grey);
  margin-bottom: 30px;
}

.contact-box-wrapper {
  display: flex;
  flex-wrap: wrap;
}

.contact-us-box {
  background-color: var(--global-bg-white);
  border-radius: 20px;
  padding: 15px 20px 15px 30px;
  width: 100%;
}
.contact-us-box p {
  display: flex;
}

/*.contact-us-box:first-child {
	margin-right: 15px;
}*/

.contact-us-box h3 {
  font-size: 22px;
  font-weight: 400;
  margin-bottom: 5px;
  text-transform: capitalize;
}

.contact-us-box p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0px;
}

.contact-us-box a {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 0px;
  display: block;
}

.contact-us-box p:last-child {
  margin-bottom: 0px;
}

/*===================== 
     RESOURCES
 ======================*/

.resource-info p {
  font-size: 16px;
  font-weight: 400;
  color: var(--global-text-grey);
  margin-bottom: 30px;
}

.resource-box-wrapper {
  background-color: var(--global-bg-white);
  border-radius: 20px;
  padding: 26px 20px 15px 26px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.resource-icon-box img {
  filter: var(--global-img-color);
}

.resource-icon-box {
  margin: 0px 20px 0px 0px;
  min-width: 50px;
}

.resource-icon-box p {
  font-size: 10px;
  color: var(--global-text-grey);
  text-align: center;
  margin-bottom: 0px;
}

.resource-text-box p {
  font-size: 14px;
  font-weight: 400;
  color: var(--global-text-grey);
  margin-bottom: 4px;
}

.resource-text-box p:last-child {
  margin-bottom: 0px;
}

.resource-download {
  text-align: right;
}

.resource-download a {
  font-size: 14px;
  font-weight: 400;
  color: var(--global-heading-primary);
}

/*---- FAQS ---*/

.accordion-header.active h3,
.accordion-header.active i {
  color: var(--global-heading-primary);
}

.faq-accordion-item {
  background-color: var(--global-bg-white);
  padding: 20px;
  border-radius: 10px;
}

.accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background-color: var(--global-bg-white);
}

.accordion-header h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0px;
}

.accordion-content {
  display: none;
  color: var(--global-text-grey);
  padding: 10px 0px 0px 0px;
}

.accordion-content p a {
  color: var(--global-heading-primary);
}

.accordion-content ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.accordion-content ul li {
  position: relative;
  padding-left: 24px;
}

.accordion-content ul li::before {
  content: "";
  background-image: url(/wp-content/uploads/2023/10/arrow-left-circle.svg);
  filter: var(--global-img-color);
  background-repeat: no-repeat;
  width: 10px;
  height: 15px;
  position: absolute;
  padding-right: 20px;
  left: 0px;
  top: 5px;
  background-size: contain;
}

.faqs-wrapper ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.faqs-wrapper ul li {
  position: relative;
  padding-left: 24px;
}

.faqs-wrapper ul li::before {
  content: "";
  background-image: url(/wp-content/uploads/2023/10/arrow-left-circle.svg);
  filter: var(--global-img-color);
  background-repeat: no-repeat;
  width: 10px;
  height: 15px;
  position: absolute;
  padding-right: 20px;
  left: 0px;
  top: 5px;
  background-size: contain;
}

.accordion-content ol {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.accordion-content ol li {
  position: relative;
  padding-left: 24px;
}

.accordion-content ol li::before {
  content: "";
  background-image: url(/wp-content/uploads/2023/10/arrow-left-circle.svg);
  filter: var(--global-img-color);
  background-repeat: no-repeat;
  width: 10px;
  height: 15px;
  position: absolute;
  padding-right: 20px;
  left: 0px;
  top: 5px;
  background-size: contain;
}

/*---- Resource Tab Pane  ---*/
#ubank-styling .resources-tabs {
  list-style-type: none;
  padding: 0px 50px 0px 50px;
  position: relative;
  max-width: 700px;
  display: flex;
  justify-content: center;
  margin: 20px auto;
}

.resources-tabs::before {
  content: "";
  position: absolute;
  border-bottom: 1px solid #d2d2d2;
  width: 100%;
  bottom: 1px;
  left: 0;
  right: 0;
  z-index: -1;
}

.resources-tab {
  padding: 0px 40px 5px 40px;
  margin: 0px;
  cursor: pointer;
  font-size: 16px;
  text-transform: capitalize;
  color: var(--maintext);
  font-weight: 400;
  font-size: 16px;
}

.resources-tab.active {
  color: var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
}

.resources-tab-content {
  /*padding: 10px;*/
}

.resources-tab-item {
  display: none;
}

.resources-tab-item.active {
  display: block;
}

/*---- Resource Accordion ---*/

.resources-accordion-header.active h3,
.resources-accordion-header.active i {
  color: var(--global-heading-primary);
}

.resources-accordion-header {
  padding: 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  background-color: var(--global-bg-white);
}

.resources-accordion-header h3 {
  font-size: 16px;
  font-weight: 700;
  margin: 0px;
}

.resources-accordion-content {
  display: none;
  color: var(--global-text-grey);
  padding: 20px 0px 20px 0px;
}

/*===================== 
    JOBS-FEED
 ======================*/

.aside-box {
  background-color: var(--global-bg-white);
  padding: 20px;
  border-radius: 20px;
}

#jobTable {
  overflow: scroll;
}

#jobs-feed aside form ul {
  padding: 0px;
  margin: 0px;
}

#jobs-feed aside > form > ul > li {
  background-color: var(--global-bg-white);
  border-radius: 20px;
  padding: 20px;
  min-height: 220px;
  margin-bottom: 15px;
}

#jobs-feed aside > form > ul > li > h4 {
  font-size: 24px;
  font-weight: 400;
  text-transform: capitalize;
}

#jobs-feed aside > form > ul > li > ul > li > label {
  font-size: 16px;
  font-weight: 400;
  text-transform: capitalize;
}

.job-info-box {
  background-color: var(--global-bg-white);
  border-radius: 20px;
  padding: 20px;
  min-height: 220px;
}

.job-info-box {
  background-color: var(--global-bg-white);
  border-radius: 20px;
  padding: 20px;
  min-height: 220px;
}

.job-status-pill {
  border-radius: 15px;
  padding: 0px 2px;
  font-weight: 400;
  line-height: 25px;
  display: inline-flex;
  align-items: center;
  min-width: 60px;
  text-align: center;
  justify-content: center;
  font-size: 15px;
}

.active-pill {
  background-color: #9bb93c33;
  color: #9bb93c;
}

.close-pill {
  background-color: #b93c3c33;
  color: #b93c3c;
}

.job-info-box h3 {
  margin-bottom: 0px;
}

.job-metas ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.job-metas ul li {
  display: flex;
  align-items: center;
}

.job-metas ul li img {
  display: block;
  margin: 0px 10px 0px 0px;
  filter: var(--global-img-color);
}

.job-metas ul li span {
  display: block;
  font-size: 16px;
  font-weight: 400;
  color: var(--global-primary-color);
  margin: 0px 15px 0px 5px;
}

.job-metas p {
  color: var(--global-color-light-grey);
  margin-bottom: 0px;
}

.job-status ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: flex;
}

.job-status ul li label {
  font-size: 16px;
  font-weight: 800;
}

.job-status ul li span {
  font-size: 14px;
  font-weight: 400;
  color: var(--global-color-light-grey);
}

.job-status ul li a {
  font-size: 16px;
  font-weight: 700;
  text-transform: capitalize;
}

.job-status ul li a.apply {
  color: var(--color-secondary);
}

.job-status ul li a.close,
.job-detail-metas ul li a.close {
  color: var(--color-danger);
}

.job-status ul li:nth-child(2) {
  margin: 0px 50px 0px 50px;
}

/*---- JOB DETAIL ----*/
.job-detail-heading h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 4px;
}

.job-detail-box {
  background-color: var(--global-bg-white);
  border-radius: 20px;
}

.job-detail-head {
  padding: 20px;
  border-bottom: 1px solid var(--global-bg-body-grey);
}

.job-detail-body {
  padding: 20px;
}

.job-detail-metas ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.job-detail-metas ul li {
  display: flex;
  align-items: center;
}

.job-detail-metas ul li a {
  color: var(--color-secondary);
  font-size: 16px;
  font-weight: 700;
  text-transform: capitalize;
}

.job-detail-metas ul li img {
  display: block;
  width: 15px;
  height: 15px;
  margin: 0px 10px 0px 0px;
  filter: var(--global-img-color);
}

.job-requirement ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.job-requirement ul li {
  margin: 0px 50px 0px 0px;
}

.job-requirement ul h4 {
  margin: 0px 0px 10px 0px;
  font-size: 16px;
  font-weight: 700;
}

.job-requirement ul p {
  margin: 0px;
  font-size: 16px;
  font-weight: 400;
}

.job-description-meta h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

.job-description-meta h5 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 0px;
  color: var(--global-heading-primary);
}

.job-description-meta p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 20px;
  color: var(--global-color-light-grey);
}

/*===================== 
   PROCUREMENT PORTAL
 ======================*/

.procurement-card-wrapper {
  padding: 30px 20px 30px 20px;
  border-radius: 20px;
  background-color: var(--global-bg-white);
  overflow: hidden;
}

.procurement-card-wrapper.disable * {
  opacity: 0.6;
}

.procurement-card-wrapper.disable {
  background-color: #81818130;
  cursor: no-drop;
}

.procurement-card-wrapper.disable a {
  pointer-events: none;
}

.procurement-card-wrapper > span {
  font-size: 14px;
  font-weight: 400;
  display: block;
  margin-bottom: 0px;
}

.procurement-card-wrapper h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

.procurement-card-wrapper a {
  font-size: 14px;
  color: var(--global-heading-primary);
  text-transform: capitalize;
  font-weight: 700;
}

.procurement-over-view {
  margin-bottom: 15px;
}

.procurement-over-view > p {
  font-size: 14px;
  color: var(--color-dark-grey);
  margin-bottom: 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 400;
}
.rfp-download {
  font-size: 18px;
  display: inline-block;
  padding: 15px 22px 15px 22px;
  text-transform: capitalize;
  color: var(--color-white);
  background-color: var(--bg-primary-color);
  border-radius: 5px;
  font-weight: 700;
}
.rfp-download:hover {
  color: var(--color-white);
}

/*===================== 
     Corportae Portal
 ======================*/
.corporate-portal-text p:first-child {
  font-size: 16px;
  font-weight: 700;
  color: var(--global-text-grey);
  margin-bottom: 10px;
}

.corporate-portal-text p {
  font-size: 16px;
  font-weight: 400;
  color: var(--global-text-grey);
  margin-bottom: 40px;
  max-width: 560px;
}
/* 
.corporate-text-box {
  background-color: var(--global-bg-white);
  padding: 20px;
  border-radius: 20px;
  min-height: 185px;
} */

.corporate-text-box p {
  font-size: 14px;
  font-weight: 400;
  color: var(--global-text-grey);
  max-width: 380px;
  margin: 0px;
}

.corporate-text-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0px 0px 15px 0px;
  text-transform: capitalize;
}

.galleryCard h4 {
  margin: 10px 0px 5px 0px;
}

/*===================== 
     REMIT-PARTNER
 ======================*/
.remit-partner-box {
  background-color: var(--global-bg-white);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  border-radius: 15px;
  text-align: center;
  width: 100%;
  border: none;
}

.remit-partner-box img {
  max-width: 250px;
  max-height: 250px;
}
.uremit-popup-list {
  min-height: 300px;
  max-height: 500px;
  overflow: auto;
}
.uremit-popup-list ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
}
.uremit-popup-list ul li {
  width: 50%;
  padding-left: 24px;
  position: relative;
  text-transform: uppercase;
  color: var(--main-text);
}
.uremit-popup-list ul li::before {
  content: "";
  background-image: url(/wp-content/uploads/2023/10/arrow-left-circle.svg);
  filter: var(--global-img-color);
  background-repeat: no-repeat;
  width: 10px;
  height: 15px;
  position: absolute;
  padding-right: 20px;
  left: 0px;
  top: 5px;
  background-size: contain;
}
.uremit-modal {
  border-radius: 20px;
  background-color: var(--global-bg-color-white);
}
.uremit-body h4 {
  font-size: 28px;
  margin: 0px 0px 20px 0px;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--main-text);
}
/*===================== 
     VIDEOS-PAGE
 ======================*/

#videos iframe {
  width: 100% !important;
  min-height: 315px !important;
}

/*===================== 
     FOOTER
 ======================*/

#site-footer {
  position: relative;
  background: #064366;
  padding: 50px 0px 0px 0px;
  background-color: var(--footer-bg-color);
  overflow: hidden;
}

#site-footer:before {
  content: "";
  background: url(/wp-content/uploads/2025/09/map-bg-11.svg);
  background-position-x: 0%;
  background-position-y: 0%;
  background-repeat: repeat;
  background-size: auto;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  max-width: 800px;
  height: 70%;
  position: absolute;
  top: 105px;
  left: 0;
  right: -160px;
  margin: auto;
  z-index: 1;
}

/*#site-footer:after {
	content: "";
	width: 100%;
	height: 100%;
	background: var(--footer-bg-color);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}*/

#site-footer * {
  z-index: 3;
}

.newsletter .newsletter-detail h3 {
  font-size: 35px;
  color: var(--global-color-white);
  font-weight: 400;
  margin-bottom: 30px;
  max-width: 379px;
}

.newsletter .newsletter-detail form {
  background-color: transparent;
  border: 1px solid var(--border-grey);
  color: var(--color-dark-grey);
  border-radius: 25px;
  height: 48px;
  padding: 2px;
}

.newsletter .newsletter-detail form input {
  border: none;
  height: 100%;
  color: var(--text-white) !important;
}

#ubank-styling .newsletter form input:focus {
  outline: none;
  box-shadow: none;
}

#ubank-styling .newsletter form input::placeholder {
  color: var(--text-white) !important;
}

.newsletter .newsletter-detail form button {
  min-width: 172px;
  background-color: #6e91ab;
  border-radius: 0px 25px 25px 0px;
  color: var(--text-white) !important;
  font-size: 16px;
  text-transform: uppercase;
  border: none;
}

.newsletter .newsletter-detail form button i {
  margin: 0px 5px 0px 5px;
}

#ubank-styling .newsletter .frm_submit {
  display: flex;
  justify-content: flex-start;
}

#ubank-styling .newsletter .frm_submit button {
  min-width: 115px;
  background-color: #6e91ab;
  border-radius: 35px;
  color: #fff;
  font-size: 13px;
  height: 35px;
  text-transform: uppercase;
  border: 1px solid #fff;
  padding: 0px;
  margin: 0px;
}

#ubank-styling .newsletter input[type="email"] {
  background-color: transparent;
  border: 1px solid #6e91ab;
  border-radius: 25px;
  height: 35px;
  padding: 0px 10px;
  color: #fff;
  font-size: 15px;
}

.newsletter ::placeholder {
  color: #fff;
}

.newsletter-btn input {
  min-width: 115px;
  background-color: #6e91ab;
  border-radius: 35px;
  color: #fff;
  font-size: 13px;
  height: 35px;
  text-transform: uppercase;
  border: 1px solid #fff;
  margin-top: 10px;
}

/*.company-counetr {
	display: flex;
	justify-content: center;
	align-items: center;
}*/

.company-counetr .counter-box:nth-child(1) {
  margin-right: 40px;
}

.company-counetr .counter-box h4 {
  color: var(--global-color-white);
  font-size: 40px;
  font-weight: 400;
  margin: 0;
}

.company-counetr .counter-box p {
  color: var(--global-color-white);
  font-size: 15px;
  font-weight: 400;
  margin: 0px;
}

.main-footer .footer-links h4,
.subscribe-to-news-letter h4 {
  color: var(--global-color-white);
  font-size: 20px;
  margin: 0px 0px 17px 0px;
  font-weight: 700;
  text-transform: uppercase;
}
.subscribe-to-news-letter p {
  margin: 0px 0px 0px 0px;
  color: var(--global-color-white);
  font-size: 15px;
}

.main-footer .footer-links ul {
  margin: 0;
  padding: 0;
}

.main-footer .footer-links ul li {
  list-style: none;
  margin: 0px 0px 2px 0px;
}

.main-footer .footer-links ul li a {
  color: var(--global-color-white);
  font-size: 15px;
  font-weight: 400;
  transition: 0.5s;
}

.main-footer .footer-links {
  margin: 0px 0px 40px 0px;
}

.main-footer .footer-links ul li a:hover {
  color: #bfbfbf;
}

.main-footer .footer-links p {
  font-size: 15px;
  color: var(--global-color-white);
  font-weight: 100;
}

.main-footer .footer-links h6 {
  margin: 0;
  color: var(--global-color-white);
}

.apps-icons img {
  width: 100%;
  /* max-width: 80px; */
}

.ubank-icons {
  margin-top: 30px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.ubank-icons img {
  width: 100%;
  /* max-width: 103px; */
  margin: 10px;
}

.copyright p {
  margin: 0;
  font-size: 15px;
  color: var(--global-color-white);
}

.copyright {
  margin-top: 60px;
}

.follow-links ul {
  display: flex;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

.follow-links ul li a {
  color: var(--global-color-white);
}

.follow-links ul li {
  list-style: none;
}

.top-footer .sitemap-links div ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-footer .sitemap-links div ul li {
  margin: 0px 10px 0px 0px;
  border-right: 1px solid #fff;
  line-height: 10px;
  padding-right: 10px;
}

.top-footer .sitemap-links div ul li:last-child {
  margin: 0px;
  padding: 0px;
  border: none;
}

.top-footer .sitemap-links div ul li a,
.site-last-updated span {
  font-size: 14px;
  color: var(--text-white);
}

.sub-footer {
  padding: 10px 10px;
  border-top: 1px solid var(--global-color-white);
}

.follow-links ul {
  display: flex;
  flex-wrap: wrap;
}

.follow-links ul li a {
  padding: 0px;
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  border: 2px solid var(--global-color-white);
  color: var(--global-color-white);
  font-size: 16px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  display: block;
  margin: 0 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
}

.follow-links ul li a i {
  font-family: "FontAwesome";
}

.follow-links ul li a:hover {
  transform: translateY(-10px);
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  box-shadow: 0px 25px 18px -13px var(--global-color-white);
}

.odd-row {
  background-color: var(--global-bg-white);
}

.career-alternate-title {
  background: var(--global-bg-white);
}

.career-alternate-title h2 {
  margin: 0;
  text-align: center;
  padding: 40px 0px 8px 0px;
  font-size: 40px;
}

.career-alternate-sections .image-wrapper img {
  max-height: 400px;
}

/* IBAN Generate */
.ibanGen {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-in;
}

.iban-form-btn {
  cursor: pointer;
}

/* Remmitance Tracker */

/* .remmitance-table tr th {
    background-color: #fff;
    padding: 15px 20px;
    background: #3D7396;
    color: #fff;
    font-size: 18px;
}
.remmitance-table tr td{
     background-color: #f8f8f8;
     padding: 20px 20px;
} */

.what-we-offer-item a:hover {
  color: var(--global-primary-color);
}

/*===================
    NEWS-TICKER
  =====================*/
.marquee-placeholder {
  width: 15%;
  background-color: var(--bg-primary-color);
  color: var(--color-white);
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0px 0px 0px 40px;
}

.marquee-placeholder h4 {
  font-size: 16px;
  text-transform: uppercase;
  color: var(--color-white);
  font-weight: 700;
}

.marquee-container {
  width: 85%;
  overflow: hidden;
  position: relative;
  background-color: var(--global-color-sky-blue);
  height: 50px;
  display: flex;
  align-items: center;
}

.marquee-content {
  white-space: nowrap;
  display: inline-block;
  box-sizing: content-box;
  width: 100%;
}

[lang="en-US"] .marquee-content {
  animation: ticker 400s infinite;
  -webkit-animation-name: ticker;
  animation-name: ticker;
  -webkit-animation-duration: var(--duration);
  animation-duration: var(--duration);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}
[lang="ur"] .marquee-content {
  animation: ticker 400s infinite;
  -webkit-animation-name: ticker-reverse;
  animation-name: ticker-reverse;
  -webkit-animation-duration: var(--duration);
  animation-duration: var(--duration);
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
}

.marquee-content:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -ms-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

.marquee-content > ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  /*padding-left: 100%;*/
}

.marquee-content > ul > li {
  font-size: 16px;
  color: var(--global-color-white);
  margin: 0;
  display: inline-block;
  /*padding-right: 50px;*/
  padding: 0 2rem;

  font-weight: 400;
}
#all-success-stories .multiline-heading-2 {
  display: none;
}

#all-success-stories .view-all {
  display: none;
}

#all-success-stories .section-padding {
  padding-top: 30px;
}
/* Animation keyframes */
/*@keyframes marquee-slide {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-100%);
  }
}*/

/* Keyframe animations */
@-webkit-keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes ticker {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    visibility: visible;
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

/* New keyframe animation for sliding from left to right */
@-webkit-keyframes ticker-reverse {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes ticker-reverse {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/*TICKER END */

.backs-account-template-slider:not(:last-child) {
  border-bottom: 1px solid #ddd9;
  padding-bottom: 1rem;
}

.search-container .page-overview p:first-child,
.search-container .page-overview p:first-child *,
.search-container .page-overview p:nth-child(2) {
  display: block;
}

.search-container .page-overview * {
  display: none;
}
/* SITEMAP PAGE */
.page-site-map #cat-detail-section .detail-top-heading > ul > li > a {
  font-size: 17px;
  font-weight: 600;
}
.page-site-map #cat-detail-section .detail-top-heading > ul > li > ul {
  margin: 10px 0;
}
.page-site-map #cat-detail-section .detail-top-heading > ul > li > ul > li > a {
  color: var(--main-text);
}
.page-site-map
  #cat-detail-section
  .detail-top-heading
  > ul
  > li
  > ul
  > li
  > ul {
  margin: 10px 0;
}
.page-site-map
  #cat-detail-section
  .detail-top-heading
  > ul
  > li
  > ul
  > li
  > ul
  > li
  > a {
  color: var(--main-text);
  /* font-weight: 600; */
}
.page-site-map
  #cat-detail-section
  .detail-top-heading
  > ul
  > li
  > ul
  > li
  > ul
  > li
  > ul {
  margin: 10px 0;
}
.page-site-map
  #cat-detail-section
  .detail-top-heading
  > ul
  > li
  > ul
  > li
  > ul
  > li
  > ul
  > li
  > a {
  color: var(--main-text);
}
@media (min-width: 576px) {
  .remit-wrapper .modal-dialog {
    max-width: 600px;
  }
}