/* ==========================================================================
   HostXing High-Contrast Design System (Light & Dark Mode)
   ========================================================================== */

:root {
    --hx-font-space: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --hx-font-urbanist: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
    --hx-font-lexend: 'Lexend', -apple-system, BlinkMacSystemFont, sans-serif;
    --hx-font-poppins: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
    --hx-font-syne: 'Syne', -apple-system, BlinkMacSystemFont, sans-serif;

    --hx-font-body: 'Urbanist', 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --hx-font-headings: 'Space Grotesk', 'Syne', -apple-system, BlinkMacSystemFont, sans-serif;
    --hx-font-display: 'Syne', 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
    --hx-font-nav: 'Lexend', 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;

    --hx-primary: #ff5500;
    --hx-primary-hover: #ea4800;
    --hx-secondary: #e11d48;
    --hx-accent: #f59e0b;
    --hx-dark: #090d16;
    --hx-dark-surface: #0c111d;
    --hx-dark-card: #131c2e;
    --hx-card-border-dark: rgba(255, 255, 255, 0.14);
    --hx-radius: 14px;
}

/* ==========================================================================
   1. GLOBAL BASE STYLES
   ========================================================================== */

body.tt-body-wrapper,
body {
    font-family: var(--hx-font-body) !important;
    letter-spacing: -0.01em;
}

/* Eliminate empty or disabled main-body space on homepage */
body.tt-body-wrapper section#main-body.d-none,
body.tt-body-wrapper section#main-body:empty {
    display: none !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
}

/* Typography Hierarchy */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.section-heading,
.section-title,
.tt-section-title,
.card-title,
.plan-title,
.pricing-card-title {
    font-family: var(--hx-font-headings) !important;
    letter-spacing: -0.02em;
}

.tt-hero-title,
.display-1,
.display-2,
.display-3,
.display-4,
.hero-title,
.main-heading {
    font-family: var(--hx-font-display) !important;
    letter-spacing: -0.03em;
}

.navbar-nav,
.nav-link,
.tt-custom-navbar,
.tt-top-header,
.tt-main-header,
.main-navbar-wrapper,
.btn,
.nav-tabs,
.nav-pills,
.badge,
.currency-dropdown {
    font-family: var(--hx-font-nav) !important;
}

/* Utility Font Classes */
.font-space {
    font-family: var(--hx-font-space) !important;
}

.font-urbanist {
    font-family: var(--hx-font-urbanist) !important;
}

.font-lexend {
    font-family: var(--hx-font-lexend) !important;
}

.font-poppins {
    font-family: var(--hx-font-poppins) !important;
}

.font-syne {
    font-family: var(--hx-font-syne) !important;
}

/* Brand Colors */
.text-primary,
a.text-primary {
    color: var(--hx-primary) !important;
}

.bg-primary {
    background-color: var(--hx-primary) !important;
}

.badge-primary {
    background-color: var(--hx-primary) !important;
    color: #ffffff !important;
}

