/* =========================================================
   AGILITY UNITED
   DIVISION PAGE
   STANDALONE CSS
   ========================================================= */


/* =========================================================
   ROOT
   ========================================================= */

:root {

    --orange: #ff5a1f;
    --orange-dark: #c93f0e;

    --black: #080808;
    --black-2: #0d0d0d;
    --black-3: #121212;
    --black-4: #171717;

    --white: #ffffff;
    --text: #eeeeee;
    --muted: #8a8a8a;
    --muted-2: #5e5e5e;

    --border: rgba(255, 255, 255, 0.08);
    --border-orange: rgba(255, 90, 31, 0.28);

}


/* =========================================================
   RESET
   ========================================================= */

* {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}


html {

    scroll-behavior: smooth;

}


body {

    background: var(--black);
    color: var(--white);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.5;

}


button,
input,
textarea,
select {

    font: inherit;

}


a {

    color: inherit;
    text-decoration: none;

}

/* =========================================================
   NAVBAR — MATCH ACHIEVEMENT STYLE
========================================================= */

.navbar {
    width: 100%;
    height: 80px;
    padding: 0 7%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    background: rgba(12, 12, 12, 0.96);
    border-bottom: 1px solid rgba(255, 107, 0, 0.2);

    position: sticky;
    top: 0;
    z-index: 1000;
}


/* BRAND */

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;

    text-decoration: none;
    color: #fff;
}

.nav-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.nav-brand span {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
}

.nav-brand strong {
    color: #ff6b00;
}


/* MENU */

.nav-menu {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-menu a {
    position: relative;

    color: #fff;
    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    transition: 0.3s;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: #ff6b00;
}


/* ACTIVE UNDERLINE */

.nav-menu a.active::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -8px;

    width: 100%;
    height: 2px;

    background: #ff6b00;
}


/* THREE DOTS */

.menu-toggle {
    display: none;

    border: none;
    background: transparent;

    color: #fff;

    font-size: 29px;
    font-weight: 700;

    cursor: pointer;
    line-height: 1;

    padding: 5px;
}


/* =========================================================
   HERO
   ========================================================= */

.division-hero {

    position: relative;

    min-height: 430px;

    padding:
        150px 5% 90px;

    display: flex;

    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(255, 90, 31, 0.12),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #090909,
            #101010
        );

}


.division-hero::before {

    content: "";

    position: absolute;

    width: 500px;
    height: 500px;

    right: -180px;
    top: -200px;

    border-radius: 50%;

    border:
        1px solid rgba(255, 90, 31, 0.12);

}


.division-hero-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(8, 8, 8, 0.95),
            rgba(8, 8, 8, 0.55),
            rgba(8, 8, 8, 0.85)
        );

}


.division-hero-content {

    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1150px;

    margin: 0 auto;

}


.division-eyebrow {

    display: inline-block;

    margin-bottom: 14px;

    color: var(--orange);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 3px;

}


.division-hero h1 {

    color: var(--white);

    font-size:
        clamp(42px, 7vw, 78px);

    font-weight: 900;

    line-height: 0.95;

    letter-spacing: -2px;

}


.division-hero h1 span {

    color: var(--orange);

    display: block;

}


.division-hero p {

    max-width: 560px;

    margin-top: 22px;

    color: #999;

    font-size: 14px;

    line-height: 1.8;

}


/* =========================================================
   CONTAINER
   ========================================================= */

.division-container {

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

    padding:
        0 25px;

}


/* =========================================================
   SECTIONS
   ========================================================= */

.club-leader-section,
.teams-section {

    padding:
        85px 0;

}


.club-leader-section {

    background: #0a0a0a;

}


.teams-section {

    background: #080808;

}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.section-heading {

    margin-bottom: 35px;

}


.section-heading > span {

    display: block;

    margin-bottom: 8px;

    color: var(--orange);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 2.5px;

}


.section-heading h2 {

    color: var(--white);

    font-size:
        clamp(28px, 4vw, 42px);

    font-weight: 900;

    line-height: 1.1;

    letter-spacing: -1px;

}


