/* =====================================================
   HEX HOSTING - TWENTY-ONE THEME
===================================================== */

:root {
    --hex-navy: #001124;
    --hex-menu: #0b1220;
    --hex-cyan: #00d4ff;
    --hex-border: rgba(255, 255, 255, 0.14);
}

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

#header {
    width: 100%;
    color: #ffffff;
    background: var(--hex-navy) !important;
}

#header .container,
#header .container-fluid {
    width: 100%;
    max-width: none !important;
    padding-right: 52px;
    padding-left: 52px;
}

#header .navbar {
    min-height: 0 !important;
}

/* =========================================
   LOGGED-IN ACCOUNT BAR
========================================= */

#header .topbar {
    min-height: 38px;
    color: #dbe7f2;
    background: #000c19 !important;
    border-bottom: 1px solid var(--hex-border);
}

#header .topbar .btn,
#header .topbar .input-group-text {
    min-height: 38px;
    color: #dbe7f2 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
}

#header .topbar .btn:hover,
#header .topbar .btn:focus {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

/* =========================================
   MAIN WEBSITE HEADER
========================================= */

#header .hex-site-header {
    display: block !important;
    width: 100%;
    padding: 0 !important;
    background: var(--hex-navy) !important;
    border: 0 !important;
}

#header .hex-site-header-inner {
    min-height: 134px;

    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
}

#header .hex-site-header .navbar-brand {
    flex: 0 0 auto;

    margin: 0 auto 0 0 !important;
    padding: 0 !important;
}

#header .hex-site-header .navbar-brand .logo-img {
    display: block !important;

    width: auto !important;
    height: 92px !important;

    max-width: 250px !important;
    max-height: 92px !important;

    object-fit: contain;
}

/* =========================================
   DESKTOP WEBSITE LINKS
========================================= */

#header .hex-site-links {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;

    gap: 30px !important;

    margin: 0 0 0 auto !important;
    padding: 0 !important;
}

#header .hex-site-links a {
    display: inline-flex !important;
    align-items: center;

    margin: 0 !important;
    padding: 12px 0 !important;

    color: #ffffff !important;
    background: transparent !important;

    border: 0 !important;

    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;

    text-decoration: none !important;
    white-space: nowrap;
}

#header .hex-site-links a:hover,
#header .hex-site-links a:focus {
    color: var(--hex-cyan) !important;
}

/* =========================================
   CART AND ACCOUNT BUTTONS
========================================= */

#header .hex-header-actions {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;

    margin: 0 0 0 16px !important;
    padding: 0 !important;
}

#header .hex-header-actions .cart-btn {
    position: relative;

    width: 35px;
    min-width: 35px;
    height: 35px;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 6px !important;

    color: #dce8f4 !important;
    background: transparent !important;

    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 4px;
}

#header .hex-header-actions .cart-btn:hover {
    color: var(--hex-cyan) !important;
    border-color: var(--hex-cyan) !important;
}

#header .hex-header-actions .cart-btn .badge {
    position: absolute;
    top: -8px;
    right: -8px;
}

#header .hex-account-button {
    padding: 7px 10px !important;

    color: var(--hex-cyan) !important;
    background: transparent !important;

    border: 1px solid #7890a8 !important;
    border-radius: 4px;

    font-size: 12px !important;
    line-height: 1.2;
}

#header .hex-account-button:hover,
#header .hex-account-button:focus {
    color: var(--hex-navy) !important;
    background: var(--hex-cyan) !important;
    border-color: var(--hex-cyan) !important;
}

/* =========================================
   WHMCS CLIENT AREA NAVIGATION
========================================= */

#header .main-navbar-wrapper {
    min-height: 58px !important;
    padding: 0 !important;

    background: var(--hex-menu) !important;

    border-top: 1px solid var(--hex-border);
}

#header .main-navbar-wrapper > .container,
#header .main-navbar-wrapper .navbar-collapse {
    min-height: 58px;
}

#header .main-navbar-wrapper .navbar-collapse {
    align-items: center;
}

