﻿/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

:root {
    --transition-duration: .25s;
    /* Color Neutral */
    --black: #000;
    --white: #fff;
    --neutral-lightest: #eee;
    --neutral-lighter: #ccc;
    --neutral-lighter: #aaa;
    --neutral: #666;
    --neutral-dark: #444;
    --neutral-darker: #222;
    --neutral-darkest: #111;
    /* Color System */
    --success-green: #027A48;
    --success-green-light: #ECFDF3;
    --error-red: #b42318;
    --error-light-red: #fef3f2;
    /* Other Colors */
    /* Bancorp Brand Colors */
    --bancorp-primary-teal: #82D9D1;
    --bancorp-teal-2: #5CB9BB;
    --bancorp-teal-3: #008582;
    --bancorp-teal-4: #00635F;
    --bancorp-teal-5: #004F44;
    --bancorp-teal-6: #F6FCFC;
    --bancorp-azul: #67D4EC;
    --bancorp-denim: #0076AA;
    --bancorp-midnight-blue: #00426D;
    --bancorp-lilac: #B4B5E3;
    --bancorp-violet: #7575CB;
    --bancorp-dark-violet: #352068;
    --bancorp-black: #000000;
    --bancorp-white: #FFFFFF;
    --bancorp-gray-1: #6A6A6A;
    --bancorp-gray-2: #444444;
    --bancorp-gray-3: #1A1A1A;
    --gray-2: #D8D8D8;
}

