/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Cart
 *
 * This block allows you to customize theme colors and styles for the entire Nexus Cart template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

html {
    font-size: 14px;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* -------------------------------------------------------------------------
   Hostopy — Contact page (contact.tpl)
   ------------------------------------------------------------------------- */
.hostopy-contact-page {
    padding-bottom: 2rem;
}

.hostopy-contact-hero .section__title .sub-title {
    display: inline-block;
    margin-bottom: 0.5rem;
}

.hostopy-contact-lead {
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 36rem;
}

.hostopy-contact-card {
    background: var(--white);
    border: 1px solid var(--border-muted);
    border-radius: 1rem;
    padding: 1.5rem 1.5rem;
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06);
    transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

@media (min-width: 992px) {
    .hostopy-contact-card {
        padding: 1.75rem 2rem;
    }
}

.hostopy-contact-card:hover {
    box-shadow: 0 16px 48px rgba(15, 23, 42, 0.08);
}

.hostopy-contact-card--accent {
    background: linear-gradient(135deg, #0f766e 0%, #047857 48%, #065f46 100%);
    border: none;
    color: var(--white);
    box-shadow: 0 18px 50px rgba(5, 95, 70, 0.35);
}

.hostopy-contact-card--accent:hover {
    box-shadow: 0 22px 56px rgba(5, 95, 70, 0.42);
}

.hostopy-contact-card--accent .hostopy-contact-name {
    color: var(--white);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.hostopy-contact-card--accent .hostopy-contact-role {
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    font-weight: 600;
}

.hostopy-contact-card--accent .hostopy-contact-tagline {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.hostopy-contact-card--form {
    min-height: 100%;
}

.hostopy-contact-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--neutral-900);
    margin: 0;
    letter-spacing: -0.02em;
}

.hostopy-contact-profile {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hostopy-contact-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.02em;
    color: #065f46;
    background: linear-gradient(145deg, #ecfdf5, #d1fae5);
    border: 2px solid rgba(255, 255, 255, 0.85);
    flex-shrink: 0;
}

.hostopy-contact-card--accent .hostopy-contact-avatar {
    color: #065f46;
    background: var(--white);
    border-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.hostopy-contact-list__item {
    display: flex;
    gap: 0.875rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-muted);
}

.hostopy-contact-list__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.hostopy-contact-list__icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.65rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--neutral-100);
    color: var(--success);
    flex-shrink: 0;
    font-size: 0.95rem;
}

.hostopy-contact-list__icon--wa {
    background: #ecfdf5;
    color: #059669;
}

.hostopy-contact-list__icon--wa-channel {
    background: #eff6ff;
    color: #2563eb;
}

.hostopy-contact-list__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    font-size: 0.95rem;
}

.hostopy-contact-list__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--neutral-500);
}

.hostopy-contact-email-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.25rem;
}

.hostopy-contact-list__body a {
    color: var(--success);
    font-weight: 600;
    text-decoration: none;
    word-break: break-word;
}

.hostopy-contact-list__body a:hover {
    text-decoration: underline;
    color: var(--success-lifted);
}

/* Primary support inbox — distinct from green action links */
.hostopy-contact-list__body a.hostopy-contact-list__link--support {
    color: #1d4ed8;
    font-weight: 700;
}

.hostopy-contact-list__body a.hostopy-contact-list__link--support:hover {
    color: #1e3a8a;
}

.hostopy-contact-list__body a.hostopy-contact-list__link--channel {
    color: #2563eb;
}

.hostopy-contact-list__body a.hostopy-contact-list__link--channel:hover {
    color: #1d4ed8;
}

.hostopy-contact-list__sep {
    color: var(--neutral-400);
    margin: 0 0.25rem;
    font-weight: 400;
}

.hostopy-contact-social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.hostopy-contact-social__link {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--neutral-600);
    background: var(--neutral-100);
    border: 1px solid var(--border-muted);
    text-decoration: none;
    transition: transform 0.2s ease, color 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.hostopy-contact-social__link:hover {
    transform: translateY(-3px);
    color: var(--white);
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.15);
}

.hostopy-contact-social__link--ig:hover {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    border-color: transparent;
}

.hostopy-contact-social__link--fb:hover {
    background: #1877f2;
    border-color: transparent;
}

.hostopy-contact-social__link--yt:hover {
    background: #ff0000;
    border-color: transparent;
}

.hostopy-contact-social__link--wa:hover {
    background: #25d366;
    border-color: transparent;
}

.hostopy-contact-form .form-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--neutral-800);
    margin-bottom: 0.4rem;
}

.hostopy-contact-input,
.hostopy-contact-textarea {
    border-radius: 0.65rem;
    border: 1px solid var(--border);
    padding: 0.65rem 0.9rem;
    font-size: 0.95rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hostopy-contact-input:focus,
.hostopy-contact-textarea:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 3px rgba(0, 166, 62, 0.15);
    outline: none;
}

.hostopy-contact-textarea {
    resize: vertical;
    min-height: 140px;
}

