/* ============================================================
   PROJECT : Vallant Bank
   FILE    : main.css
   VERSION : 2.0 (Optimized)
   ============================================================
   TABLE OF CONTENTS
   ============================================================
   01. Design Tokens          (:root variables)
   02. Font Family Helpers    (utility classes)
   03. Reset & Base Styles    (body, img, a, lenis)
   04. Custom Scrollbar
   05. Utility Classes        (bg, z-index, spacing, borders)
   06. Form Elements          (inputs, textarea, placeholder)
   07. Typography             (headings)
   08. Buttons
   09. Common / Shared        (section titles, parallax, animation)
   10. Header
   11. Merger Update Banner
   12. Welcome Hero
   13. Branch Locator
   14. Footer
   15. Brand Transition
   16. Banking Services
   17. CTA
   18. Conversion Guide
   19. FAQ Accordion
   20. Treasury Management
   ============================================================ */

/* ============================================================
   01. DESIGN TOKENS
   ============================================================ */
:root {
	/* --- Brand Colors --- */
	--color-primary: #31d0ff; /* Cyan accent — buttons, borders, icons */
	--color-dark-navy: #0e153e; /* Deep bg, button hover, header bottom */
	--color-mid-navy: #17215c; /* Body text, headings, header top layer */
	--color-steel-blue: #1c689c;
	--colo-tealish-blue: #dfe1e8;

	/* --- Neutral / Surface Colors --- */
	--color-white: #ffffff;
	--color-soft-peach: #efefef; /* Light section backgrounds */
	--color-light-gray: #f5f5f5; /* Conversion guide right-box */
	--color-divider: #cfcfcf; /* Accordion separator lines */
	--color-muted-label: #b1b1b1; /* Conversion guide subheadings */
	--color-table-border: #ceccc8; /*table border color */

	/* --- Typography — Font Families --- */
	--font-extended: "area-extended", sans-serif;
	--font-extended-light: "area-extended-light", sans-serif;
	--font-calvino: "calvino", sans-serif;
	--font-normal-black: "area-normal-black", sans-serif;
	--font-normal-xlight: "area-normal-extralight", sans-serif;

	/* --- Typography — Font Sizes --- */
	--text-base: 18px;
	--text-sm: 16px;
	--text-xs: 14px;
	--text-xxs: 12px;
	--text-micro: 10px;

	/* --- Typography — Line Heights --- */
	--line-height-base: 1.39; /* body */
	--line-height-heading: 1.24; /* h1–h6 */
	--line-height-normal: 1.5; /* inputs, textarea */

	/* --- Spacing Scale --- */
	--space-xs: 10px;
	--space-sm: 16px;
	--space-md: 20px;
	--space-lg: 24px;
	--space-xl: 30px;
	--space-2xl: 50px;
	--space-3xl: 70px;
	--space-4xl: 80px;

	/* --- Borders --- */
	--border-accent-width: 7px; /* .common-border-top thick top line */
	--border-radius-btn: 3px; /* buttons */
	--border-radius-pill: 25px; /* conversion guide vertical bar */

	/* --- Transitions --- */
	--transition-base: all 0.3s linear;

	/* --- Z-index Scale --- */
	--z-base: 1;
	--z-mid: 2;
	--z-high: 4;
	--z-nav: 999;

	/* --- Layout — Container Max Widths --- */
	--container-default: 1126px;
	--container-conversion: 1134px;
	--container-header: 1144px;
	--container-footer: 1342px;
	--container-banking: 1054px;
	--container-faq: 1096px;
}

/* ============================================================
   02. FONT FAMILY HELPERS
   ============================================================ */
.tk-area-extended {
	font-family: var(--font-extended);
}
.tk-area-extended-light {
	font-family: var(--font-extended-light);
}
.tk-calvino {
	font-family: var(--font-calvino);
}
.tk-area-normal-black {
	font-family: var(--font-normal-black);
}
.tk-area-normal-extralight {
	font-family: var(--font-normal-xlight);
}

/* ============================================================
   03. RESET & BASE STYLES
   ============================================================ */
body {
	font-size: var(--text-base);
	font-family: var(--font-normal-black);
	color: var(--color-mid-navy);
	font-weight: 600;
	line-height: var(--line-height-base);
}

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

