body {
    background-color: #0b1727;
}

body {
    font-family: 'Open Sans', 'Helvetica', 'Arial', sans-serif;
}

body, footer:not(.bg--primary):not(.bg--dark) a {
    color: #ffffff;
}

.public-search-page .searchResults h6 a, a, .tabs li.active .tab__title span, .tabs li.active .tab__title, .public-search-page .searchResults .resultUrl {
    color: #17a2b8;
}

.public-search-page .searchResults h6 a:hover, a:hover {
    color: #0d6efd;
}

.lead {
    color: #8f8f8f;
}

.bg--secondary {
    background: #fafafa;
}

section:not(.imagebg):not([class*='bg-']) + section.bg--secondary, section.bg--secondary:not(.imagebg) + section:not(.imagebg):not([class*='bg-']) {
    border-top: 1px solid #ebebeb;
}

.menu-horizontal > li > a, .menu-horizontal > li > span, .menu-horizontal > li > .modal-instance > .modal-trigger, .dropdown .dropdown__content:not([class='bg--dark']) .menu-vertical a, .menu-horizontal > li > a:hover, .menu-horizontal > li > span:hover, .menu-horizontal > li > .modal-instance > .modal-trigger:hover {
    color: #17a2b8;
}

.dropdown .dropdown__content:not([class*='bg-']) {
    background: #ffffff;
}

a.btn--primary, .btn--primary:visited, .btn--primary-1, .btn--primary-1:visited, button.btn.btn--primary, input[type="submit"].btn.btn--primary {
    background: #17a2b8;
}

a.btn--primary, .btn--primary:visited, .btn--primary-1, .btn--primary-1:visited, button.btn.btn--primary, input[type="submit"].btn.btn--primary {
    color: #ffffff;
}

a.btn--primary, .btn--primary:visited, .btn--primary-1, .btn--primary-1:visited, button.btn.btn--primary, input[type="submit"].btn.btn--primary {
    border-color: #4a90e2;
}

a.btn--primary:hover, .btn--primary-1:hover, button.btn.btn--primary:hover, input[type="submit"].btn.btn--primary:hover {
    background: #609de6;
}

.btn--primary:hover, .btn--primary-1:hover, button.btn.btn--primary:hover, input[type="submit"].btn.btn--primary:hover {
    border-color: #609de6;
}

.btn:not([class*="primary"]) .btn__text, .btn i {
    color: #ffffff;
}

.btn:not([class*="primary"]) {
    border-color: #d3d3d3;
}

.btn:not([class*="primary"]):hover {
    border-color: #252525;
}

h1, .h1 {
    color: #ffffff;
}

h2, .h2 {
    color: #17a2b8;
}

h3, .h3 {
    color: #17a2b8;
}

h4, .h4 {
    color: #17a2b8;
}

h5, .h5 {
    color: #17a2b8;
}

h6, .h6 {
    color: #17a2b8;
}

input[type], textarea, select {
    background: #fcfcfc;
}

input[type], textarea, select {
    border: 1px solid #ececec;
}

.boxed:not([class*='bg-']) {
    background: #ffffff;
}

.boxed.boxed--border {
    border: 1px solid #ececec;
}

.table--alternate-row tbody tr:nth-child(odd) {
    background: rgba(255,255,255,0);
}

.table--alternate-row tbody tr:nth-child(even) {
    background: #fafafa;
}

.accordion-1 li.active .accordion__title, .paging_full_numbers .paginate_active {
    border: 1px solid #4a90e2; background: #4a90e2;;
}


<style>
/* 1. Force the Header to Deep Slate */
#header, .navbar, .navbar-default, .top-header {
    background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important;
    border: none !important;
}