.hostopy-contact-card--form .tg-btn {
    min-width: 10rem;
    justify-content: center;
}

.hostopy-contact-card--form .small a {
    color: var(--success);
    font-weight: 600;
    text-decoration: none;
}

.hostopy-contact-card--form .small a:hover {
    text-decoration: underline;
}

/* Footer — MSME block (first column, under social icons) */
.footer__msme-trust--widget {
    margin-top: 2.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    text-align: left;
    position: relative;
    z-index: 1;
}

/* MSME registration card (footer + blog) — certificate-style */
.hostopy-msme-reg-card {
    max-width: 300px;
    margin-inline: auto;
    margin-top: 0.75rem;
}

.bm-msme-wrap {
    max-width: 340px;
    margin: 0 auto 28px;
    text-align: center;
}

.hostopy-msme-reg-card__inner {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
    border: 1px solid rgba(0, 166, 62, 0.2);
    border-radius: 18px;
    box-shadow:
        0 14px 40px rgba(15, 23, 42, 0.1),
        0 5px 16px rgba(0, 166, 62, 0.12);
    text-align: center;
    transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.hostopy-msme-reg-card__inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 12% 16%, rgba(0, 166, 62, 0.14), transparent 36%),
        radial-gradient(circle at 92% 88%, rgba(21, 93, 252, 0.1), transparent 34%);
    pointer-events: none;
}