a {
	text-decoration: none;
	color: #000;
}

a:hover {
	color: #000;
}

/* --- Lenis Smooth Scroll --- */
html.lenis,
html.lenis body {
	height: auto;
}

.lenis.lenis-smooth {
	scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
	overscroll-behavior: contain;
}

.lenis.lenis-stopped {
	overflow: hidden;
}

/* ============================================================
   04. CUSTOM SCROLLBAR
   ============================================================ */
.os-scrollbar-handle {
	background: var(--color-primary);
}

body > .os-scrollbar {
	z-index: var(--z-nav);
}

/* ============================================================
   05. UTILITY CLASSES
   ============================================================ */

/* --- Backgrounds --- */
.bg-soft-peach {
	background-color: var(--color-soft-peach);
}
.bg-deep-cove {
	background-color: var(--color-dark-navy);
}
.bg-steel-blue {
	background-color: var(--color-steel-blue);
}

/* --- Z-index --- */
.z-4 {
	z-index: var(--z-high) !important;
}

/* --- Border Accent (thick top line used on section wrappers) --- */
.common-border-top {
	border-top: var(--border-accent-width) solid var(--color-primary);
}

/* --- Layout Container Override --- */
.container {
	max-width: var(--container-default);
}

/* --- Background Helpers --- */
.bg-fix {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
/* ============================================================
   06. FORM ELEMENTS
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
	width: 100%;
	padding: 10px 12px;
	background: transparent;
	border: 0;
	color: var(--color-white);
	font-family: var(--font-normal-black);
	font-size: var(--text-xxs);
	font-weight: 400;
	line-height: var(--line-height-normal);
	opacity: 1;
	border-bottom: 1px solid var(--color-primary);
}

textarea {
	height: 116px;
}

input:focus,
textarea:focus {
	outline: none;
	box-shadow: none;
}
::placeholder {
	color: var(--color-white);
	font-size: var(--text-xxs);
}
/* ============================================================
   07. TYPOGRAPHY — HEADINGS
   ============================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--color-mid-navy);
	font-family: var(--font-extended);
	font-style: normal;
	font-weight: 800;
	line-height: var(--line-height-heading);
}

h1 {
	font-size: 40px;
}
h2,
.section-title {
	font-size: 32px;
}
h3 {
	font-size: 28px;
}
h4 {
	font-size: 24px;
}
h5 {
	font-size: 22px;
}
h6 {
	font-size: 21px;
}
/* ============================================================
   08. BUTTONS
   ============================================================ */
.location-bar #wpsl-search-btn,
.btn-1 {
	color: var(--color-dark-navy);
	font-family: var(--font-extended);
	font-size: 15px;
	font-weight: 900;
	letter-spacing: 0.6px;
	line-height: normal;
	background: transparent;
	border: 3px solid var(--color-primary);
	padding: 12px 31.5px 17px;
	text-align: center;
	display: inline-block;
	border-radius: var(--border-radius-btn);
	transition: var(--transition-base);
}
.location-bar #wpsl-search-btn:hover,
.btn-1:hover {
	background: var(--color-primary);
}
.location-bar #wpsl-search-btn {
	color: var(--color-white);
}
/* Transparent/outlined variant */

/* ============================================================
   09. COMMON / SHARED
   ============================================================ */
/* --- Section Title Wrapper --- */
.section-title-wrapper h2,
.section-title-wrapper .section-title {
	letter-spacing: 0.96px;
}

/* ============================================================
   10. HEADER
   ============================================================ */
.header-area {
	background: var(--color-mid-navy);
	/* position: fixed;
    width: 100%;
    z-index: 99; */
}

/* Dark overlay behind top nav row */

.manu-area::before {
	content: "";
	position: absolute;
	left: -50%;
	top: 0;
	height: 100%;
	width: calc(100% + 5000px);
	background: var(--color-dark-navy);
	transform: translateX(-50%);
	z-index: var(--z-base);
}
.manu-area .menu {
	position: relative;
	z-index: 2;
}
.header-area .container {
	max-width: var(--container-header);
}

.header-top-area {
	padding: 30px 0;
}

.header-logo img {
	max-width: 433px;
}

.manu-area {
	padding: 10.5px 0 18.5px;
}

