@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* Redesign variables */
:root {
    --gold: #C5A059;
    --gold-bright: #E5C158;
    --gold-deep: #8C620B;
    --gold-light: #F3E5AB;
    --gold-dark: #1c180f;
    --black: #080808;
    --black-card: #141414;
    --black-input: #1e1e1e;
    --white: #ffffff;
    --gray-light: #e0e0e0;
    --gray-muted: #888888;
}

/* Typography global override */
body,
p,
span,
div,
a,
h1,
h2,
h3,
h4,
h5,
h6,
.btn,
td,
th,
label,
input,
select,
textarea {
    font-family: 'Outfit', sans-serif !important;
}

/* Global resets & backgrounds */
body,
html,
#wrapper,
#content,
main,
.page-content,
.body-bg {
    background-color: var(--black) !important;
    color: var(--gray-light) !important;
}

/* Common UIkit Section background resets */
section,
.section,
.uk-section,
.uk-section-default,
.uk-section-muted,
.uk-section-secondary,
.uk-section-primary {
    background-color: var(--black) !important;
    background-image: none !important;
    color: var(--gray-light) !important;
}

/* Grid & Layout containers */
.uk-tile,
.uk-tile-default,
.uk-tile-muted,
.uk-tile-primary,
.uk-tile-secondary {
    background-color: var(--black-card) !important;
    color: var(--gray-light) !important;
    border: 1px solid rgba(197, 160, 89, 0.2) !important;
}

/* Cards & Widgets */
.card,
.uk-card,
.uk-card-default,
.uk-card-muted,
.uk-card-secondary,
.uk-card-primary,
.widget,
.widget-contact-us,
.well,
.in-profit-9,
.in-profit-3 {
    background-color: var(--black-card) !important;
    background-image: none !important;
    color: var(--gray-light) !important;
    border: 1px solid rgba(197, 160, 89, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
}

.card:hover,
.uk-card:hover,
.widget:hover {
    border-color: var(--gold) !important;
    box-shadow: 0 15px 35px rgba(197, 160, 89, 0.2) !important;
    transform: translateY(-5px);
}

/* Typography overrides */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.uk-h1,
.uk-h2,
.uk-h3,
.uk-h4,
.uk-h5,
.uk-h6,
.uk-card-title,
.card-title,
.widget-title,
.widget h4,
.widget-contact-us h4 {
    color: var(--white) !important;
    font-weight: 600 !important;
}

/* Accent Gold Highlights */
.text-primary,
.uk-text-primary,
.color-primary,
.c-gold,
.uk-text-bold,
strong,
.in-highlight,
span.in-highlight,
.in-highlight span {
    color: var(--gold) !important;
}

/* Custom Highlight colors (like green/red) that need contrast */
span[style*="color: forestgreen"],
span[style*="color: forestgreen"] strong {
    color: var(--gold-light) !important;
}

span[style*="color: firebrick"],
span[style*="color: firebrick"] strong {
    color: var(--gold-bright) !important;
}

/* Muted colors */
.text-muted,
.uk-text-muted,
.uk-text-meta,
.post-meta,
.breadcrumb,
.uk-breadcrumb,
.copyright-content p {
    color: var(--gray-muted) !important;
}

/* Links & Anchors */
a {
    color: var(--gold) !important;
    transition: all 0.3s ease;
}

a:hover {
    color: var(--gold-bright) !important;
    text-decoration: none !important;
}

/* Buttons redesign */
.btn,
.uk-button,
.btn-primary,
.uk-button-primary,
.btn-secondary,
.uk-button-secondary,
.btn-light,
.btn-dark,
.btn-outline-primary,
.btn-outline-secondary {
    background-color: var(--gold) !important;
    background: var(--gold) !important;
    border: 2px solid var(--gold) !important;
    color: var(--black) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border-radius: 50px !important;
    padding: 10px 28px !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important;
}

.btn:hover,
.uk-button:hover,
.btn-primary:hover,
.uk-button-primary:hover,
.btn-secondary:hover,
.uk-button-secondary:hover {
    background-color: var(--gold-bright) !important;
    background: var(--gold-bright) !important;
    border-color: var(--gold-bright) !important;
    color: var(--black) !important;
    box-shadow: 0 8px 20px rgba(197, 160, 89, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* Outline Buttons */
.btn-outline,
.btn-outline-primary,
.btn-outline-secondary,
.uk-button-default {
    background-color: transparent !important;
    background: transparent !important;
    border: 2px solid var(--gold) !important;
    color: var(--gold) !important;
}

.btn-outline:hover,
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.uk-button-default:hover {
    background-color: var(--gold) !important;
    background: var(--gold) !important;
    color: var(--black) !important;
}

/* ==========================================================================
   Topbar Strip
   ========================================================================== */
#gip-topbar {
    background-color: var(--black) !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.15);
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    z-index: 200;
    position: relative;
}

.gip-topbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 32px;
}