/* Ensure all header text and links are forced white */
#header a, .navbar-default .navbar-nav>li>a, .navbar-brand {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* 2. Force Buttons to be Rounded and Modern */
.btn, .btn-primary, .btn-success, .btn-info {
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* 3. Soften the main content boxes and pricing tables */
.panel, .panel-default, .x_panel, .pricing-table {
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

.panel-heading {
    background-color: transparent !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

/* 4. Nuclear Homepage Text Fix */
div[class*="banner"] h1, 
div[class*="banner"] p, 
div[class*="hero"] h1, 
div[class*="hero"] p, 
div[class*="intro"] h1, 
div[class*="intro"] p {
    color: #0f2027 !important;
    text-shadow: none !important;
}

/* Force override any specific white-text utility classes the theme is using */
.text-white {
    color: #0f2027 !important;
}

/* 5. Absolute override for Vaulex logo */
.bar .logo,
.bar__module img.logo,
.bar__module img.logo-dark,
.bar__module img.logo-light {
    max-height: 80px !important;
    height: 80px !important;
    max-width: none !important;
}

/* 6. Make the Hero Register Button Pop */
section.homepage-section a.btn.type--uppercase {
    background-color: #0ea5e9 !important; 
    border-color: #0ea5e9 !important;
    color: #ffffff !important;
    padding: 12px 30px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.4) !important;
    transition: all 0.3s ease !important;
}

/* 7. Fix the Terrible Hover State */
section.homepage-section a.btn.type--uppercase:hover {
    background-color: #0284c7 !important; 
    border-color: #0284c7 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 15px rgba(2, 132, 199, 0.6) !important;
    transform: translateY(-2px) !important; 
}

/* 8. Style ALL Sign Up / Register text links in the main body as buttons */
.switchable__text a[href*="register"],
.feature__body a[href*="register"],
section.text-center a[href*="register"] {
    display: inline-block !important;
    background-color: #0ea5e9 !important; 
    color: #ffffff !important;
    padding: 12px 30px !important;
    font-size: 15px !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.4) !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important; 
    margin-top: 15px !important;
}

/* 9. Hover effect for ALL these new buttons */
.switchable__text a[href*="register"]:hover,
.feature__body a[href*="register"]:hover,
section.text-center a[href*="register"]:hover {
    background-color: #0284c7 !important; 
    color: #ffffff !important;
    box-shadow: 0 6px 15px rgba(2, 132, 199, 0.6) !important;
    transform: translateY(-2px) !important; 
}

/* 10. Absolute Nuke for the Footer Link */
footer.text-center ul.list-inline a[href*="register"] {
    background: transparent !important; 
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #0ea5e9 !important; 
    margin: 0 !important;
    font-size: inherit !important;
    display: inline !important;
}

/* 11. Remove hover lift from the footer link */
footer.text-center ul.list-inline a[href*="register"]:hover {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    color: #ffffff !important; 
}

/* 10. Hide the API link (Targeting its exact position as the 2nd to last link) */
footer ul.list-inline li:nth-last-child(2) {
    display: none !important;
}

/* 11. Safely obliterate ONLY the MFScripts & YetiShare text and links */
footer a[href*="yetishare.com"],
footer a[href*="mfscripts.com"],
footer a[href*="yetishare.com"] + span.type--fine-print {
    display: none !important;
}

/* 12. Premium Dropdown Menu Styling (Width Cap Removed) */
.dropdown__content {
    background-color: #0f172a !important; 
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    padding: 10px 0 !important;
    width: max-content !important; 
    max-width: none !important;
    min-width: 320px !important; 
}

/* 13. Dropdown Links Styling (No Wrap) */
.dropdown__content .menu-vertical li a {
    color: #cbd5e1 !important; 
    padding: 12px 20px !important;
    display: block !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important; 
}

/* 14. Premium Hover Effect for Dropdown Links */
.dropdown__content .menu-vertical li a:hover {
    background-color: rgba(14, 165, 233, 0.1) !important; 
    color: #0ea5e9 !important; 
    padding-left: 26px !important; 
}

/* 15. Premium Login Alert Panel */
.alert.bg--error {
    background-color: rgba(14, 165, 233, 0.1) !important; 
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    border-radius: 8px !important;
}
.alert.bg--error i {
    color: #0ea5e9 !important; 
}
.alert__body {
    color: #cbd5e1 !important; 
    font-weight: 500 !important;
}

/* 16. WebDAV Table Headers */
table.rewardsTable thead th {
    background-color: #0f172a !important; 
    color: #0ea5e9 !important; 
    border: none !important;
    border-bottom: 2px solid rgba(14, 165, 233, 0.3) !important;
    padding: 15px !important;
    font-weight: bold !important;
}

/* 17. WebDAV Table Body & Rows */
table.rewardsTable tbody tr {
    background-color: transparent !important; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
table.rewardsTable tbody tr:nth-child(even),
table.rewardsTable.table--alternate-row tbody tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.02) !important; 
}
table.rewardsTable tbody td {
    color: #cbd5e1 !important; 
    padding: 15px !important;
    background: transparent !important; 
    border: none !important;
}