.new-account-info ul,
.manu-area ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

.manu-area ul li {
	display: inline-block;
	margin-right: 43px;
}

.manu-area ul li:last-child {
	margin-right: 0;
}

.manu-area ul li a {
	color: var(--color-white);
	font-family: var(--font-extended);
	font-size: 15px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 0.45px;
	scroll-behavior: smooth;
	transition: var(--transition-base);
}

.manu-area ul li:hover a {
	color: var(--color-primary);
}

/* ============================================================
   11. MERGER UPDATE BANNER
   ============================================================ */
.merger-update-area {
	background: var(--color-mid-navy);
	padding: 45px 0 38px;
}

.plus-icon {
	color: var(--color-primary);
	font-family: var(--font-extended);
	font-size: 64px;
	font-weight: 600;
	line-height: 1.04;
}

.pinnacle-img {
	max-width: clamp(145px, 50vw, 254px);
}

.morris-img {
	max-width: clamp(166px, 50vw, 244px);
}

.merger-update-img-wrapper {
	gap: 38px;
	margin-top: var(--space-md);
}

/* ============================================================
   12. WELCOME HERO
   ============================================================ */
.welcome-hero-area {
	padding: 28px 0 65px;
}

.brand-logo {
	margin-bottom: 15px;
}

.brand-logo img {
	max-width: clamp(183px, 50vw, 389px);
}

/* Play button centered over video thumbnail */
.play-btn {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: var(--z-base);
}

.play-btn img {
	max-width: clamp(51px, 15vw, 156px);
}

.welcome-content {
	max-width: 824px;
}

.welcome-content p strong {
	font-weight: 900;
}

.welcome-cta-buttons {
	gap: 45px;
	margin-top: var(--space-xl);
}
.welcome-cta-buttons .btn-1 {
	min-width: 300px;
}

.welcome-video-wrapper {
	margin-top: 60px;
}

/* ============================================================
   13. BRANCH LOCATOR
   ============================================================ */
.branch-locator-area .section-title-wrapper {
	padding: 50px 0;
}
.bottom-section-title .section-title-wrapper {
	gap: 32px;
}
.top-section-title .section-title-wrapper.version-2 {
	padding: 71px 0 80px;
}
.top-section-title .section-title-wrapper.version-2 h2 {
	margin-bottom: var(--space-md);
}

/* ============================================================
   13. BRANCH LOCATOR
   ============================================================ */

/* --- Search Panel --- */
.location-bar .wpsl-search {
	width: 360px;
	float: left;
	z-index: 101;
	padding: var(--space-md) var(--space-xl);
	margin-bottom: 0;
	background: var(--color-mid-navy);
}

/* --- Google Map --- */
.location-bar #wpsl-gmap {
	width: calc(100% - 360px);
	height: 582px !important;
	touch-action: auto !important;
}

.wpsl-more-info-listings .wp-block-heading {
	font-size: 16px;
	color: #31d0ff;
}

/* --- Reset Plugin Float --- */
.location-bar #wpsl-search-btn,
.location-bar #wpsl-search-wrap div,
.map_sec #wpsl-search-wrap div {
	float: none;
	display: block;
	margin: 0 auto !important;
}

/* --- Search Label --- */
.location-bar .wpsl-input label {
	width: 100%;
	display: block;
	float: none;
	text-align: center;
	color: var(--color-white);
	font-size: 20px;
	font-weight: 700;
}

/* --- Search Input --- */
.location-bar #wpsl-search-input {
	width: 175px;
	float: left;
	padding: 10px 12px;
	color: var(--color-white);
	font-size: var(--text-xs);
	font-family: var(--font-extended);
	letter-spacing: 1.4px;
	border: 0;
	border-bottom: 1px solid var(--color-primary);
	border-radius: 0;
	background: transparent;
}

/* --- Radius Dropdown --- */
.location-bar #wpsl-search-wrap .wpsl-select-wrap {
	float: right;
}

.location-bar #wpsl-radius label {
	display: none;
}

.location-bar .wpsl-dropdown {
	height: 42px;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--color-primary);
	border-radius: 0;
}

/* --- Dropdown Selected Item --- */
.location-bar #wpsl-wrap .wpsl-selected-item {
	padding: 10px 12px;
	color: var(--color-white);
	font-size: var(--text-xs);
}