.gip-topbar-left {
    display: flex;
    align-items: center;
}

.gip-topbar-email {
    color: var(--gray-muted) !important;
    font-size: 12px;
    font-weight: 400 !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: color 0.3s ease;
    font-family: 'Outfit', sans-serif !important;
}

.gip-topbar-email:hover {
    color: var(--gold) !important;
}

.gip-topbar-email i {
    font-size: 11px;
    color: var(--gold) !important;
}

.gip-topbar-right {
    display: flex;
    align-items: center;
}

/* Google Translate Widget Overrides */
#google_translate_element {
    display: flex;
    align-items: center;
}

#google_translate_element .goog-te-gadget {
    font-size: 0 !important;
    margin: 0 !important;
    color: transparent !important;
}

#google_translate_element .goog-te-gadget>span {
    display: none !important;
}

#google_translate_element .goog-te-combo,
#google_translate_element select {
    background-color: rgba(197, 160, 89, 0.1) !important;
    border: 1px solid rgba(197, 160, 89, 0.3) !important;
    color: var(--white) !important;
    font-size: 11px !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 500 !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    height: 24px !important;
    line-height: 24px !important;
    cursor: pointer;
    outline: none !important;
    box-shadow: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23C5A059' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    background-size: 8px 5px !important;
    padding-right: 22px !important;
}

#google_translate_element .goog-te-combo:hover,
#google_translate_element select:hover {
    border-color: var(--gold) !important;
}

#google_translate_element .goog-te-combo option,
#google_translate_element select option {
    background-color: var(--black-card) !important;
    color: var(--white) !important;
}

/* Hide Google Translate top banner */
.goog-te-banner-frame,
.skiptranslate>iframe {
    display: none !important;
}

body {
    top: 0 !important;
}

/* ==========================================================================
   Compact Header (60px)
   ========================================================================== */
#header,
#header.header-compact {
    height: 60px !important;
    line-height: 60px !important;
    position: relative !important;
    z-index: 999999999 !important;
}

#header .header-inner,
#header #header-wrap {
    height: 60px !important;
    background-color: var(--black-card) !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.25) !important;
    position: relative !important;
    z-index: 999999999 !important;
}

#header #logo {
    height: 60px !important;
}

#header #logo a>img {
    height: 60px !important;
    max-height: 44px !important;
    padding: 8px 0 !important;
    width: auto !important;
}

#header #logo .logo-default img,
#header #logo .logo-dark img {
    width: auto !important;
    max-width: 200px !important;
    height: 44px !important;
    object-fit: contain !important;
}

/* Navigation Links */
#header #mainMenu nav ul li a {
    color: var(--white) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 8px 14px !important;
    transition: color 0.3s ease !important;
    position: relative !important;
    font-family: 'Outfit', sans-serif !important;
}

/* Gold underline hover animation */
#header #mainMenu nav>ul>li>a::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important;
    left: 50% !important;
    width: 0 !important;
    height: 2px !important;
    background-color: var(--gold) !important;
    transition: all 0.3s ease !important;
    transform: translateX(-50%) !important;
}

