:root {
    --hx-nav-height: 91px;
    --hx-ink: #393939;
    --hx-ink-2: #343c54;
    --hx-deep: #071b17;
    --hx-deep-2: #144e43;
    --hx-mint: #35ad7c;
    --hx-mint-2: #70d4a2;
    --hx-bright: #42e39e;
    --hx-cyan: #24e7f2;
    --hx-surface: #f7fffe;
    --hx-surface-2: #ebf9f7;
    --hx-line: rgba(10, 88, 75, 0.22);
    --hx-shadow: 0 18px 45px rgba(7, 49, 43, 0.14);
}

/* Hostidex client area dashboard */
.hx-template-clientareahome #main-body,
.hx-client-dashboard {
    background: #f1fbf8;
}

.hx-template-clientareahome #main-body {
    padding: 0;
}

.hx-client-dashboard .container,
.hx-template-clientareahome .container {
    max-width: 1400px;
}

.hx-client-panel-head .container {
    max-width: 1400px;
}

.hx-client-hero {
    background: #fafffd;
    padding: 24px 0 22px;
}

.hx-client-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
}

.hx-client-profile {
    display: grid;
    grid-template-columns: 66px auto auto;
    align-items: center;
    gap: 14px;
}

.hx-client-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    border: 2px solid #55d79d;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
}

.hx-client-avatar img {
    width: 34px;
    height: 34px;
    object-fit: contain;
}

.hx-client-profile h1 {
    margin: 0;
    color: #253d38;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.15;
}

.hx-client-profile strong {
    display: inline-flex;
    margin-top: 3px;
    padding: 4px 10px;
    border-radius: 5px;
    background: rgba(92, 190, 149, 0.18);
    color: #236c58;
    font-size: 13px;
    font-weight: 500;
}

.hx-client-profile-actions {
    display: grid;
    gap: 6px;
    padding-left: 8px;
}

.hx-client-profile-actions a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #2d443f;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.hx-client-profile-actions a:hover {
    color: #178c69;
    text-decoration: none;
}

.hx-client-profile-actions img {
    width: 15px;
    height: 15px;
}

.hx-client-wallet {
    display: grid;
    grid-template-columns: 48px auto auto;
    align-items: center;
    column-gap: 12px;
}

.hx-client-wallet img {
    grid-row: span 2;
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.hx-client-wallet span {
    color: #34514a;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.hx-client-wallet strong {
    color: #18342f;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.1;
}

.hx-client-wallet a {
    grid-column: 3;
    grid-row: 1 / span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 17px;
    border-radius: 5px;
    background: #0e554a;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.hx-client-wallet a:hover {
    background: #16483d;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(12, 73, 62, 0.18);
}

.hx-client-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

.hx-client-stat-grid article {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    padding: 10px 12px;
    border: 1px solid rgba(42, 181, 130, 0.18);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.72);
}

.hx-client-stat-grid span,
.hx-client-card-head h2 span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 5px;
    background: #67be95;
    color: #fff;
    overflow: hidden;
}

.hx-client-stat-grid span img,
.hx-client-card-head h2 span img {
    width: 26px;
    height: 26px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.hx-client-stat-grid span i,
.hx-client-card-head h2 span i {
    color: #fff;
    font-size: 22px;
}

.hx-client-stat-grid strong {
    display: block;
    color: #33433f;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
}

.hx-client-stat-grid em {
    display: block;
    margin-top: 3px;
    color: #1d453d;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
}

.hx-client-stat-grid a,
.hx-client-card-head > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 31px;
    padding: 0 16px;
    border-radius: 5px;
    background: #69be96;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.hx-client-stat-grid a:hover,
.hx-client-card-head > a:hover {
    background: #178c69;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(23, 140, 105, 0.16);
}

.hx-client-whmcs-menu {
    background: #377b5d;
}

.hx-client-whmcs-menu .container {
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hx-client-nav-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 5px 16px;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hx-client-nav-list > li {
    position: relative;
    list-style: none;
}

.hx-client-panel-main {
    background: #f1fbf8;
    padding: 34px 0 48px;
}

.hx-client-panel-main > .container {
    max-width: 1400px;
}

.hx-client-panel-main .primary-content {
    width: 100%;
    color: #30443f;
}

.hx-client-panel-main .primary-content > h1,
.hx-client-panel-main .primary-content > h2,
.hx-client-panel-main .page-header h1 {
    margin: 0 0 20px;
    color: #253d38;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.18;
}

.hx-client-panel-main .card,
.hx-client-panel-main .panel,
.hx-client-panel-main .tile,
.hx-client-panel-main .well,
.hx-client-panel-main .table-container {
    overflow: hidden;
    border: 1px solid #ccefe7;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

.hx-client-panel-main .card-header,
.hx-client-panel-main .panel-heading {
    border-bottom: 1px solid #d7f0eb;
    background: #f8fffd;
    color: #253d38;
    font-size: 16px;
    font-weight: 600;
}

.hx-client-panel-main .card-body,
.hx-client-panel-main .panel-body {
    color: #30443f;
}

.hx-client-panel-main table.table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #30443f;
    background: #fff;
}

.hx-client-panel-main table.table thead th,
.hx-client-panel-main table.table thead td {
    border: 0;
    border-bottom: 1px solid #cbeee6;
    background: linear-gradient(180deg, #f7fffd 0%, #e8fbf6 100%);
    color: #16483d;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    padding: 15px 18px;
    vertical-align: middle;
    white-space: nowrap;
}

.hx-client-panel-main table.table tbody td,
.hx-client-panel-main table.table tbody th {
    border-color: #e0f2ee;
    color: #30443f;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    padding: 14px 18px;
    vertical-align: middle;
}

.hx-client-panel-main table.table tbody tr:last-child td,
.hx-client-panel-main table.table tbody tr:last-child th {
    border-bottom: 0;
}

.hx-client-panel-main table.table tbody tr:hover {
    background: #f7fffd;
}

.hx-client-panel-main table.table a:not(.btn) {
    color: #147c61;
    font-weight: 500;
    text-decoration: none;
}

.hx-client-panel-main table.table a:not(.btn):hover {
    color: #0f5f4d;
    text-decoration: none;
}

.hx-client-panel-main .dataTables_wrapper .row {
    align-items: center;
    gap: 12px 0;
    margin-bottom: 12px;
}

.hx-client-panel-main .dataTables_wrapper .row:last-child {
    margin-top: 14px;
    margin-bottom: 0;
}

.hx-client-panel-main .dataTables_info {
    color: #60736e;
    font-size: 13px;
}

.hx-client-panel-main .dataTables_filter label,
.hx-client-panel-main .dataTables_length label {
    color: #5b6e69;
    font-size: 13px;
    font-weight: 500;
}

.hx-client-panel-main .dataTables_filter input,
.hx-client-panel-main .dataTables_length select,
.hx-client-panel-main .form-control {
    min-height: 42px;
    border: 1px solid #cfe8e3;
    border-radius: 7px;
    color: #263d38;
    background: #fbfffe;
    box-shadow: none;
}

.hx-client-panel-main .form-control:focus,
.hx-client-panel-main .dataTables_filter input:focus {
    border-color: #65bf96;
    box-shadow: 0 0 0 3px rgba(101, 191, 150, 0.15);
}

.hx-client-panel-main .dataTables_filter input {
    min-width: 220px;
    margin-left: 8px;
}

.hx-client-panel-main .dataTables_length select {
    margin: 0 6px;
}

.hx-client-panel-main .btn {
    min-height: 38px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.hx-client-panel-main .btn-primary,
.hx-client-panel-main .btn-success {
    border-color: transparent;
    background: linear-gradient(180deg, #18825a 0%, #38b07c 100%);
    color: #fff;
    box-shadow: none;
}

.hx-client-panel-main .btn-primary:hover,
.hx-client-panel-main .btn-success:hover {
    border-color: transparent;
    background: linear-gradient(180deg, #166c50 0%, #2f9d70 100%);
    color: #fff;
    box-shadow: 0 8px 18px rgba(23, 140, 105, 0.14);
}

.hx-client-panel-main .btn-default,
.hx-client-panel-main .btn-secondary,
.hx-client-panel-main .btn-light {
    border-color: #ccefe7;
    background: #fff;
    color: #174f43;
}

.hx-client-panel-main .btn-default:hover,
.hx-client-panel-main .btn-secondary:hover,
.hx-client-panel-main .btn-light:hover {
    border-color: #93dac6;
    background: #f0fffc;
    color: #123d35;
}

.hx-client-panel-main .alert {
    border-radius: 8px;
    border-width: 1px;
    font-size: 14px;
}

.hx-client-panel-main .alert-info {
    border-color: #ccefe7;
    background: #f0fffc;
    color: #174f43;
}

.hx-client-panel-main .list-group-item {
    border-color: #e0f2ee;
    color: #30443f;
    font-size: 14px;
}

.hx-client-panel-main .list-group-item.active {
    border-color: #377b5d;
    background: #377b5d;
    color: #fff;
}

.hx-client-panel-main .sidebar {
    margin-bottom: 18px;
}

.hx-client-panel-main .sidebar .card,
.hx-client-panel-main .sidebar .panel,
.hx-client-panel-main .sidebar .list-group {
    overflow: hidden;
    border: 1px solid #ccefe7;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

.hx-client-panel-main .sidebar .card-header,
.hx-client-panel-main .sidebar .panel-heading {
    border-bottom: 1px solid #d7f0eb;
    background: #f8fffd;
    color: #253d38;
    font-size: 15px;
    font-weight: 600;
}

.hx-client-panel-main .sidebar a {
    color: #294941;
    text-decoration: none;
}

.hx-client-panel-main .sidebar a:hover {
    color: #178c69;
    text-decoration: none;
}

.hx-client-panel-main .primary-content img {
    max-width: 100%;
    height: auto;
}

.hx-client-panel-main .primary-content img[src*="modules/servers/"],
.hx-client-panel-main .primary-content img[src*="/modules/servers/"] {
    max-width: 54px;
    max-height: 54px;
    object-fit: contain;
}

.hx-client-nav-list > li > a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 8px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.hx-client-nav-list > li > a:hover {
    color: #e7fff9;
    text-decoration: none;
}

.hx-client-nav-list .dropdown-menu {
    min-width: 230px;
    margin-top: 8px;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    background: #f0fffc;
    box-shadow: 0 18px 40px rgba(7, 58, 49, 0.18);
}

.hx-client-nav-list .dropdown-item,
.hx-client-nav-list .dropdown-item a {
    color: #153f37;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.hx-client-nav-list .dropdown-item {
    border-radius: 7px;
    padding: 6px 8px;
}

.hx-client-nav-list .dropdown-item:hover {
    background: #dff8f2;
}

.hx-client-content {
    padding: 40px 15px 44px;
}

.hx-client-service-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.hx-client-service-page-head span {
    display: block;
    margin-bottom: 4px;
    color: #54b58b;
    font-size: 13px;
    font-weight: 500;
}

.hx-client-service-page-head h2 {
    margin: 0;
    color: #253d38;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
}

.hx-client-service-page-head p {
    margin: 8px 0 0;
    color: #5d706b;
    font-size: 15px;
}

.hx-client-service-page-head > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    background: linear-gradient(180deg, #18825a 0%, #38b07c 100%);
    text-decoration: none;
}

.hx-client-service-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}

.hx-client-service-tabs a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid rgba(22, 102, 83, 0.18);
    border-radius: 8px;
    color: #27443d;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.hx-client-service-tabs a:hover,
.hx-client-service-tabs a.is-active {
    color: #fff;
    border-color: transparent;
    background: #377b5d;
}

.hx-client-service-tabs em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 7px;
    border-radius: 999px;
    color: inherit;
    background: rgba(255, 255, 255, 0.24);
    font-style: normal;
    font-size: 12px;
}

.hx-client-service-list-card {
    min-height: 380px;
}

.hx-client-service-list {
    display: grid;
    gap: 10px;
}

.hx-client-service-row {
    display: grid;
    grid-template-columns: minmax(240px, 1.35fr) minmax(160px, 0.75fr) minmax(105px, 0.45fr) minmax(110px, 0.45fr) auto;
    align-items: center;
    gap: 14px;
    min-height: 74px;
    padding: 14px 16px;
    border: 1px solid rgba(22, 102, 83, 0.12);
    border-radius: 8px;
    color: #253d38;
    background: #fbfffe;
    text-decoration: none;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.hx-client-service-row:hover {
    transform: translateY(-2px);
    border-color: rgba(42, 174, 126, 0.32);
    box-shadow: 0 12px 28px rgba(7, 49, 43, 0.08);
    text-decoration: none;
}

.hx-client-service-row strong,
.hx-client-service-row b {
    display: block;
    color: #253d38;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
}

.hx-client-service-row em,
.hx-client-service-row small {
    display: block;
    color: #72827e;
    font-size: 13px;
    font-style: normal;
    line-height: 1.3;
}

.hx-client-card-grid {
    display: grid;
    gap: 16px;
}

.hx-client-card-grid-top {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hx-client-card-grid-bottom {
    grid-template-columns: 1.6fr 0.9fr 0.9fr;
    margin-top: 18px;
}

.hx-client-card,
.hx-client-quick {
    min-height: 282px;
    padding: 16px;
    border: 1px solid #ccefe7;
    border-radius: 8px;
    background: #fff;
}

.hx-client-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    margin-bottom: 16px;
}

.hx-client-card-head h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: #4a4a4a;
    font-size: 18px;
    font-weight: 600;
}

.hx-client-list {
    min-height: 176px;
    padding: 12px;
    border: 1px solid #d7f0eb;
    border-radius: 7px;
    background: #fbfffe;
}

.hx-client-list-item {
    position: relative;
    display: grid;
    gap: 4px;
    padding: 10px 86px 10px 12px;
    border-radius: 7px;
    color: #223d37;
    text-decoration: none;
    transition: background 0.2s ease, transform 0.2s ease;
}

.hx-client-list-item + .hx-client-list-item {
    margin-top: 6px;
}

.hx-client-list-item:hover {
    background: #ecfbf7;
    color: #143a33;
    text-decoration: none;
    transform: translateY(-1px);
}

.hx-client-list-item strong {
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
}

.hx-client-list-item span,
.hx-client-list-item small {
    color: #6a7a76;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;
}

.hx-client-list-item b {
    position: absolute;
    right: 12px;
    top: 8px;
    color: #143a33;
    font-size: 13px;
    font-weight: 600;
}

.hx-status {
    position: absolute;
    right: 10px;
    bottom: 9px;
    display: inline-flex;
    align-items: center;
    min-height: 20px;
    padding: 0 8px;
    border-radius: 999px;
    background: #ddf7ed;
    color: #168a5d;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
}

.hx-status-unpaid,
.hx-status-suspended,
.hx-status-cancelled,
.hx-status-terminated,
.hx-status-expired {
    background: #fae8e9;
    color: #94444c;
}

.hx-status-pending,
.hx-status-customer-reply {
    background: #fff3d8;
    color: #8b6615;
}

.hx-client-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    margin: 0;
    color: #7a8a86;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
}

.hx-client-quick {
    min-height: 282px;
}

.hx-client-quick h2 {
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #dcefeb;
    color: #4a4a4a;
    font-size: 18px;
    font-weight: 600;
}

.hx-client-quick p {
    margin: 0 0 12px;
    color: #74817e;
    font-size: 12px;
    line-height: 1.35;
}

.hx-client-quick div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}

.hx-client-quick a {
    position: relative;
    padding-left: 18px;
    color: #5b6865;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

.hx-client-quick a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 5px;
    width: 11px;
    height: 11px;
    background: #5fc39a;
    -webkit-mask: url("../assets/hostidex/icons/line-angle-double-right.svg") center / contain no-repeat;
    mask: url("../assets/hostidex/icons/line-angle-double-right.svg") center / contain no-repeat;
}

.hx-client-quick a:hover {
    color: #168a69;
    text-decoration: none;
}

.hx-client-promo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
    margin-top: 32px;
}

.hx-client-promo {
    display: grid;
    grid-template-columns: 188px minmax(0, 1fr);
    align-items: center;
    min-height: 158px;
    overflow: hidden;
    border-radius: 8px;
    background: #0c5143;
    color: #fff;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hx-client-promo:hover {
    background: #10473c;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(8, 62, 52, 0.22);
}

.hx-client-promo img {
    width: 185px;
    max-height: 150px;
    object-fit: contain;
    object-position: center;
    margin-left: 14px;
}

.hx-client-promo span {
    display: grid;
    gap: 4px;
    padding: 18px 22px 18px 10px;
}

.hx-client-promo strong {
    color: #fff;
    font-size: 23px;
    font-weight: 600;
    line-height: 1.15;
}

.hx-client-promo em,
.hx-client-promo b {
    color: #fff;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.35;
}

.hx-client-promo b {
    color: #c3f4db;
    font-weight: 600;
}

.hx-page[class*="hx-template-clientarea"] .primary-content > h1,
.hx-page[class*="hx-template-supporttickets"] .primary-content > h1 {
    color: #22463e;
    font-size: 26px;
    font-weight: 600;
}

.hx-page[class*="hx-template-clientarea"] .card,
.hx-page[class*="hx-template-supporttickets"] .card,
.hx-page[class*="hx-template-announcements"] .card,
.hx-page[class*="hx-template-knowledgebase"] .card {
    border: 1px solid #ccefe7;
    border-radius: 8px;
    box-shadow: none;
}

.hx-page[class*="hx-template-clientarea"] .table-container,
.hx-page[class*="hx-template-supporttickets"] .table-container {
    overflow: hidden;
    border: 1px solid #ccefe7;
    border-radius: 8px;
    background: #fff;
}

.hx-page[class*="hx-template-clientarea"] .table,
.hx-page[class*="hx-template-supporttickets"] .table {
    margin-bottom: 0;
}

.hx-page[class*="hx-template-clientarea"] .table thead th,
.hx-page[class*="hx-template-supporttickets"] .table thead th {
    border: 0;
    background: #e8fbf6;
    color: #16483d;
    font-size: 13px;
    font-weight: 600;
}

.hx-page[class*="hx-template-clientarea"] .table tbody td,
.hx-page[class*="hx-template-supporttickets"] .table tbody td {
    border-color: #e0f2ee;
    color: #30443f;
    font-size: 14px;
}

.hx-page[class*="hx-template-clientarea"] .sidebar .card,
.hx-page[class*="hx-template-supporttickets"] .sidebar .card {
    border-color: #ccefe7;
    border-radius: 8px;
}

/* Hostidex client area inner pages */
.master-breadcrumb,
.hx-breadcrumb,
.breadcrumb {
    display: none !important;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) #main-body,
.hx-page[class*="hx-template-support"] #main-body,
.hx-page[class*="hx-template-viewinvoice"] #main-body,
.hx-page[class*="hx-template-viewticket"] #main-body,
.hx-page[class*="hx-template-announcements"] #main-body,
.hx-page[class*="hx-template-knowledgebase"] #main-body,
.hx-page[class*="hx-template-serverstatus"] #main-body,
.hx-page[class*="hx-template-affiliates"] #main-body,
.hx-page[class*="hx-template-contact"] #main-body {
    background: #f1fbf8;
    padding: 38px 0 48px;
}

.hx-page[class*="hx-template-submitticket"] #main-body,
.hx-page[class*="hx-template-downloads"] #main-body,
.hx-page[class*="hx-template-masspay"] #main-body {
    background: #f1fbf8;
    padding: 38px 0 48px;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) #main-body > .container,
.hx-page[class*="hx-template-support"] #main-body > .container,
.hx-page[class*="hx-template-viewinvoice"] #main-body > .container,
.hx-page[class*="hx-template-viewticket"] #main-body > .container,
.hx-page[class*="hx-template-announcements"] #main-body > .container,
.hx-page[class*="hx-template-knowledgebase"] #main-body > .container,
.hx-page[class*="hx-template-serverstatus"] #main-body > .container,
.hx-page[class*="hx-template-affiliates"] #main-body > .container,
.hx-page[class*="hx-template-contact"] #main-body > .container {
    max-width: 1400px;
}

.hx-page[class*="hx-template-submitticket"] #main-body > .container,
.hx-page[class*="hx-template-downloads"] #main-body > .container,
.hx-page[class*="hx-template-masspay"] #main-body > .container {
    max-width: 1400px;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .primary-content,
.hx-page[class*="hx-template-support"] .primary-content,
.hx-page[class*="hx-template-viewinvoice"] .primary-content,
.hx-page[class*="hx-template-viewticket"] .primary-content,
.hx-page[class*="hx-template-announcements"] .primary-content,
.hx-page[class*="hx-template-knowledgebase"] .primary-content,
.hx-page[class*="hx-template-serverstatus"] .primary-content,
.hx-page[class*="hx-template-affiliates"] .primary-content,
.hx-page[class*="hx-template-contact"] .primary-content {
    color: #30443f;
}