.section-heading h2 strong {

    color: var(--orange);

}


.section-heading p {

    max-width: 580px;

    margin-top: 12px;

    color: #777;

    font-size: 13px;

    line-height: 1.7;

}


/* =========================================================
   CLUB LEADER CARD
   ========================================================= */

.club-leader-card {

    min-height: 125px;

    padding:
        25px 28px;

    display: grid;

    grid-template-columns:
        55px
        55px
        1fr
        auto;

    align-items: center;

    gap: 20px;

    background:
        linear-gradient(
            135deg,
            #151515,
            #101010
        );

    border:
        1px solid var(--border);

    border-radius: 14px;

    transition:
        border-color 0.25s ease,
        transform 0.25s ease;

}


.club-leader-card:hover {

    border-color:
        var(--border-orange);

    transform:
        translateY(-2px);

}


/* =========================================================
   LEADER NUMBER
   ========================================================= */

.leader-number {

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;

}


.leader-number span {

    color: #555;

    font-size: 10px;

    font-weight: 800;

}


/* =========================================================
   LEADER ICON
   ========================================================= */

.leader-icon {

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--orange);

    background:
        rgba(255, 90, 31, 0.08);

    border:
        1px solid rgba(255, 90, 31, 0.18);

    border-radius: 12px;

    font-size: 18px;

}


/* =========================================================
   LEADER MAIN
   ========================================================= */

.leader-main {

    min-width: 0;

}


.leader-label {

    display: block;

    margin-bottom: 5px;

    color: var(--orange);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;

}


.leader-main h3 {

    color: var(--white);

    font-size: 20px;

    font-weight: 800;

}


.leader-main p {

    margin-top: 3px;

    color: #666;

    font-size: 11px;

}


/* =========================================================
   LEADER INFO
   ========================================================= */

.leader-info {

    display: flex;

    align-items: center;

    gap: 30px;

}


.leader-info-item {

    display: flex;

    flex-direction: column;

    gap: 5px;

}


.leader-info-item > span {

    color: #555;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1px;

}


.leader-info-item > strong {

    color: #ddd;

    font-size: 12px;

}


.leader-role-badge {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 35px;

    padding:
        5px 9px;

    color: var(--orange) !important;

    background:
        rgba(255, 90, 31, 0.08);

    border:
        1px solid rgba(255, 90, 31, 0.2);

    border-radius: 5px;

}


/* =========================================================
   DIVISION LIST
   ========================================================= */

#divisions-container {

    display: flex;

    flex-direction: column;

    gap: 14px;

}


/* =========================================================
   DIVISION CARD
   ========================================================= */

.division-card {

    width: 100%;

    overflow: hidden;

    background: #101010;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 13px;

    transition:
        border-color 0.3s ease,
        background 0.3s ease;

}


.division-card:hover {

    border-color:
        rgba(255, 90, 31, 0.18);

}


.division-card.open {

    border-color:
        rgba(255, 90, 31, 0.3);

    background: #111111;

}


/* =========================================================
   DIVISION HEADER
   ========================================================= */

.division-header {

    width: 100%;

    min-height: 92px;

    padding:
        15px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    border: none;

    background: transparent;

    color: var(--white);

    text-align: left;

    cursor: pointer;

}


.division-header-left {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 17px;

}


/* =========================================================
   DIVISION LOGO
   ========================================================= */

.division-logo {

    width: 58px;
    height: 58px;

    min-width: 58px;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: hidden;

    background:
        #181818;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius: 11px;

}


.division-logo img {

    width: 100%;
    height: 100%;

    object-fit: contain;

    padding: 5px;

}


.division-logo-fallback {

    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--orange);

    font-size: 19px;

}


/* =========================================================
   DIVISION INFO
   ========================================================= */

.division-info {

    min-width: 0;

}


.division-number {

    display: block;

    margin-bottom: 3px;

    color: var(--orange);

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 1.8px;

}