.location-bar .wpsl-selected-item:after {
	width: 25px;
	height: 25px;
	right: -6px;
	margin-top: -9px;
	border: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 14L12 19L17 14H7Z' fill='%2300D7FF'/%3E%3Cpath d='M7 10L12 5L17 10H7Z' fill='%2300D7FF'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* --- Search Button --- */
.location-bar #wpsl-search-btn {
	padding: 1px 15px 5px;
}

.location-bar .wpsl-search-btn-wrap {
	clear: both;
	padding-top: var(--space-xl);
}

/* --- Results Wrapper --- */
.location-bar #wpsl-wrap {
	background: var(--color-soft-peach);
}

.location-bar #wpsl-result-list {
	width: 360px;
	float: left;
	margin: 0;
}

.location-bar #wpsl-result-list ul {
	padding: 15px var(--space-md) 0;
}

/* --- Result Card --- */
.location-bar #wpsl-wrap #wpsl-result-list li {
	position: relative;
	min-height: 110px;
	overflow: visible;
	cursor: pointer;
	margin-bottom: 15px;
	padding: 16px 15px 15px 50px;
	border: 0;
	background-color: var(--color-white);
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13 15.87 2 12 2ZM12 11.5C10.62 11.5 9.5 10.38 9.5 9C9.5 7.62 10.62 6.5 12 6.5C13.38 6.5 14.5 7.62 14.5 9C14.5 10.38 13.38 11.5 12 11.5Z' fill='%2300D7FF'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 5px 16px;
	background-size: 44px;
}

/* --- Result Text --- */
.location-bar #wpsl-result-list li p {
	margin: 0;
	padding: 0;
	padding-right: 68px;
	font-size: 13px;
	line-height: 1.5;
	font-weight: 400;
}

.location-bar #wpsl-result-list li p strong {
	font-size: var(--text-sm);
	font-weight: 800;
}

.location-bar #wpsl-result-list li .wpsl-contact-details {
	margin-top: 5px;
}

#wpsl-result-list a {
	font-weight: bold;
}

/* --- Direction Link --- */
.location-bar #wpsl-result-list li .wpsl-direction-wrap {
	position: absolute;
	top: var(--space-md);
	right: 15px;
	font-size: var(--text-xs);
	font-style: italic;
}

.location-bar #wpsl-result-list li .wpsl-direction-wrap a {
	display: none;
}

/* --- Store Scroll Area --- */
.location-bar #wpsl-stores {
	height: 403px !important;
	overflow-y: scroll !important;
}

/* --- Store Details Toggle --- */
.wpsl-store-details.wpsl-store-listing {
	display: inline-block;
	margin-top: 10px;
	color: var(--color-mid-navy);
}

.wpsl-store-details.wpsl-store-listing:before {
	border-top: 5px solid var(--color-mid-navy);
}

.wpsl-store-details.wpsl-store-listing.wpsl-active-details:before {
	border-bottom: 5px solid var(--color-mid-navy);
}

/* --- Gutenberg Heading --- */
.wp-block-heading {
	margin-top: 10px;
	font-size: 20px;
}
/* ============================================================
   14. FOOTER
   ============================================================ */
.footer-area .container {
	max-width: var(--container-footer);
}

.footer-content {
	padding-top: 0;
}

.footer-content h3 {
	color: var(--color-primary);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.21;
	letter-spacing: 0.56px;
}

/* Decorative image positioned at right of footer */
.footer-img {
	position: absolute;
	top: 0;
	right: 114px;
	height: 100%;
	max-width: 296px;
	z-index: var(--z-base);
}

.social-link-wrapper {
	gap: 23px;
	margin-top: var(--text-sm); /* 16px */
}

.social-link svg path {
	transition: var(--transition-base);
}

.social-link:hover svg path {
	fill: var(--color-primary);
}

.copy-right-text {
	color: var(--color-white);
	font-size: var(--text-xs);
	letter-spacing: 0.28px;
}

.other-link.other-link-1 {
	max-width: 35px;
}

.other-link img {
	max-width: 42px;
}

.other-link-wrapper {
	gap: 31px;
}

.footer-bottom-wrapper {
	padding: 26px 0 34px;
}