#header #mainMenu nav>ul>li:hover>a::after,
#header #mainMenu nav>ul>li.current>a::after,
#header #mainMenu nav>ul>li.active>a::after {
    width: 70% !important;
}

#header #mainMenu nav ul li a:hover,
#header #mainMenu nav ul li.current-menu-item a,
#header #mainMenu nav ul li.current>a,
#header #mainMenu nav ul li.active a {
    color: var(--gold) !important;
}

/* Header Dropdowns */
#header #mainMenu nav ul li.dropdown>ul {
    background-color: var(--black-card) !important;
    border: 1px solid rgba(197, 160, 89, 0.25) !important;
    border-radius: 6px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7) !important;
    padding: 6px 0 !important;
}

#header #mainMenu nav ul li.dropdown>ul>li>a {
    color: var(--gray-light) !important;
    padding: 10px 22px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    transition: all 0.2s ease !important;
}

#header #mainMenu nav ul li.dropdown>ul>li>a:hover {
    background-color: rgba(197, 160, 89, 0.08) !important;
    color: var(--gold) !important;
    padding-left: 26px !important;
}

/* Header CTA Button */
.gip-header-cta {
    background-color: var(--gold) !important;
    background: linear-gradient(135deg, var(--gold), var(--gold-bright)) !important;
    color: var(--black) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    padding: 8px 20px !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    font-family: 'Outfit', sans-serif !important;
    line-height: 1 !important;
}

.gip-header-cta:hover {
    background: linear-gradient(135deg, var(--gold-bright), var(--gold)) !important;
    color: var(--black) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(197, 160, 89, 0.4);
}

/* Desktop-only flex layout for nav — must NOT apply on mobile */
body.b--desktop #header #mainMenu nav > ul {
    display: flex !important;
    align-items: center !important;
}

#header #mainMenu nav ul li.gip-cta-li {
    margin-left: 8px !important;
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
}

#header #mainMenu nav ul li.gip-cta-li>a::after {
    display: none !important;
}

/* Mobile Navigation Hamburger Trigger */
#mainMenu-trigger button,
#mainMenu-trigger a.lines-button,
#mainMenu-trigger .lines-button {
    background-color: transparent !important;
}

#mainMenu-trigger .lines,
#mainMenu-trigger .lines::before,
#mainMenu-trigger .lines::after,
.lines-button .lines,
.lines-button .lines::before,
.lines-button .lines::after,
.lines-button.x .lines::before,
.lines-button.x .lines::after,
#mainMenu-trigger a.lines-button span.lines,
#mainMenu-trigger a.lines-button span.lines::before,
#mainMenu-trigger a.lines-button span.lines::after {
    background-color: var(--gold) !important;
    background: var(--gold) !important;
}

/* Forms & Input elements */
input,
select,
textarea,
.uk-input,
.uk-select,
.uk-textarea {
    background-color: var(--black-input) !important;
    border: 1px solid rgba(197, 160, 89, 0.3) !important;
    color: var(--white) !important;
    border-radius: 6px !important;
    padding: 12px 18px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5) !important;
}

#gip-topbar {
    background-color: var(--black) !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 32px;
    position: relative !important;
    z-index: 999999999 !important;
    overflow: visible !important;
}

input:focus,
select:focus,
textarea:focus,
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
    border-color: var(--gold-bright) !important;
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.5) !important;
    outline: none !important;
}

/* Tables styling */
table,
.uk-table {
    border-collapse: collapse !important;
    width: 100% !important;
    background-color: var(--black-card) !important;
    border: 1px solid rgba(197, 160, 89, 0.15) !important;
    border-radius: 8px !important;
}

table th,
.uk-table th {
    background-color: var(--black-input) !important;
    color: var(--gold) !important;
    border-bottom: 2px solid var(--gold) !important;
    padding: 14px 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}

table td,
.uk-table td {
    padding: 14px 18px !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.1) !important;
    color: var(--gray-light) !important;
}