#header .main-navbar-wrapper .navbar-nav > li > a,
#header .main-navbar-wrapper .navbar-nav > li > .nav-link {
    color: #ffffff !important;

    font-size: 14px !important;
    font-weight: 500;
}

#header .main-navbar-wrapper .navbar-nav > li > a:hover,
#header .main-navbar-wrapper .navbar-nav > li > a:focus,
#header .main-navbar-wrapper .navbar-nav > li.active > a {
    color: var(--hex-cyan) !important;
}

#header .dropdown-menu a {
    color: #111827 !important;
}

#header .dropdown-menu a:hover,
#header .dropdown-menu a:focus {
    color: #001124 !important;
    background: #eef8ff !important;
}

/* =========================================
   MOBILE MENU BUTTON
========================================= */

#header .hex-menu-button {
    width: 42px;
    min-width: 42px;
    height: 42px;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    padding: 8px !important;

    color: #ffffff !important;
    background: transparent !important;

    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    border-radius: 5px;
}

/* =========================================
   MOBILE WEBSITE DROPDOWN
========================================= */

#header .hex-mobile-site-menu {
    width: 100%;
    padding: 0;

    background: #06182c !important;

    border-top: 1px solid var(--hex-border);
}

#header .hex-mobile-site-menu .container-fluid {
    display: block !important;

    padding-top: 6px;
    padding-bottom: 6px;
}

#header .hex-mobile-site-menu a {
    width: 100%;
    display: block !important;

    margin: 0 !important;
    padding: 12px 5px !important;

    color: #ffffff !important;
    background: transparent !important;

    border: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;

    font-size: 15px !important;
    font-weight: 500;
    line-height: 1.4;

    text-align: left;
    text-decoration: none !important;
}

#header .hex-mobile-site-menu a:last-child {
    border-bottom: 0 !important;
}

#header .hex-mobile-site-menu a:hover,
#header .hex-mobile-site-menu a:focus {
    color: var(--hex-cyan) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

/* =========================================
   BREADCRUMB
========================================= */

.master-breadcrumb {
    background: #f0f1f3;
    border-bottom: 1px solid #dfe3e7;
}

.master-breadcrumb .breadcrumb {
    margin-bottom: 0;
    background: transparent;
}

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

#footer.hex-footer {
    width: 100%;

    margin: 40px 0 0;
    padding: 60px 0 30px;

    color: #ffffff;
    background: var(--hex-navy) !important;
}

#footer.hex-footer .container-fluid {
    padding-right: 40px;
    padding-left: 40px;
}

#footer.hex-footer h4 {
    margin-bottom: 20px;

    color: #ffffff;

    font-size: 18px;
    font-weight: 600;
}

#footer.hex-footer p,
#footer.hex-footer a {
    color: #cbd5e1;
}

#footer.hex-footer a:hover {
    color: #ffffff;
    text-decoration: none;
}

#footer.hex-footer ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

#footer.hex-footer ul li {
    margin-bottom: 8px;
}

#footer.hex-footer .footer-logo {
    width: auto;

    max-width: 180px;
    max-height: 85px;

    margin-bottom: 20px;
}

#footer.hex-footer .hex-language-button {
    margin-top: 14px;

    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);

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

#footer.hex-footer .hex-footer-copyright {
    margin-top: 35px;
    padding-top: 20px;

    color: #9ca3af;
    text-align: center;

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

/* =========================================
   SMALL DESKTOP SCREENS
========================================= */

@media (max-width: 1399.98px) and (min-width: 1200px) {

    #header .container,
    #header .container-fluid {
        padding-right: 26px;
        padding-left: 26px;
    }

    #header .hex-site-links {
        gap: 18px !important;
    }

    #header .hex-site-links a {
        font-size: 14px !important;
    }

    #header .hex-site-header .navbar-brand .logo-img {
        height: 78px !important;
        max-width: 215px !important;
    }

}

/* =========================================
   TABLET AND MOBILE
========================================= */