.division-name {

    overflow: hidden;

    color: var(--white);

    font-size: 17px;

    font-weight: 800;

    letter-spacing: 0.2px;

    white-space: nowrap;

    text-overflow: ellipsis;

}


.division-description {

    margin-top: 3px;

    color: #666;

    font-size: 10px;

}


/* =========================================================
   DIVISION HEADER RIGHT
   ========================================================= */

.division-header-right {

    display: flex;

    align-items: center;

    gap: 20px;

    flex-shrink: 0;

}


.division-member-count {

    display: flex;

    align-items: center;

    gap: 7px;

    color: #777;

    font-size: 9px;

    font-weight: 700;

}


.division-member-count i {

    color: var(--orange);

    font-size: 10px;

}


/* =========================================================
   BORDER ARROW
   ========================================================= */

.division-arrow {

    width: 35px;
    height: 35px;

    min-width: 35px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius: 50%;

    transition:
        background 0.3s ease,
        border-color 0.3s ease;

}


.division-arrow > span {

    width: 9px;
    height: 9px;

    display: block;

    border-left:
        2px solid var(--orange);

    border-top:
        2px solid var(--orange);

    transform:
        rotate(45deg);

    margin-top: 4px;

    transition:
        transform 0.3s ease,
        margin-top 0.3s ease;

}


.division-card.open .division-arrow {

    background:
        rgba(255, 90, 31, 0.08);

    border-color:
        rgba(255, 90, 31, 0.3);

}


.division-card.open .division-arrow > span {

    transform:
        rotate(225deg);

    margin-top: -4px;

}





/* =========================================================
   DIVISION LEADER SECTION
   ========================================================= */

.division-leader-section {

    margin:
        0 20px;

    padding:
        0 0 25px;

    border-top:
        1px solid rgba(255, 255, 255, 0.06);

}


.division-leader-heading {

    padding-top: 23px;

    margin-bottom: 14px;

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--orange);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.division-leader-heading i {

    font-size: 11px;

}


/* =========================================================
   DIVISION LEADER CARD
   ========================================================= */

.division-leader-card {

    min-height: 78px;

    padding:
        14px 16px;

    display: flex;

    align-items: center;

    gap: 14px;

    background:
        #151515;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    border-radius: 10px;

}


.division-leader-avatar {

    width: 45px;
    height: 45px;

    min-width: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: var(--orange);

    background:
        rgba(255, 90, 31, 0.08);

    border:
        1px solid rgba(255, 90, 31, 0.15);

    border-radius: 50%;

}


.division-leader-info {

    min-width: 0;

    flex: 1;

}


.division-leader-info > span {

    display: block;

    margin-bottom: 2px;

    color: #555;

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.division-leader-info h4 {

    color: #eee;

    font-size: 15px;

    font-weight: 800;

}


.division-leader-info p {

    margin-top: 2px;

    color: #666;

    font-size: 10px;

}


.division-leader-role {

    min-width: 40px;

    padding:
        6px 10px;

    color: var(--orange);

    background:
        rgba(255, 90, 31, 0.08);

    border:
        1px solid rgba(255, 90, 31, 0.2);

    border-radius: 5px;

    font-size: 9px;

    font-weight: 800;

    text-align: center;

}


.division-leader-card.no-leader {

    opacity: 0.7;

}


/* =========================================================
   TEAM MEMBERS
   ========================================================= */

.division-members {

    margin:
        0 20px 25px;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    border-radius: 10px;

    overflow: hidden;

    background: #0d0d0d;

}


.members-panel-top {

    min-height: 48px;

    padding:
        0 15px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.06);

}


.members-panel-title {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #ddd;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

}


.members-panel-title i {

    color: var(--orange);

}


.members-panel-top > span {

    color: #555;

    font-size: 8px;

    font-weight: 700;

}


/* =========================================================
   TABLE
   ========================================================= */

.members-table-wrapper {

    width: 100%;

    overflow-x: auto;

}


.members-table {

    width: 100%;

    min-width: 650px;

    border-collapse: collapse;

}


