/* common */

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    transition: none !important;

}


html {
    scroll-behavior: smooth;
    overflow-y: scroll !important;
}


body.menu-open {
    overflow: hidden;
    width: 100vw;
}

:root {
    --hcx-black: #030407;
    --hcx-navy: #080b1b;
    --hcx-panel: rgba(10, 13, 30, 0.92);
    --hcx-card: rgba(24, 27, 45, 0.72);
    --hcx-border: rgba(255, 255, 255, 0.09);
    --hcx-text: #f8f9ff;
    --hcx-muted: rgba(248, 249, 255, 0.58);
    --hcx-pink: #fc468d;
    --hcx-blue: #3f5efb;
    --hcx-cyan: #06c7ff;
    --hcx-gradient: linear-gradient(90deg, #fc468d 0%, #8b42ff 45%, #06c7ff 100%);
    --gradientcolor: linear-gradient(90deg, #c72c91 33.54%, #0565ff 73.82%);
    --bglite: rgba(215, 184, 255, 0.12);
    --bgfull: #FFEEFA;
    --boxshadow: -14px 40px 85.8px 0px #FFEEFA;
}

@font-face {
    font-family: "Sen";
    src: url("../fonts/Sen-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Sen";
    src: url("../fonts/Sen-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

body,
h1,
h2,
h3,
p,
a,
span,
button,
label,
div,
::placeholder,
select {
    font-family: "Sen", serif !important;
}

h4,
h5,
h6,
strong,
span {
    font-family: "Sen", serif !important;
    font-weight: 600 !important;
}

/* body {
    font-family: "Sen", sans-serif;
} */


a,
button {
    cursor: pointer;
}

:focus {
    outline: none !important;
}

.hero-section h1 {
    text-align: left;
    color: #fff;
    font-weight: 700;
    line-height: 70px;
    border-left: 1px solid #3F5EFB;
    padding-left: 25px;
}


h1 {
    font-size: 37px;
    line-height: 60px !important;
}

h2 {
    font-size: 32px;
    line-height: 47px !important;
    letter-spacing: 1px;
}

h3 {
    font-size: 20px;
    line-height: 30px !important;
    letter-spacing: 1px;
}

h4,
h4.align-self-center {
    font-size: 18px !important;
    line-height: 29px;
}

p {
    font-size: 16px;
    line-height: 27px;
}

a,
button {
    font-size: 16px;
}

body::-webkit-scrollbar {
    width: 5px;
}

.img-fluid {
    height: auto;
    max-width: 100%;
}

/* Track */
body::-webkit-scrollbar-track {
    background: #cccccc2c;
}

/* Handle */
body::-webkit-scrollbar-thumb {
    background: rgba(128, 128, 128, 0.705);
}

body {
    background-color: #EDF1F3 !important;
}

@media (max-width:576.98px) {
    h1 {
        font-size: 30px !important;
        line-height: 40px !important;
    }
}

@media only screen and (min-width: 1500px) {
    h1 {
        font-size: 48px !important;
        line-height: 60px !important;
    }

    h2 {
        font-size: 42px !important;
        line-height: 55px !important;
    }
}

@media (min-width:992px) and (max-width: 1369.98px) {

    /* body.hompage-main img.below-hero-section-middle-hero-section {
        display: none !important;
    } */

    .hero-section .free-consultation-right {
        text-align: left !important;
    }

}

/* common-end */

/* extras */

.img-fluid {
    width: auto;
}
.contentent-for-extras .contain-width {
    flex-direction: column;
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 15px;
}

.contentent-for-extras .contain-width h2,
.contentent-for-extras .contain-width h3,
.contentent-for-extras .contain-width h4,
.contentent-for-extras .contain-width h5,
.contentent-for-extras .contain-width h6 {
    text-align: left !important;
}

.banner-section-for-extras h1 {
    margin: 0px;
    font-size: 64px;
    width: 100%;
    text-align: center;
    color: #fff;
}

.banner-section-for-extras {
    background: var(--gradientcolor);
    padding: 150px 0 80px;
}

.contentent-for-extras .contain-width p {
    margin: 0px;
    line-height: 30px;
}

.contentent-for-extras .contain-width h3 {
    font-size: 27px;
}

.contentent-for-extras .contain-width h2,
.contentent-for-extras .contain-width h3 {
    margin-top: 20px;
    margin-bottom: 15px;
}

.contentent-for-extras .contain-width h2 {
    font-size: 35px;
}

.contentent-for-extras {
    padding: 100px 0 0;
}

div#pills-tabContent {
    position: relative;
}

div#pills-tabContent:after {
    position: absolute;
    content: '';
    width: 1px;
    height: 226px;
    top: 0px;
    background: rgba(255, 255, 255, 0.5);
    left: -39px;
}

.contain-width {
    display: flex;
    max-width: 1320px !important;
}

@media (max-width:991.98px) {

    .responsive-view {
        display: block !important;
    }

    .desktop-view-review {
        display: none !important;
    }

    .hero-section h1 {
        text-align: center;
        font-size: 16px !important;
        padding: 18px 15px !important;
    }

    .banner-title {
        font-size: 32px !important;
    }


    section.hero-section ul {
        align-items: center;
        justify-content: center;
        gap: 14px;
        /* flex-wrap: nowrap; */
    }

    section.hero-section ul li {
        white-space: nowrap;
    }

    .button-common a.btn span.button-text {
        white-space: nowrap;
    }

    .our-solutions-butn-style,
    .inner-tab-content-tag,
    .build-grow-suceed .build-grow-suceed-heading,
    .Send-Message-form,
    .Why-You-Should-Invest-Now-section .industries-we-serve-top label,
    .responsive-card-view-outer .outer-button,
    .outer-button {
        text-align: center !important;
    }

    .Our-Digital-Transformation-Services-We-Provide-section {
        background: #0b0c14 !important;
    }

    .Our-Digital-Transformation-Services-We-Provide-caption-slider .User-Panel-Hashcodex-Custom-Made-Trading-App-Interface-right {
        width: auto !important;
        height: auto !important;
    }

    .build-grow-suceed .container {
        background: #3f5efb !important;
    }

    .hero-section.hero-section-CEDC {
        background: #0b0c14 !important;
    }

    .Various-Payment-Solutions-Crypto-Payment-Gateway-section-outer-Top-Tier .contain-width {
        justify-content: flex-start !important;
    }

    .container.Benefits-of-Cryptocurrency-Exchange-Development-caption-container {
        padding-bottom: 40px !important;
    }

    .Benefits-of-Cryptocurrency-Exchange-Development-section.dark-bg-white-color-text .container.Benefits-of-Cryptocurrency-Exchange-Development-tab-container .accrd-panel-body {
        display: block !important;
    }

    .container.what-we-do-section .what-we-do-section-img.reveal img,
    .our-solutions-common-align .our-solutions-inner img,
    img.img-fluid.below-hero-section-middle-hero-section,
    img.Cryptocurrency-Exchange-development-Company-img,
    .below-hero-section.Cryptocurrency-Exchange-Development-below-hero-section.CEDC-bg-dark-white-color .below-hero-section-right img,
    .below-hero-section.Cryptocurrency-Exchange-Development-below-hero-section.White-Label-Crypto-Exchange-Software-Development-Company-section .below-hero-section-right img,
    .AI-Powerd-Crypto-Exchange-Development-section .AI-Powerd-Crypto-Exchange-Development-right img,
    .benefits-of-CED-hashcodex,
    .common-display-for-responsive,
    .below-hero-section-right.common-display-for-responsive {
        display: none !important;
    }

    body.hompage-main img.img-fluid.below-hero-section-middle-hero-section {
        display: block !important;
        margin-top: 40px;
    }

    .hero-section h1,
    h1.gradient-diff-colr-heading {
        padding-left: 0px;
        border-left: 0px;
    }

    .below-hero-section.Cryptocurrency-Exchange-Development-below-hero-section,
    .Why-You-Should-Invest-Now-section,
    .Our-Premier-Cryptocurrency-Exchange-Development-Services-section,
    .AI-Powerd-Crypto-Exchange-Development-section,
    .Benefits-of-Cryptocurrency-Exchange-Development-section,
    .How-Does-crypto-payment-Gateway-work,
    .Benefits-Of-Cryptocurrency-Payment-Gateway-Development .services-we-provided-inner,
    .what-is-neo-bank .row {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .Cryptocurrency-Exchange-Development-Solutions-Top-Features-We-Provide-section-col-inner {
        flex-wrap: wrap;
    }

    .Why-You-Should-Invest-Now-caption {
        margin-bottom: 40px;
    }

    .How-Hashcodex-Delivers-Cryptocurrency-Exchange-Development-Solutions .industries-we-serve-outer.Elite-Features-Offered-By-Hashcodex-Cryptocurrency-Payment-Gateway-inner-slider {
        position: relative !important;
        top: 0 !important;
        margin-top: 50px;
    }

    .How-Hashcodex-Delivers-Cryptocurrency-Exchange-Development-Solutions .industries-we-serve-outer.Elite-Features-Offered-By-Hashcodex-Cryptocurrency-Payment-Gateway-inner-slider .industries-we-serve-inner.slick-slide .industries-we-serve-top label {
        text-align: center !important;
        margin-bottom: 20px !important;
        display: inline-block !important;
    }

    .Benefits-of-Cryptocurrency-Exchange-Development-section.dark-bg-white-color-text .container.Benefits-of-Cryptocurrency-Exchange-Development-tab-container .block-1.faq-block .accrd-panel-head {
        padding: 24px 0 !important;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .Benefits-of-Cryptocurrency-Exchange-Development-section.dark-bg-white-color-text .container.Benefits-of-Cryptocurrency-Exchange-Development-tab-container .block-1.faq-block .accrd-panel-head span.align-self-center {
        padding: 0px !important;
    }

    .below-hero-section.Cryptocurrency-Exchange-Development-below-hero-section.White-Label-Crypto-Exchange-Software-Development-Company-section.original {
        padding: 0px !important;
    }

    .Why-Choose-Hashcodex-for-Cryptocurrency-Exchange-Development-section .tab-buttons-inner {
        flex-wrap: wrap;
    }

    .responsive-card-view-outer {
        display: block !important;
    }

    .responsive-card-view {
        display: flex !important;
        flex-wrap: wrap;
        gap: 20px
    }

    .card-why-choose-step {
        text-align: center;
        padding: 25px 15px;
        box-shadow: 1px 1px 20px #ccc;
        border-radius: 15px;
    }

    .card-why-choose-step strong {
        font-size: 24px;
        margin-bottom: 20px;
        display: inline-block;
    }

    .industries-we-serve.Elite-Features-Offered-By-Hashcodex-Cryptocurrency-Payment-Gateway.How-Hashcodex-Delivers-Cryptocurrency-Exchange-Development-Solutions .industries-we-serve-top>div {
        text-align: center !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .contact-list-detail {
        gap: 5px !important;
    }

    .card-why-choose-step:hover {
        box-shadow: 1px 1px 20px #c94dab4a !important;
    }

    /** neo bank **/

    .How-Does-crypto-payment-Gateway-work-inner.Why-Fintech-Businesses-Should-Invest-In-Neobank-Platform-Development-botton-left {
        position: relative;
        left: 0 !important;
    }

    .services-we-provided-left {
        flex: 0 0 100% !important;
    }

    .services-we-provided.Benefits-Of-Cryptocurrency-Payment-Gateway-Development button.accordion-header span.mp-icon {
        display: none;
    }

    .services-we-provided.Benefits-Of-Cryptocurrency-Payment-Gateway-Development button.accordion-header {
        justify-content: center;
    }

    .How-Does-crypto-payment-Gateway-work .container.How-Does-crypto-payment-Gateway-work-bottom .row {
        justify-content: center;
    }

    .How-Does-crypto-payment-Gateway-work .container.How-Does-crypto-payment-Gateway-work-bottom .row .How-Does-crypto-payment-Gateway-work-inner {
        text-align: center;
        justify-content: center;
        align-items: center;
        padding: 15px !important;
    }

    .industries-we-serve-outer.Elite-Features-Offered-By-Hashcodex-Cryptocurrency-Payment-Gateway-inner-slider .industries-we-serve-inner {
        padding: 15px !important;
    }

    .A-Simple-Path-For-Startups-To-Generate-Revenue-bottom-content-step {
        margin-top: 0px !important;
    }

    .A-Simple-Path-For-Startups-To-Generate-Revenue-bottom-content-step .container {
        padding: 0 20px !important;
        text-align: center;
    }

    .Hashcodex-rypto-Payment-Gateway-Services .Hashcodex-rypto-Payment-Gateway-Services-left-inner-inner {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .How-Does-crypto-payment-Gateway-work .container.How-Does-crypto-payment-Gateway-work-bottom .row .How-Does-crypto-payment-Gateway-work-inner:nth-child(2),
    .How-Does-crypto-payment-Gateway-work .container.How-Does-crypto-payment-Gateway-work-bottom .row .How-Does-crypto-payment-Gateway-work-inner:nth-child(5) {
        display: none !important;
    }

    .industries-we-serve-outer.Elite-Features-Offered-By-Hashcodex-Cryptocurrency-Payment-Gateway-inner-slider .industries-we-serve-inner {
        display: flex;
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .industries-we-serve-outer.Elite-Features-Offered-By-Hashcodex-Cryptocurrency-Payment-Gateway-inner-slider .industries-we-serve-inner .industries-we-serve-top label {
        margin-bottom: 15px !important;
        display: inline-block;
    }

    body.Neobank-Development-Company-page.neobank-Development-Company-page-main .hero-section .hero-section-right,
    body.Neobank-Development-Company-page.neobank-Development-Company-page-main .hero-section .hero-section-right h1,
    body.Neobank-Development-Company-page.neobank-Development-Company-page-main .hero-section .hero-section-right p,
    body.Neobank-Development-Company-page.neobank-Development-Company-page-main .hero-section .hero-section-right .outer-button {
        text-align: center !important;
    }

    body.Neobank-Development-Company-page.neobank-Development-Company-page-main .industries-we-serve-outer.Elite-Features-Offered-By-Hashcodex-Cryptocurrency-Payment-Gateway-inner-slider .industries-we-serve-inner .industries-we-serve-top label {
        margin-bottom: 20px !important;
    }

    .Hashcodex-rypto-Payment-Gateway-Services-left {
        padding: 50px 15px !important;
    }

    /*** blog **/

    .Your-Digital-Transformation-Hub-Insights-Across-All-Sector {
        display: none;
    }

}

@media (min-width:768px) and (max-width:991.98px) {
    body.Neobank-Development-Company-page.neobank-Development-Company-page-main .industries-we-serve-outer.Elite-Features-Offered-By-Hashcodex-Cryptocurrency-Payment-Gateway-inner-slider .industries-we-serve-inner .industries-we-serve-top p {
        min-height: 100px !important;
    }

    @media (min-width:992px) and (max-width:1369.98px) {

        .hero-section .free-consultation-right {
            text-align: left !important;
        }

    }

}
@media (max-width:1199.98px) {
.responsive {
        display: block;
    }

    .logo.responsive {
        margin-bottom: 30px;
    }

    .header-section .logo {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    .header-section .contain-width {
        padding: 8px 25px;
    }

    .header-section .contain-width .menu>ul>li>a {
        padding: 0;
        display: inline-block;
    }

    .responsive-menu-heading {
        display: flex !important;
    }
    
}

/* extras-end */

.hcx-header,
.hcx-header * {
    box-sizing: border-box;
}

.hcx-header {
    color: var(--hcx-text);
    font-family: "Sen", Arial, sans-serif;
    position: relative;
    z-index: 9999;
}

.hcx-header a {
    color: inherit;
    text-decoration: none;
}

.hcx-meganav {
    background: linear-gradient(180deg, #020204 0%, #070910 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
    left: 0;
    min-height: 60px;
    position: fixed;
    right: 0;
    top: 0;
}

.hcx-nav-container {
    align-items: center;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1180px;
    min-height: 60px;
    padding: 0 22px;
    position: relative;
}

.hcx-logo {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
}

.hcx-logo img {
    display: block;
    height: auto;
    max-width: 180px;
}

.hcx-nav-shell {
    align-items: center;
    display: flex;
    flex: 1;
    gap: 32px;
    justify-content: space-around;
}

.hcx-nav-list {
    align-items: center;
    display: flex;
    gap: 30px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.hcx-nav-details {
    position: static;
}

.hcx-nav-details summary {
    list-style: none;
}

.hcx-nav-details summary::-webkit-details-marker {
    display: none;
}

.hcx-nav-link {
    align-items: center;
    /* color: rgba(255, 255, 255, 0.76); */
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font-size: 15px;
    font-weight: 600;
    gap: 6px;
    min-height: 60px;
    position: relative;
    transition: color 0.24s ease;
    white-space: nowrap;
}

.hcx-nav-link::after {
    background: var(--hcx-gradient);
    border-radius: 999px;
    bottom: 0;
    content: "";
    height: 3px;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    transform: scaleX(0.25);
    transition: opacity 0.24s ease, transform 0.24s ease;
}

.hcx-nav-link::before {
    border-bottom: 1px solid currentColor;
    border-right: 1px solid currentColor;
    content: "";
    height: 6px;
    margin-top: -3px;
    order: 2;
    transform: rotate(45deg);
    transition: transform 0.24s ease;
    width: 6px;
}

.hcx-nav-details[open] .hcx-nav-link {
    color: #fff;
}

.hcx-nav-details[open] .hcx-nav-link::after {
    opacity: 1;
    transform: scaleX(1);
}

.hcx-nav-details[open] .hcx-nav-link::before {
    transform: rotate(225deg);
}

.hcx-nav-link:hover {
    color: #fff;
}

.hcx-mega-panel {
    background: linear-gradient(135deg, #080B16 0%, #090C18 12.5%, #090C1A 25%, #0A0D1C 37.5%, #0B0E1D 50%, #0C0E1F 62.5%, #0C0F21 75%, #0D0F23 87.5%, #0E1025 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0 0 22px 22px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    contain: layout paint style;
    display: block;
    left: 50%;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    position: fixed;
    top: 60px;
    transform: translate(-50%, 12px);
    transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
    visibility: hidden;
    will-change: opacity, transform;
    width: 100%;
}

.hcx-nav-details[open] .hcx-mega-panel {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
    visibility: visible;

}

.hcx-mega-inner {
    margin: 0 auto;
    padding: 30px 26px 36px;
    background: transparent;
}

.hcx-products-inner {
    max-width: 760px;
    padding-bottom: 44px;
}

.hcx-section-title {
    align-items: center;
    color: rgba(255, 255, 255, 0.32);
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 28px;
    letter-spacing: 0.18em;
    margin-bottom: 28px;
    text-transform: uppercase;
}

.hcx-section-title::after {
    background: rgba(255, 255, 255, 0.08);
    content: "";
    flex: 1;
    height: 1px;
}

.hcx-product-grid,
.hcx-simple-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hcx-menu-card {
    align-items: center;
    background: var(--hcx-card);
    border: 1px solid var(--hcx-border);
    border-radius: 10px;
    color: #fff;
    display: flex;
    font-size: 15px;
    font-weight: 600;
    gap: 18px;
    justify-content: space-between;
    line-height: 1.45;
    min-height: 68px;
    /* overflow: hidden; */
    padding: 18px 20px;
    position: relative;
    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.hcx-menu-card::before {
    background: linear-gradient(90deg, rgba(252, 70, 141, 0.18), rgba(63, 94, 251, 0.16));
    content: "";
    inset: 0;
    opacity: 0;
    position: absolute;
    transition: opacity 0.25s ease;
}

.hcx-menu-card>* {
    position: relative;
    z-index: 1;
}

.hcx-menu-card:hover {
    background: rgba(31, 35, 57, 0.9);
    border-color: rgba(252, 70, 141, 0.42);
    box-shadow: 0 0 0 1px rgba(6, 199, 255, 0.14), 0 18px 40px rgba(63, 94, 251, 0.18);
    transform: translateY(-2px);
}

.hcx-menu-card:hover::before {
    opacity: 1;
}

.hcx-menu-card--large {
    min-height: 70px;
}

.hcx-arrow {
    /* color: rgba(255, 255, 255, 0.36);
    flex: 0 0 auto;
    font-size: 18px;
    transition: color 0.25s ease, transform 0.25s ease; */
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: inline-block;
}

.hcx-menu-card:hover .hcx-arrow {
    color: #fff;
    transform: translateX(4px);
}

.hcx-solutions-inner {
    max-width: 1250px;
    padding: 0px !important;
    width: 100% !important;
}

.hcx-solution-tabs {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 250px;
    min-height: 468px;
    background: linear-gradient(135deg, #080B16 0%, #090C18 12.5%, #090C1A 25%, #0A0D1C 37.5%, #0B0E1D 50%, #0C0E1F 62.5%, #0C0F21 75%, #0D0F23 87.5%, #0E1025 100%);
    position: relative;
}

.hcx-solutions-panel.is-loading .hcx-solution-tabs::after {
    background: rgba(24, 27, 45, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.72);
    content: "Loading solutions...";
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    padding: 10px 14px;
    position: absolute;
    right: 18px;
    top: 18px;
    z-index: 3;
}

.hcx-trending-card {
    position: relative;
    overflow: visible;
    z-index: 1;
}

.hcx-trending-card::before {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    right: 120px;
    bottom: 130px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(circle, rgba(255, 79, 216, 0.12) 0%, rgba(255, 79, 216, 0.06) 35%, transparent 75%);
}

.hcx-solution-tabs>input {
    display: none;
}

.hcx-category-sidebar {
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0px 16px 0px 0;
    /* padding: 28px 16px 32px 0; */
}

.hcx-sidebar-title {
    color: rgba(255, 255, 255, 0.34);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    margin: 0 0 14px 28px;
    text-transform: uppercase;
}

.hcx-category-label {
    border: 1px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin: 0px 16px 4px 0;
    /* margin: 4px 16px 4px 0; */
    padding: 14px 20px 14px 28px;
    position: relative;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    width: 100%;
}

/* .hcx-category-label::before {
    background: var(--hcx-gradient);
    border-radius: 999px;
    content: "";
    inset: 0 auto 0 0;
    opacity: 0;
    position: absolute;
    width: 4px;
} */

.hcx-category-label::after {
    background: var(--hcx-pink);
    border-radius: 50%;
    content: "";
    height: 5px;
    opacity: 0;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
}

/* #hcx-tab-exchange:checked ~ .hcx-category-sidebar .hcx-category-exchange,
#hcx-tab-forex:checked ~ .hcx-category-sidebar .hcx-category-forex,
#hcx-tab-banking:checked ~ .hcx-category-sidebar .hcx-category-banking,
#hcx-tab-trading:checked ~ .hcx-category-sidebar .hcx-category-trading,
#hcx-tab-payments:checked ~ .hcx-category-sidebar .hcx-category-payments,
#hcx-tab-wallet:checked ~ .hcx-category-sidebar .hcx-category-wallet,
#hcx-tab-bot:checked ~ .hcx-category-sidebar .hcx-category-bot,
#hcx-tab-ai:checked ~ .hcx-category-sidebar .hcx-category-ai,
.hcx-category-label.is-active {
    background: linear-gradient(90deg, rgba(252, 70, 141, 0.24), rgba(63, 94, 251, 0.18));
    border-color: rgba(63, 94, 251, 0.32);
    box-shadow: inset 0 0 26px rgba(63, 94, 251, 0.16);
    color: #fff;
} */





.hcx-category-label {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

/* Active left gradient border */
.hcx-category-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;

    background:
        linear-gradient(180deg,
            #FF4FD8 0%,
            #F653DB 7.14%,
            #ED56DE 14.29%,
            #E459E1 21.43%,
            #DB5CE4 28.57%,
            #D15EE7 35.71%,
            #C85FEA 42.86%,
            #BF61EC 50%,
            #B661EF 57.14%,
            #AC62F2 64.29%,
            #A362F4 71.43%,
            #9962F7 78.57%,
            #8F62FA 85.71%,
            #8562FC 92.86%,
            #7B61FF 100%);

    border-radius: 12px 0 0 12px;
    opacity: 0;
}

/* Active state */
#hcx-tab-exchange:checked~.hcx-category-sidebar .hcx-category-exchange,
#hcx-tab-forex:checked~.hcx-category-sidebar .hcx-category-forex,
#hcx-tab-banking:checked~.hcx-category-sidebar .hcx-category-banking,
#hcx-tab-trading:checked~.hcx-category-sidebar .hcx-category-trading,
#hcx-tab-payments:checked~.hcx-category-sidebar .hcx-category-payments,
#hcx-tab-wallet:checked~.hcx-category-sidebar .hcx-category-wallet,
#hcx-tab-bot:checked~.hcx-category-sidebar .hcx-category-bot,
#hcx-tab-ai:checked~.hcx-category-sidebar .hcx-category-ai {
    /* background: linear-gradient(90deg,
            rgba(255, 79, 216, 0.15) 0%,
            rgba(123, 97, 255, 0.12) 100%);

    border: 1px solid rgba(123, 97, 255, 0.4); */
    background: #7B61FF1A;
    border-top: 0.8px solid #3F5EFB4D;
    box-shadow:
        inset 0 0 20px rgba(123, 97, 255, 0.15),
        0 0 10px rgba(123, 97, 255, 0.12);

    color: #fff;
}



#hcx-tab-exchange:checked~.hcx-category-sidebar .hcx-category-exchange::before,
#hcx-tab-forex:checked~.hcx-category-sidebar .hcx-category-forex::before,
#hcx-tab-banking:checked~.hcx-category-sidebar .hcx-category-banking::before,
#hcx-tab-trading:checked~.hcx-category-sidebar .hcx-category-trading::before,
#hcx-tab-payments:checked~.hcx-category-sidebar .hcx-category-payments::before,
#hcx-tab-wallet:checked~.hcx-category-sidebar .hcx-category-wallet::before,
#hcx-tab-bot:checked~.hcx-category-sidebar .hcx-category-bot::before,
#hcx-tab-ai:checked~.hcx-category-sidebar .hcx-category-ai::before,
#hcx-tab-exchange:checked~.hcx-category-sidebar .hcx-category-exchange::after,
#hcx-tab-forex:checked~.hcx-category-sidebar .hcx-category-forex::after,
#hcx-tab-banking:checked~.hcx-category-sidebar .hcx-category-banking::after,
#hcx-tab-trading:checked~.hcx-category-sidebar .hcx-category-trading::after,
#hcx-tab-payments:checked~.hcx-category-sidebar .hcx-category-payments::after,
#hcx-tab-wallet:checked~.hcx-category-sidebar .hcx-category-wallet::after,
#hcx-tab-bot:checked~.hcx-category-sidebar .hcx-category-bot::after,
#hcx-tab-ai:checked~.hcx-category-sidebar .hcx-category-ai::after,
.hcx-category-label.is-active::before,
.hcx-category-label.is-active::after {
    opacity: 1;
}

.hcx-solution-content {
    padding: 8px 26px 34px 34px;
    /* padding: 30px 26px 34px 34px; */
}

.hcx-solution-panel {
    display: none;
}

.hcx-panel-dynamic {
    padding: 0px !important;
}

#hcx-tab-exchange:checked~.hcx-solution-content .hcx-panel-exchange,
#hcx-tab-forex:checked~.hcx-solution-content .hcx-panel-forex,
#hcx-tab-banking:checked~.hcx-solution-content .hcx-panel-banking,
#hcx-tab-trading:checked~.hcx-solution-content .hcx-panel-trading,
#hcx-tab-payments:checked~.hcx-solution-content .hcx-panel-payments,
#hcx-tab-wallet:checked~.hcx-solution-content .hcx-panel-wallet,
#hcx-tab-bot:checked~.hcx-solution-content .hcx-panel-bot,
#hcx-tab-ai:checked~.hcx-solution-content .hcx-panel-ai,
.hcx-panel-dynamic {
    display: block;
}

.hcx-card-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hcx-card-popular {
    border-color: rgba(252, 70, 141, 0.38);
}

.hcx-card-popular small {
    background: linear-gradient(90deg, #ff43c7, #7d5cff);
    border-radius: 999px;
    color: #fff;
    font-size: 8px;
    letter-spacing: 0.12em;
    padding: 4px 14px;
    position: absolute;
    right: 36px;
    text-transform: uppercase;
    top: -10px;
    z-index: 2;
}

.hcx-trending-card {
    padding: 28px 20px 0 0;
}

.hcx-trending-kicker {
    color: #ff4ec8;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2em;
    margin: 0 0 16px;
    text-transform: uppercase;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.pink-dot {
    background: #FC468D !important;
    width: 10px;
    height: 10px;
    border-radius: 50% !important;
    display: inline-block !important;
    padding: 0 !important;
}

.hcx-trending-card a {
    background: rgba(24, 27, 45, 0.66);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    display: block;
    min-height: 152px;
    padding: 16px;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.hcx-trending-card a:hover {
    border-color: rgba(252, 70, 141, 0.42);
    box-shadow: 0 18px 46px rgba(252, 70, 141, 0.16);
    transform: translateY(-2px);
}

.hcx-trending-card span {
    background: rgba(252, 70, 141, 0.16);
    border-radius: 999px;
    color: #ff65cd;
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 22px;
    padding: 7px 14px;
}

.hcx-trending-card strong {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: block;
    font-size: 16px;
    line-height: 1.35;
    margin-bottom: 14px;
    padding-bottom: 22px;
}

.hcx-trending-card small {
    color: #536dff;
    font-size: 13px;
    font-weight: 600;
}

.hcx-simple-panel .hcx-mega-inner {
    max-width: 780px;
}

.hcx-company-panel .hcx-company-inner {
    max-width: 1180px;
    padding: 28px 26px 36px;
}

.hcx-company-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.hcx-company-grid .hcx-menu-card {
    justify-content: center;
    min-height: 68px;
    text-align: center;
    align-items: baseline;
}

.hcx-company-grid .hcx-arrow {
    /* display: none; */
}

.hcx-menu-toggle,
.hcx-menu-button {
    display: none;
}

.hcx-mobile-solutions {
    display: none;
}

/* Existing Contact Us button design reused from headerhome.blade.php */
.free-consultation-right a {
    border-radius: 8px;
    display: block;
    overflow: hidden;
    padding: 2px;
    position: relative;
    z-index: 0;
}

.free-consultation-right a::before {
    animation: rotateborder 2s linear infinite;
        /* animation: none; */
    background: linear-gradient(90deg, #FC468D 0%, #3F5EFB 52.46%, #EDF1F3 88.69%);
    border-radius: 12px;
    content: "";
    height: 200px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    will-change: transform;
    width: 102%;
    z-index: -1;
}

/* .free-consultation-right a:hover::before {
    animation: rotateborder 2s linear infinite;
} */

@keyframes rotateborder {
    from {
        transform: translate(-50%, -50%) scale(1.4) rotate(0turn);
    }

    to {
        transform: translate(-50%, -50%) scale(1.4) rotate(1turn);
    }
}

.free-consultation-right a span {
    align-items: center;
    background: #000;
    border-radius: 8px;
    color: #fff;
    display: inline-flex;
    font-size: 13px;
    gap: 10px;
    padding: 10px 16px;
    position: relative;
    z-index: 1;
}

.free-consultation-right img {
    display: block;
    transition: transform 0.25s ease;
}

.free-consultation-right a:hover img {
    transform: translateX(3px);
}

.hc-explore-arrow {
    display: flex;
    align-items: center;
    gap: 5px;
}

.hcx-arrow::before {
    content: "→";
    font-size: 16px;
    color: #fff;
    transition: .3s ease;
}

@media (max-width: 1199.98px) {
    .hcx-nav-container {
        max-width: 100%;
    }

    .hcx-nav-list {
        gap: 22px;
    }

    /* 
    .hcx-solution-tabs {
        grid-template-columns: 210px minmax(0, 1fr);
    }

    .hcx-trending-card {
        grid-column: 2;
        padding: 0 26px 28px 34px;
    } */

    .hcx-trending-card a {
        min-height: auto;
    }
}

@media (max-width: 991.98px) {
    .hcx-menu-button {
        align-items: center;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 8px;
        display: inline-flex;
        flex-direction: column;
        gap: 5px;
        height: 38px;
        justify-content: center;
        width: 42px;
    }

           .hcx-menu-card:hover,
           .hcx-trending-card a:hover {
               box-shadow: none;
               transform: none;
           }

    .hcx-menu-button span {
        background: #fff;
        border-radius: 999px;
        display: block;
        height: 4px;
        transition: transform 0.22s ease, opacity 0.22s ease;
        width: 20px;
        position: relative;
        top: 10px;
        left: 10px;
        margin-bottom: 2px;
    }

    .hcx-menu-toggle:checked+.hcx-menu-button span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .hcx-menu-toggle:checked+.hcx-menu-button span:nth-child(2) {
        opacity: 0;
    }

    .hcx-menu-toggle:checked+.hcx-menu-button span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .hcx-nav-shell {
        align-items: stretch;
        background: linear-gradient(145deg, rgba(3, 4, 8, 0.98), rgba(10, 13, 30, 0.98));
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 0 0 18px 18px;
        box-shadow: 0 18px 36px rgba(0, 0, 0, 0.38);
        contain: layout paint style;
        display: none;
        flex-direction: column;
        gap: 18px;
        left: 0px;
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        padding: 12px;
        position: fixed;
        right: -5px;
        top: 58px;
    }

    .hcx-menu-toggle:checked~.hcx-nav-shell {
        display: flex;
    }

    .hcx-nav-list {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    .hcx-nav-link {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        justify-content: space-between;
        min-height: 48px;
        padding: 0 14px;
        width: 100%;
    }

    .hcx-nav-link::after {
        display: none;
    }

    .hcx-mega-panel {
        border-radius: 12px;
        margin-top: 8px;
        opacity: 1;
        pointer-events: auto;
        position: static;
        transform: none;
        visibility: visible;
        width: 100%;
    }

    .hcx-nav-details[open] .hcx-mega-panel {
        transform: none;
    }

    .hcx-nav-details:not([open]) .hcx-mega-panel {
        display: none;
    }

    .hcx-mega-inner,
    .hcx-products-inner,
    .hcx-simple-panel .hcx-mega-inner,
    .hcx-company-panel .hcx-company-inner {
        max-width: none;
        padding: 18px;
    }

    .hcx-solution-tabs {
        display: block;
        min-height: 0;
    }

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

    .hcx-category-sidebar {
        border-right: 0;
        display: grid;
        gap: 8px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        padding: 0 0 18px;
    }

    .hcx-sidebar-title {
        grid-column: 1 / -1;
        margin-left: 0;
    }

    .hcx-menu-card.ar3 {
        background: var(--hcx-card) !important;
        border: 1px solid var(--hcx-border);
        border-radius: 10px;
        justify-content: space-between;
    }


    .hcx-arrow.blue-ar::before {
        color: #3b58eb;

    }

    .hcx-menu-card.ar3:hover .hcx-arrow::before {
        color: #fff;
        transform: translateX(3px);
    }

    .hcx-menu-card {
        background: none;
        border: none;
    }

    .hcx-category-label {
        margin: 0;
        padding: 12px 14px;
    }

    .hcx-solution-content {
        padding: 0;
    }

    .hcx-trending-card {
        padding: 18px 0 0;
    }

    .hcx-contact-button {
        display: inline-flex;
        justify-content: flex-start;
    }

    .hcx-mobile-trending-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

@media (max-width: 767.98px) {
    .hcx-nav-container {
        min-height: 58px;
        padding: 0 16px;
    }

    .hcx-logo img {
        max-width: 156px;
    }

    .hcx-meganav {
        min-height: 58px;
    }

    .hcx-product-grid,
    .hcx-simple-grid,
    .hcx-card-grid {
        grid-template-columns: 1fr;
    }

    .hcx-category-sidebar {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .hcx-solutions-panel .hcx-mega-inner {
        padding: 14px;
    }

    .single-menu-item {
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 10px;
        justify-content: space-between;
        min-height: 48px;
        padding: 0 14px;
        width: 100%;
        display: flex;
        align-items: center;
    }


    .hcx-solutions-panel .hcx-category-sidebar,
    .hcx-solutions-panel .hcx-solution-content,
    .hcx-solutions-panel .hcx-trending-card {
        display: none;
    }

    .hcx-solutions-panel,
    .hcx-solutions-panel .hcx-solutions-inner {
        overflow: visible;
    }

    .hcx-mobile-solutions {
        animation: hcxMobileMenuDrop 0.28s ease both;
        display: block;
        padding: 10px;
    }

    .hcx-mobile-browse-title {
        align-items: center;
        color: rgba(255, 255, 255, 0.28);
        display: flex;
        font-size: 13px;
        font-weight: 600;
        gap: 12px;
        letter-spacing: 0.2em;
        line-height: 1.2;
        margin: 0 0 16px;
        text-transform: uppercase;
    }

    .hcx-mobile-browse-title::after {
        display: none;
    }

    .hcx-mobile-category-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 0;
    }

    .hcx-mobile-category-loading {
        align-items: center;
        background: linear-gradient(145deg, rgba(18, 20, 27, 0.96), rgba(10, 12, 18, 0.98));
        border: 1px solid rgba(255, 255, 255, 0.055);
        border-radius: 18px;
        color: rgba(255, 255, 255, 0.62);
        display: flex;
        font-size: 14px;
        font-weight: 600;
        grid-column: 1 / -1;
        justify-content: center;
        min-height: 86px;
        padding: 24px;
    }

    .hcx-mobile-category-card {
        appearance: none;
        background: linear-gradient(145deg, rgba(18, 20, 27, 0.96), rgba(10, 12, 18, 0.98));
        border: 1px solid rgba(255, 255, 255, 0.055);
        border-radius: 18px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 8px 18px rgba(0, 0, 0, 0.26);
        color: #fff;
        cursor: pointer;
        display: grid;
        gap: 5px;
        min-height: 86px;
        overflow: hidden;
        padding: 24px 36px 20px 24px;
        position: relative;
        text-align: left;
        transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
        width: 100%;
    }

    .hcx-mobile-category-card::before {
        background: linear-gradient(135deg, rgba(252, 70, 141, 0.16), rgba(63, 94, 251, 0.13));
        content: "";
        inset: 0;
        opacity: 0;
        position: absolute;
        transition: opacity 0.24s ease;
    }

    .hcx-mobile-category-card::after {
        background: var(--hcx-gradient);
        border-radius: inherit;
        content: "";
        inset: 0;
        opacity: 0;
        padding: 1px;
        position: absolute;
        transition: opacity 0.24s ease;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .hcx-mobile-category-card>* {
        position: relative;
        z-index: 1;
    }

    .hcx-mobile-category-card strong {
        align-self: end;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.2;
        min-height: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .hcx-mobile-category-card small {
        color: rgba(255, 255, 255, 0.42);
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        text-transform: lowercase;
    }

    .hcx-mobile-category-dot {
        background: #f75bd1;
        border-radius: 50%;
        height: 7px;
        opacity: 0;
        position: absolute;
        right: 15px;
        top: 14px;
        width: 7px;
    }

    .hcx-mobile-category-arrow {
        align-items: center;
        bottom: 35px;
        color: rgba(255, 255, 255, 0.28);
        display: inline-flex;
        height: 12px;
        justify-content: center;
        opacity: 0.38;
        position: absolute;
        right: 17px;
        transition: opacity 0.24s ease, transform 0.24s ease;
        width: 12px;
    }

    .hcx-mobile-category-card:not(.is-active):hover,
    .hcx-mobile-category-card:focus-visible,
    .hcx-mobile-category-card.is-active {
        background: linear-gradient(145deg, rgba(23, 16, 44, 0.96), rgba(13, 15, 34, 0.98));
        border-color: rgba(211, 65, 235, 0.54);
        box-shadow: inset 0 0 24px rgba(132, 76, 255, 0.17), 0 0 0 1px rgba(252, 70, 141, 0.16), 0 18px 36px rgba(54, 31, 143, 0.24);
        transform: scale(1.01);
    }

    .hcx-mobile-category-card:not(.is-active):hover::before,
    .hcx-mobile-category-card:focus-visible::before,
    .hcx-mobile-category-card.is-active::before,
    .hcx-mobile-category-card:not(.is-active):hover::after,
    .hcx-mobile-category-card:focus-visible::after,
    .hcx-mobile-category-card.is-active::after {
        opacity: 1;
    }

    .hcx-mobile-category-card:hover .hcx-mobile-category-arrow,
    .hcx-mobile-category-card:focus-visible .hcx-mobile-category-arrow,
    .hcx-mobile-category-card.is-active .hcx-mobile-category-arrow {
        opacity: 0.8;
        transform: translateX(3px);
    }

    .hcx-mobile-category-card.is-active .hcx-mobile-category-dot {
        background: #ff4ec8;
        opacity: 1;
        box-shadow: 0 0 0 4px rgba(252, 70, 141, 0.14), 0 0 16px rgba(252, 70, 141, 0.7);
    }

    .hcx-mobile-trending-card {
        animation: hcxMobileCardIn 0.28s ease both;
        background: linear-gradient(150deg, rgba(10, 14, 34, 0.98), rgba(8, 10, 25, 0.99));
        border: 1px solid rgba(52, 61, 118, 0.38);
        border-radius: 22px;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 14px 32px rgba(0, 0, 0, 0.34);
        grid-column: 1 / -1;
        margin: 0;
        overflow: hidden;
        padding: 27px 24px 22px;
        position: relative;
        margin: 10px;
    }

    .hcx-mobile-trending-card::before {
        background: linear-gradient(180deg, rgba(63, 94, 251, 0.36), rgba(252, 70, 141, 0.08));
        border-radius: inherit;
        content: "";
        inset: 0;
        opacity: 0.46;
        padding: 1px;
        pointer-events: none;
        position: absolute;
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
    }

    .hcx-mobile-trending-card>* {
        position: relative;
        z-index: 1;
    }

    .hcx-mobile-trending-card.is-updating {
        animation: hcxMobileCardSwap 0.3s ease both;
    }

    .hcx-mobile-trending-kicker {
        color: #ff4ec8;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: 0.18em;
        line-height: 1.2;
        margin: 0 0 22px;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 10px;
    }


    /* .hcx-mobile-trending-kicker::before {
        content: "*";
        margin-right: 12px;
    } */

    .hcx-mobile-trending-meta {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-start;
    }

    .hcx-mobile-trending-meta span,
    .hcx-mobile-trending-meta small {
        border-radius: 999px;
        display: inline-flex;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        padding: 10px 17px;
    }

    /* .hcx-mobile-trending-meta span {
        background: rgba(252, 70, 141, 0.2);
        color: #ff65cd;
    } */

    .hcx-mobile-trending-meta span {
        /* background: linear-gradient(90deg, #ff43c7, #7d5cff);
                color: #fff;
                font-size: 10px;
                font-weight: 600;
                letter-spacing: 0.12em;
                text-transform: uppercase;
                padding: 6px 14px;
                border-radius: 999px;
        
                width: fit-content; */



        background: rgba(252, 70, 141, 0.16);
        border-radius: 999px;
        color: #ff65cd;
        display: inline-block;
        font-size: 11px;
        font-weight: 600;
        margin-bottom: 22px;
        padding: 7px 14px;
    }

    .hcx-mobile-popular-badge {
        display: inline-block;
        background: linear-gradient(90deg, #ff43c7, #7d5cff);
        color: #fff !important;
        font-size: 10px !important;
        padding: 4px 10px;
        border-radius: 999px;
        margin-bottom: 8px;
        text-transform: uppercase;
        letter-spacing: .1em;
        max-width: 110px;
    }

    .hcx-mobile-trending-meta small {
        display: none;
    }

    .hcx-mobile-trending-card h3 {
        color: #fff;
        font-size: 17px !important;
        font-weight: 600;
        letter-spacing: 0;
        line-height: 1.18;
        margin: 0 0 26px;
        overflow-wrap: anywhere;
    }

    .hcx-mobile-trending-card p[data-mobile-trending-description] {
        display: none;
    }

    .hcx-mobile-trending-link {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        color: #3f5efb !important;
        /* display: block; */
        font-size: 15px;
        font-weight: 600;
        line-height: 1.2;
        margin: 0 0 0;
        padding: 0 0 25px;
        display: flex;
        /* align-items: center; */
        gap: 3px;

    }

    .hcx-mobile-trending-divider {
        background: rgb(63 94 251 / 43%);
        height: 1px;
        margin: 0 0 0;
    }

    .hcx-mobile-featured-list {
        display: grid;
        gap: 0;
    }

    .hcx-mobile-service-row {
        align-items: center;
        background: transparent;
        border: 0;
        /* border-bottom: 1px solid rgba(255, 255, 255, 0.06); */
        border-radius: 0;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        min-height: 74px;
        padding: 17px 0;
        transition: border-color 0.22s ease, background 0.22s ease, transform 0.22s ease;
    }

    .hcx-mobile-service-row:hover,
    .hcx-mobile-service-row:focus-visible {
        background: transparent;
        border-color: rgba(252, 70, 141, 0.22);
        transform: translateY(-1px);
    }

    .hcx-mobile-service-row span:first-child {
        min-width: 0;
    }

    .hcx-mobile-service-row strong {
        color: #fff;
        display: block;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.25;
        margin-bottom: 4px;
        overflow-wrap: anywhere;
    }

    .hcx-mobile-service-row small {
        color: rgba(255, 255, 255, 0.42);
        display: block;
        font-size: 14px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .hcx-mobile-service-arrow {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 0;
        color: #fff;
        display: inline-flex;
        flex: 0 0 20px;
        height: 20px;
        justify-content: center;
        width: 20px;
    }

    .hcx-mobile-view-all {
        appearance: none;
        background: transparent;
        border: 0;
        border-radius: 0;
        color: #8b72ff;
        cursor: pointer;
        display: inline-flex;
        font-family: "Sen", Arial, sans-serif;
        font-size: 15px;
        font-weight: 600;
        justify-content: center;
        line-height: 1.2;
        margin-top: 0;
        min-height: 44px;
        padding: 18px 0 0;
        transition: transform 0.2s ease;
        width: 100%;
    }

    .hcx-mobile-view-all:hover,
    .hcx-mobile-view-all:focus-visible {
        /* box-shadow: 0 16px 36px rgba(252, 70, 141, 0.22); */
        transform: translateY(-1px);
    }
}

@media (hover: none) and (pointer: coarse) {
    .hcx-menu-card:hover,
    .hcx-trending-card a:hover,
    .hcx-mobile-category-card:hover,
    .hcx-mobile-service-row:hover,
    .hcx-mobile-view-all:hover {
        box-shadow: inherit;
        transform: none;
    }

    .hcx-menu-card:hover::before,
    .hcx-mobile-category-card:not(.is-active):hover::before,
    .hcx-mobile-category-card:not(.is-active):hover::after {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hcx-header *,
    .hcx-header *::before,
    .hcx-header *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

@media (max-width: 767.98px) {
    .hcx-section-title {
        font-size: 11px;
        gap: 14px;
        margin-bottom: 18px;
    }

    .hcx-menu-card {
        font-size: 14px;
        min-height: 58px;
        padding: 15px;
    }

    .hcx-menu-card {
        background: none !important;
        border: none !important;
    }

    .hcx-card-popular small {
        display: inline-block;
        margin-bottom: 8px;
        position: static;
        width: max-content;
    }

    .hcx-card-popular {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .hcx-card-popular .hcx-arrow {
        position: absolute;
        right: 15px;
        top: 50%;
    }
}

@keyframes hcxMobileMenuDrop {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

@keyframes hcxMobileCardIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

@keyframes hcxMobileCardSwap {
    from {
        opacity: 0.72;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.hcx-header .hcx-menu-button {
    display: inline-block!important;
    align-items: center;
    justify-content: center;
}