table tr:hover,
.uk-table tr:hover {
    background-color: rgba(197, 160, 89, 0.05) !important;
}

/* Footer styling */
#footer,
.footer-content {
    background-color: var(--black-card) !important;
    border-top: 2px solid rgba(197, 160, 89, 0.3) !important;
}

#footer h4 {
    color: var(--gold) !important;
    border-bottom: 1px solid rgba(197, 160, 89, 0.2);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

#footer .copyright-content {
    background-color: var(--black) !important;
    border-top: 1px solid rgba(197, 160, 89, 0.15) !important;
    color: var(--gray-muted) !important;
}

/* Font Awesome Icons gold highlights */
i.fa,
i.fas,
i.far,
i.fab,
.list-icon li i {
    color: var(--gold) !important;
}

/* Mobile Navigation Hamburger Trigger */
#mainMenu-trigger button,
#mainMenu-trigger a.lines-button,
#mainMenu-trigger .lines-button {
    background-color: transparent !important;
}

#mainMenu-trigger .lines,
#mainMenu-trigger .lines::before,
#mainMenu-trigger .lines::after,
.lines-button .lines,
.lines-button .lines::before,
.lines-button .lines::after,
.lines-button.x .lines::before,
.lines-button.x .lines::after,
#mainMenu-trigger a.lines-button span.lines,
#mainMenu-trigger a.lines-button span.lines::before,
#mainMenu-trigger a.lines-button span.lines::after {
    background-color: var(--gold) !important;
    background: var(--gold) !important;
}

/* Preloader accent color */
.spinner {
    border-top-color: var(--gold) !important;
}

/* Preloader overlay background */
#preloader {
    background-color: var(--black) !important;
}

/* Hardcoded blue styling overrides (for elements containing inline backgrounds, banners, or specific sections) */
div[style*="#012c6d"],
div[style*="#012c6ae6"],
div[style*="#112b77"],
div[style*="#01123c"],
div[style*="#062f6d"],
section[style*="#012c6d"],
section[style*="#012c6ae6"],
section[style*="#112b77"],
section[style*="#01123c"],
section[style*="#062f6d"],
.theme-bg,
.bg-overlay,
.kiksksk992mmw {
    background-color: var(--black) !important;
    background: var(--black) !important;
}

/* Linear gradients containing blues or old colors */
div[style*="linear-gradient"],
section[style*="linear-gradient"],
.fxt-bg-color,
.fxt-template-layout24 {
    background-color: var(--black-card) !important;
    background: linear-gradient(135deg, var(--black) 0%, var(--black-card) 100%) !important;
}

/* Auth Pages (Login, Register, Forgot Password) overrides */
.fxt-template-animation,
.fxt-bg-color,
.fxt-content,
.fxt-header,
.fxt-form {
    background-color: var(--black-card) !important;
    background: var(--black-card) !important;
    color: var(--gray-light) !important;
    border-radius: 12px !important;
}

.fxt-btn-fill {
    background-color: var(--gold) !important;
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--black) !important;
}

.fxt-btn-fill:hover {
    background-color: var(--gold-bright) !important;
    background: var(--gold-bright) !important;
    border-color: var(--gold-bright) !important;
}

.fxt-page-switcher .switcher-text1 {
    color: var(--gray-muted) !important;
}

.fxt-page-switcher .switcher-text1.active,
.fxt-page-switcher .switcher-text1:hover {
    color: var(--gold) !important;
}

/* Investment packages specific colors (e.g. Visa, Real Estate, plans sections) */
div[style*="background-color: #E5C158"],
span[style*="background-color: #E5C158"],
a[style*="background-color: #E5C158"],
button[style*="background-color: #E5C158"] {
    background-color: var(--gold) !important;
    color: var(--black) !important;
}

.in-profit-9 .uk-card-default,
.in-profit-3 .uk-card-default {
    background-color: var(--black-card) !important;
}

/* High-specificity body overrides to beat body-embedded style blocks and hardcoded sections */
body section.pricing,
#wrapper section.pricing,
section.pricing {
    background-color: var(--black) !important;
    background: var(--black) !important;
    background-image: none !important;
}