.hx-page[class*="hx-template-submitticket"] .primary-content,
.hx-page[class*="hx-template-downloads"] .primary-content,
.hx-page[class*="hx-template-masspay"] .primary-content {
    color: #30443f;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .primary-content > h1,
.hx-page[class*="hx-template-support"] .primary-content > h1,
.hx-page[class*="hx-template-viewinvoice"] .primary-content > h1,
.hx-page[class*="hx-template-viewticket"] .primary-content > h1,
.hx-page[class*="hx-template-announcements"] .primary-content > h1,
.hx-page[class*="hx-template-knowledgebase"] .primary-content > h1,
.hx-page[class*="hx-template-serverstatus"] .primary-content > h1,
.hx-page[class*="hx-template-affiliates"] .primary-content > h1,
.hx-page[class*="hx-template-contact"] .primary-content > h1 {
    margin: 0 0 20px;
    color: #253d38;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
}

.hx-page[class*="hx-template-submitticket"] .primary-content > h1,
.hx-page[class*="hx-template-downloads"] .primary-content > h1,
.hx-page[class*="hx-template-masspay"] .primary-content > h1 {
    margin: 0 0 20px;
    color: #253d38;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.15;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .primary-content > p,
.hx-page[class*="hx-template-support"] .primary-content > p,
.hx-page[class*="hx-template-viewinvoice"] .primary-content > p,
.hx-page[class*="hx-template-viewticket"] .primary-content > p {
    color: #60736e;
    font-size: 15px;
    line-height: 1.6;
}

.hx-page[class*="hx-template-submitticket"] .primary-content > p,
.hx-page[class*="hx-template-downloads"] .primary-content > p,
.hx-page[class*="hx-template-masspay"] .primary-content > p {
    color: #60736e;
    font-size: 15px;
    line-height: 1.6;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .card,
.hx-page[class*="hx-template-support"] .card,
.hx-page[class*="hx-template-viewinvoice"] .card,
.hx-page[class*="hx-template-viewticket"] .card,
.hx-page[class*="hx-template-announcements"] .card,
.hx-page[class*="hx-template-knowledgebase"] .card,
.hx-page[class*="hx-template-serverstatus"] .card,
.hx-page[class*="hx-template-affiliates"] .card,
.hx-page[class*="hx-template-contact"] .card,
.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .panel,
.hx-page[class*="hx-template-support"] .panel,
.hx-page[class*="hx-template-viewinvoice"] .panel,
.hx-page[class*="hx-template-viewticket"] .panel {
    overflow: hidden;
    border: 1px solid #ccefe7;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

.hx-page[class*="hx-template-submitticket"] .card,
.hx-page[class*="hx-template-downloads"] .card,
.hx-page[class*="hx-template-masspay"] .card,
.hx-page[class*="hx-template-submitticket"] .panel,
.hx-page[class*="hx-template-downloads"] .panel,
.hx-page[class*="hx-template-masspay"] .panel {
    overflow: hidden;
    border: 1px solid #ccefe7;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .card-header,
.hx-page[class*="hx-template-support"] .card-header,
.hx-page[class*="hx-template-viewinvoice"] .card-header,
.hx-page[class*="hx-template-viewticket"] .card-header,
.hx-page[class*="hx-template-announcements"] .card-header,
.hx-page[class*="hx-template-knowledgebase"] .card-header,
.hx-page[class*="hx-template-serverstatus"] .card-header,
.hx-page[class*="hx-template-affiliates"] .card-header,
.hx-page[class*="hx-template-contact"] .card-header,
.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .panel-heading,
.hx-page[class*="hx-template-support"] .panel-heading,
.hx-page[class*="hx-template-viewinvoice"] .panel-heading,
.hx-page[class*="hx-template-viewticket"] .panel-heading {
    border-bottom: 1px solid #d7f0eb;
    background: #f8fffd;
    color: #253d38;
    font-size: 16px;
    font-weight: 600;
}

.hx-page[class*="hx-template-submitticket"] .card-header,
.hx-page[class*="hx-template-downloads"] .card-header,
.hx-page[class*="hx-template-masspay"] .card-header,
.hx-page[class*="hx-template-submitticket"] .panel-heading,
.hx-page[class*="hx-template-downloads"] .panel-heading,
.hx-page[class*="hx-template-masspay"] .panel-heading {
    border-bottom: 1px solid #d7f0eb;
    background: #f8fffd;
    color: #253d38;
    font-size: 16px;
    font-weight: 600;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .card-title,
.hx-page[class*="hx-template-support"] .card-title,
.hx-page[class*="hx-template-viewinvoice"] .card-title,
.hx-page[class*="hx-template-viewticket"] .card-title {
    color: #253d38;
    font-size: 18px;
    font-weight: 600;
}

.hx-page[class*="hx-template-submitticket"] .card-title,
.hx-page[class*="hx-template-downloads"] .card-title,
.hx-page[class*="hx-template-masspay"] .card-title {
    color: #253d38;
    font-size: 18px;
    font-weight: 600;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .table-container,
.hx-page[class*="hx-template-support"] .table-container,
.hx-page[class*="hx-template-viewinvoice"] .table-container,
.hx-page[class*="hx-template-viewticket"] .table-container {
    overflow: hidden;
    border: 1px solid #ccefe7;
    border-radius: 8px;
    background: #fff;
}

.hx-page[class*="hx-template-submitticket"] .table-container,
.hx-page[class*="hx-template-downloads"] .table-container,
.hx-page[class*="hx-template-masspay"] .table-container {
    overflow: hidden;
    border: 1px solid #ccefe7;
    border-radius: 8px;
    background: #fff;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) table.table,
.hx-page[class*="hx-template-support"] table.table,
.hx-page[class*="hx-template-viewinvoice"] table.table,
.hx-page[class*="hx-template-viewticket"] table.table,
.hx-page[class*="hx-template-serverstatus"] table.table {
    margin-bottom: 0;
    color: #30443f;
    background: #fff;
}

.hx-page[class*="hx-template-submitticket"] table.table,
.hx-page[class*="hx-template-downloads"] table.table,
.hx-page[class*="hx-template-masspay"] table.table {
    margin-bottom: 0;
    color: #30443f;
    background: #fff;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) table.table thead th,
.hx-page[class*="hx-template-support"] table.table thead th,
.hx-page[class*="hx-template-viewinvoice"] table.table thead th,
.hx-page[class*="hx-template-viewticket"] table.table thead th,
.hx-page[class*="hx-template-serverstatus"] table.table thead th {
    border: 0;
    background: #e8fbf6;
    color: #16483d;
    font-size: 13px;
    font-weight: 600;
}

.hx-page[class*="hx-template-submitticket"] table.table thead th,
.hx-page[class*="hx-template-downloads"] table.table thead th,
.hx-page[class*="hx-template-masspay"] table.table thead th {
    border: 0;
    background: #e8fbf6;
    color: #16483d;
    font-size: 13px;
    font-weight: 600;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) table.table tbody td,
.hx-page[class*="hx-template-support"] table.table tbody td,
.hx-page[class*="hx-template-viewinvoice"] table.table tbody td,
.hx-page[class*="hx-template-viewticket"] table.table tbody td,
.hx-page[class*="hx-template-serverstatus"] table.table tbody td {
    border-color: #e0f2ee;
    color: #30443f;
    font-size: 14px;
    vertical-align: middle;
}

.hx-page[class*="hx-template-submitticket"] table.table tbody td,
.hx-page[class*="hx-template-downloads"] table.table tbody td,
.hx-page[class*="hx-template-masspay"] table.table tbody td {
    border-color: #e0f2ee;
    color: #30443f;
    font-size: 14px;
    vertical-align: middle;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) table.table tbody tr:hover,
.hx-page[class*="hx-template-support"] table.table tbody tr:hover {
    background: #f7fffd;
}

.hx-page[class*="hx-template-submitticket"] table.table tbody tr:hover,
.hx-page[class*="hx-template-downloads"] table.table tbody tr:hover,
.hx-page[class*="hx-template-masspay"] table.table tbody tr:hover {
    background: #f7fffd;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .dataTables_wrapper,
.hx-page[class*="hx-template-support"] .dataTables_wrapper {
    color: #5b6e69;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .dataTables_filter input,
.hx-page[class*="hx-template-support"] .dataTables_filter input,
.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .dataTables_length select,
.hx-page[class*="hx-template-support"] .dataTables_length select,
.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .form-control,
.hx-page[class*="hx-template-support"] .form-control,
.hx-page[class*="hx-template-viewticket"] .form-control,
.hx-page[class*="hx-template-contact"] .form-control {
    min-height: 42px;
    border: 1px solid #cfe8e3;
    border-radius: 7px;
    color: #263d38;
    background: #fbfffe;
    box-shadow: none;
}

.hx-page[class*="hx-template-submitticket"] .form-control,
.hx-page[class*="hx-template-downloads"] .form-control,
.hx-page[class*="hx-template-masspay"] .form-control {
    min-height: 42px;
    border: 1px solid #cfe8e3;
    border-radius: 7px;
    color: #263d38;
    background: #fbfffe;
    box-shadow: none;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .form-control:focus,
.hx-page[class*="hx-template-support"] .form-control:focus,
.hx-page[class*="hx-template-viewticket"] .form-control:focus,
.hx-page[class*="hx-template-contact"] .form-control:focus {
    border-color: #65bf96;
    box-shadow: 0 0 0 3px rgba(101, 191, 150, 0.15);
}

.hx-page[class*="hx-template-submitticket"] .form-control:focus,
.hx-page[class*="hx-template-downloads"] .form-control:focus,
.hx-page[class*="hx-template-masspay"] .form-control:focus {
    border-color: #65bf96;
    box-shadow: 0 0 0 3px rgba(101, 191, 150, 0.15);
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) label,
.hx-page[class*="hx-template-support"] label,
.hx-page[class*="hx-template-viewticket"] label,
.hx-page[class*="hx-template-contact"] label {
    color: #294941;
    font-size: 14px;
    font-weight: 500;
}

.hx-page[class*="hx-template-submitticket"] label,
.hx-page[class*="hx-template-downloads"] label,
.hx-page[class*="hx-template-masspay"] label {
    color: #294941;
    font-size: 14px;
    font-weight: 500;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .btn,
.hx-page[class*="hx-template-support"] .btn,
.hx-page[class*="hx-template-viewinvoice"] .btn,
.hx-page[class*="hx-template-viewticket"] .btn,
.hx-page[class*="hx-template-announcements"] .btn,
.hx-page[class*="hx-template-knowledgebase"] .btn,
.hx-page[class*="hx-template-serverstatus"] .btn,
.hx-page[class*="hx-template-affiliates"] .btn,
.hx-page[class*="hx-template-contact"] .btn {
    min-height: 38px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.hx-page[class*="hx-template-submitticket"] .btn,
.hx-page[class*="hx-template-downloads"] .btn,
.hx-page[class*="hx-template-masspay"] .btn {
    min-height: 38px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .btn-primary,
.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .btn-success,
.hx-page[class*="hx-template-support"] .btn-primary,
.hx-page[class*="hx-template-support"] .btn-success,
.hx-page[class*="hx-template-viewinvoice"] .btn-primary,
.hx-page[class*="hx-template-viewticket"] .btn-primary,
.hx-page[class*="hx-template-contact"] .btn-primary {
    border-color: transparent;
    background: linear-gradient(180deg, #18825a 0%, #38b07c 100%);
    color: #fff;
    box-shadow: none;
}

.hx-page[class*="hx-template-submitticket"] .btn-primary,
.hx-page[class*="hx-template-submitticket"] .btn-success,
.hx-page[class*="hx-template-downloads"] .btn-primary,
.hx-page[class*="hx-template-downloads"] .btn-success,
.hx-page[class*="hx-template-masspay"] .btn-primary,
.hx-page[class*="hx-template-masspay"] .btn-success {
    border-color: transparent;
    background: linear-gradient(180deg, #18825a 0%, #38b07c 100%);
    color: #fff;
    box-shadow: none;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .btn-primary:hover,
.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .btn-success:hover,
.hx-page[class*="hx-template-support"] .btn-primary:hover,
.hx-page[class*="hx-template-support"] .btn-success:hover,
.hx-page[class*="hx-template-viewinvoice"] .btn-primary:hover,
.hx-page[class*="hx-template-viewticket"] .btn-primary:hover,
.hx-page[class*="hx-template-contact"] .btn-primary:hover {
    border-color: transparent;
    background: linear-gradient(180deg, #166c50 0%, #2f9d70 100%);
    color: #fff;
    box-shadow: 0 8px 18px rgba(23, 140, 105, 0.14);
    transform: translateY(-1px);
}

.hx-template-contact .primary-content > h1 {
    display: none;
}

.hx-contact-page {
    color: #243b37;
}

.hx-contact-hero {
    margin-bottom: 28px;
    padding: 48px 30px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(180deg, #134b41 0%, #297f77 100%);
}

.hx-contact-hero-inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}

.hx-contact-hero-inner span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 12px;
    padding: 0 18px;
    border-radius: 999px;
    color: #12453c;
    background: #d8f8ee;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
}

.hx-contact-hero-inner h1 {
    margin: 0 0 10px;
    color: #f7fffc;
    font-size: 36px;
    line-height: 1.16;
    font-weight: 600;
}

.hx-contact-hero-inner p {
    max-width: 720px;
    margin: 0 auto;
    color: #d6fbef;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 400;
}

.hx-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    gap: 28px;
    align-items: start;
}

.hx-contact-form-card,
.hx-contact-info-card {
    border: 1px solid rgba(17, 105, 90, 0.13);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 44px rgba(7, 49, 43, 0.07);
}

.hx-contact-form-card {
    padding: 34px 38px;
}

.hx-contact-info-card {
    position: sticky;
    top: 116px;
    padding: 30px;
}

.hx-contact-section-head {
    margin-bottom: 24px;
}

.hx-contact-section-head h2 {
    margin: 0 0 8px;
    color: #153d37;
    font-size: 26px;
    line-height: 1.24;
    font-weight: 600;
}

.hx-contact-section-head p {
    margin: 0;
    color: #60736e;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
}

.hx-contact-form .form-group {
    margin-bottom: 18px;
}

.hx-contact-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.hx-contact-form textarea.form-control {
    min-height: 160px;
    resize: vertical;
}

.hx-contact-captcha {
    margin: 20px 0;
}

.hx-contact-submit {
    width: 100%;
    min-height: 46px !important;
    font-size: 15px !important;
}

.hx-contact-info-list {
    display: grid;
    gap: 14px;
}

.hx-contact-info-list section {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 16px;
    border: 1px solid rgba(27, 142, 120, 0.12);
    border-radius: 10px;
    background: #f6fffc;
}

.hx-contact-info-list section > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(180deg, #18825a 0%, #38b07c 100%);
    font-size: 18px;
}

.hx-contact-info-list h3 {
    margin: 0 0 5px;
    color: #167b69;
    font-size: 17px;
    line-height: 1.25;
    font-weight: 600;
}

.hx-contact-info-list p {
    margin: 0;
    color: #3d5651;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 400;
}

.hx-contact-info-list a {
    color: #0f6e5f;
    font-weight: 600;
    text-decoration: none;
}

.hx-contact-info-list a:hover {
    color: #15453a;
    text-decoration: none;
}

@media (max-width: 991px) {
    .hx-contact-layout {
        grid-template-columns: 1fr;
    }

    .hx-contact-info-card {
        position: static;
    }
}

@media (max-width: 767px) {
    .hx-contact-hero {
        margin-bottom: 20px;
        padding: 34px 18px;
    }

    .hx-contact-hero-inner h1 {
        font-size: 28px;
    }

    .hx-contact-hero-inner p {
        font-size: 15px;
    }

    .hx-contact-form-card,
    .hx-contact-info-card {
        padding: 22px 18px;
    }

    .hx-contact-field-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .hx-contact-section-head h2 {
        font-size: 23px;
    }

    .hx-contact-info-list section {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 14px;
    }

    .hx-contact-info-list section > span {
        width: 42px;
        height: 42px;
        font-size: 16px;
    }
}

.hx-page[class*="hx-template-submitticket"] .btn-primary:hover,
.hx-page[class*="hx-template-submitticket"] .btn-success:hover,
.hx-page[class*="hx-template-downloads"] .btn-primary:hover,
.hx-page[class*="hx-template-downloads"] .btn-success:hover,
.hx-page[class*="hx-template-masspay"] .btn-primary:hover,
.hx-page[class*="hx-template-masspay"] .btn-success:hover {
    border-color: transparent;
    background: linear-gradient(180deg, #166c50 0%, #2f9d70 100%);
    color: #fff;
    box-shadow: 0 8px 18px rgba(23, 140, 105, 0.14);
    transform: translateY(-1px);
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .btn-default,
.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .btn-secondary,
.hx-page[class*="hx-template-support"] .btn-default,
.hx-page[class*="hx-template-support"] .btn-secondary,
.hx-page[class*="hx-template-viewinvoice"] .btn-default,
.hx-page[class*="hx-template-viewinvoice"] .btn-secondary {
    border-color: #ccefe7;
    background: #fff;
    color: #174f43;
}

.hx-page[class*="hx-template-submitticket"] .btn-default,
.hx-page[class*="hx-template-submitticket"] .btn-secondary,
.hx-page[class*="hx-template-downloads"] .btn-default,
.hx-page[class*="hx-template-downloads"] .btn-secondary,
.hx-page[class*="hx-template-masspay"] .btn-default,
.hx-page[class*="hx-template-masspay"] .btn-secondary {
    border-color: #ccefe7;
    background: #fff;
    color: #174f43;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .btn-default:hover,
.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .btn-secondary:hover,
.hx-page[class*="hx-template-support"] .btn-default:hover,
.hx-page[class*="hx-template-support"] .btn-secondary:hover,
.hx-page[class*="hx-template-viewinvoice"] .btn-default:hover,
.hx-page[class*="hx-template-viewinvoice"] .btn-secondary:hover {
    border-color: #93dac6;
    background: #f0fffc;
    color: #123d35;
}

.hx-page[class*="hx-template-submitticket"] .btn-default:hover,
.hx-page[class*="hx-template-submitticket"] .btn-secondary:hover,
.hx-page[class*="hx-template-downloads"] .btn-default:hover,
.hx-page[class*="hx-template-downloads"] .btn-secondary:hover,
.hx-page[class*="hx-template-masspay"] .btn-default:hover,
.hx-page[class*="hx-template-masspay"] .btn-secondary:hover {
    border-color: #93dac6;
    background: #f0fffc;
    color: #123d35;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .nav-tabs,
.hx-page[class*="hx-template-support"] .nav-tabs,
.hx-page[class*="hx-template-viewticket"] .nav-tabs {
    gap: 8px;
    border-bottom: 1px solid #ccefe7;
}

.hx-page[class*="hx-template-submitticket"] .nav-tabs,
.hx-page[class*="hx-template-downloads"] .nav-tabs,
.hx-page[class*="hx-template-masspay"] .nav-tabs {
    gap: 8px;
    border-bottom: 1px solid #ccefe7;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .nav-tabs .nav-link,
.hx-page[class*="hx-template-support"] .nav-tabs .nav-link,
.hx-page[class*="hx-template-viewticket"] .nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-radius: 7px 7px 0 0;
    color: #31554c;
    font-size: 14px;
    font-weight: 500;
}

.hx-page[class*="hx-template-submitticket"] .nav-tabs .nav-link,
.hx-page[class*="hx-template-downloads"] .nav-tabs .nav-link,
.hx-page[class*="hx-template-masspay"] .nav-tabs .nav-link {
    margin-bottom: -1px;
    border: 1px solid transparent;
    border-radius: 7px 7px 0 0;
    color: #31554c;
    font-size: 14px;
    font-weight: 500;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .nav-tabs .nav-link.active,
.hx-page[class*="hx-template-support"] .nav-tabs .nav-link.active,
.hx-page[class*="hx-template-viewticket"] .nav-tabs .nav-link.active {
    border-color: #ccefe7 #ccefe7 #fff;
    color: #123d35;
    background: #fff;
}

.hx-page[class*="hx-template-submitticket"] .nav-tabs .nav-link.active,
.hx-page[class*="hx-template-downloads"] .nav-tabs .nav-link.active,
.hx-page[class*="hx-template-masspay"] .nav-tabs .nav-link.active {
    border-color: #ccefe7 #ccefe7 #fff;
    color: #123d35;
    background: #fff;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .alert,
.hx-page[class*="hx-template-support"] .alert,
.hx-page[class*="hx-template-viewinvoice"] .alert,
.hx-page[class*="hx-template-viewticket"] .alert {
    border-radius: 8px;
    border-width: 1px;
    font-size: 14px;
}

.hx-page[class*="hx-template-submitticket"] .alert,
.hx-page[class*="hx-template-downloads"] .alert,
.hx-page[class*="hx-template-masspay"] .alert {
    border-radius: 8px;
    border-width: 1px;
    font-size: 14px;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .alert-info,
.hx-page[class*="hx-template-support"] .alert-info,
.hx-page[class*="hx-template-viewticket"] .alert-info {
    border-color: #ccefe7;
    background: #f0fffc;
    color: #174f43;
}

.hx-page[class*="hx-template-submitticket"] .alert-info,
.hx-page[class*="hx-template-downloads"] .alert-info,
.hx-page[class*="hx-template-masspay"] .alert-info {
    border-color: #ccefe7;
    background: #f0fffc;
    color: #174f43;
}

.hx-ticket-support-scope {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    margin: 22px 0;
    padding: 18px;
    border: 1px solid rgba(28, 138, 112, 0.18);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(232, 250, 245, 0.96) 0%, rgba(250, 255, 253, 0.98) 100%);
    color: #10473c;
}

.hx-ticket-support-scope-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 8px;
    background: #d7f4ed;
    color: #18825a;
    font-size: 16px;
}

.hx-ticket-support-scope strong {
    display: block;
    margin: 0 0 6px;
    color: #113b32;
    font-size: 16px;
    font-weight: 600;
}

.hx-ticket-support-scope p {
    margin: 0 0 12px;
    color: #49665d;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
}

.hx-ticket-support-accept {
    display: flex !important;
    align-items: flex-start;
    gap: 9px;
    margin: 0 !important;
    color: #113b32 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.45;
}

.hx-ticket-support-accept input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: #18825a;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .pagination .page-link,
.hx-page[class*="hx-template-support"] .pagination .page-link {
    border-color: #ccefe7;
    color: #174f43;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .pagination .active .page-link,
.hx-page[class*="hx-template-support"] .pagination .active .page-link {
    border-color: #377b5d;
    background: #377b5d;
    color: #fff;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .sidebar .card,
.hx-page[class*="hx-template-support"] .sidebar .card,
.hx-page[class*="hx-template-viewticket"] .sidebar .card {
    overflow: hidden;
    border: 1px solid #ccefe7;
    border-radius: 8px;
    background: #fff;
}

.hx-page[class*="hx-template-submitticket"] .sidebar .card,
.hx-page[class*="hx-template-downloads"] .sidebar .card,
.hx-page[class*="hx-template-masspay"] .sidebar .card {
    overflow: hidden;
    border: 1px solid #ccefe7;
    border-radius: 8px;
    background: #fff;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .sidebar .card-header,
.hx-page[class*="hx-template-support"] .sidebar .card-header,
.hx-page[class*="hx-template-viewticket"] .sidebar .card-header {
    border-bottom: 1px solid #d7f0eb;
    background: #f8fffd;
    color: #253d38;
    font-size: 15px;
    font-weight: 600;
}

.hx-page[class*="hx-template-submitticket"] .sidebar .card-header,
.hx-page[class*="hx-template-downloads"] .sidebar .card-header,
.hx-page[class*="hx-template-masspay"] .sidebar .card-header {
    border-bottom: 1px solid #d7f0eb;
    background: #f8fffd;
    color: #253d38;
    font-size: 15px;
    font-weight: 600;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .list-group-item,
.hx-page[class*="hx-template-support"] .list-group-item,
.hx-page[class*="hx-template-viewticket"] .list-group-item {
    border-color: #e0f2ee;
    color: #30443f;
    font-size: 14px;
}

.hx-page[class*="hx-template-submitticket"] .list-group-item,
.hx-page[class*="hx-template-downloads"] .list-group-item,
.hx-page[class*="hx-template-masspay"] .list-group-item {
    border-color: #e0f2ee;
    color: #30443f;
    font-size: 14px;
}

.hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .list-group-item.active,
.hx-page[class*="hx-template-support"] .list-group-item.active,
.hx-page[class*="hx-template-viewticket"] .list-group-item.active {
    border-color: #377b5d;
    background: #377b5d;
    color: #fff;
}

.hx-page[class*="hx-template-submitticket"] .list-group-item.active,
.hx-page[class*="hx-template-downloads"] .list-group-item.active,
.hx-page[class*="hx-template-masspay"] .list-group-item.active {
    border-color: #377b5d;
    background: #377b5d;
    color: #fff;
}

@media (max-width: 1199px) {
    .hx-client-stat-grid,
    .hx-client-card-grid-top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hx-client-card-grid-bottom {
        grid-template-columns: 1fr 1fr;
    }

    .hx-client-quick {
        grid-column: 1 / -1;
    }

    .hx-client-promo {
        grid-template-columns: 150px minmax(0, 1fr);
    }

    .hx-client-promo img {
        width: 150px;
    }
}

@media (max-width: 767px) {
    .hx-client-hero {
        padding: 20px 0 18px;
    }

    .hx-client-hero-inner {
        display: grid;
        gap: 18px;
    }

    .hx-client-profile {
        grid-template-columns: 58px minmax(0, 1fr);
    }

    .hx-client-profile-actions {
        grid-column: 1 / -1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding-left: 0;
    }

    .hx-client-wallet {
        grid-template-columns: 44px minmax(0, 1fr) auto;
    }

    .hx-client-stat-grid,
    .hx-client-card-grid-top,
    .hx-client-card-grid-bottom,
    .hx-client-promo-grid {
        grid-template-columns: 1fr;
    }

    .hx-client-whmcs-menu .container {
        min-height: 0;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .hx-client-nav-list {
        justify-content: flex-start;
        gap: 4px 10px;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .hx-client-nav-list > li > a {
        font-size: 13px;
    }

    .hx-client-content {
        padding-top: 24px;
    }

    .hx-client-service-page-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .hx-client-service-page-head h2 {
        font-size: 24px;
    }

    .hx-client-service-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .hx-client-card,
    .hx-client-quick {
        min-height: 0;
    }

    .hx-client-promo {
        grid-template-columns: 118px minmax(0, 1fr);
        min-height: 140px;
    }

    .hx-client-promo img {
        width: 116px;
        margin-left: 8px;
    }

    .hx-client-promo span {
        padding: 14px 14px 14px 4px;
    }

    .hx-client-promo strong {
        font-size: 17px;
    }

    .hx-client-promo em,
    .hx-client-promo b {
        font-size: 12px;
    }

    .hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) #main-body,
    .hx-page[class*="hx-template-support"] #main-body,
    .hx-page[class*="hx-template-submitticket"] #main-body,
    .hx-page[class*="hx-template-viewinvoice"] #main-body,
    .hx-page[class*="hx-template-viewticket"] #main-body,
    .hx-page[class*="hx-template-announcements"] #main-body,
    .hx-page[class*="hx-template-knowledgebase"] #main-body,
    .hx-page[class*="hx-template-serverstatus"] #main-body,
    .hx-page[class*="hx-template-affiliates"] #main-body,
    .hx-page[class*="hx-template-contact"] #main-body {
        padding: 24px 0 34px;
    }

    .hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .primary-content > h1,
    .hx-page[class*="hx-template-support"] .primary-content > h1,
    .hx-page[class*="hx-template-submitticket"] .primary-content > h1,
    .hx-page[class*="hx-template-viewinvoice"] .primary-content > h1,
    .hx-page[class*="hx-template-viewticket"] .primary-content > h1 {
        font-size: 24px;
    }

    .hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .table-container,
    .hx-page[class*="hx-template-support"] .table-container,
    .hx-page[class*="hx-template-submitticket"] .table-container,
    .hx-page[class*="hx-template-viewinvoice"] .table-container,
    .hx-page[class*="hx-template-viewticket"] .table-container {
        overflow-x: auto;
    }

    .hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) table.table,
    .hx-page[class*="hx-template-support"] table.table,
    .hx-page[class*="hx-template-submitticket"] table.table,
    .hx-page[class*="hx-template-viewinvoice"] table.table,
    .hx-page[class*="hx-template-viewticket"] table.table {
        min-width: 680px;
    }

    .hx-page[class*="hx-template-clientarea"]:not(.hx-template-clientareahome) .sidebar,
    .hx-page[class*="hx-template-support"] .sidebar,
    .hx-page[class*="hx-template-submitticket"] .sidebar,
    .hx-page[class*="hx-template-viewticket"] .sidebar {
        margin-top: 18px;
    }
}

/* Hostidex auth pages */
.hx-template-login #main-body,
.hx-template-clientregister #main-body {
    background: #f1fbf9;
    padding: 62px 0 78px;
}

.hx-template-login #main-body > .container,
.hx-template-clientregister #main-body > .container {
    max-width: 1400px;
}

.hx-template-login .primary-content,
.hx-template-clientregister .primary-content {
    width: 100%;
}

.hx-auth-page,
.hx-auth-page * {
    box-sizing: border-box;
}

.hx-auth-shell {
    display: grid;
    gap: 22px;
    margin: 0 auto;
}

.hx-auth-shell-login {
    max-width: 1400px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
}

.hx-auth-card {
    border: 1px solid #d6ebe7;
    border-radius: 7px;
    background: #fff;
}

.hx-login-form {
    min-height: 506px;
    padding: 34px 38px 22px;
}

.hx-auth-head {
    margin-bottom: 24px;
}

.hx-auth-head h1,
.hx-register-card h2,
.hx-newsletter h2 {
    margin: 0;
    color: #3a3a3a;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

.hx-auth-head p,
.hx-newsletter p,
.hx-auth-switch {
    margin: 7px 0 0;
    color: #4a4a4a;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.35;
}

.hx-auth-field {
    position: relative;
    display: flex;
    min-height: 50px;
    align-items: center;
    margin: 0 0 15px;
    border: 1px solid #dedede;
    border-radius: 4px;
    background: #fff;
}

.hx-auth-field > img {
    width: 20px;
    height: 20px;
    margin: 0 17px;
    opacity: 0.86;
    object-fit: contain;
}

.hx-auth-field input,
.hx-register-card input,
.hx-register-card select {
    width: 100%;
    min-width: 0;
    height: 48px;
    border: 1px solid #dedede;
    border-radius: 4px;
    background: #fff;
    color: #343434;
    font-size: 14px;
    font-weight: 400;
    outline: 0;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.hx-auth-field input {
    height: 48px;
    border: 0;
}

.hx-auth-field input::placeholder {
    color: #8b8b8b;
    font-weight: 500;
}

.hx-auth-field:focus-within,
.hx-register-card input:focus,
.hx-register-card select:focus {
    border-color: #3db88a;
    box-shadow: 0 0 0 3px rgba(61, 184, 138, 0.12);
}

.hx-auth-password-field input {
    padding-right: 48px;
}

.hx-auth-password-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
}

.hx-auth-password-toggle img {
    width: 19px;
    height: 19px;
    object-fit: contain;
}

.hx-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 22px 0 48px;
}

.hx-auth-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #777;
    font-size: 14px;
    font-weight: 400;
}

.hx-auth-check input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: #35b884;
}

.hx-login-options a,
.hx-auth-switch a {
    color: #34b982;
    font-weight: 600;
    text-decoration: none;
}

.hx-login-options a:hover,
.hx-auth-switch a:hover {
    color: #11936d;
    text-decoration: none;
}

.hx-auth-captcha {
    margin: 0 0 22px;
}

.hx-auth-submit {
    display: inline-flex;
    width: 100%;
    min-height: 45px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(90deg, #42bd87 0%, #10947d 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.hx-auth-submit:hover,
.hx-auth-submit:focus-visible {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.03);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(23, 157, 118, 0.22);
}

.hx-auth-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 22px;
    margin: 38px 0 26px;
    color: #777;
    font-size: 13px;
    font-weight: 600;
}

.hx-auth-divider::before,
.hx-auth-divider::after {
    height: 1px;
    background: #dedede;
    content: "";
}

.hx-auth-social {
    min-height: 48px;
}

.hx-auth-social .sub-heading,
.hx-auth-social .sub-heading-borderless,
.hx-auth-social #providerLinkingMessages,
.hx-auth-social .providerLinkingFeedback {
    display: none;
}

.hx-auth-social .social-signin-btns {
    display: grid;
    gap: 10px;
}

.hx-auth-social .social-signin-btns > * {
    width: 100% !important;
}

.hx-google-auth {
    display: grid;
    justify-items: center;
    gap: 10px;
}

.hx-google-auth iframe {
    margin: 0 auto !important;
}

.hx-google-auth-message {
    min-height: 18px;
    color: #26735f;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
}

.hx-google-auth-message.is-error {
    color: #9a3030;
}

.hx-auth-switch {
    margin-top: 25px;
    text-align: center;
}

.hx-login-visual {
    position: relative;
    min-height: 506px;
    border-radius: 7px;
    background: linear-gradient(180deg, #3f967e 0%, #0d5a4d 100%);
    overflow: hidden;
}

.hx-login-visual > img {
    position: absolute;
    left: 50%;
    top: 25px;
    width: 100%;
    max-width: 680px;
    transform: translateX(-50%);
}

.hx-login-coupon {
    position: absolute;
    left: 50%;
    bottom: 55px;
    width: 86%;
    color: #fff;
    text-align: center;
    transform: translateX(-50%);
}

.hx-login-coupon strong,
.hx-login-coupon span,
.hx-login-coupon em {
    display: block;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.45;
}

.hx-login-coupon em {
    color: #21e3a5;
}

.hx-auth-alert {
    max-width: 760px;
    margin: 0 auto 20px;
}

.hx-register-form {
    max-width: 1400px;
    margin: 0 auto;
}

.hx-register-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

.hx-register-card {
    padding: 25px 34px 31px;
    height: 100%;
}

.hx-register-card h2 {
    margin-bottom: 15px;
}

.hx-membership-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 20px 0 21px;
}

.hx-membership-tabs button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #dedede;
    border-radius: 4px;
    background: #fff;
    color: #19483f;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.hx-membership-tabs button.is-active {
    border-color: #d4eee8;
    background: #e9f9f4;
}

.hx-membership-tabs button:hover {
    transform: translateY(-1px);
}

.hx-membership-tabs img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.hx-auth-separator {
    height: 1px;
    margin: 20px 0 18px;
    background: #dedede;
}

.hx-form-grid {
    display: grid;
    gap: 13px 14px;
}

.hx-form-grid-2 {
    grid-template-columns: 1fr 1fr;
}

.hx-form-grid-3 {
    grid-template-columns: 1fr 1fr 1fr;
}

.hx-form-grid-address {
    grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
    margin-top: 13px;
}

.hx-register-card .form-group {
    position: relative;
    margin: 0;
}

.hx-register-card .form-group > span,
.hx-register-card .form-group > label:not(.field-icon) {
    display: block;
    margin: 0 0 6px;
    color: #25594f;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
}

.hx-register-card .prepend-icon .field-icon {
    position: absolute;
    left: 12px;
    bottom: 14px;
    z-index: 2;
    width: 18px;
    height: 18px;
    margin: 0;
    color: #648078;
    font-size: 14px;
    line-height: 1;
}

.hx-register-card .prepend-icon input,
.hx-register-card .prepend-icon select {
    padding-left: 38px;
}

.hx-register-card input,
.hx-register-card select {
    padding: 0 12px;
}

.hx-member-fields {
    display: none;
    margin-top: 13px;
}

.hx-member-fields.is-active {
    display: grid;
}

.hx-member-individual {
    grid-template-columns: 1fr;
}

.hx-member-corporate {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.hx-auth-extra {
    margin-top: 22px;
}

.hx-security-card {
    min-height: 510px;
}

.hx-password-input {
    position: relative;
}

.hx-password-input input {
    padding-right: 45px;
}

.hx-password-input .hx-auth-password-toggle {
    top: auto;
    bottom: 10px;
    transform: none;
}

.hx-generate-password {
    align-self: start;
}

.hx-generate-password button {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    border: 0;
    border-radius: 4px;
    background: #e5f5f0;
    color: #32635a;
    font-size: 11px;
    font-weight: 600;
}

.hx-generate-password img {
    width: 14px;
    height: 14px;
}

.hx-password-meter .progress {
    height: 15px;
    margin: 0 0 7px;
    border-radius: 3px;
    background: #eeeeee;
}

.hx-password-meter .progress-bar {
    border-radius: 3px;
    background: #32c98b !important;
}

.hx-password-meter p {
    margin: 0;
    color: #777;
    font-size: 11px;
    font-weight: 400;
    text-align: center;
}

.hx-newsletter {
    margin: 21px 0 45px;
}

.hx-newsletter p {
    margin-top: 10px;
}

.hx-newsletter-toggle {
    display: inline-flex;
    min-width: 255px;
    align-items: center;
    margin: 13px 0 0;
}

.hx-newsletter-toggle .bootstrap-switch,
.hx-newsletter-toggle .bootstrap-switch-container {
    border-radius: 3px;
}

.hx-newsletter-toggle .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.hx-newsletter-toggle .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary {
    background: #2fd693;
}

.hx-newsletter-toggle .bootstrap-switch .bootstrap-switch-handle-on,
.hx-newsletter-toggle .bootstrap-switch .bootstrap-switch-handle-off,
.hx-newsletter-toggle .bootstrap-switch .bootstrap-switch-label {
    font-size: 11px;
    line-height: 1.2;
}

.hx-tos-check {
    margin-bottom: 18px;
}

.hx-register-promos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 14px;
}

.hx-register-promos article {
    display: grid;
    min-height: 150px;
    grid-template-columns: 220px 1fr;
    align-items: center;
    border-radius: 5px;
    background: #235d4f;
    color: #fff;
    overflow: hidden;
}

.hx-register-promos article:nth-child(2) {
    background: #426c60;
}

.hx-register-promos img {
    width: 100%;
    max-height: 154px;
    align-self: end;
    object-fit: contain;
    object-position: left bottom;
}

.hx-register-promos div {
    padding: 18px 22px 18px 8px;
}

.hx-register-promos h3 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.2;
}

.hx-register-promos p {
    margin: 0 0 15px;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.25;
}

.hx-register-promos a {
    display: inline-flex;
    min-width: 145px;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 6px;
    background: #5bbf91;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.hx-register-promos a:hover {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.05);
}

@media (max-width: 991px) {
    .hx-template-login #main-body,
    .hx-template-clientregister #main-body {
        padding: 34px 0 48px;
    }

    .hx-auth-shell-login,
    .hx-register-grid,
    .hx-register-promos {
        grid-template-columns: 1fr;
    }

    .hx-login-visual {
        min-height: 440px;
        order: -1;
    }

    .hx-register-card {
        padding: 24px;
    }

    .hx-register-promos article {
        grid-template-columns: 180px 1fr;
    }
}

@media (max-width: 640px) {
    body.hx-template-login,
    body.hx-template-clientregister {
        overflow-x: hidden;
    }

    .hx-template-login #main-body > .container,
    .hx-template-clientregister #main-body > .container {
        width: 100%;
        max-width: 100%;
        padding-right: 12px;
        padding-left: 12px;
    }

    .hx-auth-page,
    .hx-auth-shell,
    .hx-auth-shell-login,
    .hx-register-form,
    .hx-register-grid,
    .hx-register-promos,
    .hx-auth-card,
    .hx-login-visual {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .hx-login-form {
        padding: 26px 20px 22px;
    }

    .hx-auth-head h1,
    .hx-register-card h2,
    .hx-newsletter h2 {
        font-size: 20px;
    }

    .hx-login-options,
    .hx-membership-tabs,
    .hx-form-grid-2,
    .hx-form-grid-3,
    .hx-form-grid-address,
    .hx-member-corporate {
        grid-template-columns: 1fr;
    }

    .hx-login-options {
        display: grid;
        gap: 12px;
        margin-bottom: 32px;
    }

    .hx-login-visual {
        min-height: 360px;
        overflow: hidden;
    }

    .hx-login-visual > img {
        width: 115%;
        max-width: 680px;
    }

    .hx-login-coupon {
        bottom: 30px;
    }

    .hx-login-coupon strong,
    .hx-login-coupon span,
    .hx-login-coupon em {
        font-size: 13px;
    }

    .hx-auth-field,
    .hx-register-card .form-group,
    .hx-google-auth,
    .hx-google-auth .g_id_signin,
    .hx-google-auth .S9gUrf-YoZ4jf,
    .hx-google-auth .nsm7Bb-HzV7m-LgbsSe,
    .hx-google-auth .nsm7Bb-HzV7m-LgbsSe-MJoBVe,
    .hx-google-auth iframe,
    .hx-auth-social,
    .hx-auth-social .social-signin-btns,
    .hx-auth-social .social-signin-btns > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .hx-register-promos article {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hx-register-promos img {
        max-height: 180px;
        margin: 0 auto;
        object-position: center bottom;
    }

    .hx-register-promos div {
        padding: 0 20px 22px;
    }
}

@font-face {
    font-family: "Google Sans Flex";
    src: url("../assets/hostidex/fonts/GoogleSansFlex-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Google Sans Flex";
    src: url("../assets/hostidex/fonts/GoogleSansFlex-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Google Sans Flex";
    src: url("../assets/hostidex/fonts/GoogleSansFlex-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

html {
    scroll-behavior: smooth;
}

body.hx-page {
    color: var(--hx-ink);
    background: var(--hx-surface);
    font-family: "Google Sans Flex", "Google Sans", Arial, sans-serif;
    letter-spacing: 0;
}

body.hx-template-homepage {
    background: var(--hx-surface);
}

.hx-page a:hover,
.hx-page a:focus {
    text-decoration: none !important;
}

@media (min-width: 1200px) {
    .hx-header .container,
    .hx-home .container,
    .hx-footer .container,
    .hx-breadcrumb .container {
        max-width: 1400px;
        padding-left: 0;
        padding-right: 0;
    }
}

.hx-header {
    position: relative;
    z-index: 30;
    background: linear-gradient(180deg, var(--hx-deep) 0%, var(--hx-deep-2) 100%);
    color: #fff;
}

.hx-template-homepage .hx-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: transparent;
    backdrop-filter: none;
}

.hx-utility {
    border-bottom: 1px solid rgba(175, 214, 199, 0.22);
    font-size: 14px;
    line-height: 1;
}

.hx-utility-inner,
.hx-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.hx-utility-inner {
    min-height: 47px;
}

.hx-utility-left,
.hx-utility-right {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.hx-utility a,
.hx-main-menu a,
.hx-footer a {
    color: inherit;
    text-decoration: none;
}

.hx-utility a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #afd6c7;
    transition: color 180ms ease, transform 180ms ease;
}

.hx-utility a:hover {
    color: var(--hx-mint-2);
    text-decoration: none;
    transform: translateY(-1px);
}

.hx-label-mobile {
    display: none;
}

.hx-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
    background: currentColor;
    -webkit-mask: var(--hx-icon-url) center / contain no-repeat;
    mask: var(--hx-icon-url) center / contain no-repeat;
}

.hx-icon-phone {
    --hx-icon-url: url("../assets/hostidex/icons/line-phone.svg");
}

.hx-icon-ticket {
    --hx-icon-url: url("../assets/hostidex/icons/line-ticket.svg");
}

.hx-icon-headphone {
    --hx-icon-url: url("../assets/hostidex/icons/line-headphone.svg");
}

.hx-icon-domain,
.hx-icon-service-globe {
    --hx-icon-url: url("../assets/hostidex/icons/line-globe.svg");
}

.hx-icon-hosting {
    --hx-icon-url: url("../assets/hostidex/icons/line-cloud-rain.svg");
}

.hx-icon-server {
    --hx-icon-url: url("../assets/hostidex/icons/line-layers.svg");
}

.hx-icon-mail {
    --hx-icon-url: url("../assets/hostidex/icons/line-envelope.svg");
}

.hx-icon-ssl {
    --hx-icon-url: url("../assets/hostidex/icons/line-shield.svg");
}

.hx-icon-basket {
    --hx-icon-url: url("../assets/hostidex/icons/line-basket.svg");
}

.hx-icon-user {
    --hx-icon-url: url("../assets/hostidex/icons/user-4.svg");
}

.hx-icon-angle {
    --hx-icon-url: url("../assets/hostidex/icons/line-angle-double-down.svg");
}

.hx-icon-angle-right {
    --hx-icon-url: url("../assets/hostidex/icons/line-angle-double-right.svg");
}

.hx-icon-search {
    --hx-icon-url: url("../assets/hostidex/icons/line-search.svg");
}

.hx-icon-domain-search {
    --hx-icon-url: url("../assets/hostidex/icons/domain-ara.svg");
}

.hx-icon-domain-transfer {
    --hx-icon-url: url("../assets/hostidex/icons/domain-transfer.svg");
}

.hx-icon-domain-procedure {
    --hx-icon-url: url("../assets/hostidex/icons/domain-prosedur.svg");
}

.hx-icon-domain-tr-docs {
    --hx-icon-url: url("../assets/hostidex/icons/tr-belgeler.svg");
}

.hx-icon-domain-price-list {
    --hx-icon-url: url("../assets/hostidex/icons/domain-liste.svg");
}

.hx-icon-hosting-web {
    --hx-icon-url: url("../assets/hostidex/icons/web-hosting.svg");
}

.hx-icon-hosting-reseller {
    --hx-icon-url: url("../assets/hostidex/icons/reseller-hosting.svg");
}

.hx-icon-hosting-windows {
    --hx-icon-url: url("../assets/hostidex/icons/windows-hosting.svg");
}

.hx-icon-hosting-wordpress {
    --hx-icon-url: url("../assets/hostidex/icons/wordpress-hosting.svg");
}

.hx-icon-hosting-corporate {
    --hx-icon-url: url("../assets/hostidex/icons/kurumsal-hosting.svg");
}

.hx-icon-hosting-app {
    --hx-icon-url: url("../assets/hostidex/icons/uygulama-hosting.svg");
}

.hx-icon-server-vds {
    --hx-icon-url: url("../assets/hostidex/icons/sanal-sunucu-vds.svg");
}

.hx-icon-server-cloud {
    --hx-icon-url: url("../assets/hostidex/icons/cloud-sunucu.svg");
}

.hx-icon-server-dedicated {
    --hx-icon-url: url("../assets/hostidex/icons/dedeicated-sunucu.svg");
}

.hx-icon-server-colocation {
    --hx-icon-url: url("../assets/hostidex/icons/sunucu-barindirma.svg");
}

.hx-icon-server-management {
    --hx-icon-url: url("../assets/hostidex/icons/suucu-yonetimi.svg");
}

.hx-icon-ai-agent {
    --hx-icon-url: url("../assets/hostidex/icons/ai-agent-server.svg");
}

.hx-icon-ai-wordpress {
    --hx-icon-url: url("../assets/hostidex/icons/wordpress-ai.svg");
}

.hx-icon-ai-website {
    --hx-icon-url: url("../assets/hostidex/icons/website-ai.svg");
}

.hx-icon-service-cloud-bolt {
    --hx-icon-url: url("../assets/hostidex/icons/service-cloud-bolt.svg");
}

.hx-icon-service-wordpress {
    --hx-icon-url: url("../assets/hostidex/icons/service-wordpress.svg");
}

.hx-icon-service-envelope {
    --hx-icon-url: url("../assets/hostidex/icons/service-envelope.svg");
}

.hx-icon-service-cloud-iot {
    --hx-icon-url: url("../assets/hostidex/icons/service-cloud-iot.svg");
}

.hx-icon-apps-title {
    --hx-icon-url: url("../assets/hostidex/icons/line-select-cursor.svg");
}

.hx-utility .hx-icon {
    width: 15px;
    height: 15px;
    color: #afd6c7;
}

.hx-nav {
    padding: 24px 0 22px;
    transition: padding 180ms ease, background 180ms ease, box-shadow 180ms ease, backdrop-filter 180ms ease;
}

body.hx-nav-stuck .hx-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 70;
    padding: 24px 0 22px;
    background: rgba(5, 45, 38, 0.9);
    box-shadow: 0 16px 34px rgba(3, 37, 31, 0.2);
    backdrop-filter: blur(12px);
}

body.hx-nav-stuck:not(.hx-template-homepage) .hx-header {
    padding-bottom: var(--hx-nav-height);
}

body.hx-nav-stuck .hx-mega-menu {
    top: calc(var(--hx-nav-height) + 10px);
}

.hx-brand img {
    width: 193px;
    height: auto;
    display: block;
}

.hx-main-menu {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 31px;
    flex: 1 1 auto;
}

.hx-mobile-menu-head {
    display: none;
}

.hx-main-menu > a,
.hx-main-menu > .hx-menu-item > .hx-menu-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #f7fffc;
    font-weight: 500;
    font-size: 16px;
    white-space: nowrap;
    transition: color 180ms ease, transform 180ms ease;
}

.hx-main-menu > a:hover,
.hx-main-menu > .hx-menu-item:hover > .hx-menu-link,
.hx-main-menu > .hx-menu-item:focus-within > .hx-menu-link {
    color: var(--hx-mint-2);
    text-decoration: none;
    transform: translateY(-2px);
}

.hx-main-menu > a .hx-icon:not(.hx-icon-dropdown),
.hx-main-menu > .hx-menu-item > .hx-menu-link .hx-icon:not(.hx-icon-dropdown),
.hx-ai-icon {
    width: 24px;
    height: 24px;
}

.hx-menu-item {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.hx-menu-item-domain::after,
.hx-menu-item-hosting::after,
.hx-menu-item-server::after,
.hx-menu-item-ai::after,
.hx-menu-item-mail::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -24px;
    width: 180px;
    height: 28px;
}

.hx-mega-menu {
    position: fixed;
    top: 134px;
    left: 50%;
    z-index: 40;
    width: min(1100px, calc(100vw - 36px));
    padding: 28px 27px;
    border-radius: 6px;
    background: #f0fffc;
    box-shadow: 0 28px 60px rgba(3, 37, 31, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(-50%, 10px, 0);
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
}

.hx-mega-menu::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 194px;
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 14px solid #f0fffc;
}

.hx-hosting-mega::before {
    left: 340px;
}

.hx-server-mega::before {
    left: 484px;
}

.hx-ai-mega::before {
    left: 641px;
}

.hx-mail-mega {
    position: absolute;
    top: calc(100% + 28px);
    left: 50%;
    width: min(626px, calc(100vw - 36px));
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    padding: 28px 24px;
}

.hx-mail-mega::before {
    left: 50%;
    transform: translateX(-50%);
}

body.hx-nav-stuck .hx-mail-mega {
    top: calc(100% + 28px);
}

.hx-menu-item:hover .hx-mega-menu,
.hx-menu-item:focus-within .hx-mega-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0);
}

.hx-domain-mega,
.hx-hosting-mega,
.hx-server-mega,
.hx-ai-mega {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 207px;
    gap: 28px;
    align-items: stretch;
}

.hx-mega-links {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 25px;
}

.hx-mail-links {
    display: grid;
    gap: 25px;
}

.hx-main-menu .hx-mega-link {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    column-gap: 11px;
    min-height: 58px;
    padding: 8px 10px;
    border-radius: 10px;
    color: #343131;
    text-decoration: none;
    transition: background 180ms ease, border-radius 180ms ease;
}

.hx-main-menu .hx-mega-link:hover,
.hx-main-menu .hx-mega-link:focus {
    color: #343131;
    background: #e0f9f4;
    text-decoration: none;
}

.hx-mega-icon {
    position: relative;
    width: 50px;
    height: 58px;
    border-radius: 6px;
    color: #528076;
    background: #e0f9f4;
    -webkit-mask: none;
    mask: none;
}

.hx-mega-icon::before {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    width: 35px;
    height: 35px;
    background: currentColor;
    transform: translate(-50%, -50%);
    -webkit-mask: var(--hx-icon-url) center / contain no-repeat;
    mask: var(--hx-icon-url) center / contain no-repeat;
    transition: transform 420ms ease;
}

.hx-main-menu .hx-mega-link:hover .hx-mega-icon::before,
.hx-main-menu .hx-mega-link:focus .hx-mega-icon::before {
    transform: translate(-50%, -50%) rotate(360deg);
}

.hx-mega-link strong {
    display: block;
    margin-bottom: 2px;
    color: #343131;
    font-size: 15px;
    line-height: 1.12;
    font-weight: 600;
}

.hx-mega-link > span:last-child {
    min-width: 0;
}

.hx-mega-link em {
    display: block;
    margin: 0;
    color: #343131;
    font-size: 13px;
    line-height: 1.22;
    font-style: normal;
    font-weight: 500;
    overflow-wrap: anywhere;
}

.hx-mega-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 127px;
    min-height: 26px;
    margin-top: 9px;
    padding: 0 14px;
    border-radius: 7px;
    color: #fff;
    background: #ff8a13;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
}

.hx-mail-visual {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hx-mail-lottie {
    width: 284px;
    max-width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    background: transparent;
}

.hx-mail-lottie svg,
.hx-mail-lottie canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.hx-mail-visual p {
    margin: 9px 0 0;
    color: #1e4e42;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 400;
}

.hx-mega-cta {
    display: flex;
    min-height: 141px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border-radius: 6px;
    background: #e0f9f4;
    text-align: center;
}

.hx-mega-cta p {
    margin: 0 0 27px;
    color: #3b3b3b;
    font-size: 16px;
    line-height: 1.22;
}

.hx-mega-cta p strong,
.hx-mega-cta p span,
.hx-mega-cta p em {
    display: block;
}

.hx-mega-cta p strong {
    font-weight: 600;
}

.hx-mega-cta p span {
    font-weight: 400;
}

.hx-mega-cta p em {
    color: #30956c;
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
}

.hx-mega-cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 35px;
    padding: 0 12px;
    border-radius: 999px;
    color: #c9ffe9;
    background: #1e4e42;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 180ms ease, background 180ms ease;
}

.hx-mega-cta a:hover,
.hx-mega-cta a:focus {
    color: #c9ffe9;
    background: #256b5a;
    text-decoration: none;
    transform: translateY(-2px);
}

.hx-ai-icon {
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.hx-icon-dropdown {
    width: 15px;
    height: 15px;
    color: #2ab28d;
}

.hx-nav-actions {
    display: flex;
    align-items: center;
    gap: 13px;
}

.hx-panel-btn,
.hx-cart-btn,
.hx-domain-form button,
.hx-card-btn,
.hx-service-btn {
    border: 0;
    color: #fff;
    background: linear-gradient(180deg, #38b07c 0%, #138b77 100%);
    box-shadow: 0 10px 22px rgba(19, 139, 119, 0.18);
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.hx-panel-btn,
.hx-cart-btn {
    background: linear-gradient(180deg, #18825a 0%, #38b07c 100%);
    box-shadow: 0 10px 22px rgba(24, 130, 90, 0.2);
}

.hx-panel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 45px;
    padding: 0 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
}

.hx-panel-btn-icon {
    display: none;
    width: 20px;
    height: 20px;
}

.hx-cart-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 10px;
    font-size: 25px;
}

.hx-cart-btn #cartItemCount {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: #fff;
    color: var(--hx-deep);
    font-size: 10px;
    line-height: 18px;
    font-weight: 600;
}

.hx-cart-btn .hx-icon-basket {
    width: 25px;
    height: 25px;
}

.hx-panel-btn:hover,
.hx-cart-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    background: linear-gradient(180deg, #22a36f 0%, #43c98c 100%);
    box-shadow: 0 15px 28px rgba(34, 163, 111, 0.26);
}

.hx-menu-toggle {
    display: none;
    border: 1px solid rgba(255, 255, 255, 0.22);
    width: 44px;
    height: 44px;
    border-radius: 8px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

.hx-breadcrumb {
    background: #eaf8f4;
}

#main-body.hx-main-home {
    padding: 0;
    background: var(--hx-surface);
}

.hx-home-container {
    width: 100%;
}

.hx-home {
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(247, 255, 254, 0) 0%, var(--hx-surface) 23%),
        var(--hx-surface);
}

.hx-hero {
    position: relative;
    min-height: 586px;
    margin-top: -1px;
    padding: 268px 0 45px;
    color: #fff;
    background: linear-gradient(180deg, #071b17 0%, #144e43 100%);
}

.hx-hero-video,
.hx-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hx-hero-video {
    object-fit: cover;
    opacity: 0.34;
}

.hx-hero-overlay {
    background:
        linear-gradient(180deg, rgba(7, 27, 23, 0.32) 0%, rgba(20, 78, 67, 0.34) 100%);
}

.hx-hero .container {
    position: relative;
    z-index: 2;
}

.hx-hero-copy {
    margin: 0 auto 34px;
    text-align: center;
}

.hx-hero h1 {
    margin: 0;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;
}

.hx-hero h1 span {
    color: var(--hx-bright);
}

.hx-domain-panel {
    display: grid;
    grid-template-columns: 204px minmax(0, 1fr);
    align-items: center;
    max-width: 974px;
    min-height: 199px;
    margin: 0 auto;
    border-radius: 10px;
    background: rgba(59, 114, 95, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(5px);
}

.hx-domain-globe {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 199px;
    color: rgba(160, 246, 211, 0.58);
}

.hx-domain-globe .hx-icon {
    width: 200px;
    height: 200px;
}

.hx-domain-content {
    padding: 28px 28px 25px 0;
}

.hx-domain-tabs {
    display: flex;
    gap: 24px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.hx-domain-tabs a {
    color: #67ae91;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.hx-domain-tabs a.active,
.hx-domain-tabs a:hover {
    color: #a0f6d3;
    text-decoration: none;
}

.hx-domain-form {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 152px;
    align-items: center;
    min-height: 55px;
    border-radius: 10px;
    padding: 6px 7px 6px 18px;
    background: #0f392d;
    border: 1px solid rgba(117, 238, 196, 0.16);
}

.hx-domain-form > .hx-icon-search {
    color: #d9fff4;
    font-size: 20px;
}

.hx-domain-form input {
    width: 100%;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font-size: 16px;
}

.hx-domain-form input::placeholder {
    color: #859e97;
}

.hx-domain-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-radius: 11px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    background: #35ad7c;
    box-shadow: none;
}

.hx-domain-form button .hx-icon-button {
    width: 19px;
    height: 19px;
    margin-right: 9px;
    transform: none;
}

.hx-tlds {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 16px;
    color: #70d4a2;
    font-size: 16px;
}

.hx-tlds strong {
    margin-right: 5px;
    color: #fff;
    font-size: 22px;
}

.hx-feature-cards {
    position: relative;
    z-index: 5;
    margin-top: 0;
    padding: 30px 0 65px;
    background: #f7fffe;
}

.hx-feature-grid {
    display: grid;
    grid-template-columns: 1.7fr 1.05fr 1.05fr;
    gap: 30px;
}

.hx-feature-card {
    position: relative;
    min-height: 350px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    border-radius: 10px;
    isolation: isolate;
    box-shadow: var(--hx-shadow);
    color: #fff;
    text-decoration: none;
    background: #083730;
    transform: translateZ(0);
}

.hx-feature-card img,
.hx-feature-card video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 220ms ease, transform 420ms ease;
}

.hx-feature-card video {
    opacity: 0;
}

.hx-feature-card-video video {
    opacity: 1;
}

.hx-feature-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(5, 42, 37, 0.88), rgba(5, 42, 37, 0.22));
    z-index: 1;
}

.hx-feature-card:not(.hx-feature-card-large)::after {
    background: linear-gradient(180deg, rgba(5, 42, 37, 0.08), rgba(5, 42, 37, 0.83));
}

.hx-feature-card-blue::after {
    background: linear-gradient(180deg, rgba(4, 29, 70, 0.12), rgba(3, 22, 52, 0.88));
}

.hx-feature-card:hover img {
    transform: scale(1.05);
}

.hx-feature-card:hover video {
    opacity: 1;
}

.hx-feature-card div {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 34px;
}

.hx-feature-card h2 {
    max-width: 310px;
    margin: 0 0 16px;
    color: #fff;
    font-size: 22px;
    line-height: 1.12;
    font-weight: 700;
}

.hx-feature-card-large h2 {
    color: #1cebf5;
    font-weight: 600;
    font-size: 27px;
}

.hx-feature-card:not(.hx-feature-card-large) {
    align-items: flex-end;
}

.hx-feature-card:not(.hx-feature-card-large) div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hx-feature-card:not(.hx-feature-card-large) h2 {
    margin-left: auto;
    margin-right: auto;
}

.hx-feature-card p {
    max-width: 230px;
    margin: 0 0 20px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 17px;
    line-height: 1.45;
}

.hx-card-btn,
.hx-service-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 28px;
    border-radius: 999px;
    font-style: normal;
    font-size: 16px;
    font-weight: 500;
    background: #1e3231;
    box-shadow: none;
}

.hx-card-btn {
    color: #062f2a;
    background: linear-gradient(180deg, #1cebf5 0%, #3c8f87 100%);
}

.hx-icon-button {
    width: 14px;
    height: 14px;
    margin-right: 9px;
    transform: rotate(-90deg);
}

.hx-feature-card:nth-child(2) .hx-card-btn {
    background: linear-gradient(180deg, #70e5b8 0%, #72a591 100%);
}

.hx-feature-card-blue .hx-card-btn {
    color: #fff;
    background: linear-gradient(180deg, #588f93 0%, #1d75b1 100%);
}

.hx-domain-form button:hover {
    background: #41d390;
}

.hx-feature-card:hover .hx-card-btn,
.hx-service-card:hover .hx-service-btn {
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(30, 50, 49, 0.16);
}

.hx-feature-card:hover .hx-card-btn {
    color: #062f2a;
    background: linear-gradient(180deg, #47f3fb 0%, #4aa79f 100%);
}

.hx-feature-card:nth-child(2):hover .hx-card-btn {
    background: linear-gradient(180deg, #8af4ca 0%, #80bca5 100%);
}

.hx-feature-card-blue:hover .hx-card-btn {
    color: #fff;
    background: linear-gradient(180deg, #6aa2a7 0%, #258bd0 100%);
}

.hx-services {
    padding: 28px 0 71px;
    background:
        linear-gradient(180deg, #f7fffe 0%, #ebf9f7 70%, #cfe5de 100%);
}

.hx-section-title {
    margin-bottom: 26px;
}

.hx-section-title p {
    margin: 0 0 4px;
    color: #1db195;
    font-size: 20px;
    font-weight: 600;
}

.hx-section-title h2 {
    margin: 0;
    color: var(--hx-ink);
    font-size: 26px;
    line-height: 1.15;
    font-weight: 700;
}

.hx-section-title-center {
    text-align: center;
}

.hx-service-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 21px;
}

.hx-service-card {
    position: relative;
    box-sizing: border-box;
    height: 222px;
    min-height: 0;
    padding: 58px 16px 70px;
    overflow: hidden;
    border: 1px solid rgba(15, 99, 85, 0.14);
    border-radius: 8px;
    background: linear-gradient(180deg, #f3fcff 0%, #e1fffb 100%);
    box-shadow: 0 12px 28px rgba(7, 49, 43, 0.08);
    color: var(--hx-ink-2);
    text-decoration: none;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease, background 220ms ease;
}

.hx-service-card-info {
    display: none;
}

.hx-service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background:
        radial-gradient(circle at 88% 18%, rgba(29, 177, 149, 0.1), transparent 30%),
        linear-gradient(180deg, #f7fffe 0%, #e6fffb 100%);
    transition: opacity 220ms ease;
}

.hx-service-card:hover {
    color: var(--hx-ink);
    text-decoration: none;
    transform: translateY(-3px);
    border-color: rgba(35, 200, 146, 0.36);
    box-shadow: 0 16px 32px rgba(7, 49, 43, 0.1);
}

.hx-service-card:hover::before {
    opacity: 1;
}

.hx-service-card > * {
    position: relative;
    z-index: 1;
}

.hx-service-icon {
    position: absolute;
    top: 14px;
    right: 24px;
    width: 48px;
    height: 48px;
    color: #343c54;
    opacity: 0.9;
    transition: transform 240ms ease, color 180ms ease;
}

.hx-service-card:hover .hx-service-icon {
    color: #343c54;
    transform: translateY(-2px) rotate(-3deg) scale(1.04);
}

.hx-service-card h3 {
    min-height: 42px;
    max-width: 158px;
    margin: 0 0 12px;
    color: #343c54;
    font-size: 18px;
    line-height: 1.15;
    font-weight: 700;
}

.hx-service-card strong {
    display: block;
    color: #0a0a0a;
    font-size: 21px;
    line-height: 1;
    font-weight: 600;
}

.hx-service-card > span:not(.hx-service-icon) {
    display: block;
    margin: 7px 0 20px;
    color: #3d4d55;
    font-size: 13px;
    font-weight: 500;
}

.hx-service-btn {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 13px;
    width: auto;
    min-height: 38px;
    background: #1e3231;
}

.hx-why {
    margin-top: -1px;
    padding: 34px 0 0;
    background:
        linear-gradient(180deg, #cfe5de 0%, #bbd4cd 56%, #a8c2bc 100%);
}

.hx-why-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    align-items: end;
    gap: 48px;
}

.hx-why-person {
    min-height: 548px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hx-why-person img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 32px rgba(0, 40, 30, 0.2));
}

.hx-why-content {
    padding: 42px 0 0;
}

.hx-why-content .hx-section-title h2 {
    font-size: 31px;
}

.hx-why-content .hx-section-title p {
    max-width: 760px;
    color: #24443f;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
}

.hx-why-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 48px;
    margin-bottom: 20px;
}

.hx-why-grid article {
    min-height: 206px;
    padding: 28px 24px 24px;
    border: 1px solid rgba(11, 120, 96, 0.42);
    border-radius: 8px;
    background: rgba(237, 249, 246, 0.52);
    text-align: center;
    box-shadow: 0 12px 24px rgba(7, 49, 43, 0.06);
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.hx-why-grid article:hover {
    transform: translateY(-6px);
    background: rgba(244, 255, 252, 0.76);
    border-color: rgba(35, 200, 146, 0.72);
    box-shadow: 0 20px 38px rgba(7, 49, 43, 0.14);
}

.hx-why-grid img {
    width: 74px;
    height: 74px;
    object-fit: contain;
    margin-bottom: 18px;
    transition: transform 220ms ease;
}

.hx-why-grid article:hover img {
    transform: translateY(-4px) scale(1.08);
}

.hx-why-grid h3 {
    margin: 0 0 12px;
    color: #1d594d;
    font-size: 16px;
    font-weight: 600;
}

.hx-why-grid p {
    margin: 0;
    color: #31504b;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 500;
}

.hx-apps {
    padding: 40px 0;
    color: #fff;
    background: linear-gradient(180deg, #0d5a4c 0%, #0a4c41 100%);
}

.hx-apps-inner {
    display: grid;
    grid-template-columns: 350px minmax(0, 1fr);
    align-items: center;
    gap: 34px;
}

.hx-apps-title {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
}

.hx-apps-title .hx-icon-apps-title {
    width: 100px;
    height: 100px;
    color: #fff;
}

.hx-apps-title h2 {
    margin: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1.12;
    font-weight: 600;
}

.hx-apps-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    margin-top: 10px;
    padding: 0 18px;
    border-radius: 999px;
    background: #70d4a2;
    color: #0a4e43;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 180ms ease, background 180ms ease;
}

.hx-apps-cta:hover {
    color: #0a4e43;
    background: #7be2b0;
    text-decoration: none;
    transform: translateY(-2px);
}

.hx-app-list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
}

.hx-app-list a {
    min-height: 112px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(139, 238, 204, 0.28);
    border-radius: 8px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.hx-app-list img {
    width: 54px;
    height: 54px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: transform 220ms ease, filter 180ms ease;
}

.hx-app-list a:hover {
    transform: translateY(-6px);
    border-color: rgba(180, 255, 229, 0.72);
    background: rgba(72, 214, 166, 0.18);
    box-shadow: 0 18px 36px rgba(0, 36, 31, 0.2);
}

.hx-app-list a:hover img {
    transform: scale(1.09);
    filter: brightness(0) invert(1) drop-shadow(0 8px 12px rgba(75, 244, 183, 0.25));
}

.hx-reviews {
    padding: 90px 0 104px;
    background: linear-gradient(180deg, #edf9f5 0%, #f3fbf8 100%);
}

.hx-review-carousel {
    max-width: 1150px;
    margin: 0 auto;
    overflow: hidden;
}

.hx-review-track {
    display: flex;
    gap: 32px;
    will-change: transform;
    transition: transform 420ms ease;
}

.hx-review-card {
    position: relative;
    flex: 0 0 calc((100% - 64px) / 3);
    min-height: 212px;
    margin: 52px 0 18px;
    padding: 54px 24px 26px;
    border: 1px solid rgba(8, 89, 75, 0.14);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 12px 28px rgba(7, 49, 43, 0.07);
}

.hx-review-card img {
    position: absolute;
    top: -54px;
    right: 28px;
    width: 106px;
    height: 106px;
    border-radius: 50%;
    border: 4px solid var(--hx-mint);
    object-fit: cover;
}

.hx-review-card h3 {
    margin: 0 0 4px;
    color: #40505c;
    font-size: 16px;
    font-weight: 600;
}

.hx-review-card strong {
    display: block;
    margin-bottom: 20px;
    color: #27bf8c;
    font-size: 15px;
    font-weight: 600;
}

.hx-review-card p {
    margin: 0;
    color: #53636a;
    font-size: 14px;
    line-height: 1.46;
    font-weight: 400;
}

.hx-review-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 22px;
}

.hx-review-dots button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #1c9a82;
    opacity: 0.58;
    cursor: pointer;
    transition: width 180ms ease, opacity 180ms ease;
}

.hx-review-dots button.active {
    width: 64px;
    opacity: 1;
    background: var(--hx-mint);
}

.hx-contact-strip {
    padding: 28px 0;
    background: #10473c;
}

.hx-contact-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.hx-contact-grid a {
    min-height: 78px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    padding: 15px 20px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    transition: transform 180ms ease, background 180ms ease;
}

.hx-contact-grid a:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.2);
}

.hx-contact-grid i {
    grid-row: span 2;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 48, 41, 0.28);
    font-size: 27px;
}

.hx-contact-grid i::before,
.hx-footer-quick i::before {
    content: "";
    display: block;
    width: 1em;
    height: 1em;
    background: currentColor;
    -webkit-mask: var(--hx-icon-url) center / contain no-repeat;
    mask: var(--hx-icon-url) center / contain no-repeat;
}

.hx-contact-grid .fa-mobile-alt {
    --hx-icon-url: url("../assets/hostidex/icons/line-phone.svg");
}

.hx-contact-grid .fa-envelope {
    --hx-icon-url: url("../assets/hostidex/icons/line-envelope.svg");
}

.hx-contact-grid .fa-ticket-alt,
.hx-footer-quick .fa-question-circle {
    --hx-icon-url: url("../assets/hostidex/icons/line-ticket.svg");
}

.hx-contact-grid .fa-headset {
    --hx-icon-url: url("../assets/hostidex/icons/line-headphone.svg");
}

.hx-contact-grid .hx-contact-icon {
    grid-row: span 2;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0, 48, 41, 0.28);
    color: #fff;
}

.hx-contact-grid .hx-contact-icon .hx-icon {
    width: 27px;
    height: 27px;
    color: #fff;
}

.hx-contact-grid span,
.hx-contact-grid strong {
    min-width: 0;
}

.hx-contact-grid span {
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 500;
}

.hx-contact-grid strong {
    color: #fff;
    font-size: 18px;
    line-height: 1.15;
    font-weight: 600;
}

.hx-footer-main {
    color: #fff;
    background:
        linear-gradient(180deg, rgba(3, 48, 41, 0.96), rgba(3, 48, 41, 0.98)),
        url("../assets/hostidex/img/world-map.webp") center top / cover no-repeat;
}

.hx-footer-brand-row {
    display: grid;
    grid-template-columns: 260px 240px minmax(0, 1fr);
    align-items: center;
    gap: 28px;
    padding: 34px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.hx-footer-logo img {
    width: 176px;
    height: auto;
}

.hx-socials {
    display: flex;
    gap: 14px;
}

.hx-socials a {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    transition: transform 180ms ease, background 180ms ease;
}

.hx-socials img {
    width: 21px;
    height: 21px;
    filter: brightness(0) invert(1);
}

.hx-socials a:hover {
    transform: translateY(-3px);
    background: rgba(49, 208, 152, 0.25);
}

.hx-footer-quick {
    display: flex;
    justify-content: flex-end;
    gap: 26px;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: 14px;
}

.hx-footer-quick a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.hx-footer-quick i {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    color: #fff;
    font-style: normal;
}

.hx-footer-quick .hx-icon {
    width: 14px;
    height: 14px;
    color: #fff;
}

.hx-footer-quick a:hover .hx-icon {
    color: var(--hx-mint-2);
}

.hx-footer-quick a:hover i {
    color: var(--hx-mint-2);
}

.hx-footer-quick .fa-comment-dots {
    --hx-icon-url: url("../assets/hostidex/icons/line-globe.svg");
}

.hx-footer-quick .fa-chart-bar {
    --hx-icon-url: url("../assets/hostidex/icons/line-layers.svg");
}

.hx-footer-quick a:hover,
.hx-footer-links a:hover {
    color: var(--hx-mint-2);
}

.hx-footer-links {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 44px;
    padding: 34px 0 42px;
}

.hx-footer-links h3 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 17px;
    line-height: 1.1;
    font-weight: 600;
    text-transform: uppercase;
}

.hx-footer-links h3::after {
    content: "";
    display: block;
    width: 54px;
    height: 2px;
    margin-top: 9px;
    background: rgba(255, 255, 255, 0.4);
}

.hx-footer-links a {
    display: block;
    margin: 10px 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
}

.hx-footer-links a::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 8px;
    background: var(--hx-mint-2);
    vertical-align: -1px;
    -webkit-mask: url("../assets/hostidex/icons/line-angle-double-right.svg") center / contain no-repeat;
    mask: url("../assets/hostidex/icons/line-angle-double-right.svg") center / contain no-repeat;
}

.hx-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    min-height: 68px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.hx-footer-bottom p {
    margin: 0;
    color: rgba(255, 255, 255, 0.86);
    font-size: 13px;
    font-weight: 500;
}

.hx-footer-bottom img {
    max-width: 250px;
    height: auto;
}

@media (max-width: 1199px) {
    .hx-nav-inner {
        justify-content: flex-start;
    }

    .hx-brand {
        order: 1;
    }

    .hx-nav-actions {
        order: 2;
        margin-left: auto;
    }

    .hx-menu-toggle {
        order: 3;
        margin-left: 8px;
    }

    .hx-main-menu {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 90;
        display: block !important;
        width: min(360px, calc(100vw - 34px));
        height: 100vh;
        padding: 22px 18px 24px;
        overflow-y: auto;
        border-radius: 0;
        background: linear-gradient(180deg, rgba(5, 47, 41, 0.92) 0%, rgba(9, 63, 53, 0.92) 100%);
        box-shadow: -24px 0 54px rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(12px);
        opacity: 0;
        visibility: hidden;
        transform: translateX(105%);
        transition: transform 220ms ease, opacity 220ms ease, visibility 220ms ease;
    }

    .hx-main-menu.show,
    .hx-main-menu.collapsing {
        display: block !important;
        height: 100vh !important;
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
    }

    body.hx-menu-open .hx-menu-toggle {
        opacity: 0;
        pointer-events: none;
    }

    .hx-mobile-menu-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        margin-bottom: 18px;
        padding-bottom: 18px;
        border-bottom: 1px solid rgba(175, 214, 199, 0.14);
    }

    .hx-mobile-menu-logo img {
        display: block;
        width: 148px;
        height: auto;
    }

    .hx-mobile-menu-close {
        display: inline-flex;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(175, 214, 199, 0.18);
        border-radius: 10px;
        color: #d8fff0;
        background: rgba(255, 255, 255, 0.06);
    }

    .hx-menu-item {
        display: block;
    }

    .hx-menu-item-domain::after,
    .hx-menu-item-hosting::after,
    .hx-menu-item-server::after,
    .hx-menu-item-ai::after,
    .hx-menu-item-mail::after {
        display: none;
    }

    .hx-main-menu > a,
    .hx-main-menu > .hx-menu-item > .hx-menu-link {
        width: 100%;
        min-height: 44px;
        justify-content: flex-start;
        padding: 0 4px;
        border-bottom: 1px solid rgba(175, 214, 199, 0.12);
        color: #f7fffc;
        font-size: 15px;
        transform: none;
    }

    .hx-main-menu > a:hover,
    .hx-main-menu > a:focus,
    .hx-main-menu > .hx-menu-item:hover > .hx-menu-link,
    .hx-main-menu > .hx-menu-item:focus-within > .hx-menu-link {
        transform: none;
    }

    .hx-main-menu > a .hx-icon:not(.hx-icon-dropdown),
    .hx-main-menu > .hx-menu-item > .hx-menu-link .hx-icon:not(.hx-icon-dropdown),
    .hx-ai-icon {
        width: 18px;
        height: 18px;
    }

    .hx-main-menu > .hx-menu-item.is-open > .hx-menu-link {
        color: var(--hx-mint-2);
    }

    .hx-main-menu > .hx-menu-item > .hx-menu-link .hx-icon-dropdown {
        margin-left: auto;
        transition: transform 180ms ease;
    }

    .hx-main-menu > .hx-menu-item.is-open > .hx-menu-link .hx-icon-dropdown {
        transform: rotate(180deg);
    }

    .hx-mega-menu {
        position: static;
        display: none;
        width: 100%;
        max-width: none;
        min-width: 0;
        left: auto;
        right: auto;
        top: auto;
        padding: 8px 0 10px 10px;
        border-radius: 0;
        background: transparent;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
    }

    .hx-menu-item.is-open > .hx-mega-menu {
        display: block;
    }

    .hx-main-menu .hx-menu-item:hover > .hx-mega-menu,
    .hx-main-menu .hx-menu-item:focus-within > .hx-mega-menu {
        left: auto;
        top: auto;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }

    .hx-mega-menu::before {
        display: none;
    }

    .hx-domain-mega,
    .hx-hosting-mega,
    .hx-server-mega,
    .hx-ai-mega,
    .hx-mail-mega {
        grid-template-columns: 1fr;
        gap: 6px;
        width: 100%;
        min-width: 0;
    }

    .hx-mega-links {
        display: block;
        width: 100%;
        min-width: 0;
    }

    .hx-mail-links {
        display: block;
        gap: 6px;
    }

    .hx-main-menu .hx-mega-link {
        display: flex;
        width: 100%;
        min-width: 0;
        min-height: 38px;
        align-items: center;
        gap: 9px;
        padding: 6px 8px;
        border-radius: 8px;
        color: #d8fff0;
    }

    .hx-main-menu .hx-mega-link:hover,
    .hx-main-menu .hx-mega-link:focus {
        background: rgba(224, 249, 244, 0.1);
        color: #d8fff0;
    }

    .hx-mega-icon {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        color: #91e8c4;
        background: rgba(224, 249, 244, 0.1);
    }

    .hx-mega-icon::before {
        width: 14px;
        height: 14px;
    }

    .hx-mega-link > span:last-child {
        display: block;
        min-width: 0;
        flex: 1 1 auto;
    }

    .hx-mega-link strong {
        color: #f7fffc;
        font-size: 13px;
        line-height: 1.15;
        font-weight: 500;
    }

    .hx-mega-link em {
        display: none;
    }

    .hx-mega-badge {
        min-width: 92px;
        min-height: 22px;
        margin-top: 6px;
        padding: 0 10px;
        font-size: 12px;
    }

    .hx-mega-cta,
    .hx-mail-visual {
        display: none;
    }

    .hx-menu-toggle {
        position: relative;
        z-index: 100;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .hx-feature-grid,
    .hx-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hx-feature-card-large {
        grid-column: span 2;
    }

    .hx-why-layout {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 28px;
    }

    .hx-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px;
    }

    .hx-apps-inner,
    .hx-footer-brand-row {
        grid-template-columns: 1fr;
    }

    .hx-footer-quick {
        justify-content: flex-start;
    }

    .hx-contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .hx-utility {
        font-size: 12px;
    }

    .hx-utility-inner {
        min-height: 36px;
        gap: 0;
    }

    .hx-utility-right {
        display: none;
    }

    .hx-utility-left {
        width: 100%;
        min-width: 0;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 6px;
    }

    .hx-utility a {
        gap: 5px;
        white-space: nowrap;
        min-width: 0;
    }

    .hx-utility .hx-icon {
        width: 13px;
        height: 13px;
    }

    .hx-label-full {
        display: none;
    }

    .hx-label-mobile {
        display: inline;
    }

    .hx-nav {
        padding: 16px 0;
    }

    .hx-brand img {
        width: 145px;
    }

    .hx-nav-actions {
        gap: 8px;
    }

    .hx-panel-btn {
        width: 38px;
        min-height: 38px;
        padding: 0;
        font-size: 12px;
    }

    .hx-panel-btn-label {
        display: none;
    }

    .hx-panel-btn-icon {
        display: inline-block;
        width: 18px;
        height: 18px;
    }

    .hx-cart-btn {
        width: 38px;
        height: 38px;
    }

    .hx-hero {
        min-height: auto;
        padding: 142px 0 36px;
    }

    .hx-hero h1 {
        font-size: 22px;
        line-height: 1.28;
    }

    .hx-domain-panel {
        grid-template-columns: 54px minmax(0, 1fr);
        max-width: 100%;
        min-height: 0;
        padding: 12px;
        align-items: start;
    }

    .hx-domain-globe {
        min-height: 0;
        align-items: flex-start;
        padding-top: 4px;
    }

    .hx-domain-globe .hx-icon {
        width: 44px;
        height: 44px;
    }

    .hx-domain-content {
        padding: 0;
    }

    .hx-domain-tabs {
        display: none;
    }

    .hx-domain-form {
        grid-template-columns: 22px minmax(0, 1fr) 88px;
        min-height: 46px;
        gap: 6px;
        padding: 5px 5px 5px 10px;
    }

    .hx-domain-form input {
        font-size: 13px;
    }

    .hx-domain-form button {
        grid-column: auto;
        width: 100%;
        height: 36px;
        border-radius: 9px;
        font-size: 13px;
    }

    .hx-domain-form button .hx-icon-button {
        width: 15px;
        height: 15px;
        margin-right: 5px;
    }

    .hx-tlds {
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: 8px;
        margin-top: 10px;
        overflow-x: auto;
        color: #70d4a2;
        font-size: 12px;
        scrollbar-width: none;
    }

    .hx-tlds::-webkit-scrollbar {
        display: none;
    }

    .hx-tlds span {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .hx-tlds strong {
        margin-right: 3px;
        font-size: 14px;
    }

    .hx-feature-cards {
        margin-top: 0;
        padding: 24px 0 48px;
    }

    .hx-feature-grid,
    .hx-service-grid,
    .hx-why-layout,
    .hx-why-grid,
    .hx-app-list,
    .hx-contact-grid,
    .hx-footer-links {
        grid-template-columns: 1fr;
    }

    .hx-feature-card-large {
        grid-column: auto;
    }

    .hx-feature-card {
        min-height: 230px;
    }

    .hx-feature-card div {
        padding: 24px;
    }

    .hx-feature-card h2 {
        font-size: 22px;
    }

    .hx-review-track {
        gap: 18px;
    }

    .hx-review-card {
        flex-basis: 100%;
    }

    .hx-services,
    .hx-reviews {
        padding: 54px 0;
    }

    .hx-services .hx-section-title,
    .hx-why-content .hx-section-title {
        text-align: center;
    }

    .hx-why {
        padding-top: 22px;
    }

    .hx-why-person {
        min-height: 0;
        max-width: 280px;
        margin: 0 auto;
    }

    .hx-apps-inner {
        grid-template-columns: 1fr;
    }

    .hx-apps-title {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .hx-apps-title .hx-icon-apps-title {
        width: 46px;
        height: 46px;
    }

    .hx-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .hx-feature-card-large {
        grid-column: 1 / -1;
    }

    .hx-feature-card-large h2 {
        font-size: 20px;
    }

    .hx-feature-card p {
        font-size: 13px;
        line-height: 1.35;
    }

    .hx-feature-card-large .hx-card-btn {
        min-height: 34px;
        padding: 0 14px;
        font-size: 13px;
    }

    .hx-feature-card:not(.hx-feature-card-large) {
        min-height: 178px;
    }

    .hx-feature-card:not(.hx-feature-card-large) div {
        padding: 16px 12px;
    }

    .hx-feature-card:not(.hx-feature-card-large) h2 {
        font-size: 15px;
        line-height: 1.16;
    }

    .hx-feature-card:not(.hx-feature-card-large) .hx-card-btn {
        min-height: 32px;
        padding: 0 10px;
        font-size: 12px;
    }

    .hx-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .hx-service-card-info {
        display: flex;
    }

    .hx-service-card {
        height: 170px;
        padding: 38px 10px 50px;
    }

    .hx-service-icon {
        top: 12px;
        right: 12px;
        width: 34px;
        height: 34px;
    }

    .hx-service-card h3 {
        min-height: 25px;
        max-width: 100%;
        margin: 0 0 8px;
        font-size: 14px;
        line-height: 1.15;
    }

    .hx-service-card strong {
        font-size: 17px;
    }

    .hx-service-card > span:not(.hx-service-icon) {
        margin: 5px 0 12px;
        font-size: 11px;
        line-height: 1.15;
    }

    .hx-service-btn {
        left: 10px;
        right: 10px;
        bottom: 13px;
        min-height: 31px;
        padding: 0 8px;
        font-size: 11px;
    }

    .hx-service-card-info {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-top: 40px;
        text-align: center;
    }

    .hx-service-card-info .hx-service-icon {
        right: 50%;
        transform: translateX(50%);
    }

    .hx-service-card-info:hover .hx-service-icon {
        transform: translateX(50%) translateY(-2px) rotate(-3deg) scale(1.04);
    }

    .hx-service-card-info h3 {
        min-height: 25px;
        margin-bottom: 8px;
        text-align: center;
    }

    .hx-service-card-info strong {
        display: block;
        font-size: 16px;
        text-align: center;
    }

    .hx-service-card-info > span:not(.hx-service-icon) {
        display: none;
    }

    .hx-why-layout {
        grid-template-columns: 1fr;
    }

    .hx-why-content {
        order: 1;
    }

    .hx-why-person {
        order: 2;
    }

    .hx-why-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .hx-why-grid article {
        min-height: 180px;
        padding: 18px 12px;
    }

    .hx-why-grid img {
        width: 44px;
        height: 44px;
    }

    .hx-why-grid h3 {
        font-size: 14px;
    }

    .hx-why-grid p {
        font-size: 12px;
        line-height: 1.35;
    }

    .hx-app-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .hx-app-list a:nth-child(4) {
        display: none;
    }

    .hx-footer-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 26px 18px;
    }

    .hx-footer-brand-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px 12px;
        padding: 24px 0;
    }

    .hx-footer-logo img {
        width: 142px;
    }

    .hx-socials {
        justify-content: flex-end;
        gap: 8px;
    }

    .hx-socials a {
        width: 30px;
        height: 30px;
        border-radius: 7px;
    }

    .hx-socials img {
        width: 15px;
        height: 15px;
    }

    .hx-footer-quick {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        justify-content: stretch;
        font-size: 11px;
    }

    .hx-footer-quick a {
        display: inline-flex;
        min-width: 0;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 4px;
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.06);
        line-height: 1.05;
        text-align: center;
        white-space: nowrap;
    }

    .hx-footer-quick i {
        font-size: 10px;
    }

    .hx-footer-links > div:nth-child(5) {
        grid-column: 1 / -1;
    }

    .hx-footer-bottom {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 18px 0;
    }

    .hx-footer-bottom img {
        max-width: 220px;
    }
}

@media (max-width: 360px) {
    .hx-utility {
        font-size: 11px;
    }

    .hx-utility-left {
        gap: 4px;
    }

    .hx-utility a {
        gap: 4px;
    }
}

body.hx-template-domainregister .breadcrumb,
body.hx-template-domaintransfer .breadcrumb,
body.hx-template-domain-prosedurleri .breadcrumb,
body.hx-template-tr-gerekli-belgeler .breadcrumb,
body.hx-template-domain-fiyat-listesi .breadcrumb,
body.hx-template-web-hosting .breadcrumb,
body.hx-template-uygulama-hosting .breadcrumb,
body.hx-template-kurumsal-hosting .breadcrumb,
body.hx-template-reseller-hosting .breadcrumb,
body.hx-template-wordpress-hosting .breadcrumb,
body.hx-template-windows-hosting .breadcrumb,
body.hx-template-sanal-sunucu .breadcrumb,
body.hx-template-dedicated-sunucu .breadcrumb,
body.hx-template-hakkimizda .breadcrumb,
body.hx-template-ticari-bilgiler .breadcrumb,
body.hx-template-banka-hesaplarimiz .breadcrumb,
body.hx-template-destek-kapsami .breadcrumb,
body.hx-template-hizmet-sozlesmesi .breadcrumb,
body.hx-template-gizlilik-sozlesmesi .breadcrumb,
body.hx-template-iptal-iade-sartlari .breadcrumb,
body.hx-template-kvkk-aydinlatma-metni .breadcrumb,
body.hx-template-cerez-politikasi .breadcrumb {
    display: none;
}

body.hx-template-domainregister #main-body,
body.hx-template-domaintransfer #main-body,
body.hx-template-domain-prosedurleri #main-body,
body.hx-template-tr-gerekli-belgeler #main-body,
body.hx-template-domain-fiyat-listesi #main-body,
body.hx-template-web-hosting #main-body,
body.hx-template-uygulama-hosting #main-body,
body.hx-template-kurumsal-hosting #main-body,
body.hx-template-reseller-hosting #main-body,
body.hx-template-wordpress-hosting #main-body,
body.hx-template-windows-hosting #main-body,
body.hx-template-sanal-sunucu #main-body,
body.hx-template-dedicated-sunucu #main-body,
body.hx-template-hakkimizda #main-body,
body.hx-template-ticari-bilgiler #main-body,
body.hx-template-banka-hesaplarimiz #main-body,
body.hx-template-destek-kapsami #main-body,
body.hx-template-hizmet-sozlesmesi #main-body,
body.hx-template-gizlilik-sozlesmesi #main-body,
body.hx-template-iptal-iade-sartlari #main-body,
body.hx-template-kvkk-aydinlatma-metni #main-body,
body.hx-template-cerez-politikasi #main-body {
    padding: 0;
}

body.hx-template-domainregister #main-body > .container,
body.hx-template-domaintransfer #main-body > .container,
body.hx-template-domain-prosedurleri #main-body > .container,
body.hx-template-tr-gerekli-belgeler #main-body > .container,
body.hx-template-domain-fiyat-listesi #main-body > .container,
body.hx-template-web-hosting #main-body > .container,
body.hx-template-uygulama-hosting #main-body > .container,
body.hx-template-kurumsal-hosting #main-body > .container,
body.hx-template-reseller-hosting #main-body > .container,
body.hx-template-wordpress-hosting #main-body > .container,
body.hx-template-windows-hosting #main-body > .container,
body.hx-template-sanal-sunucu #main-body > .container,
body.hx-template-dedicated-sunucu #main-body > .container,
body.hx-template-hakkimizda #main-body > .container,
body.hx-template-ticari-bilgiler #main-body > .container,
body.hx-template-banka-hesaplarimiz #main-body > .container,
body.hx-template-destek-kapsami #main-body > .container,
body.hx-template-hizmet-sozlesmesi #main-body > .container,
body.hx-template-gizlilik-sozlesmesi #main-body > .container,
body.hx-template-iptal-iade-sartlari #main-body > .container,
body.hx-template-kvkk-aydinlatma-metni #main-body > .container,
body.hx-template-cerez-politikasi #main-body > .container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}

#order-standard_cart.hx-domain-register-page {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.hx-domain-register-page {
    overflow: hidden;
    color: #243b37;
    background: #ecfbf8;
}

.hx-domain-procedure-page {
    overflow: hidden;
    color: #243b37;
    background: #ecfbf8;
}

.hx-domain-register-page .container {
    max-width: 1400px;
}

.hx-domain-procedure-page .container {
    max-width: 1400px;
}

.hx-domain-register-hero {
    position: relative;
    padding: 58px 0 0;
    color: #fff;
    background: linear-gradient(180deg, #134b41 0%, #297f77 100%);
}

.hx-domain-register-head {
    max-width: 760px;
    margin: 0 auto 25px;
    text-align: center;
}

.hx-domain-register-head h1 {
    margin: 0 0 5px;
    color: #f7fffc;
    font-size: 32px;
    line-height: 1.18;
    font-weight: 400;
}

.hx-domain-register-head h1 strong {
    white-space: nowrap;
    font-weight: 600;
}

.hx-domain-register-head p {
    margin: 0;
    color: #c9f7e6;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 400;
}

.hx-domain-register-head p strong {
    color: #fff;
    font-weight: 600;
}

.hx-domain-register-form {
    position: relative;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) 148px;
    align-items: center;
    max-width: 628px;
    min-height: 54px;
    margin: 0 auto;
    padding: 6px;
    border-radius: 13px;
    background: rgba(246, 255, 252, 0.88);
    box-shadow: 0 14px 34px rgba(2, 43, 36, 0.14);
}

.hx-domain-transfer-form {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 14px;
    width: min(100%, 860px);
    max-width: 860px;
    min-height: 0;
    padding: 18px;
    border-radius: 18px;
    background: rgba(246, 255, 252, 0.94);
}

.hx-domain-transfer-hero {
    padding: 58px 0 64px;
}

.hx-domain-procedure-hero {
    padding: 66px 0 74px;
}

.hx-domain-transfer-head {
    max-width: 960px;
    margin-bottom: 28px;
}

.hx-domain-procedure-head {
    max-width: 940px;
    margin-bottom: 0;
}

.hx-domain-procedure-head .hx-text-page-title {
    font-weight: 600;
}

.hx-domain-procedure-head .hx-text-page-title strong {
    font-weight: 600;
}

.hx-domain-procedure-content {
    padding: 58px 0 86px;
    background: linear-gradient(180deg, #f2fffd 0%, #d8f4ee 100%);
}

.hx-domain-procedure-article {
    max-width: 1120px;
    margin: 0 auto;
    padding: 44px 52px;
    border: 1px solid rgba(17, 105, 90, 0.13);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 18px 44px rgba(7, 49, 43, 0.07);
}

.hx-domain-procedure-article h2 {
    margin: 34px 0 14px;
    color: #153d37;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
}

.hx-domain-procedure-article h2:first-child {
    margin-top: 0;
}

.hx-domain-procedure-article h3 {
    margin: 24px 0 8px;
    color: #167b69;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 600;
}

.hx-domain-procedure-article p {
    margin: 0 0 14px;
    color: #3d5651;
    font-size: 16px;
    line-height: 1.72;
    font-weight: 400;
}

.hx-domain-procedure-article a {
    color: #0f6e5f;
    font-weight: 600;
    text-decoration: none;
}

.hx-domain-procedure-article a:hover {
    color: #15453a;
    text-decoration: none;
}

.hx-about-page {
    overflow: hidden;
    color: #243b37;
    background: #ecfbf8;
}

.hx-about-page .container {
    width: min(100%, 1400px);
    max-width: 1400px !important;
}

.hx-about-hero {
    padding: 58px 0 60px;
    color: #fff;
    background: linear-gradient(180deg, #134b41 0%, #297f77 100%);
}

.hx-about-hero-inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.hx-about-hero-inner span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 12px;
    padding: 0 18px;
    border-radius: 999px;
    color: #12453c;
    background: #d8f8ee;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
}

.hx-about-hero-inner h1 {
    margin: 0 0 10px;
    color: #f7fffc;
    font-size: 36px;
    line-height: 1.16;
    font-weight: 600;
}

.hx-about-hero-inner p {
    max-width: 760px;
    margin: 0 auto;
    color: #d6fbef;
    font-size: 18px;
    line-height: 1.55;
    font-weight: 400;
}

.hx-about-content-section {
    padding: 58px 0 88px;
    background: transparent;
}

.hx-about-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 318px;
    gap: 32px;
    align-items: start;
}

.hx-about-content {
    padding: 42px 48px;
    border: 1px solid rgba(17, 105, 90, 0.13);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 18px 44px rgba(7, 49, 43, 0.07);
}

.hx-about-lead h2,
.hx-about-values h2 {
    margin: 0 0 14px;
    color: #153d37;
    font-size: 27px;
    line-height: 1.24;
    font-weight: 600;
}

.hx-about-lead p,
.hx-about-grid p,
.hx-about-highlight p,
.hx-about-values li {
    color: #3d5651;
    font-size: 16px;
    line-height: 1.72;
    font-weight: 400;
}

.hx-about-lead p,
.hx-about-highlight p {
    margin: 0 0 14px;
}

.hx-about-lead p:last-child {
    margin-bottom: 0;
}

.hx-about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 30px 0;
}

.hx-about-grid section {
    padding: 24px 24px 22px;
    border: 1px solid rgba(27, 142, 120, 0.14);
    border-radius: 10px;
    background: #f6fffc;
}

.hx-about-grid h3 {
    margin: 0 0 8px;
    color: #167b69;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 600;
}

.hx-about-grid p {
    margin: 0;
}

.hx-about-highlight {
    margin: 0 0 32px;
    padding: 24px 28px;
    border: 1px solid rgba(28, 235, 245, 0.22);
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(216, 248, 238, 0.9) 0%, rgba(238, 255, 251, 0.92) 100%);
}

.hx-about-highlight strong {
    display: block;
    margin-bottom: 6px;
    color: #11483f;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
}

.hx-about-values ul {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hx-about-values li {
    position: relative;
    padding-left: 24px;
}

.hx-about-values li::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #36b57d;
    box-shadow: 0 0 0 5px rgba(54, 181, 125, 0.13);
}

.hx-about-values strong {
    color: #153d37;
    font-weight: 600;
}

.hx-about-statement-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 32px;
}

.hx-about-statement-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding: 24px 24px 22px;
    border: 1px solid rgba(27, 142, 120, 0.14);
    border-radius: 10px;
    background: #f6fffc;
}

.hx-about-statement-card-wide {
    grid-column: 1 / -1;
}

.hx-about-statement-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(180deg, #18825a 0%, #38b07c 100%);
    box-shadow: 0 12px 24px rgba(17, 105, 90, 0.16);
    font-size: 22px;
}

.hx-about-statement-card h3 {
    margin: 0 0 8px;
    color: #167b69;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
}

.hx-about-statement-card p {
    margin: 0;
    color: #3d5651;
    font-size: 16px;
    line-height: 1.72;
    font-weight: 400;
}

.hx-about-partners {
    margin-top: 38px;
    padding-top: 34px;
    border-top: 1px solid rgba(17, 105, 90, 0.12);
}

.hx-about-partners-head {
    max-width: 720px;
    margin-bottom: 22px;
}

.hx-about-partners-head span {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin-bottom: 10px;
    padding: 0 14px;
    border-radius: 999px;
    color: #115245;
    background: #d8f8ee;
    font-size: 13px;
    line-height: 1;
    font-weight: 600;
}

.hx-about-partners-head h2 {
    margin: 0 0 8px;
    color: #153d37;
    font-size: 27px;
    line-height: 1.24;
    font-weight: 600;
}

.hx-about-partners-head p {
    margin: 0;
    color: #3d5651;
    font-size: 16px;
    line-height: 1.62;
    font-weight: 400;
}

.hx-about-partner-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.hx-about-partner-card {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 92px;
    padding: 12px;
    border: 1px solid rgba(27, 142, 120, 0.12);
    border-radius: 10px;
    background: rgba(246, 255, 252, 0.86);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hx-about-partner-card img {
    display: block;
    width: 100%;
    max-width: 190px;
    height: 68px;
    object-fit: contain;
}

.hx-about-partner-card:hover {
    border-color: rgba(24, 130, 90, 0.28);
    box-shadow: 0 14px 30px rgba(7, 49, 43, 0.08);
    transform: translateY(-2px);
}

.hx-text-policy section {
    margin-top: 30px;
}

.hx-text-policy section:first-child {
    margin-top: 0;
}

.hx-text-policy h2 {
    margin: 0 0 12px;
    color: #153d37;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
}

.hx-text-policy h3 {
    margin: 16px 0 8px;
    color: #167b69;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 600;
}

.hx-text-policy p {
    margin: 0 0 14px;
    color: #3d5651;
    font-size: 16px;
    line-height: 1.72;
    font-weight: 400;
}

.hx-text-policy a,
.hx-info-card a {
    color: #0f6e5f;
    font-weight: 600;
    text-decoration: none;
}

.hx-text-policy a:hover,
.hx-info-card a:hover {
    color: #15453a;
    text-decoration: none;
}

.hx-info-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 30px;
}

.hx-info-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    min-height: 160px;
    padding: 24px;
    border: 1px solid rgba(27, 142, 120, 0.14);
    border-radius: 10px;
    background: #f6fffc;
}

.hx-info-card h3 {
    margin: 0 0 8px;
    color: #167b69;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 600;
}

.hx-info-card p {
    margin: 0;
    color: #3d5651;
    font-size: 16px;
    line-height: 1.65;
    font-weight: 400;
}

.hx-bank-grid {
    display: grid;
    gap: 16px;
    margin-top: 30px;
}

.hx-bank-card {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 24px;
    align-items: center;
    min-height: 118px;
    padding: 22px 24px;
    border: 1px solid rgba(27, 142, 120, 0.14);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(246, 255, 252, 0.96), rgba(232, 250, 245, 0.88));
    box-shadow: 0 14px 32px rgba(7, 49, 43, 0.06);
}

.hx-bank-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    height: 64px;
    border-radius: 10px;
    color: #fff;
    font-size: 25px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0;
}

.hx-bank-logo-enpara {
    background: linear-gradient(180deg, #7b2bbf 0%, #4b1486 100%);
}

.hx-bank-logo-akbank {
    background: linear-gradient(180deg, #e93535 0%, #b20f18 100%);
}

.hx-bank-card h3 {
    margin: 0 0 8px;
    color: #153d37;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 600;
}

.hx-bank-card p {
    margin: 0;
    color: #24453f;
    font-size: 20px;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.hx-policy-note {
    padding: 24px 28px;
    border: 1px solid rgba(28, 235, 245, 0.2);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(216, 248, 238, 0.9) 0%, rgba(238, 255, 251, 0.92) 100%);
}

.hx-alert-box {
    margin: 0 0 30px;
    padding: 20px 24px;
    border: 1px solid rgba(225, 105, 39, 0.26);
    border-left: 5px solid #e16927;
    border-radius: 12px;
    color: #572b16;
    background: #fff7f0;
    font-size: 16px;
    line-height: 1.62;
    font-weight: 500;
}

.hx-about-sidebar {
    position: sticky;
    top: 116px;
}

.hx-about-sidebar nav {
    display: grid;
    gap: 8px;
    padding: 16px;
    border: 1px solid rgba(17, 105, 90, 0.13);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 18px 44px rgba(7, 49, 43, 0.07);
}

.hx-about-sidebar a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 9px;
    color: #24453f;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.hx-about-sidebar a::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: 12px;
    border-top: 2px solid #37b78b;
    border-right: 2px solid #37b78b;
    transform: rotate(45deg);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.hx-about-sidebar a:hover,
.hx-about-sidebar a.active {
    color: #fff;
    background: linear-gradient(180deg, #18825a 0%, #38b07c 100%);
    text-decoration: none;
    transform: translateX(2px);
}

.hx-about-sidebar a:hover::after,
.hx-about-sidebar a.active::after {
    border-color: #fff;
    transform: translateX(2px) rotate(45deg);
}

.hx-tr-docs-article {
    max-width: 1180px;
}

.hx-tr-docs-intro {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 34px;
    align-items: stretch;
}

.hx-tr-doc-downloads {
    display: grid;
    gap: 16px;
}

.hx-tr-doc-card {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 16px;
    min-height: 112px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(17, 105, 90, 0.14);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(238, 251, 247, 0.82));
    box-shadow: 0 14px 32px rgba(7, 49, 43, 0.06);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.hx-tr-doc-card:hover {
    transform: translateY(-2px);
    border-color: rgba(22, 123, 105, 0.28);
    box-shadow: 0 18px 38px rgba(7, 49, 43, 0.1);
}

.hx-tr-doc-card strong {
    color: #143e37;
    font-size: 17px;
    line-height: 1.22;
    font-weight: 600;
}

.hx-tr-doc-icon {
    width: 66px;
    height: 66px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.78);
}

.hx-tr-doc-icon img {
    display: block;
    width: 45px;
    height: 45px;
    object-fit: contain;
}

.hx-tr-doc-copy {
    display: grid;
    align-content: center;
    padding: 24px 28px;
    border: 1px solid rgba(17, 105, 90, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.68);
}

.hx-tr-doc-copy > p {
    margin-bottom: 18px;
}

.hx-tr-doc-important {
    padding: 16px 18px;
    border-left: 4px solid #167b69;
    border-radius: 10px;
    background: rgba(22, 123, 105, 0.08);
}

.hx-tr-doc-important strong {
    display: block;
    margin-bottom: 5px;
    color: #134d43;
    font-size: 15px;
    font-weight: 600;
}

.hx-tr-doc-important p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.hx-tr-doc-note {
    margin: 34px 0;
    padding: 22px 26px;
    border: 1px solid rgba(255, 255, 255, 0.68);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(20, 113, 96, 0.14));
    box-shadow: 0 18px 44px rgba(7, 49, 43, 0.08);
    backdrop-filter: blur(12px);
}

.hx-tr-doc-note p {
    margin: 0;
    color: #214b44;
    font-size: 16px;
    line-height: 1.58;
    font-weight: 500;
}

.hx-tr-doc-tabs {
    display: grid;
    gap: 20px;
}

.hx-tr-doc-tab-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.hx-tr-doc-tab-buttons button {
    min-height: 42px;
    padding: 0 20px;
    border: 1px solid rgba(17, 105, 90, 0.16);
    border-radius: 10px;
    color: #174d43;
    background: rgba(255, 255, 255, 0.72);
    font-size: 15px;
    font-weight: 600;
    transition: background 180ms ease, color 180ms ease, transform 180ms ease;
}

.hx-tr-doc-tab-buttons button:hover,
.hx-tr-doc-tab-buttons button.is-active {
    color: #fff;
    background: #15453a;
    transform: translateY(-1px);
}

.hx-tr-doc-tab-panels {
    border: 1px solid rgba(17, 105, 90, 0.13);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
}

.hx-tr-doc-tab-panels section {
    display: none;
    padding: 28px 30px;
}

.hx-tr-doc-tab-panels section.is-active {
    display: block;
}

.hx-tr-doc-tab-panels h2 {
    margin-top: 0;
}

.hx-domain-price-article {
    max-width: 1180px;
}

.hx-domain-price-toolbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: center;
    margin-bottom: 24px;
}

.hx-domain-price-toolbar h2 {
    margin: 0 0 6px;
}

.hx-domain-price-toolbar p {
    margin: 0;
}

.hx-domain-price-search {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(17, 105, 90, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 26px rgba(7, 49, 43, 0.05);
}

.hx-domain-price-search .hx-icon {
    width: 18px;
    height: 18px;
    color: #167b69;
}

.hx-domain-price-search input {
    width: 100%;
    height: 46px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #123d36;
    font-size: 14px;
    font-weight: 500;
}

.hx-domain-price-search input::placeholder {
    color: #7a9790;
}

.hx-domain-price-table-wrap {
    overflow-x: auto;
    border: 1px solid rgba(17, 105, 90, 0.13);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.74);
    box-shadow: 0 18px 44px rgba(7, 49, 43, 0.06);
}

.hx-domain-price-table {
    width: 100%;
    min-width: 720px;
    margin: 0;
    border-collapse: collapse;
}

.hx-domain-price-table th,
.hx-domain-price-table td {
    padding: 17px 22px;
    border-bottom: 1px solid rgba(17, 105, 90, 0.1);
    color: #31534d;
    font-size: 15px;
    line-height: 1.25;
    text-align: left;
}

.hx-domain-price-table th {
    position: sticky;
    top: 0;
    z-index: 1;
    color: #fff;
    background: #15453a;
    font-weight: 600;
}

.hx-domain-price-table tbody tr {
    transition: background 160ms ease;
}

.hx-domain-price-table tbody tr:nth-child(even) {
    background: rgba(22, 123, 105, 0.035);
}

.hx-domain-price-table tbody tr:hover {
    background: rgba(22, 123, 105, 0.08);
}

.hx-domain-price-table td:first-child strong {
    display: inline-flex;
    min-width: 92px;
    color: #123d36;
    font-size: 18px;
    font-weight: 600;
}

.hx-domain-price-empty td {
    text-align: center;
}

.hx-domain-price-note {
    margin: 0;
    padding: 18px 4px 0;
    color: #56716a;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
}

.hx-web-hosting-page {
    overflow: hidden;
    background: #effbf8;
}

.hx-web-hosting-page .container {
    max-width: 1400px;
}

.hx-wh-hero {
    min-height: 386px;
    padding: 48px 0 0;
    background: linear-gradient(180deg, #134b41 0%, #33958e 100%);
    color: #fff;
}

.hx-wordpress-hosting-page .hx-wh-hero {
    background: transparent linear-gradient(180deg, #134c41 0%, #14676a 63%, #346670 100%) 0% 0% no-repeat padding-box;
}

.hx-windows-hosting-page .hx-wh-hero {
    background: linear-gradient(180deg, #134b41 0%, #005593 100%);
}

.hx-uygulama-hosting-page .hx-wh-hero {
    background: linear-gradient(180deg, #134b41 0%, #268f8b 100%);
}

.hx-vds-page .hx-wh-hero {
    background: linear-gradient(180deg, #134b41 0%, #1f8f86 100%);
}

.hx-wh-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 650px;
    gap: 58px;
    align-items: center;
}

.hx-wh-hero-copy h1 {
    margin: 0 0 18px;
    color: #fff;
    font-size: 32px;
    line-height: 1.12;
    font-weight: 600;
}

.hx-wh-hero-copy p {
    max-width: 640px;
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 400;
}

.hx-wh-hero-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 250px));
    gap: 13px 16px;
    margin-top: 34px;
}

.hx-wh-hero-badges span {
    display: flex;
    min-height: 45px;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-radius: 6px;
    color: #e7fffa;
    background: rgba(31, 185, 149, 0.74);
    font-size: 13px;
    font-weight: 600;
}

.hx-wordpress-hosting-page .hx-wh-hero-badges span {
    background: #5a9389;
}

.hx-windows-hosting-page .hx-wh-hero-badges span {
    background: rgb(58, 164, 205);
}

.hx-uygulama-hosting-page .hx-wh-hero-badges span {
    background: rgba(30, 174, 151, 0.78);
}

.hx-vds-page .hx-wh-hero-badges span {
    background: rgba(31, 141, 126, 0.8);
}

.hx-uygulama-hosting-page .hx-wh-hero-badges img {
    width: 25px;
    height: 25px;
    filter: brightness(0) invert(1);
}

.hx-vds-page .hx-wh-hero-badges img {
    width: 25px;
    height: 25px;
    filter: brightness(0) invert(1);
}

.hx-wh-hero-badges img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.hx-wh-hero-badges img.hx-wh-badge-icon-white {
    filter: brightness(0) invert(1);
}

.hx-wordpress-hosting-page .hx-wh-hero-badges img {
    filter: brightness(0) invert(1);
}

.hx-kurumsal-hosting-page .hx-wh-hero-badges img {
    filter: brightness(0) invert(1);
}

.hx-wh-hero-media {
    position: relative;
    min-height: 330px;
    align-self: end;
}

.hx-wh-hero-person {
    display: block;
    width: 100%;
    max-width: 640px;
    margin-left: auto;
}

.hx-reseller-hosting-page .hx-wh-hero-person {
    max-width: 700px;
}

.hx-kurumsal-hosting-page .hx-wh-hero-person {
    max-width: 720px;
}

.hx-windows-hosting-page .hx-wh-hero-person {
    max-width: 720px;
}

.hx-uygulama-hosting-page .hx-wh-hero-person {
    max-width: 670px;
}

.hx-vds-page .hx-wh-hero-person {
    position: relative;
    z-index: 2;
    max-width: 720px;
}

.hx-vds-gift-img,
.hx-vds-panel-img {
    position: absolute;
    z-index: 3;
    display: block;
    object-fit: contain;
    pointer-events: none;
}

.hx-vds-gift-img {
    top: 12px;
    left: -26px;
    width: 126px;
    height: 126px;
}

.hx-vds-panel-img {
    left: -18px;
    bottom: 97px;
    width: 118px;
    height: 118px;
}

.hx-uygulama-hosting-page .hx-wh-discount-img {
    right: 6px;
}

.hx-windows-hosting-page .hx-wh-discount-img {
    right: auto;
    left: 0;
}

.hx-wh-discount-img {
    position: absolute;
    top: 22px;
    right: 0;
    width: 128px;
    height: 128px;
    object-fit: contain;
    filter: drop-shadow(0 16px 20px rgba(10, 67, 57, 0.22));
}

.hx-wordpress-hosting-page .hx-wh-discount-img {
    right: 10em;
}

.hx-rs-brand-img {
    display: none;
}

.hx-reseller-hosting-page .hx-rs-brand-img {
    display: block;
    position: absolute;
    top: 22px;
    left: 0;
    width: 128px;
    height: 128px;
    object-fit: contain;
    filter: drop-shadow(0 16px 20px rgba(10, 67, 57, 0.22));
}

.hx-corp-need-img {
    display: none;
}

.hx-kurumsal-hosting-page .hx-corp-need-img {
    display: block;
    position: absolute;
    top: 255px;
    left: 0;
    width: 128px;
    height: 128px;
    object-fit: contain;
    filter: drop-shadow(0 16px 20px rgba(10, 67, 57, 0.22));
}

.hx-kurumsal-hosting-page .hx-wh-discount-img {
    right: 250px;
}

.hx-wp-ai-img {
    display: none;
}

.hx-wordpress-hosting-page .hx-wp-ai-img {
    display: block;
    position: absolute;
    top: 22px;
    right: 34em;
    width: 128px;
    height: 128px;
    object-fit: contain;
    filter: drop-shadow(0 16px 20px rgba(10, 67, 57, 0.22));
}

.hx-wh-plans {
    padding: 0 0 28px;
    background: #f4fffc;
}

.hx-wh-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    transform: translateY(-36px);
}

.hx-app-host-tabs-wrap {
    position: relative;
}

.hx-app-host-tab-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.hx-app-host-tab-list {
    position: relative;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    transform: translateY(-92px);
}

.hx-app-host-tab-list label {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    gap: 10px;
    padding: 0 22px;
    border: 1px solid rgba(31, 158, 135, 0.24);
    border-radius: 999px;
    color: #144e43;
    background: rgb(199, 246, 244);
    box-shadow: 0 14px 30px rgba(8, 72, 62, 0.1);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.hx-app-host-tab-list label:hover {
    transform: translateY(-1px);
    border-color: rgba(31, 158, 135, 0.5);
}

.hx-app-host-tab-list img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

#hx-app-host-laravel:checked ~ .hx-app-host-tab-list label[for="hx-app-host-laravel"],
#hx-app-host-nodejs:checked ~ .hx-app-host-tab-list label[for="hx-app-host-nodejs"],
#hx-app-host-python:checked ~ .hx-app-host-tab-list label[for="hx-app-host-python"] {
    color: #fff;
    border-color: rgba(16, 82, 70, 0.34);
    background: linear-gradient(180deg, #5cbeb5 0%, #88d6ce 100%);
}

#hx-app-host-laravel:checked ~ .hx-app-host-tab-list label[for="hx-app-host-laravel"] img,
#hx-app-host-nodejs:checked ~ .hx-app-host-tab-list label[for="hx-app-host-nodejs"] img,
#hx-app-host-python:checked ~ .hx-app-host-tab-list label[for="hx-app-host-python"] img {
    filter: brightness(0) invert(1);
}

.hx-app-host-panels {
    margin-top: -16px;
}

.hx-app-host-panel {
    display: none;
}

#hx-app-host-laravel:checked ~ .hx-app-host-panels .hx-app-host-panel-laravel,
#hx-app-host-nodejs:checked ~ .hx-app-host-panels .hx-app-host-panel-nodejs,
#hx-app-host-python:checked ~ .hx-app-host-panels .hx-app-host-panel-python {
    display: block;
}

.hx-app-host-panel .hx-wh-plan-grid {
    transform: translateY(0);
}

.hx-vds-plans {
    position: relative;
    padding: 34px 0 54px;
    background: #eefaf8;
}

.hx-vds-plan-stack {
    display: grid;
    gap: 22px;
}

.hx-vds-plan-row {
    display: grid;
    grid-template-columns: 188px repeat(4, minmax(88px, 0.78fr)) 124px 124px minmax(280px, 310px);
    align-items: stretch;
    min-height: 76px;
    border: 1px solid rgba(15, 92, 79, 0.16);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(7, 65, 56, 0.08);
    overflow: visible;
}

.hx-vds-plan-name {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 14px;
    border-radius: 5px 0 0 5px;
    background: #e4f8f4;
    color: #10483f;
}

.hx-vds-plan-name img {
    width: 32px;
    height: auto;
    object-fit: contain;
}

.hx-vds-plan-name strong {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.15;
}

.hx-vds-spec,
.hx-vds-os {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 9px 12px;
    border-left: 1px solid rgba(16, 70, 60, 0.12);
    color: #252525;
}

.hx-vds-spec span,
.hx-vds-os span {
    position: absolute;
    top: -14px;
    left: 50%;
    display: inline-flex;
    min-height: 27px;
    min-width: 76px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 9px;
    border: 1px solid rgba(25, 117, 104, 0.16);
    border-radius: 7px;
    background: #dff5f1;
    color: #10483f;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
    white-space: nowrap;
}

.hx-vds-spec span img {
    width: 15px;
    height: 15px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(18%) sepia(23%) saturate(1116%) hue-rotate(119deg) brightness(90%) contrast(95%);
}

.hx-vds-spec strong {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.1;
}

.hx-vds-spec em {
    margin-top: 3px;
    color: #3e3e3e;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
}

.hx-vds-os {
    align-items: center;
    padding-left: 8px;
    padding-right: 8px;
}

.hx-vds-os img {
    width: 66px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.hx-vds-buy {
    display: grid;
    grid-template-columns: minmax(104px, 1fr) 146px;
    align-items: center;
    gap: 13px;
    padding: 12px 14px 12px 18px;
    border-left: 1px solid rgba(16, 70, 60, 0.12);
}

.hx-vds-buy strong {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #343434;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.hx-vds-buy .hx-vds-price-text {
    justify-content: center;
    font-size: 18px;
    line-height: 1.1;
}

.hx-vds-buy strong b {
    font-size: 28px;
    font-weight: 600;
    line-height: 0.95;
}

.hx-vds-buy strong span {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    color: #343434;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.05;
}

.hx-vds-buy em {
    margin-top: 2px;
    color: #343434;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.hx-vds-buy a {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: linear-gradient(180deg, #54bd8f 0%, #3fae7d 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.hx-vds-buy a:hover,
.hx-vds-buy a:focus-visible {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.04);
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(40, 143, 104, 0.22);
}

.hx-wh-plan-card {
    position: relative;
    min-height: 464px;
    padding: 20px 17px 14px;
    border: 1px solid rgba(59, 179, 150, 0.22);
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(8, 72, 62, 0.09);
    overflow: visible;
}

.hx-wh-plan-card.is-featured {
    border: 2px solid #38c497;
    box-shadow: 0 22px 52px rgba(8, 72, 62, 0.15);
}

.hx-windows-hosting-page .hx-wh-plan-card {
    border-color: rgba(0, 85, 147, 0.26);
    box-shadow: 0 18px 44px rgba(0, 85, 147, 0.1);
}

.hx-windows-hosting-page .hx-wh-plan-card.is-featured {
    border-color: #0a87cd;
    box-shadow: 0 22px 52px rgba(0, 85, 147, 0.18);
}

.hx-wh-featured-label {
    position: absolute;
    top: -20px;
    left: 50%;
    z-index: 2;
    min-width: 112px;
    padding: 6px 12px;
    border-radius: 999px;
    color: #fff;
    background: #25bc8c;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    text-align: center;
    transform: translateX(-50%);
}

.hx-wh-plan-head {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding-right: 62px;
}

.hx-wh-plan-icon {
    width: 31px;
    height: 31px;
    object-fit: contain;
}

.hx-wh-plan-head strong {
    display: block;
    color: #163f38;
    font-size: 19px;
    line-height: 1.15;
    font-weight: 600;
}

.hx-wh-plan-head em {
    display: block;
    margin-top: 3px;
    color: #668078;
    font-size: 13px;
    line-height: 1.2;
    font-style: normal;
    font-weight: 400;
}

.hx-wh-ssl-badge {
    position: absolute;
    top: -30px;
    right: -3px;
    z-index: 3;
    width: 76px;
    height: auto;
    filter: drop-shadow(0 8px 10px rgba(10, 67, 57, 0.12));
}

.hx-wh-price-row {
    display: flex;
    min-height: 50px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 16px 0 12px;
}

.hx-wh-price-row del {
    display: block;
    color: #9aa9a5;
    font-size: 15px;
    font-weight: 500;
}

.hx-wh-price-row strong {
    color: #123c35;
    font-size: 26px;
    line-height: 1;
    font-weight: 600;
}

.hx-wh-price-row em {
    margin-left: 3px;
    color: #536963;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
}

.hx-wh-price-row small {
    display: block;
    margin-top: 4px;
    color: #15926f;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 500;
}

.hx-wh-price-row b {
    min-width: 72px;
    padding: 7px 10px;
    border-radius: 4px;
    color: #15926f;
    background: #e2f8f1;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
}

.hx-wh-cart {
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(180deg, #53c58d 0%, #189a70 100%);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hx-wh-cart:hover,
.hx-wh-cart:focus-visible {
    color: #fff;
    background: linear-gradient(180deg, #48bd88 0%, #218965 100%);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(16, 90, 77, 0.16);
}

.hx-wordpress-hosting-page .hx-wh-cart {
    background: linear-gradient(180deg, #25666d 0%, #004e4d 100%);
}

.hx-wordpress-hosting-page .hx-wh-cart:hover,
.hx-wordpress-hosting-page .hx-wh-cart:focus-visible {
    color: #fff;
    background: linear-gradient(180deg, #2c7a82 0%, #063f40 100%);
    box-shadow: 0 8px 16px rgba(0, 78, 77, 0.18);
}

.hx-windows-hosting-page .hx-wh-cart {
    background: linear-gradient(180deg, #005593 0%, #0a87cd 100%);
}

.hx-windows-hosting-page .hx-wh-cart:hover,
.hx-windows-hosting-page .hx-wh-cart:focus-visible {
    color: #fff;
    background: linear-gradient(180deg, #0067ad 0%, #0879b8 100%);
    box-shadow: 0 8px 16px rgba(0, 85, 147, 0.18);
}

.hx-wh-odeme-kutusu {
    position: relative;
    margin: 9px 0 13px;
    padding-bottom: 11px;
    border-bottom: 1px solid #e5f1ee;
    z-index: 4;
}

.hx-wh-odeme-planlari {
    display: flex;
    width: 100%;
    padding: 0;
    border: 0;
    color: #5f756f;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.hx-wh-yorum-paylas-ikon,
.hx-wh-renk-paleti-ikon {
    display: inline-block;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    background: currentColor;
}

.hx-wh-yorum-paylas-ikon {
    -webkit-mask: url("../assets/hostidex/hosting/img/comment-1-share.svg") center / contain no-repeat;
    mask: url("../assets/hostidex/hosting/img/comment-1-share.svg") center / contain no-repeat;
}

.hx-wh-renk-paleti-ikon {
    -webkit-mask: url("../assets/hostidex/hosting/img/colour-palette-3.svg") center / contain no-repeat;
    mask: url("../assets/hostidex/hosting/img/colour-palette-3.svg") center / contain no-repeat;
}

.hx-wh-odeme-planlari:hover,
.hx-wh-odeme-planlari:focus-visible {
    color: #15453a;
    text-decoration: none;
    outline: 0;
}

.hx-wh-odeme-tablosu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    width: min(calc(100% + 34px), calc(100vw - 40px));
    min-width: 292px;
    padding: 14px;
    border: 1px solid rgba(50, 181, 142, 0.24);
    border-radius: 8px;
    background: #f8fffd;
    box-shadow: 0 14px 28px rgba(9, 63, 54, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
    z-index: 20;
}

.hx-wh-odeme-kutusu:hover .hx-wh-odeme-tablosu,
.hx-wh-odeme-kutusu:focus-within .hx-wh-odeme-tablosu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

.hx-wh-odeme-tablosu table {
    width: 100%;
    border-collapse: collapse;
}

.hx-wh-odeme-tablosu th,
.hx-wh-odeme-tablosu td {
    padding: 7px 6px;
    color: #1a4038;
    font-size: 12px;
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
}

.hx-wh-odeme-tablosu th {
    color: #15926f;
    font-weight: 600;
}

.hx-wh-odeme-tablosu td:last-child,
.hx-wh-odeme-tablosu th:last-child {
    text-align: right;
}

.hx-wh-odeme-tablosu td strong {
    display: block;
    color: #123c35;
    font-size: 12px;
    line-height: 1.1;
    font-weight: 600;
}

.hx-wh-odeme-tablosu td em {
    display: block;
    margin-top: 3px;
    color: #15926f;
    font-size: 10px;
    line-height: 1.1;
    font-style: normal;
    font-weight: 500;
}

.hx-wh-odeme-tablosu p {
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px solid rgba(50, 181, 142, 0.18);
    color: #5f756f;
    font-size: 11px;
    line-height: 1.25;
    font-weight: 400;
}

.hx-wh-plan-card ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hx-wh-plan-card li {
    position: relative;
    padding-left: 20px;
    color: #37554e;
    font-size: 15px;
    line-height: 1.25;
    font-weight: 400;
}

.hx-wh-plan-card li::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 12px;
    height: 12px;
    background: #2cb68d;
    -webkit-mask: url("../assets/hostidex/icons/line-angle-double-down.svg") center / contain no-repeat;
    mask: url("../assets/hostidex/icons/line-angle-double-down.svg") center / contain no-repeat;
}

.hx-wh-plan-card li strong {
    color: #153d37;
    font-weight: 600;
}

.hx-wh-tum-ozellikler {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 13px;
    color: #22ad82;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.hx-wh-tum-ozellikler:hover {
    color: #15453a;
    text-decoration: none;
}

.hx-wh-domain-gift {
    margin: -8px 0 0;
    padding: 15px 18px;
    color: #52736b;
    background: #dcf2ed;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
}

.hx-wh-domain-gift strong {
    color: #f04c39;
    font-weight: 600;
}

.hx-rs-custom-package {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1.45fr) 230px;
    gap: 24px;
    align-items: center;
    margin-top: 26px;
    padding: 34px 28px 30px;
    border: 1px solid #d7eee9;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 18px 46px rgba(8, 72, 62, 0.08);
}

.hx-rs-custom-ribbon {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 22px;
    border-radius: 10px;
    color: #fff;
    background: linear-gradient(180deg, #36bea3 0%, #18a889 100%);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    box-shadow: 0 12px 24px rgba(20, 130, 104, 0.16);
}

.hx-rs-custom-intro {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
}

.hx-rs-custom-intro img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    filter: drop-shadow(0 12px 20px rgba(10, 67, 57, 0.12));
}

.hx-rs-custom-package h3 {
    margin: 0 0 10px;
    color: #2f312f;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}

.hx-rs-custom-package p {
    margin: 0;
    color: #3e443f;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.55;
}

.hx-rs-custom-features {
    padding-left: 28px;
    border-left: 1px solid #e5ecea;
}

.hx-rs-custom-features ul {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
    gap: 11px 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hx-rs-custom-features li {
    position: relative;
    padding-left: 20px;
    color: #3e443f;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.25;
    white-space: nowrap;
}

.hx-rs-custom-features li::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 12px;
    height: 12px;
    background: #2e9384;
    -webkit-mask: url("../assets/hostidex/icons/line-angle-double-down.svg") center / contain no-repeat;
    mask: url("../assets/hostidex/icons/line-angle-double-down.svg") center / contain no-repeat;
}

.hx-rs-custom-buy {
    display: grid;
    justify-items: stretch;
    gap: 14px;
    text-align: center;
}

.hx-rs-custom-buy label {
    color: #2f312f;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.hx-rs-custom-select {
    width: 100%;
    min-height: 42px;
    padding: 0 44px 0 20px;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    color: #303230;
    background-color: #fff;
    background-image: linear-gradient(45deg, transparent 50%, #9aa6a2 50%), linear-gradient(135deg, #9aa6a2 50%, transparent 50%);
    background-position: calc(100% - 22px) 18px, calc(100% - 14px) 18px;
    background-size: 8px 8px, 8px 8px;
    background-repeat: no-repeat;
    font-size: 15px;
    font-weight: 400;
    appearance: none;
}

.hx-rs-custom-buy p {
    color: #333533;
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.hx-rs-custom-buy p strong {
    color: #333533;
    font-size: 26px;
    font-weight: 600;
}

.hx-rs-custom-cart {
    min-height: 42px;
    font-size: 15px;
}

.hx-wh-fast-strip,
.hx-wh-related {
    background: #104f43;
}

.hx-wh-fast-strip {
    padding: 48px 0;
}

.hx-wh-fast-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 90px;
}

.hx-wh-fast-grid article {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 34px;
    align-items: center;
}

.hx-wh-fast-grid article:first-child {
    grid-template-columns: 260px minmax(0, 1fr);
}

.hx-wh-fast-grid [data-hx-lottie] {
    width: 330px;
    min-width: 320px;
    height: 240px;
    overflow: visible;
}

.hx-wh-fast-grid [data-hx-lottie] svg {
    overflow: visible;
    transform: scale(1.25) !important;
    transform-origin: center !important;
}

.hx-wh-fast-grid article:first-child [data-hx-lottie] {
    width: 260px;
    min-width: 260px;
    height: 205px;
}

.hx-wh-fast-grid article:first-child [data-hx-lottie] svg {
    transform: scale(1.08) !important;
}

.hx-wh-fast-grid strong {
    display: block;
    margin-bottom: 12px;
    color: #fff;
    font-size: 22px;
    line-height: 1.16;
    font-weight: 600;
}

.hx-wh-fast-grid em {
    display: block;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.42;
    font-style: normal;
    font-weight: 400;
}

.hx-wh-content {
    padding: 72px 0 58px;
    background: #f2fffd;
}

.hx-wh-content-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 470px;
    gap: 74px;
    align-items: center;
}

.hx-wh-content-row + .hx-wh-content-row {
    margin-top: 72px;
}

.hx-wh-content-row-alt {
    grid-template-columns: 470px minmax(0, 1fr);
}

.hx-wh-content-row img {
    display: block;
    width: 100%;
    height: auto;
}

.hx-wh-content h2 {
    margin: 0 0 18px;
    color: #153d37;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
}

.hx-wh-content p {
    margin: 0 0 15px;
    color: #3d5651;
    font-size: 15px;
    line-height: 1.48;
    font-weight: 400;
}

.hx-wh-content a {
    display: inline-flex;
    min-height: 40px;
    margin-top: 12px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 6px;
    color: #fff;
    background: linear-gradient(180deg, #18825a 0%, #38b07c 100%);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hx-wh-content a:hover,
.hx-wh-content a:focus-visible {
    color: #fff;
    background: linear-gradient(180deg, #15453a 0%, #24956d 100%);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(16, 90, 77, 0.22);
}

.hx-wh-related {
    padding: 0 0 46px;
}

.hx-wh-related .container {
    position: relative;
}

.hx-wh-related > .container > span {
    position: relative;
    top: -21px;
    display: flex;
    width: max-content;
    min-height: 42px;
    max-width: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 32px;
    border-radius: 7px;
    color: #fff;
    background: #2dbd90;
    font-size: 14px;
    font-weight: 600;
}

.hx-wh-related-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
}

.hx-wh-related-grid a {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    grid-template-areas: "icon title" "icon text";
    column-gap: 18px;
    align-items: center;
    min-height: 96px;
    padding: 18px 20px;
    border: 1px solid rgba(150, 236, 214, 0.25);
    border-radius: 8px;
    color: #fff;
    background: rgba(42, 137, 120, 0.45);
    text-decoration: none;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.hx-wh-related-grid a:hover {
    color: #fff;
    background: rgba(44, 177, 142, 0.45);
    border-color: rgba(150, 236, 214, 0.42);
    text-decoration: none;
    transform: translateY(-3px);
}

.hx-wh-related-grid .hx-icon {
    grid-area: icon;
    width: 70px;
    height: 48px;
    color: #d7fff5;
}

.hx-wh-related-grid b {
    grid-area: title;
    color: #fff;
    font-size: 15px;
    line-height: 1.2;
    font-weight: 600;
}

.hx-wh-related-grid em {
    grid-area: text;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    line-height: 1.35;
    font-style: normal;
    font-weight: 400;
}

.hx-wh-compare {
    padding: 56px 0 110px;
    background: #f2fffd;
}

.hx-wh-faq {
    padding-top: 64px;
}

.hx-wh-compare-title {
    margin-bottom: 30px;
}

.hx-wh-compare-title span {
    display: block;
    color: #526962;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
}

.hx-wh-compare-title h2 {
    margin: 4px 0 0;
    color: #526962;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 500;
}

.hx-wh-compare-title h2 strong {
    color: #169978;
    font-weight: 600;
}

.hx-wh-compare-shell {
    overflow-x: auto;
    border: 1px solid #cfe9e3;
    border-radius: 7px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(8, 72, 62, 0.07);
}

.hx-wh-compare table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.hx-wh-compare th,
.hx-wh-compare td {
    width: 20%;
    padding: 16px 18px;
    border-right: 1px solid #dcefeb;
    border-bottom: 1px solid #dcefeb;
    color: #33524b;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
    vertical-align: middle;
}

.hx-wh-compare th:first-child,
.hx-wh-compare td:first-child {
    color: #244942;
    text-align: left;
    font-weight: 600;
}

.hx-wh-compare th {
    color: #143f37;
    font-weight: 600;
}

.hx-wh-compare th:first-child {
    color: #134b41;
    background: #dff4ef;
    font-size: 17px;
    line-height: 1.3;
}

.hx-wh-compare th:not(:first-child) {
    padding: 18px;
    color: #fff;
    background: linear-gradient(180deg, #1f7f67 0%, #0f443b 100%);
}

.hx-wh-compare th:nth-child(2) {
    background: linear-gradient(180deg, #2a8d72 0%, #145143 100%);
}

.hx-wh-compare th:nth-child(3) {
    background: linear-gradient(180deg, #237b65 0%, #103f36 100%);
}

.hx-wh-compare th:nth-child(4) {
    background: linear-gradient(180deg, #1a6a58 0%, #0e382f 100%);
}

.hx-wh-compare th:nth-child(5) {
    background: linear-gradient(180deg, #134b41 0%, #092d28 100%);
}

.hx-wh-compare th img {
    display: block;
    width: 46px;
    height: 46px;
    margin: 0 auto 8px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.hx-wh-compare th strong {
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.hx-wh-compare tbody tr:nth-child(even) td {
    background: #f6fffc;
}

.hx-wh-compare tbody td:not(:first-child) {
    color: #536963;
    font-weight: 500;
}

.hx-wh-check {
    display: inline-flex;
    width: 23px;
    height: 23px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #e1f8f1;
}

.hx-wh-check::before {
    content: "";
    width: 11px;
    height: 7px;
    border-left: 2px solid #169978;
    border-bottom: 2px solid #169978;
    transform: rotate(-45deg) translate(1px, -1px);
}

.hx-wh-compare tfoot td {
    padding: 20px 18px;
    background: #f0fffc;
}

.hx-wh-compare tfoot strong {
    display: block;
    color: #153d37;
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
}

.hx-wh-compare tfoot em {
    display: block;
    margin: 5px 0 12px;
    color: #536963;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
}

.hx-wh-compare tfoot a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    border-radius: 5px;
    color: #fff;
    background: linear-gradient(180deg, #53c58d 0%, #189a70 100%);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.hx-wh-compare tfoot a:hover {
    color: #fff;
    background: linear-gradient(180deg, #38b87f 0%, #15453a 100%);
    text-decoration: none;
}

.hx-wh-compare tr:last-child td,
.hx-wh-compare tfoot tr:last-child td {
    border-bottom: 0;
}

.hx-wh-compare th:last-child,
.hx-wh-compare td:last-child {
    border-right: 0;
}

.hx-domain-register-form > .hx-icon-search {
    justify-self: center;
    width: 19px;
    height: 19px;
    color: #9abbb4;
}

.hx-transfer-field {
    display: grid;
    gap: 7px;
    text-align: left;
}

.hx-transfer-field label {
    margin: 0;
    color: #0e4d43;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 600;
}

.hx-domain-register-form input.form-control {
    height: 42px;
    min-width: 0;
    padding: 0 10px 0 0;
    border: 0 !important;
    color: #0b3c34;
    background: transparent !important;
    box-shadow: none !important;
    outline: 0;
    appearance: none;
    font-size: 14px;
    font-weight: 500;
}

.hx-domain-transfer-form input.form-control {
    height: 50px;
    padding: 0 16px;
    border: 1px solid rgba(14, 77, 67, 0.14) !important;
    border-radius: 11px;
    background: #fff !important;
}

.hx-domain-transfer-form input.form-control:focus {
    border-color: rgba(34, 174, 135, 0.5) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(34, 174, 135, 0.12) !important;
}

.hx-domain-register-form input.form-control:focus {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.hx-domain-register-form input::placeholder {
    color: #a1b7b2;
}

.hx-domain-register-form .btn {
    display: inline-flex;
    height: 42px;
    align-items: center;
    justify-content: center;
    justify-self: end;
    width: 142px;
    gap: 10px;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: linear-gradient(180deg, #45c98f 0%, #2eaf7c 100%);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.hx-domain-register-form .btn .hx-icon {
    width: 15px;
    height: 15px;
}

.hx-domain-transfer-form .btn .hx-icon {
    margin-right: 7px;
}

.hx-domain-transfer-form .btn {
    justify-self: end;
    width: auto;
    min-width: 190px;
    height: 48px;
    font-size: 14px;
    text-transform: none;
}

.hx-domain-captcha {
    grid-column: 1 / -1;
    width: 100%;
    max-width: 628px;
    margin: 14px auto 0;
    padding: 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.1);
}

.hx-domain-tlds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 23px;
    max-width: 1200px;
    margin: 57px auto 0;
    transform: translateY(22px);
}

.hx-domain-tlds a {
    position: relative;
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 0 14px;
    border-radius: 6px;
    color: #1f9e85;
    background: #dcf7ed;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(6, 72, 61, 0.1);
}

.hx-domain-tlds a.is-featured span {
    position: absolute;
    top: -17px;
    left: 16px;
    min-width: 112px;
    min-height: 18px;
    padding: 0 12px;
    border-radius: 9px;
    color: #fff;
    background: #45c98f;
    font-size: 10px;
    line-height: 18px;
    font-weight: 600;
}

.hx-domain-tlds strong {
    color: #1d3d45;
    font-size: 23px;
    line-height: 1;
    font-weight: 700;
}

.hx-domain-tlds img {
    max-width: 118px;
    max-height: 48px;
    object-fit: contain;
}

.hx-domain-tlds em {
    color: #1da787;
    font-size: 14px;
    line-height: 1;
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}

.hx-domain-results-wrap {
    padding-top: 42px;
}

.hx-domain-pricing-placeholder {
    height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.hx-domain-register-page #DomainSearchResults {
    max-width: 1040px;
    margin: 0 auto 32px;
    padding: 22px;
    border: 1px solid rgba(14, 112, 95, 0.18);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(7, 49, 43, 0.08);
}

.hx-domain-register-page .primary-domain-header {
    margin: 0 0 10px;
    padding-left: 5px;
    color: #0c6b5a;
    font-size: 13px;
    font-weight: 700;
}

.hx-domain-register-page .domain-checker-result-headline {
    margin-bottom: 12px;
}

.hx-domain-register-page .domain-searching,
.hx-domain-register-page .domain-lookup-message {
    margin: 0;
    padding: 34px 18px;
    border-radius: 8px;
    color: #167b69;
    background: #f7fffd;
    text-align: center;
    font-weight: 600;
}

.hx-domain-register-page .domain-lookup-result {
    margin: 0;
}

.hx-domain-register-page #primaryLookupResult {
    padding: 16px;
    border-left: 5px solid #1bb88d;
    border-radius: 8px;
    background: #f2fff8;
}

.hx-domain-register-page .domain-available,
.hx-domain-register-page .domain-unavailable,
.hx-domain-register-page .domain-invalid,
.hx-domain-register-page .domain-tld-unavailable,
.hx-domain-register-page .domain-error {
    margin: 0 0 10px;
    color: #153d37;
    font-size: 15px;
    font-weight: 700;
}

.hx-domain-register-page .domain-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
}

.hx-domain-register-page .domain-price .price,
.hx-domain-register-page .domain-suggestion .price {
    color: #0c6b5a;
    font-size: 16px;
    font-weight: 700;
}

.hx-domain-register-page .btn-add-to-cart,
.hx-domain-register-page .domain-contact-support {
    min-height: 36px;
    padding: 0 18px;
    border: 0;
    border-radius: 6px;
    color: #fff;
    background: #18825a;
    font-size: 13px;
    font-weight: 700;
}

.hx-domain-register-page .spotlight-tlds {
    margin: 14px 0;
}

.hx-domain-register-page .spotlight-tlds-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.hx-domain-register-page .spotlight-tld-container {
    float: none;
    width: auto;
}

.hx-domain-register-page .spotlight-tld {
    min-height: 92px;
    padding: 14px;
    border: 1px solid rgba(24, 130, 90, 0.22);
    border-radius: 8px;
    background: #f8fffd;
    color: #153d37;
    font-size: 20px;
    font-weight: 700;
}

.hx-domain-register-page .suggested-domains {
    margin-top: 14px;
    overflow: hidden;
    border: 1px solid rgba(24, 130, 90, 0.18);
    border-radius: 8px;
    background: #fff;
}

.hx-domain-register-page .suggested-domains .panel-heading {
    padding: 13px 16px;
    color: #0c6b5a;
    background: #effbf7;
    font-weight: 700;
}

.hx-domain-register-page .domain-suggestion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid rgba(24, 130, 90, 0.12);
}

.hx-domain-register-page .domain-suggestion .domain,
.hx-domain-register-page .domain-suggestion .extension {
    color: #153d37;
    font-size: 15px;
    font-weight: 700;
}

.hx-domain-register-page .domain-suggestion .actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hx-domain-how {
    padding: 48px 0 0;
    background: #f2fffd;
}

.hx-domain-how-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 640px;
    align-items: center;
    gap: 52px;
}

.hx-domain-how-media {
    align-self: end;
}

.hx-domain-how-media img {
    display: block;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.hx-domain-how-content h2,
.hx-domain-manage h2,
.hx-domain-cross-title h2,
.hx-domain-faq-title h2 {
    margin: 0;
    color: #153d37;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 600;
}

.hx-domain-how-content h2 strong,
.hx-domain-cross-title h2 strong,
.hx-domain-faq-title h2 strong {
    color: #167b69;
}

.hx-domain-how-content > p {
    margin: 4px 0 38px;
    color: #39524e;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 500;
}

.hx-domain-steps {
    display: grid;
    gap: 22px;
}

.hx-domain-steps article {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 26px;
    align-items: center;
}

.hx-domain-steps article > div {
    display: flex;
    width: 98px;
    height: 98px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(18, 91, 78, 0.14);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.96) 0%, rgba(248, 253, 251, 0.98) 54%, rgba(231, 242, 238, 0.96) 100%),
        #f8fbfa;
    box-shadow:
        inset 0 0 0 5px rgba(16, 84, 72, 0.05),
        0 10px 26px rgba(4, 51, 43, 0.09);
    overflow: visible;
}

.hx-domain-steps article > div svg,
.hx-domain-steps article > div canvas {
    transform: scale(1.08);
    transform-origin: center;
}

.hx-domain-steps strong {
    display: block;
    margin-bottom: 5px;
    color: #1d594d;
    font-size: 17px;
    line-height: 1.15;
    font-weight: 600;
}

.hx-domain-steps span {
    color: #3d5651;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 500;
}

.hx-domain-transfer-how .hx-domain-how-grid {
    display: block;
}

.hx-domain-transfer-how .hx-domain-how-content {
    max-width: 1180px;
    margin: 0 auto;
}

.hx-domain-transfer-how .hx-domain-how-content h2,
.hx-domain-transfer-how .hx-domain-how-content > p {
    text-align: center;
}

.hx-domain-transfer-how .hx-domain-how-content > p {
    max-width: 760px;
    margin-right: auto;
    margin-left: auto;
}

.hx-domain-transfer-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 28px;
}

.hx-domain-transfer-steps article {
    min-height: 156px;
    padding: 22px;
    border: 1px solid rgba(18, 91, 78, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 14px 30px rgba(6, 55, 48, 0.06);
}

.hx-domain-transfer-steps article > div {
    width: 88px;
    height: 88px;
}

.hx-domain-transfer-tip {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-top: 28px;
    padding: 18px 22px;
    border: 1px solid rgba(23, 126, 106, 0.16);
    border-radius: 12px;
    background: rgba(22, 123, 105, 0.08);
    box-shadow: 0 14px 28px rgba(8, 67, 56, 0.04);
}

.hx-transfer-info-icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(18, 91, 78, 0.2);
    border-radius: 50%;
    color: #167b69;
    background: rgba(255, 255, 255, 0.54);
    font-size: 22px;
    line-height: 1;
    font-weight: 600;
    font-style: normal;
}

.hx-domain-transfer-tip p {
    margin: 0;
    color: #23514a;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 500;
}

.hx-domain-benefits {
    padding: 70px 0 72px;
    color: #fff;
    background: linear-gradient(180deg, #0d584d 0%, #06433a 100%);
}

.hx-domain-section-title {
    margin-bottom: 52px;
    text-align: center;
}

.hx-domain-section-title h2 {
    margin: 0 0 10px;
    color: #f7fffc;
    font-size: 24px;
    font-weight: 600;
}

.hx-domain-section-title h2 strong {
    color: #ccf4aa;
}

.hx-domain-section-title p {
    margin: 0;
    color: #d9fff2;
    font-size: 14px;
    font-weight: 600;
}

.hx-domain-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 43px 58px;
}

.hx-domain-benefit-grid article {
    display: grid;
    min-height: 111px;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    padding: 18px;
    border: 1px solid rgba(133, 218, 190, 0.35);
    border-radius: 9px;
    background: rgba(33, 129, 112, 0.35);
    transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
}

.hx-domain-benefit-grid article:hover {
    transform: translateY(-3px);
    border-color: rgba(171, 244, 201, 0.75);
    background: rgba(48, 147, 128, 0.44);
}

.hx-domain-benefit-grid img {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

.hx-domain-benefit-grid strong {
    display: block;
    margin-bottom: 5px;
    color: #fff;
    font-size: 16px;
    line-height: 1.12;
    font-weight: 700;
}

.hx-domain-benefit-grid span {
    color: #dcfff1;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 400;
}

.hx-domain-cross {
    padding: 28px 0;
    color: #fff;
    background: #0f6a5e;
}

.hx-domain-cross-grid {
    display: grid;
    grid-template-columns: minmax(430px, 1.2fr) minmax(285px, 330px) minmax(285px, 330px);
    gap: 24px;
    align-items: center;
}

.hx-domain-cross-title p {
    margin: 9px 0 0;
    color: #ebfff8;
    font-size: 14px;
    font-weight: 600;
}

.hx-domain-cross-title h2 {
    color: #fff;
    font-size: 23px;
    white-space: nowrap;
}

.hx-domain-cross-title h2 strong {
    display: inline-block;
    color: #39e0c0;
    white-space: nowrap;
}

.hx-domain-cross a {
    display: grid;
    min-height: 89px;
    grid-template-columns: 98px minmax(0, 1fr);
    gap: 13px;
    align-items: center;
    padding: 13px 17px;
    border: 1px solid rgba(129, 231, 204, 0.28);
    border-radius: 9px;
    color: #fff;
    background: rgba(63, 157, 140, 0.6);
    text-decoration: none;
    transition: transform 190ms ease, background 190ms ease;
}

.hx-domain-cross a:hover {
    transform: translateY(-2px);
    background: rgba(71, 178, 157, 0.72);
}

.hx-domain-cross img {
    width: 94px;
    height: 78px;
    object-fit: contain;
}

.hx-domain-cross strong {
    display: block;
    margin-bottom: 5px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.hx-domain-cross span {
    color: #e8fff7;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 400;
}

.hx-domain-manage {
    padding: 52px 0 70px;
    background: #f2fffd;
}

.hx-domain-manage-grid {
    display: grid;
    grid-template-columns: 520px minmax(0, 1fr);
    gap: 74px;
    align-items: center;
}

.hx-domain-manage-media img {
    display: block;
    width: 100%;
    height: auto;
}

.hx-domain-manage p {
    max-width: 670px;
    margin: 14px 0 0;
    color: #3d5651;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 500;
}

.hx-domain-manage a {
    display: inline-flex;
    min-height: 39px;
    margin-top: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    border-radius: 10px;
    color: #fff;
    background: #105a4d;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 12px 24px rgba(16, 90, 77, 0.18);
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.hx-domain-manage a:hover,
.hx-domain-manage a:focus-visible {
    color: #fff;
    background: #15453a;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 16px 30px rgba(16, 90, 77, 0.26);
}

.hx-domain-faq {
    padding: 0 0 82px;
    background: linear-gradient(180deg, #f2fffd 0%, #d8f4ee 100%);
}

.hx-domain-faq .container {
    max-width: 1250px;
}

.hx-domain-faq-title {
    margin-bottom: 24px;
}

.hx-domain-faq-title h2 {
    color: #4c5c58;
}

.hx-domain-faq details {
    margin-bottom: 10px;
    border: 1px solid rgba(17, 105, 90, 0.18);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(7, 49, 43, 0.04);
}

.hx-domain-faq summary {
    display: flex;
    min-height: 50px;
    align-items: center;
    gap: 13px;
    padding: 0 24px;
    color: #3f504c;
    cursor: pointer;
    font-size: 17px;
    font-weight: 700;
    list-style: none;
}

.hx-domain-faq summary::-webkit-details-marker {
    display: none;
}

.hx-domain-faq summary::before {
    content: "";
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    background: #319b86;
    -webkit-mask: url("../assets/hostidex/icons/line-angle-double-right.svg") center / contain no-repeat;
    mask: url("../assets/hostidex/icons/line-angle-double-right.svg") center / contain no-repeat;
    transition: transform 180ms ease;
}

.hx-domain-faq details[open] summary::before {
    transform: rotate(90deg);
}

.hx-domain-faq details p {
    margin: 0;
    padding: 10px 24px 26px 51px;
    color: #566a65;
    font-size: 15px;
    line-height: 1.45;
    font-weight: 400;
}

.hx-lookup-shell {
    display: grid;
    gap: 28px;
}

.hx-lookup-card,
.hx-lookup-loading,
.hx-lookup-error {
    display: grid;
    align-items: center;
    border: 1px solid rgba(21, 69, 58, 0.12);
    border-radius: 12px;
    background: linear-gradient(90deg, #fbfffd 0%, #edf8f4 100%);
    box-shadow: 0 16px 38px rgba(5, 57, 49, 0.08);
}

.hx-lookup-card {
    position: relative;
    grid-template-columns: 124px minmax(0, 1fr) 130px 130px;
    gap: 18px;
    min-height: 94px;
    padding: 16px 22px 16px 36px;
    overflow: hidden;
}

.hx-lookup-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    border-radius: 12px 0 0 12px;
    background: #15453a;
}

.hx-lookup-card.is-primary {
    min-height: 104px;
    border-color: rgba(21, 69, 58, 0.16);
    background: linear-gradient(90deg, #ffffff 0%, #eef8f4 100%);
    box-shadow: 0 20px 52px rgba(5, 57, 49, 0.12);
}

.hx-lookup-logo {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    padding-right: 22px;
    border-right: 1px solid rgba(21, 69, 58, 0.12);
}

.hx-lookup-logo img {
    max-width: 88px;
    max-height: 42px;
    object-fit: contain;
}

.hx-lookup-text-logo {
    color: #0b6b5b;
    font-size: 24px;
    font-weight: 700;
}

.hx-lookup-name {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.hx-lookup-name span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #1f8f63;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
}

.hx-lookup-name span::before {
    content: "";
    width: 13px;
    height: 7px;
    margin-top: -3px;
    flex: 0 0 auto;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
}
.hx-lookup-card.is-unavailable .hx-lookup-name span,
.hx-lookup-card.is-unavailable .hx-lookup-name span::before {
    color: #7a2431;
}

.hx-lookup-name strong {
    color: #071f1c;
    font-size: 21px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.hx-lookup-price {
    display: grid;
    justify-items: start;
    gap: 4px;
}

.hx-lookup-price em {
    color: #134d43;
    font-size: 17px;
    font-style: normal;
    font-weight: 600;
}

.hx-lookup-price span {
    color: #446a62;
    font-size: 13px;
    font-weight: 400;
}

.hx-lookup-card a,
.hx-lookup-add {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    align-self: center;
    padding: 0 22px;
    border-radius: 10px;
    border: 0;
    background: #15453a;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
    white-space: nowrap;
    cursor: pointer;
}

.hx-lookup-card a:hover,
.hx-lookup-add:hover {
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    background: #1d5d4f;
    box-shadow: 0 12px 22px rgba(21, 69, 58, 0.2);
}

.hx-lookup-add .loading,
.hx-lookup-add .added {
    display: none;
}

.hx-lookup-add.is-loading .to-add,
.hx-lookup-add.is-added .to-add {
    display: none;
}

.hx-lookup-add.is-loading .loading,
.hx-lookup-add.is-added .added {
    display: inline;
}

.hx-lookup-add.is-added {
    background: #1f8f63;
}

.hx-lookup-add.is-error {
    background: #7a2431;
}

.hx-lookup-add.is-disabled,
.hx-lookup-add.is-disabled:hover {
    background: #7b918b;
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.hx-lookup-suggestions {
    display: grid;
    gap: 26px;
    margin-top: 18px;
}

.hx-lookup-suggestions h3 {
    margin: 0;
    color: #071f1c;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}

.hx-lookup-suggestions > div {
    display: grid;
    gap: 18px;
}

.hx-lookup-loading,
.hx-lookup-error {
    justify-items: center;
    min-height: 145px;
    padding: 24px;
    text-align: center;
}

.hx-lookup-loading span {
    width: 34px;
    height: 34px;
    margin-bottom: 10px;
    border: 3px solid rgba(34, 152, 128, 0.18);
    border-top-color: #23aa8c;
    border-radius: 50%;
    animation: hxSpin 850ms linear infinite;
}

.hx-lookup-loading strong,
.hx-lookup-error strong {
    color: #113f37;
    font-size: 18px;
    font-weight: 600;
}

.hx-lookup-loading p,
.hx-lookup-error p {
    margin: 4px 0 0;
    color: #58756f;
    font-size: 13px;
    font-weight: 500;
}

@keyframes hxSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1199px) {
    .hx-domain-tlds,
    .hx-domain-benefit-grid {
        gap: 16px;
    }

    .hx-domain-how-grid,
    .hx-domain-manage-grid {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .hx-domain-how-media,
    .hx-domain-manage-media {
        max-width: 640px;
        margin: 0 auto;
    }

    .hx-domain-cross-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hx-domain-cross-title {
        grid-column: 1 / -1;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .hx-domain-register-hero {
        padding-top: 34px;
        min-height: 460px;
    }

    .hx-domain-register-head h1 {
        font-size: 22px;
    }

    .hx-domain-register-head h1 strong {
        white-space: normal;
    }

    .hx-domain-register-head p {
        font-size: 15px;
    }

    .hx-domain-register-form {
        grid-template-columns: 30px minmax(0, 1fr);
        min-height: 98px;
        padding: 8px;
    }

    .hx-domain-transfer-form {
        grid-template-columns: 1fr;
        max-width: 100%;
        padding: 14px;
    }

    .hx-domain-transfer-hero {
        padding: 34px 0 46px;
    }

    .hx-domain-procedure-hero {
        padding: 42px 0 50px;
    }

    .hx-domain-procedure-content {
        padding: 34px 0 54px;
    }

    .hx-domain-procedure-article {
        padding: 24px 18px;
        border-radius: 10px;
    }

    .hx-domain-procedure-article h2 {
        font-size: 20px;
    }

    .hx-domain-procedure-article h3 {
        font-size: 16px;
    }

    .hx-domain-procedure-article p {
        font-size: 14px;
        line-height: 1.62;
    }

    .hx-about-hero {
        padding: 46px 0 48px;
    }

    .hx-about-hero-inner h1 {
        font-size: 30px;
    }

    .hx-about-hero-inner p {
        font-size: 16px;
    }

    .hx-about-content-section {
        padding: 38px 0 62px;
    }

    .hx-about-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .hx-about-content {
        padding: 28px 22px;
    }

    .hx-about-lead h2,
    .hx-about-values h2 {
        font-size: 23px;
    }

    .hx-about-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hx-about-statement-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hx-about-statement-card {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 14px;
        padding: 20px 16px;
    }

    .hx-about-statement-icon {
        width: 48px;
        height: 48px;
        border-radius: 12px;
        font-size: 19px;
    }

    .hx-about-statement-card h3 {
        font-size: 18px;
    }

    .hx-about-statement-card p {
        font-size: 15px;
        line-height: 1.62;
    }

    .hx-about-partners {
        margin-top: 28px;
        padding-top: 26px;
    }

    .hx-about-partners-head h2 {
        font-size: 23px;
    }

    .hx-about-partner-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .hx-about-partner-card {
        min-height: 82px;
        padding: 10px;
    }

    .hx-about-partner-card img {
        height: 58px;
    }

    .hx-info-card-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-top: 22px;
    }

    .hx-info-card {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 14px;
        min-height: 0;
        padding: 18px;
    }

    .hx-info-card h3,
    .hx-bank-card h3 {
        font-size: 17px;
    }

    .hx-info-card p,
    .hx-text-policy p {
        font-size: 15px;
    }

    .hx-text-policy h2 {
        font-size: 21px;
    }

    .hx-text-policy h3 {
        font-size: 17px;
    }

    .hx-bank-grid {
        margin-top: 22px;
        gap: 12px;
    }

    .hx-bank-card {
        grid-template-columns: 1fr;
        gap: 14px;
        min-height: 0;
        padding: 18px;
    }

    .hx-bank-logo {
        width: 138px;
        height: 54px;
        font-size: 21px;
    }

    .hx-bank-card p {
        overflow-wrap: anywhere;
        font-size: 16px;
    }

    .hx-alert-box {
        padding: 16px 18px;
        font-size: 14px;
    }

    .hx-about-sidebar {
        position: static;
        order: -1;
    }

    .hx-about-sidebar nav {
        padding: 12px;
    }

    .hx-tr-docs-intro {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hx-tr-doc-card {
        min-height: 96px;
        grid-template-columns: 58px minmax(0, 1fr);
        padding: 14px;
    }

    .hx-tr-doc-icon {
        width: 56px;
        height: 56px;
        border-radius: 12px;
    }

    .hx-tr-doc-copy {
        padding: 18px;
    }

    .hx-tr-doc-note {
        margin: 24px 0;
        padding: 18px;
    }

    .hx-tr-doc-tab-buttons {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hx-tr-doc-tab-buttons button {
        min-width: 0;
        padding: 0 10px;
        font-size: 13px;
    }

    .hx-tr-doc-tab-panels section {
        padding: 20px 18px;
    }

    .hx-domain-price-toolbar {
        grid-template-columns: 1fr;
    }

    .hx-domain-price-search {
        width: 100%;
    }

    .hx-domain-price-table th,
    .hx-domain-price-table td {
        padding: 14px 16px;
        font-size: 13px;
    }

    .hx-domain-price-table td:first-child strong {
        font-size: 16px;
    }

    .hx-domain-transfer-form .btn {
        justify-self: stretch;
        width: 100%;
    }

    .hx-domain-register-form .btn {
        grid-column: 1 / -1;
        width: 100%;
    }

    .hx-domain-tlds {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: 34px;
    }

    .hx-domain-tlds a {
        min-height: 40px;
        gap: 8px;
        padding: 0 10px;
    }

    .hx-domain-tlds a.is-featured span {
        display: none;
    }

    .hx-domain-tlds strong {
        font-size: 18px;
    }

    .hx-domain-tlds img {
        max-width: 92px;
        max-height: 38px;
    }

    .hx-domain-tlds em {
        font-size: 11px;
    }

    .hx-domain-results-wrap {
        padding-top: 30px;
    }

    .hx-lookup-heading,
    .hx-lookup-card {
        grid-template-columns: 1fr;
    }

    .hx-lookup-heading {
        align-items: start;
        gap: 4px;
    }

    .hx-lookup-heading strong {
        font-size: 18px;
    }

    .hx-lookup-card {
        gap: 10px;
        min-height: 0;
        padding: 18px;
    }

    .hx-lookup-logo {
        justify-content: flex-start;
        padding-right: 0;
        border-right: 0;
    }

    .hx-lookup-name strong {
        font-size: 17px;
    }

    .hx-lookup-price {
        justify-items: start;
    }

    .hx-lookup-card a,
    .hx-lookup-add {
        width: 100%;
    }

    .hx-lookup-suggestions > div {
        grid-template-columns: 1fr;
    }

    .hx-domain-how {
        padding-top: 26px;
    }

    .hx-domain-how-grid {
        gap: 18px;
    }

    .hx-domain-how-media {
        order: 2;
    }

    .hx-domain-how-content {
        order: 1;
    }

    .hx-domain-how-content h2,
    .hx-domain-manage h2,
    .hx-domain-cross-title h2,
    .hx-domain-faq-title h2 {
        font-size: 20px;
        text-align: center;
    }

    .hx-domain-how-content > p,
    .hx-domain-cross-title p {
        text-align: center;
    }

    .hx-domain-steps article {
        grid-template-columns: 88px minmax(0, 1fr);
        gap: 14px;
    }

    .hx-domain-steps article > div {
        width: 84px;
        height: 84px;
    }

    .hx-domain-steps strong {
        font-size: 14px;
    }

    .hx-domain-steps span {
        font-size: 12px;
    }

    .hx-domain-transfer-steps {
        grid-template-columns: 1fr;
    }

    .hx-domain-transfer-steps article {
        min-height: 0;
        padding: 16px;
    }

    .hx-domain-transfer-tip {
        grid-template-columns: 34px minmax(0, 1fr);
        padding: 16px;
    }

    .hx-transfer-info-icon {
        width: 34px;
        height: 34px;
        font-size: 19px;
    }

    .hx-domain-transfer-tip p {
        font-size: 13px;
    }

    .hx-domain-benefits {
        padding: 46px 0;
    }

    .hx-domain-section-title {
        margin-bottom: 26px;
    }

    .hx-domain-section-title h2 {
        font-size: 20px;
    }

    .hx-domain-benefit-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .hx-domain-benefit-grid article {
        min-height: 96px;
        grid-template-columns: 60px minmax(0, 1fr);
        padding: 14px;
    }

    .hx-domain-benefit-grid img {
        width: 54px;
        height: 54px;
    }

    .hx-domain-cross-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hx-domain-cross a {
        grid-template-columns: 84px minmax(0, 1fr);
    }

    .hx-domain-cross img {
        width: 78px;
        height: 66px;
    }

    .hx-domain-manage {
        padding: 34px 0 46px;
    }

    .hx-domain-manage p {
        font-size: 16px;
        text-align: center;
    }

    .hx-domain-manage a {
        display: flex;
        width: max-content;
        max-width: 100%;
        margin: 20px auto 0;
    }

    .hx-domain-faq {
        padding-bottom: 58px;
    }

    .hx-domain-faq summary {
        padding: 0 14px;
        font-size: 15px;
    }

    .hx-domain-faq details p {
        padding: 8px 14px 20px 41px;
        font-size: 15px;
    }
}

@media (max-width: 1199px) {
    .hx-wh-hero-inner {
        grid-template-columns: minmax(0, 1fr) 480px;
        gap: 34px;
    }

    .hx-wh-plan-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hx-kurumsal-hosting-page .hx-wh-discount-img {
        right: 160px;
    }

    .hx-kurumsal-hosting-page .hx-corp-need-img {
        top: 230px;
    }

    .hx-rs-custom-package {
        grid-template-columns: 1fr 1fr;
    }

    .hx-rs-custom-buy {
        grid-column: 1 / -1;
        width: 360px;
        max-width: 100%;
        justify-self: center;
    }

    .hx-vds-plan-row {
        grid-template-columns: 190px repeat(3, minmax(0, 1fr));
    }

    .hx-vds-buy {
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) 220px;
        border-top: 1px solid rgba(16, 70, 60, 0.12);
    }

    .hx-vds-gift-img {
        left: 0;
        width: 104px;
        height: 104px;
    }

    .hx-vds-panel-img {
        left: 4px;
        width: 98px;
        height: 98px;
    }

    .hx-wh-fast-grid,
    .hx-wh-content-row,
    .hx-wh-content-row-alt {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .hx-wh-content-row-alt img {
        order: 2;
    }

    .hx-wh-content-row img {
        max-width: 560px;
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .hx-wh-hero {
        min-height: 0;
        padding: 42px 0 0;
    }

    .hx-wh-hero-inner {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hx-wh-hero-copy {
        text-align: center;
    }

    .hx-wh-hero-copy h1 {
        font-size: 27px;
    }

    .hx-wh-hero-copy p {
        font-size: 14px;
    }

    .hx-wh-hero-badges {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin-top: 22px;
    }

    .hx-wh-hero-badges span {
        min-height: 42px;
        padding: 0 10px;
        font-size: 11px;
        text-align: left;
    }

    .hx-wh-hero-media {
        min-height: 0;
    }

    .hx-wh-hero-person {
        max-width: 360px;
        margin: 0 auto;
    }

    .hx-wh-discount-img {
        top: 12px;
        right: calc(50% - 170px);
        width: 80px;
        height: 80px;
    }

    .hx-wordpress-hosting-page .hx-wh-discount-img {
        right: calc(50% - 120px);
    }

    .hx-wordpress-hosting-page .hx-wp-ai-img {
        top: 12px;
        right: calc(50% + 40px);
        width: 80px;
        height: 80px;
    }

    .hx-reseller-hosting-page .hx-rs-brand-img {
        top: 12px;
        left: calc(50% - 170px);
        width: 80px;
        height: 80px;
    }

    .hx-kurumsal-hosting-page .hx-corp-need-img {
        top: auto;
        bottom: 18px;
        left: calc(50% - 165px);
        width: 80px;
        height: 80px;
    }

    .hx-kurumsal-hosting-page .hx-wh-discount-img {
        right: calc(50% - 165px);
    }

    .hx-uygulama-hosting-page .hx-wh-discount-img {
        right: calc(50% - 170px);
    }

    .hx-app-host-tab-list {
        gap: 8px;
        transform: translateY(0);
        padding-top: 18px;
    }

    .hx-app-host-tab-list label {
        min-height: 42px;
        padding: 0 13px;
        font-size: 12px;
    }

    .hx-app-host-tab-list img {
        width: 20px;
        height: 20px;
    }

    .hx-app-host-panels {
        margin-top: 0;
    }

    .hx-vds-plans {
        padding: 28px 0 42px;
    }

    .hx-vds-gift-img {
        top: 8px;
        left: calc(50% - 170px);
        width: 76px;
        height: 76px;
    }

    .hx-vds-panel-img {
        left: calc(50% - 170px);
        bottom: 97px;
        width: 74px;
        height: 74px;
    }

    .hx-vds-plan-stack {
        gap: 18px;
    }

    .hx-vds-plan-row {
        grid-template-columns: 1fr 1fr;
        overflow: hidden;
    }

    .hx-vds-plan-name {
        grid-column: 1 / -1;
        justify-content: center;
        border-radius: 5px 5px 0 0;
        padding: 14px;
    }

    .hx-vds-plan-name strong {
        font-size: 16px;
    }

    .hx-vds-spec,
    .hx-vds-os {
        min-height: 78px;
        padding: 26px 12px 10px;
        border-top: 1px solid rgba(16, 70, 60, 0.1);
    }

    .hx-vds-spec strong {
        font-size: 16px;
    }

    .hx-vds-spec em {
        font-size: 12px;
    }

    .hx-vds-spec span,
    .hx-vds-os span {
        top: 7px;
        min-width: 0;
        min-height: 20px;
        padding: 0;
        border: 0;
        background: transparent;
        font-size: 10px;
    }

    .hx-vds-os img {
        width: 64px;
    }

    .hx-vds-buy {
        grid-column: 1 / -1;
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 12px;
        padding: 16px;
        text-align: center;
    }

    .hx-vds-buy strong {
        justify-content: center;
    }

    .hx-vds-buy strong b {
        font-size: 28px;
    }

    .hx-vds-buy a {
        width: 100%;
        max-width: 260px;
    }

    .hx-wh-plan-grid {
        grid-template-columns: 1fr;
        gap: 14px;
        transform: translateY(0);
        padding-top: 24px;
    }

    .hx-wh-plan-card {
        min-height: 0;
    }

    .hx-wh-domain-gift {
        margin-top: 18px;
        font-size: 15px;
    }

    .hx-rs-custom-package {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-top: 34px;
        padding: 36px 18px 22px;
    }

    .hx-rs-custom-ribbon {
        width: calc(100% - 36px);
        min-height: 34px;
        padding: 0 12px;
        font-size: 14px;
        border-radius: 8px;
    }

    .hx-rs-custom-intro {
        grid-template-columns: 1fr;
        gap: 12px;
        text-align: center;
    }

    .hx-rs-custom-intro img {
        max-width: 210px;
        margin: 0 auto;
    }

    .hx-rs-custom-package h3 {
        font-size: 18px;
    }

    .hx-rs-custom-package p,
    .hx-rs-custom-features li {
        font-size: 14px;
    }

    .hx-rs-custom-features {
        padding-left: 0;
        border-left: 0;
    }

    .hx-rs-custom-features ul {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .hx-rs-custom-features li {
        white-space: normal;
    }

    .hx-rs-custom-buy {
        width: 100%;
    }

    .hx-rs-custom-buy label {
        font-size: 17px;
    }

    .hx-wh-fast-strip {
        padding: 36px 0;
    }

    .hx-wh-fast-grid {
        gap: 28px;
    }

    .hx-wh-fast-grid article {
        grid-template-columns: 190px minmax(0, 1fr);
        gap: 16px;
    }

    .hx-wh-fast-grid article:first-child {
        grid-template-columns: 190px minmax(0, 1fr);
    }

    .hx-wh-fast-grid [data-hx-lottie] {
        width: 190px;
        min-width: 0;
        height: 158px;
    }

    .hx-wh-fast-grid article:first-child [data-hx-lottie] {
        width: 190px;
        min-width: 0;
        height: 158px;
    }

    .hx-wh-fast-grid [data-hx-lottie] svg {
        transform: scale(1.15) !important;
    }

    .hx-wh-fast-grid article:first-child [data-hx-lottie] svg {
        transform: scale(1.15) !important;
    }

    .hx-wh-fast-grid strong {
        font-size: 17px;
    }

    .hx-wh-fast-grid em {
        font-size: 12px;
    }

    .hx-wh-content {
        padding: 46px 0;
    }

    .hx-wh-content-row + .hx-wh-content-row {
        margin-top: 46px;
    }

    .hx-wh-content h2 {
        font-size: 20px;
        text-align: center;
    }

    .hx-wh-content p {
        font-size: 14px;
        text-align: center;
    }

    .hx-wh-content a {
        display: flex;
        width: max-content;
        max-width: 100%;
        margin: 14px auto 0;
        font-size: 13px;
    }

    .hx-wh-related-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .hx-wh-related > .container > span {
        padding: 0 18px;
        font-size: 12px;
        text-align: center;
    }

    .hx-wh-compare {
        min-height: 0;
        padding: 42px 0 70px;
    }

    .hx-wh-compare-title,
    .hx-wh-compare-title h2 {
        text-align: center;
    }
}

.hx-dedicated-page .container {
    width: calc(100% - 40px);
    max-width: 1400px;
}

.hx-dedicated-page .hx-wh-hero-inner {
    grid-template-columns: minmax(0, 1fr) 720px;
}

.hx-dedicated-page .hx-wh-hero-person {
    max-width: 720px;
}

.hx-dedicated-page .hx-vds-gift-img {
    top: 18px;
    left: 25%;
    width: 126px;
    height: 126px;
}

.hx-dedicated-page .hx-vds-plan-stack {
    gap: 22px;
}

.hx-dedicated-page .hx-vds-plan-row {
    grid-template-columns: 180px 160px 138px 138px 138px 126px minmax(212px, 1fr) 190px;
    min-height: 78px;
    overflow: visible;
}

.hx-dedicated-page .hx-vds-plan-name {
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 10px 12px;
    text-align: center;
}

.hx-dedicated-page .hx-vds-plan-name img {
    width: 132px;
    max-width: 100%;
}

.hx-dedicated-page .hx-vds-plan-name strong {
    font-size: 16px;
    line-height: 1;
}

.hx-dedicated-page .hx-vds-spec {
    padding: 21px 10px 11px;
}

.hx-dedicated-page .hx-vds-spec strong {
    font-size: 16px;
}

.hx-dedicated-page .hx-vds-spec em {
    font-size: 13px;
}

.hx-dedicated-common {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    padding: 21px 14px 10px 17px;
    border-left: 1px solid rgba(16, 70, 60, 0.12);
    color: #252525;
}

.hx-dedicated-common > span {
    position: absolute;
    top: -14px;
    left: 50%;
    display: inline-flex;
    min-height: 27px;
    min-width: 128px;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid rgba(25, 117, 104, 0.16);
    border-radius: 7px;
    background: #dff5f1;
    color: #10483f;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    transform: translateX(-50%);
    white-space: nowrap;
}

.hx-dedicated-common ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hx-dedicated-common li {
    position: relative;
    padding-left: 14px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.15;
}

.hx-dedicated-common li::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 7px;
    height: 9px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: #2c9c86;
}

.hx-dedicated-page .hx-vds-buy {
    grid-template-columns: 1fr;
    padding: 14px;
}

.hx-dedicated-page .hx-vds-buy a {
    width: 100%;
    min-height: 44px;
    font-size: 15px;
}

.hx-dedicated-infra {
    padding: 58px 0 24px;
    background: linear-gradient(180deg, #fafffd 0%, #f0fffc 100%);
}

.hx-dedicated-infra .container {
    display: grid;
    gap: 34px;
}

.hx-dedicated-infra-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
    align-items: center;
    gap: 54px;
    min-height: 360px;
    padding: 38px 46px;
    border: 1px solid rgba(24, 130, 90, 0.14);
    border-radius: 14px;
    background:
        radial-gradient(circle at 88% 18%, rgba(112, 229, 184, 0.18), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f8fffd 100%);
    box-shadow: 0 20px 48px rgba(10, 78, 67, 0.07);
}

.hx-dedicated-infra-row-alt {
    grid-template-columns: minmax(420px, 0.9fr) minmax(0, 1fr);
}

.hx-dedicated-infra-copy {
    min-width: 0;
}

.hx-dedicated-infra-copy > span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    background: #e1f8f3;
    color: #10473c;
    font-size: 13px;
    font-weight: 600;
}

.hx-dedicated-infra-copy h2 {
    margin: 14px 0 14px;
    color: #113b32;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
}

.hx-dedicated-infra-copy p {
    max-width: 660px;
    margin: 0 0 12px;
    color: #31544c;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.72;
}

.hx-dedicated-infra-media,
.hx-dedicated-video-frame {
    min-width: 0;
}

.hx-dedicated-infra-media img {
    display: block;
    width: 100%;
    max-height: 360px;
    object-fit: contain;
}

.hx-dedicated-turkcell-img {
    display: block;
    width: 100%;
    max-width: 520px;
    margin: 0 0 18px;
}

.hx-dedicated-video-frame {
    justify-self: center;
    overflow: hidden;
    width: min(100%, 430px);
    padding: 10px;
    border: 1px solid rgba(28, 235, 245, 0.24);
    border-radius: 16px;
    background: linear-gradient(180deg, #0f4b41 0%, #08352f 100%);
    box-shadow: 0 22px 52px rgba(10, 78, 67, 0.16);
}

.hx-dedicated-video-frame video {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    border-radius: 10px;
    background: #0b302a;
    object-fit: cover;
}

@media (max-width: 1199px) {
    .hx-dedicated-page .hx-vds-plan-row {
        grid-template-columns: 180px repeat(3, minmax(0, 1fr));
    }

    .hx-dedicated-common,
    .hx-dedicated-page .hx-vds-buy {
        grid-column: span 2;
        border-top: 1px solid rgba(16, 70, 60, 0.12);
    }

    .hx-dedicated-infra-row,
    .hx-dedicated-infra-row-alt {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding: 30px;
    }
}

@media (max-width: 767px) {
    .hx-dedicated-page .hx-wh-hero-inner {
        grid-template-columns: 1fr;
    }

    .hx-dedicated-page .hx-vds-gift-img {
        top: 8px;
        left: calc(50% - 170px);
        width: 76px;
        height: 76px;
    }

    .hx-dedicated-page .hx-vds-plan-row {
        grid-template-columns: 1fr 1fr;
    }

    .hx-dedicated-common {
        grid-column: 1 / -1;
        min-height: 94px;
        padding: 32px 18px 14px;
    }

    .hx-dedicated-page .hx-vds-buy {
        grid-column: 1 / -1;
    }

    .hx-dedicated-infra {
        padding: 36px 0 16px;
    }

    .hx-dedicated-infra .container {
        gap: 20px;
    }

    .hx-dedicated-infra-row,
    .hx-dedicated-infra-row-alt {
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: 0;
        padding: 24px 18px;
    }

    .hx-dedicated-infra-row-alt .hx-dedicated-infra-media {
        order: 2;
    }

    .hx-dedicated-infra-row-alt .hx-dedicated-infra-copy {
        order: 1;
    }

    .hx-dedicated-infra-copy h2 {
        font-size: 24px;
    }

    .hx-dedicated-infra-copy p {
        font-size: 14px;
        line-height: 1.62;
    }

    .hx-dedicated-infra-media img {
        max-height: 250px;
    }

    .hx-dedicated-turkcell-img {
        max-width: 100%;
    }
}


/* Hostidex invoice payment panel */
.invoice-container .hx-invoice-payment-panel {
    margin: 26px 0 22px;
    padding: 18px;
    border: 1px solid rgba(16, 71, 60, 0.14);
    border-radius: 12px;
    background: #fafffd;
    box-shadow: 0 18px 40px rgba(10, 78, 67, 0.08);
}

.invoice-container .hx-invoice-payment-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(16, 71, 60, 0.12);
}

.invoice-container .hx-invoice-payment-head strong {
    display: block;
    color: #0b302a;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.invoice-container .hx-invoice-payment-head span {
    display: block;
    margin-top: 5px;
    color: #52756d;
    font-size: 14px;
    font-weight: 400;
}

.invoice-container .hx-invoice-gateway-form {
    display: grid;
    gap: 6px;
    min-width: 260px;
    margin: 0;
    text-align: left;
}

.invoice-container .hx-invoice-gateway-form label {
    margin: 0;
    color: #10473c;
    font-size: 13px;
    font-weight: 600;
}

.invoice-container .hx-invoice-gateway-form select {
    min-height: 42px;
    border: 1px solid rgba(16, 71, 60, 0.18);
    border-radius: 8px;
    color: #0b302a;
    font-weight: 600;
    background-color: #fff;
}

.invoice-container .hx-invoice-payment-output {
    width: 100%;
}

.invoice-container .hx-invoice-payment-output form,
.invoice-container .hx-invoice-payment-output .bank-transfer-info,
.invoice-container .hx-invoice-payment-output .alert {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
}

.invoice-container .hx-paytr-embedded {
    max-width: 980px !important;
    margin: 0 auto !important;
}

.invoice-container .hx-paytr-frame-wrap iframe {
    min-height: 760px !important;
}

@media (max-width: 768px) {
    .invoice-container .hx-invoice-payment-panel {
        padding: 14px;
    }

    .invoice-container .hx-invoice-payment-head {
        align-items: stretch;
        flex-direction: column;
    }

    .invoice-container .hx-invoice-gateway-form {
        min-width: 0;
        width: 100%;
    }
}

.invoice-container {
    max-width: 1180px !important;
}

.invoice-container .invoice-header {
    align-items: flex-start;
}

.invoice-header .hx-invoice-logo { max-width: 260px; height: auto; border-radius: 10px; }

/* Hostidex modern invoice layout */
.invoice-container {
    max-width: 1400px !important;
    padding: 24px 18px 44px;
}

.invoice-container .invoice-header {
    align-items: center;
    padding: 24px 26px;
    margin-bottom: 24px;
    border: 1px solid rgba(16, 71, 60, 0.12);
    border-radius: 16px;
    background: #fafffd;
    box-shadow: 0 18px 42px rgba(10, 78, 67, 0.08);
}

.invoice-container > hr {
    display: none;
}

.invoice-header .hx-invoice-logo {
    max-width: 260px;
    height: auto;
    border-radius: 10px;
}

.invoice-container .hx-invoice-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 500px);
    gap: 24px;
    align-items: start;
}

.invoice-container .hx-invoice-main,
.invoice-container .hx-invoice-side {
    min-width: 0;
}

.invoice-container .hx-invoice-side {
    position: sticky;
    top: 24px;
}

.invoice-container .hx-invoice-card,
.invoice-container .hx-invoice-payment-panel {
    border: 1px solid rgba(16, 71, 60, 0.14);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(10, 78, 67, 0.08);
}

.invoice-container .hx-invoice-card {
    padding: 22px;
    margin-bottom: 20px;
}

.invoice-container .hx-invoice-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(16, 71, 60, 0.12);
}

.invoice-container .hx-invoice-card-head span {
    color: #0b302a;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.25;
}

.invoice-container .hx-invoice-card-head strong {
    color: #38b07c;
    font-size: 15px;
    font-weight: 700;
    text-align: right;
}

.invoice-container .hx-invoice-party-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.invoice-container .hx-invoice-party {
    padding: 16px;
    border: 1px solid rgba(16, 71, 60, 0.08);
    border-radius: 12px;
    background: #fafffd;
}

.invoice-container .hx-invoice-party small {
    display: block;
    margin-bottom: 8px;
    color: #10473c;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.invoice-container .hx-invoice-party address,
.invoice-container .hx-invoice-note-content {
    margin: 0;
    color: #334b46;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.7;
}

.invoice-container .hx-invoice-items-card .table-responsive,
.invoice-container .hx-invoice-ledger .table-responsive {
    border-radius: 12px;
}

.invoice-container .hx-invoice-items-table td,
.invoice-container .hx-invoice-ledger table td {
    vertical-align: middle;
    padding: 12px 14px;
    color: #263f3a;
    font-size: 14px;
}

.invoice-container .hx-invoice-items-table thead td,
.invoice-container .hx-invoice-ledger thead td {
    border-top: 0;
    background: #f0fffc;
    color: #10473c;
}

.invoice-container .hx-invoice-grand-total td {
    background: #10473c !important;
    color: #fff !important;
    font-size: 17px;
}

.invoice-container .hx-invoice-tax-note {
    margin: 12px 0 0;
    color: #52756d;
    font-size: 13px;
}

.invoice-container .hx-invoice-payment-panel {
    margin: 0;
    padding: 20px;
    background: #fafffd;
}

.invoice-container .hx-invoice-payment-summary {
    padding: 18px;
    margin-bottom: 18px;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(180deg, #10473c 0%, #18825a 100%);
}

.invoice-container .hx-invoice-payment-summary span {
    display: block;
    font-size: 13px;
    font-weight: 600;
    opacity: 0.82;
}

.invoice-container .hx-invoice-payment-summary strong {
    display: block;
    margin-top: 4px;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
}

.invoice-container .hx-invoice-payment-summary small {
    display: block;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.84);
    font-size: 13px;
}

.invoice-container .hx-invoice-payment-head {
    display: grid !important;
    align-items: stretch !important;
    gap: 14px !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid rgba(16, 71, 60, 0.12) !important;
}

.invoice-container .hx-invoice-payment-head strong {
    color: #0b302a !important;
    font-size: 21px !important;
    font-weight: 700 !important;
}

.invoice-container .hx-invoice-payment-head span {
    color: #52756d !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.invoice-container .hx-invoice-gateway-form {
    display: grid !important;
    width: 100%;
    min-width: 0 !important;
    gap: 7px !important;
}

.invoice-container .hx-invoice-gateway-form select {
    width: 100%;
    min-height: 44px;
    border: 1px solid rgba(16, 71, 60, 0.2);
    border-radius: 10px;
    background: #fff;
    color: #0b302a;
    font-weight: 700;
}

.invoice-container .hx-invoice-current-gateway {
    padding: 12px 14px;
    border: 1px solid rgba(16, 71, 60, 0.14);
    border-radius: 10px;
    background: #fff;
    color: #10473c;
    font-weight: 700;
}

.invoice-container .hx-invoice-payment-output,
.invoice-container .hx-invoice-payment-output form,
.invoice-container .hx-invoice-payment-output .bank-transfer-info,
.invoice-container .hx-invoice-payment-output .alert {
    width: 100%;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.invoice-container .hx-invoice-payment-output .btn,
.invoice-container .hx-invoice-credit-card .btn {
    border: 0;
    border-radius: 10px;
    background: linear-gradient(180deg, #18825a 0%, #38b07c 100%);
    color: #fff;
    font-weight: 700;
}

.invoice-container .hx-paytr-embedded {
    max-width: none !important;
    margin: 0 !important;
    box-shadow: none !important;
}

.invoice-container .hx-paytr-frame-wrap iframe {
    width: 100% !important;
    min-height: 760px !important;
}

.invoice-container .hx-invoice-paid-note {
    padding: 14px;
    border: 1px dashed rgba(16, 71, 60, 0.25);
    border-radius: 10px;
    background: #fff;
    color: #52756d;
}

.invoice-container .hx-invoice-credit-card {
    margin-top: 18px;
}

.invoice-container .hx-invoice-credit-card p {
    color: #52756d;
    font-size: 14px;
}

.invoice-container .hx-invoice-credit-card label {
    display: block;
    margin-bottom: 6px;
    color: #10473c;
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 991px) {
    .invoice-container .hx-invoice-layout {
        grid-template-columns: 1fr;
    }

    .invoice-container .hx-invoice-side {
        position: static;
        order: -1;
    }

    .invoice-container .hx-invoice-payment-panel {
        margin-bottom: 20px;
    }
}

@media (max-width: 640px) {
    .invoice-container {
        padding: 14px 10px 32px;
    }

    .invoice-container .invoice-header {
        padding: 18px 16px;
        text-align: center;
    }

    .invoice-header .hx-invoice-logo {
        max-width: 210px;
    }

    .invoice-container .hx-invoice-party-grid {
        grid-template-columns: 1fr;
    }

    .invoice-container .hx-invoice-card,
    .invoice-container .hx-invoice-payment-panel {
        padding: 16px;
        border-radius: 14px;
    }

    .invoice-container .hx-invoice-card-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .invoice-container .hx-invoice-card-head strong {
        text-align: left;
    }

    .invoice-container .hx-invoice-payment-summary strong {
        font-size: 25px;
    }

    .invoice-container .hx-invoice-ledger table,
    .invoice-container .hx-invoice-items-card table {
        min-width: 620px;
    }
}

/* Hostidex invoice final layout override */
body .invoice-container {
    width: min(1400px, calc(100% - 32px)) !important;
    max-width: 1400px !important;
    margin: 28px auto 44px !important;
    padding: 0 !important;
}

body .invoice-container .invoice-header {
    margin: 0 0 18px !important;
    padding: 24px 28px !important;
    border: 1px solid rgba(16, 71, 60, 0.14) !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 90% 10%, rgba(162, 210, 189, 0.16), transparent 34%),
        linear-gradient(180deg, #fafffd 0%, #f9fbfa 100%) !important;
    box-shadow: 0 20px 50px rgba(10, 78, 67, 0.10) !important;
}

body .invoice-container .invoice-header h3 {
    margin: 10px 0 0;
    color: #0b302a;
    font-size: 28px;
    font-weight: 700;
}

body .invoice-container .invoice-status span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0;
}

body .invoice-container .hx-invoice-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid rgba(16, 71, 60, 0.12);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(10, 78, 67, 0.07);
}

body .invoice-container .hx-invoice-back-btn,
body .invoice-container .hx-invoice-soft-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

body .invoice-container .hx-invoice-back-btn {
    background: linear-gradient(180deg, #18825a 0%, #38b07c 100%);
    color: #fff !important;
    box-shadow: 0 12px 22px rgba(24, 130, 90, 0.18);
}

body .invoice-container .hx-invoice-soft-btn {
    border: 1px solid rgba(16, 71, 60, 0.14);
    background: #fafffd;
    color: #10473c !important;
}

body .invoice-container .hx-invoice-back-btn:hover,
body .invoice-container .hx-invoice-soft-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 24px rgba(10, 78, 67, 0.12);
}

body .invoice-container .hx-invoice-toolbar-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

body .invoice-container .hx-invoice-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 480px) !important;
    gap: 24px !important;
    align-items: start !important;
}

body .invoice-container .hx-invoice-card,
body .invoice-container .hx-invoice-payment-panel {
    border: 1px solid rgba(16, 71, 60, 0.13) !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 44px rgba(10, 78, 67, 0.08) !important;
}

body .invoice-container .hx-invoice-card-head {
    margin: -22px -22px 18px !important;
    padding: 17px 22px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(16, 71, 60, 0.10) !important;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, #f0fffc 0%, #f7fdfb 100%);
}

body .invoice-container .hx-invoice-card-head span {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0b302a !important;
    font-size: 20px !important;
    font-weight: 800 !important;
}

body .invoice-container .hx-invoice-card-head span::before {
    content: "";
    width: 5px;
    height: 24px;
    border-radius: 99px;
    background: #38b07c;
}

body .invoice-container .hx-invoice-card-head strong {
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(56, 176, 124, 0.14);
    color: #10473c !important;
    font-size: 14px !important;
}

body .invoice-container .hx-invoice-party {
    border-color: rgba(16, 71, 60, 0.12) !important;
    background: linear-gradient(180deg, #fafffd 0%, #fdfdfd 100%) !important;
}

body .invoice-container .hx-invoice-payment-panel {
    overflow: hidden;
    padding: 0 !important;
}

body .invoice-container .hx-invoice-payment-summary {
    margin: 0 !important;
    padding: 22px !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 88% 0%, rgba(28, 235, 245, 0.18), transparent 34%),
        linear-gradient(180deg, #10473c 0%, #18825a 100%) !important;
}

body .invoice-container .hx-invoice-payment-summary strong {
    font-size: 34px !important;
    font-weight: 700 !important;
}

body .invoice-container .hx-invoice-payment-head {
    margin: 0 !important;
    padding: 18px 20px !important;
    background: #fafffd;
}

body .invoice-container .hx-invoice-payment-output {
    padding: 18px 20px 20px !important;
}

body .invoice-container .hx-invoice-gateway-form select {
    border-color: rgba(16, 71, 60, 0.18) !important;
    box-shadow: 0 8px 20px rgba(10, 78, 67, 0.05);
}

body .invoice-container .hx-invoice-payment-output .btn,
body .invoice-container .hx-invoice-credit-card .btn {
    min-height: 42px;
    background: linear-gradient(180deg, #18825a 0%, #38b07c 100%) !important;
}

body .invoice-container .hx-invoice-items-table thead td,
body .invoice-container .hx-invoice-ledger thead td {
    background: #e5f8f2 !important;
    color: #10473c !important;
}

body .invoice-container .hx-invoice-grand-total td {
    background: linear-gradient(180deg, #10473c 0%, #176b5a 100%) !important;
}

.hx-template-dedicated-teklif .primary-content > h1 {
    display: none;
}

.hx-dedicated-quote-page {
    color: #243b37;
}

.hx-quote-hero {
    padding: 46px 0 28px;
    background: radial-gradient(circle at 85% 20%, rgba(162, 210, 189, 0.16), transparent 35%), linear-gradient(180deg, #134b41 0%, #1f7b70 100%);
}

.hx-quote-hero .container,
.hx-quote-section .container {
    max-width: 1400px;
}

.hx-quote-hero-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.hx-quote-hero-inner span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 12px;
    padding: 0 18px;
    border-radius: 999px;
    color: #10473c;
    background: #d8f8ee;
    font-size: 14px;
    line-height: 1;
    font-weight: 600;
}

.hx-quote-hero-inner h1 {
    margin: 0 0 10px;
    color: #fafffd;
    font-size: 36px;
    line-height: 1.16;
    font-weight: 600;
}

.hx-quote-hero-inner p {
    max-width: 760px;
    margin: 0 auto;
    color: #d7fbef;
    font-size: 17px;
    line-height: 1.55;
    font-weight: 400;
}

.hx-quote-section {
    padding: 42px 0 64px;
    background: #f7fffc;
}

.hx-quote-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 28px;
    align-items: start;
}

.hx-quote-card,
.hx-quote-side {
    border: 1px solid rgba(17, 105, 90, 0.13);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 18px 44px rgba(7, 49, 43, 0.07);
}

.hx-quote-card {
    padding: 34px 38px;
}

.hx-quote-form label {
    margin-bottom: 7px;
    color: #164a41;
    font-size: 14px;
    font-weight: 600;
}

.hx-quote-form .form-control {
    min-height: 44px;
    border-color: rgba(20, 82, 72, 0.18);
    border-radius: 8px;
    color: #173d37;
    font-size: 15px;
    font-weight: 400;
    box-shadow: none;
}

.hx-quote-form .form-control:focus {
    border-color: #2fb68e;
    box-shadow: 0 0 0 3px rgba(47, 182, 142, 0.14);
}

.hx-quote-phone {
    display: block;
}

.hx-quote-phone .form-control {
    width: 100%;
}

.hx-quote-selected-server {
    color: #0c5147 !important;
    background: #f0fffc !important;
    font-weight: 600 !important;
}

.hx-quote-form textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

.hx-quote-alert {
    display: grid;
    gap: 5px;
    margin-bottom: 18px;
    padding: 15px 17px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.45;
}

.hx-quote-alert strong {
    font-size: 15px;
    font-weight: 600;
}

.hx-quote-alert-success {
    border: 1px solid rgba(47, 182, 142, 0.2);
    color: #0d5d4e;
    background: #eafff8;
}

.hx-quote-alert-error {
    border: 1px solid rgba(145, 34, 54, 0.18);
    color: #7b1830;
    background: #fff3f5;
}

.hx-quote-submit {
    background: linear-gradient(180deg, #18825a 0%, #38b07c 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
}

.hx-quote-submit:hover {
    background: linear-gradient(180deg, #176f51 0%, #32a070 100%) !important;
    transform: translateY(-1px);
}

.hx-quote-side {
    position: sticky;
    top: 116px;
    padding: 28px;
    overflow: hidden;
}

.hx-quote-side::before {
    content: "";
    display: block;
    width: 64px;
    height: 64px;
    margin-bottom: 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, #e4fff8 0%, #c7f6ec 100%);
    box-shadow: inset 0 0 0 1px rgba(20, 82, 72, 0.09);
}

.hx-quote-side strong {
    display: block;
    color: #133f38;
    font-size: 27px;
    line-height: 1.15;
    font-weight: 600;
}

.hx-quote-side > span {
    display: block;
    margin: 5px 0 16px;
    color: #1ea77d;
    font-size: 15px;
    font-weight: 600;
}

.hx-quote-side p {
    margin: 0 0 18px;
    color: #5a716c;
    font-size: 15px;
    line-height: 1.58;
    font-weight: 400;
}

.hx-quote-side ul {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hx-quote-side li {
    position: relative;
    padding-left: 20px;
    color: #194a42;
    font-size: 14px;
    font-weight: 500;
}

.hx-quote-side li::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #38b07c;
}

.hx-quote-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.hx-quote-modal.is-open {
    display: flex;
}

.hx-quote-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(4, 35, 29, 0.68);
    backdrop-filter: blur(5px);
}

.hx-quote-modal-dialog {
    position: relative;
    z-index: 1;
    overflow: auto;
    width: min(760px, 100%);
    max-height: calc(100vh - 48px);
    padding: 30px 34px 34px;
    border: 1px solid rgba(17, 105, 90, 0.14);
    border-radius: 14px;
    background: linear-gradient(180deg, #fafffd 0%, #ffffff 100%);
    box-shadow: 0 28px 80px rgba(3, 35, 29, 0.28);
    color: #243b37;
}

.hx-quote-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid rgba(17, 105, 90, 0.14);
    border-radius: 999px;
    background: #effffb;
    color: #0d4c42;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.hx-quote-modal-close:hover {
    background: #dff9f2;
    transform: rotate(90deg);
}

.hx-quote-modal-head {
    max-width: 650px;
    margin: 0 46px 22px 0;
}

.hx-quote-modal-head span {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    color: #0d5d4e;
    background: #e6fff8;
    font-size: 13px;
    font-weight: 600;
}

.hx-quote-modal-head h2 {
    margin: 14px 0 8px;
    color: #123f37;
    font-size: 27px;
    line-height: 1.22;
    font-weight: 600;
}

.hx-quote-modal-head p {
    margin: 0;
    color: #4a6861;
    font-size: 15px;
    line-height: 1.62;
    font-weight: 400;
}

.hx-quote-modal-form {
    display: grid;
    gap: 16px;
}

.hx-quote-modal-form .form-group {
    margin-bottom: 0;
}

.hx-quote-modal-form .hx-contact-submit {
    width: 100%;
    min-height: 46px;
}

body.hx-quote-modal-active {
    overflow: hidden;
}

@media (min-width: 768px) and (max-width: 1199px) {
    body .invoice-container {
        width: min(1100px, calc(100% - 24px)) !important;
    }

    body .invoice-container .hx-invoice-layout {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 390px) !important;
        gap: 16px !important;
    }

    body .invoice-container .hx-invoice-card {
        padding: 18px !important;
    }

    body .invoice-container .hx-invoice-card-head {
        margin: -18px -18px 16px !important;
        padding: 15px 18px !important;
    }

    body .invoice-container .hx-invoice-party-grid {
        grid-template-columns: 1fr !important;
    }

    body .invoice-container .hx-invoice-payment-summary strong {
        font-size: 28px !important;
    }
}

@media (max-width: 767px) {
    .hx-quote-hero {
        padding: 34px 0 22px;
    }

    .hx-quote-hero-inner h1 {
        font-size: 28px;
    }

    .hx-quote-hero-inner p {
        font-size: 15px;
    }

    .hx-quote-section {
        padding: 28px 0 44px;
    }

    .hx-quote-layout {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .hx-quote-card,
    .hx-quote-side {
        padding: 22px 18px;
    }

    .hx-quote-side {
        position: static;
        order: -1;
    }

    .hx-quote-phone {
        display: block;
    }

    .hx-quote-modal {
        padding: 14px;
        align-items: flex-start;
    }

    .hx-quote-modal-dialog {
        max-height: calc(100vh - 28px);
        padding: 24px 18px 22px;
        border-radius: 12px;
    }

    .hx-quote-modal-head {
        margin-right: 42px;
    }

    .hx-quote-modal-head h2 {
        font-size: 22px;
    }

    .hx-quote-modal-form .hx-contact-field-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    body .invoice-container {
        width: calc(100% - 20px) !important;
        margin: 14px auto 34px !important;
    }

    body .invoice-container .invoice-header {
        padding: 18px 16px !important;
    }

    body .invoice-container .invoice-header h3 {
        font-size: 22px;
    }

    body .invoice-container .hx-invoice-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    body .invoice-container .hx-invoice-toolbar-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    body .invoice-container .hx-invoice-back-btn,
    body .invoice-container .hx-invoice-soft-btn {
        width: 100%;
    }

    body .invoice-container .hx-invoice-layout {
        grid-template-columns: 1fr !important;
    }

    body .invoice-container .hx-invoice-side {
        position: static !important;
        order: -1;
    }

    body .invoice-container .hx-invoice-payment-output {
        padding: 10px 0 !important;
    }

    body .invoice-container .hx-paytr-embedded {
        border: none !important;
    }
}