/* Prevent iOS Safari from auto-adjusting font sizes in landscape */
html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Specific fix for navigation elements on iOS */
.nav-menu,
.nav-menu li,
.nav-menu a,
.nav-menu .submenu,
.nav-menu .submenu a {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Color Utility Classes */
/* Neutral Colors */
.black {
    color: #000 !important;
}

.white {
    color: #fff !important;
}

.neutral-lightest {
    color: #eee !important;
}

.neutral-lighter {
    color: #ccc !important;
}

.neutral {
    color: #666 !important;
}

.neutral-dark {
    color: #444 !important;
}

.neutral-darker {
    color: #222 !important;
}

.neutral-darkest {
    color: #111 !important;
}

/* Color System */
.success-green {
    color: #027A48 !important;
}

.success-green-light {
    color: #ECFDF3 !important;
}

.error-red {
    color: #b42318 !important;
}

.error-light-red {
    color: #fef3f2 !important;
}

/* Bancorp Brand Colors */
.bancorp-primary-teal {
    color: #82D9D1 !important;
}

.bancorp-teal-2 {
    color: #5CB9BB !important;
}

.bancorp-teal-3 {
    color: #008582 !important;
}

.bancorp-teal-4 {
    color: #00635F !important;
}

.bancorp-teal-5 {
    color: #004F44 !important;
}

.bancorp-teal-6 {
    color: #dff5f3 !important;
}

.bancorp-azul {
    color: #67D4EC !important;
}

.bancorp-denim {
    color: #0076AA !important;
}

.bancorp-midnight-blue {
    color: #00426D !important;
}

.bancorp-lilac {
    color: #B4B5E3 !important;
}

.bancorp-violet {
    color: #7575CB !important;
}

.bancorp-dark-violet {
    color: #352068 !important;
}

.bancorp-black {
    color: #000000 !important;
}

.bancorp-white {
    color: #FFFFFF !important;
}

.bancorp-gray-1 {
    color: #6A6A6A !important;
}

.bancorp-gray-2 {
    color: #444444 !important;
}

.bancorp-gray-3 {
    color: #1A1A1A !important;
}

.gray-2 {
    color: #D8D8D8 !important;
}

.bg-bancorp-primary-teal {
    background-color: #82D9D1;
}

.bg-bancorp-teal-2 {
    background-color: #5CB9BB;
}

.bg-bancorp-teal-3 {
    background-color: #008582;
}

.bg-bancorp-teal-4 {
    background-color: #00635F;
}

.bg-bancorp-teal-5 {
    background-color: #004F44;
}

.bg-bancorp-teal-6 {
    background-color: #dff5f3;
}

.bg-bancorp-azul {
    background-color: #67D4EC;
}

.bg-bancorp-denim {
    background-color: #0076AA;
}

.bg-bancorp-midnight-blue {
    background-color: #00426D;
}

.bg-bancorp-lilac {
    background-color: #B4B5E3;
}

.bg-bancorp-violet {
    background-color: #7575CB;
}

.bg-bancorp-dark-violet {
    background-color: #352068;
}

.bg-bancorp-black {
    background-color: #000000;
}

.bg-bancorp-white {
    background-color: #FFFFFF;
}

.bg-bancorp-gray-1 {
    background-color: #6A6A6A;
}

.bg-bancorp-gray-2 {
    background-color: #444444;
}

.bg-bancorp-gray-3 {
    background-color: #1A1A1A;
}

.bg-light-teal {
    background-color: #E0F5F3;
}

.clearfix {
    clear: both;
}

/* Fonts */

@font-face {
    font-family: 'Bancorp';
    src: url('/html/assets/fonts/TheBancorpSansVF.ttf') format('truetype-variations');
}

/* Font Utilities */

.italic {
    font-family: 'Gotham Book Italic';
}

.bold {
    font-weight: bold;
}

.regular {
    font-weight: 400;
}

.extra-bold {
    font-weight: 800;
}

.font-weight-400 {
    font-weight: 400;
}

.font-weight-700 {
    font-weight: 700;
}

.font-weight-800 {
    font-weight: 800;
}

h1 {
    font-size: 9.6rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 3.6rem 0;
}

h2 {
    font-size: 5.4rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 3rem 0;
}

h3 {
    font-size: 3.2rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 2rem 0;
}

h4 {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 2rem 0;
}

h5 {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 3rem 0;
}

h6 {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0 0 2rem 0;
}

    h1 p,
    h2 p,
    h3 p,
    h4 p,
    h5 p,
    h6 p {
        margin: 0;
    }

@media (max-width: 991px) {
    h1 {
        font-size: 5.4rem;
        line-height: 1.1;
        margin: 0 0 3.6rem 0;
    }

    h2 {
        font-size: 3.2rem;
        line-height: 1.1;
        margin: 0 0 3rem 0;
    }

    h3 {
        font-size: 2.4rem;
        line-height: 1.1;
        margin: 0 0 2rem 0;
    }
}

.center {
    text-align: center;
}

body, html {
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

html {
    font-size: 62.5%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    max-width: 1500px;
    margin: 0 auto;
    background-color: #000;
    border: 1px solid #000;
    border-top: none;
    border-bottom: none;
}

*, *:before, *:after {
    box-sizing: inherit;
}

a {
    color: var(--bancorp-primary-teal);
    text-decoration: none !important;
}

body {
    font-size: 1.8rem;
    font-weight: 400;
    font-family: "Bancorp", Verdana, Helvetica, Arial, sans-serif;
    line-height: 2.5rem;
    color: #fff;
    margin: 0;
    background-color: var(--bg-color);
}

.wrap {
    width: 1330px;
    margin: 0 auto;
    /*    padding: 0 6.4rem;*/
}

.wrap-sml {
    width: 900px;
    margin: 0 auto;
    /*    padding: 0 6.4rem;*/
}

.breadcrumb {
    display: none !important;
}

.page {
    /*min-height: calc(100vh - 14rem);*/
}

.mobile-only {
    display: none;
}

@media (max-width: 1329px) {
    .wrap {
        width: 100%;
        padding: 0 2rem;
    }
}

@media (max-width: 899px) {
    .wrap-sml {
        width: 100%;
        padding: 0 2rem;
    }
}

@media (max-width: 767px), (max-height: 480px) {
    .mobile-only {
        display: block;
    }
}

.std-section-padding {
    padding: 8rem 0;
}
/* Margins */
.m-5 {
    margin-top: .5rem;
}

.m-10 {
    margin-top: 1rem;
}

.m-15 {
    margin-top: 1.5rem;
}

.m-20 {
    margin-top: 2rem;
}

.m-25 {
    margin-top: 2.5rem;
}

.m-30 {
    margin-top: 3rem;
}

.m-40 {
    margin-top: 4rem;
}

.m-50 {
    margin-top: 5rem;
}

.m-75 {
    margin-top: 7.5rem;
}

.m-85 {
    margin-top: 8.5rem;
}

.m-100 {
    margin-top: 10rem;
}

.mb-5 {
    margin-bottom: .5rem;
}

.mb-10 {
    margin-bottom: 1rem;
}

.mb-15 {
    margin-bottom: 1.5rem;
}

.mb-20 {
    margin-bottom: 2rem;
}

.mb-25 {
    margin-bottom: 2.5rem;
}

.mb-30 {
    margin-bottom: 3rem;
}

.mb-40 {
    margin-bottom: 4rem;
}

.mb-50 {
    margin-bottom: 5rem;
}

.mb-75 {
    margin-bottom: 7.5rem;
}

.mb-100 {
    margin-bottom: 10rem;
}


.header-overlay {
    margin-top: -8rem;
}

/* Padding */
.p-5 {
    padding: .5rem;
}

.p-10 {
    padding: 1rem;
}

.p-15 {
    padding: 1.5rem;
}

.p-20 {
    padding: 2rem;
}

.p-25 {
    padding: 2.5rem;
}

input,
textarea {
    border-radius: 0;
    border-width: 2px;
    border-color: #ccc;
    box-shadow: none;
    border-style: solid;
    margin-bottom: 5px;
    padding: .3rem 1rem;
    font-family: 'Bancorp';
}

    input[type=text],
    input[type=email],
    input[type=file],
    input[type=date] {
        height: 30px;
        width: 100%;
        border: solid 1px #e2e2e2;
    }

    input[type=file] {
        min-height: 10rem;
    }

    input.red-border {
        border: 1px solid #ed1c24;
    }

label {
    font-size: 1.4rem;
    font-weight: 600;
}

.form textarea {
    margin-bottom: 30px;
    width: 100%;
    border: solid 1px #e2e2e2;
}

input:focus,
textarea:focus {
    outline-color: #000;
}

select {
    font-size: 1.6rem;
    padding: 1rem 2rem;
    border-color: #cdcbcb;
    color: #8f8f8f;
}

.validation-error {
    background-color: #ff0000;
    color: #fff;
    padding: .5rem 1rem;
}

/* Button Styles */
.btn {
    display: inline-block;
    padding: .8rem 3.4rem;
    font-size: 1.7rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: all var(--transition-duration) ease;
    cursor: pointer;
    border: 1px solid transparent;
}

    .btn.teal {
        background-color: transparent;
        color: var(--white);
        border: 1px solid var(--bancorp-primary-teal);
    }

        .btn.teal:hover {
            background-color: var(--bancorp-primary-teal);
            color: var(--black);
            border-color: var(--bancorp-primary-teal);
        }

    .btn.white {
        background-color: transparent;
        color: var(--white);
        border: 1px solid var(--white);
    }

        .btn.white:hover {
            background-color: var(--white);
            color: var(--black) !important;
            border-color: var(--white);
        }

    .btn.black {
        background-color: transparent;
        color: var(--black);
        border: 1px solid var(--black);
    }

        .btn.black:hover {
            background-color: var(--black);
            color: var(--white) !important;
            border-color: var(--black);
        }

    .btn.white-black {
        background-color: transparent;
        color: var(--black);
        border: 1px solid var(--white);
    }

        .btn.white-black:hover {
            background-color: var(--black);
            color: var(--white);
            border-color: var(--black);
        }

    .btn.teal-black {
        background-color: transparent;
        color: var(--black);
        border: 1px solid var(--bancorp-primary-teal);
    }

        .btn.teal-black:hover {
            background-color: var(--bancorp-primary-teal);
            color: var(--black);
            border-color: var(--bancorp-primary-teal);
        }

    .btn.teal-all {
        background-color: transparent;
        color: var(--bancorp-primary-teal);
        border: 1px solid var(--bancorp-primary-teal);
    }

        .btn.teal-all:hover {
            background-color: var(--bancorp-primary-teal);
            color: var(--black);
            border-color: var(--bancorp-primary-teal);
        }

button {
    display: inline-block;
    padding: .8rem 3.4rem;
    font-size: 1.7rem;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: all var(--transition-duration) ease;
    cursor: pointer;
    border: 1px solid transparent;
    background-color: transparent;
}

    button.teal-black {
        background-color: transparent;
        color: var(--black);
        border: 1px solid var(--bancorp-primary-teal);
    }

        button.teal-black:hover {
            background-color: var(--bancorp-primary-teal);
            color: var(--black);
            border-color: var(--bancorp-primary-teal);
        }

.bg-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 11rem 0;
}

@media (max-height: 900px) {
    bg-img.full {
        min-height: calc(100vh - 13.1rem);
    }
}

@media (max-height: 720px) {
    .hero-header.lrg h1 {
        font-size: 6.6rem !important;
    }
}

.page-border {
    width: 100%;
}

    .page-border.teal {
        border: 1px solid var(--bancorp-primary-teal);
    }
/* Header Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.bancorp-header {
    background-color: var(--bancorp-black);
    position: sticky;
    top: 0;
    z-index: 1000;
}

/* Top Bar Styles */
.top-bar {
    background-color: var(--bancorp-black);
}

    .top-bar .wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Logo container in top bar */
    .top-bar .logo {
        display: flex;
        align-items: center;
    }

        .top-bar .logo a {
            display: flex;
            align-items: center;
            text-decoration: none;
            margin-left: -4.8rem;
        }

        .top-bar .logo img {
            height: 3.5rem;
            width: auto;
            display: block;
            margin-top: 3rem;
        }

@media (max-width: 1440px) {
    .top-bar .logo a {
        margin-left: 0;
    }

    .footer-logo img {
        margin-left: 0 !important;
    }
}

/* Top bar links container */
.top-bar-links {
    display: flex;
    gap: 2.4rem;
    align-items: center;
    margin-top: -1rem;
}

    .top-bar-links a {
        color: var(--gray-2);
        text-decoration: none;
        font-size: 1.2rem;
        font-weight: 800;
        transition: color var(--transition-duration) ease;
    }

        .top-bar-links a:hover {
            color: var(--bancorp-primary-teal);
        }

/* Main Navigation Styles */
.main-nav {
    background-color: var(--bancorp-black);
    padding: 2rem 0;
}

.nav-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5.6rem;
}