body .pricing .card,
#wrapper .pricing .card,
.pricing .card {
    background-color: var(--black-card) !important;
    color: var(--gray-light) !important;
    border: 1.5px solid rgba(197, 160, 89, 0.2) !important;
}

body .rtyuiy567 ul b,
#wrapper .rtyuiy567 ul b,
.rtyuiy567 ul b {
    color: var(--gold) !important;
}

html body button.btn.btn-primary,
html body .btn:not(.close):not(.mfp-close).btn-primary,
html body a.btn:not([href]):not([tabindex]).btn-primary,
html body .btn-primary,
html body a.btn.btn-primary,
html body button.btn-primary,
body button.btn.btn-primary,
body .btn:not(.close):not(.mfp-close).btn-primary,
body a.btn:not([href]):not([tabindex]).btn-primary,
#wrapper button.btn.btn-primary,
#wrapper .btn:not(.close):not(.mfp-close).btn-primary,
#wrapper a.btn:not([href]):not([tabindex]).btn-primary,
.btn-primary {
    background-color: var(--gold) !important;
    background: var(--gold) !important;
    border-color: var(--gold) !important;
    color: var(--black) !important;
}

html body button.btn.btn-primary:hover,
html body .btn:not(.close):not(.mfp-close).btn-primary:hover,
html body a.btn:not([href]):not([tabindex]).btn-primary:hover,
html body .btn-primary:hover,
html body a.btn.btn-primary:hover,
html body button.btn-primary:hover {
    background-color: var(--gold-bright) !important;
    background: var(--gold-bright) !important;
    border-color: var(--gold-bright) !important;
    color: var(--black) !important;
}

body .ttyy.in-highlight::before,
#wrapper .ttyy.in-highlight::before,
.ttyy.in-highlight::before {
    background-color: var(--gold) !important;
    background: var(--gold) !important;
}

body .in-wave-12 blockquote .uk-label,
#wrapper .in-wave-12 blockquote .uk-label,
.in-wave-12 blockquote .uk-label {
    background-color: var(--gold) !important;
    background: var(--gold) !important;
    color: var(--black) !important;
}

body .in-wave-12 .in-wave-12-counter,
#wrapper .in-wave-12 .in-wave-12-counter,
.in-wave-12 .in-wave-12-counter {
    border-bottom: 1.5px solid rgba(197, 160, 89, 0.3) !important;
}

/* Semi-transparent overlay for background images */
.bg-overlay,
#slider .bg-overlay,
div.bg-overlay {
    background-color: rgba(8, 8, 8, 0.75) !important;
    background: rgba(8, 8, 8, 0.75) !important;
}

/* Override tradingview widgets container */
.tradingview-widget-container {
    background-color: var(--black-card) !important;
    border: 1px solid rgba(197, 160, 89, 0.15) !important;
    border-radius: 8px !important;
    padding: 10px !important;
}

/* Form control dark overrides for auth / dashboard / forms */
html body .form-control,
html body input.form-control,
html body select.form-control,
html body textarea.form-control,
html body .form-group input,
html body .fxt-form input,
html body .fxt-form select,
html body .fxt-form textarea,
html body input,
html body select,
html body textarea {
    background-color: var(--black-input) !important;
    background: var(--black-input) !important;
    border: 1.5px solid rgba(197, 160, 89, 0.3) !important;
    color: var(--white) !important;
    border-radius: 6px !important;
}

html body .form-control:focus,
html body input.form-control:focus,
html body select.form-control:focus,
html body textarea.form-control:focus,
html body input:focus,
html body select:focus,
html body textarea:focus {
    border-color: var(--gold-bright) !important;
    box-shadow: 0 0 10px rgba(197, 160, 89, 0.5) !important;
    outline: none !important;
}

html body .form-control::placeholder,
html body input::placeholder,
html body textarea::placeholder {
    color: var(--gray-muted) !important;
    opacity: 0.8 !important;
}

