/* ============================================================
   PROJECT : Georgia Mechanical
   FILE    : responsive.css
   VERSION : 2.0 (Optimized)
   ============================================================

   BREAKPOINT MAP
   ============================================================
   xl   — max-width: 1399px
   lg   — max-width: 1199px
   md   — max-width:  991px  (tablet / small laptop)
   sm   — max-width:  767px  (large mobile / landscape)
   xs   — max-width:  575px
   xxs  — max-width:  479px  (small mobile portrait)
   tiny — max-width:  383px
   min  — max-width:  359px
   ============================================================

   COMPONENT ORDER (consistent across all breakpoints)
   ============================================================
   01. Typography
   02. Header
   03. Merger Update Banner
   04. Welcome Hero
   05. Branch Locator
   06. Footer
   07. Brand Transition / Section Padding
   08. Banking Services
   09. Conversion Guide
   10. FAQ Accordion
   11. Treasury Management
   ============================================================ */

/* ============================================================
   xl — max-width: 1600px
   (Reserved for future large-screen adjustments)
   ============================================================ */
@media (max-width: 1600px) {
}

/* ============================================================
   xl — max-width: 1500px
   ============================================================ */
@media (max-width: 1500px) {
}

/* ============================================================
   xl — max-width: 1399px
   ============================================================ */
@media (max-width: 1399.98px) {
}

/* ============================================================
   lg — max-width: 1199px
   ============================================================ */
@media (max-width: 1199.98px) {
	/* --- Base --- */
	.container {
		padding-left: 25px;
		padding-right: 25px;
	}

	/* --- 02. Header --- */
	.manu-area ul li {
		margin-right: 10px;
	}

	/* --- 08. Banking Services --- */
	.banking-services-wrapper .row {
		--bs-gutter-x: 100px;
	}

	/* --- 11. Treasury Management --- */
	.treasury-management-content {
		max-width: 100%;
		margin-left: 0;
	}
}

/* ============================================================
   md — max-width: 991px  (Tablet)
   ============================================================ */