.hostopy-msme-reg-card__inner::after {
    content: "MSME VERIFIED";
    position: absolute;
    top: 0.75rem;
    right: -2.25rem;
    transform: rotate(32deg);
    background: var(--success, #00a63e);
    color: #fff;
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 0.22rem 2.5rem;
    box-shadow: 0 6px 14px rgba(0, 166, 62, 0.32);
    pointer-events: none;
    z-index: 3;
}

.hostopy-msme-reg-card__inner:hover {
    box-shadow:
        0 18px 50px rgba(15, 23, 42, 0.12),
        0 8px 20px rgba(0, 166, 62, 0.16);
    border-color: rgba(0, 166, 62, 0.38);
    transform: translateY(-2px);
}

.hostopy-msme-reg-card__logo-wrap {
    position: relative;
    z-index: 1;
    margin-bottom: 0.8rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px dashed rgba(15, 23, 42, 0.14);
}

.hostopy-msme-reg-card__logo {
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: saturate(1.04) contrast(1.02);
}

.hostopy-msme-reg-card__udyam {
    position: relative;
    z-index: 1;
    margin: 0 0 0.62rem;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    background: #fff;
    border: 1px solid rgba(0, 166, 62, 0.3);
    border-radius: 999px;
    padding: 0.34rem 0.62rem;
    display: inline-block;
}

.hostopy-msme-reg-card__reg {
    position: relative;
    z-index: 1;
    margin: 0 0 0.28rem;
    color: #1f2937;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.32;
}

.hostopy-msme-reg-card__gov {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--success, #00a63e);
    font-size: 0.92rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.02em;
}

/* Sticky WhatsApp chat (FAB) — bottom-left */
.hostopy-wa-float {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 9998;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: #25d366;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    line-height: 1;
    text-decoration: none !important;
    box-shadow: 0 10px 28px rgba(37, 211, 102, 0.45), 0 4px 12px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.hostopy-wa-float:hover,
.hostopy-wa-float:focus-visible {
    background: #20bd5a;
    color: #fff !important;
    transform: scale(1.06);
    box-shadow: 0 14px 36px rgba(37, 211, 102, 0.55), 0 6px 16px rgba(0, 0, 0, 0.14);
    outline: none;
}

@media (min-width: 992px) {
    .hostopy-wa-float {
        width: 3.75rem;
        height: 3.75rem;
        font-size: 2rem;
    }
}

.hostopy-header-meta-text {
    color: #6c7075;
    font-size: 14px;
    font-weight: 500;
}

/* Cart first in utility bar (left of INR → English …) — avoid extra left gap */
ul.top-header > li:first-child.hostopy-header-cart-wrap {
    margin-left: 0 !important;
}
ul.top-header li.hostopy-header-cart-wrap {
    display: flex;
    align-items: center;
}

.hostopy-header-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tg-body-color, #4b5563);
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
    padding: 6px;
    border-radius: 10px;
    transition: color 0.2s ease, background 0.2s ease;
}

.hostopy-header-cart-link:hover,
.hostopy-header-cart-link:focus-visible {
    color: var(--tg-theme-primary, var(--primary, #2a862e));
    background: rgba(42, 134, 46, 0.08);
    outline: none;
}

.hostopy-header-cart-icon {
    display: block;
}

.hostopy-header-cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border-radius: 999px;
    background: var(--tg-color-dark-green, var(--primary, #2a862e));
    color: #fff;
    box-shadow: 0 0 0 2px var(--tg-color-white-default, #fff);
}

.hostopy-notification-menu {
    min-width: 250px;
}

.hostopy-notification-list {
    padding: 10px;
}

.hostopy-notification-item {
    margin-bottom: 5px;
    padding: 5px;
}

.hostopy-notification-link {
    color: #333;
}

.hostopy-notification-empty {
    padding: 15px;
    text-align: center;
    color: #666;
}

.hostopy-header-logo-text {
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
    color: #111;
    text-decoration: none;
}

.hostopy-mobile-logo-text {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    color: #111;
    text-decoration: none;
}

/* Keep top header + dropdowns above page content */
.transparent-header {
    position: relative !important;
    z-index: 300000 !important;
    isolation: isolate;
}

.tg-header__top {
    position: relative !important;
    z-index: 300001 !important;
}

ul.top-header {
    position: relative !important;
    z-index: 300002 !important;
}

/* Compact two-column domain mega menu */
.tg-mega-menu-wrap-three .mega-menu-item-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
}

.tg-mega-menu-wrap-three {
    width: 1320px;
    align-items: flex-start;
}

.tg-mega-menu-wrap-three .tg-mega-menu-left-side-two {
    flex: 1 1 65%;
    max-width: 65%;
    padding-right: 18px;
}

.tg-mega-menu-wrap-three .tg-mega-menu-right-side-two {
    flex: 1 1 35%;
    max-width: 35%;
}

.tg-mega-menu-wrap-three .mega-menu-item-three {
    margin-bottom: 0;
}

.tg-mega-menu-wrap-three .mega-menu-item-three a {
    min-height: 92px;
    padding: 14px 14px;
    align-items: flex-start;
}

.tg-mega-menu-wrap-three .mega-menu-item-three a .icon {
    width: 42px;
    height: 42px;
    min-width: 42px;
}

.tg-mega-menu-wrap-three .mega-menu-item-three a .content {
    max-width: none;
    width: auto;
    flex: 1;
}

.tg-mega-menu-wrap-three .mega-menu-item-three a .content .title {
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 4px;
}

.tg-mega-menu-wrap-three .mega-menu-item-three a .content span {
    font-size: 14px;
    line-height: 1.35;
}

.tg-mega-menu-wrap-three .mega-menu-item-three.active a {
    background: #fff;
    border-color: #edf1f7;
}

.tgmobile__menu {
    z-index: 9999;
}

body[data-templatefile="clientarea"] #main-body,
body[data-templatefile="clientareahome"] #main-body {
    padding-top: 200px !important;
}

@media (max-width: 1199.98px) {
    .tg-mega-menu-wrap-three {
        width: 960px;
    }

    .tg-mega-menu-wrap-three .tg-mega-menu-left-side-two,
    .tg-mega-menu-wrap-three .tg-mega-menu-right-side-two {
        max-width: 100%;
        flex-basis: 100%;
        padding-right: 0;
    }

    .tg-mega-menu-wrap-three .mega-menu-item-wrap {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1500px) {
    .tg-mega-menu-wrap-three {
        width: 1150px;
    }
}

.hostopy-mega-menu-wide {
    width: 700px;
}

.hostopy-mega-menu-left-full {
    width: 100%;
}

.banner__content .title,
.banner__content > p {
    font-family: "Open Sans", "Inter", "Segoe UI", Arial, sans-serif;
}

.hostopy-mega-menu-support {
    width: 980px;
    display: flex;
    gap: 28px;
}

.hostopy-mega-menu-support .hostopy-mega-menu-left-full {
    width: calc(100% - 300px);
}

.hostopy-support-menu-banner {
    width: 272px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #f5fbff 0%, #ecf7ff 100%);
    border: 1px solid #e4eefb;
    padding: 14px;
    box-shadow: 0 16px 28px rgba(7, 42, 94, 0.08);
}

.hostopy-support-menu-banner img {
    width: 100%;
    height: 130px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 12px;
}

.hostopy-support-menu-banner .title {
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 8px;
}

.hostopy-support-menu-banner p {
    margin: 0 0 14px;
    color: #5a6472;
    font-size: 14px;
    line-height: 1.5;
}

.hostopy-support-menu-banner .tg-btn,
.hostopy-support-menu-cta {
    width: 100%;
    justify-content: center;
    align-items: center;
    min-height: 52px;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff !important;
    background: #2d8f2f;
}

.hostopy-support-menu-banner .tg-btn:hover,
.hostopy-support-menu-banner .tg-btn:focus-visible,
.hostopy-support-menu-cta:hover,
.hostopy-support-menu-cta:focus-visible {
    color: #ffffff !important;
    background: #247826;
}

.hostopy-support-menu-cta {
    text-decoration: none;
}

.hostopy-support-menu-cta-text {
    position: relative;
    z-index: 2;
    color: #ffffff !important;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.01em;
}

@media (max-width: 1199px) {
    .hostopy-mega-menu-support {
        width: 760px;
        gap: 20px;
    }

    .hostopy-mega-menu-support .hostopy-mega-menu-left-full {
        width: calc(100% - 250px);
    }

    .hostopy-support-menu-banner {
        width: 230px;
    }
}

@media (max-width: 991px) {
    .hostopy-mega-menu-support {
        width: 100%;
        display: block;
    }

    .hostopy-mega-menu-support .hostopy-mega-menu-left-full,
    .hostopy-support-menu-banner {
        width: 100%;
    }

    .hostopy-support-menu-banner {
        margin-top: 16px;
    }
}

.hostopy-domain-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.03);
}

.hostopy-domain-tld-item {
    border: 1px solid #f1f2f5;
    border-radius: 8px;
    padding: 25px 15px;
}

.hostopy-domain-tld-img-wrap {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hostopy-domain-tld-img {
    max-height: 45px;
    max-width: 100%;
}

.hostopy-domain-price {
    font-size: 22px;
    font-weight: 700;
    color: #333;
}

.hostopy-domain-period {
    font-size: 14px;
    font-weight: 500;
    color: #777;
}

.hostopy-domain-unavailable {
    font-size: 14px;
    color: #ff4f4f;
}

.hostopy-domain-heading {
    margin: 0;
    font-weight: 700;
    color: #333;
}

.hostopy-domain-filter {
    font-size: 14px;
    padding: 8px 15px;
    margin-right: 5px;
    margin-bottom: 5px;
    background: #f8f9fa;
    color: #555;
    border: 1px solid #e5e7eb;
}

.hostopy-domain-table-wrap {
    padding: 20px;
}

.hostopy-domain-table {
    border: none;
}

.hostopy-domain-thead {
    background: #f8f9fa;
}

.hostopy-domain-th {
    border-top: none !important;
}

.hostopy-input-no-left {
    border-left: none;
}

.hostopy-input-no-sides {
    border-left: none;
    border-right: none;
}

.hostopy-reveal-pw-btn {
    border: 1px solid #e5e7eb;
    border-left: none;
    background: transparent;
    color: #a0aabf;
    border-radius: 0 8px 8px 0;
}

.hostopy-muted-link,
.hostopy-muted-text {
    color: #6b7280;
}

.hostopy-remember-label {
    font-size: 14px;
    color: #6b7280;
    padding-top: 2px;
}

.hostopy-login-submit {
    width: auto;
    padding: 0 30px;
}

.hostopy-hidden-pixel,
.hostopy-display-none {
    display: none;
}

.hostopy-flex-shrink-0 {
    flex-shrink: 0;
}

.hostopy-dot {
    width: 10px;
    height: 10px;
}

.hostopy-pre-wrap {
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
}

.hostopy-sitejet-preview {
    min-height: 130px;
    border: 1px solid #ddd;
    transition: opacity 0.2s ease-in-out;
    opacity: 0;
}

.hostopy-sitejet-flex {
    gap: 6px;
    min-width: 250px;
}

.hostopy-sitejet-btn-min {
    min-width: 140px;
}

.hostopy-progress-10 {
    height: 10px;
}

.hostopy-mt-10 {
    margin-top: 10px;
}

.hostopy-display-table {
    display: table;
}

.hostopy-footer-logo-text {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: #111827;
    text-decoration: none;
}

.hostopy-footer-contact {
    margin-top: 12px;
    color: #4b5563;
    font-size: 14px;
    line-height: 1.5;
}

.hostopy-footer-contact a {
    color: #111827;
    text-decoration: none;
}

.hostopy-footer-contact a:hover {
    color: var(--tg-theme-primary);
}

main.main-area.fix .tg-link-btn,
main.main-area.fix .tg-link-btn .effect-1 {
    color: #0f172a;
}

main.main-area.fix .banner__price span,
main.main-area.fix .banner__price strong,
main.main-area.fix .pricing-tab .tab-btn strong,
main.main-area.fix .features__item-three.features__item-ten .features__content-three p,
main.main-area.fix .features__item-three.features__item-ten .features__content-three p span {
    color: #111827;
}

/* Premium SaaS UI Overrides */
.pricing__box {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: 1.25rem;
    background: linear-gradient(180deg, #ffffff 0%, #fcfcfc 100%);
}

.pricing__box:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
}

.features__item, .features__item-two, .features__item-three {
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

.features__item:hover, .features__item-two:hover, .features__item-three:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.06);
}

.tg-btn {
    transition: all 0.3s ease;
}

.tg-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

/* Header Login / Register — solid forest green (reference ~#43853d) */
.tgmenu__action > ul li.header-btn .tg-btn.hostopy-btn-login-register {
    background-color: #43853d !important;
    background-image: none !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 12px 24px !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    gap: 10px !important;
    box-shadow: 0 2px 14px rgba(67, 133, 61, 0.38);
}

.tgmenu__action > ul li.header-btn .tg-btn.hostopy-btn-login-register svg {
    flex-shrink: 0;
}

.tgmenu__action > ul li.header-btn .tg-btn.hostopy-btn-login-register:hover {
    transform: translateY(-1px);
    background-color: #3a7435 !important;
    color: #fff !important;
    box-shadow: 0 6px 22px rgba(67, 133, 61, 0.42);
}

.tgmenu__action > ul li.header-btn .tg-btn.hostopy-btn-login-register:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(67, 133, 61, 0.35), 0 6px 22px rgba(67, 133, 61, 0.35);
}

/* SEO Block Styling */
.hostopy-seo-block {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    padding: 5rem 0;
}

.hostopy-seo-block .seo-content {
    max-width: 900px;
    margin: 0 auto;
}

.hostopy-seo-block h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.hostopy-seo-block h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.hostopy-seo-block p {
    font-size: 1.05rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 1rem;
}

/* -------------------------------------------------------------------------
   WHMCS Verification Banners - Hostopy themed card style
   ------------------------------------------------------------------------- */
.verification-banner {
    margin: 145px auto 10px; /* 145px pushes it precisely below the fixed header */
    padding: 12px 0;
    border: 1px solid #e5edf7;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
}

.verification-banner .container {
    max-width: 1240px;
}

.verification-banner .row {
    align-items: center;
}

.verification-banner .text {
    margin-left: 6px;
    color: #334155;
    font-size: 14px;
    font-weight: 500;
}

.verification-banner .fas,
.verification-banner .fal,
.verification-banner .far {
    color: #f59e0b;
    font-size: 18px;
}

.verification-banner button.close {
    opacity: 0.45;
    color: #64748b;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.verification-banner button.close:hover {
    opacity: 1;
    color: #0f172a;
}

.verification-banner .btn-action {
    border-radius: 6px;
    border: 0;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 14px;
    line-height: 1.2;
    text-transform: none;
}

.verification-banner .btn-action:hover {
    background: #1f2937;
    color: #fff;
}

.hostopy-2fa-banner {
    margin: 0 0 1.5rem;
}

.hostopy-2fa-banner__inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-left: 4px solid #00a63e;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.hostopy-2fa-banner__icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(0, 166, 62, 0.12);
    color: #00a63e;
    font-size: 1.35rem;
}