.border-primary {
    border-color: var(--hx-primary) !important;
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, #ff6b00 0%, #ff4500 100%) !important;
    border-color: #ff4500 !important;
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: 700 !important;
    transition: all 0.25s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    background: linear-gradient(135deg, #ff7a1a 0%, #e03e00 100%) !important;
    border-color: #e03e00 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -4px rgba(255, 85, 0, 0.45) !important;
}

.btn-outline-light {
    border-radius: 8px;
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
    background: transparent !important;
    background-color: transparent !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    transition: all 0.25s ease;
}

.btn-outline-light:hover,
.btn-outline-light:focus,
.btn-outline-light:active {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #090d16 !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
}

.tt-hero-btns .btn-outline-light {
    background: transparent !important;
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
}

.tt-hero-btns .btn-outline-light:hover {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #090d16 !important;
}

/* ==========================================================================
   HostXing Single-Line Announcement Bar with Dynamic Marquee
   ========================================================================== */
.top-promo-bar {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.4;
    padding: 7px 0;
    background: linear-gradient(90deg, #090d16 0%, var(--hx-primary, #ff5500) 60%, #e11d48 100%) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    z-index: 1000;
    position: relative;
    overflow: hidden !important;
    white-space: nowrap !important;
}

.hx-promo-inner {
    width: 100%;
    max-width: 100%;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    /* STRICTLY SINGLE LINE - NEVER WRAP */
    align-items: center !important;
    justify-content: center;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* When Marquee is active, space between marquee text on left and CTA button on right */
.hx-promo-inner.has-marquee {
    justify-content: space-between !important;
}

.hx-promo-marquee-container {
    min-width: 0 !important;
    /* Critical for flex child shrink */
    flex: 0 1 auto;
    max-width: 100%;
    overflow: hidden !important;
    white-space: nowrap !important;
    display: inline-block;
    vertical-align: middle;
}

.hx-promo-marquee-container.is-marquee {
    flex: 1 1 auto !important;
    width: auto !important;
    /* Edge fade gradient mask so scrolling text looks premium */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

.hx-promo-marquee-track {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
}

.hx-promo-marquee-container.is-marquee .hx-promo-marquee-track {
    animation: hxPromoMarquee linear infinite;
    will-change: transform;
}

.hx-promo-text {
    display: inline-block;
    white-space: nowrap !important;
    vertical-align: middle;
    color: #ffffff !important;
}

.hx-promo-text a {
    color: #ffffff !important;
    text-decoration: underline;
}

.hx-promo-clone {
    display: none !important;
}

.hx-promo-marquee-container.is-marquee .hx-promo-text {
    padding-right: 60px;
}

.hx-promo-marquee-container.is-marquee .hx-promo-clone {
    display: inline-block !important;
}

/* Pause on hover / touch */
.hx-promo-marquee-container.is-marquee:hover .hx-promo-marquee-track,
.hx-promo-marquee-container.is-marquee:active .hx-promo-marquee-track {
    animation-play-state: paused !important;
}

@keyframes hxPromoMarquee {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-50%, 0, 0);
    }
}

/* RTL Animation Support */
[dir="rtl"] .hx-promo-marquee-container.is-marquee .hx-promo-text {
    padding-right: 0 !important;
    padding-left: 60px !important;
}

[dir="rtl"] .hx-promo-marquee-container.is-marquee .hx-promo-marquee-track {
    animation: hxPromoMarqueeRtl linear infinite;
}

@keyframes hxPromoMarqueeRtl {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(50%, 0, 0);
    }
}

/* Announcement Call to Action Button */
.hx-promo-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff !important;
    padding: 3px 12px;
    font-size: 12px;
    line-height: 1.4;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border-radius: 9999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.hx-promo-btn:hover {
    background: #ffffff !important;
    color: #ff5500 !important;
    border-color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    transform: translateY(-1px);
}

[dir="rtl"] .hx-promo-btn {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

.tt-cart-badge {
    background: var(--hx-primary) !important;
    color: #ffffff !important;
    font-weight: 800;
}

.bg-gradient {
    background: linear-gradient(135deg, #090d16 0%, #151c2e 50%, #2a1b18 100%) !important;
}

.tt-hero h1 {
    letter-spacing: -0.03em;
    font-weight: 800 !important;
    color: #ffffff !important;
}

.tt-hero p.lead {
    color: #f1f5f9 !important;
    font-weight: 400;
}

/* Header Toolbar Search & Cart Alignment */
.tt-toolbar-wrap .toolbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
}

.tt-toolbar-wrap .toolbar .nav-item {
    display: flex !important;
    align-items: center !important;
}

.tt-toolbar-wrap .cart-btn,
.tt-toolbar-wrap #dropdownMenuButton {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Offcanvas Hamburger Menu Responsive Visibility */
@media (min-width: 992px) {

    .tt-toolbar-wrap [data-toggle="offcanvas"],
    .tt-toolbar-wrap .fa-bars,
    .tt-toolbar-wrap li.d-lg-none,
    .tt-toolbar-wrap li:has([data-toggle="offcanvas"]),
    .tt-double-header [data-toggle="offcanvas"],
    .tt-single-navbar [data-toggle="offcanvas"] {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .tt-toolbar-wrap [data-toggle="offcanvas"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}


/* ==========================================================================
   2. LIGHT MODE (Default and [data-bs-theme="light"])
   ========================================================================== */

body.tt-body-wrapper {
    color: #0f172a;
    background-color: #f8fafc;
}

/* Light Mode Typography */
h1,
h2,
h3,
h4,
h5,
h6,
.tt-section-heading h2,
.section-heading h2,
.tt-testimonial-heading {
    color: #090d16;
    font-weight: 800;
}

p,
.lead {
    color: #1e293b;
}

.text-muted {
    color: #475569;
}

.text-secondary {
    color: #1e293b;
}

.text-dark {
    color: #090d16 !important;
}

label,
.control-label,
.form-group label {
    color: #090d16;
    font-weight: 600;
}

/* Top Header & Navigation - Light Mode */
.tt-top-header,
.tt-top-header .navbar,
.tt-top-header .container,
header.header .tt-top-header {
    background-color: #ffffff !important;
}

.tt-top-header a,
.tt-top-header .nav-link,
.tt-top-header .navbar-nav>li>a,
.tt-custom-navbar li a,
.tt-custom-navbar .nav-link,
.tt-custom-navbar a.nav-link,
.tt-custom-navbar a.dropdown-toggle,
.navbar-light .navbar-nav .nav-link,
.tt-header .nav-link,
header.header .tt-top-header .nav-link {
    color: #090d16 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    transition: color 0.2s ease;
}

.tt-top-header a:hover,
.tt-top-header .nav-link:hover,
.tt-custom-navbar .nav-link:hover,
.tt-custom-navbar a.nav-link:hover,
.navbar-light .navbar-nav .nav-link:hover {
    color: var(--hx-primary) !important;
}

.tt-top-header .toolbar a,
.tt-top-header .toolbar button,
.tt-top-header .toolbar i,
.tt-top-header .fal,
.tt-top-header .fas,
header.header .tt-top-header .toolbar i {
    color: #090d16 !important;
    font-size: 16.5px;
    font-weight: 700;
}

/* Main Menubar - Light Mode */
.tt-main-header,
.main-navbar-wrapper {
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.main-navbar-wrapper .navbar-nav,
.tt-main-header .navbar-nav,
#nav.navbar-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
}

.tt-main-header .tt-secondary-list,
.main-navbar-wrapper .tt-secondary-list {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
}

.tt-main-header .tt-secondary-list>li,
.main-navbar-wrapper .tt-secondary-list>li {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    flex: 0 0 auto !important;
    padding-right: 0 !important;
}

.tt-main-header .tt-secondary-list .active-client .btn-group,
.main-navbar-wrapper .tt-secondary-list .active-client .btn-group {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
}

.tt-main-header .tt-secondary-list .tt-notification button,
.main-navbar-wrapper .tt-secondary-list .tt-notification button,
.tt-main-header .tt-secondary-list .active-client .btn-group>a:not(.btn-return-to-admin),
.main-navbar-wrapper .tt-secondary-list .active-client .btn-group>a:not(.btn-return-to-admin) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    line-height: 1 !important;
}

.collapsable-dropdown,
#nav .collapsable-dropdown {
    display: none !important;
}

.tt-main-header .navbar-nav>li,
.main-navbar-wrapper .navbar-nav>li,
#nav>li {
    display: inline-block !important;
    margin: 2px 2px !important;
}

.tt-main-header .nav-link,
.tt-main-header .navbar-nav>li>a,
.main-navbar-wrapper .nav-link,
.main-navbar-wrapper .navbar-nav>li>a,
#nav>li>a {
    color: #1e293b !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tt-main-header .nav-link:hover,
.tt-main-header .navbar-nav>li>a:hover,
.main-navbar-wrapper .nav-link:hover,
.main-navbar-wrapper .navbar-nav>li>a:hover,
#nav>li>a:hover,
.tt-main-header .navbar-nav>li:hover>a,
.main-navbar-wrapper .navbar-nav>li:hover>a,
#nav>li:hover>a {
    color: var(--hx-primary, #ff5500) !important;
    background-color: rgba(255, 85, 0, 0.08) !important;
    transform: translateY(-1px);
}

.tt-main-header .navbar-nav>li.active>a,
.main-navbar-wrapper .navbar-nav>li.active>a,
#nav>li.active>a,
.tt-main-header .navbar-nav>li.show>a,
.main-navbar-wrapper .navbar-nav>li.show>a,
#nav>li.show>a,
.tt-main-header .navbar-nav>li.open>a,
.main-navbar-wrapper .navbar-nav>li.open>a,
#nav>li.open>a {
    color: var(--hx-primary, #ff5500) !important;
    background-color: rgba(255, 85, 0, 0.12) !important;
    font-weight: 700 !important;
}

.tt-custom-navbar li>a,
.tt-custom-navbar .nav-link {
    border-radius: 8px !important;
    padding: 8px 14px !important;
    transition: all 0.22s ease !important;
}

.tt-custom-navbar li>a:hover,
.tt-custom-navbar .nav-link:hover,
.tt-custom-navbar li:hover>a {
    color: var(--hx-primary) !important;
    background-color: rgba(255, 85, 0, 0.08) !important;
}

/* Light Mode Dropdown & Megamenu */
.dropdown-menu,
.tt-megamenu-dropdown,
.tt-custom-navbar .dropdown-menu,
.tt-dropdown-grid,
.tt-custom-navbar .dropdown-menu .tt-dropdown-grid,
.tt-dropdown-grid-item {
    background-color: #ffffff !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    z-index: 1050 !important;
}

.dropdown-menu,
.tt-megamenu-dropdown,
.tt-custom-navbar .dropdown-menu {
    border: 1px solid #e2e8f0 !important;
    border-top: 2px solid var(--hx-primary, #ff5500) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12) !important;
}

.tt-megamenu-dropdown.tt-single-column-menu {
    min-width: 260px !important;
    max-width: 280px !important;
    width: 280px !important;
}

.tt-megamenu-dropdown.tt-single-column-menu .tt-dropdown-grid {
    padding: 14px 16px !important;
}

.tt-megamenu-dropdown.tt-single-column-menu .tt-title-with-icon-link {
    margin-bottom: 10px !important;
}

.tt-megamenu-dropdown.tt-single-column-menu .tt-title-with-icon-link:last-child {
    margin-bottom: 0 !important;
}

.tt-dropdown-grid,
.tt-custom-navbar .dropdown-menu .tt-dropdown-grid {
    border: none !important;
}

.tt-custom-navbar li.nav-item .dropdown-menu:before {
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    left: 50% !important;
    width: 12px !important;
    height: 12px !important;
    background-color: #ffffff !important;
    border-top: 2px solid var(--hx-primary, #ff5500) !important;
    border-left: 2px solid var(--hx-primary, #ff5500) !important;
    border-right: none !important;
    border-bottom: none !important;
    transform: translate(-50%, 0) rotate(45deg) !important;
    border-radius: 2px 0 0 0 !important;
    opacity: 0;
    transition: all 0.25s ease !important;
    z-index: 1051 !important;
}

.tt-custom-navbar li.nav-item:hover .dropdown-menu:before,
.tt-custom-navbar li.nav-item.show .dropdown-menu:before,
.tt-custom-navbar .dropdown-menu.show:before {
    opacity: 1 !important;
    visibility: visible !important;
}

.tt-dropdown-grid-item h6,
.tt-menu-heading,
.tt-custom-navbar .tt-menu-heading {
    color: #475569 !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}

.tt-menu-content .tt-menu-title,
.tt-title-with-icon-link .tt-menu-title,
.tt-title-with-icon-link span,
.tt-custom-navbar .tt-menu-title {
    color: #090d16 !important;
    font-weight: 700 !important;
    font-size: 14px;
    transition: color 0.2s ease;
}

.tt-menu-content .tt-menu-desc,
.tt-menu-content small,
.tt-custom-navbar .tt-menu-desc,
.tt-dropdown-grid small {
    color: #64748b !important;
    font-size: 12px;
}

.tt-custom-navbar .tt-title-with-icon-link {
    padding: 6px 8px !important;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.tt-custom-navbar .tt-title-with-icon-link:hover {
    background-color: rgba(255, 85, 0, 0.08) !important;
    transform: translateX(3px);
}

.tt-custom-navbar .tt-title-with-icon-link:hover .tt-menu-title,
.tt-title-with-icon-link:hover .tt-menu-title {
    color: var(--hx-primary, #ff5500) !important;
}

.tt-custom-navbar .tt-title-with-icon-link:hover .tt-menu-icon {
    background: var(--hx-primary, #ff5500) !important;
    color: #ffffff !important;
}

/* Light Mode Pricing Section & Cards */
.tt-pricing-section,
#pricingSection {
    background-color: #f8fafc;
}

.tt-price-single {
    border-radius: var(--hx-radius) !important;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.tt-price-single:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.1) !important;
    border-color: #94a3b8;
}

.tt-price-single.border-primary {
    border: 2px solid var(--hx-primary) !important;
    box-shadow: 0 20px 35px -10px rgba(255, 85, 0, 0.2) !important;
}

.tt-pricing-name {
    color: #090d16 !important;
    font-weight: 800 !important;
    font-size: 19px !important;
}

.tt-pricing-amount {
    color: #090d16 !important;
    font-weight: 800 !important;
}

.tt-pricing-sub,
.tt-pricing-cycle {
    color: #475569 !important;
    font-weight: 600 !important;
}

.tt-pricing-features,
.tt-feature-item,
.tt-pricing-features li,
.tt-feature-item span {
    color: #0f172a !important;
    font-weight: 600 !important;
}

.tt-btn-pricing-secondary,
a.tt-btn-pricing-secondary,
.btn.tt-btn-pricing-secondary,
.tt-price-single .btn:not(.btn-primary) {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1.5px solid #0f172a !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    transition: all 0.25s ease;
}

.tt-btn-pricing-secondary:hover,
a.tt-btn-pricing-secondary:hover,
.tt-price-single .btn:not(.btn-primary):hover {
    background: var(--hx-primary) !important;
    border-color: var(--hx-primary) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -4px rgba(255, 85, 0, 0.35) !important;
}

/* Light Mode Account Links */
.tt-account,
a.tt-account,
a.card-accent-midnight-blue {
    transition: all 0.25s ease;
    border-radius: 12px !important;
    color: #090d16 !important;
    font-weight: 700 !important;
    font-size: 14.5px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0;
    border-top: 3px solid var(--hx-primary) !important;
}

.tt-account:hover,
a.tt-account:hover {
    color: var(--hx-primary) !important;
    transform: translateY(-4px);
    box-shadow: 0 15px 30px -5px rgba(255, 85, 0, 0.18) !important;
}

/* Light Mode News / Announcements */
.tt-announcement-single {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: var(--hx-radius) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.25s ease;
}

.tt-announcement-single:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 30px -8px rgba(0, 0, 0, 0.12) !important;
}

.tt-announcement-single h3 a {
    color: #090d16 !important;
    font-weight: 800 !important;
}

.tt-announcement-single h3 a:hover {
    color: var(--hx-primary) !important;
}

.tt-announcement-single .tt-date {
    color: #475569 !important;
    font-weight: 600;
}

.tt-announcement-single p {
    color: #1e293b !important;
    line-height: 1.65;
}

.tt-read-more {
    color: var(--hx-primary) !important;
    font-weight: 700 !important;
}

.tt-read-more:hover {
    color: var(--hx-primary-hover) !important;
}

/* Light Mode Testimonials */
.tt-testimonial-item {
    border-radius: var(--hx-radius) !important;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    transition: all 0.25s ease;
}

.tt-testimonial-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 25px -5px rgba(0, 0, 0, 0.08) !important;
}

.tt-testimonial-item p {
    color: #1e293b !important;
    font-weight: 500;
}

.tt-testimonial-author h6 {
    color: #090d16 !important;
    font-weight: 800;
}

.tt-testimonial-author span {
    color: #475569 !important;
    font-weight: 600;
}


/* ==========================================================================
   3. DARK MODE - Crisp White Text & High Visibility on Dark Surfaces
   ========================================================================== */

[data-bs-theme="dark"],
body[data-bs-theme="dark"],
:root[data-bs-theme="dark"] {
    background-color: var(--hx-dark) !important;
    color: #ffffff !important;
}

/* Dark Mode Typography */
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] .text-dark,
[data-bs-theme="dark"] .tt-section-heading h2,
[data-bs-theme="dark"] .section-heading h2,
[data-bs-theme="dark"] .tt-testimonial-heading,
[data-bs-theme="dark"] .header-lined h2,
[data-bs-theme="dark"] .header-lined h1 {
    color: #ffffff !important;
    font-weight: 800 !important;
}

[data-bs-theme="dark"] p,
[data-bs-theme="dark"] .lead,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .tt-section-heading p,
[data-bs-theme="dark"] .section-heading p,
[data-bs-theme="dark"] .header-lined p {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] .text-muted {
    color: #cbd5e1 !important;
}

/* Dark Mode Form Labels & Controls across WHMCS */
[data-bs-theme="dark"] label,
[data-bs-theme="dark"] .control-label,
[data-bs-theme="dark"] .form-group label,
[data-bs-theme="dark"] legend,
[data-bs-theme="dark"] .col-form-label,
[data-bs-theme="dark"] .field-container label {
    color: #ffffff !important;
    font-weight: 600 !important;
}

[data-bs-theme="dark"] .form-control {
    background-color: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .form-control:focus {
    border-color: var(--hx-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 85, 0, 0.25) !important;
    background-color: #0f172a !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .form-control::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
}

/* Dark Mode Header & Nav Links */
[data-bs-theme="dark"] .tt-top-header,
[data-bs-theme="dark"] .tt-top-header .navbar,
[data-bs-theme="dark"] .tt-top-header .container,
[data-bs-theme="dark"] header.header,
[data-bs-theme="dark"] header.header .tt-top-header {
    background-color: var(--hx-dark-surface) !important;
    border-bottom: 1px solid var(--hx-card-border-dark) !important;
}

[data-bs-theme="dark"] .tt-top-header a,
[data-bs-theme="dark"] .tt-top-header .nav-link,
[data-bs-theme="dark"] .tt-top-header .navbar-nav>li>a,
[data-bs-theme="dark"] .tt-custom-navbar li a,
[data-bs-theme="dark"] .tt-custom-navbar .nav-link,
[data-bs-theme="dark"] .tt-custom-navbar a.nav-link,
[data-bs-theme="dark"] .tt-custom-navbar a.dropdown-toggle,
[data-bs-theme="dark"] .navbar-light .navbar-nav .nav-link,
[data-bs-theme="dark"] .tt-header .nav-link,
[data-bs-theme="dark"] header.header .tt-top-header .nav-link {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

[data-bs-theme="dark"] .tt-custom-navbar .nav-link:hover,
[data-bs-theme="dark"] .tt-custom-navbar a.nav-link:hover,
[data-bs-theme="dark"] .tt-top-header a:hover {
    color: var(--hx-primary) !important;
}

[data-bs-theme="dark"] .tt-top-header .toolbar a,
[data-bs-theme="dark"] .tt-top-header .toolbar button,
[data-bs-theme="dark"] .tt-top-header .toolbar i,
[data-bs-theme="dark"] .tt-top-header .fal,
[data-bs-theme="dark"] .tt-top-header .fas,
[data-bs-theme="dark"] header.header .tt-top-header .toolbar i {
    color: #ffffff !important;
}

/* Main Menubar - Dark Mode */
[data-bs-theme="dark"] .tt-main-header,
[data-bs-theme="dark"] .main-navbar-wrapper {
    background-color: #0c111d !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 6px 0 !important;
}

[data-bs-theme="dark"] .tt-main-header .nav-link,
[data-bs-theme="dark"] .tt-main-header .navbar-nav>li>a,
[data-bs-theme="dark"] .main-navbar-wrapper .nav-link,
[data-bs-theme="dark"] .main-navbar-wrapper .navbar-nav>li>a,
[data-bs-theme="dark"] #nav>li>a {
    color: #e2e8f0 !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    background: transparent !important;
    display: inline-flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

[data-bs-theme="dark"] .tt-main-header .nav-link:hover,
[data-bs-theme="dark"] .tt-main-header .navbar-nav>li>a:hover,
[data-bs-theme="dark"] .main-navbar-wrapper .nav-link:hover,
[data-bs-theme="dark"] .main-navbar-wrapper .navbar-nav>li>a:hover,
[data-bs-theme="dark"] #nav>li>a:hover,
[data-bs-theme="dark"] .tt-main-header .navbar-nav>li:hover>a,
[data-bs-theme="dark"] .main-navbar-wrapper .navbar-nav>li:hover>a,
[data-bs-theme="dark"] #nav>li:hover>a {
    color: #ff7a1a !important;
    background-color: rgba(255, 85, 0, 0.16) !important;
    transform: translateY(-1px);
}

[data-bs-theme="dark"] .tt-main-header .navbar-nav>li.active>a,
[data-bs-theme="dark"] .main-navbar-wrapper .navbar-nav>li.active>a,
[data-bs-theme="dark"] #nav>li.active>a,
[data-bs-theme="dark"] .tt-main-header .navbar-nav>li.show>a,
[data-bs-theme="dark"] .main-navbar-wrapper .navbar-nav>li.show>a,
[data-bs-theme="dark"] #nav>li.show>a,
[data-bs-theme="dark"] .tt-main-header .navbar-nav>li.open>a,
[data-bs-theme="dark"] .main-navbar-wrapper .navbar-nav>li.open>a,
[data-bs-theme="dark"] #nav>li.open>a {
    color: #ffffff !important;
    background-color: rgba(255, 85, 0, 0.24) !important;
    font-weight: 700 !important;
}

[data-bs-theme="dark"] .tt-custom-navbar li>a:hover,
[data-bs-theme="dark"] .tt-custom-navbar .nav-link:hover,
[data-bs-theme="dark"] .tt-custom-navbar li:hover>a {
    color: #ff7a1a !important;
    background-color: rgba(255, 85, 0, 0.16) !important;
}

/* Dark Mode Megamenu & Dropdowns */
[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .tt-megamenu-dropdown,
[data-bs-theme="dark"] .tt-custom-navbar .dropdown-menu,
[data-bs-theme="dark"] .tt-dropdown-grid,
[data-bs-theme="dark"] .tt-custom-navbar .dropdown-menu .tt-dropdown-grid,
[data-bs-theme="dark"] .tt-dropdown-grid-item,
body[data-bs-theme="dark"] .dropdown-menu,
body[data-bs-theme="dark"] .tt-megamenu-dropdown,
body[data-bs-theme="dark"] .tt-custom-navbar .dropdown-menu,
body[data-bs-theme="dark"] .tt-dropdown-grid,
body[data-bs-theme="dark"] .tt-custom-navbar .dropdown-menu .tt-dropdown-grid,
body[data-bs-theme="dark"] .tt-dropdown-grid-item {
    background-color: #131c2e !important;
    background: #131c2e !important;
    border-radius: 12px !important;
    z-index: 1050 !important;
}

[data-bs-theme="dark"] .dropdown-menu,
[data-bs-theme="dark"] .tt-megamenu-dropdown,
[data-bs-theme="dark"] .tt-custom-navbar .dropdown-menu,
body[data-bs-theme="dark"] .dropdown-menu,
body[data-bs-theme="dark"] .tt-megamenu-dropdown,
body[data-bs-theme="dark"] .tt-custom-navbar .dropdown-menu {
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    border-top: 2px solid var(--hx-primary, #ff5500) !important;
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 85, 0, 0.08) !important;
}

[data-bs-theme="dark"] .tt-dropdown-grid,
[data-bs-theme="dark"] .tt-custom-navbar .dropdown-menu .tt-dropdown-grid,
body[data-bs-theme="dark"] .tt-dropdown-grid,
body[data-bs-theme="dark"] .tt-custom-navbar .dropdown-menu .tt-dropdown-grid {
    border: none !important;
}

[data-bs-theme="dark"] .tt-custom-navbar li.nav-item .dropdown-menu:before,
body[data-bs-theme="dark"] .tt-custom-navbar li.nav-item .dropdown-menu:before {
    content: "" !important;
    position: absolute !important;
    top: -6px !important;
    left: 50% !important;
    width: 12px !important;
    height: 12px !important;
    background-color: #131c2e !important;
    border-top: 2px solid var(--hx-primary, #ff5500) !important;
    border-left: 2px solid var(--hx-primary, #ff5500) !important;
    border-right: none !important;
    border-bottom: none !important;
    transform: translate(-50%, 0) rotate(45deg) !important;
    border-radius: 2px 0 0 0 !important;
    opacity: 0;
    transition: all 0.25s ease !important;
    z-index: 1051 !important;
}

[data-bs-theme="dark"] .tt-custom-navbar li.nav-item:hover .dropdown-menu:before,
[data-bs-theme="dark"] .tt-custom-navbar li.nav-item.show .dropdown-menu:before,
[data-bs-theme="dark"] .tt-custom-navbar .dropdown-menu.show:before,
body[data-bs-theme="dark"] .tt-custom-navbar li.nav-item:hover .dropdown-menu:before,
body[data-bs-theme="dark"] .tt-custom-navbar li.nav-item.show .dropdown-menu:before,
body[data-bs-theme="dark"] .tt-custom-navbar .dropdown-menu.show:before {
    opacity: 1 !important;
    visibility: visible !important;
}

[data-bs-theme="dark"] .tt-dropdown-grid-item h6,
[data-bs-theme="dark"] .tt-menu-heading,
[data-bs-theme="dark"] .tt-custom-navbar .tt-menu-heading,
[data-bs-theme="dark"] .tt-dropdown-grid h6,
body[data-bs-theme="dark"] .tt-menu-heading {
    color: #cbd5e1 !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px;
}

[data-bs-theme="dark"] .tt-menu-content .tt-menu-title,
[data-bs-theme="dark"] .tt-title-with-icon-link .tt-menu-title,
[data-bs-theme="dark"] .tt-title-with-icon-link span,
[data-bs-theme="dark"] .tt-custom-navbar .tt-menu-title,
[data-bs-theme="dark"] .dropdown-item,
body[data-bs-theme="dark"] .tt-custom-navbar .tt-menu-title,
body[data-bs-theme="dark"] .dropdown-item {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px;
    transition: color 0.2s ease;
}

[data-bs-theme="dark"] .tt-menu-content .tt-menu-desc,
[data-bs-theme="dark"] .tt-menu-desc,
[data-bs-theme="dark"] .tt-menu-content small,
[data-bs-theme="dark"] .tt-custom-navbar .tt-menu-desc,
[data-bs-theme="dark"] .tt-dropdown-grid small,
body[data-bs-theme="dark"] .tt-custom-navbar .tt-menu-desc {
    color: #94a3b8 !important;
    font-size: 12px;
}

[data-bs-theme="dark"] .tt-menu-icon,
body[data-bs-theme="dark"] .tt-menu-icon {
    background: rgba(255, 85, 0, 0.18) !important;
    color: #ff6b2b !important;
    transition: all 0.2s ease;
}

[data-bs-theme="dark"] .tt-custom-navbar .tt-title-with-icon-link,
body[data-bs-theme="dark"] .tt-custom-navbar .tt-title-with-icon-link {
    padding: 6px 8px !important;
    border-radius: 8px;
    transition: all 0.2s ease;
}

[data-bs-theme="dark"] .tt-custom-navbar .tt-title-with-icon-link:hover,
body[data-bs-theme="dark"] .tt-custom-navbar .tt-title-with-icon-link:hover {
    background-color: rgba(255, 85, 0, 0.15) !important;
    transform: translateX(3px);
}

[data-bs-theme="dark"] .tt-custom-navbar .tt-title-with-icon-link:hover .tt-menu-title,
[data-bs-theme="dark"] .tt-title-with-icon-link:hover .tt-menu-title,
body[data-bs-theme="dark"] .tt-custom-navbar .tt-title-with-icon-link:hover .tt-menu-title {
    color: #ff7a33 !important;
}

[data-bs-theme="dark"] .tt-custom-navbar .tt-title-with-icon-link:hover .tt-menu-icon,
body[data-bs-theme="dark"] .tt-custom-navbar .tt-title-with-icon-link:hover .tt-menu-icon {
    background: var(--hx-primary, #ff5500) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .dropdown-item:hover,
body[data-bs-theme="dark"] .dropdown-item:hover {
    background-color: rgba(255, 85, 0, 0.15) !important;
    color: #ff7a33 !important;
}

/* Domain Search Transfer Button (Light & Dark Mode) */
#btnTransfer,
#btnTransfer2 {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1.5px solid #1e293b !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    font-size: 14.5px !important;
    transition: all 0.25s ease;
}

#btnTransfer:hover,
#btnTransfer:focus,
#btnTransfer2:hover,
#btnTransfer2:focus {
    background: var(--hx-primary, #ff5500) !important;
    border-color: var(--hx-primary, #ff5500) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 85, 0, 0.4) !important;
}

[data-bs-theme="dark"] #btnTransfer,
[data-bs-theme="dark"] #btnTransfer2,
body[data-bs-theme="dark"] #btnTransfer,
body[data-bs-theme="dark"] #btnTransfer2 {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1.5px solid #334155 !important;
}

[data-bs-theme="dark"] #btnTransfer:hover,
[data-bs-theme="dark"] #btnTransfer:focus,
[data-bs-theme="dark"] #btnTransfer2:hover,
[data-bs-theme="dark"] #btnTransfer2:focus,
body[data-bs-theme="dark"] #btnTransfer:hover,
body[data-bs-theme="dark"] #btnTransfer2:hover {
    background: var(--hx-primary, #ff5500) !important;
    border-color: var(--hx-primary, #ff5500) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 18px rgba(255, 85, 0, 0.4) !important;
}

/* Dark Mode Cards & Surfaces */
[data-bs-theme="dark"] .tt-pricing-section,
[data-bs-theme="dark"] #pricingSection,
[data-bs-theme="dark"] section#pricingSection,
[data-bs-theme="dark"] .bg-light,
[data-bs-theme="dark"] section[style*="#f8fafc"],
[data-bs-theme="dark"] section.bg-light,
[data-bs-theme="dark"] #testimonialsSection {
    background-color: #090d16 !important;
}

[data-bs-theme="dark"] .tt-price-single,
[data-bs-theme="dark"] .tt-announcement-single,
[data-bs-theme="dark"] .tt-testimonial-item,
[data-bs-theme="dark"] .tt-account,
[data-bs-theme="dark"] .bg-white:not(.badge),
[data-bs-theme="dark"] .card {
    background-color: var(--hx-dark-card) !important;
    border: 1px solid var(--hx-card-border-dark) !important;
    color: #ffffff !important;
}

/* Dark Mode Pricing Cards (Homepage) */
[data-bs-theme="dark"] .tt-pricing-name {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 19px !important;
}

[data-bs-theme="dark"] .tt-pricing-amount {
    color: #ffffff !important;
    font-weight: 800 !important;
}

[data-bs-theme="dark"] .tt-pricing-sub,
[data-bs-theme="dark"] .tt-pricing-cycle {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}

[data-bs-theme="dark"] .tt-pricing-features,
[data-bs-theme="dark"] .tt-feature-item,
[data-bs-theme="dark"] .tt-pricing-features li,
[data-bs-theme="dark"] .tt-feature-item span {
    color: #ffffff !important;
    font-weight: 600 !important;
}

[data-bs-theme="dark"] .tt-feature-item i,
[data-bs-theme="dark"] .tt-pricing-features i.fa-check-circle {
    color: #22c55e !important;
}

[data-bs-theme="dark"] .tt-btn-pricing-secondary,
[data-bs-theme="dark"] a.tt-btn-pricing-secondary,
[data-bs-theme="dark"] .btn.tt-btn-pricing-secondary,
[data-bs-theme="dark"] .tt-price-single .btn:not(.btn-primary) {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    transition: all 0.25s ease;
}

[data-bs-theme="dark"] .tt-btn-pricing-secondary:hover,
[data-bs-theme="dark"] a.tt-btn-pricing-secondary:hover,
[data-bs-theme="dark"] .tt-price-single .btn:not(.btn-primary):hover {
    background: var(--hx-primary) !important;
    border-color: var(--hx-primary) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px -4px rgba(255, 85, 0, 0.5) !important;
}

[data-bs-theme="dark"] .tt-price-single.border-primary {
    border: 2px solid var(--hx-primary) !important;
    box-shadow: 0 20px 40px -10px rgba(255, 85, 0, 0.35) !important;
}

/* ==========================================================================
   4. STORE / PRODUCTS PAGE (/store/web-hosting) - Dark Mode Contrast
   ========================================================================== */

[data-bs-theme="dark"] #order-standard_cart .products .product,
[data-bs-theme="dark"] .tt-single-product {
    background-color: var(--hx-dark-card) !important;
    border: 1px solid var(--hx-card-border-dark) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] #order-standard_cart .tt-product-name h5,
[data-bs-theme="dark"] .tt-product-name h5,
[data-bs-theme="dark"] #order-standard_cart .products .product .header,
[data-bs-theme="dark"] #order-standard_cart .products .product .header span {
    color: #ffffff !important;
    font-weight: 800 !important;
}

[data-bs-theme="dark"] #order-standard_cart .tt-product-desc,
[data-bs-theme="dark"] .tt-product-desc,
[data-bs-theme="dark"] .product-desc,
[data-bs-theme="dark"] .tt-product-desc *,
[data-bs-theme="dark"] .product-desc *,
[data-bs-theme="dark"] .product-desc div,
[data-bs-theme="dark"] .product-desc p,
[data-bs-theme="dark"] .product-desc span {
    color: #ffffff !important;
    font-weight: 500 !important;
    line-height: 1.8 !important;
}

[data-bs-theme="dark"] #order-standard_cart .tt-product-desc li,
[data-bs-theme="dark"] .product-desc ul li,
[data-bs-theme="dark"] .tt-product-desc ul li {
    color: #ffffff !important;
    font-weight: 500 !important;
}

[data-bs-theme="dark"] #order-standard_cart .tt-product-price .tt-cycle,
[data-bs-theme="dark"] .tt-product-price .tt-cycle,
[data-bs-theme="dark"] #order-standard_cart .products .product .price span {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}

[data-bs-theme="dark"] #order-standard_cart .tt-product-price .price {
    color: #ff5500 !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   5. CART & CHECKOUT PAGES - Dark Mode Contrast
   ========================================================================== */

/* Cart Table & Items */
[data-bs-theme="dark"] #order-standard_cart .view-cart-items-header,
[data-bs-theme="dark"] #order-standard_cart .view-cart-items .item-title,
[data-bs-theme="dark"] #order-standard_cart .view-cart-items .item-domain,
[data-bs-theme="dark"] #order-standard_cart .view-cart-items .item-price span {
    color: #ffffff !important;
    font-weight: 700 !important;
}

[data-bs-theme="dark"] #order-standard_cart .view-cart-items,
[data-bs-theme="dark"] #order-standard_cart .view-cart-items td,
[data-bs-theme="dark"] #order-standard_cart .view-cart-items span,
[data-bs-theme="dark"] #order-standard_cart .view-cart-items div {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] #order-standard_cart .empty-cart,
[data-bs-theme="dark"] #order-standard_cart .text-empty-cart,
[data-bs-theme="dark"] #order-standard_cart .text-center.text-muted,
[data-bs-theme="dark"] #order-standard_cart .text-muted {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] #order-standard_cart .view-cart-items-header {
    background-color: #0f172a !important;
    border-bottom: 1px solid var(--hx-card-border-dark) !important;
}

[data-bs-theme="dark"] #order-standard_cart .view-cart-items {
    border: 1px solid var(--hx-card-border-dark) !important;
    background-color: var(--hx-dark-card) !important;
}

/* Order Summary Box */
[data-bs-theme="dark"] #order-standard_cart .order-summary,
[data-bs-theme="dark"] #order-standard_cart .summary-container,
[data-bs-theme="dark"] #order-standard_cart .secondary-cart-sidebar .order-summary {
    background-color: var(--hx-dark-card) !important;
    border: 1px solid var(--hx-card-border-dark) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] #order-standard_cart .order-summary h2,
[data-bs-theme="dark"] #order-standard_cart .summary-container h2 {
    color: #ffffff !important;
    font-weight: 800 !important;
}

[data-bs-theme="dark"] #order-standard_cart .order-summary span,
[data-bs-theme="dark"] #order-standard_cart .order-summary div,
[data-bs-theme="dark"] #order-standard_cart .summary-container span,
[data-bs-theme="dark"] #order-standard_cart .subtotal,
[data-bs-theme="dark"] #order-standard_cart .subtotal span {
    color: #ffffff !important;
    font-weight: 600 !important;
}