@media (max-width: 991px) {
	/* --- 01. Typography --- */
	h1 {
		font-size: 32px;
	}
	h2,
	.section-title {
		font-size: 28px;
	}
	h3 {
		font-size: 26px;
	}
	h4 {
		font-size: 24px;
	}
	h5 {
		font-size: 20px;
	}
	h6 {
		font-size: 18px;
	}
	.new-account-info ul li,
	body {
		font-size: 16px;
	}
	.conversion-guide-content-title-wrapper br,
	.welcome-content br,
	.section-title-wrapper br,
	.section-inner-content br {
		display: none;
	}

	/* --- 02. Header --- */
	.header-area .row {
		align-items: center;
		--bs-gutter-x: 33px;
	}

	/* Half-width dark overlay at tablet */
	.manu-area::before {
		left: -16.5px;
		width: calc(100% + 41.5px);
		transform: translateX(0%);
	}

	.header-logo img {
		max-width: clamp(147px, 20vw, 200px);
	}
	
	.conversion-guide-item .row {   --bs-gutter-x: 0 !important;  }

	.manu-area {
		padding: 15px 0;
	}

	.manu-area ul li {
		margin-right: 0;
		display: block;
		margin-bottom: 5px;
	}

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

	/* --- 04. Welcome Hero --- */
	.brand-logo {
		margin-bottom: 0;
	}

	.welcome-cta-buttons {
		gap: 25px;
	}

	.welcome-video-wrapper {
		margin-top: 40px;
		width: calc(100% + 50px);
		margin-left: -25px;
	}
	.welcome-hero-area {
		padding: 28px 0 0px;
	}

	/* --- 05. Branch Locator --- */
	.branch-locator-area .section-title-wrapper {
		padding: 30px 0;
	}

	.bottom-section-title .section-title-wrapper {
		gap: 20px;
	}

	/* --- 06. Footer --- */
	.footer-img {
		right: 0;
		height: auto;
		max-width: 200px;
	}

	/* --- 07. Brand Transition + shared section padding collapse --- */
	.account-transition-guide-area,
	.faq-according-area,
	.cta-area,
	.top-section-title .section-title-wrapper.version-2,
	.banking-services-area,
	.brand-transition-area {
		padding: 50px 0;
	}
	.account-transition-guide-area {
		padding-top: 10px;
	}

	/* --- 08. Banking Services --- */
	.banking-services-wrapper .row {
		--bs-gutter-x: 24px;
	}

	/* --- 09. Conversion Guide --- */
	.conversion-guide-item .col {
		flex: 1 0 100%;
	}

	.conversion-guide-content,
	.conversion-guide-img {
		max-width: 100%;
	}

	/* Remove left border accent bar on mobile */
	.conversion-guide-content {
		padding-left: 0;
	}

	.conversion-guide-content.position-relative.z-2::before {
		display: none;
	}

	.conversion-guide-item .row {
		--bs-gutter-y: 35px;
	}

	.right-box {
		max-width: 100%;
	}

	.conversion-guide-img img {
		max-width: clamp(243px, 50vw, 550px);
	}

	.conversion-guide-img.vs-card-item img {
		max-width: clamp(188px, 30vw, 200px);
		margin-right: auto;
	}

	/* --- Map & Sidebar Layout --- */
	.location-bar #wpsl-gmap {
		display: none;
	}
	.location-bar #wpsl-result-list,
	.location-bar .wpsl-search {
		width: 100%;
	}
	.branch-locator-wrapper {
		margin-right: auto;
		margin-left: auto;
	}
	.location-bar #wpsl-search-wrap .wpsl-select-wrap {
		display: none;
	}
	.location-bar #wpsl-search-input {
		width: 100%;
		text-align: center;
	}
	#wpsl-search-wrap #wpsl-search-btn {
		float: none !important;
	}

	/* --- 10. FAQ Accordion --- */
	.accordion-item {
		padding: 20px 0;
	}

	.accordion-header {
		font-size: 16px;
		line-height: 1.3;
	}

	/* --- 11. Treasury Management --- */
	.treasury-management-area {
		padding: 0 0 53px;
	}

	.treasury-management-content-inner {
		margin-top: 20px;
	}

	.treasury-management-content-inner p {
		margin-bottom: 17px;
	}

	/* Full-bleed image on tablet */
	.treasury-img-wrapper img {
		max-width: none;
		margin-left: -25px;
		width: calc(100% + 50px);
		margin-bottom: 28px;
	}

	/* banking transition guide start */
	.header-status-bar th,
	.table .new-account-info,
	.table .old-account-info {
		padding: 20px 15px;
	}

	.header-status-bar th,
	.table .new-account-info h6,
	.table .new-account-info h5,
	.table .old-account-info h6 {
		font-size: 18px;
	}
	.bank-comparison-guide-item {
		margin-bottom: 25px;
	}
	.account-perks-overview {
		max-width: 100%;
		margin-top: 15px;
	}
	.card-guide-item .conversion-guide-content {
		margin-top: 0;
	}
	.card-guide-item .row {
		--bs-gutter-y: 30px;
	}
	.card-guide-item {
		padding-top: 30px;
	}
	.account-perks-overview-info {
		column-gap: 20px;
	}
	.account-perks-overview-info ul {
		flex: 1 0 calc(50% - 20px);
	}
	.table .old-account-info h6 {
		margin-bottom: 20px;
	}
	/* banking transition guide end */
}

/* ============================================================
   sm — max-width: 767px  (Large Mobile / Landscape)
   ============================================================ */