/* 18. WebDAV Table Links */
table.rewardsTable tbody td a {
    color: #0ea5e9 !important;
    font-weight: bold !important;
    text-decoration: none !important;
}
table.rewardsTable tbody td a:hover {
    color: #0284c7 !important;
    text-decoration: underline !important;
}

/* 19. Hide the outdated phone image on the WebDAV page */
img[src*="webdav_android_phone.png"] {
    display: none !important;
}

/* 20. Hide the browser extension preview image */
img[src*="browser_extention_preview.png"] {
    display: none !important;
}

/* 21. Pricing Package Boxes */
.pricing-1.boxed {
    background-color: rgba(15, 23, 42, 0.6) !important; 
    border: 1px solid rgba(14, 165, 233, 0.2) !important; 
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

/* 22. Pricing Box Text & Features */
.pricing-1.boxed h3, 
.pricing-1.boxed .h2, 
.pricing-1.boxed .type--fine-print,
.pricing-1 .checkmark + span {
    color: #cbd5e1 !important; 
}

/* 23. Account Benefits Boxes (Bottom Row) */
.feature.boxed {
    background-color: rgba(15, 23, 42, 0.6) !important; 
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 12px !important;
}

/* 24. Account Benefits Text */
.feature.boxed h4 {
    color: #0ea5e9 !important; 
    font-weight: bold !important;
    margin-bottom: 15px !important;
}
.feature.boxed ul li {
    color: #cbd5e1 !important; 
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important; 
}
.feature.boxed ul li:last-child {
    border-bottom: none !important; 
}

/* 25. Checkmark Icon Colour Fix */
.checkmark {
    background-color: #0ea5e9 !important; 
}

/* 26. Hide the 'Popular' badge on pricing tables */
.pricing .label {
    display: none !important;
}

/* 27. Centre the text inside the Enterprise Advantage boxes */
.vaulex-premium-features .feature.boxed {
    text-align: center !important;
}

/* 28. Make the storage capacity line bold and larger */
.pricing-1 ul li:first-child span:not(.checkmark) {
    font-weight: 700 !important;
    font-size: 18px !important; 
    color: #ffffff !important; 
}

/* 29. Checkout Page (pricing-3) HIGH CONVERSION OVERRIDES - Clean & Premium */
.pricing-3 {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important; /* Rich, dark background */
    border: 1px solid rgba(255, 255, 255, 0.05) !important; /* Barely visible side borders */
    border-top: 4px solid #0ea5e9 !important; /* The Premium Top-Accent Bar */
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important; 
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

/* Subtle glowing lift effect on hover */
.pricing-3:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(14, 165, 233, 0.15) !important;
    border-color: rgba(14, 165, 233, 0.4) !important; 
}

/* Ensure the top header of the checkout box matches */
.pricing-3 .pricing__head.bg--secondary {
    background-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding-top: 30px !important;
}

/* Fix text colours in the checkout boxes */
.pricing-3 .h1,
.pricing-3 .type--fine-print,
.pricing-3 ul li span {
    color: #cbd5e1 !important;
}

/* Fix the price styling on the checkout page */
.pricing-3 .h1 {
    font-weight: 700 !important;
    color: #ffffff !important;
}

/* Darker bottom section for the payment gateway */
.pricing-3 .gateway-box-wrapper {
    background-color: rgba(15, 23, 42, 0.8) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 20px !important;
}

/* 30. Force Stripe Image into a Checkout Button */
.vaulex-checkout-btn a {
    display: block !important;
    background-color: #0ea5e9 !important; 
    color: #ffffff !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4) !important;
    transition: all 0.3s ease !important;
    letter-spacing: 0.5px !important;
}

.vaulex-checkout-btn a:hover {
    background-color: #0284c7 !important; 
    box-shadow: 0 8px 25px rgba(14, 165, 233, 0.6) !important;
    transform: translateY(-2px) !important;
}

.vaulex-checkout-btn a img {
    opacity: 0 !important;
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
    z-index: 1 !important; 
}

.vaulex-checkout-btn a::before {
    content: "Complete Purchase" !important;
    position: relative !important;
    z-index: 2 !important; 
    display: block !important;
    width: 100% !important;
}

/* 31. Clean, Minimalist Checkout Plan Titles */
.pricing-3 .pricing__head.bg--secondary h5 {
    background-color: transparent !important; 
    color: #0ea5e9 !important; /* Soft Cyan text */
    padding: 0 !important;
    display: block !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    margin-bottom: 10px !important; 
    box-shadow: none !important;
    letter-spacing: 1.5px !important;
}

/* 32. Homepage Hero Buttons & Responsiveness */
.vaulex-home-btn {
    display: inline-block !important;
    padding: 18px 35px !important;
    border-radius: 8px !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
    text-transform: uppercase !important;
    margin: 10px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.vaulex-home-btn.primary {
    background-color: #0ea5e9 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4) !important;
    border: 2px solid #0ea5e9 !important;
}

.vaulex-home-btn.primary:hover {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6) !important;
    color: #ffffff !important;
}

.vaulex-home-btn.secondary {
    background-color: transparent !important;
    color: #0ea5e9 !important;
    border: 2px solid #0ea5e9 !important;
}

.vaulex-home-btn.secondary:hover {
    background-color: rgba(14, 165, 233, 0.1) !important;
    color: #0ea5e9 !important;
}

/* Ensure perfect mobile scaling for the massive hero text */
@media (max-width: 768px) {
    .vaulex-hero h1 { font-size: 2.2rem !important; margin-top: 20px !important; }
    .vaulex-hero p { font-size: 1.1rem !important; }
    .vaulex-home-btn { display: block !important; margin: 15px auto !important; max-width: 300px; }
}

/* Force the File Manager logo to display as pure white */
.page-container .navbar .navbar-brand img {
    filter: brightness(0) invert(1);
    -webkit-filter: brightness(0) invert(1);
}

/* Force the mobile hamburger menu icon to be white */
.hamburger-toggle i {
    color: #ffffff !important;
}

/* Force tables to match your new Dark Mode */
.table--alternate-row {
    background-color: #0f172a !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
    color: #cbd5e1 !important;
}

.table--alternate-row td, 
.table--alternate-row th {
    background-color: #0f172a !important;
    border-top: 1px solid rgba(14, 165, 233, 0.1) !important;
    color: #cbd5e1 !important;
}

/* Ensure table headers stand out */
.table--alternate-row thead th {
    background-color: #1e293b !important;
    color: #0ea5e9 !important;
    font-weight: 700;
}

/* Dark Mode Overrides for Account Settings Page */
.account-edit .panel-primary > .panel-heading {
    background-color: #1e293b !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
    color: #ffffff !important;
}

.account-edit .panel-primary {
    background-color: #0f172a !important;
    border-color: rgba(14, 165, 233, 0.3) !important;
}

.account-edit .form-control {
    background-color: #1e293b !important;
    border: 1px solid rgba(14, 165, 233, 0.2) !important;
    color: #ffffff !important;
}

.account-edit .nav-tabs > li.active > a, 
.account-edit .nav-tabs > li.active > a:hover {
    background-color: #0f172a !important;
    border-top: 2px solid #0ea5e9 !important;
    color: #0ea5e9 !important;
}

.account-edit .nav-tabs > li > a {
    color: #94a3b8 !important;
}

.account-edit .tile-stats {
    background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%) !important;
    border: 1px solid rgba(14, 165, 233, 0.2);
}