[data-bs-theme="dark"] #order-standard_cart .order-summary .total-due-today,
[data-bs-theme="dark"] #order-standard_cart .order-summary .total-due-today span,
[data-bs-theme="dark"] #order-standard_cart .summary-container .total-due-today {
    color: #ffffff !important;
    font-weight: 700 !important;
}

[data-bs-theme="dark"] #order-standard_cart .order-summary .total-due-today .amt,
[data-bs-theme="dark"] #order-standard_cart .summary-container .total-due-today .amt {
    color: var(--hx-primary) !important;
    font-weight: 800 !important;
    font-size: 22px !important;
}

/* Promo Code Box */
[data-bs-theme="dark"] #order-standard_cart .promo-code-container,
[data-bs-theme="dark"] #order-standard_cart .apply-promo-code,
[data-bs-theme="dark"] #order-standard_cart .view-cart-tabs .tab-content {
    background-color: var(--hx-dark-card) !important;
    border: 1px solid var(--hx-card-border-dark) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] #order-standard_cart .view-cart-tabs .nav-tabs>li>a {
    color: #cbd5e1 !important;
    background-color: #0f172a !important;
    border-color: var(--hx-card-border-dark) !important;
}

[data-bs-theme="dark"] #order-standard_cart .view-cart-tabs .nav-tabs>li.active>a,
[data-bs-theme="dark"] #order-standard_cart .view-cart-tabs .nav-tabs>li.active>a:focus,
[data-bs-theme="dark"] #order-standard_cart .view-cart-tabs .nav-tabs>li.active>a:hover {
    color: #ffffff !important;
    background-color: var(--hx-dark-card) !important;
    border-color: var(--hx-card-border-dark) !important;
    border-bottom-color: transparent !important;
}

[data-bs-theme="dark"] #order-standard_cart #btnValidatePromo,
[data-bs-theme="dark"] #order-standard_cart .btn-validate,
[data-bs-theme="dark"] #order-standard_cart .btn-default {
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    transition: all 0.25s ease;
}

[data-bs-theme="dark"] #order-standard_cart #btnValidatePromo:hover,
[data-bs-theme="dark"] #order-standard_cart .btn-validate:hover {
    background: var(--hx-primary) !important;
    border-color: var(--hx-primary) !important;
    color: #ffffff !important;
}

/* Sidebar Categories in Dark Mode */
[data-bs-theme="dark"] .sidebar .list-group-item,
[data-bs-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item {
    background-color: var(--hx-dark-card) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    font-weight: 600;
}

[data-bs-theme="dark"] .sidebar .list-group-item:hover,
[data-bs-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item:hover {
    background-color: #1a253c !important;
    color: var(--hx-primary) !important;
}

[data-bs-theme="dark"] .sidebar .list-group-item.active,
[data-bs-theme="dark"] #order-standard_cart .cart-sidebar .list-group-item.active,
[data-bs-theme="dark"] .list-group-item.active {
    background-color: var(--hx-primary) !important;
    border-color: var(--hx-primary) !important;
    color: #ffffff !important;
    font-weight: 700;
}

[data-bs-theme="dark"] .sidebar .panel-heading,
[data-bs-theme="dark"] .sidebar .sidebar-collapsed h3,
[data-bs-theme="dark"] .sidebar .cart-sidebar h3 {
    background-color: #0f172a !important;
    color: #ffffff !important;
    border-color: var(--hx-card-border-dark) !important;
}

/* Dark Mode Account Cards */
[data-bs-theme="dark"] .tt-account,
[data-bs-theme="dark"] a.tt-account,
[data-bs-theme="dark"] a.card-accent-midnight-blue {
    background-color: var(--hx-dark-card) !important;
    color: #ffffff !important;
    border: 1px solid var(--hx-card-border-dark) !important;
    border-top: 3px solid var(--hx-primary) !important;
    font-weight: 700 !important;
}

[data-bs-theme="dark"] .tt-account:hover,
[data-bs-theme="dark"] a.tt-account:hover {
    background-color: #18243b !important;
    color: var(--hx-primary) !important;
}

/* Dark Mode Announcements / News */
[data-bs-theme="dark"] .tt-announcement-single {
    background-color: var(--hx-dark-card) !important;
    border: 1px solid var(--hx-card-border-dark) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .tt-announcement-single h3,
[data-bs-theme="dark"] .tt-announcement-single h3 a {
    color: #ffffff !important;
    font-weight: 800 !important;
}

[data-bs-theme="dark"] .tt-announcement-single .tt-date,
[data-bs-theme="dark"] .tt-announcement-single .tt-date i {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}

[data-bs-theme="dark"] .tt-announcement-single p {
    color: #f1f5f9 !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
}

[data-bs-theme="dark"] .tt-announcement-single hr {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .tt-read-more {
    color: var(--hx-primary) !important;
    font-weight: 700 !important;
}

/* Dark Mode Testimonials */
[data-bs-theme="dark"] .tt-testimonial-item {
    background-color: var(--hx-dark-card) !important;
    border: 1px solid var(--hx-card-border-dark) !important;
}

[data-bs-theme="dark"] .tt-testimonial-item p {
    color: #ffffff !important;
    font-weight: 500 !important;
}

[data-bs-theme="dark"] .tt-testimonial-author h6 {
    color: #ffffff !important;
    font-weight: 800 !important;
}

[data-bs-theme="dark"] .tt-testimonial-author span {
    color: #cbd5e1 !important;
    font-weight: 600 !important;
}

/* Dark Mode CTA Section */
[data-bs-theme="dark"] #ctaSection {
    background-color: var(--hx-dark-surface) !important;
    border-top: 1px solid var(--hx-card-border-dark) !important;
}

[data-bs-theme="dark"] #ctaSection h2 {
    color: #ffffff !important;
}

[data-bs-theme="dark"] #ctaSection p {
    color: #e2e8f0 !important;
}

[data-bs-theme="dark"] #ctaSection .btn-outline-dark {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
    font-weight: 700;
}

[data-bs-theme="dark"] #ctaSection .btn-outline-dark:hover {
    background: #ffffff !important;
    color: #090d16 !important;
}

[data-bs-theme="dark"] #ctaSection a.text-dark {
    color: #ffffff !important;
}

[data-bs-theme="dark"] #ctaSection .text-muted {
    color: #cbd5e1 !important;
}

/* Footer Styling */
.tt-footer {
    background: var(--hx-dark) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.tt-footer a:hover {
    color: var(--hx-primary) !important;
}

/* ==========================================================================
   HOMEPAGE ENRICHED SECTIONS (Campaign, Deals, VPS, Comparison, Network, Trust)
   ========================================================================== */

/* Section Pill Badges */
.hx-section-pill {
    background: rgba(255, 85, 0, 0.08);
    border: 1px solid rgba(255, 85, 0, 0.2);
    color: var(--hx-primary);
    font-size: 0.8rem;
    letter-spacing: 0.05em;
}

[data-bs-theme="dark"] .hx-section-pill {
    background: rgba(255, 85, 0, 0.15);
    border-color: rgba(255, 85, 0, 0.35);
    color: #ff7a1a;
}

.hx-section-heading {
    color: #0f172a;
    letter-spacing: -0.025em;
    font-weight: 800;
}

[data-bs-theme="dark"] .hx-section-heading {
    color: #ffffff !important;
}

.tt-section-subtitle,
.hx-section-subheading {
    color: #475569;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

[data-bs-theme="dark"] .tt-section-subtitle,
[data-bs-theme="dark"] .hx-section-subheading,
[data-bs-theme="dark"] .tt-pricing-section .lead,
[data-bs-theme="dark"] .tt-faq-section .lead,
[data-bs-theme="dark"] .tt-migration-section .lead,
[data-bs-theme="dark"] .tt-solutions-section .lead,
[data-bs-theme="dark"] .tt-promo-pillars-section .lead {
    color: #cbd5e1 !important;
}

/* Pulse Dots */
.hx-pulse-dot {
    width: 8px;
    height: 8px;
    background-color: #ff3b30;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
    animation: hxPulse 1.8s infinite;
}

.hx-pulse-dot-green {
    width: 8px;
    height: 8px;
    background-color: #10b981;
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: hxPulseGreen 1.8s infinite;
}

@keyframes hxPulse {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 7px rgba(255, 59, 48, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(255, 59, 48, 0);
    }
}

@keyframes hxPulseGreen {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 7px rgba(16, 185, 129, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* 1. SPECIAL CAMPAIGN BANNER */
.hx-campaign-section {
    background: linear-gradient(135deg, #090d16 0%, #171124 50%, #200d07 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hx-campaign-glow-bg {
    background: radial-gradient(circle at 20% 50%, rgba(255, 85, 0, 0.18) 0%, transparent 60%),
        radial-gradient(circle at 80% 50%, rgba(225, 29, 72, 0.15) 0%, transparent 60%);
    pointer-events: none;
}

.hx-campaign-badge {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(8px);
}

.hx-campaign-title {
    letter-spacing: -0.03em;
}

#hxCampaignCountdown {
    display: flex !important;
    gap: 12px !important;
}

.hx-countdown-box {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 12px;
    padding: 10px 14px;
    min-width: 65px;
    backdrop-filter: blur(8px);
    margin: 0 4px;
}

.hx-count-num {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    font-family: monospace;
}

.hx-count-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 600;
    margin-top: 2px;
}

.hx-coupon-box {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18) !important;
}

.hx-btn-glow {
    box-shadow: 0 0 25px rgba(255, 85, 0, 0.5) !important;
}

.hx-deal-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
}

.hx-deal-card:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 85, 0, 0.5);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