.hostopy-2fa-banner__content {
    flex: 1 1 auto;
    min-width: 0;
}

.hostopy-2fa-banner__title {
    margin: 0 0 0.35rem;
    color: #0f172a;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
}

.hostopy-2fa-banner__text {
    margin: 0;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
}

.hostopy-2fa-banner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 112px;
    padding: 0.7rem 1.15rem;
    border-radius: 10px;
    background: #7c3aed;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.hostopy-2fa-banner__btn:hover,
.hostopy-2fa-banner__btn:focus-visible {
    background: #6d28d9;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

@media (max-width: 767.98px) {
    .hostopy-2fa-banner__inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .hostopy-2fa-banner__btn {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .verification-banner {
        margin: 110px 10px 8px; /* Pushes it below the mobile fixed header */
        padding: 10px 0;
    }

    .verification-banner .text {
        font-size: 13px;
    }
}

/* -------------------------------------------------------------------------
   Premium SaaS Card Overrides (Panels & Cards)
   ------------------------------------------------------------------------- */
#main-body .card, 
#main-body .panel.panel-default {
    border-radius: 16px;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.03) !important;
    background: #fff;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

#main-body .card .card-header,
#main-body .panel.panel-default .panel-heading,
#main-body .sidebar .card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
    padding: 1.25rem 1.5rem;
}