.account-edit .tile-stats .num {
    color: #ffffff !important;
}

.account-edit .tile-stats h3 {
    color: #94a3b8 !important;
}

/* 33. The "Dark Slate" Buttons for the First Upgrade Page (Select Billing Cycle) */
.pricing-1.boxed .btn, 
.pricing-1.boxed a.btn {
    background-color: #1e293b !important; /* Sleek, dark slate background */
    color: #0ea5e9 !important; /* Cyan text */
    border: 1px solid rgba(14, 165, 233, 0.3) !important; /* Very subtle cyan border */
    font-weight: 800 !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
    padding: 15px 20px !important;
}

/* Nuke any stray spans causing inner borders */
.pricing-1.boxed .btn span, 
.pricing-1.boxed a.btn span {
    border: none !important;
    padding: 0 !important;
    display: inline !important;
}

/* High-contrast Cyan hover effect for the dark buttons */
.pricing-1.boxed .btn:hover, 
.pricing-1.boxed a.btn:hover {
    background-color: #0ea5e9 !important; /* Fills with solid cyan */
    color: #ffffff !important; /* Text turns white */
    border-color: #0ea5e9 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(14, 165, 233, 0.4) !important;
}

/* ==========================================================================
   PREMIUM VAULEX UPLOAD BUTTON STYLING
   ========================================================================== */