/* Logo Styles (general) */
.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

    .logo img {
        height: 3.5rem;
        width: auto;
        display: block;
    }

/* Navigation Divider - Hidden to match design */
.nav-divider {
    display: none;
}

/* Navigation Menu */
.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 4rem;
    align-items: center;
    justify-content: flex-end;
}

    .nav-menu li {
        margin: 0;
        padding: 0;
        position: relative;
    }

    .nav-menu a {
        color: var(--bancorp-primary-teal);
        text-decoration: none;
        font-size: 1.7rem;
        font-weight: 800;
        transition: color var(--transition-duration) ease;
        white-space: nowrap;
        padding-bottom: 1rem;
    }

        .nav-menu a.bold {
            font-weight: 800;
        }

        .nav-menu a:hover {
            color: #fff;
        }

    /* Submenu Styles */
    .nav-menu .has-submenu {
        position: relative;
    }

    .nav-menu .submenu {
        position: absolute;
        top: 100%;
        left: -2.5rem;
        transform: none;
        background-color: var(--bancorp-gray-3);
        list-style: none;
        margin: 0;
        padding: 1.2rem 2.4rem;
        min-width: 25rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity var(--transition-duration) ease, visibility var(--transition-duration) ease;
        z-index: 1000;
        margin-top: 2rem;
        border-radius: 1rem;
        --arrow-position: 5.4rem; /* fallback value */
    }

    .nav-menu .has-submenu:hover .submenu {
        opacity: 1;
        visibility: visible;
    }

    .nav-menu .submenu li {
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .nav-menu .submenu a {
        display: block;
        padding: .7rem 0;
        font-size: 1.6rem;
        font-weight: 400;
        color: var(--white);
        white-space: normal;
        line-height: 1.4;
    }

        .nav-menu .submenu a.active {
            font-weight: 800;
            color: var(--white);
        }

        .nav-menu .submenu a.bold {
            font-weight: 800 !important;
        }

        .nav-menu .submenu a:hover {
            color: var(--bancorp-primary-teal);
        }

    /* Arrow pointing to parent menu item - centered dynamically */
    .nav-menu .submenu::before {
        content: '';
        position: absolute;
        top: -0.6rem;
        left: var(--arrow-position);
        transform: translateX(-50%) rotate(45deg);
        width: 1.2rem;
        height: 1.2rem;
        background-color: var(--bancorp-gray-3);
        z-index: -1;
    }

    .nav-menu .has-submenu:hover .submenu {
        opacity: 1;
        visibility: visible;
    }

    /* Two-column submenu layout */
    .nav-menu .submenu.two-col {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem 3rem;
        min-width: 56rem;
        padding: 1.2rem 2.4rem;
    }

        .nav-menu .submenu.two-col > ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

            .nav-menu .submenu.two-col > ul li {
                width: 100%;
                padding: 0;
                margin: 0;
                min-height: 40px;
            }

            .nav-menu .submenu.two-col > ul a {
                display: block;
                padding: .7rem 0;
                font-size: 1.6rem;
                font-weight: 400;
                color: var(--white);
                white-space: normal;
                line-height: 1.4;
            }

                .nav-menu .submenu.two-col > ul a.active {
                    font-weight: 800;
                    color: var(--white);
                }

                .nav-menu .submenu.two-col > ul a.bold {
                    font-weight: 800;
                    color: var(--white);
                }

                .nav-menu .submenu.two-col > ul a:hover {
                    color: var(--bancorp-primary-teal);
                }

/* Mobile responsive for two-column submenu */
@media (max-width: 1440px) {
    .nav-menu .submenu.two-col {
    }
    /* Target both the last and second-to-last <li> */
    ul.nav-menu > li:nth-last-child(-n+5) .submenu {
        left: -8.5rem;
    }

        ul.nav-menu > li:nth-last-child(-n+5) .submenu::before {
            left: calc(var(--arrow-position) + 60px);
        }
}

@media (max-width: 991px) {
    .nav-menu .submenu.two-col {
        grid-template-columns: 1fr;
        gap: 0;
        min-width: 0;
        padding: 0;
    }

    .nav-menu .submenu.two-col {
        padding: 1.2rem 2.4rem;
        min-width: 25rem;
    }
}

/* Hamburger Menu Styles */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 3rem;
    height: 2.4rem;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    position: relative;
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: var(--bancorp-primary-teal);
    transition: all var(--transition-duration) ease;
    border-radius: 2px;
}

.hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: translateY(10.5px) rotate(45deg);
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: translateY(-10.5px) rotate(-45deg);
}

/* Prevent body scroll when menu is open */
body.menu-open {
    /*overflow: hidden;*/
}