@media (max-width: 1199.98px) {

    #header .container,
    #header .container-fluid {
        padding-right: 18px;
        padding-left: 18px;
    }

    #header .hex-site-links {
        display: none !important;
    }

    #header .hex-site-header-inner {
        min-height: 88px;
    }

    #header .hex-site-header .navbar-brand .logo-img {
        height: 64px !important;
        max-width: 185px !important;
        max-height: 64px !important;
    }

    #header .hex-header-actions {
        margin-left: auto !important;
    }

    #header .main-navbar-wrapper {
        min-height: 0 !important;
    }

    #header .main-navbar-wrapper > .container,
    #header .main-navbar-wrapper .navbar-collapse {
        min-height: 0;
    }

    #header #mainNavbar {
        width: 100%;

        padding-top: 12px;
        padding-bottom: 14px;
    }

    #header #mainNavbar .navbar-nav {
        width: 100%;
        display: block;

        margin: 0 !important;
    }

    #header #mainNavbar .navbar-nav > li {
        width: 100%;
        display: block;
    }

    #header #mainNavbar .navbar-nav > li > a,
    #header #mainNavbar .navbar-nav > li > .nav-link {
        width: 100%;
        display: block;

        padding: 11px 5px !important;

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

    #header #mainNavbar form {
        width: 100%;
        margin-bottom: 8px;
    }

}

/* =========================================
   MOBILE PHONES
========================================= */

@media (max-width: 575.98px) {

    #header .container,
    #header .container-fluid {
        padding-right: 14px;
        padding-left: 14px;
    }

    #header .hex-site-header-inner {
        min-height: 78px;
    }

    #header .hex-site-header .navbar-brand .logo-img {
        height: 54px !important;
        max-width: 158px !important;
        max-height: 54px !important;
    }

    #header .hex-header-actions .cart-btn,
    #header .hex-menu-button {
        width: 39px;
        min-width: 39px;
        height: 39px;
    }

    #footer.hex-footer {
        padding-top: 45px;
        text-align: center;
    }

    #footer.hex-footer .container-fluid {
        padding-right: 20px;
        padding-left: 20px;
    }

    #footer.hex-footer .row > div {
        margin-bottom: 30px;
    }

}

/* =====================================================
   HEX HOSTING - CLIENT AREA COLOUR + CORNER POLISH ONLY
   No layout changes
===================================================== */

:root {
    --hex-blue: #0878e8;
    --hex-blue-hover: #0668ca;
    --hex-page: #f5f7fa;
    --hex-card: #ffffff;
    --hex-text: #182033;
    --hex-muted: #667085;
    --hex-light-border: #dfe6ee;
    --hex-radius: 10px;
}


/* =========================================
   CLIENT AREA BACKGROUND
========================================= */

#main-body,
.main-content,
.primary-content {
    color: var(--hex-text);
    background: var(--hex-page) !important;
}


/* =========================================
   CARDS / PANELS
========================================= */

#main-body .card,
#main-body .panel,
.sidebar .card,
.primary-content .card {
    background: var(--hex-card) !important;
    border-color: var(--hex-light-border) !important;
    border-radius: var(--hex-radius) !important;
    overflow: hidden;
}

#main-body .card-header,
#main-body .panel-heading,
.sidebar .card-header,
.primary-content .card-header {
    color: var(--hex-navy) !important;
    background: #ffffff !important;
    border-color: var(--hex-light-border) !important;
}

#main-body .card-footer,
#main-body .panel-footer {
    background: #fafbfd !important;
    border-color: var(--hex-light-border) !important;
}


/* =========================================
   DASHBOARD TILES
   Colours only - retain native WHMCS sizing/layout
========================================= */

#main-body .tiles .tile {
    background: #ffffff !important;
    border-color: var(--hex-light-border) !important;
    border-top-color: var(--hex-blue) !important;
    border-radius: var(--hex-radius) !important;
    overflow: hidden;
}