.members-table th {

    padding:
        11px 14px;

    color: #555;

    background: #111;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.05);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 1px;

    text-align: left;

}


.members-table td {

    padding:
        11px 14px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.045);

    color: #aaa;

    font-size: 10px;

}


.members-table tbody tr:last-child td {

    border-bottom: none;

}


.members-table tbody tr:hover {

    background:
        rgba(255, 255, 255, 0.018);

}


.member-index {

    width: 45px;

    color: #444 !important;

    font-weight: 700;

}


.member-name-cell {

    display: flex;

    align-items: center;

    gap: 10px;

}


.member-photo-placeholder {

    width: 30px;
    height: 30px;

    min-width: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #666;

    background:
        #181818;

    border:
        1px solid rgba(255, 255, 255, 0.06);

    border-radius: 50%;

    font-size: 10px;

}


.member-nickname {

    color: #eee !important;

    font-weight: 700;

}


.member-game-id {

    color: #777 !important;

    font-family:
        monospace;

    font-size: 9px !important;

}


.member-role {

    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 32px;

    padding:
        4px 7px;

    color: #bbb;

    background:
        rgba(255, 255, 255, 0.04);

    border:
        1px solid rgba(255, 255, 255, 0.06);

    border-radius: 4px;

    font-size: 8px;

    font-weight: 800;

}


.member-status {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    color: #666;

    font-size: 8px;

    font-weight: 800;

}


.leader-status {

    color: var(--orange);

}


.member-empty,
.members-empty {

    padding:
        30px !important;

    color: #555 !important;

    text-align: center !important;

}


/* =========================================================
   LOADING
   ========================================================= */

.division-loading {

    min-height: 120px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    color: #666;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1px;

}


.loading-spinner {

    width: 20px;
    height: 20px;

    border:
        2px solid rgba(255, 255, 255, 0.08);

    border-top-color:
        var(--orange);

    border-radius: 50%;

    animation:
        spin 0.8s linear infinite;

}


@keyframes spin {

    to {

        transform:
            rotate(360deg);

    }

}


/* =========================================================
   ERROR
   ========================================================= */

.division-error {

    padding:
        45px 25px;

    text-align: center;

    background:
        #111;

    border:
        1px solid rgba(255, 90, 31, 0.2);

    border-radius: 12px;

}


.division-error > i {

    color: var(--orange);

    font-size: 25px;

}


.division-error h3 {

    margin-top: 14px;

    color: #eee;

    font-size: 14px;

}


.division-error p {

    max-width: 600px;

    margin:
        10px auto 0;

    color: #777;

    font-size: 11px;

    line-height: 1.7;

}


.division-error small {

    display: block;

    margin-top: 15px;

    color: #555;

    font-size: 9px;

    line-height: 1.7;

}


.division-error strong {

    color: #777;

}


/* =========================================================
   CTA
   ========================================================= */

.division-cta {

    padding:
        80px 25px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #111111,
            #090909
        );

    border-top:
        1px solid rgba(255, 255, 255, 0.05);

}


.division-cta-inner {

    max-width: 700px;

    margin: 0 auto;

}


.division-cta-inner > span {

    color: var(--orange);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 3px;

}


.division-cta h2 {

    margin-top: 12px;

    color: #eee;

    font-size:
        clamp(25px, 4vw, 40px);

    font-weight: 900;

}


.division-cta h2 strong {

    color: var(--orange);

}


.division-cta p {

    margin:
        12px auto 25px;

    color: #666;

    font-size: 12px;

}


.division-cta-button {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding:
        12px 18px;

    color: white;

    background:
        var(--orange);

    border-radius: 6px;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 0.7px;

    transition:
        background 0.25s ease,
        transform 0.25s ease;

}


.division-cta-button:hover {

    background:
        var(--orange-dark);

    transform:
        translateY(-2px);

}


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

.footer {

    background:
        #060606;

    border-top:
        1px solid rgba(255, 255, 255, 0.06);

}


.footer-container {

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

    padding:
        55px 25px;

}