#main-body .card .card-header .card-title,
#main-body .panel.panel-default .panel-heading .panel-title,
#main-body .sidebar .card-header .card-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0;
}

#main-body .sidebar .list-group-item {
    border-left: none;
    border-right: none;
    border-color: rgba(15, 23, 42, 0.04);
    font-weight: 500;
    color: #4b5563;
    padding: 12px 20px;
}
#main-body .sidebar .list-group-item i {
    color: #64748b;
    width: 20px;
    text-align: center;
    margin-right: 8px;
}
#main-body .sidebar .list-group-item:hover {
    background-color: #f8fafc;
    color: #00a63e;
}
#main-body .sidebar .list-group-item:hover i {
    color: #00a63e;
}

#main-body .cpanel-feature-row a {
    text-decoration: none;
    color: #4b5563;
    font-weight: 500;
    transition: all 0.2s ease;
}

#main-body .cpanel-feature-row a:hover {
    color: #00a63e;
    transform: translateY(-2px);
}

#main-body .cpanel-feature-row a img {
    margin-bottom: 10px;
    width: 60px;
    height: 60px;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
    padding: 12px;
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    transition: all 0.3s ease;
}

#main-body .cpanel-feature-row a:hover img {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
    border-color: rgba(0, 166, 62, 0.2);
}

#main-body .cpanel-package-details {
    padding: 1.5rem 0;
}
#main-body .cpanel-package-details h4 {
    font-weight: 800;
    color: #111827;
    font-size: 1.5rem;
    margin-bottom: 0.5rem !important;
}
#main-body .cpanel-package-details em {
    font-style: normal;
    color: #00a63e;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.75rem;
}
#main-body .cpanel-package-details a {
    color: #64748b;
    font-weight: 500;
}