.footer-bottom-wrapper .row {
	--bs-gutter-y: 17px;
}

.line-wrapper {
	margin-top: var(--space-xl);
}

/* ============================================================
   15. BRAND TRANSITION
   ============================================================ */
.brand-transition-area {
	padding: 47px 0 65px;
}

.brand-transition-area .section-title-wrapper .section-title {
	margin-bottom: var(--space-md);
}

.brand-transition-area .section-inner-content p {
	margin-bottom: 27px;
}

/* Version 2 — inverted heading color for dark backgrounds */
.brand-transition-area.version-2 {
	padding: 32px 0 46px;
}

.brand-transition-area.version-2 .section-title-wrapper .section-title,
.brand-transition-area.version-2 .section-title-wrapper h2 {
	color: var(--color-primary);
}

.brand-transition-area.version-2 .section-inner-content p strong {
	font-weight: 900;
}

/* ============================================================
   16. BANKING SERVICES
   ============================================================ */
.banking-services-area {
	padding: var(--space-4xl) 0;
}

.banking-services-area .container {
	max-width: var(--container-banking);
}

.banking-services-wrapper {
	max-width: 998px;
}

.banking-services-wrapper .row {
	--bs-gutter-x: 211px;
	--bs-gutter-y: 70px;
}

.info-box-content {
	margin-top: 38px;
	max-width: 374px;
}

.info-box-content h6 {
	letter-spacing: 0.63px;
	margin-bottom: var(--space-md);
}

/* ============================================================
   17. CTA
   ============================================================ */
.cta-area {
	padding: 72px 0;
}

.cta-content h2 {
	margin-bottom: 26px;
}

.cta-content .btn-1 {
	margin-top: var(--space-md);
	padding: 12.5px 63.5px 17.5px;
}

/* ============================================================
   18. CONVERSION GUIDE
============================================================ */
.conversion-guide-item {
	padding: 42px 0;
}
.bank-comparison-guide-item .container,
.conversion-guide-item .container {
	max-width: var(--container-conversion);
}
.conversion-guide-item .row {
	--bs-gutter-x: 79px;
}
.conversion-guide-img img {
	display: block;
	margin: 0 auto;
}

/* --- Content Panel --- */
.conversion-guide-content {
	padding-left: 28px;
}

/* Left cyan vertical bar accent */
.conversion-guide-content.position-relative.z-2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 3px;
	background: var(--color-primary);
	border-radius: var(--border-radius-pill);
}

.conversion-guide-content-title-wrapper {
	margin-bottom: var(--space-xl);
}

.conversion-guide-content-title-wrapper h4 {
	letter-spacing: 0.72px;
	margin-bottom: 18px;
}
/* card-guide */
.card-guide-item {
	padding-top: 58px;
}
.card-guide-item .container {
	max-width: 1108px;
}
.card-guide-img img {
	max-width: 263px;
}
.card-guide-item .row {
	--bs-gutter-x: 67px;
}
.card-guide-item .conversion-guide-content {
	margin-top: 85px;
}
/* banking transition guide start */
.category-label {
	color: var(--color-mid-navy);
	font-size: 16px;
	letter-spacing: 1.28px;
}
.table {
	--bs-table-border-color: var(--color-table-border);
	--bs-border-width: 2px;
	--bs-table-color: var(--color-mid-navy);
}
.header-status-bar .col-old {
	background: var(--color-steel-blue);
}
.header-status-bar .col-new {
	background: var(--color-primary);
}
.header-status-bar th {
	color: var(--color-white);
	font-size: 21px;
	font-weight: 700;
	line-height: normal;
	padding: 12px 25px 20px;
}
.table tr {
	vertical-align: baseline;
}
.table tr.brand-logo-info {
	vertical-align: middle;
}
.brand-logo-info .old-account-info > img {
	max-width: clamp(100px, 25vw, 144px);
	margin-right: auto;
	margin-left: auto;
}
.brand-logo-info .new-account-info > img {
	max-width: clamp(100px, 25vw, 170px);
}
.header-status-bar .col-old,
.table .old-account-info {
	min-width: 260px;
}
.table .old-account-info {
	background: var(--colo-tealish-blue);
	padding: 30px 25px;
}
.table .new-account-info {
	background: var(--color-light-gray);
	padding: 24px 33px;
}
.table .new-account-info h6,
.table .old-account-info h6 {
	font-family: var(--font-normal-black);
	font-size: 21px;
}

