/* Page-specific styles for hubx.html */

/* ===== Critical: prevent horizontal overflow ===== */
html, body {
    overflow-x: hidden !important;
}

/* ===== Mobile Header container fix (desktop must NOT be touched) ===== */
@media (max-width: 767px) {
    .tmgm-header-tw-container {
        padding: 10px 15px !important;
        box-sizing: border-box !important;
    }
    
    .tmgm-header-tw-upper-right {
        gap: 4px !important;
    }
    
    /* Shrink language button on mobile to make room for hamburger */
    .tmgm-header-tw-language-button {
        padding: 6px 8px !important;
    }
    
    /* Hide country text on small screens, show only flag icon */
    .tmgm-country-button-tw-responsive {
        display: none !important;
    }
}

/* Mobile hamburger menu: hidden on desktop, visible on mobile */
.tmgm-header-tw-upper-right-responsive {
    display: flex !important;
}
@media (min-width: 768px) {
    .tmgm-header-tw-upper-right-responsive {
        display: none !important;
    }
    /* Restore country text on desktop */
    .tmgm-country-button-tw-responsive {
        display: block !important;
    }
}

/* ===== Hero Section ===== */
.tmgm-header-wrapper {
    height: 480px !important;
    display: flex !important;
    flex-direction: column !important;
}

@media only screen and (max-width: 768px) {
    .tmgm-header-wrapper {
        height: 380px !important;
    }
}

.tmgm-header-page-content {
    flex: 1 !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
    padding-bottom: 40px !important;
    height: auto !important;
    text-align: left !important;
}

/* Fix: remove excessive margin-top on hero header-container */
.tmgm-header-page-content .header-container,
.tmgm-header-page-content > .header-container {
    margin-top: 0 !important;
    text-align: left !important;
}

.tmgm-header-page-content .wrapper {
    text-align: left !important;
}

.tmgm-header-page-content h1,
.tmgm-header-page-content .description,
.tmgm-header-page-content a.btn-banner {
    text-align: left !important;
}

/* ===== Nav Dropdown Hover ===== */
.tmgm-main-menu > [data-tmgm-menu-company]:hover + .tmgm-header-tw-dropdown[data-tmgm-dropdown-company],
.tmgm-header-tw-dropdown[data-tmgm-dropdown-company]:hover {
    visibility: visible !important;
}

/* ===== Content Styles ===== */
#wd-img {
    width: 100%;
}

h1 {
    color: #fff;
    font-weight: 700;
}

.no-line-height {
    line-height: 0;
}

.flex-content {
    display: flex;
    align-items: center;
    gap: 30px;
}

@media (max-width: 767px) {
    .flex-content {
        flex-direction: column;
    }
}

.list-area {
    margin-top: auto;
    padding-bottom: 50px;
    text-align: left;
}

.list-area ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-area ul li {
    padding: 6px 0;
    font-size: 15px;
    color: #555;
}

.list-area ul li::before {
    content: "✓ ";
    color: #27AE60;
    font-weight: 700;
}

.image-wrapper {
    background-image: url(../img/front/public/images/lp/dotted-pattern.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ===== CTA Button ===== */
.btn-banner.primary {
    display: inline-block;
    background: linear-gradient(90deg, #2BC0E4, #3A7BD5);
    color: #fff;
    padding: 0px 40px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 17px;
    text-decoration: none;
    transition: opacity 0.3s ease;
    box-shadow: 0 4px 15px rgba(42, 150, 220, 0.35);
}

.btn-banner.primary:hover {
    opacity: 0.9;
    color: #fff;
    box-shadow: 0 6px 20px rgba(42, 150, 220, 0.45);
}

/* ===== Copy Trade Flow ===== */
.CT-wrapper {
    position: relative;
    text-align: center;
}

.copy-trade-flow {
    position: relative;
    display: inline-block;
}

.copy-trade-flow img {
    max-width: 100%;
}