/* Select options formatting */
select option {
    background-color: var(--black-card) !important;
    color: var(--white) !important;
}

/* Table stripes overrides */
table tr:nth-child(odd),
.uk-table-striped tbody tr:nth-of-type(odd),
table tr:nth-of-type(odd) {
    background-color: rgba(197, 160, 89, 0.02) !important;
}

/* Alert / Status system overrides */
.success,
.uk-text-success,
.text-success,
span[style*="color: forestgreen"] {
    color: #2ec4b6 !important;
    /* Premium teal/green for success */
}

.error,
.uk-text-danger,
.text-danger,
span[style*="color: firebrick"],
h2[style*="color: #e01010"] {
    color: #e63946 !important;
    /* Premium red for errors */
}

.warning,
.uk-text-warning,
.text-warning {
    color: #ffb703 !important;
    /* Premium amber for warnings */
}

.info,
.uk-text-info,
.text-info {
    color: #0077b6 !important;
    /* Premium blue for info */
}

.alert,
.uk-alert {
    background-color: var(--black-card) !important;
    color: var(--white) !important;
    border-radius: 6px !important;
}

.alert-success,
.uk-alert-success {
    border: 1px solid #2ec4b6 !important;
}

.alert-danger,
.uk-alert-danger {
    border: 1px solid #e63946 !important;
}

.alert-warning,
.uk-alert-warning {
    border: 1px solid #ffb703 !important;
}

/* Button Text Color Fixes for Banners and Cards */
html body .btn.btn-rounded,
html body .slide-captions .btn,
html body .slider-captions .btn,
html body a.uk-button.uk-button-primary,
html body a.btn,
html body button.btn,
html body .btn-light,
html body .btn-primary {
    color: var(--white) !important;
    background-color: var(--gold) !important;
    border-color: var(--gold) !important;
}

html body .btn.btn-rounded i,
html body .slide-captions .btn i,
html body .slider-captions .btn i,
html body a.uk-button.uk-button-primary i,
html body a.btn i {
    color: var(--white) !important;
}

html body .btn.btn-rounded:hover,
html body .slide-captions .btn:hover,
html body a.uk-button.uk-button-primary:hover,
html body a.btn:hover {
    background-color: var(--gold-bright) !important;
    border-color: var(--gold-bright) !important;
    color: var(--white) !important;
}

/* ==========================================================================
   Mobile UI Vertical Alignment Fixes 
   (Addresses "Outfit" font baseline shift pushing text down on mobile)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. Buttons */
    html body .btn,
    html body a.btn,
    html body button.btn,
    html body .uk-button,
    html body .fxt-btn-fill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        padding-top: 12px !important;
        padding-bottom: 14px !important;
        /* Optical adjustment for 'Outfit' baseline */
    }

    /* 2. Form Inputs & Selects */
    html body .form-control,
    html body input[type="text"],
    html body input[type="password"],
    html body input[type="email"],
    html body input[type="number"],
    html body select {
        display: flex !important;
        align-items: center !important;
        line-height: normal !important;
        padding-top: 8px !important;
        padding-bottom: 10px !important;
        /* Optical adjustment */
    }

    /* Fix height restrictions forcing text down */
    html body select {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* 3. Navigation Items & Dropdowns */
    html body .nav-link,
    html body .navbar-nav li a,
    html body .uk-navbar-nav>li>a,
    html body .dropdown-item,
    html body .uk-dropdown-nav>li>a {
        display: flex !important;
        align-items: center !important;
        line-height: 1.2 !important;
    }

    /* 4. Badges and Alerts */
    html body .badge,
    html body .alert,
    html body .uk-alert {
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1 !important;
        padding-bottom: calc(0.5rem + 2px) !important;
        /* Bump text slightly up optically */
    }

    html body .alert,
    html body .uk-alert {
        display: flex !important;
    }

    /* 5. Tables */
    html body table th,
    html body table td,
    html body .uk-table th,
    html body .uk-table td {
        vertical-align: middle !important;
    }

    /* 6. Dashboard Widgets / Cards */
    html body .card-title,
    html body .uk-card-title,
    html body .pricing .title {
        display: flex !important;
        align-items: center !important;
        line-height: 1.2 !important;
    }
}