/* Mobile Menu Responsive Styles */
@media (max-width: 767px), (max-height: 480px) {
    .top-bar .logo a {
        margin-left: 0;
    }

    .hamburger-menu {
        display: flex;
    }

    .nav-wrapper {
        position: relative;
        justify-content: space-between;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 40rem;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for mobile browsers */
        background-color: var(--bancorp-black);
        flex-direction: column;
        align-items: flex-start;
        padding: 8rem 3rem 3rem 3rem;
        gap: 2rem;
        transition: right 0.3s ease;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; /* Enable momentum scrolling on iOS/Android */
        overscroll-behavior: contain; /* Prevent overscroll from affecting body */
        touch-action: pan-y; /* Allow vertical scrolling on touch devices */
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.5);
        z-index: 1000;
        justify-content: flex-start; /* override desktop flex-end */
        align-content: flex-start; /* defensive for multi-line cases */
    }

        .nav-menu.active {
            right: 0;
        }

        .nav-menu li {
            width: 100%;
            border-bottom: 1px solid rgba(130, 217, 209, 0.2);
            padding: 1.5rem 0;
        }

            .nav-menu li:last-child {
                border-bottom: none;
            }

        .nav-menu a {
            font-size: 1.6rem;
            width: 100%;
            display: block;
        }

        /* Submenu becomes collapsible under parent */
        .nav-menu .submenu {
            position: static;
            transform: none;
            background-color: transparent;
            padding: 0;
            margin: 0.5rem 0 0 0;
            min-width: 0;
            opacity: 1;
            visibility: visible;
            display: none; /* hidden by default for slideToggle */
        }

            .nav-menu .submenu li {
                border: none;
                padding: 0;
            }

            .nav-menu .submenu a {
                font-size: 1.6rem;
                color: var(--white);
                opacity: 0.9;
                padding: 1rem 0 1rem 1rem; /* indent */
            }

        /* Caret indicator */
        .nav-menu .has-submenu > a {
            display: flex;
            align-items: center;
            gap: 1rem;
        }
        /* Arrow pointing to parent menu item */
        .nav-menu .submenu::before {
            opacity: 0;
        }

    /*.nav-menu .has-submenu > a::after {
            content: '\25BE';*/ /* ▼ */
    /*margin-left: auto;
            font-size: 1.4rem;
            transition: transform var(--transition-duration) ease;
        }

        .nav-menu .has-submenu.open > a::after {
            transform: rotate(180deg);
        }*/
}


@media (max-width: 767px), (max-height: 480px) {
    .top-bar-links {
        display: none;
    }

    .hamburger-menu {
        position: absolute;
        right: 2rem;
        top: 50%;
        transform: translateY(-50%);
    }

    .nav-wrapper {
        justify-content: center;
    }

    .nav-menu {
        width: 100%;
        max-width: 100%;
        padding: 8rem 2rem 3rem 2rem;
    }

        .nav-menu a {
            font-size: 1.6rem;
        }
}

/* Footer Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

footer {
    background-color: var(--bancorp-black);
    color: var(--white);
    padding: 6rem 0 3rem 0;
    padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0)); /* iOS safe area */
}

/* Footer Top Links Section */
.footer-top-links {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4rem;
    margin-bottom: 6rem;
    padding-bottom: 4rem;
}

.links-col h4 {
    color: var(--white);
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0 0 2.4rem 0;
    line-height: 1.4;
}

.links-col h5 {
    color: var(--white);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 2rem 0 1rem 0;
    line-height: 1.4;
}

.links-col h4:first-child {
    margin-top: 0;
}