#main-body .tiles .tile .stat,
#main-body .tiles .tile i,
#main-body .tiles .tile .fas,
#main-body .tiles .tile .far,
#main-body .tiles .tile .fa {
    color: var(--hex-blue) !important;
}

#main-body .tiles .tile .title {
    color: var(--hex-navy) !important;
}


/* =========================================
   ACTION TILES
========================================= */

#main-body .action-icon-btns a[class*="card-accent-"] {
    color: var(--hex-text) !important;
    background: #ffffff !important;
    border-color: var(--hex-light-border) !important;
    border-top-color: var(--hex-blue) !important;
    border-radius: var(--hex-radius) !important;
    overflow: hidden;
}

#main-body .action-icon-btns .ico-container i {
    color: var(--hex-blue) !important;
}


/* =========================================
   BUTTONS
========================================= */

#main-body .btn-primary,
#main-body .btn-success,
#main-body .btn-info,
#main-body a.btn-primary {
    color: #ffffff !important;
    background: var(--hex-blue) !important;
    border-color: var(--hex-blue) !important;
    border-radius: 6px !important;
}

#main-body .btn-primary:hover,
#main-body .btn-success:hover,
#main-body .btn-info:hover,
#main-body a.btn-primary:hover {
    background: var(--hex-blue-hover) !important;
    border-color: var(--hex-blue-hover) !important;
}

#main-body .btn-secondary,
#main-body .btn-default {
    color: var(--hex-navy) !important;
    background: #ffffff !important;
    border-color: #bcc9d6 !important;
    border-radius: 6px !important;
}


/* =========================================
   FORMS
========================================= */

#main-body .form-control,
#main-body input,
#main-body select,
#main-body textarea {
    border-color: #cfd9e4;
    border-radius: 6px !important;
}

#main-body .form-control:focus,
#main-body input:focus,
#main-body select:focus,
#main-body textarea:focus {
    border-color: var(--hex-blue) !important;
}


/* =========================================
   SIDEBAR / LIST ITEMS
========================================= */

#main-body .list-group,
#main-body .list-group-item,
.sidebar .list-group,
.sidebar .list-group-item {
    border-color: var(--hex-light-border) !important;
}

#main-body .list-group,
.sidebar .list-group {
    border-radius: var(--hex-radius) !important;
    overflow: hidden;
}

#main-body .list-group-item:hover,
.sidebar .list-group-item:hover {
    color: var(--hex-blue) !important;
    background: #f7faff !important;
}


/* =========================================
   TABLES
========================================= */

#main-body .table thead th {
    color: var(--hex-navy) !important;
    background: #f7f9fc !important;
    border-color: var(--hex-light-border) !important;
}

#main-body .table td {
    border-color: #edf1f5 !important;
}


/* =========================================
   STANDARD CART
   Colour + corners only
========================================= */

#order-standard_cart .card,
#order-standard_cart .panel,
#order-standard_cart .domain-promo-box,
#order-standard_cart .spotlight-tld {
    border-radius: var(--hex-radius) !important;
    overflow: hidden;
}

#order-standard_cart .cart-sidebar .card,
#order-standard_cart .cart-sidebar .panel {
    background: #ffffff !important;
    border-color: var(--hex-light-border) !important;
    border-top-color: var(--hex-blue) !important;
}

#order-standard_cart .btn-primary {
    color: #ffffff !important;
    background: var(--hex-blue) !important;
    border-color: var(--hex-blue) !important;
    border-radius: 6px !important;
}

#order-standard_cart .btn-primary:hover {
    background: var(--hex-blue-hover) !important;
    border-color: var(--hex-blue-hover) !important;
}

#order-standard_cart input,
#order-standard_cart select,
#order-standard_cart textarea,
#order-standard_cart .form-control {
    border-radius: 6px !important;
}