/* 2. PROMOTIONAL DOMAIN DEALS GRID */
.hx-domain-deals-section {
    background: #ffffff;
}

[data-bs-theme="dark"] .hx-domain-deals-section {
    background: var(--hx-dark);
}

.hx-tld-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border-color: #e2e8f0 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hx-tld-ribbon-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    width: 68px;
    height: 68px;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
}

.hx-tld-ribbon {
    position: absolute;
    top: 11px;
    right: -24px;
    transform: rotate(45deg);
    width: 90px;
    background: #ff5500;
    color: #ffffff;
    font-size: 8px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    line-height: 1.2;
    display: block;
}

.hx-ribbon-popular {
    background: #ff5500;
    color: #ffffff;
}

.hx-ribbon-secondary {
    background: #1e1b4b;
    color: #ffffff;
}

[data-bs-theme="dark"] .hx-ribbon-secondary {
    background: #4338ca;
}

[dir="rtl"] .hx-tld-ribbon-wrapper,
.rtl .hx-tld-ribbon-wrapper {
    right: auto;
    left: 0;
}

[dir="rtl"] .hx-tld-ribbon,
.rtl .hx-tld-ribbon {
    right: auto;
    left: -25px;
    transform: rotate(-45deg);
}

[data-bs-theme="dark"] .hx-tld-card {
    background: var(--hx-dark-card);
    border-color: var(--hx-card-border-dark) !important;
}

.hx-tld-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--hx-primary) !important;
}