@media (max-width: 767px) {
	/* --- 01. Typography --- */
	h1 {
		font-size: 26px;
	}
	h2,
	.section-title {
		font-size: 24px;
	}
	h3 {
		font-size: 22px;
	}
	h4 {
		font-size: 20px;
	}
	h5 {
		font-size: 18px;
	}
	.new-account-info ul li,
	body {
		font-size: 14px;
	}

	/* --- Buttons --- */
	.btn-1 {
		font-size: 14px;
		padding: 16px 15px;
	}

	/* --- 02. Header --- */
	.manu-area ul li a {
		font-size: 13px;
		letter-spacing: 0.3px;
	}

	/* --- 03. Merger Update Banner --- */
	.merger-update-area {
		padding: 45px 0;
	}

	.merger-update-img-wrapper {
		margin-top: 30px;
		flex-direction: column;
		gap: 10px;
	}

	.plus-icon {
		margin-bottom: -5vw;
	}

	/* --- 06. Footer --- */
	.footer-img {
		right: -40px;
		height: auto;
		max-width: 180px;
	}

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

	.footer-bottom-wrapper .col {
		flex: 1 0 100%;
	}

	/* --- 08. Banking Services --- */
	.banking-services-wrapper .row {
		--bs-gutter-y: 50px;
	}

	.info-box-content {
		margin-top: 25px;
	}

	.info-box-content h6 {
		margin-bottom: 12px;
	}

	/* --- 10. FAQ Accordion --- */
	.accordion-item {
		padding: 15px 0;
	}

	.accordion-header {
		font-size: 14px;
		padding-left: 50px;
	}

	.faq-according-area .section-title-wrapper {
		margin-bottom: 15px;
	}

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

	/* banking transition guide start */
	.header-status-bar th,
	.table .new-account-info h6,
	.table .new-account-info h5,
	.table .old-account-info h6 {
		font-size: 16px;
	}
	.header-status-bar .col-old,
	.table .old-account-info {
		min-width: 40vw;
	}
	.account-perks-overview-info ul {
		flex: 1 0 100%;
	}
	.table .old-account-info h6 {
		margin-bottom: 15px;
	}
	/* banking transition guide end */
}

/* ============================================================
   xs — max-width: 575px
   ============================================================ */
@media (max-width: 575.98px) {
	/* --- 01. Typography --- */
	h1 {
		font-size: 24px;
	}
	h2,
	.section-title {
		font-size: 22px;
	}
	h3 {
		font-size: 20px;
	}
	h4 {
		font-size: 18px;
	}

	/* --- 10. FAQ Accordion --- */
	.arrow-icon {
		height: 30px;
		width: 30px;
	}

	/* --- Map & Sidebar Layout --- */

	.location-bar .wpsl-input label {
		font-size: 16px;
	}
	.category-label,
	.location-bar #wpsl-result-list li p strong {
		font-size: 14px;
	}
	.location-bar #wpsl-result-list li p {
		font-size: 12px;
	}
	.wp-block-heading {
		font-size: 18px;
	}
}

/* ============================================================
   xxs — max-width: 479px  (Small Mobile Portrait)
   ============================================================ */