.footer-content {

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    gap: 40px;

}


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

.footer-brand {

    display: flex;

    align-items: center;

    gap: 12px;

}


.footer-brand img {

    width: 42px;
    height: 42px;

    object-fit: contain;

}


.footer-brand-text h3 {

    color: #eee;

    font-size: 13px;

    font-weight: 900;

    letter-spacing: 1px;

}


.footer-brand-text h3 span {

    color: var(--orange);

}


.footer-brand-text p {

    margin-top: 3px;

    color: #555;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.5px;

}


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

.footer-tagline {

    text-align: center;

}


.footer-tagline p {

    color: #444;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: 2px;

}


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

.footer-contact {

    text-align: right;

}


.footer-label {

    color: var(--orange);

    font-size: 7px;

    font-weight: 800;

    letter-spacing: 2px;

}


.footer-contact h3 {

    margin-top: 5px;

    color: #ddd;

    font-size: 12px;

}


.footer-contact p {

    margin-top: 4px;

    color: #555;

    font-size: 9px;

}


.footer-socials {

    margin-top: 12px;

    display: flex;

    justify-content: flex-end;

    gap: 7px;

}


.footer-socials a {

    width: 30px;
    height: 30px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #777;

    background:
        #111;

    border:
        1px solid rgba(255, 255, 255, 0.07);

    border-radius: 6px;

    font-size: 12px;

    transition:
        color 0.25s ease,
        border-color 0.25s ease;

}


.footer-socials a:hover {

    color: var(--orange);

    border-color:
        rgba(255, 90, 31, 0.3);

}


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

.footer-bottom {

    padding:
        18px 25px;

    text-align: center;

    border-top:
        1px solid rgba(255, 255, 255, 0.05);

}


.footer-bottom p {

    color: #3f3f3f;

    font-size: 8px;

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

    .nav-menu {
        gap: 20px;
    }

}

/* =========================================================
   MOBILE NAVBAR
========================================================= */