/* Dashboard Panels (Active Products, Domains, Tickets) */
#main-body .client-home-cards .list-group-item {
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04);
    padding: 1.25rem 1.5rem;
    font-size: 0.95rem;
    color: #4b5563;
}
#main-body .client-home-cards .list-group-item:last-child {
    border-bottom: none;
}
#main-body .client-home-cards .list-group-item:hover {
    background-color: #f8fafc;
}

#main-body .card .card-footer,
#main-body .panel.panel-default .panel-footer,
#main-body .client-home-cards .card-footer {
    background: #fff !important;
    border-top: 1px solid rgba(15, 23, 42, 0.04) !important;
    padding: 1rem 1.5rem;
    text-align: center;
}
#main-body .card .card-footer a,
#main-body .panel.panel-default .panel-footer a,
#main-body .client-home-cards .card-footer a {
    color: #6366f1 !important;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}
#main-body .card .card-footer a:hover,
#main-body .panel.panel-default .panel-footer a:hover,
#main-body .client-home-cards .card-footer a:hover {
    color: #4f46e5 !important;
    text-decoration: underline;
}

/* Fix panel inner buttons (like 'Log in to cPanel' and 'View Details') */
#main-body .client-home-cards .list-group-item .btn,
#main-body .client-home-cards .list-group-item .btn-group .btn {
    border-radius: 6px;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem !important;
    box-shadow: 0 2px 4px rgba(15, 23, 42, 0.02);
    margin-left: 4px;
}
#main-body .client-home-cards .list-group-item .btn-default {
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, 0.15) !important;
    color: #111827 !important;
}
#main-body .client-home-cards .list-group-item .btn-default:hover {
    background: #f8fafc !important;
    border-color: rgba(15, 23, 42, 0.25) !important;
    color: #000000 !important;
}
#main-body .client-home-cards .list-group-item .dropdown-menu {
    border-radius: 8px;
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);
    padding: 0.5rem 0;
}
#main-body .client-home-cards .list-group-item .dropdown-menu a {
    padding: 0.5rem 1.25rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: #475569;
}
#main-body .client-home-cards .list-group-item .dropdown-menu a:hover {
    background: #f8fafc;
    color: #00a63e;
}

/* Fix panel header buttons (like '[+] Open Ticket' or '[+] View All') */
#main-body .client-home-cards .card-header .btn {
    background: #f1f5f9 !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
    color: #111827 !important;
    font-weight: 600 !important;
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    box-shadow: none !important;
    transition: all 0.2s ease;
    margin-top: -2px;
}
#main-body .client-home-cards .card-header .btn:hover {
    background: #e2e8f0 !important;
    color: #000000 !important;
}

/* Active Status Badges */
#main-body .client-home-cards .list-group-item .label,
#main-body .client-home-cards .list-group-item .badge {
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
    margin-right: 12px;
}
#main-body .client-home-cards .list-group-item .label-success,
#main-body .client-home-cards .list-group-item .badge-success,
.status-active {
    background: rgba(0, 166, 62, 0.1) !important;
    color: #00a63e !important;
}
#main-body .client-home-cards .list-group-item .label-danger,
#main-body .client-home-cards .list-group-item .badge-danger,
.status-terminated, .status-cancelled {
    background: rgba(231, 0, 11, 0.1) !important;
    color: #e7000b !important;
}
#main-body .client-home-cards .list-group-item .label-warning,
#main-body .client-home-cards .list-group-item .badge-warning,
.status-suspended {
    background: rgba(245, 166, 35, 0.1) !important;
    color: #f5a623 !important;
}
#main-body .client-home-cards .list-group-item .label-info,
#main-body .client-home-cards .list-group-item .badge-info,
.status-pending {
    background: rgba(21, 93, 252, 0.1) !important;
    color: #155dfc !important;
}

/* -------------------------------------------------------------------------
   Front-End Marketing Pages Modernization
   ------------------------------------------------------------------------- */

/* Keyframe Animations */
@keyframes hostopyFloatAnimation {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}

@keyframes hostopyPulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
    70% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* Modern Hero Section Background */
.banner__area {
    background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.04) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(21, 93, 252, 0.04) 0%, transparent 20%),
                linear-gradient(135deg, #ffffff 0%, #f8fafc 100%) !important;
    position: relative;
    overflow: hidden;
}

/* Feature Boxes */
.features__item, .features__item-two, .features__item-three, .hosting__item {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(15, 23, 42, 0.05) !important;
}

.features__item:hover, .features__item-two:hover, .features__item-three:hover, .hosting__item:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08) !important;
    border-color: rgba(99, 102, 241, 0.2) !important;
}

/* Images & Illustrations Float Effect */
.banner__img-wrap .main-img, 
.features__thumb img, 
.features__thumb-two img,
.features__thumb-three img,
.support__thumb img {
    animation: hostopyFloatAnimation 6s ease-in-out infinite;
}

/* Pricing Tables Modernization */
.pricing__box {
    border-radius: 24px !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    background: #ffffff !important;
    transition: all 0.4s ease !important;
    position: relative;
    overflow: hidden;
}