.footer-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .footer-links li {
        margin-bottom: 1.4rem;
    }

    .footer-links a {
        color: var(--white);
        text-decoration: none;
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1.6;
        transition: color var(--transition-duration) ease;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .footer-links.lrg a {
        color: var(--white);
        text-decoration: none;
        font-size: 1.6rem;
        font-weight: 700;
        line-height: 1.6;
        transition: color var(--transition-duration) ease;
    }

    .footer-links.lrg li {
        margin-bottom: 2.4rem;
    }

    .footer-links a:hover {
        color: var(--bancorp-primary-teal);
    }

/* Logo and Tagline Section */
.logo-and-text {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2.6rem;
}

.footer-logo img {
    height: 3.5rem;
    width: auto;
    margin-left: -5.5rem;
}

.footer-tag {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

    .footer-tag > div:first-child {
        color: var(--white);
        font-size: 1.6rem;
        font-weight: 400;
    }

    .footer-tag > div:last-child {
        color: var(--white);
        font-size: 1.2rem;
        font-weight: 400;
        line-height: 1;
        margin-top: 0.2rem;
        margin-left: -.7rem;
    }

.footer-tagline {
    color: var(--white);
    font-size: 2rem;
    font-weight: 400;
    font-style: italic;
}

/* Copyright and Links Section */
.copyright-and-links {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 2rem;
}

.copyright {
    display: flex;
    align-items: center;
}

    .copyright ul {
        display: flex;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 2rem;
        flex-wrap: wrap;
    }

        .copyright ul li {
            color: var(--white);
            font-size: 1.4rem;
            font-weight: 400;
            line-height: 1.4;
        }

            .copyright ul li a {
                color: var(--white);
                text-decoration: none;
                transition: color var(--transition-duration) ease;
            }

                .copyright ul li a:hover {
                    color: var(--bancorp-primary-teal);
                }

/* Social Links */
.social-links ul {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 1.5rem;
}

.social-links li {
    display: flex;
    align-items: center;
}

.social-links a {
    display: flex;
    align-items: center;
    transition: opacity var(--transition-duration) ease;
}

    .social-links a:hover {
        opacity: 0.7;
    }

.social-links img {
    height: 2rem;
    width: auto;
    display: block;
}

/* Bottom Links Section */
.bottom-links {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid var(--bancorp-gray-2);
    padding-top: 2rem;
}

.bottom-left {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.equal-housing-icon {
    height: 1.4rem;
    width: auto;
}

.footer-bottom-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

    .footer-bottom-links a {
        color: var(--white);
        text-decoration: none;
        font-size: 1.2rem;
        font-weight: 400;
        transition: color var(--transition-duration) ease;
    }

        .footer-bottom-links a:hover {
            color: var(--bancorp-primary-teal);
        }

/* Responsive Styles */
@media (max-width: 1329px) {
    .nav-wrapper {
        gap: 3rem;
    }

    .nav-menu {
        gap: 3rem;
    }

        .nav-menu a {
            font-size: 1.6rem;
        }

    .footer-top-links {
        gap: 3rem;
    }
}

@media (max-width: 991px) {
    .top-bar {
        padding: 0.8rem 0;
    }

        .top-bar .logo img {
            height: 3rem;
        }

    .top-bar-links {
        gap: 2rem;
    }

        .top-bar-links a {
            font-size: 1.2rem;
        }

    .nav-wrapper {
        gap: 2rem;
    }

    .nav-menu {
        gap: 2rem;
    }

        .nav-menu a {
            font-size: 1.6rem;
        }

    .logo img {
        height: 3rem;
    }

    /* Footer responsive */
    .footer-top-links {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.4rem 2rem;
    }

    .logo-and-text {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    .footer-logo img {
        margin-left: 0;
    }

    .links-col h4 {
        font-size: 1.6rem;
        margin-bottom: 1.6rem;
    }

    .links-col h5 {
        font-size: 1.3rem;
        margin: 1.6rem 0 .8rem 0;
    }

    .footer-links a {
        font-size: 1.4rem;
        line-height: 1.5;
    }

    .copyright-and-links {
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .social-links ul {
        justify-content: flex-start;
    }
}

@media (max-width: 767px), (max-height: 480px) {
    .top-bar {
        padding: 0.8rem 0;
    }

        .top-bar .wrap {
            flex-direction: column;
            gap: 1rem;
        }

        .top-bar .logo {
            width: 100%;
            justify-content: left;
        }

            .top-bar .logo img {
                height: 2.8rem;
            }

    .top-bar-links {
        gap: 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

        .top-bar-links a {
            font-size: 1.1rem;
        }

    .main-nav {
        padding: 1.5rem 0;
    }

    .nav-wrapper {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .logo img {
        height: 2.8rem;
    }

    .nav-menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
        width: 100%;
    }

        .nav-menu a {
            font-size: 1.6rem;
        }

    /* Footer responsive mobile */
    footer {
        padding: 4rem 0 2rem 0;
    }

    .footer-top-links {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 3rem;
    }

        .footer-top-links .links-col {
            padding-top: 1.6rem;
            border-top: 1px solid rgba(255,255,255,.12);
        }

            .footer-top-links .links-col:first-child {
                padding-top: 0;
                border-top: none;
            }

    .logo-and-text {
        align-items: center;
        text-align: center;
        gap: 1.2rem;
    }

    .footer-tag {
        justify-content: center;
    }

    .copyright-and-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.6rem;
        width: 100%;
    }

    .copyright ul {
        flex-direction: column;
        align-items: flex-start;
        gap: .8rem;
        width: 100%;
    }

    .social-links ul {
        justify-content: flex-start;
        width: 100%;
    }

    .copyright-and-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 2rem;
    }

    .footer-bottom-links {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Owl Carousel Navigation Styling */
.owl-nav {
    text-align: center;
}

    .owl-nav button.owl-prev,
    .owl-nav button.owl-next {
        background-color: transparent !important;
        color: var(--bancorp-primary-teal) !important;
        font-size: 3.6rem !important;
        width: 4.5rem;
        height: 4.5rem;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin: 0 1rem;
        transition: all 0.3s ease;
        border: 1px solid var(--white) !important;
        cursor: pointer;
        padding: 0 !important;
    }

        .owl-nav button.owl-prev:hover,
        .owl-nav button.owl-next:hover {
            background-color: var(--bancorp-primary-teal) !important;
            color: var(--black) !important;
            border-color: var(--bancorp-primary-teal) !important;
        }

.news-navigation-wrapper.teal .owl-nav button.owl-prev,
.news-navigation-wrapper.teal .owl-nav button.owl-next {
    color: var(--black) !important;
    border-color: var(--bancorp-teal-3) !important;
}

.owl-nav button.owl-prev span
.owl-nav button.owl-next span {
    line-height: 0;
    font-weight: normal;
}

.owl-nav button.owl-prev span {
    margin: -0.5rem 0 0 -.2rem;
}

.owl-nav button.owl-next span {
    margin: -0.5rem -.2rem 0 0;
}

.owl-nav button.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Header and Text Section */
.header-and-text {
    padding: 7rem 0;
}

    .header-and-text.black {
        color: var(--black);
    }

#formSuccess {
    color: green;
}

#formError {
    color: #ff0000;
}

/* Author section spans full width at bottom */
.author {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-top: 2rem;
    color: var(--black);
}

    .author img {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
        border-radius: 10rem;
    }

.author-name-date > div:first-child {
}

.author-name-date > div:last-child {
    font-size: 0.9em;
    margin-top: 0.25rem;
}

@media (max-width: 768px) {
    .author {
        grid-row: 3;
        margin-top: 1rem;
    }
}

.pager {
    margin: 4rem 0;
}

    .pager .owl-nav {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.6rem;
    }

        .pager .owl-nav button.owl-prev,
        .pager .owl-nav button.owl-next {
            font-size: 2.6rem !important;
            width: 2.4rem;
            height: 2.4rem;
            padding-top: 2px !important;
            min-width: 2.4rem;
        }

    .pager .pages {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 1.6rem;
        justify-content: center;
    }

        .pager .pages a {
            font-weight: 800;
            font-size: 1.6rem;
            color: var(--white);
            text-decoration: none;
            transition: color var(--transition-duration) ease;
        }

            .pager .pages a:hover,
            .pager .pages a.active {
                color: var(--bancorp-primary-teal);
            }

/* Two column content */
.two-col-content .two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 11rem;
}

.two-col-grid.one-point-five-one {
    grid-template-columns: 1fr 1fr;
}

.two-col-content .side-image img {
    max-width: 100%;
}

@media (max-width: 991px) {
    .two-col-content .two-col-grid {
        grid-gap: 6rem;
    }
}

@media (max-width: 768px) {
    .two-col-content .two-col-grid,
    .two-col-grid.one-point-five-one {
        grid-template-columns: 1fr;
        grid-gap: 4rem;
    }

    .two-col-content .side-image {
        order: 2;
    }

        .two-col-content .side-image img {
            width: 100%;
            height: auto;
        }
}

/* Two column content */
.title-text-button {
    padding-right: 35rem;
}

    .title-text-button .btn {
        margin-top: 2rem;
        border-color: var(--white);
    }

@media (max-width: 768px) {
    .title-text-button {
        padding-right: 0;
    }
}
/* location box card */
.location-box {
    display: flex;
    min-height: 15rem;
    align-items: end;
    border-left: 1px solid var(--bancorp-primary-teal);
    padding: 0 2.4rem;
}

    .location-box a {
        color: #fff;
    }
/* Accordion Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.accordion {
    margin: 2rem 0;
}

.accordion-item {
}

    .accordion-item:last-child {
        border-bottom: none;
    }

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    cursor: pointer;
    transition: all var(--transition-duration) ease;
}

    .accordion-header:hover {
        opacity: 0.8;
    }

.accordion-title {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    color: var(--white);
    flex: 1;
}

    .accordion-title p {
        font-size: 2.4rem;
        font-weight: 800;
        line-height: 1.2;
        margin: 0;
        color: var(--white);
        flex: 1;
    }

.accordion.black .accordion-title {
    color: var(--black);
}

.accordion-toggle {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-duration) ease;
    margin-right: 1.2rem;
}

    .accordion-toggle:focus {
        outline: 2px solid var(--bancorp-primary-teal);
        outline-offset: 2px;
    }

.icon-circle {
    width: 3.2rem;
    height: 3.2rem;
    border: 2px solid var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: all var(--transition-duration) ease;
}

.accordion.black .icon-circle {
    border: 2px solid var(--black);
}

.accordion-item.active .icon-circle {
    background-color: var(--white);
}

.accordion.black .accordion-item.active .icon-circle {
    background-color: var(--black);
}

.icon-plus {
    position: relative;
    width: 1.4rem;
    height: 1.4rem;
    transition: all var(--transition-duration) ease;
}

    .icon-plus::before,
    .icon-plus::after {
        content: '';
        position: absolute;
        background-color: var(--white);
        transition: all var(--transition-duration) ease;
    }

.accordion.black .icon-plus::before,
.accordion.black .icon-plus::after {
    content: '';
    position: absolute;
    background-color: var(--black);
    transition: all var(--transition-duration) ease;
}

.icon-plus::before {
    width: 1.4rem;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.icon-plus::after {
    width: 2px;
    height: 1.4rem;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.accordion-item.active .icon-plus::before,
.accordion-item.active .icon-plus::after {
    background-color: var(--bancorp-dark-violet);
}

.accordion.black .accordion-item.active .icon-plus::before,
.accordion.black .accordion-item.active .icon-plus::after {
    background-color: var(--white);
}

.accordion-item.active .icon-plus::after {
    opacity: 0;
    transform: translateX(-50%) rotate(90deg);
}

.accordion-content {
    display: none;
    padding: 0 0 2rem 0;
    color: var(--white);
}

.accordion.black .accordion-content {
    color: var(--black);
}

.accordion-content p {
    margin: 1rem 0 0 4.5rem;
    font-size: 1.6rem;
    line-height: 1.5;
}

/* Responsive Accordion Styles */
@media (max-width: 767px), (max-height: 480px) {
    .accordion {
        margin: 2rem 0;
    }

    .accordion-header {
        padding: 1.6rem 0;
    }

    .accordion-title {
        font-size: 1.8rem;
        padding-right: 1rem;
    }

    .icon-circle {
        width: 2.8rem;
        height: 2.8rem;
    }

    .icon-plus {
        width: 1.2rem;
        height: 1.2rem;
    }

        .icon-plus::before {
            width: 1.2rem;
        }

        .icon-plus::after {
            height: 1.2rem;
        }

    .accordion-content {
        padding: 0 0 1.6rem 0;
    }

        .accordion-content p {
            font-size: 1.5rem;
        }
}

.black .accordion .accordion-title {
    color: var(--black);
}

.black .accordion .icon-circle {
    border-color: var(--bancorp-primary-teal);
}

.black .accordion .icon-plus::before, .black .accordion .icon-plus::after {
    content: '';
    position: absolute;
    background-color: var(--black);
    transition: all var(--transition-duration) ease;
}

.black .accordion .accordion-content {
    color: var(--black);
}

/* Icon Title Text Card Grid Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.title-subtitle-icons {
    text-align: center;
}

    .title-subtitle-icons .text {
        margin-bottom: 6rem;
    }

.icon-title-text-card-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2.4rem;
    margin-top: 4rem;
}

.icon-title-text-card {
    background-color: var(--bancorp-gray-3);
    padding: 4rem 3.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 38rem;
}

    .icon-title-text-card img {
        width: 8rem;
        height: 8rem;
        object-fit: contain;
        margin-bottom: 2.4rem;
        filter: brightness(0) saturate(100%) invert(78%) sepia(26%) saturate(435%) hue-rotate(123deg) brightness(94%) contrast(86%);
    }

    .icon-title-text-card h4 {
        font-size: 2.4rem;
        font-weight: 800;
        line-height: 1.2;
        margin: 0 0 2rem 0;
        color: var(--white);
    }

    .icon-title-text-card .text {
        font-size: 1.6rem;
        font-weight: 400;
        line-height: 1.5;
        color: var(--white);
        margin: 0;
    }

/* Icon Title Text Card Grid - Responsive */
@media (max-width: 1200px) {
    .icon-title-text-card-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
}

@media (max-width: 767px), (max-height: 480px) {
    .icon-title-text-card-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .icon-title-text-card {
        padding: 3.2rem 2.4rem;
        min-height: auto;
    }

        .icon-title-text-card img {
            width: 6.4rem;
            height: 6.4rem;
            margin-bottom: 2rem;
        }

        .icon-title-text-card h4 {
            font-size: 2rem;
            margin-bottom: 1.6rem;
        }

        .icon-title-text-card .text {
            font-size: 1.5rem;
        }
}

/* Title two column section
–––––––––––––––––––––––––––––––––––––––––––––––––– */

.title-two-column .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 11rem;
}

    .title-two-column .content > div:nth-child(1) {
        margin-top: -3rem;
    }

    .title-two-column .content p {
        font-size: 3.2rem;
        line-height: 4.4rem;
    }

.title-two-column .accordion {
    margin-top: 0rem;
}

.accordion-content p {
    font-size: 1.8rem !important;
    line-height: 2.4rem !important;
}

/* Career Tile Styles */
.career-tile {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    min-height: 30rem;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    text-decoration: none;
    color: var(--white);
    overflow: hidden;
    margin-right: 2.4rem;
}

    .career-tile .small-title {
        position: relative;
        z-index: 2;
        font-size: 1.2rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        color: var(--bancorp-primary-teal);
        padding: 2.4rem;
        min-height: 7rem;
        display: flex;
        align-items: center;
    }

    .career-tile .text {
        position: relative;
        z-index: 2;
        background-color: var(--black);
        padding: 2.4rem;
        font-size: 2.4rem;
        font-weight: 800;
        line-height: 1.2;
        color: var(--white);
        min-height: 16rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

        .career-tile .text .location {
            font-size: 1.6rem;
            font-weight: 400;
            margin-top: auto;
            padding-top: 1.6rem;
            color: var(--white);
            opacity: 0.9;
        }

/* Ensure all owl carousel career items have equal height */
.owl-carousel.careers-carousel .owl-item {
    display: flex;
    height: 100%;
}

    .owl-carousel.careers-carousel .owl-item > a {
        display: flex;
        width: 100%;
        height: 100%;
    }

/* Responsive Career Tile */
@media (max-width: 767px), (max-height: 480px) {
    .career-tile {
        min-height: 25rem;
    }

        .career-tile .small-title {
            padding: 2rem 2rem 0 2rem;
            min-height: 6rem;
        }

        .career-tile .text {
            padding: 2rem;
            font-size: 2rem;
            min-height: 12rem;
        }

            .career-tile .text .location {
                font-size: 1.4rem;
                padding-top: 1.2rem;
            }

    .title-two-column .content {
        grid-template-columns: 1fr;
        grid-gap: 6rem;
    }
}
/* Logo Images Section Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.logo-images {
    padding: 8rem 0;
}

    .logo-images h5 {
        color: var(--black);
        margin-bottom: 4rem;
    }

.logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}

.logo-card {
    flex: 0 0 auto;
    width: 16.666%; /* 6 items per row */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3.2rem 2.4rem;
    border-right: 1px solid var(--bancorp-primary-teal);
    margin-bottom: 1rem;
}

    /* Remove right border from every 6th item */
    .logo-card:nth-child(6n) {
        border-right: none;
    }

    /* If items don't fill the row, remove border from last item */
    .logo-card:last-child {
        border-right: none;
    }

    .logo-card img {
        width: 100%;
        height: 12rem;
        object-fit: contain;
        object-position: center top;
        margin-bottom: 2.4rem;
        flex-shrink: 0;
    }

    .logo-card .text {
        color: var(--black);
        font-size: 1.4rem;
        font-weight: 400;
        line-height: 1.5;
        flex-grow: 1;
        display: flex;
        align-items: flex-start;
    }

/* Responsive Styles */
@media (max-width: 1200px) {
    .logo-card {
        width: 33.333%; /* 3 items per row */
    }

        /* Reset 6n and apply 3n */
        .logo-card:nth-child(6n) {
            border-right: 1px solid var(--bancorp-primary-teal);
        }

        .logo-card:nth-child(3n) {
            border-right: none;
        }

        /* Last item never has border */
        .logo-card:last-child {
            border-right: none;
        }
}

@media (max-width: 767px), (max-height: 480px) {
    .logo-images {
        padding: 5rem 0;
    }

        .logo-images h5 {
            margin-bottom: 3rem;
        }

    .logo-card {
        width: 50%; /* 2 items per row */
        padding: 2.4rem 1.6rem;
    }

        /* Reset 3n and apply 2n */
        .logo-card:nth-child(3n) {
            border-right: 1px solid var(--bancorp-primary-teal);
        }

        .logo-card:nth-child(2n) {
            border-right: none;
        }

        /* Last item never has border */
        .logo-card:last-child {
            border-right: none;
        }

        .logo-card img {
            height: 10rem;
            margin-bottom: 2rem;
        }

        .logo-card .text {
            font-size: 1.3rem;
        }
}

/* Simple text block section
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.simple-text-block {
    font-size: 3.2rem;
    line-height: 4.4rem;
    padding: 8rem 0;
    padding-right: 37.5rem;
}

@media (max-width: 767px), (max-height: 480px) {
    .simple-text-block {
        padding-right: 0;
    }

    .simple-text-block {
        font-size: 2.4rem;
        line-height: 3.2rem;
    }
}

/* Three Column Section
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.three-col-section {
    padding: 8rem 0;
}

    .three-col-section .three-col-grid {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-gap: 6.6rem;
    }

        .three-col-section .three-col-grid .accordion-title {
            font-size: 1.8rem;
        }

@media (max-width: 991px) {
    .three-col-section .three-col-grid {
        grid-template-columns: 1fr;
    }
}

/* Title and Button Section
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.title-and-button {
    padding: 4.5rem 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

    .title-and-button h3 {
        margin: 0 1rem;
    }

    .title-and-button .btn {
        margin: 2rem 1rem;
    }


@media (max-width: 767px) {
    .title-and-button {
        text-align: center;
    }
}

/* Big Title
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.big-title {
    padding: 11.6rem 0;
}

/* Icon Title Text Grid Section
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.icon-title-text-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6rem;
    margin: 0;
}

.icon-title-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

    .icon-title-text img {
        width: 8rem;
        height: 8rem;
        object-fit: contain;
        margin-bottom: 2.4rem;
        flex-shrink: 0;
    }

    .icon-title-text h4 {
        margin-bottom: 1.6rem;
    }

    .icon-title-text .text {
        margin: 0;
    }

        .icon-title-text .text p {
            margin: 0;
        }

/* Icon Title Text Grid - Responsive */
@media (max-width: 991px) {
    .icon-title-text-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .icon-title-text img {
        width: 7rem;
        height: 7rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 767px), (max-height: 480px) {
    .icon-title-text-grid {
        gap: 3rem;
    }

    .icon-title-text img {
        width: 6rem;
        height: 6rem;
        margin-bottom: 1.6rem;
    }
}

/* Checkmark List Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.checkmark-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 6rem;
}

    .checkmark-list ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .checkmark-list li {
        font-size: 1.8rem;
        font-weight: 800;
        line-height: 1.4;
        color: var(--black);
        padding-left: 4.5rem;
        position: relative;
        margin-bottom: 2.4rem;
    }

        .checkmark-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 3rem;
            height: 3rem;
            background-image: url('/html/assets/img/icons/checkmark-icon.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

        .checkmark-list li span {
            color: var(--bancorp-teal-5);
        }

    .checkmark-list .footnote {
        font-size: 1.4rem;
        font-weight: 400;
        color: var(--black);
        margin-top: 3.2rem;
    }

/* Checkmark List - Responsive */
@media (max-width: 991px) {
    .checkmark-list {
        grid-template-columns: 1fr;
        gap: 0;
    }

        .checkmark-list li {
            font-size: 1.7rem;
            padding-left: 4rem;
        }

            .checkmark-list li::before {
                width: 2.8rem;
                height: 2.8rem;
            }

        .checkmark-list .footnote {
            font-size: 1.3rem;
            margin-top: 2.8rem;
        }
}

@media (max-width: 767px), (max-height: 480px) {
    .checkmark-list li {
        font-size: 1.6rem;
        padding-left: 3.6rem;
    }

        .checkmark-list li::before {
            width: 2.4rem;
            height: 2.4rem;
        }

    .checkmark-list .footnote {
        font-size: 1.2rem;
        margin-top: 2.4rem;
    }
}

.transactions .transaction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 2.4rem;
}

    .transactions .transaction-grid .career-tile {
        min-height: 23rem;
        justify-content: flex-end;
    }

        .transactions .transaction-grid .career-tile .small-title {
            padding: 1.6rem;
        }

        .transactions .transaction-grid .career-tile .text {
            min-height: initial;
            height: initial;
            padding: 1.6rem;
            width: 100%;
        }

@media (max-width: 1023px) {
    .transactions .transaction-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 551px) {
    .transactions .transaction-grid {
        grid-template-columns: 1fr;
    }
}

/* Photo and Content Section Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.photo-and-content {
    display: grid;
    grid-template-columns: 22.5rem 1fr;
    gap: 6rem;
    align-items: center;
}

    .photo-and-content > div:first-child {
        flex-shrink: 0;
    }

        .photo-and-content > div:first-child img {
            display: block;
            width: auto;
            height: auto;
            max-width: 100%;
            align-self: flex-start;
        }

    .photo-and-content > div:nth-child(2) {
        display: flex;
        flex-direction: column;
    }

    .photo-and-content h2 {
        font-size: 3.2rem;
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 1.8rem;
    }

    .photo-and-content h5 {
        font-size: 2.2rem;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: .5rem;
    }

    .photo-and-content .text {
        font-size: 1.8rem;
        font-weight: 400;
        line-height: 1.4;
        margin-bottom: 2.4rem;
    }

    .photo-and-content .buttons {
        margin-top: 1rem;
    }

/* Photo and Content - Responsive */
@media (max-width: 991px) {
    .photo-and-content {
        gap: 4rem;
    }
}

@media (max-width: 767px), (max-height: 480px) {
    .photo-and-content {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

        .photo-and-content > div:first-child {
            order: 1;
        }

        .photo-and-content > div:nth-child(2) {
            order: 2;
            gap: 1.6rem;
        }

        .photo-and-content .buttons {
            margin-top: 0.5rem;
        }
}

.category-labels {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

    .category-labels > div {
        background-color: var(--bancorp-gray-1);
        padding: .5rem 1.5rem;
        border-radius: 2rem;
        margin-right: 1rem;
    }

/* Scroll Fade-In Animation Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.fade-in-section {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .fade-in-section.fade-in-visible {
        opacity: 1;
        transform: translateY(0);
    }

/* Optional: Add staggered animation delays for child elements */
.icon-title-text-card-grid > .fade-in-section:nth-child(1) {
    transition-delay: 0s;
}

.icon-title-text-card-grid > .fade-in-section:nth-child(2) {
    transition-delay: 0.1s;
}

.icon-title-text-card-grid > .fade-in-section:nth-child(3) {
    transition-delay: 0.2s;
}

.icon-title-text-card-grid > .fade-in-section:nth-child(4) {
    transition-delay: 0.3s;
}

.icon-title-text-grid > .fade-in-section:nth-child(1) {
    transition-delay: 0s;
}

.icon-title-text-grid > .fade-in-section:nth-child(2) {
    transition-delay: 0.15s;
}

.icon-title-text-grid > .fade-in-section:nth-child(3) {
    transition-delay: 0.3s;
}

.accordion-item.fade-in-section:nth-child(1) {
    transition-delay: 0s;
}

.accordion-item.fade-in-section:nth-child(2) {
    transition-delay: 0.1s;
}

.accordion-item.fade-in-section:nth-child(3) {
    transition-delay: 0.15s;
}

.accordion-item.fade-in-section:nth-child(4) {
    transition-delay: 0.2s;
}

.accordion-item.fade-in-section:nth-child(5) {
    transition-delay: 0.25s;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .fade-in-section {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

.partner-logos {
    overflow: hidden;
    position: relative;
    width: 100%;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.partner-logos-track {
    display: inline-flex;
    align-items: center;
    gap: 8rem;
    white-space: nowrap;
    will-change: transform;
    animation: scroll-logos 30s linear infinite;
}

    .partner-logos-track img {
        max-height: 5rem;
        width: auto;
        object-fit: contain;
        flex-shrink: 0;
        display: inline-block;
    }

@keyframes scroll-logos {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-33.333%);
    }
}

/* Pause animation on hover */
.partner-logos:hover .partner-logos-track {
    animation-play-state: paused;
}

/* Home Partner Section - Responsive */
@media (max-width: 991px) {
    .partner-logos-track {
        gap: 6rem;
        animation-duration: 25s;
    }

        .partner-logos-track img {
            max-height: 4.5rem;
        }
}

@media (max-width: 767px), (max-height: 480px) {
    .partner-logos-track {
        gap: 4rem;
        animation-duration: 20s;
    }

        .partner-logos-track img {
            max-height: 4rem;
        }
}

/* Latest News Carousel - Add gradient fade on sides */
/*.latest-news-carousel {
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}*/

/* Responsive adjustments for carousel gradient */
@media (max-width: 991px) {
    .latest-news-carousel {
        mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }
}


.bg-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 11rem 0;
    position: relative;
}

    .bg-img .overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0);
        z-index: 1;
    }

    .bg-img .wrap {
        position: relative;
        z-index: 2;
    }

    .bg-img .overlay.mobile-only {
        display: none;
    }

    .bg-img .overlay.desktop-only {
        display: block;
    }

@media (max-width: 991px) {
    .bg-img .overlay.mobile-only {
        display: block;
    }

    .bg-img .overlay.desktop-only {
        display: none;
    }
}