/* ==========================================================================
   Mobile Header & Navigation Overrides
   ========================================================================== */
@media (max-width: 1024px) {

    /* --- Header Bar --- */
    #header,
    #header.header-compact {
        height: 56px !important;
        line-height: 56px !important;
        position: relative !important;
        z-index: 999999999 !important;
        /* DO NOT set overflow:visible here – the template's JS
           uses overflow:hidden on #mainMenu to animate the
           slide-down panel. Forcing visible breaks the menu. */
    }

    #header .header-inner,
    #header #header-wrap {
        height: 56px !important;
        /* overflow is intentionally left as template default */
    }

    /* --- Logo --- */
    #header #logo {
        height: 56px !important;
    }

    #header #logo a>img {
        height: 56px !important;
        max-height: 38px !important;
        padding: 9px 0 !important;
    }

    #header #logo .logo-default img,
    #header #logo .logo-dark img {
        max-width: 160px !important;
        height: 38px !important;
    }

    /* --- Hamburger trigger --- */
    #mainMenu-trigger {
        height: 56px !important;
        position: relative !important;
        opacity: 1 !important;
        visibility: visible !important;
        z-index: 1 !important;
    }

    /* Hamburger icon color */
    html body #mainMenu-trigger a.lines-button span.lines,
    html body #mainMenu-trigger a.lines-button span.lines::before,
    html body #mainMenu-trigger a.lines-button span.lines::after {
        background-color: var(--gold) !important;
        background: var(--gold) !important;
    }

    /* --- Mobile Main Menu Panel ---
       The template controls the open/close via:
         • max-height: 0 / animated min-height  (JS)
         • overflow: hidden  (CSS default)
         • class "menu-animate" toggles nav opacity/transform
       We MUST NOT override overflow or max-height here.
    */
    html body #mainMenu {
        background-color: var(--black-card) !important;
        z-index: 999999998 !important;
        width: 100% !important;
    }

    html body #mainMenu .container {
        background-color: var(--black-card) !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    html body #mainMenu nav {
        background-color: var(--black-card) !important;
        width: 100% !important;
    }

    /* Force block layout on mobile (undo the desktop flex) */
    html body #mainMenu nav > ul {
        display: block !important;
        float: none !important;
        width: 100% !important;
        background-color: var(--black-card) !important;
    }

    /* --- Menu items --- */
    html body #mainMenu nav ul li {
        display: block !important;
        float: none !important;
        clear: both !important;
        background-color: var(--black-card) !important;
        border-bottom: 1px solid rgba(197, 160, 89, 0.1) !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    html body #mainMenu nav ul li a {
        display: block !important;
        color: var(--white) !important;
        background-color: transparent !important;
        font-size: 13px !important;
        padding: 12px 20px !important;
        line-height: 1.5 !important;
    }

    /* Remove the underline animation on mobile */
    html body #header #mainMenu nav>ul>li>a::after {
        display: none !important;
    }

    html body #mainMenu nav ul li a:hover,
    html body #mainMenu nav ul li.hover-active>a,
    html body #mainMenu nav ul li.current>a,
    html body #mainMenu nav ul li.active>a {
        color: var(--gold) !important;
    }

    /* --- Mobile Dropdown Submenus --- */
    html body #mainMenu nav ul li.dropdown ul.dropdown-menu {
        background-color: var(--black) !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        position: static !important;
        padding-left: 10px !important;
    }

    html body #mainMenu nav ul li.dropdown ul.dropdown-menu li {
        background-color: var(--black) !important;
        border-bottom: none !important;
    }

    html body #mainMenu nav ul li.dropdown ul.dropdown-menu li a {
        color: var(--gray-light) !important;
        background-color: transparent !important;
        padding-left: 30px !important;
        font-size: 12px !important;
    }

    html body #mainMenu nav ul li.dropdown ul.dropdown-menu li a:hover {
        color: var(--gold) !important;
        background-color: rgba(197, 160, 89, 0.05) !important;
    }

    /* Dropdown arrow color */
    html body #mainMenu nav ul li.dropdown .dropdown-arrow,
    html body #mainMenu nav ul li.dropdown::before {
        color: var(--gold) !important;
    }

    /* --- Mobile CTA button --- */
    html body #mainMenu nav ul li.gip-cta-li {
        margin: 10px 15px !important;
        display: block !important;
    }

    html body #mainMenu nav ul li.gip-cta-li .gip-header-cta {
        display: block !important;
        text-align: center !important;
        padding: 12px 20px !important;
        border-radius: 6px !important;
    }
}