.pricing__box:hover {
    transform: scale(1.02) translateY(-5px) !important;
    box-shadow: 0 25px 50px rgba(15, 23, 42, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.3) !important;
    z-index: 10;
}

.pricing__box .pricing__price {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    margin: 0 -40px 25px !important;
    padding: 25px 40px !important;
    border-top: 1px solid rgba(15, 23, 42, 0.04) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
}

.pricing__box .pricing__price:not(.hostopy-price-panel) h2 {
    color: #111827 !important;
    font-weight: 800 !important;
}

/* Do not grey-out HostOpy hero/pills (they use <span> inside .pricing__price) */
.pricing__box .pricing__price:not(.hostopy-price-panel) span {
    color: #64748b !important;
}

/* Primary Buttons Modernization */
.tg-btn-three, .tg-black-btn, .tg-border-btn {
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.tg-btn-three::before, .tg-black-btn::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: all 0.6s ease;
    z-index: -1;
}

.tg-btn-three:hover::before, .tg-black-btn:hover::before {
    left: 100%;
}

.tg-btn-three:hover {
    box-shadow: 0 8px 20px rgba(21, 93, 252, 0.3) !important;
    transform: translateY(-2px);
}
.tg-black-btn:hover {
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.3) !important;
    transform: translateY(-2px);
}
.tg-border-btn:hover {
    background-color: rgba(99, 102, 241, 0.05) !important;
    border-color: rgba(99, 102, 241, 0.5) !important;
    color: #4f46e5 !important;
    transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   Front-End Marketing Pages Modernization v2
   ------------------------------------------------------------------------- */
@keyframes hostopyFadeInUp {
    0% {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes hostopyFloatSoft {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) {
    --hostopy-accent-start: #4f46e5;
    --hostopy-accent-end: #2563eb;
    --hostopy-dark-bg: #0f172a;
    --hostopy-dark-border: rgba(148, 163, 184, 0.24);
}

:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .section__title p,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .hosting__content-three p,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .features__content-four p {
    line-height: 1.72;
    color: #475569;
}

:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .banner__content,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .banner__content-two,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .banner__content-three {
    animation: hostopyFadeInUp 0.65s ease-out both;
}

:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .banner__img-wrap .main-img,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .banner__img-wrap-two img,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .banner__img-wrap-three img,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .hosting__top-images img {
    animation: hostopyFloatSoft 7s ease-in-out infinite;
}

:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .features__item,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .features__item-two,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .features__item-three,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .features__item-four,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .hosting__item,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .hosting__item-three {
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease !important;
}

:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .features__item:hover,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .features__item-two:hover,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .features__item-three:hover,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .features__item-four:hover,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .hosting__item:hover,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .hosting__item-three:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.12) !important;
}

:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud
) .pricing__area {
    background: linear-gradient(140deg, var(--hostopy-dark-bg), #172554 55%, #312e81);
    position: relative;
    overflow: hidden;
}

:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud
) .pricing__area .section__title .title,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud
) .pricing__area .section__title p,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud
) .pricing__area .pricing-tab .tab-btn {
    color: #e2e8f0 !important;
}

:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud
) .pricing__area .pricing-tab-switcher {
    background: linear-gradient(90deg, var(--hostopy-accent-start), var(--hostopy-accent-end));
}

:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud
) .pricing__box,
.hostopy-marketing-vps .pricing__box-four {
    border: 1px solid var(--hostopy-dark-border) !important;
    backdrop-filter: blur(6px);
}

:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud
) .pricing__box:hover,
.hostopy-marketing-vps .pricing__box-four:hover {
    box-shadow: 0 25px 60px rgba(37, 99, 235, 0.2) !important;
    border-color: rgba(165, 180, 252, 0.62) !important;
}

.hostopy-marketing-home .swiper-slide-active .hosting__item {
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.15) !important;
    border-color: rgba(79, 70, 229, 0.25) !important;
}

:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .tg-btn {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease !important;
}

:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .tg-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(79, 70, 229, 0.26);
}

:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .banner__img-wrap img,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .banner__img-wrap-two img,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .banner__img-wrap-three img,
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud,
    .hostopy-marketing-vps
) .hosting__top-images img {
    filter: saturate(1.08) contrast(1.04);
}

/* Marketing pricing cards + billing period UI live in templates/hostopy/css/hostopy-pricing-cards.css (linked from header.tpl). */

/* -------------------------------------------------------------------------
   WHMCS Fullpage AJAX Overlay — Restore Default Hidden State
   -------------------------------------------------------------------------
   The hostopy template does NOT load WHMCS's stock theme.css, so the
   `.w-hidden` utility and the `#fullpage-overlay` layout rules ship as
   nothing on this template. That left the loader (overlay-spinner.svg)
   visible in the document flow near the bottom of every page (it appeared
   as a rotating grey ring next to the floating WhatsApp button).

   Below we (re)declare the small set of rules needed so the overlay is
   hidden by default and only appears as a proper centred fullscreen
   overlay when WHMCS's `showOverlay()` jQuery helper toggles it on.
   ------------------------------------------------------------------------- */