.table .new-account-info h5 {
	font-family: var(--font-calvino);
	font-size: 21px;
}
.table .old-account-info h6 {
	font-weight: 700;
	line-height: 1.33;
	margin-bottom: 28px;
}

.table .new-account-info h6 {
	line-height: 1.39;
}

.new-account-info p,
.new-account-info ul li {
	font-family: var(--font-calvino);
	font-weight: 400;
}
.new-account-info ul li {
	line-height: 1.8;
	position: relative;
	z-index: 1;
	padding-left: 18px;
}
.new-account-info ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	height: 3px;
	width: 3px;
	background-color: var(--color-mid-navy);
	border-radius: 100%;
}
.table .new-account-info .new-account-info p {
	line-height: 1.2;
}
.table .new-account-info .new-account-info p strong {
	font-weight: 800;
}

.table .new-account-info h6 {
	color: #45b97a;
	font-size: 18px;
	line-height: 1.39;
}
.account-perks-overview h6 {
	margin-bottom: 16px;
}
.account-perks-overview-info {
	display: flex;
	flex-wrap: wrap;
	column-gap: 78px;
}
.account-perks-overview-info ul {
	flex: 1 0 calc(50% - 78px);
}
.account-perks-overview {
	max-width: 858px;
	margin-top: 28px;
}
.bank-comparison-guide-item {
	margin-bottom: 60px;
}

/* banking transition guide end */

/* ============================================================
   19. FAQ ACCORDION
   ============================================================ */
.faq-according-area {
	padding: 50px 0;
}

.faq-according-area .container {
	max-width: var(--container-faq);
}

.faq-according-area .section-title-wrapper {
	margin-bottom: var(--space-xl);
}

.accordion {
	--bs-accordion-border-width: 0;
	--bs-accordion-border-radius: 0;
	max-width: 1055px;
	margin-right: 0;
	margin-left: auto;
}

.accordion-item {
	position: relative;
	z-index: var(--z-base);
	padding: 30px 0;
}

/* Divider line between items (hidden on last) */
.accordion-item::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: var(--color-divider);
	border-radius: var(--border-radius-btn);
}

.accordion-header {
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 2.223;
	position: relative;
	z-index: var(--z-base);
	padding-left: 81px;
	padding-right: 10px;
	cursor: pointer;
}

/* Animated expand/collapse arrow icon */
.arrow-icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.accordion-header .arrow-icon line:first-of-type {
	transition: opacity 0.3s ease;
}

.accordion-header[aria-expanded="true"] .arrow-icon line:first-of-type {
	opacity: 0;
}

.accordion-header[aria-expanded="true"] .arrow-icon {
	transform: translateY(-50%) rotate(180deg);
	transition: transform 0.3s ease;
}

.accordion-body {
	padding: 30px 0;
}

/* ============================================================
   20. TREASURY MANAGEMENT
   ============================================================ */
.treasury-management-area {
	padding: 83px 0 90px;
}

.treasury-management-area .container {
	max-width: var(--container-faq);
}

.treasury-management-content {
	max-width: 558px;
	margin-left: 17px;
}

.treasury-management-content-inner {
	margin-top: var(--space-lg);
}

.treasury-management-content-inner p {
	margin-bottom: var(--space-lg);
}

.treasury-management-content-inner p strong {
	font-weight: 800;
}
.treasury-img-wrapper img {
	max-width: 386px;
	margin-right: 0;
	margin-left: auto;
}
/* Account Transition Guide */
.account-transition-guide-area {
	padding: 41px 0 111px;
}
.account-transition-guide-area
	.conversion-guide-content-title-wrapper
	p
	strong {
	font-weight: 900;
}
/* Account Transition Guide */

/* --- Last-child paragraph margin reset --- */
.table .old-account-info h6:last-child,
.bank-comparison-guide-item:last-child,
.brand-transition-area .section-inner-content p:last-child,
.conversion-guide-content-title-wrapper:last-child,
.treasury-management-content-inner p:last-child,
.mb-p p:last-child {
	margin-bottom: 0;
}