@media (max-width: 768px) {

    .navbar {
        height: 70px;
        padding: 0 5%;
    }

    .nav-logo {
        width: 32px;
        height: 32px;
    }

    .nav-brand span {
        display: inline-block;
        font-size: 11px;
        white-space: nowrap;
    }

    .menu-toggle {
        display: block;
    }


    /* MOBILE DROPDOWN */

    .nav-menu {
        display: none;

        position: absolute;

        top: 70px;
        right: 5%;

        width: 210px;

        padding: 12px;

        flex-direction: column;
        align-items: stretch;

        gap: 0;

        background: #151515;

        border: 1px solid rgba(255, 107, 0, 0.35);

        border-radius: 12px;

        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
    }

    .nav-menu.show {
        display: flex;
    }


    /* MOBILE LINK */

    .nav-menu a {
        padding: 13px 15px;

        font-size: 12px;

        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .nav-menu a:last-child {
        border-bottom: none;
    }


    /* REMOVE DESKTOP UNDERLINE */

    .nav-menu a.active::after {
        display: none;
    }


    /* ACTIVE MOBILE */

    .nav-menu a.active {
        background: rgba(255, 107, 0, 0.1);
        border-radius: 7px;
    }
}




    .division-hero {

        min-height: 390px;

        padding:
            130px 25px 70px;

    }


    .division-hero p {

        max-width: 480px;

        font-size: 12px;

    }


    .division-container {

        padding:
            0 20px;

    }


    .club-leader-section,
    .teams-section {

        padding:
            65px 0;

    }


    .club-leader-card {

        grid-template-columns:
            48px
            48px
            1fr;

        gap: 15px;

        padding:
            20px;

    }


    .leader-info {

        grid-column:
            1 / -1;

        padding-top:
            12px;

        border-top:
            1px solid rgba(255, 255, 255, 0.05);

    }


    .division-header {

        min-height: 82px;

        padding:
            13px 15px;

    }


    .division-header-left {

        gap: 12px;

    }


    .division-logo {

        width: 48px;
        height: 48px;

        min-width: 48px;

    }


    .division-name {

        font-size: 14px;

    }


    .division-member-count {

        display: none;

    }


    .division-arrow {

        width: 32px;
        height: 32px;

        min-width: 32px;

    }


    .division-leader-section {

        margin:
            0 15px;

    }


    .division-members {

        margin:
            0 15px 20px;

    }


    .footer-container {

        padding:
            45px 20px;

    }


    .footer-content {

        grid-template-columns:
            1fr;

        text-align: center;

        gap: 28px;

    }


    .footer-brand {

        justify-content: center;

    }


    .footer-contact {

        text-align: center;

    }


    .footer-socials {

        justify-content: center;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .navbar {
        padding: 0 15px;
    }

    .nav-brand {
        gap: 7px;
    }

    .nav-logo {
        width: 30px !important;
        height: 30px !important;
    }

    .nav-brand span {
        display: inline-block;
        font-size: 10px;
        letter-spacing: .5px;
        white-space: nowrap;
    }

    .menu-toggle {
        font-size: 28px;
        color: #fff;
    }

    .nav-menu {
        right: 15px;
    }
}


    .division-hero {

        min-height: 350px;

        padding:
            115px 20px 60px;

    }


    .division-eyebrow {

        font-size: 9px;

        letter-spacing: 2px;

    }


    .division-hero h1 {

        font-size: 42px;

    }


    .division-hero p {

        margin-top: 16px;

        font-size: 11px;

        line-height: 1.7;

    }


    .division-container {

        padding:
            0 15px;

    }


    .section-heading {

        margin-bottom: 25px;

    }


    .section-heading h2 {

        font-size: 28px;

    }


    .section-heading p {

        font-size: 11px;

    }


    .club-leader-card {

        grid-template-columns:
            42px
            1fr;

        gap: 12px;

        padding:
            17px;

    }


    .leader-number {

        width: 40px;
        height: 40px;

    }


    .leader-icon {

        width: 42px;
        height: 42px;

        grid-column:
            1 / 2;

        grid-row:
            2;

    }


    .leader-main {

        grid-column:
            2;

        grid-row:
            1 / 3;

    }


    .leader-main h3 {

        font-size: 16px;

    }


    .leader-info {

        grid-column:
            1 / -1;

        grid-row:
            3;

    }


    .leader-info-item > strong {

        font-size: 10px;

    }


    .division-header {

        min-height: 76px;

        padding:
            12px;

    }


    .division-logo {

        width: 43px;
        height: 43px;

        min-width: 43px;

    }


    .division-number {

        font-size: 7px;

    }


    .division-name {

        font-size: 12px;

    }


    .division-description {

        font-size: 9px;

    }


    .division-header-right {

        gap: 8px;

    }


    .division-arrow {

        width: 30px;
        height: 30px;

        min-width: 30px;

    }


    .division-arrow > span {

        width: 8px;
        height: 8px;

    }


    .division-leader-section {

        margin:
            0 12px;

        padding-bottom:
            20px;

    }


    .division-leader-heading {

        padding-top:
            18px;

        font-size: 8px;

    }


    .division-leader-card {

        padding:
            12px;

        gap: 10px;

    }


    .division-leader-avatar {

        width: 38px;
        height: 38px;

        min-width: 38px;

        font-size: 12px;

    }


    .division-leader-info h4 {

        font-size: 13px;

    }


    .division-leader-info p {

        font-size: 9px;

    }


    .division-leader-role {

        min-width: 32px;

        padding:
            5px 7px;

        font-size: 8px;

    }


    .division-members {

        margin:
            0 12px 15px;

    }


    .members-panel-top {

        padding:
            0 12px;

    }


    .members-table {

        min-width: 600px;

    }


    .division-cta {

        padding:
            60px 20px;

    }


    .footer-container {

        padding:
            40px 15px;

    }

}
/* =========================================================
   DIVISION ACCORDION — FINAL
========================================================= */

.division-content {
    display: none !important;
}

.division-card.open .division-content {
    display: block !important;
}