/* Extra small mobile adjustments */
@media (max-width: 480px) {

    #header,
    #header.header-compact {
        height: 52px !important;
        line-height: 52px !important;
    }

    #header .header-inner,
    #header #header-wrap {
        height: 52px !important;
    }

    #header #logo {
        height: 52px !important;
    }

    #header #logo a>img {
        height: 52px !important;
        max-height: 34px !important;
    }

    #header #logo .logo-default img,
    #header #logo .logo-dark img {
        max-width: 140px !important;
        height: 34px !important;
    }

    #mainMenu-trigger {
        height: 52px !important;
    }
}

/* ==========================================================================
   Floating Widgets & Hero Slider Stacking Context Fixes
   ========================================================================== */

/* Ensure the hero/slider area does not clip fixed widgets */
.hero-section, .inspiro-slider {
    overflow: visible !important;
}

/* Fix slider negative margin/offset bug pulling sections under it */
html body #slider,
html body .inspiro-slider {
    top: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Ensure TradingView ticker tape section sits nicely below slider */
.tradingview-widget-container {
    z-index: 10 !important;
    position: relative !important;
}

/* Guarantee floating widgets are always above all page content and visible immediately */
#wa-btn-wrapper,
#wa-widget-wrapper,
.smartsupp-widget,
#smartsupp-widget-container,
iframe[name="smartsupp-widget"],
.goog-te-banner-frame,
#scrollTop {
    position: fixed !important;
    z-index: 999999999 !important;
    overflow: visible !important;
}

.goog-te-menu-frame,
.goog-te-menu2-frame,
.goog-te-menu,
.goog-te-menu2,
body > .skiptranslate,
body > iframe.skiptranslate,
.skiptranslate iframe,
.VIpgJd-Zvi9od-aZ2wEe-wOHMyf,
.VIpgJd-Zvi9od-aZ2wEe-wOHMyf-ti6hGc,
.VIpgJd-Zvi9od-xl07Ob-OEVmcd {
    z-index: 999999999 !important;
}
/* Ensure WhatsApp widget button is always visible */
#wa-btn-wrapper {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    right: auto !important;
    z-index: 999999999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure WhatsApp widget chat window stays fixed and on top */
#wa-widget-wrapper {
    position: fixed !important;
    z-index: 999999999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* -----------------------------------------------------------------------
   GTranslate Float Widget Positioning
   Sits above the WhatsApp button (WhatsApp is at bottom:20px, ~60px tall)
   so GTranslate base is bottom:90px to clear it.
----------------------------------------------------------------------- */
.gtranslate_wrapper {
    position: fixed !important;
    bottom: 90px !important;
    left: 10px !important;
    right: auto !important;
    z-index: 999999998 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* The actual injected float switcher element */
.gt_float_switcher {
    position: fixed !important;
    bottom: 90px !important;
    left: 10px !important;
    right: auto !important;
    z-index: 999999998 !important;
    transform: scale(0.78) !important;
    transform-origin: bottom left !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure the dropdown/flag list opens upward and is visible */
.gt_float_switcher .gt-selected,
.gt_float_switcher .gt-lang-code,
.gt_float_switcher ul {
    z-index: 999999999 !important;
}