/* =====================================================
   HEX HOSTING - PRIORITY DASHBOARD NEWS
   Full-width, immediately after navigation/breadcrumb
   and before the account sidebar / dashboard content.
===================================================== */
#main-body .hex-dashboard-news {
    margin-bottom: 22px;
}
#main-body .hex-dashboard-news > .card {
    border: 1px solid #c9dfef !important;
    border-left: 4px solid var(--hex-blue) !important;
    border-radius: var(--hex-radius) !important;
    box-shadow: 0 3px 12px rgba(0, 17, 36, 0.055);
}
#main-body .hex-dashboard-news .card-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    background: #f1f8ff !important;
}
#main-body .hex-dashboard-news .card-header .card-title {
    font-size: 17px;
    font-weight: 700;
}
#main-body .hex-dashboard-news .list-group-item {
    padding: 13px 18px;
}
@media (max-width: 575.98px) {
    #main-body .hex-dashboard-news { margin-bottom: 16px; }
    #main-body .hex-dashboard-news .card-header { padding: 12px 14px; }
    #main-body .hex-dashboard-news .list-group-item { padding: 12px 14px; }
}


/* =====================================================
   HEX HOSTING FOOTER - unified stylesheet
   Previously embedded in footer.tpl
===================================================== */
/* =====================================================
       HEX HOSTING FOOTER
    ===================================================== */

    .hex-footer,
    .hex-footer * {
        box-sizing: border-box;
    }

    .hex-footer {
        width: 100%;
        margin: 0;
        padding: 62px 20px 68px;

        color: #ffffff;
        background: #001124;

        border-top: 0;
        font-family: "Open Sans", Arial, sans-serif;
    }

    .hex-footer .hex-footer-container {
        width: 100%;
        max-width: 1040px;
        margin: 0 auto;
        padding: 0;
    }


    /* =====================================================
       DESKTOP GRID
    ===================================================== */

    .hex-footer .hex-footer-grid {
        display: grid;

        grid-template-columns:
            minmax(210px, 1.25fr)
            minmax(155px, 0.9fr)
            minmax(120px, 0.7fr)
            minmax(110px, 0.65fr)
            minmax(190px, 0.9fr);

        align-items: start;
        gap: 45px;
    }

    .hex-footer h4,
    .hex-footer p,
    .hex-footer ul,
    .hex-footer li {
        margin-top: 0;
    }


    /* =====================================================
       ABOUT COLUMN
    ===================================================== */

    .hex-footer-about {
        min-width: 0;
    }

    .hex-footer-logo-link {
        display: inline-block;
        margin-bottom: 24px;
        text-decoration: none;
    }

    .hex-footer img.footer-logo {
        display: block;

        width: auto;
        max-width: 205px;

        height: auto;
        max-height: 82px;

        object-fit: contain;
    }

    .hex-footer-company-name {
        display: block;

        color: #ffffff;
        font-size: 26px;
        font-weight: 700;
        line-height: 1.2;
    }

    .hex-footer-about p {
        max-width: 220px;
        margin: 0;

        color: #ffffff !important;
        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 16px !important;
        font-weight: 400 !important;
        line-height: 1.6 !important;
    }


    /* =====================================================
       HEADINGS
    ===================================================== */

    .hex-footer h4 {
        margin: 0 0 17px;

        color: #ffffff !important;
        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 17px !important;
        font-weight: 700 !important;
        line-height: 1.3 !important;
    }


    /* =====================================================
       LINKS
    ===================================================== */

    .hex-footer-links {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .hex-footer-links li {
        margin: 0 0 12px;
        padding: 0;
    }

    .hex-footer-links li:last-child {
        margin-bottom: 0;
    }

    .hex-footer-links a {
        display: inline-block;

        color: #ffffff !important;
        font-family: "Open Sans", Arial, sans-serif !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        line-height: 1.4 !important;
        text-decoration: none !important;

        transition:
            color 0.2s ease,
            transform 0.2s ease;
    }

    .hex-footer-links a:hover,
    .hex-footer-links a:focus {
        color: #00d4ff !important;
        transform: translateX(3px);
    }


    /* =====================================================
       SOCIAL / CONTACT ICONS
    ===================================================== */

    .hex-footer-socials,
    .hex-footer-contact-buttons {
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .hex-footer-icon-button {
        width: 50px;
        height: 50px;
        padding: 0;

        display: inline-flex !important;
        align-items: center;
        justify-content: center;

        flex: 0 0 50px;

        color: #ffffff !important;
        border: 0 !important;
        border-radius: 5px;
        text-decoration: none !important;

        font-size: 24px;

        transition:
            transform 0.22s ease,
            filter 0.22s ease,
            box-shadow 0.22s ease;
    }

    .hex-footer-icon-button:hover,
    .hex-footer-icon-button:focus {
        color: #ffffff !important;

        filter: brightness(1.1);
        transform: translateY(-3px);

        box-shadow:
            0 9px 20px rgba(0, 0, 0, 0.24);
    }

    .hex-footer-icon-button i {
        color: inherit;
        font-size: inherit;
        line-height: 1;
    }


    /* =====================================================
       BUTTON COLOURS
    ===================================================== */

    .hex-footer-facebook {
        background: #4267a9 !important;
    }

    .hex-footer-email {
        background: #f44336 !important;
    }

    .hex-footer-whatsapp {
        background: #20cf68 !important;
    }

    .hex-footer-messenger {
        background: #87919d !important;
    }


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

    @media (max-width: 991px) {

        .hex-footer {
            padding: 52px 24px 56px;
        }

        .hex-footer .hex-footer-container {
            max-width: 760px;
        }

        .hex-footer .hex-footer-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 42px 55px;
        }

        .hex-footer-about {
            grid-column: 1 / -1;
        }

        .hex-footer-about p {
            max-width: 450px;
        }

    }


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

    @media (max-width: 600px) {

        .hex-footer {
            width: 100% !important;
            margin: 0 !important;
            padding: 55px 0 50px !important;
        }

        .hex-footer .hex-footer-container {
            width: calc(100% - 56px) !important;
            max-width: 460px !important;

            margin-right: auto !important;
            margin-left: auto !important;

            padding: 0 !important;
        }

        .hex-footer .hex-footer-grid {
            width: 100%;

            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 40px 24px;

            text-align: left;
        }


        /* ABOUT */

        .hex-footer-about {
            width: 100%;
            min-width: 0;

            grid-column: 1 / -1;

            text-align: left;
        }

        .hex-footer .hex-footer-logo-link {
            display: block !important;

            width: 280px !important;
            max-width: 100% !important;

            margin: 0 auto 32px !important;
        }

        .hex-footer img.footer-logo {
            display: block !important;

            width: 280px !important;
            min-width: 280px !important;
            max-width: 280px !important;

            height: auto !important;
            max-height: none !important;

            margin: 0 auto !important;

            object-fit: contain !important;
        }

        .hex-footer-company-name {
            text-align: center;
        }

        .hex-footer-about p {
            width: 100% !important;
            max-width: 100% !important;

            margin: 0 !important;

            color: #ffffff !important;
            text-align: left !important;

            font-size: 14px !important;
            line-height: 1.7 !important;
        }


        /* COLUMNS */

        .hex-footer-column {
            width: 100%;
            min-width: 0;

            text-align: left;
        }

        .hex-footer h4 {
            margin: 0 0 15px !important;

            text-align: left !important;

            font-size: 16px !important;
            line-height: 1.3 !important;
        }

        .hex-footer-links {
            width: 100%;
            margin: 0;
            padding: 0;

            text-align: left;
        }

        .hex-footer-links li {
            margin: 0 0 11px;
            padding: 0;

            text-align: left;
        }

        .hex-footer-links a {
            font-size: 12.5px !important;
            line-height: 1.45 !important;
        }

        .hex-footer-links a:hover,
        .hex-footer-links a:focus {
            transform: none;
        }


        /* ICONS */

        .hex-footer-socials,
        .hex-footer-contact-buttons {
            width: 100%;

            justify-content: flex-start;
            gap: 5px;
        }

        .hex-footer-icon-button {
            width: 39px;
            height: 39px;

            flex: 0 0 39px;

            font-size: 19px;
        }

    }


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

    @media (max-width: 350px) {

        .hex-footer .hex-footer-container {
            width: calc(100% - 40px) !important;
        }

        .hex-footer .hex-footer-grid {
            column-gap: 17px;
        }

        .hex-footer .hex-footer-logo-link {
            width: 255px !important;
        }

        .hex-footer img.footer-logo {
            width: 255px !important;
            min-width: 255px !important;
            max-width: 255px !important;
        }

        .hex-footer-icon-button {
            width: 35px;
            height: 35px;

            flex-basis: 35px;

            font-size: 17px;
        }

        .hex-footer-contact-buttons {
            gap: 3px;
        }

    }

/* =====================================================
   HEX HOSTING - CONSISTENT CLIENT AREA FINISH
   Responsive, accessible, scoped to custom components.
===================================================== */
#header .hex-site-links a,
#header .hex-account-button,
#header .hex-header-actions a,
#footer.hex-footer a {
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
#header .hex-site-links a:focus-visible,
#header .hex-account-button:focus-visible,
#header .hex-header-actions a:focus-visible,
#footer.hex-footer a:focus-visible,
#main-body .hex-dashboard-news a:focus-visible {
    outline: 3px solid var(--hex-cyan);
    outline-offset: 3px;
}
#footer.hex-footer {
    border-top: 3px solid var(--hex-cyan);
}
#footer.hex-footer .hex-footer-icon-button {
    border-radius: 9px;
}
#main-body .hex-dashboard-news .card {
    overflow: visible;
}
#main-body .hex-dashboard-news .card-header {
    border-bottom: 1px solid #c9dfef !important;
}
#main-body .hex-dashboard-news .card-header .card-title {
    color: var(--hex-navy) !important;
}
@media (max-width: 575.98px) {
    #main-body .hex-dashboard-news .card-header .card-title {
        font-size: 16px;
    }
    #footer.hex-footer .hex-footer-grid {
        row-gap: 22px;
    }
}
@media (prefers-reduced-motion: reduce) {
    #header .hex-site-links a,
    #header .hex-account-button,
    #header .hex-header-actions a,
    #footer.hex-footer a {
        transition: none !important;
    }
}