[data-bs-theme="dark"] .hx-tld-card:hover {
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

.hx-tld-popular {
    border-color: var(--hx-primary) !important;
    box-shadow: 0 8px 24px rgba(255, 85, 0, 0.12);
}

.hx-tld-ext {
    color: #0f172a;
    font-weight: 800;
}

[data-bs-theme="dark"] .hx-tld-ext {
    color: #ffffff;
}

.hx-tld-trust-bar {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px 36px !important;
}

.hx-tld-trust-bar>div {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 4px 12px !important;
}

[data-bs-theme="dark"] .hx-tld-trust-bar {
    background: var(--hx-dark-card);
    border-color: var(--hx-card-border-dark);
}

/* 3. CLOUD VPS SHOWCASE */
.hx-vps-section {
    background: #f8fafc;
}

[data-bs-theme="dark"] .hx-vps-section {
    background: var(--hx-dark-surface);
}

.hx-billing-switcher {
    background: #ffffff;
    padding: 4px !important;
    border: 1.5px solid #e2e8f0;
    display: inline-flex !important;
    align-items: center !important;
}

[data-bs-theme="dark"] .hx-billing-switcher {
    background: var(--hx-dark-card);
    border-color: var(--hx-card-border-dark) !important;
}

.hx-billing-switcher .btn {
    border: none !important;
    color: #334155 !important;
    background: transparent !important;
    font-size: 0.875rem !important;
    padding: 6px 16px !important;
    transition: all 0.2s ease !important;
}

[data-bs-theme="dark"] .hx-billing-switcher .btn {
    color: #cbd5e1 !important;
}

.hx-billing-switcher .btn.active {
    background: var(--hx-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 85, 0, 0.3) !important;
}

.hx-billing-switcher .btn .badge,
.hx-billing-switcher .badge.bg-danger,
.hx-billing-switcher .badge-danger {
    background-color: #ef4444 !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    padding: 3px 8px !important;
    border-radius: 20px !important;
    margin-left: 6px !important;
    display: inline-block !important;
    vertical-align: middle !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.hx-vps-card {
    background: #ffffff;
    border-color: #e2e8f0 !important;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-bs-theme="dark"] .hx-vps-card {
    background: var(--hx-dark-card);
    border-color: var(--hx-card-border-dark) !important;
}

.hx-vps-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.hx-vps-popular {
    border-color: var(--hx-primary) !important;
    box-shadow: 0 10px 30px rgba(255, 85, 0, 0.18) !important;
}

.hx-os-bar {
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

[data-bs-theme="dark"] .hx-os-bar {
    background: var(--hx-dark-card);
    border-color: var(--hx-card-border-dark);
}

/* 4. PLAN FEATURE COMPARISON MATRIX */
.hx-comparison-section {
    background: #ffffff;
}

[data-bs-theme="dark"] .hx-comparison-section {
    background: var(--hx-dark);
}

.hx-table-wrapper {
    background: #ffffff;
    border-color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .hx-table-wrapper {
    background: var(--hx-dark-card);
    border-color: var(--hx-card-border-dark) !important;
}

.hx-comparison-table {
    margin-bottom: 0;
}

.hx-table-head-row {
    background: #f8fafc;
    border-bottom: 2px solid #e2e8f0;
}

[data-bs-theme="dark"] .hx-table-head-row {
    background: #090d16;
    border-color: var(--hx-card-border-dark);
}

.hx-table-cat-row {
    background: rgba(255, 85, 0, 0.04);
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

[data-bs-theme="dark"] .hx-table-cat-row {
    background: rgba(255, 85, 0, 0.08);
    border-color: var(--hx-card-border-dark);
}

.hx-table-data-row td {
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.85rem;
}

[data-bs-theme="dark"] .hx-table-data-row td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.hx-col-popular {
    background: rgba(255, 85, 0, 0.03) !important;
}

[data-bs-theme="dark"] .hx-col-popular {
    background: rgba(255, 85, 0, 0.06) !important;
}

.hx-table-foot-row {
    background: #f8fafc;
}

[data-bs-theme="dark"] .hx-table-foot-row {
    background: #090d16;
}

/* 5. GLOBAL DATA CENTERS */
.hx-network-section {
    background: #f8fafc;
}

[data-bs-theme="dark"] .hx-network-section {
    background: var(--hx-dark-surface);
}

.hx-datacenter-card {
    background: #ffffff;
    border-color: #e2e8f0 !important;
    transition: all 0.3s ease;
}

[data-bs-theme="dark"] .hx-datacenter-card {
    background: var(--hx-dark-card);
    border-color: var(--hx-card-border-dark) !important;
}

.hx-datacenter-card:hover {
    transform: translateY(-4px);
    border-color: var(--hx-primary) !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.hx-ping-pill {
    background: rgba(16, 185, 129, 0.08);
    border-color: rgba(16, 185, 129, 0.25) !important;
}

[data-bs-theme="dark"] .hx-ping-pill {
    background: rgba(16, 185, 129, 0.15);
}

.hx-metric-box {
    background: #ffffff;
    border-color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .hx-metric-box {
    background: var(--hx-dark-card);
    border-color: var(--hx-card-border-dark) !important;
}

/* 6. TECHNOLOGY PARTNERS & TRUST */
.hx-partners-section {
    background: #ffffff;
}

[data-bs-theme="dark"] .hx-partners-section {
    background: var(--hx-dark);
}

.hx-partner-card {
    background: #f8fafc;
    border-color: #e2e8f0 !important;
    transition: all 0.25s ease;
}

[data-bs-theme="dark"] .hx-partner-card {
    background: var(--hx-dark-card);
    border-color: var(--hx-card-border-dark) !important;
}

.hx-partner-card:hover {
    transform: translateY(-3px);
    background: #ffffff;
    border-color: var(--hx-primary) !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
}

[data-bs-theme="dark"] .hx-partner-card:hover {
    background: #172237;
}

.hx-trust-pillar {
    background: #f8fafc;
    border-color: #e2e8f0 !important;
}

[data-bs-theme="dark"] .hx-trust-pillar {
    background: var(--hx-dark-card);
    border-color: var(--hx-card-border-dark) !important;
}

/* Global Text contrast target for Dark mode */
.text-white-target {
    color: #0f172a;
}

[data-bs-theme="dark"] .text-white-target {
    color: #ffffff !important;
}

/* Typography micro sizes */
.fs-7 {
    font-size: 0.85rem !important;
}

.fs-8 {
    font-size: 0.75rem !important;
}

.fs-9 {
    font-size: 0.65rem !important;
}

/* Universal Flex Gap Utilities (For d-flex & d-inline-flex containers) */
.d-flex.gap-0,
.d-inline-flex.gap-0 {
    gap: 0 !important;
}

.d-flex.gap-1,
.d-inline-flex.gap-1 {
    gap: 0.25rem !important;
}

.d-flex.gap-2,
.d-inline-flex.gap-2 {
    gap: 0.5rem !important;
}

.d-flex.gap-3,
.d-inline-flex.gap-3 {
    gap: 1rem !important;
}

.d-flex.gap-4,
.d-inline-flex.gap-4 {
    gap: 1.5rem !important;
}

.d-flex.gap-5,
.d-inline-flex.gap-5 {
    gap: 3rem !important;
}

/* Grid Row Safeguard - never apply gap to Bootstrap grid rows */
.row,
.row.gap-1,
.row.gap-2,
.row.gap-3,
.row.gap-4,
.row.gap-5 {
    gap: 0 !important;
}

@media (min-width: 576px) {

    .d-flex.gap-sm-0,
    .d-inline-flex.gap-sm-0 {
        gap: 0 !important;
    }

    .d-flex.gap-sm-1,
    .d-inline-flex.gap-sm-1 {
        gap: 0.25rem !important;
    }

    .d-flex.gap-sm-2,
    .d-inline-flex.gap-sm-2 {
        gap: 0.5rem !important;
    }

    .d-flex.gap-sm-3,
    .d-inline-flex.gap-sm-3 {
        gap: 1rem !important;
    }

    .d-flex.gap-sm-4,
    .d-inline-flex.gap-sm-4 {
        gap: 1.5rem !important;
    }

    .d-flex.gap-sm-5,
    .d-inline-flex.gap-sm-5 {
        gap: 3rem !important;
    }
}

@media (min-width: 768px) {

    .d-flex.gap-md-0,
    .d-inline-flex.gap-md-0 {
        gap: 0 !important;
    }

    .d-flex.gap-md-1,
    .d-inline-flex.gap-md-1 {
        gap: 0.25rem !important;
    }

    .d-flex.gap-md-2,
    .d-inline-flex.gap-md-2 {
        gap: 0.5rem !important;
    }

    .d-flex.gap-md-3,
    .d-inline-flex.gap-md-3 {
        gap: 1rem !important;
    }

    .d-flex.gap-md-4,
    .d-inline-flex.gap-md-4 {
        gap: 1.5rem !important;
    }

    .d-flex.gap-md-5,
    .d-inline-flex.gap-md-5 {
        gap: 3rem !important;
    }
}

@media (min-width: 992px) {

    .d-flex.gap-lg-0,
    .d-inline-flex.gap-lg-0 {
        gap: 0 !important;
    }

    .d-flex.gap-lg-1,
    .d-inline-flex.gap-lg-1 {
        gap: 0.25rem !important;
    }

    .d-flex.gap-lg-2,
    .d-inline-flex.gap-lg-2 {
        gap: 0.5rem !important;
    }

    .d-flex.gap-lg-3,
    .d-inline-flex.gap-lg-3 {
        gap: 1rem !important;
    }

    .d-flex.gap-lg-4,
    .d-inline-flex.gap-lg-4 {
        gap: 1.5rem !important;
    }

    .d-flex.gap-lg-5,
    .d-inline-flex.gap-lg-5 {
        gap: 3rem !important;
    }
}


/* Badge & Utility Colors */
.bg-danger,
.badge-danger,
.badge.bg-danger {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

.bg-warning,
.badge-warning,
.badge.bg-warning {
    background-color: #f59e0b !important;
    color: #090d16 !important;
}

.bg-success,
.badge-success,
.badge.bg-success {
    background-color: #10b981 !important;
    color: #ffffff !important;
}

.bg-info,
.badge-info,
.badge.bg-info {
    background-color: #06b6d4 !important;
    color: #090d16 !important;
}

.bg-secondary,
.badge-secondary,
.badge.bg-secondary {
    background-color: #64748b !important;
    color: #ffffff !important;
}

.bg-success-subtle {
    background-color: rgba(16, 185, 129, 0.12) !important;
    color: #10b981 !important;
}

/* ==========================================================================
   Footer Contact Icons & Social Circle Buttons
   ========================================================================== */

.tt-footer address i,
.footer address i {
    color: var(--hx-primary) !important;
    width: 20px !important;
    text-align: center !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.tt-footer-social-wrapper {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.tt-footer .tt-footer-social-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
    text-decoration: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    font-size: 15px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

.tt-footer .tt-footer-social-link:hover {
    color: white !important;
}

.tt-footer .tt-footer-social-link i {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    width: auto !important;
    height: auto !important;
}

.tt-footer .tt-footer-social-link:hover {
    background: var(--hx-primary) !important;
    border-color: var(--hx-primary) !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 85, 0, 0.45) !important;
}

/* ==========================================================================
   Mobile Sidebar / Offcanvas Navigation (Max Width: 1199px)
   ========================================================================== */

@media (max-width: 1199.98px) {

    /* Drawer Base */
    .offcanvas-collapse {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        right: auto !important;
        width: 320px !important;
        max-width: 86vw !important;
        height: 100vh !important;
        z-index: 99999 !important;
        padding: 20px 18px 30px !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        background-color: #ffffff !important;
        border-right: 1px solid #e2e8f0 !important;
        box-shadow: 10px 0 35px rgba(0, 0, 0, 0.15) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        transform: translateX(-105%) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse,
    body[data-bs-theme="dark"] .offcanvas-collapse {
        background-color: #0c111d !important;
        border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.7) !important;
    }

    .offcanvas-collapse.open {
        transform: translateX(0) !important;
    }

    /* Overlay Backdrop */
    .overlay,
    .tt-body-wrapper .overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(2px) !important;
        -webkit-backdrop-filter: blur(2px) !important;
        z-index: 99990 !important;
        cursor: pointer !important;
    }

    /* Drawer Header */
    .hx-mobile-drawer-header {
        width: 100% !important;
        border-color: #e2e8f0 !important;
    }

    [data-bs-theme="dark"] .hx-mobile-drawer-header {
        border-color: rgba(255, 255, 255, 0.1) !important;
    }

    .hx-mobile-drawer-close {
        width: 36px !important;
        height: 36px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: #f1f5f9 !important;
        border: 1px solid #e2e8f0 !important;
        color: #0f172a !important;
        transition: all 0.2s ease !important;
        padding: 0 !important;
    }

    [data-bs-theme="dark"] .hx-mobile-drawer-close {
        background: rgba(255, 255, 255, 0.08) !important;
        border-color: rgba(255, 255, 255, 0.15) !important;
        color: #ffffff !important;
    }

    .hx-mobile-drawer-close:hover {
        background: var(--hx-primary) !important;
        border-color: var(--hx-primary) !important;
        color: #ffffff !important;
    }

    /* Mobile Searchbar (Light & Dark Mode) */
    .hx-mobile-search-form {
        width: 100% !important;
    }

    .hx-mobile-search-group {
        border-radius: 10px !important;
        overflow: hidden !important;
        border: 1.5px solid #cbd5e1 !important;
        background: #f8fafc !important;
        transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    }

    [data-bs-theme="dark"] .hx-mobile-search-group {
        border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
        background: #131c2e !important;
    }

    .hx-mobile-search-group:focus-within {
        border-color: var(--hx-primary) !important;
        box-shadow: 0 0 0 3px rgba(255, 85, 0, 0.2) !important;
    }

    .hx-mobile-search-group .hx-search-btn {
        background: transparent !important;
        border: none !important;
        color: #64748b !important;
        padding: 10px 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 15px !important;
        box-shadow: none !important;
    }

    [data-bs-theme="dark"] .hx-mobile-search-group .hx-search-btn {
        color: #94a3b8 !important;
    }

    .hx-mobile-search-group .hx-search-btn:hover {
        color: var(--hx-primary) !important;
    }

    .hx-mobile-search-group .hx-search-input {
        background: transparent !important;
        border: none !important;
        color: #0f172a !important;
        font-size: 14px !important;
        padding: 10px 14px 10px 0 !important;
        box-shadow: none !important;
        font-weight: 500 !important;
    }

    [data-bs-theme="dark"] .hx-mobile-search-group .hx-search-input {
        color: #f8fafc !important;
    }

    .hx-mobile-search-group .hx-search-input::placeholder {
        color: #94a3b8 !important;
        font-weight: 400 !important;
    }

    [data-bs-theme="dark"] .hx-mobile-search-group .hx-search-input::placeholder {
        color: rgba(255, 255, 255, 0.45) !important;
    }

    /* Mobile Navigation Menu - Full Width, Left Aligned */
    .offcanvas-collapse #nav,
    .offcanvas-collapse .navbar-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 3px !important;
    }

    .offcanvas-collapse #nav>li,
    .offcanvas-collapse .navbar-nav>li {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        text-align: left !important;
    }

    .offcanvas-collapse #nav>li>a,
    .offcanvas-collapse .navbar-nav>li>a,
    .offcanvas-collapse .nav-link {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        width: 100% !important;
        padding: 10px 14px !important;
        border-radius: 9px !important;
        font-size: 14.5px !important;
        font-weight: 600 !important;
        font-family: var(--hx-font-nav) !important;
        text-align: left !important;
        text-decoration: none !important;
        color: #0f172a !important;
        background: transparent !important;
        transition: all 0.2s ease !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse #nav>li>a,
    [data-bs-theme="dark"] .offcanvas-collapse .navbar-nav>li>a,
    [data-bs-theme="dark"] .offcanvas-collapse .nav-link {
        color: #f8fafc !important;
    }

    .offcanvas-collapse #nav>li>a:hover,
    .offcanvas-collapse #nav>li.active>a,
    .offcanvas-collapse .navbar-nav>li>a:hover,
    .offcanvas-collapse .nav-link:hover {
        background: rgba(255, 85, 0, 0.08) !important;
        color: var(--hx-primary) !important;
        transform: none !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse #nav>li>a:hover,
    [data-bs-theme="dark"] .offcanvas-collapse #nav>li.active>a,
    [data-bs-theme="dark"] .offcanvas-collapse .navbar-nav>li>a:hover,
    [data-bs-theme="dark"] .offcanvas-collapse .nav-link:hover {
        background: rgba(255, 85, 0, 0.16) !important;
        color: var(--hx-primary) !important;
    }

    /* Submenus / Dropdowns in Mobile Drawer */
    .offcanvas-collapse .dropdown-menu {
        position: static !important;
        float: none !important;
        width: 100% !important;
        margin: 4px 0 8px 0 !important;
        padding: 6px 8px 6px 12px !important;
        border: none !important;
        border-left: 2.5px solid var(--hx-primary) !important;
        border-radius: 0 8px 8px 0 !important;
        box-shadow: none !important;
        background: rgba(241, 245, 249, 0.6) !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu {
        background: rgba(19, 28, 46, 0.6) !important;
        border-left-color: var(--hx-primary) !important;
    }

    .offcanvas-collapse .dropdown-item,
    .offcanvas-collapse .dropdown-menu a {
        display: block !important;
        width: 100% !important;
        padding: 8px 12px !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        border-radius: 6px !important;
        color: #334155 !important;
        text-align: left !important;
        transition: all 0.2s ease !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-item,
    [data-bs-theme="dark"] .offcanvas-collapse .dropdown-menu a {
        color: #cbd5e1 !important;
    }

    .offcanvas-collapse .dropdown-item:hover,
    .offcanvas-collapse .dropdown-menu a:hover {
        background: rgba(255, 85, 0, 0.1) !important;
        color: var(--hx-primary) !important;
    }

    /* Auth Actions in Mobile Drawer */
    .offcanvas-collapse .tt-secondary-list {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        border-top: 1px solid #e2e8f0 !important;
        padding-top: 14px !important;
        margin-top: 10px !important;
        gap: 8px !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse .tt-secondary-list {
        border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    }

    .offcanvas-collapse .tt-secondary-list>li {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .offcanvas-collapse .tt-secondary-list .nav-item a.btn-sm,
    .offcanvas-collapse .tt-secondary-list a[href*="register.php"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 10px 16px !important;
        border-radius: 9px !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        background: var(--hx-primary) !important;
        color: #ffffff !important;
        border: 1px solid var(--hx-primary) !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }

    .offcanvas-collapse .tt-secondary-list a[href*="clientarea.php"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 10px 16px !important;
        border-radius: 9px !important;
        font-weight: 600 !important;
        font-size: 14px !important;
        background: rgba(255, 85, 0, 0.08) !important;
        color: var(--hx-primary) !important;
        border: 1.5px solid rgba(255, 85, 0, 0.3) !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
    }

    [data-bs-theme="dark"] .offcanvas-collapse .tt-secondary-list a[href*="clientarea.php"] {
        background: rgba(255, 85, 0, 0.14) !important;
        border-color: rgba(255, 85, 0, 0.4) !important;
        color: #ffffff !important;
    }
}

/* Testimonial Swiper Slider Polish */
.custom-slider .swiper-pagination {
    position: relative !important;
    margin-top: 24px !important;
    bottom: 0 !important;
}

.custom-slider .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 4px !important;
    background: #cbd5e1;
    opacity: 1;
    transition: all 0.3s ease;
    border-radius: 4px;
}

.custom-slider .swiper-pagination-bullet-active {
    background: #ff5500 !important;
    width: 26px !important;
}

[data-bs-theme="dark"] .custom-slider .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 0.25);
}

[data-bs-theme="dark"] .custom-slider .swiper-pagination-bullet-active {
    background: #ff5500 !important;
}

/* Testimonial Carousel Navigation Arrows & Touch Swipe */
.tt-testimonial-slider-wrapper .swiper-button-prev,
.tt-testimonial-slider-wrapper .swiper-button-next {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: -20px !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

.tt-testimonial-slider-wrapper .swiper-button-prev {
    left: 0 !important;
}

.tt-testimonial-slider-wrapper .swiper-button-next {
    right: 0 !important;
}

.tt-testimonial-slider-wrapper .swiper-button-prev:after,
.tt-testimonial-slider-wrapper .swiper-button-next:after {
    font-size: 15px !important;
    font-weight: 800 !important;
}

.tt-testimonial-slider-wrapper .swiper-button-prev:hover,
.tt-testimonial-slider-wrapper .swiper-button-next:hover {
    background: var(--hx-primary, #ff5500) !important;
    color: #ffffff !important;
    border-color: var(--hx-primary, #ff5500) !important;
    transform: translateY(-50%) scale(1.08) !important;
    box-shadow: 0 6px 20px rgba(255, 85, 0, 0.28) !important;
}

/* Dark mode */
[data-bs-theme="dark"] .tt-testimonial-slider-wrapper .swiper-button-prev,
[data-bs-theme="dark"] .tt-testimonial-slider-wrapper .swiper-button-next {
    background: #131c2e !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .tt-testimonial-slider-wrapper .swiper-button-prev:hover,
[data-bs-theme="dark"] .tt-testimonial-slider-wrapper .swiper-button-next:hover {
    background: var(--hx-primary, #ff5500) !important;
    color: #ffffff !important;
    border-color: var(--hx-primary, #ff5500) !important;
}

@media (max-width: 767.98px) {
    .tt-testimonial-slider-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .tt-testimonial-slider-wrapper .swiper-button-prev,
    .tt-testimonial-slider-wrapper .swiper-button-next {
        display: none !important;
    }
}

/* ==========================================================================
   MOBILE COMPACT UI & TYPOGRAPHY SCALING OPTIMIZATION (<768px)
   ========================================================================== */

/* Hero Badge Styling */
.tt-hero-badge {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    backdrop-filter: blur(10px);
}

.tt-hero-badge span,
.tt-hero-badge i {
    color: #ffffff !important;
}

.tt-hero-badge .fa-bolt,
.tt-hero-badge i.text-warning {
    color: #f59e0b !important;
}

/* Search Dropdown on Mobile / Desktop */
.hx-search-dropdown {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
}

[data-bs-theme="dark"] .hx-search-dropdown {
    background-color: #131c2e !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

[data-bs-theme="dark"] .hx-search-dropdown .form-control {
    background-color: #090d16 !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

@media (max-width: 767.98px) {

    /* 1. Global Section Spacing & Vertical Gaps */
    .ptb-100 {
        padding-top: 42px !important;
        padding-bottom: 42px !important;
    }

    .ptb-80 {
        padding-top: 34px !important;
        padding-bottom: 34px !important;
    }

    .ptb-60 {
        padding-top: 26px !important;
        padding-bottom: 26px !important;
    }

    .pt-100,
    .pt-80 {
        padding-top: 36px !important;
    }

    .pb-100,
    .pb-80 {
        padding-bottom: 36px !important;
    }

    .tt-section-heading {
        margin-bottom: 20px !important;
    }

    .mb-5 {
        margin-bottom: 1.5rem !important;
    }

    .my-5 {
        margin-top: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .py-5 {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    /* 2. Mobile Typography Scaling */
    h1,
    .tt-hero h1,
    .display-4,
    .display-5 {
        font-size: 1.65rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.75rem !important;
        letter-spacing: -0.02em !important;
    }

    h2,
    .display-6,
    .tt-section-heading h2,
    .tt-testimonial-heading {
        font-size: 1.35rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.5rem !important;
        letter-spacing: -0.01em !important;
    }

    h3,
    .hx-tld-ext {
        font-size: 1.15rem !important;
        line-height: 1.35 !important;
    }

    h4,
    h5,
    h6 {
        font-size: 1rem !important;
        line-height: 1.4 !important;
    }

    .lead,
    .tt-hero p.lead,
    .tt-section-heading p {
        font-size: 13.5px !important;
        line-height: 1.55 !important;
        margin-bottom: 1rem !important;
    }

    p {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .small,
    small {
        font-size: 11.5px !important;
    }

    /* 3. Hero Section UI Compactness */
    .tt-hero-badge {
        font-size: 11.5px !important;
        padding: 4px 10px !important;
        margin-bottom: 10px !important;
    }

    .tt-hero-btns {
        gap: 8px !important;
        width: 100% !important;
    }

    .tt-hero .hero-img {
        max-width: 260px !important;
        max-height: 220px !important;
        margin: 12px auto 0 !important;
    }

    /* 4. Top Promo Bar Compactness */
    .top-promo-bar {
        font-size: 11.5px !important;
        padding: 5px 0 !important;
    }

    .hx-promo-btn {
        padding: 2px 8px !important;
        font-size: 10.5px !important;
        margin-left: 6px !important;
    }

    .hx-promo-marquee-container.is-marquee .hx-promo-text {
        padding-right: 36px !important;
    }

    [dir="rtl"] .hx-promo-marquee-container.is-marquee .hx-promo-text {
        padding-left: 36px !important;
    }

    /* 5. Domain Search Form Compactness */
    .tt-domain-search-wrapper,
    .hx-domain-search-box {
        padding: 14px 12px !important;
        border-radius: 14px !important;
    }

    .hx-domain-input-group .form-control {
        height: 42px !important;
        font-size: 13px !important;
    }

    .hx-domain-input-group .btn {
        height: 42px !important;
        font-size: 13px !important;
        padding: 0 16px !important;
    }

    .hx-spotlight-item,
    .tt-domain-search-wrapper .d-inline-flex {
        font-size: 11px !important;
        padding: 2px 7px !important;
        margin-right: 4px !important;
        margin-bottom: 5px !important;
    }

    /* 6. Pricing & TLD Deal Cards */
    .hx-tld-card,
    .pricing-table-card,
    .tt-pricing-plan {
        padding: 16px 14px !important;
        margin-bottom: 14px !important;
        border-radius: 12px !important;
    }

    .pricing-header h3 {
        font-size: 1.15rem !important;
    }

    .pricing-price .price-amount {
        font-size: 1.6rem !important;
    }

    .pricing-features-list li {
        font-size: 12px !important;
        padding: 4px 0 !important;
    }

    /* 7. Feature & Promo Cards */
    .tt-feature-card,
    .tt-promo-card,
    .tt-service-item {
        padding: 14px 12px !important;
        margin-bottom: 12px !important;
    }

    .tt-feature-icon {
        width: 36px !important;
        height: 36px !important;
        font-size: 14px !important;
    }

    /* Quick Action / Promo Shortcut Cards */
    .tt-promo-quicklink-card,
    .tt-promo {
        padding: 12px 6px !important;
        border-radius: 10px !important;
        margin-bottom: 6px !important;
        min-height: 100px !important;
    }

    .tt-promo-quicklink-card .tt-quicklink-icon,
    .tt-promo figure.ico-container {
        width: 36px !important;
        height: 36px !important;
        font-size: 15px !important;
        margin-bottom: 6px !important;
    }

    .tt-promo-quicklink-card .tt-quicklink-title,
    .tt-promo-quicklink-card h6,
    .tt-promo {
        font-size: 11.5px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        letter-spacing: -0.2px !important;
        padding: 0 2px !important;
    }

    /* 8. Testimonials Section Compactness */
    .tt-testimonial-item {
        padding: 14px 12px !important;
    }

    .tt-testimonial-item p {
        font-size: 12.5px !important;
        line-height: 1.5 !important;
        margin-bottom: 10px !important;
    }

    .tt-testimonial-author .rounded-circle,
    .tt-testimonial-author img {
        width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
    }

    .tt-testimonial-author h6 {
        font-size: 13px !important;
    }

    /* 9. Footer Compactness */
    .tt-footer-section {
        padding: 35px 0 15px !important;
    }

    .tt-footer-section h5,
    .tt-footer-section h6 {
        font-size: 13.5px !important;
        margin-bottom: 10px !important;
    }

    .tt-footer-section ul li a {
        font-size: 12px !important;
        padding: 2px 0 !important;
    }
}

@media (max-width: 420px) {

    h1,
    .tt-hero h1,
    .display-4,
    .display-5 {
        font-size: 1.45rem !important;
    }

    h2,
    .display-6,
    .tt-section-heading h2 {
        font-size: 1.2rem !important;
    }

    .tt-hero .hero-img {
        max-width: 220px !important;
    }

    .tt-promo-quicklink-card,
    .tt-promo {
        padding: 10px 4px !important;
        min-height: 90px !important;
    }

    .tt-promo-quicklink-card .tt-quicklink-icon,
    .tt-promo figure.ico-container {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
        margin-bottom: 4px !important;
    }

    .tt-promo-quicklink-card .tt-quicklink-title,
    .tt-promo-quicklink-card h6,
    .tt-promo {
        font-size: 10.5px !important;
        letter-spacing: -0.3px !important;
    }
}

/* ==========================================================================
   HostXing Modern Sections High-Contrast Dark Mode Enhancements
   ========================================================================== */

/* 1. All Section Backgrounds in Dark Mode (Eliminates white surfaces) */
[data-bs-theme="dark"] #pricingSection,
[data-bs-theme="dark"] .tt-pricing-section,
[data-bs-theme="dark"] #solutionsSection,
[data-bs-theme="dark"] .tt-solutions-section,
[data-bs-theme="dark"] #faqSection,
[data-bs-theme="dark"] .tt-faq-section,
[data-bs-theme="dark"] #domainDealsSection,
[data-bs-theme="dark"] .hx-domain-deals-section,
[data-bs-theme="dark"] #vpsSection,
[data-bs-theme="dark"] .hx-vps-section,
[data-bs-theme="dark"] #networkSection,
[data-bs-theme="dark"] .hx-network-section,
[data-bs-theme="dark"] #compareSection,
[data-bs-theme="dark"] .hx-comparison-section,
[data-bs-theme="dark"] #testimonialsSection,
[data-bs-theme="dark"] section.bg-light,
[data-bs-theme="dark"] .bg-light {
    background: #0b0f19 !important;
    background-color: #0b0f19 !important;
}

[data-bs-theme="dark"] #migrationSection,
[data-bs-theme="dark"] .tt-migration-section,
[data-bs-theme="dark"] .tt-promo-pillars-section,
[data-bs-theme="dark"] #partnersSection,
[data-bs-theme="dark"] .hx-partners-section {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 2. Dark Mode Cards & Surfaces */
[data-bs-theme="dark"] .tt-hostarise-card,
[data-bs-theme="dark"] .tt-migration-card,
[data-bs-theme="dark"] .tt-pillar-card,
[data-bs-theme="dark"] .tt-solution-card,
[data-bs-theme="dark"] .tt-faq-item,
[data-bs-theme="dark"] .tt-trust-bar,
[data-bs-theme="dark"] .tt-testimonial-item,
[data-bs-theme="dark"] .hx-tld-card,
[data-bs-theme="dark"] .hx-vps-card,
[data-bs-theme="dark"] .hx-datacenter-card,
[data-bs-theme="dark"] .hx-metric-box,
[data-bs-theme="dark"] .hx-partner-card,
[data-bs-theme="dark"] .hx-table-wrapper {
    background: #151d2f !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

[data-bs-theme="dark"] .tt-hostarise-card:hover,
[data-bs-theme="dark"] .tt-migration-card:hover,
[data-bs-theme="dark"] .tt-pillar-card:hover,
[data-bs-theme="dark"] .tt-solution-card:hover,
[data-bs-theme="dark"] .hx-tld-card:hover,
[data-bs-theme="dark"] .hx-vps-card:hover,
[data-bs-theme="dark"] .hx-datacenter-card:hover,
[data-bs-theme="dark"] .hx-partner-card:hover {
    border-color: #ff5500 !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
}

/* 3. Dark Mode Headings (Pure White) */
[data-bs-theme="dark"] .tt-pricing-heading,
[data-bs-theme="dark"] .tt-migration-heading,
[data-bs-theme="dark"] .tt-faq-heading,
[data-bs-theme="dark"] .tt-solutions-heading,
[data-bs-theme="dark"] .hx-section-heading,
[data-bs-theme="dark"] .tt-testimonial-heading,
[data-bs-theme="dark"] .tt-plan-name,
[data-bs-theme="dark"] .tt-card-title,
[data-bs-theme="dark"] .tt-price-amount,
[data-bs-theme="dark"] .tt-faq-trigger,
[data-bs-theme="dark"] .tt-trust-text,
[data-bs-theme="dark"] .hx-tld-ext,
[data-bs-theme="dark"] .tt-testimonial-author-name,
[data-bs-theme="dark"] .hx-datacenter-card h5.text-white-target,
[data-bs-theme="dark"] .hx-partner-card h6.text-white-target,
[data-bs-theme="dark"] .hx-vps-card h4,
[data-bs-theme="dark"] .hx-vps-specs strong.text-white-target,
[data-bs-theme="dark"] .hx-comparison-table th .text-white-target,
[data-bs-theme="dark"] .hx-comparison-table td.text-white-target {
    color: #ffffff !important;
}

/* 4. Dark Mode Subtitles & Subheadings (Crisp Slate 300 - High Contrast) */
[data-bs-theme="dark"] .tt-section-subtitle,
[data-bs-theme="dark"] .hx-section-subheading,
[data-bs-theme="dark"] .tt-pricing-section .lead,
[data-bs-theme="dark"] .tt-faq-section .lead,
[data-bs-theme="dark"] .tt-migration-section .lead,
[data-bs-theme="dark"] .tt-solutions-section .lead,
[data-bs-theme="dark"] .tt-promo-pillars-section .lead,
[data-bs-theme="dark"] .hx-campaign-subtitle,
[data-bs-theme="dark"] .tt-testimonial-section .lead {
    color: #cbd5e1 !important;
}

/* 5. Dark Mode Card Descriptions, Answers & Body Copy */
[data-bs-theme="dark"] .tt-plan-tagline,
[data-bs-theme="dark"] .tt-price-cycle,
[data-bs-theme="dark"] .tt-card-guarantee,
[data-bs-theme="dark"] .tt-faq-footer-note,
[data-bs-theme="dark"] .tt-faq-trigger .tt-faq-icon,
[data-bs-theme="dark"] .tt-migration-desc,
[data-bs-theme="dark"] .tt-pillar-desc,
[data-bs-theme="dark"] .tt-solution-desc,
[data-bs-theme="dark"] .tt-solution-features,
[data-bs-theme="dark"] .tt-faq-answer,
[data-bs-theme="dark"] .tt-testimonial-text,
[data-bs-theme="dark"] .hx-vps-period,
[data-bs-theme="dark"] .hx-vps-spec-label,
[data-bs-theme="dark"] .hx-vps-specs span.text-muted,
[data-bs-theme="dark"] .hx-vps-specs .text-muted,
[data-bs-theme="dark"] .hx-datacenter-card p.text-muted,
[data-bs-theme="dark"] .hx-datacenter-card .border-top.text-muted,
[data-bs-theme="dark"] .hx-metric-box small.text-muted,
[data-bs-theme="dark"] .hx-partner-card small.text-muted,
[data-bs-theme="dark"] .hx-comparison-table th small.text-muted,
[data-bs-theme="dark"] .hx-comparison-table td.text-muted,
[data-bs-theme="dark"] .tt-testimonial-author-role {
    color: #cbd5e1 !important;
}

/* Feature Checklist in Pricing Card */
[data-bs-theme="dark"] .tt-feature-list .tt-feature-text {
    color: #e2e8f0 !important;
}

/* Emphasized / Bold Text in Dark Mode */
[data-bs-theme="dark"] .tt-feature-list .tt-feature-text strong,
[data-bs-theme="dark"] .tt-faq-answer strong,
[data-bs-theme="dark"] .tt-solution-features strong {
    color: #ffffff !important;
}

/* Strikethrough & Muted Decorative Details */
[data-bs-theme="dark"] .tt-step-number {
    color: rgba(255, 255, 255, 0.28) !important;
}

[data-bs-theme="dark"] .hx-tld-card del.text-muted {
    color: rgba(255, 255, 255, 0.45) !important;
}

[data-bs-theme="dark"] .tt-card-divider,
[data-bs-theme="dark"] .tt-testimonial-author,
[data-bs-theme="dark"] .hx-vps-header,
[data-bs-theme="dark"] .hx-datacenter-card .border-top {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 6. Dark Mode Badges & Fast Feature Pills (Luminous & Legible) */
[data-bs-theme="dark"] .tt-faq-badge {
    background: rgba(99, 102, 241, 0.2) !important;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .tt-migration-badge {
    background: rgba(16, 185, 129, 0.2) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: #34d399 !important;
}

[data-bs-theme="dark"] .tt-solutions-badge {
    background: rgba(255, 85, 0, 0.15) !important;
    border: 1px solid rgba(255, 85, 0, 0.3) !important;
    color: #ff884d !important;
}

[data-bs-theme="dark"] .tt-pill-bdix {
    background: rgba(16, 185, 129, 0.2) !important;
    border: 1px solid rgba(16, 185, 129, 0.35) !important;
    color: #34d399 !important;
}

[data-bs-theme="dark"] .tt-pill-litespeed {
    background: rgba(99, 102, 241, 0.2) !important;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .tt-sol-badge.tt-sol-badge-green,
[data-bs-theme="dark"] .tt-sol-badge.tt-sol-badge-emerald {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

[data-bs-theme="dark"] .tt-sol-badge.tt-sol-badge-purple {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #a5b4fc !important;
}

[data-bs-theme="dark"] .tt-sol-badge.tt-sol-badge-blue {
    background: rgba(56, 189, 248, 0.2) !important;
    color: #38bdf8 !important;
}

[data-bs-theme="dark"] .tt-sol-badge.tt-sol-badge-yellow {
    background: rgba(234, 179, 8, 0.2) !important;
    color: #facc15 !important;
}

[data-bs-theme="dark"] .tt-sol-badge.tt-sol-badge-rose {
    background: rgba(244, 63, 94, 0.2) !important;
    color: #fb7185 !important;
}

[data-bs-theme="dark"] .tt-solution-link {
    color: #ff5500 !important;
}

[data-bs-theme="dark"] .tt-solution-link:hover {
    color: #ff7733 !important;
}

/* 7. Dark Mode Switchers & Interactive Controls */
[data-bs-theme="dark"] .hx-pricing-switcher,
[data-bs-theme="dark"] .hx-billing-switcher {
    background: #0b0f19 !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-bs-theme="dark"] .hx-pricing-switcher .hx-cycle-btn,
[data-bs-theme="dark"] .hx-billing-switcher button {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .hx-pricing-switcher .hx-cycle-btn:hover,
[data-bs-theme="dark"] .hx-billing-switcher button:hover {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .hx-pricing-switcher .hx-cycle-btn.active,
[data-bs-theme="dark"] .hx-billing-switcher button.active {
    background: #ff5500 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(255, 85, 0, 0.4) !important;
}

[data-bs-theme="dark"] .tt-order-btn-outline {
    border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

[data-bs-theme="dark"] .tt-order-btn-outline:hover {
    background: #ff5500 !important;
    border-color: #ff5500 !important;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(255, 85, 0, 0.4) !important;
}

/* 8. Light Mode Baseline Rules for Custom Classes (Preserves crisp light mode) */
.tt-faq-badge {
    background: rgba(79, 70, 229, 0.08);
    border: 1px solid rgba(79, 70, 229, 0.2);
    color: #4f46e5;
}

.tt-migration-badge {
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #059669;
}

.tt-solutions-badge {
    background: rgba(255, 85, 0, 0.08);
    border: 1px solid rgba(255, 85, 0, 0.2);
    color: #ff5500;
}

.tt-pill-bdix {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.tt-pill-litespeed {
    background: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
    border: 1px solid rgba(79, 70, 229, 0.2);
}

.tt-sol-badge.tt-sol-badge-green,
.tt-sol-badge.tt-sol-badge-emerald {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.tt-sol-badge.tt-sol-badge-purple {
    background: rgba(79, 70, 229, 0.1);
    color: #4f46e5;
}

.tt-sol-badge.tt-sol-badge-blue {
    background: rgba(2, 132, 199, 0.1);
    color: #0284c7;
}

.tt-sol-badge.tt-sol-badge-yellow {
    background: rgba(234, 179, 8, 0.1);
    color: #ca8a04;
}

.tt-sol-badge.tt-sol-badge-rose {
    background: rgba(225, 29, 72, 0.1);
    color: #e11d48;
}

.tt-testimonial-text {
    color: #475569;
}

.tt-testimonial-author-name {
    color: #0f172a;
}

.tt-testimonial-author-role {
    color: #64748b;
}

/* ==========================================================================
   Category Tabbed Pricing System & Domain Dual Action Styling
   ========================================================================== */

/* Pricing Category Switcher Tabs */
.hx-pricing-category-tabs {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    display: inline-flex;
    padding: 6px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.04);
}

.hx-cat-tab-btn {
    border: none !important;
    background: transparent !important;
    color: #475569 !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer;
    letter-spacing: -0.2px;
}

.hx-cat-tab-btn:hover {
    color: #0f172a !important;
    background: rgba(255, 255, 255, 0.7) !important;
}

.hx-cat-tab-btn.active {
    background: #ff5500 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(255, 85, 0, 0.35) !important;
}

/* Group Panes Animation */
.hx-pricing-group-pane {
    animation: hxPaneFadeIn 0.3s ease-out;
}

@keyframes hxPaneFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Domain Dual Pricing & Action Buttons */
.hx-dual-pricing-box {
    background: #f8fafc;
    border-color: #e2e8f0 !important;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.hx-dual-pricing-box:hover {
    border-color: #cbd5e1 !important;
}

.hx-domain-dual-btns .btn {
    letter-spacing: -0.2px;
}

.hx-btn-transfer {
    color: #059669 !important;
    border-color: #10b981 !important;
    background: rgba(16, 185, 129, 0.04) !important;
}

.hx-btn-transfer:hover {
    color: #ffffff !important;
    background: #10b981 !important;
    border-color: #10b981 !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* Dark Mode Overrides for Category Tabs & Domain Dual Actions */
[data-bs-theme="dark"] .hx-pricing-category-tabs {
    background: #0f172a !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .hx-cat-tab-btn {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .hx-cat-tab-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .hx-cat-tab-btn.active {
    background: #ff5500 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(255, 85, 0, 0.45) !important;
}

[data-bs-theme="dark"] .hx-dual-pricing-box {
    background: #131c2e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .hx-dual-pricing-box .border-bottom {
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .hx-btn-transfer {
    color: #34d399 !important;
    border-color: rgba(52, 211, 153, 0.6) !important;
    background: rgba(16, 185, 129, 0.08) !important;
}

[data-bs-theme="dark"] .hx-btn-transfer:hover {
    color: #ffffff !important;
    background: #10b981 !important;
    border-color: #10b981 !important;
}

/* Domain Deal Coupon Tags */
.hx-coupon-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(255, 85, 0, 0.08) !important;
    color: #ff5500 !important;
    border: 1px dashed rgba(255, 85, 0, 0.45) !important;
    font-family: var(--bs-font-monospace, monospace);
    font-weight: 700;
    font-size: 8.5px;
    padding: 1px 4px;
    border-radius: 4px;
    line-height: 1.2;
}

[data-bs-theme="dark"] .hx-coupon-tag {
    background: rgba(255, 85, 0, 0.16) !important;
    color: #ff7a33 !important;
    border-color: rgba(255, 85, 0, 0.5) !important;
}

.hx-coupon-tag-tfr {
    background: rgba(16, 185, 129, 0.08) !important;
    color: #059669 !important;
    border: 1px dashed rgba(16, 185, 129, 0.45) !important;
}

[data-bs-theme="dark"] .hx-coupon-tag-tfr {
    background: rgba(16, 185, 129, 0.16) !important;
    color: #34d399 !important;
    border-color: rgba(16, 185, 129, 0.5) !important;
}

/* ==========================================================================
   Hosting Pricing Section Redesign (Modern, High-Converting & Responsive)
   ========================================================================== */

/* Pricing Section Background Atmosphere */
.tt-pricing-section {
    position: relative;
    background-color: #f8fafc;
    background-image:
        radial-gradient(at 50% 0%, rgba(255, 85, 0, 0.05) 0px, transparent 60%),
        radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.03) 0px, transparent 50%);
}

[data-bs-theme="dark"] .tt-pricing-section {
    background-color: #0b0f19 !important;
    background-image:
        radial-gradient(at 50% 0%, rgba(255, 85, 0, 0.1) 0px, transparent 65%),
        radial-gradient(at 100% 100%, rgba(16, 185, 129, 0.04) 0px, transparent 50%) !important;
}

/* Pulsing Badge Dot */
.hx-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff5500;
    box-shadow: 0 0 0 0 rgba(255, 85, 0, 0.6);
    animation: hxPulseAnim 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
    display: inline-block;
}

@keyframes hxPulseAnim {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 85, 0, 0.6);
    }

    70% {
        box-shadow: 0 0 0 7px rgba(255, 85, 0, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 85, 0, 0);
    }
}

/* Category Tabs Refined */
.hx-pricing-category-tabs {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    padding: 5px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

.hx-cat-tab-btn {
    border: none !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 8px 20px !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer;
    letter-spacing: -0.2px;
}

.hx-cat-tab-btn:hover {
    color: #0f172a !important;
    background: rgba(15, 23, 42, 0.04) !important;
}

.hx-cat-tab-btn.active {
    background: linear-gradient(135deg, #ff5500 0%, #ff3b00 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(255, 85, 0, 0.35) !important;
}

[data-bs-theme="dark"] .hx-pricing-category-tabs {
    background: #131c2e !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .hx-cat-tab-btn {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .hx-cat-tab-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

[data-bs-theme="dark"] .hx-cat-tab-btn.active {
    background: linear-gradient(135deg, #ff5500 0%, #ff3b00 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 16px rgba(255, 85, 0, 0.45) !important;
}

/* Billing Cycle Switcher */
.hx-pricing-switcher {
    background: rgba(241, 245, 249, 0.85);
    border: 1px solid rgba(226, 232, 240, 0.9);
    padding: 4px;
    backdrop-filter: blur(8px);
}

.hx-cycle-btn {
    border: none !important;
    background: transparent !important;
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 16px !important;
    border-radius: 9999px !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
}

.hx-cycle-btn:hover {
    color: #0f172a !important;
}

.hx-cycle-btn.active {
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08) !important;
    font-weight: 700 !important;
}

.hx-switcher-badge-annual {
    background: rgba(255, 85, 0, 0.12);
    color: #ff5500;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border: 1px solid rgba(255, 85, 0, 0.25);
}

.hx-switcher-badge-tri {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

[data-bs-theme="dark"] .hx-pricing-switcher {
    background: rgba(15, 23, 42, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] .hx-cycle-btn {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] .hx-cycle-btn:hover {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .hx-cycle-btn.active {
    background: #1e293b !important;
    color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

[data-bs-theme="dark"] .hx-switcher-badge-annual {
    background: #ffffff;
    color: #ff7a33;
    border-color: rgba(255, 85, 0, 0.4);
}

[data-bs-theme="dark"] .hx-switcher-badge-tri {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.4);
}

/* Modern Hosting Pricing Card */
.tt-hostarise-card {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 22px !important;
    padding: 2.2rem 1.85rem !important;
    box-shadow: 0 10px 30px -8px rgba(15, 23, 42, 0.06), 0 0 0 1px rgba(226, 232, 240, 0.6) !important;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: relative;
    overflow: visible;
}

.tt-hostarise-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(255, 85, 0, 0.5), transparent);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.tt-hostarise-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 22px 45px -10px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(255, 85, 0, 0.35) !important;
    border-color: rgba(255, 85, 0, 0.35) !important;
}

.tt-hostarise-card:hover::before {
    opacity: 1;
}

/* Standout Popular Card with Radiant Glow */
.tt-hostarise-card.popular-card {
    background: linear-gradient(180deg, rgba(255, 85, 0, 0.035) 0%, #ffffff 130px) !important;
    border: 2px solid #ff5500 !important;
    box-shadow: 0 20px 50px -12px rgba(255, 85, 0, 0.22), 0 0 0 1px rgba(255, 85, 0, 0.15) !important;
    transform: translateY(-6px) !important;
}

.tt-hostarise-card.popular-card::before {
    height: 4px;
    background: linear-gradient(90deg, #ff5500, #ff8c00, #ff5500);
    opacity: 1 !important;
}

.tt-hostarise-card.popular-card:hover {
    transform: translateY(-12px) !important;
    box-shadow: 0 30px 65px -12px rgba(255, 85, 0, 0.35), 0 0 0 2px #ff5500 !important;
}

[data-bs-theme="dark"] .tt-hostarise-card {
    background: #131c2e !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

[data-bs-theme="dark"] .tt-hostarise-card:hover {
    border-color: rgba(255, 85, 0, 0.6) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5) !important;
}

[data-bs-theme="dark"] .tt-hostarise-card.popular-card {
    background: linear-gradient(180deg, rgba(255, 85, 0, 0.09) 0%, #131c2e 140px) !important;
    border: 2px solid #ff5500 !important;
    box-shadow: 0 20px 50px -10px rgba(255, 85, 0, 0.35), 0 0 0 1px rgba(255, 85, 0, 0.25) !important;
}

[data-bs-theme="dark"] .tt-hostarise-card.popular-card:hover {
    box-shadow: 0 30px 65px -10px rgba(255, 85, 0, 0.45), 0 0 0 2px #ff5500 !important;
}

/* Card Floating Badges */
.hx-card-badge-wrap {
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.hx-card-badge-popular {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #ff5500 0%, #ff2a00 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 6px 18px;
    border-radius: 9999px;
    box-shadow: 0 4px 15px rgba(255, 85, 0, 0.45);
    text-transform: uppercase;
    white-space: nowrap;
}

.hx-card-badge-domain {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 6px 18px;
    border-radius: 9999px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
    text-transform: uppercase;
    white-space: nowrap;
}

.hx-card-badge-default {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.8px;
    padding: 6px 18px;
    border-radius: 9999px;
    box-shadow: 0 4px 15px rgba(15, 23, 42, 0.3);
    text-transform: uppercase;
    white-space: nowrap;
}

/* Card Header Typography */
.tt-plan-name {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px;
    color: #0f172a !important;
}

.tt-plan-tagline {
    font-size: 12.5px !important;
    color: #64748b !important;
    min-height: auto;
}

/* Pricing Display Styling */
.hx-price-currency {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #ff5500;
    line-height: 1;
    margin-right: 2px;
    flex-shrink: 0;
}

[data-bs-theme="dark"] .hx-price-currency {
    color: #ff7a33 !important;
}

.tt-price-amount {
    font-size: 27px !important;
    font-weight: 800 !important;
    letter-spacing: -0.6px;
    line-height: 1.1;
    color: #0f172a !important;
    flex-shrink: 0;
}

.tt-price-cycle {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Coupon Voucher Pill */
.hx-plan-voucher {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 85, 0, 0.05);
    border: 1px dashed rgba(255, 85, 0, 0.4);
    color: #ff5500;
    font-family: var(--bs-font-monospace, monospace);
    font-size: 11px !important;
    font-weight: 700;
    padding: 2px 8px !important;
    border-radius: 5px;
    letter-spacing: 0.2px;
    transition: all 0.2s ease;
}

.hx-plan-voucher strong {
    color: #d93800;
}

.hx-plan-voucher:hover {
    background: rgba(255, 85, 0, 0.12);
    border-color: #ff5500;
    transform: scale(1.02);
}

[data-bs-theme="dark"] .hx-plan-voucher {
    background: rgba(255, 85, 0, 0.12) !important;
    border-color: rgba(255, 85, 0, 0.5) !important;
    color: #ff7a33 !important;
}

[data-bs-theme="dark"] .hx-plan-voucher strong {
    color: #ffa166 !important;
}

/* Fast Spec Chips */
.hx-spec-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    padding: 3.5px 10px;
    border-radius: 9px;
    letter-spacing: 0.2px;
}

.hx-spec-bdix {
    background: rgba(16, 185, 129, 0.08);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.25);
}

.hx-spec-litespeed {
    background: rgba(59, 130, 246, 0.08);
    color: #2563eb;
    border: 1px solid rgba(59, 130, 246, 0.25);
}

[data-bs-theme="dark"] .hx-spec-bdix {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border-color: rgba(52, 211, 153, 0.3) !important;
}

[data-bs-theme="dark"] .hx-spec-litespeed {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

/* Feature Checklist with Circular Badges */
.hx-check-badge {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    margin-right: 12px;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

html[dir="rtl"] .hx-check-badge {
    margin-right: 0 !important;
    margin-left: 12px !important;
}

.tt-hostarise-card:hover .hx-check-badge {
    background: #10b981;
    color: #ffffff;
    transform: scale(1.1);
}

.tt-feature-list li {
    font-size: 14px;
    color: #334155;
    padding: 3px 6px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.tt-feature-list li:hover {
    background: rgba(15, 23, 42, 0.035);
}

[data-bs-theme="dark"] .hx-check-badge {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
}

[data-bs-theme="dark"] .tt-feature-list li {
    color: #cbd5e1 !important;
}

[data-bs-theme="dark"] .tt-feature-list li:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* Order Buttons */
.tt-order-btn {
    border-radius: 9999px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    letter-spacing: 0.2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    text-decoration: none !important;
}

.tt-order-btn i {
    transition: transform 0.25s ease;
}

.tt-order-btn:hover i {
    transform: translateX(4px);
}

html[dir="rtl"] .tt-order-btn:hover i {
    transform: translateX(-4px);
}

.tt-order-btn-popular {
    background: linear-gradient(135deg, #ff6b00 0%, #ff4500 50%, #e03800 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 10px 25px -4px rgba(255, 85, 0, 0.45) !important;
}

.tt-order-btn-popular:hover {
    background: linear-gradient(135deg, #ff7a1a 0%, #ff5500 100%) !important;
    box-shadow: 0 14px 32px rgba(255, 85, 0, 0.55) !important;
    transform: translateY(-2px);
    color: #ffffff !important;
}

.tt-order-btn-outline {
    background: #0f172a !important;
    color: #ffffff !important;
    border: 1.5px solid #0f172a !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
}

.tt-order-btn-outline:hover {
    background: #ff5500 !important;
    border-color: #ff5500 !important;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 85, 0, 0.35) !important;
}

[data-bs-theme="dark"] .tt-order-btn-outline {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] .tt-order-btn-outline:hover {
    background: #ff5500 !important;
    border-color: #ff5500 !important;
    color: #ffffff !important;
}

/* Trust Guarantees Bar */
.tt-trust-bar {
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.06);
    border-radius: 16px !important;
    padding: 18px 28px !important;
}

.tt-trust-icon-box {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.hx-icon-box-amber {
    background: rgba(245, 158, 11, 0.12);
    color: #d97706;
}

.hx-icon-box-emerald {
    background: rgba(16, 185, 129, 0.12);
    color: #059669;
}

.hx-icon-box-blue {
    background: rgba(59, 130, 246, 0.12);
    color: #2563eb;
}

.hx-icon-box-cyan {
    background: rgba(6, 182, 212, 0.12);
    color: #0891b2;
}

.tt-trust-text {
    font-size: 13.5px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
}

.tt-trust-sub {
    font-size: 12px;
    color: #64748b;
}

[data-bs-theme="dark"] .tt-trust-bar {
    background: #131c2e !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

[data-bs-theme="dark"] .tt-trust-text {
    color: #ffffff !important;
}

[data-bs-theme="dark"] .tt-trust-sub {
    color: #94a3b8 !important;
}

/* ==========================================================================
   Store Mega Dropdown
   ========================================================================== */
#Primary_Navbar-Store {
    position: relative !important;
}

#Primary_Navbar-Store ul.dropdown-menu,
#Primary_Navbar-Store ul.hx-store-dropdown-panel {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    left: 0 !important;
    z-index: 1060 !important;
    width: 680px !important;
    min-width: 680px !important;
    max-width: 90vw !important;
    padding: 14px !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: 0 22px 50px rgba(16, 40, 47, 0.16) !important;
    margin: 0 !important;
}

#Primary_Navbar-Store ul.dropdown-menu.show,
#Primary_Navbar-Store ul.hx-store-dropdown-panel.show {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 10px !important;
}

#Primary_Navbar-Store .dropdown-menu li,
#Primary_Navbar-Store .hx-store-dropdown-panel li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
    flex: none !important;
}

/* Remove any injected chevrons from any pseudo-elements */
.tt-main-header #Primary_Navbar-Store .dropdown-menu li a:before,
.tt-main-header #Primary_Navbar-Store .dropdown-menu li a:after,
.tt-main-header #Primary_Navbar-Store .hx-store-dropdown-panel li a:before,
.tt-main-header #Primary_Navbar-Store .hx-store-dropdown-panel li a:after,
.tt-main-header #Primary_Navbar-Store li a:before,
.tt-main-header #Primary_Navbar-Store li a:after,
#Primary_Navbar-Store .dropdown-menu a:before,
#Primary_Navbar-Store .dropdown-menu a:after,
#Primary_Navbar-Store .dropdown-menu li:before,
#Primary_Navbar-Store .dropdown-menu li:after,
#Primary_Navbar-Store .dropdown-menu li a:before,
#Primary_Navbar-Store .dropdown-menu li a:after,
#Primary_Navbar-Store .hx-store-sub:before,
#Primary_Navbar-Store .hx-store-sub:after {
    display: none !important;
    content: none !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
}

#Primary_Navbar-Store .hx-store-featured {
    grid-column: 1 / -1 !important;
    margin-bottom: 4px !important;
}

#Primary_Navbar-Store .hx-store-featured .hx-store-sub {
    background: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.08) !important;
    border: 1px solid rgba(var(--hx-primary-rgb, 255, 85, 0), 0.15) !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
}

#Primary_Navbar-Store .hx-store-featured .hx-store-sub:hover {
    background: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.14) !important;
    transform: none !important;
}

#Primary_Navbar-Store .hx-store-divider {
    grid-column: 1 / -1 !important;
    height: 1px !important;
    margin: 6px 2px 8px 2px !important;
    background: #eef2f6 !important;
    border: none !important;
}

#Primary_Navbar-Store .hx-store-sub {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 8px 10px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    color: #1e293b !important;
    background: transparent !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    position: static !important;
    margin-left: 0 !important;
}

#Primary_Navbar-Store .hx-store-sub:hover,
#Primary_Navbar-Store .hx-store-sub.is-current {
    background: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.08) !important;
    color: var(--hx-primary, #ff5500) !important;
    transform: translateX(4px) !important;
    margin-left: 0 !important;
}

#Primary_Navbar-Store .hx-store-sub-icon {
    display: inline-flex !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.12) !important;
    color: var(--hx-primary, #ff5500) !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
}

#Primary_Navbar-Store .hx-store-sub:hover .hx-store-sub-icon {
    background: var(--hx-primary, #ff5500) !important;
    color: #ffffff !important;
}

#Primary_Navbar-Store .hx-store-sub-copy {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
}

#Primary_Navbar-Store .hx-store-sub-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #1e293b !important;
    transition: color 0.15s ease !important;
}

#Primary_Navbar-Store .hx-store-sub:hover .hx-store-sub-title {
    color: var(--hx-primary, #ff5500) !important;
}

#Primary_Navbar-Store .hx-store-sub-desc {
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
}

/* Dark mode */
[data-bs-theme="dark"] #Primary_Navbar-Store ul.dropdown-menu,
body[data-bs-theme="dark"] #Primary_Navbar-Store ul.dropdown-menu,
[data-bs-theme="dark"] #Primary_Navbar-Store ul.hx-store-dropdown-panel,
body[data-bs-theme="dark"] #Primary_Navbar-Store ul.hx-store-dropdown-panel {
    background: #111827 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.6) !important;
}

[data-bs-theme="dark"] #Primary_Navbar-Store .hx-store-sub-title,
body[data-bs-theme="dark"] #Primary_Navbar-Store .hx-store-sub-title {
    color: #f1f5f9 !important;
}

[data-bs-theme="dark"] #Primary_Navbar-Store .hx-store-sub-desc,
body[data-bs-theme="dark"] #Primary_Navbar-Store .hx-store-sub-desc {
    color: #94a3b8 !important;
}

[data-bs-theme="dark"] #Primary_Navbar-Store .hx-store-divider,
body[data-bs-theme="dark"] #Primary_Navbar-Store .hx-store-divider {
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-bs-theme="dark"] #Primary_Navbar-Store .hx-store-sub:hover,
body[data-bs-theme="dark"] #Primary_Navbar-Store .hx-store-sub:hover,
[data-bs-theme="dark"] #Primary_Navbar-Store .hx-store-sub.is-current,
body[data-bs-theme="dark"] #Primary_Navbar-Store .hx-store-sub.is-current {
    background: rgba(255, 255, 255, 0.07) !important;
}

/* ==========================================================================
   Store Product Cards, Dual Buttons & Segmented Cycle Switcher
   ========================================================================== */
.hx-plan-card {
    background: #ffffff !important;
    border: 1px dashed #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    padding: 11px 22px 22px !important;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.hx-plan-card.has-free-domain {
    border: 2px solid #10b981 !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.12) !important;
}

.hx-plan-card.has-free-domain:hover {
    border-color: #059669 !important;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.2) !important;
}

.hx-badge-freedomain,
.hx-featured-pill .badge.hx-badge-freedomain {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    padding: 4px 13px !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.hx-freedomain-alert {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(5, 150, 105, 0.12) 100%) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    margin: 8px 0 10px !important;
}

.hx-freedomain-alert span {
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: #047857 !important;
}

.hx-freedomain-alert i {
    font-size: 13.5px !important;
    color: #10b981 !important;
}

.hx-price-strike-wrap {
    margin-bottom: 2px !important;
}

.hx-price-strike {
    font-size: 14px !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    font-weight: 600 !important;
}

.hx-pill-save {
    font-size: 10px !important;
    padding: 2px 7px !important;
    border-radius: 999px !important;
    letter-spacing: 0.04em !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25) !important;
}

.hx-features-list .hx-feature-free-domain {
    background: rgba(16, 185, 129, 0.08) !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    margin-bottom: 5px !important;
    border: 1px dashed rgba(16, 185, 129, 0.35) !important;
}

.hx-feature-free-domain .hx-feature-icon {
    color: #10b981 !important;
    font-size: 13px !important;
}

.hx-feature-free-domain .hx-feat-text {
    color: #065f46 !important;
    font-weight: 700 !important;
}

.hx-plan-card::before,
.hx-plan-card::after {
    display: none !important;
    content: none !important;
}

.hx-plan-content-wrap {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    width: 100% !important;
}

.hx-order-btn-bottom-wrap {
    margin-top: auto !important;
    padding-top: 8px !important;
    border-top: 1px dashed #e2e8f0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
}

.hx-plan-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1) !important;
    border-color: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.35) !important;
}

.hx-plan-card.is-featured {
    border: 2.5px solid var(--hx-primary, #ff5500) !important;
    box-shadow: 0 12px 32px rgba(var(--hx-primary-rgb, 255, 85, 0), 0.2) !important;
    position: relative !important;
    z-index: 2 !important;
}

.hx-plan-card.is-featured:hover {
    border-color: #ea580c !important;
    box-shadow: 0 20px 42px rgba(var(--hx-primary-rgb, 255, 85, 0), 0.28) !important;
}

@media (min-width: 992px) {
    .hx-plan-card.is-featured {
        transform: translateY(-8px) scale(1.02) !important;
        z-index: 5 !important;
    }
    .hx-plan-card.is-featured:hover {
        transform: translateY(-12px) scale(1.03) !important;
    }
}

.hx-plan-card.is-featured .hx-price-hero-box {
    background: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.08) !important;
    border-color: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.28) !important;
}

.hx-plan-card.is-featured .hx-btn-top {
    box-shadow: 0 5px 18px rgba(var(--hx-primary-rgb, 255, 85, 0), 0.42) !important;
}

.hx-featured-pill {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    max-width: 95% !important;
}

.hx-featured-pill .badge,
.hx-badge-popular,
.hx-badge-custom {
    background: linear-gradient(135deg, var(--hx-primary, #ff5500) 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    padding: 4px 13px !important;
    border-radius: 9999px !important;
    box-shadow: 0 4px 14px rgba(var(--hx-primary-rgb, 255, 85, 0), 0.4) !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

.hx-plan-kicker {
    display: none !important;
}

.hx-product-name {
    margin-top: 4px !important;
    margin-bottom: 6px !important;
}

.hx-product-name h4 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #0f172a;
    letter-spacing: -0.01em;
    margin-bottom: 0 !important;
}

/* Price Hero Container - Spaced & Balanced */
.hx-price-hero-box {
    background: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.04) !important;
    border: 1px solid rgba(var(--hx-primary-rgb, 255, 85, 0), 0.12) !important;
    border-radius: 10px !important;
    padding: 10px 14px 9px !important;
    margin: 10px 0 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: auto !important;
    transition: all 0.25s ease;
}

.hx-price-amount {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    transition: opacity 0.15s ease;
}

.hx-price-term {
    display: none !important;
}

.hx-btn-order-now {
    transition: all 0.22s ease !important;
}

.hx-btn-top {
    background-color: var(--hx-primary, #ff5500) !important;
    border-color: var(--hx-primary, #ff5500) !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 8.5px 16px !important;
    border-radius: 8px !important;
    box-shadow: 0 3px 12px rgba(var(--hx-primary-rgb, 255, 85, 0), 0.25) !important;
}

.hx-btn-top:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 16px rgba(var(--hx-primary-rgb, 255, 85, 0), 0.35) !important;
    background-color: var(--hx-primary, #ff5500) !important;
    border-color: var(--hx-primary, #ff5500) !important;
    color: #ffffff !important;
}

.hx-btn-bottom {
    color: var(--hx-primary, #ff5500) !important;
    border-color: var(--hx-primary, #ff5500) !important;
    background: transparent !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 7px 14px !important;
    border-radius: 8px !important;
}

.hx-btn-bottom:hover {
    background-color: var(--hx-primary, #ff5500) !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(var(--hx-primary-rgb, 255, 85, 0), 0.25) !important;
}

/* Product Tagline */
.hx-plan-tagline {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    line-height: 1.45 !important;
    margin: 8px 0 10px !important;
}

/* Product Short Description Accordion */
.hx-plan-about {
    background: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.04) !important;
    border: 1px solid rgba(var(--hx-primary-rgb, 255, 85, 0), 0.15) !important;
    border-radius: 8px !important;
    margin: 8px 0 12px !important;
    overflow: hidden !important;
    text-align: left !important;
    transition: all 0.2s ease !important;
}

.hx-plan-about-summary {
    padding: 6px 10px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--hx-primary, #ff5500) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    outline: none !important;
    list-style: none !important;
    user-select: none !important;
}

.hx-plan-about-summary::-webkit-details-marker {
    display: none !important;
}

.hx-plan-about-indicator::before {
    content: "+";
    font-size: 14px;
    font-weight: 700;
    color: var(--hx-primary, #ff5500);
}

.hx-plan-about[open] .hx-plan-about-indicator::before {
    content: "−";
    font-size: 14px;
    font-weight: 700;
    color: var(--hx-primary, #ff5500);
}

.hx-plan-about-body {
    padding: 8px 10px 10px !important;
    font-size: 12px !important;
    color: #475569 !important;
    line-height: 1.45 !important;
    border-top: 1px dashed rgba(var(--hx-primary-rgb, 255, 85, 0), 0.15) !important;
    background: rgba(255, 255, 255, 0.7) !important;
}

/* Feature List Section */
.hx-plan-features {
    border-top: 1px dashed #e2e8f0 !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
}

.hx-features-heading {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 8px !important;
}

.hx-features-list {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.hx-features-list .hx-feature-item,
.hx-features-list li {
    display: flex !important;
    align-items: flex-start !important;
    padding: 5px 5px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #1e293b !important;
    font-weight: 500 !important;
    border-bottom: 1px solid #f8fafc !important;
}

.hx-feature-icon {
    color: var(--hx-primary, #ff5500) !important;
    font-size: 11.5px !important;
    margin-right: 7px !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
}

.hx-feat-text {
    font-size: 12.5px !important;
    color: #1e293b !important;
}

.hx-feat-text strong,
.hx-feature-item strong {
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* Dark Mode Support */
[data-theme="dark"] .hx-plan-tagline,
.dark-mode .hx-plan-tagline {
    color: #f1f5f9 !important;
}

[data-theme="dark"] .hx-plan-about,
.dark-mode .hx-plan-about {
    background: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.08) !important;
    border-color: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.28) !important;
}

[data-theme="dark"] .hx-plan-about-body,
.dark-mode .hx-plan-about-body {
    background: rgba(15, 23, 42, 0.6) !important;
    color: #cbd5e1 !important;
    border-top-color: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.28) !important;
}

[data-theme="dark"] .hx-features-heading,
.dark-mode .hx-features-heading {
    color: #f8fafc !important;
}

[data-theme="dark"] .hx-features-list .hx-feature-item,
.dark-mode .hx-features-list .hx-feature-item,
[data-theme="dark"] .hx-features-list li,
.dark-mode .hx-features-list li {
    color: #cbd5e1 !important;
    border-bottom-color: #334155 !important;
}

[data-theme="dark"] .hx-feat-text,
.dark-mode .hx-feat-text {
    color: #cbd5e1 !important;
}

[data-theme="dark"] .hx-feat-text strong,
.dark-mode .hx-feat-text strong,
[data-theme="dark"] .hx-feature-item strong,
.dark-mode .hx-feature-item strong {
    color: #ffffff !important;
}

/* Segmented Billing Cycle Switcher (HostXing-inspired Modern Pill Layout) */
.hx-billing-cycle-toggle-wrapper {
    margin: 28px 0 34px !important;
    text-align: center !important;
}

.plan-billing-toggle,
.hx-billing-cycle-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 6px 8px 6px 20px !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
}

.plan-billing-toggle-label {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-right: 18px !important;
    letter-spacing: -0.01em !important;
    white-space: nowrap !important;
}

.plan-billing-toggle-options {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
}

.billing-cycle-option,
.hx-cycle-btn {
    border: none !important;
    background: transparent !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 8px 18px !important;
    border-radius: 8px !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

.billing-cycle-option:hover,
.hx-cycle-btn:hover {
    color: var(--hx-primary, #ff5500) !important;
    background: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.08) !important;
}

.billing-cycle-option.is-active,
.hx-cycle-btn.is-active {
    background: var(--hx-primary, #ff5500) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(var(--hx-primary-rgb, 255, 85, 0), 0.32) !important;
}

/* Dark Mode for Switcher */
[data-theme="dark"] .plan-billing-toggle,
.dark-mode .plan-billing-toggle,
[data-theme="dark"] .hx-billing-cycle-toggle,
.dark-mode .hx-billing-cycle-toggle {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

[data-theme="dark"] .plan-billing-toggle-label,
.dark-mode .plan-billing-toggle-label {
    color: #f8fafc !important;
}

[data-theme="dark"] .billing-cycle-option,
.dark-mode .billing-cycle-option,
[data-theme="dark"] .hx-cycle-btn,
.dark-mode .hx-cycle-btn {
    color: #94a3b8 !important;
}

[data-theme="dark"] .billing-cycle-option:hover,
.dark-mode .billing-cycle-option:hover,
[data-theme="dark"] .hx-cycle-btn:hover,
.dark-mode .hx-cycle-btn:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .billing-cycle-option.is-active,
.dark-mode .billing-cycle-option.is-active,
[data-theme="dark"] .hx-cycle-btn.is-active,
.dark-mode .hx-cycle-btn.is-active {
    background: var(--hx-primary, #ff5500) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(var(--hx-primary-rgb, 255, 85, 0), 0.45) !important;
}

/* Modernized Sidebar */
.hx-modern-sidebar-card {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden;
}

.hx-sidebar-header {
    background: #fafafa !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.hx-sidebar-header .panel-title {
    font-size: 15px !important;
    color: #0f172a !important;
}

.hx-sidebar-item {
    border: none !important;
    border-radius: 10px !important;
    margin: 3px 0 !important;
    padding: 5px 7px !important;
    color: #334155 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
}

.hx-sidebar-item:hover {
    background: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.08) !important;
    color: var(--hx-primary, #ff5500) !important;
    transform: translateX(4px);
}

.hx-sidebar-item.active {
    background: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.1) !important;
    color: var(--hx-primary, #ff5500) !important;
    font-weight: 700 !important;
    border-left: 3px solid var(--hx-primary, #ff5500) !important;
}

.hx-sidebar-item-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: rgba(var(--hx-primary-rgb, 255, 85, 0), 0.12) !important;
    color: var(--hx-primary, #ff5500) !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.hx-sidebar-item:hover .hx-sidebar-item-icon,
.hx-sidebar-item.active .hx-sidebar-item-icon {
    background: var(--hx-primary, #ff5500) !important;
    color: #ffffff !important;
}

.hx-sidebar-arrow {
    font-size: 11px !important;
    color: #94a3b8 !important;
    transition: transform 0.2s ease !important;
}

.hx-sidebar-item:hover .hx-sidebar-arrow {
    color: var(--hx-primary, #ff5500) !important;
    transform: translateX(2px);
}

/* ==========================================================================
   Homepage Compact Spacing & Proportional Layout Refinements
   ========================================================================== */
/* Spacing for Hosting Plans Pricing Section */
.tt-pricing-section,
#pricingSection {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

@media (max-width: 991.98px) {
    .tt-pricing-section,
    #pricingSection {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }
}

.hx-campaign-section,
.hx-domain-deals-section,
.hx-vps-section,
.tt-migration-section,
.hx-comparison-section,
.tt-promo-pillars-section,
.hx-network-section,
.tt-solutions-section,
.tt-faq-section,
.hx-partners-section,
.tt-testimonial-section,
#testimonialsSection,
#ctaSection {
    padding-top: 2.75rem !important;
    padding-bottom: 2.75rem !important;
}

@media (max-width: 991.98px) {
    .hx-campaign-section,
    .hx-domain-deals-section,
    .hx-vps-section,
    .tt-migration-section,
    .hx-comparison-section,
    .tt-promo-pillars-section,
    .hx-network-section,
    .tt-solutions-section,
    .tt-faq-section,
    .hx-partners-section,
    .tt-testimonial-section,
    #testimonialsSection,
    #ctaSection {
        padding-top: 1.75rem !important;
        padding-bottom: 1.75rem !important;
    }
}

/* Pricing Section Headers & Spacing */
.tt-pricing-section .row.justify-content-center.text-center {
    margin-bottom: 2rem !important;
}

.hx-domain-deals-section .row.justify-content-center.text-center,
.hx-vps-section .row.justify-content-center.text-center,
.tt-migration-section .row.justify-content-center.text-center,
.hx-comparison-section .row.justify-content-center.text-center,
.hx-network-section .row.justify-content-center.text-center,
.tt-solutions-section .row.justify-content-center.text-center,
.tt-faq-section .row.justify-content-center.text-center {
    margin-bottom: 1.25rem !important;
}

.tt-pricing-heading {
    margin-bottom: 0.6rem !important;
    font-size: 30px !important;
    font-weight: 800 !important;
}

.hx-section-heading {
    margin-bottom: 0.35rem !important;
    font-size: 26px !important;
    font-weight: 800 !important;
}

.tt-pricing-section .tt-section-subtitle {
    margin-bottom: 1.25rem !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

.hx-section-subheading {
    margin-bottom: 0.75rem !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.tt-pricing-pill {
    margin-bottom: 0.75rem !important;
    padding: 4px 14px !important;
    font-size: 12.5px !important;
}

.hx-section-pill {
    margin-bottom: 0.5rem !important;
    padding: 3px 12px !important;
    font-size: 12px !important;
}

.hx-pricing-category-tabs {
    margin-bottom: 1rem !important;
    padding: 6px !important;
    gap: 8px !important;
}

.hx-pricing-category-tabs .hx-cat-tab-btn {
    padding: 7px 18px !important;
    font-size: 14px !important;
}

.hx-pricing-switcher {
    margin-bottom: 1.25rem !important;
    padding: 5px !important;
}

.hx-pricing-switcher .hx-cycle-btn {
    padding: 6px 16px !important;
    font-size: 13.5px !important;
}

/* Card Row Vertical Spacing */
.hx-pricing-group-pane .row > [class*="col-"] {
    margin-bottom: 2.25rem !important;
}

/* Trust Bar Compactness */
.tt-trust-bar {
    padding: 10px 18px !important;
    border-radius: 10px !important;
}

.tt-trust-icon-box {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
}

.tt-trust-text {
    font-size: 12.5px !important;
}

.tt-trust-sub {
    font-size: 11px !important;
}

.tt-card-guarantee {
    font-size: 11px !important;
}

/* ==========================================================================
   Client Area Alert Buttons & Overdue Invoice Banner Refinements
   ========================================================================== */
.btn-xs,
.btn.btn-xs {
    padding: 3px 10px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    border-radius: 4px !important;
}

#alertOverdueInvoice,
#alertUnpaidInvoice {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
}

#alertOverdueInvoice .float-right,
#alertUnpaidInvoice .float-right,
#alertOverdueInvoice .float-end,
#alertUnpaidInvoice .float-end {
    float: none !important;
    margin-left: auto !important;
    display: flex !important;
    align-items: center !important;
}

#alertOverdueInvoice .btn,
#alertUnpaidInvoice .btn {
    padding: 5px 14px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08) !important;
}

#alertOverdueInvoice .btn.btn-default,
#alertOverdueInvoice .btn-default {
    background-color: #ffffff !important;
    color: #dc2626 !important;
    border: 1px solid #f87171 !important;
}

#alertOverdueInvoice .btn.btn-default:hover,
#alertOverdueInvoice .btn-default:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
    box-shadow: 0 2px 6px rgba(220, 38, 38, 0.25) !important;
}

#alertUnpaidInvoice .btn.btn-default,
#alertUnpaidInvoice .btn-default {
    background-color: #ffffff !important;
    color: #d97706 !important;
    border: 1px solid #fbbf24 !important;
}

#alertUnpaidInvoice .btn.btn-default:hover,
#alertUnpaidInvoice .btn-default:hover {
    background-color: #d97706 !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
    box-shadow: 0 2px 6px rgba(217, 119, 6, 0.25) !important;
}

[data-bs-theme="dark"] #alertOverdueInvoice .btn.btn-default,
[data-theme="dark"] #alertOverdueInvoice .btn.btn-default,
.dark-mode #alertOverdueInvoice .btn.btn-default {
    background-color: #1e293b !important;
    color: #f87171 !important;
    border-color: #ef4444 !important;
}

[data-bs-theme="dark"] #alertOverdueInvoice .btn.btn-default:hover,
[data-theme="dark"] #alertOverdueInvoice .btn-default:hover,
.dark-mode #alertOverdueInvoice .btn.btn-default:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
}

[data-bs-theme="dark"] #alertUnpaidInvoice .btn.btn-default,
[data-theme="dark"] #alertUnpaidInvoice .btn.btn-default,
.dark-mode #alertUnpaidInvoice .btn.btn-default {
    background-color: #1e293b !important;
    color: #fbbf24 !important;
    border-color: #f59e0b !important;
}

[data-bs-theme="dark"] #alertUnpaidInvoice .btn.btn-default:hover,
[data-theme="dark"] #alertUnpaidInvoice .btn-default:hover,
.dark-mode #alertUnpaidInvoice .btn.btn-default:hover {
    background-color: #d97706 !important;
    color: #ffffff !important;
}