@media (max-width: 479.98px) {
	/* --- 01. Typography --- */
	h1 {
		font-size: 22px;
	}
	h2,
	.section-title {
		font-size: 16px;
	}
	h3,
	h4,
	h5,
	h6 {
		font-size: 14px;
	}
	.new-account-info ul li,
	body {
		font-size: 12px;
	}

	/* --- Buttons --- */
	.btn-1 {
		font-size: 12px;
		letter-spacing: 0.48px;
		padding: 8.5px 31.5px 13.5px;
	}

	/* --- 02. Header --- */
	.header-area .row {
		--bs-gutter-x: 30px;
	}

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

	.manu-area ul li {
		margin-bottom: 8px;
	}

	.manu-area ul li a {
		font-size: 10px;
	}

	/* --- 03. Merger Update Banner --- */
	.merger-update-area {
		padding: 32px 0 7px;
	}

	.merger-update-img-wrapper {
		gap: 0;
	}

	.plus-icon {
		margin-top: -10px;
		margin-bottom: -16px;
	}

	/* --- 04. Welcome Hero --- */
	.welcome-hero-area {
		padding: 14px 0 0;
	}

	.welcome-cta-buttons {
		gap: 15px;
		margin-top: 20px;
	}

	.welcome-cta-buttons .btn-1 {
		min-width: 255px;
	}

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

	/* --- 05. Branch Locator --- */
	.section-title-wrapper h2,
	.section-title-wrapper .section-title {
		letter-spacing: 0.48px;
	}

	.branch-locator-area .section-title-wrapper {
		padding: 40px 0;
	}

	.bottom-section-title .section-title-wrapper {
		flex-direction: column;
	}

	.branch-locator-area .bottom-section-title .section-title-wrapper {
		padding: 22px 0 29px;
	}

	/* --- 07. Brand Transition --- */
	.brand-transition-area {
		padding: 40px 0 33px;
	}

	.brand-transition-area.version-2 {
		padding: 32px 0 34px;
	}

	.brand-transition-area .section-title-wrapper .section-title {
		margin-bottom: 13px;
	}

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

	/* --- 08. Banking Services --- */
	/* Centered narrow max-width containers for small screens */
	.info-box.text-center img,
	.treasury-management-content-inner,
	.conversion-guide-content-title-wrapper,
	.conversion-guide-content,
	.banking-services-wrapper {
		margin-right: auto;
		margin-left: auto;
	}

	.banking-services-area {
		padding: 38px 0 56px;
	}

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

	.info-box-content h6 {
		letter-spacing: 0.48px;
	}

	/* --- 09. Conversion Guide --- */
	.conversion-guide-item .row {
		--bs-gutter-y: 24px;
	}

	.conversion-guide-content-title-wrapper {
		max-width: 257px;
	}

	.conversion-guide-content-title-wrapper h4 {
		font-size: 16px;
		letter-spacing: 0.48px;
	}

	.conversion-guide-content {
		max-width: 290px;
	}
	.location-bar #wpsl-search-btn {
		float: none !important;
	}

	/* --- 10. FAQ Accordion --- */
	.faq-according-area {
		padding: 29px 0 20px;
	}

	.accordion {
		max-width: 290px;
		margin-right: auto;
	}

	.accordion-item {
		padding: 10px 0;
	}
	.accordion-header {
		font-size: 10px;
		padding-left: 35px;
		padding-right: 15px;
	}

	.arrow-icon {
		height: 15px;
		width: 15px;
	}

	/* --- 11. Treasury Management --- */
	.treasury-management-content {
		max-width: 285px;
		margin: 0 auto;
	}
	.info-box.text-center img {
		max-width: 245px;
		display: block;
	}
	/* --- 17. CTA --- */
	.cta-area {
		padding: 37px 0;
	}

	.cta-content .btn-1 {
		padding: 11.5px 25.5px 16.5px;
	}

	/* banking transition guide start */
	.header-status-bar th,
	.table .new-account-info h6,
	.table .new-account-info h5,
	.table .old-account-info h6 {
		font-size: 14px;
	}
	.table .new-account-info h5 {
		font-size: 12px;
	}
	/* banking transition guide end */
}

/* ============================================================
   tiny — max-width: 383px
   ============================================================ */
@media (max-width: 383.98px) {
	/* --- 07. Brand Transition / Content Width Constraints --- */
	.section-inner-content,
	.section-title-wrapper p {
		margin-right: auto;
		margin-left: auto;
	}

	.section-title-wrapper p {
		max-width: 306px;
	}

	.section-inner-content {
		max-width: 276px;
	}

	.brand-transition-area.version-2 .section-inner-content {
		max-width: 246px;
	}

	.top-section-title .section-title-wrapper.version-2 p {
		max-width: 257px;
	}
	.search-box-input .current:after {
		width: 20px;
		height: 20px;
	}
	.accordion-item::before {
		height: 2px;
	}
}

/* ============================================================
   min — max-width: 359px
   ============================================================ */
@media (max-width: 359px) {
	/* --- 02. Header --- */
	.header-logo img {
		max-width: clamp(120px, 20vw, 200px);
	}

	.header-area .row {
		--bs-gutter-x: 18px;
	}
}