/* ============================================================
   HEX HOSTING 2026 – GENERATEPRESS MAIN-SITE MATCH
   Intentionally scoped to new header/footer classes.
   WHMCS panels, cart, forms and account workflows are untouched.
   ============================================================ */
:root { --hex-gp-dark:#001124; --hex-gp-accent:#0878e8; --hex-gp-cyan:#00d4ff; }
#header .hex-site-header { background:var(--hex-gp-dark)!important; }
#header .hex-site-header-inner { min-height:92px; max-width:1240px!important; margin-inline:auto; }
#header .hex-site-header .navbar-brand .logo-img { height:68px!important; max-height:68px!important; max-width:200px!important; }
#header .hex-site-links { gap:25px!important; }
#header .hex-site-links a { font-size:15px!important; font-weight:600!important; }
#header .hex-header-actions .cart-btn,
#header .hex-menu-button { border-radius:8px; }
#header .main-navbar-wrapper { background:#071b31!important; }
#header .hex-portal-nav-container { max-width:1240px; }
#header .hex-portal-toggle { display:none; }
#header .hex-mobile-site-menu { background:#06182c!important; }
#header .hex-mobile-site-menu a { border-bottom:1px solid rgba(255,255,255,.1)!important; }

/* New footer matches the structure and content of the live GeneratePress site. */
#footer.hex-gp-footer { margin:0; padding:70px 24px 25px; background:#001124!important; color:#d1dce8; font-family:inherit; }
#footer.hex-gp-footer .hex-footer-container { max-width:1190px; margin-inline:auto; }
#footer.hex-gp-footer .hex-gp-footer-grid { display:grid; grid-template-columns:minmax(230px,1.6fr) repeat(3,minmax(150px,1fr)); gap:48px; align-items:start; }
#footer.hex-gp-footer .hex-gp-about, #footer.hex-gp-footer .hex-gp-footer-column { min-width:0; }
#footer.hex-gp-footer .footer-logo { width:auto; max-width:185px; max-height:76px; margin-bottom:10px; }
#footer.hex-gp-footer .hex-footer-logo-link { margin-bottom:10px; }
#footer.hex-gp-footer .hex-gp-tagline { font-size:17px; font-weight:700; color:#fff; margin-bottom:10px; }
#footer.hex-gp-footer p { font-size:14px; line-height:1.8; color:#b9c9d9; margin:0 0 15px; }
#footer.hex-gp-footer h4 { font-size:16px; line-height:1.4; font-weight:700; color:#fff; margin:0 0 20px; }
#footer.hex-gp-footer .hex-gp-follow-title { margin:25px 0 12px; }
#footer.hex-gp-footer .hex-footer-links { list-style:none; margin:0; padding:0; }
#footer.hex-gp-footer .hex-footer-links li { margin:0 0 13px; }
#footer.hex-gp-footer .hex-footer-links a,
#footer.hex-gp-footer .hex-gp-about-link,
#footer.hex-gp-footer .hex-gp-email { color:#c9d6e4; font-size:14px; text-decoration:none; overflow-wrap:anywhere; }
#footer.hex-gp-footer a:hover,#footer.hex-gp-footer a:focus { color:#fff!important; }
#footer.hex-gp-footer .hex-footer-socials,
#footer.hex-gp-footer .hex-footer-contact-buttons { display:flex; flex-wrap:wrap; gap:11px; margin-top:20px; }
#footer.hex-gp-footer .hex-footer-icon-button { display:inline-flex; justify-content:center; align-items:center; width:39px; height:39px; border-radius:9px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.2); color:#eaf4ff; text-decoration:none; }
#footer.hex-gp-footer .hex-footer-icon-button:hover { border-color:var(--hex-gp-cyan); background:rgba(0,212,255,.1); }
#footer.hex-gp-footer .hex-gp-legal-links { display:flex; gap:14px 22px; justify-content:center; flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.15); margin-top:45px; padding-top:25px; }
#footer.hex-gp-footer .hex-gp-legal-links a { color:#aebed0; font-size:12px; text-decoration:none; }
#footer.hex-gp-footer .hex-gp-copyright { margin-top:20px; text-align:center; color:#aebed0; font-size:12px; }
#footer.hex-gp-footer .hex-gp-copyright a { color:#c9d6e4; }
@media (max-width:1199.98px) {
 #header .hex-site-header-inner { min-height:78px; }
 #header .hex-site-header .navbar-brand .logo-img { height:56px!important; max-height:56px!important; }
 #header .hex-portal-toggle { display:flex; width:100%; align-items:center; gap:11px; padding:13px 16px; color:#fff; background:transparent; border:0; font-size:14px; font-weight:600; text-align:left; cursor:pointer; }
 #header .hex-portal-toggle .hex-toggle-chevron { margin-left:auto; }
 #header .main-navbar-wrapper { min-height:45px!important; }
 #header #mainNavbar { padding:12px 15px 17px; border-top:1px solid rgba(255,255,255,.12); }
 #header #mainNavbar:not(.show) { display:none!important; }
 #header #hexMobileSiteMenu:not(.show) { display:none!important; }
 #footer.hex-gp-footer .hex-gp-footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px; }
}
@media (max-width:575.98px) {
 #header .hex-site-header .navbar-brand .logo-img { height:51px!important; max-height:51px!important; }
 #header .hex-site-header-inner { min-height:72px; }
 #footer.hex-gp-footer { text-align:left; padding:48px 22px 26px; }
 #footer.hex-gp-footer .hex-gp-footer-grid { grid-template-columns:1fr; gap:29px; }
 #footer.hex-gp-footer .hex-gp-legal-links { justify-content:flex-start; }
 #footer.hex-gp-footer .hex-gp-copyright { text-align:left; line-height:1.7; }
}