/* Target both the main Upload button and the dropdown arrow */
.upload-button-wrapper .btn-green,
.upload-button-wrapper .btn-green.dropdown-toggle {
    background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4) !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* Add a delicate separator line between the main button and the arrow */
.upload-button-wrapper .btn-green.dropdown-toggle {
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* The Hover Effect: Brighter gradient, bigger glow, slight lift */
.upload-button-wrapper .btn-green:hover,
.upload-button-wrapper .btn-green.dropdown-toggle:hover {
    background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
    box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6) !important;
    transform: translateY(-1px) !important;
}

/* Active/Click State */
.upload-button-wrapper .btn-green:active,
.upload-button-wrapper .btn-green.dropdown-toggle:active {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 10px rgba(14, 165, 233, 0.4) !important;
}

/* ==========================================================================
   VAULEX PRO - PREMIUM DARK MODE DROPDOWN MENUS
   ========================================================================== */

/* The Dropdown Container */
ul.navbar-nav li.has-sub ul,
.navbar-nav .dropdown-menu {
    background-color: #1e293b !important;
    border: 1px solid rgba(14, 165, 233, 0.3) !important;
    border-top: 3px solid #0ea5e9 !important;
    border-radius: 0 0 10px 10px !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
    padding: 5px 0 !important;
    min-width: 260px !important; /* Gives the text plenty of breathing room */
}

/* The Links Inside */
ul.navbar-nav li.has-sub ul li a,
.navbar-nav .dropdown-menu > li > a {
    color: #cbd5e1 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    padding: 12px 20px !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: block !important;
}

/* Remove the divider line from the very last item */
ul.navbar-nav li.has-sub ul li:last-child a,
.navbar-nav .dropdown-menu > li:last-child > a {
    border-bottom: none !important;
}

/* The Hover State (Slight indent, cyan glow) */
ul.navbar-nav li.has-sub ul li a:hover,
.navbar-nav .dropdown-menu > li > a:hover {
    background-color: rgba(14, 165, 233, 0.1) !important;
    color: #0ea5e9 !important;
    padding-left: 28px !important; /* Premium slide-in effect */
    text-decoration: none !important;
}

/* ==========================================================================
   VAULEX PRO - PREMIUM MOBILE MENU STYLING (FRONT-END & UPGRADE PAGES)
   ========================================================================== */

@media (max-width: 991px) {
    /* The Mobile Menu Wrapper/Background */
    .nav-container .bar,
    .nav-container .dropdown__container,
    .nav-container .menu-horizontal {
        background-color: #1e293b !important;
    }

    /* Fix the dropdown container specifically */
    .nav-container .dropdown__container {
        border-bottom: 3px solid #0ea5e9 !important;
        box-shadow: 0 15px 30px rgba(0,0,0,0.5) !important;
        padding: 10px 0 !important;
    }

    /* Mobile Menu Links */
    .nav-container .menu-horizontal > li > a,
    .nav-container .menu-horizontal > li > span.dropdown__trigger {
        color: #cbd5e1 !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 1px !important;
        padding: 15px 25px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        display: block !important;
        opacity: 1 !important;
        transition: all 0.3s ease !important;
    }

    /* Hover / Tap State (Slide-in effect) */
    .nav-container .menu-horizontal > li > a:hover,
    .nav-container .menu-horizontal > li > span.dropdown__trigger:hover {
        color: #0ea5e9 !important;
        background-color: rgba(14, 165, 233, 0.1) !important;
        padding-left: 30px !important; 
        text-decoration: none !important;
    }

    /* Hide the border on the last standard link */
    .nav-container .menu-horizontal > li:last-child > a {
        border-bottom: none !important;
    }

    /* The 'Get Started' Button in Mobile View */
    .nav-container .menu-horizontal > li > a.btn {
        background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
        color: #ffffff !important;
        border: none !important;
        border-radius: 8px !important;
        margin: 15px 20px !important;
        text-align: center !important;
        padding: 15px !important;
        box-shadow: 0 4px 15px rgba(14, 165, 233, 0.4) !important;
        display: block !important;
    }

    /* Button Tap State */
    .nav-container .menu-horizontal > li > a.btn:hover {
        background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%) !important;
        box-shadow: 0 6px 20px rgba(14, 165, 233, 0.6) !important;
        padding-left: 15px !important; /* Stops the button itself from sliding */
    }

    /* Fix the Hamburger Icon Colour */
    .nav-container .bar .hamburger-toggle i {
        background-color: #0ea5e9 !important;
    }
}
</style>