.w-hidden {
    display: none;
}

#fullpage-overlay {
    display: none; /* overridden by jQuery.show() when WHMCS calls showOverlay() */
    position: fixed;
    z-index: 100000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
}

#fullpage-overlay .outer-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

#fullpage-overlay .inner-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 90%;
}

#fullpage-overlay .msg {
    display: inline-block;
    padding: 20px;
    max-width: 400px;
}

/* Belt-and-braces: even if WHMCS markup forgets the `w-hidden` class,
   hide the spinner img unless its overlay is being explicitly shown
   by jQuery (which sets inline `style="display: ..."` on the parent). */
#fullpage-overlay > .outer-wrapper > .inner-wrapper > img[src*="overlay-spinner"] {
    display: inline-block;
}
#fullpage-overlay:not([style*="display"]) {
    display: none;
}

/* WHMCS AJAX modals must sit above the sticky HostOpy header and overlays. */
.modal-backdrop,
.modal-backdrop.show {
    z-index: 399990 !important;
}

#modalAjax,
#modalAjax.show {
    z-index: 400000 !important;
}

#modalAjax .modal-dialog {
    margin: 1.75rem auto;
    max-width: 700px;
}

#modalAjax .modal-body {
    min-height: 120px;
}

#modalAjax .modal-footer .loader {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* -------------------------------------------------------------------------
   "Return to admin area" link (visible when an admin masquerades as a
   client). The hostopy template does not load WHMCS theme.css, so this
   link otherwise renders as a plain link in the footer flow — right next
   to the floating WhatsApp button. Pin it to the top of the viewport as a
   small admin pill so it is obvious and out of the way.
   ------------------------------------------------------------------------- */
.btn-return-to-admin {
    position: fixed !important;
    top: 12px;
    right: 16px;
    left: auto !important;
    bottom: auto !important;
    z-index: 999999; /* sit above sticky header (z-index: 300001) */
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 8px 16px !important;
    background: #1f2937 !important; /* slate-800 for admin context */
    color: #fde68a !important;       /* amber-200 accent */
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border: 1px solid rgba(253, 230, 138, 0.35) !important;
    border-radius: 999px !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.28);
    text-decoration: none !important;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-return-to-admin:hover,
.btn-return-to-admin:focus-visible {
    background: #111827 !important;
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.34);
    outline: none;
}

.btn-return-to-admin i.fas {
    font-size: 12px;
    line-height: 1;
}

@media (max-width: 575.98px) {
    .btn-return-to-admin {
        top: 8px;
        right: 8px;
        padding: 6px 12px !important;
        font-size: 12px !important;
    }
    .btn-return-to-admin span {
        display: none !important; /* keep just the icon on narrow screens */
    }
}

/* -------------------------------------------------------------------------
   Section spacing — restore top padding on marketing sections.

   Many sections in the hostopy template only use `section-pb-140`
   (padding-bottom: 80px) without a matching top padding. When the section
   has its own background colour (e.g. the dark pricing area, the light-gray
   features area, choose / testimonial / support strips), the heading slams
   into the bottom of the preceding section — there is no visual breathing
   room between bands. Apply consistent top padding to every coloured
   section across all marketing pages so each block has gap on top.

   Values mirror the existing `.section-pb-140` scale (80 / 70 / 60).
   ------------------------------------------------------------------------- */
.pricing__area,
.features__area-four,
.choose__area-two,
.testimonial__area-three,
.support__area-two,
.faq__area-two,
.hostopy-seo-block {
    padding-top: 80px;
}

@media (max-width: 991.98px) {
    .pricing__area,
    .features__area-four,
    .choose__area-two,
    .testimonial__area-three,
    .support__area-two,
    .faq__area-two,
    .hostopy-seo-block {
        padding-top: 70px;
    }
}

@media (max-width: 767.98px) {
    .pricing__area,
    .features__area-four,
    .choose__area-two,
    .testimonial__area-three,
    .support__area-two,
    .faq__area-two,
    .hostopy-seo-block {
        padding-top: 60px;
    }
}

/* Extra clearance on the dark pricing band — its gradient background is
   visually heavy and benefits from a touch more space at the top so the
   "Web Hosting Plans That Fit Your Budget" title doesn't kiss the cards
   from the hosting carousel above. */
:is(
    .hostopy-marketing-home,
    .hostopy-marketing-shared,
    .hostopy-marketing-cloud
) .pricing__area {
    padding-top: 110px;
}

@media (max-width: 991.98px) {
    :is(
        .hostopy-marketing-home,
        .hostopy-marketing-shared,
        .hostopy-marketing-cloud
    ) .pricing__area {
        padding-top: 90px;
    }
}

@media (max-width: 767.98px) {
    :is(
        .hostopy-marketing-home,
        .hostopy-marketing-shared,
        .hostopy-marketing-cloud
    ) .pricing__area {
        padding-top: 70px;
    }
}