html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  font-family: sans-serif;
}

body {
  margin: 0;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

audio, canvas, progress, video {
  vertical-align: baseline;
  display: inline-block;
}

audio:not([controls]) {
  height: 0;
  display: none;
}

[hidden], template {
  display: none;
}

a {
  background-color: #0000;
}

a:active, a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b, strong {
  font-weight: bold;
}

dfn {
  font-style: italic;
}

h1 {
  margin: .67em 0;
  font-size: 2em;
}

mark {
  color: #000;
  background: #ff0;
}

small {
  font-size: 80%;
}

sub, sup {
  vertical-align: baseline;
  font-size: 75%;
  line-height: 0;
  position: relative;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code, kbd, pre, samp {
  font-family: monospace;
  font-size: 1em;
}

button, input, optgroup, select, textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button, select {
  text-transform: none;
}

button, html input[type="button"], input[type="reset"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled], html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

input[type="search"] {
  -webkit-appearance: none;
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td, th {
  padding: 0;
}

@font-face {
  font-family: webflow-icons;
  src: url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format("truetype");
  font-weight: normal;
  font-style: normal;
}

[class^="w-icon-"], [class*=" w-icon-"] {
  speak: none;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  font-family: webflow-icons !important;
}

.w-icon-slider-right:before {
  content: "";
}

.w-icon-slider-left:before {
  content: "";
}

.w-icon-nav-menu:before {
  content: "";
}

.w-icon-arrow-down:before, .w-icon-dropdown-toggle:before {
  content: "";
}

.w-icon-file-upload-remove:before {
  content: "";
}

.w-icon-file-upload-icon:before {
  content: "";
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  color: #333;
  background-color: #fff;
  min-height: 100%;
  margin: 0;
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

img {
  vertical-align: middle;
  max-width: 100%;
  display: inline-block;
}

html.w-mod-touch * {
  background-attachment: scroll !important;
}

.w-block {
  display: block;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.w-clearfix:before, .w-clearfix:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-clearfix:after {
  clear: both;
}

.w-hidden {
  display: none;
}

.w-button {
  color: #fff;
  line-height: inherit;
  cursor: pointer;
  background-color: #3898ec;
  border: 0;
  border-radius: 0;
  padding: 9px 15px;
  text-decoration: none;
  display: inline-block;
}

input.w-button {
  -webkit-appearance: button;
}

html[data-w-dynpage] [data-w-cloak] {
  color: #0000 !important;
}

.w-code-block {
  margin: unset;
}

pre.w-code-block code {
  all: inherit;
}

.w-optimization {
  display: contents;
}

.w-webflow-badge, .w-webflow-badge > img {
  box-sizing: unset;
  width: unset;
  height: unset;
  max-height: unset;
  max-width: unset;
  min-height: unset;
  min-width: unset;
  margin: unset;
  padding: unset;
  float: unset;
  clear: unset;
  border: unset;
  border-radius: unset;
  background: unset;
  background-image: unset;
  background-position: unset;
  background-size: unset;
  background-repeat: unset;
  background-origin: unset;
  background-clip: unset;
  background-attachment: unset;
  background-color: unset;
  box-shadow: unset;
  transform: unset;
  direction: unset;
  font-family: unset;
  font-weight: unset;
  color: unset;
  font-size: unset;
  line-height: unset;
  font-style: unset;
  font-variant: unset;
  text-align: unset;
  letter-spacing: unset;
  -webkit-text-decoration: unset;
  text-decoration: unset;
  text-indent: unset;
  text-transform: unset;
  list-style-type: unset;
  text-shadow: unset;
  vertical-align: unset;
  cursor: unset;
  white-space: unset;
  word-break: unset;
  word-spacing: unset;
  word-wrap: unset;
  transition: unset;
}

.w-webflow-badge {
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 0 1px #0000001a, 0 1px 3px #0000001a;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
  color: #aaadb0 !important;
  overflow: unset !important;
  background-color: #fff !important;
  border-radius: 3px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 6px !important;
  font-size: 12px !important;
  line-height: 14px !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: fixed !important;
  inset: auto 12px 12px auto !important;
  transform: none !important;
}

.w-webflow-badge > img {
  position: unset;
  visibility: unset !important;
  opacity: 1 !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 10px;
  font-weight: bold;
}

h1 {
  margin-top: 20px;
  font-size: 38px;
  line-height: 44px;
}

h2 {
  margin-top: 20px;
  font-size: 32px;
  line-height: 36px;
}

h3 {
  margin-top: 20px;
  font-size: 24px;
  line-height: 30px;
}

h4 {
  margin-top: 10px;
  font-size: 18px;
  line-height: 24px;
}

h5 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 20px;
}

h6 {
  margin-top: 10px;
  font-size: 12px;
  line-height: 18px;
}

p {
  margin-top: 0;
  margin-bottom: 10px;
}

blockquote {
  border-left: 5px solid #e2e2e2;
  margin: 0 0 10px;
  padding: 10px 20px;
  font-size: 18px;
  line-height: 22px;
}

figure {
  margin: 0 0 10px;
}

figcaption {
  text-align: center;
  margin-top: 5px;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}

.w-list-unstyled {
  padding-left: 0;
  list-style: none;
}

.w-embed:before, .w-embed:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-embed:after {
  clear: both;
}

.w-video {
  width: 100%;
  padding: 0;
  position: relative;
}

.w-video iframe, .w-video object, .w-video embed {
  border: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

button, [type="button"], [type="reset"] {
  cursor: pointer;
  -webkit-appearance: button;
  border: 0;
}

.w-form {
  margin: 0 0 15px;
}

.w-form-done {
  text-align: center;
  background-color: #ddd;
  padding: 20px;
  display: none;
}

.w-form-fail {
  background-color: #ffdede;
  margin-top: 10px;
  padding: 10px;
  display: none;
}

label {
  margin-bottom: 5px;
  font-weight: bold;
  display: block;
}

.w-input, .w-select {
  color: #333;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ccc;
  width: 100%;
  height: 38px;
  margin-bottom: 10px;
  padding: 8px 12px;
  font-size: 14px;
  line-height: 1.42857;
  display: block;
}

.w-input::placeholder, .w-select::placeholder {
  color: #999;
}

.w-input:focus, .w-select:focus {
  border-color: #3898ec;
  outline: 0;
}

.w-input[disabled], .w-select[disabled], .w-input[readonly], .w-select[readonly], fieldset[disabled] .w-input, fieldset[disabled] .w-select {
  cursor: not-allowed;
}

.w-input[disabled]:not(.w-input-disabled), .w-select[disabled]:not(.w-input-disabled), .w-input[readonly], .w-select[readonly], fieldset[disabled]:not(.w-input-disabled) .w-input, fieldset[disabled]:not(.w-input-disabled) .w-select {
  background-color: #eee;
}

textarea.w-input, textarea.w-select {
  height: auto;
}

.w-select {
  background-color: #f3f3f3;
}

.w-select[multiple] {
  height: auto;
}

.w-form-label {
  cursor: pointer;
  margin-bottom: 0;
  font-weight: normal;
  display: inline-block;
}

.w-radio {
  margin-bottom: 5px;
  padding-left: 20px;
  display: block;
}

.w-radio:before, .w-radio:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-radio:after {
  clear: both;
}

.w-radio-input {
  float: left;
  margin: 3px 0 0 -20px;
  line-height: normal;
}

.w-file-upload {
  margin-bottom: 10px;
  display: block;
}

.w-file-upload-input {
  opacity: 0;
  z-index: -100;
  width: .1px;
  height: .1px;
  position: absolute;
  overflow: hidden;
}

.w-file-upload-default, .w-file-upload-uploading, .w-file-upload-success {
  color: #333;
  display: inline-block;
}

.w-file-upload-error {
  margin-top: 10px;
  display: block;
}

.w-file-upload-default.w-hidden, .w-file-upload-uploading.w-hidden, .w-file-upload-error.w-hidden, .w-file-upload-success.w-hidden {
  display: none;
}

.w-file-upload-uploading-btn {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: flex;
}

.w-file-upload-file {
  background-color: #fafafa;
  border: 1px solid #ccc;
  flex-grow: 1;
  justify-content: space-between;
  margin: 0;
  padding: 8px 9px 8px 11px;
  display: flex;
}

.w-file-upload-file-name {
  font-size: 14px;
  font-weight: normal;
  display: block;
}

.w-file-remove-link {
  cursor: pointer;
  width: auto;
  height: auto;
  margin-top: 3px;
  margin-left: 10px;
  padding: 3px;
  display: block;
}

.w-icon-file-upload-remove {
  margin: auto;
  font-size: 10px;
}

.w-file-upload-error-msg {
  color: #ea384c;
  padding: 2px 0;
  display: inline-block;
}

.w-file-upload-info {
  padding: 0 12px;
  line-height: 38px;
  display: inline-block;
}

.w-file-upload-label {
  cursor: pointer;
  background-color: #fafafa;
  border: 1px solid #ccc;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: normal;
  display: inline-block;
}

.w-icon-file-upload-icon, .w-icon-file-upload-uploading {
  width: 20px;
  margin-right: 8px;
  display: inline-block;
}

.w-icon-file-upload-uploading {
  height: 20px;
}

.w-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}

.w-container:before, .w-container:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-container:after {
  clear: both;
}

.w-container .w-row {
  margin-left: -10px;
  margin-right: -10px;
}

.w-row:before, .w-row:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-row:after {
  clear: both;
}

.w-row .w-row {
  margin-left: 0;
  margin-right: 0;
}

.w-col {
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}

.w-col .w-col {
  padding-left: 0;
  padding-right: 0;
}

.w-col-1 {
  width: 8.33333%;
}

.w-col-2 {
  width: 16.6667%;
}

.w-col-3 {
  width: 25%;
}

.w-col-4 {
  width: 33.3333%;
}

.w-col-5 {
  width: 41.6667%;
}

.w-col-6 {
  width: 50%;
}

.w-col-7 {
  width: 58.3333%;
}

.w-col-8 {
  width: 66.6667%;
}

.w-col-9 {
  width: 75%;
}

.w-col-10 {
  width: 83.3333%;
}

.w-col-11 {
  width: 91.6667%;
}

.w-col-12 {
  width: 100%;
}

.w-hidden-main {
  display: none !important;
}

@media screen and (max-width: 991px) {
  .w-container {
    max-width: 728px;
  }

  .w-hidden-main {
    display: inherit !important;
  }

  .w-hidden-medium {
    display: none !important;
  }

  .w-col-medium-1 {
    width: 8.33333%;
  }

  .w-col-medium-2 {
    width: 16.6667%;
  }

  .w-col-medium-3 {
    width: 25%;
  }

  .w-col-medium-4 {
    width: 33.3333%;
  }

  .w-col-medium-5 {
    width: 41.6667%;
  }

  .w-col-medium-6 {
    width: 50%;
  }

  .w-col-medium-7 {
    width: 58.3333%;
  }

  .w-col-medium-8 {
    width: 66.6667%;
  }

  .w-col-medium-9 {
    width: 75%;
  }

  .w-col-medium-10 {
    width: 83.3333%;
  }

  .w-col-medium-11 {
    width: 91.6667%;
  }

  .w-col-medium-12 {
    width: 100%;
  }

  .w-col-stack {
    width: 100%;
    left: auto;
    right: auto;
  }
}

@media screen and (max-width: 767px) {
  .w-hidden-main, .w-hidden-medium {
    display: inherit !important;
  }

  .w-hidden-small {
    display: none !important;
  }

  .w-row, .w-container .w-row {
    margin-left: 0;
    margin-right: 0;
  }

  .w-col {
    width: 100%;
    left: auto;
    right: auto;
  }

  .w-col-small-1 {
    width: 8.33333%;
  }

  .w-col-small-2 {
    width: 16.6667%;
  }

  .w-col-small-3 {
    width: 25%;
  }

  .w-col-small-4 {
    width: 33.3333%;
  }

  .w-col-small-5 {
    width: 41.6667%;
  }

  .w-col-small-6 {
    width: 50%;
  }

  .w-col-small-7 {
    width: 58.3333%;
  }

  .w-col-small-8 {
    width: 66.6667%;
  }

  .w-col-small-9 {
    width: 75%;
  }

  .w-col-small-10 {
    width: 83.3333%;
  }

  .w-col-small-11 {
    width: 91.6667%;
  }

  .w-col-small-12 {
    width: 100%;
  }
}

@media screen and (max-width: 479px) {
  .w-container {
    max-width: none;
  }

  .w-hidden-main, .w-hidden-medium, .w-hidden-small {
    display: inherit !important;
  }

  .w-hidden-tiny {
    display: none !important;
  }

  .w-col {
    width: 100%;
  }

  .w-col-tiny-1 {
    width: 8.33333%;
  }

  .w-col-tiny-2 {
    width: 16.6667%;
  }

  .w-col-tiny-3 {
    width: 25%;
  }

  .w-col-tiny-4 {
    width: 33.3333%;
  }

  .w-col-tiny-5 {
    width: 41.6667%;
  }

  .w-col-tiny-6 {
    width: 50%;
  }

  .w-col-tiny-7 {
    width: 58.3333%;
  }

  .w-col-tiny-8 {
    width: 66.6667%;
  }

  .w-col-tiny-9 {
    width: 75%;
  }

  .w-col-tiny-10 {
    width: 83.3333%;
  }

  .w-col-tiny-11 {
    width: 91.6667%;
  }

  .w-col-tiny-12 {
    width: 100%;
  }
}

.w-widget {
  position: relative;
}

.w-widget-map {
  width: 100%;
  height: 400px;
}

.w-widget-map label {
  width: auto;
  display: inline;
}

.w-widget-map img {
  max-width: inherit;
}

.w-widget-map .gm-style-iw {
  text-align: center;
}

.w-widget-map .gm-style-iw > button {
  display: none !important;
}

.w-widget-twitter {
  overflow: hidden;
}

.w-widget-twitter-count-shim {
  vertical-align: top;
  text-align: center;
  background: #fff;
  border: 1px solid #758696;
  border-radius: 3px;
  width: 28px;
  height: 20px;
  display: inline-block;
  position: relative;
}

.w-widget-twitter-count-shim * {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-inner {
  text-align: center;
  color: #999;
  font-family: serif;
  font-size: 15px;
  line-height: 12px;
  position: relative;
}

.w-widget-twitter-count-shim .w-widget-twitter-count-clear {
  display: block;
  position: relative;
}

.w-widget-twitter-count-shim.w--large {
  width: 36px;
  height: 28px;
}

.w-widget-twitter-count-shim.w--large .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 18px;
}

.w-widget-twitter-count-shim:not(.w--vertical) {
  margin-left: 5px;
  margin-right: 8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large {
  margin-left: 6px;
}

.w-widget-twitter-count-shim:not(.w--vertical):before, .w-widget-twitter-count-shim:not(.w--vertical):after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 0;
}

.w-widget-twitter-count-shim:not(.w--vertical):before {
  border-width: 4px;
  border-color: #75869600 #5d6c7b #75869600 #75869600;
  margin-top: -4px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:before {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -10px;
}

.w-widget-twitter-count-shim:not(.w--vertical):after {
  border-width: 4px;
  border-color: #fff0 #fff #fff0 #fff0;
  margin-top: -4px;
  margin-left: -8px;
}

.w-widget-twitter-count-shim:not(.w--vertical).w--large:after {
  border-width: 5px;
  margin-top: -5px;
  margin-left: -9px;
}

.w-widget-twitter-count-shim.w--vertical {
  width: 61px;
  height: 33px;
  margin-bottom: 8px;
}

.w-widget-twitter-count-shim.w--vertical:before, .w-widget-twitter-count-shim.w--vertical:after {
  content: " ";
  pointer-events: none;
  border: solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  left: 50%;
}

.w-widget-twitter-count-shim.w--vertical:before {
  border-width: 5px;
  border-color: #5d6c7b #75869600 #75869600;
  margin-left: -5px;
}

.w-widget-twitter-count-shim.w--vertical:after {
  border-width: 4px;
  border-color: #fff #fff0 #fff0;
  margin-left: -4px;
}

.w-widget-twitter-count-shim.w--vertical .w-widget-twitter-count-inner {
  font-size: 18px;
  line-height: 22px;
}

.w-widget-twitter-count-shim.w--vertical.w--large {
  width: 76px;
}

.w-background-video {
  color: #fff;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.w-background-video > video {
  object-fit: cover;
  z-index: -100;
  background-position: 50%;
  background-size: cover;
  width: 100%;
  height: 100%;
  margin: auto;
  position: absolute;
  inset: -100%;
}

.w-background-video > video::-webkit-media-controls-start-playback-button {
  -webkit-appearance: none;
  display: none !important;
}

.w-background-video--control {
  background-color: #0000;
  padding: 0;
  position: absolute;
  bottom: 1em;
  right: 1em;
}

.w-background-video--control > [hidden] {
  display: none !important;
}

.w-slider {
  text-align: center;
  clear: both;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  background: #ddd;
  height: 300px;
  position: relative;
}

.w-slider-mask {
  z-index: 1;
  white-space: nowrap;
  height: 100%;
  display: block;
  position: relative;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-slide {
  vertical-align: top;
  white-space: normal;
  text-align: left;
  width: 100%;
  height: 100%;
  display: inline-block;
  position: relative;
}

.w-slider-nav {
  z-index: 2;
  text-align: center;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  height: 40px;
  margin: auto;
  padding-top: 10px;
  position: absolute;
  inset: auto 0 0;
}

.w-slider-nav.w-round > div {
  border-radius: 100%;
}

.w-slider-nav.w-num > div {
  font-size: inherit;
  line-height: inherit;
  width: auto;
  height: auto;
  padding: .2em .5em;
}

.w-slider-nav.w-shadow > div {
  box-shadow: 0 0 3px #3336;
}

.w-slider-nav-invert {
  color: #fff;
}

.w-slider-nav-invert > div {
  background-color: #2226;
}

.w-slider-nav-invert > div.w-active {
  background-color: #222;
}

.w-slider-dot {
  cursor: pointer;
  background-color: #fff6;
  width: 1em;
  height: 1em;
  margin: 0 3px .5em;
  transition: background-color .1s, color .1s;
  display: inline-block;
  position: relative;
}

.w-slider-dot.w-active {
  background-color: #fff;
}

.w-slider-dot:focus {
  outline: none;
  box-shadow: 0 0 0 2px #fff;
}

.w-slider-dot:focus.w-active {
  box-shadow: none;
}

.w-slider-arrow-left, .w-slider-arrow-right {
  cursor: pointer;
  color: #fff;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  width: 80px;
  margin: auto;
  font-size: 40px;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.w-slider-arrow-left [class^="w-icon-"], .w-slider-arrow-right [class^="w-icon-"], .w-slider-arrow-left [class*=" w-icon-"], .w-slider-arrow-right [class*=" w-icon-"] {
  position: absolute;
}

.w-slider-arrow-left:focus, .w-slider-arrow-right:focus {
  outline: 0;
}

.w-slider-arrow-left {
  z-index: 3;
  right: auto;
}

.w-slider-arrow-right {
  z-index: 4;
  left: auto;
}

.w-icon-slider-left, .w-icon-slider-right {
  width: 1em;
  height: 1em;
  margin: auto;
  inset: 0;
}

.w-slider-aria-label {
  clip: rect(0 0 0 0);
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

.w-slider-force-show {
  display: block !important;
}

.w-dropdown {
  text-align: left;
  z-index: 900;
  margin-left: auto;
  margin-right: auto;
  display: inline-block;
  position: relative;
}

.w-dropdown-btn, .w-dropdown-toggle, .w-dropdown-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  white-space: nowrap;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  position: relative;
}

.w-dropdown-toggle {
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  padding-right: 40px;
  display: inline-block;
}

.w-dropdown-toggle:focus {
  outline: 0;
}

.w-icon-dropdown-toggle {
  width: 1em;
  height: 1em;
  margin: auto 20px auto auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
}

.w-dropdown-list {
  background: #ddd;
  min-width: 100%;
  display: none;
  position: absolute;
}

.w-dropdown-list.w--open {
  display: block;
}

.w-dropdown-link {
  color: #222;
  padding: 10px 20px;
  display: block;
}

.w-dropdown-link.w--current {
  color: #0082f3;
}

.w-dropdown-link:focus {
  outline: 0;
}

@media screen and (max-width: 767px) {
  .w-nav-brand {
    padding-left: 10px;
  }
}

.w-lightbox-backdrop {
  cursor: auto;
  letter-spacing: normal;
  text-indent: 0;
  text-shadow: none;
  text-transform: none;
  visibility: visible;
  white-space: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  color: #fff;
  text-align: center;
  z-index: 2000;
  opacity: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-tap-highlight-color: transparent;
  background: #000000e6;
  outline: 0;
  font-family: Helvetica Neue, Helvetica, Ubuntu, Segoe UI, Verdana, sans-serif;
  font-size: 17px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2;
  list-style: disc;
  position: fixed;
  inset: 0;
  -webkit-transform: translate(0);
}

.w-lightbox-backdrop, .w-lightbox-container {
  -webkit-overflow-scrolling: touch;
  height: 100%;
  overflow: auto;
}

.w-lightbox-content {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-view {
  opacity: 0;
  width: 100vw;
  height: 100vh;
  position: absolute;
}

.w-lightbox-view:before {
  content: "";
  height: 100vh;
}

.w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
  height: 86vh;
}

.w-lightbox-frame, .w-lightbox-view:before {
  vertical-align: middle;
  display: inline-block;
}

.w-lightbox-figure {
  margin: 0;
  position: relative;
}

.w-lightbox-group .w-lightbox-figure {
  cursor: pointer;
}

.w-lightbox-img {
  width: auto;
  max-width: none;
  height: auto;
}

.w-lightbox-image {
  float: none;
  max-width: 100vw;
  max-height: 100vh;
  display: block;
}

.w-lightbox-group .w-lightbox-image {
  max-height: 86vh;
}

.w-lightbox-caption {
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: #0006;
  padding: .5em 1em;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-lightbox-embed {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.w-lightbox-control {
  cursor: pointer;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px;
  width: 4em;
  transition: all .3s;
  position: absolute;
  top: 0;
}

.w-lightbox-left {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yMCAwIDI0IDQwIiB3aWR0aD0iMjQiIGhlaWdodD0iNDAiPjxnIHRyYW5zZm9ybT0icm90YXRlKDQ1KSI+PHBhdGggZD0ibTAgMGg1djIzaDIzdjVoLTI4eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDN2MjNoMjN2M2gtMjZ6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==");
  display: none;
  bottom: 0;
  left: 0;
}

.w-lightbox-right {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMjQgNDAiIHdpZHRoPSIyNCIgaGVpZ2h0PSI0MCI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMC0waDI4djI4aC01di0yM2gtMjN6IiBvcGFjaXR5PSIuNCIvPjxwYXRoIGQ9Im0xIDFoMjZ2MjZoLTN2LTIzaC0yM3oiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+");
  display: none;
  bottom: 0;
  right: 0;
}

.w-lightbox-close {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii00IDAgMTggMTciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxNyI+PGcgdHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48cGF0aCBkPSJtMCAwaDd2LTdoNXY3aDd2NWgtN3Y3aC01di03aC03eiIgb3BhY2l0eT0iLjQiLz48cGF0aCBkPSJtMSAxaDd2LTdoM3Y3aDd2M2gtN3Y3aC0zdi03aC03eiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=");
  background-size: 18px;
  height: 2.6em;
  right: 0;
}

.w-lightbox-strip {
  white-space: nowrap;
  padding: 0 1vh;
  line-height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: auto hidden;
}

.w-lightbox-item {
  box-sizing: content-box;
  cursor: pointer;
  width: 10vh;
  padding: 2vh 1vh;
  display: inline-block;
  -webkit-transform: translate3d(0, 0, 0);
}

.w-lightbox-active {
  opacity: .3;
}

.w-lightbox-thumbnail {
  background: #222;
  height: 10vh;
  position: relative;
  overflow: hidden;
}

.w-lightbox-thumbnail-image {
  position: absolute;
  top: 0;
  left: 0;
}

.w-lightbox-thumbnail .w-lightbox-tall {
  width: 100%;
  top: 50%;
  transform: translate(0, -50%);
}

.w-lightbox-thumbnail .w-lightbox-wide {
  height: 100%;
  left: 50%;
  transform: translate(-50%);
}

.w-lightbox-spinner {
  box-sizing: border-box;
  border: 5px solid #0006;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  animation: .8s linear infinite spin;
  position: absolute;
  top: 50%;
  left: 50%;
}

.w-lightbox-spinner:after {
  content: "";
  border: 3px solid #0000;
  border-bottom-color: #fff;
  border-radius: 50%;
  position: absolute;
  inset: -4px;
}

.w-lightbox-hide {
  display: none;
}

.w-lightbox-noscroll {
  overflow: hidden;
}

@media (min-width: 768px) {
  .w-lightbox-content {
    height: 96vh;
    margin-top: 2vh;
  }

  .w-lightbox-view, .w-lightbox-view:before {
    height: 96vh;
  }

  .w-lightbox-group, .w-lightbox-group .w-lightbox-view, .w-lightbox-group .w-lightbox-view:before {
    height: 84vh;
  }

  .w-lightbox-image {
    max-width: 96vw;
    max-height: 96vh;
  }

  .w-lightbox-group .w-lightbox-image {
    max-width: 82.3vw;
    max-height: 84vh;
  }

  .w-lightbox-left, .w-lightbox-right {
    opacity: .5;
    display: block;
  }

  .w-lightbox-close {
    opacity: .8;
  }

  .w-lightbox-control:hover {
    opacity: 1;
  }
}

.w-lightbox-inactive, .w-lightbox-inactive:hover {
  opacity: 0;
}

.w-richtext:before, .w-richtext:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-richtext:after {
  clear: both;
}

.w-richtext[contenteditable="true"]:before, .w-richtext[contenteditable="true"]:after {
  white-space: initial;
}

.w-richtext ol, .w-richtext ul {
  overflow: hidden;
}

.w-richtext .w-richtext-figure-selected.w-richtext-figure-type-video div:after, .w-richtext .w-richtext-figure-selected[data-rt-type="video"] div:after, .w-richtext .w-richtext-figure-selected.w-richtext-figure-type-image div, .w-richtext .w-richtext-figure-selected[data-rt-type="image"] div {
  outline: 2px solid #2895f7;
}

.w-richtext figure.w-richtext-figure-type-video > div:after, .w-richtext figure[data-rt-type="video"] > div:after {
  content: "";
  display: none;
  position: absolute;
  inset: 0;
}

.w-richtext figure {
  max-width: 60%;
  position: relative;
}

.w-richtext figure > div:before {
  cursor: default !important;
}

.w-richtext figure img {
  width: 100%;
}

.w-richtext figure figcaption.w-richtext-figcaption-placeholder {
  opacity: .6;
}

.w-richtext figure div {
  color: #0000;
  font-size: 0;
}

.w-richtext figure.w-richtext-figure-type-image, .w-richtext figure[data-rt-type="image"] {
  display: table;
}

.w-richtext figure.w-richtext-figure-type-image > div, .w-richtext figure[data-rt-type="image"] > div {
  display: inline-block;
}

.w-richtext figure.w-richtext-figure-type-image > figcaption, .w-richtext figure[data-rt-type="image"] > figcaption {
  caption-side: bottom;
  display: table-caption;
}

.w-richtext figure.w-richtext-figure-type-video, .w-richtext figure[data-rt-type="video"] {
  width: 60%;
  height: 0;
}

.w-richtext figure.w-richtext-figure-type-video iframe, .w-richtext figure[data-rt-type="video"] iframe {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.w-richtext figure.w-richtext-figure-type-video > div, .w-richtext figure[data-rt-type="video"] > div {
  width: 100%;
}

.w-richtext figure.w-richtext-align-center {
  clear: both;
  margin-left: auto;
  margin-right: auto;
}

.w-richtext figure.w-richtext-align-center.w-richtext-figure-type-image > div, .w-richtext figure.w-richtext-align-center[data-rt-type="image"] > div {
  max-width: 100%;
}

.w-richtext figure.w-richtext-align-normal {
  clear: both;
}

.w-richtext figure.w-richtext-align-fullwidth {
  text-align: center;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-richtext figure.w-richtext-align-fullwidth > div {
  padding-bottom: inherit;
  display: inline-block;
}

.w-richtext figure.w-richtext-align-fullwidth > figcaption {
  display: block;
}

.w-richtext figure.w-richtext-align-floatleft {
  float: left;
  clear: none;
  margin-right: 15px;
}

.w-richtext figure.w-richtext-align-floatright {
  float: right;
  clear: none;
  margin-left: 15px;
}

.w-nav {
  z-index: 1000;
  background: #ddd;
  position: relative;
}

.w-nav:before, .w-nav:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-nav:after {
  clear: both;
}

.w-nav-brand {
  float: left;
  color: #333;
  text-decoration: none;
  position: relative;
}

.w-nav-link {
  vertical-align: top;
  color: #222;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  padding: 20px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-nav-link.w--current {
  color: #0082f3;
}

.w-nav-menu {
  float: right;
  position: relative;
}

[data-nav-menu-open] {
  text-align: center;
  background: #c8c8c8;
  min-width: 200px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: visible;
  display: block !important;
}

.w--nav-link-open {
  display: block;
  position: relative;
}

.w-nav-overlay {
  width: 100%;
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  overflow: hidden;
}

.w-nav-overlay [data-nav-menu-open] {
  top: 0;
}

.w-nav[data-animation="over-left"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-left"] .w-nav-overlay, .w-nav[data-animation="over-left"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  right: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay {
  width: auto;
}

.w-nav[data-animation="over-right"] .w-nav-overlay, .w-nav[data-animation="over-right"] [data-nav-menu-open] {
  z-index: 1;
  top: 0;
  left: auto;
}

.w-nav-button {
  float: right;
  cursor: pointer;
  -webkit-tap-highlight-color: #0000;
  tap-highlight-color: #0000;
  -webkit-user-select: none;
  user-select: none;
  padding: 18px;
  font-size: 24px;
  display: none;
  position: relative;
}

.w-nav-button:focus {
  outline: 0;
}

.w-nav-button.w--open {
  color: #fff;
  background-color: #c8c8c8;
}

.w-nav[data-collapse="all"] .w-nav-menu {
  display: none;
}

.w-nav[data-collapse="all"] .w-nav-button, .w--nav-dropdown-open, .w--nav-dropdown-toggle-open {
  display: block;
}

.w--nav-dropdown-list-open {
  position: static;
}

@media screen and (max-width: 991px) {
  .w-nav[data-collapse="medium"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="medium"] .w-nav-button {
    display: block;
  }
}

@media screen and (max-width: 767px) {
  .w-nav[data-collapse="small"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="small"] .w-nav-button {
    display: block;
  }

  .w-nav-brand {
    padding-left: 10px;
  }
}

@media screen and (max-width: 479px) {
  .w-nav[data-collapse="tiny"] .w-nav-menu {
    display: none;
  }

  .w-nav[data-collapse="tiny"] .w-nav-button {
    display: block;
  }
}

.w-tabs {
  position: relative;
}

.w-tabs:before, .w-tabs:after {
  content: " ";
  grid-area: 1 / 1 / 2 / 2;
  display: table;
}

.w-tabs:after {
  clear: both;
}

.w-tab-menu {
  position: relative;
}

.w-tab-link {
  vertical-align: top;
  text-align: left;
  cursor: pointer;
  color: #222;
  background-color: #ddd;
  padding: 9px 30px;
  text-decoration: none;
  display: inline-block;
  position: relative;
}

.w-tab-link.w--current {
  background-color: #c8c8c8;
}

.w-tab-link:focus {
  outline: 0;
}

.w-tab-content {
  display: block;
  position: relative;
  overflow: hidden;
}

.w-tab-pane {
  display: none;
  position: relative;
}

.w--tab-active {
  display: block;
}

@media screen and (max-width: 479px) {
  .w-tab-link {
    display: block;
  }
}

.w-ix-emptyfix:after {
  content: "";
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.w-dyn-empty {
  background-color: #ddd;
  padding: 10px;
}

.w-dyn-hide, .w-dyn-bind-empty, .w-condition-invisible {
  display: none !important;
}

.wf-layout-layout {
  display: grid;
}

@font-face {
  font-family: Satoshi;
  src: url("https://cdn.prod.website-files.com/684afec0a4c0b1f83bda33ea/68505956ed50e56c7abc9361_Satoshi-Variable.ttf") format("truetype");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Satoshi Italic;
  src: url("https://cdn.prod.website-files.com/684afec0a4c0b1f83bda33ea/685059562c40ca8ed035f878_Satoshi-VariableItalic.ttf") format("truetype");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --black: #1e1e1e;
  --white: white;
  --grey: #747474;
  --light-blue: #c1d0d8;
}

.w-layout-blockcontainer {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.w-layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.w-layout-hflex {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}

.w-layout-vflex {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

@media screen and (max-width: 991px) {
  .w-layout-blockcontainer {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .w-layout-blockcontainer {
    max-width: none;
  }
}

body {
  color: var(--black);
  font-family: Satoshi, Arial, sans-serif;
  font-size: .875rem;
  font-weight: 500;
  line-height: 150%;
}

h1 {
  letter-spacing: -3px;
  text-transform: uppercase;
  white-space: nowrap;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 10vw;
  font-weight: 700;
  line-height: 100%;
}

h2 {
  color: var(--black);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: -5px;
  margin-bottom: 10px;
  font-size: 4.5rem;
  font-weight: 700;
  line-height: 110%;
}

h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 120%;
}

p {
  margin-bottom: 0;
}

a {
  text-decoration: none;
}

img {
  object-fit: cover;
  max-width: 100%;
  display: inline-block;
}

.nav-menu-two {
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0;
  display: flex;
}

.navbar-logo-left {
  padding-left: 40px;
  padding-right: 40px;
}

.navbar-logo-left-container {
  z-index: 10;
  background-color: #0000;
  border-bottom: 1px solid #ffffff40;
  width: 100%;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 15px;
  padding-bottom: 15px;
}

.nav-link {
  color: #1a1b1f;
  letter-spacing: .25px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-decoration: none;
}

.nav-link:hover {
  color: #1a1b1fbf;
}

.nav-link:focus-visible, .nav-link[data-wf-focus-visible] {
  outline-offset: 0px;
  color: #0050bd;
  border-radius: 4px;
  outline: 2px solid #0050bd;
}

.container {
  width: 100%;
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

.navbar-wrapper {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.hero-images-wrapper {
  align-items: stretch;
  height: 85vh;
  min-height: 85vh;
  max-height: 85vh;
  margin-bottom: 40px;
  margin-left: auto;
  position: relative;
  overflow: hidden;
}

.hero-image-background {
  background-image: url("https://www.thedrive.com/wp-content/uploads/images-by-url-td/content/2018/08/20180815-tesla-supercharger.jpg?quality=85");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
}

.page-title {
  z-index: 5;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  mix-blend-mode: overlay;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-left: auto;
  margin-right: auto;
  padding-left: 40px;
  padding-right: 40px;
  display: inline-flex;
  position: absolute;
  inset: 5vw 0% auto;
}

.hero-image-foreground {
  z-index: 3;
  background-image: url("https://www.thedrive.com/wp-content/uploads/images-by-url-td/content/2018/08/20180815-tesla-supercharger.jpg?quality=85");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: absolute;
  inset: 0%;
}

.grey-text {
  color: var(--grey);
}

.grey-text.bottom-margin-60px {
  margin-bottom: 60px;
}

.about-block {
  grid-column-gap: 10vw;
  grid-row-gap: 10vw;
  justify-content: flex-start;
  align-items: center;
  max-width: 50%;
  position: relative;
}

.stat {
  color: #1e1e1e;
  margin-bottom: 5px;
  font-size: 2.5rem;
  line-height: 100%;
}

.section {
  padding-top: 250px;
  padding-left: 40px;
  padding-right: 40px;
}

.section.bottom-padding-200px {
  padding-bottom: 200px;
}

.section.black-bg {
  background-color: var(--black);
  padding-bottom: 250px;
}

.section.top-padding-0px {
  padding-top: 0;
}

.section.top-100px {
  padding-top: 100px;
}

.floating-image-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 85vw;
  max-height: 85vh;
  margin-bottom: 20px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.floating-image-wrapper.contact-section {
  max-width: 45vw;
  max-height: none;
}

.floating-image {
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  position: relative;
  overflow: clip;
}

.image-overlay {
  background-color: #fff;
  position: absolute;
  inset: 0% 0% 0% auto;
}

.image-overlay.reverse-direction {
  left: 0;
  right: auto;
}

.div-block {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 50%;
  margin-left: auto;
  display: flex;
}

.logos-wrapper {
  grid-column-gap: 5vw;
  grid-row-gap: 5vw;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  place-items: center start;
}

.service-content-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  color: #1e1e1e;
  grid-template-rows: auto;
  grid-template-columns: 20px 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  max-width: 50%;
}

.number {
  color: var(--grey);
  margin-top: 2px;
  font-weight: 400;
}

.services-list {
  grid-row-gap: 0px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  display: flex;
  position: relative;
}

.separator-line {
  background-color: #e8e8e8;
  width: 100%;
  height: 1px;
  margin-left: 0;
  margin-right: auto;
}

.service-wrapper {
  padding-top: 20px;
  padding-bottom: 20px;
}

.project-content-box {
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  background-color: #ffffffd9;
  min-width: 250px;
  max-width: 20vw;
  padding: 30px;
  position: absolute;
  inset: 50% 0% auto auto;
  transform: translate(0, -50%);
  box-shadow: 2px 2px 15px #0003;
}

.project-content-box.left-aligned {
  left: 0;
  right: auto;
}

.project-label {
  color: var(--grey);
  font-size: .875rem;
}

.project-thumbnail {
  flex-flow: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  display: flex;
  position: relative;
}

.project-thumbnail.right-aligned {
  align-items: flex-end;
}

.flex-block-2 {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.project-description {
  margin-top: 60px;
  margin-bottom: 60px;
}

.testimonial-text {
  color: #c1d0d8;
  text-align: center;
  margin-bottom: 80px;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 150%;
}

.slider {
  background-color: #ddd0;
  max-width: 600px;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.hero-section {
  padding-left: 40px;
  padding-right: 40px;
}

._2x1-grid {
  grid-template-rows: auto;
  align-items: stretch;
}

.about-blocks-wrapper {
  grid-column-gap: 100px;
  grid-row-gap: 100px;
  display: flex;
}

.bottom-margin-medium {
  margin-bottom: 40px;
}

.bottom-margin-small {
  margin-bottom: 10px;
}

.accordion-item-wrapper {
  background-color: #ffffff1a;
  border-radius: 10px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 20px;
  display: flex;
}

.accordion-trigger {
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  color: var(--black);
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 2px;
  line-height: 140%;
  text-decoration: none;
  display: flex;
  position: relative;
}

.expand-icon {
  transition: color .3s;
  display: flex;
}

.accordion-content {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  height: 0;
  padding-right: 0;
  transition: opacity .2s;
  overflow: hidden;
}

.accordion-content.first {
  height: auto;
}

.accordion-content-text {
  padding-top: 10px;
}

.service-bullet-point {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  color: var(--grey);
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.div-block-71 {
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.bullet-indicator {
  background-color: var(--grey);
  border-radius: 100%;
  width: 4px;
  min-width: 4px;
  max-width: 4px;
  height: 4px;
  min-height: 4px;
  max-height: 4px;
}

.accordion-grid-wrapper {
  grid-template-rows: auto;
  align-items: stretch;
  padding-top: 20px;
}

.animated-grid-image {
  width: 300px;
  height: 100%;
}

.single-service-grid {
  grid-template-rows: auto;
  grid-template-columns: 20px 1fr;
  padding-top: 20px;
}

.stats-block {
  grid-column-gap: 5vw;
  grid-row-gap: 5vw;
  justify-content: flex-start;
  align-items: center;
  max-width: 50%;
  position: relative;
}

.uppercase-small-heading {
  letter-spacing: 0;
  margin-bottom: 40px;
  font-size: .875rem;
}

.uppercase-small-heading.bottom-margin-small {
  margin-bottom: 10px;
}

.uppercase-large-heading {
  color: var(--black);
  margin-bottom: 40px;
  font-size: 10vw;
  font-weight: 700;
}

.div-block-72 {
  z-index: -1;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: sticky;
  top: 30vh;
}

.inner-images-wrapper {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  place-items: center;
  max-width: 60vw;
  margin-left: auto;
  margin-right: auto;
  display: grid;
}

.center-image {
  width: 100%;
}

.top-left-image {
  z-index: 5;
  width: 100%;
  position: relative;
  top: 15px;
  left: 30px;
}

.top-right-image {
  width: 100%;
  max-width: 100%;
  position: relative;
  left: -30px;
}

.bottom-left-image {
  width: 100%;
  position: relative;
  left: 0;
}

.bottom-right-image {
  width: 100%;
  position: relative;
  top: 100px;
  left: 0;
}

.large-title {
  font-size: 14.5vw;
  line-height: 100%;
}

.animated-overlay-blocks {
  z-index: 4;
  display: flex;
  position: absolute;
  inset: 0%;
  overflow: hidden;
}

.left-overlay-block {
  background-color: var(--white);
  width: 50%;
  transform: translate(-100%);
}

.right-overlay-block {
  background-color: var(--white);
  width: 50%;
  transform: translate(100%);
}

.project-thumbnails-wrapper {
  grid-column-gap: 200px;
  grid-row-gap: 200px;
  flex-flow: column;
  display: flex;
}

.images-wrapper {
  min-height: 100vh;
}

.slide-nav {
  display: none;
}

.center-aligned-heading {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}

.left-arrow {
  background-color: var(--light-blue);
  border-radius: 40px;
  justify-content: center;
  align-items: center;
  padding: 5px;
  display: flex;
  inset: auto 0 0% -100px;
}

.image {
  margin-right: 0;
  display: inline-flex;
}

.right-arrow {
  background-color: var(--light-blue);
  border-radius: 40px;
  justify-content: center;
  align-items: center;
  padding: 5px;
  display: flex;
  inset: auto -100px 0% 0;
}

.flex-block-3 {
  grid-column-gap: 5vw;
  grid-row-gap: 5vw;
  flex-flow: row;
  justify-content: center;
  align-items: flex-start;
}

.div-block-75 {
  align-self: center;
}

.white-text {
  color: #fff;
}

.form-field-wrapper {
  margin-bottom: 10px;
}

.bottom-margin-20px {
  margin-bottom: 20px;
}

.form-block {
  max-width: 40vw;
}

.floating-image-wrapper-2 {
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 65vw;
  margin-bottom: 20px;
  display: flex;
  position: relative;
  overflow: hidden;
}

.form-field {
  color: #848484;
  background-color: #f7f7f7;
  border: 1px #000;
}

.work-with-us-block {
  grid-column-gap: 10vw;
  grid-row-gap: 10vw;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 100px;
  position: relative;
}

.primary-button {
  color: #fff;
  text-align: center;
  text-transform: uppercase;
  background-color: #1e1e1e;
  border-width: 1px;
  border-color: #fff;
  width: 100%;
  padding: 8px 30px;
  font-size: .75rem;
  font-weight: 500;
  transition: color .2s, background-color .2s;
}

.primary-button:hover {
  background-color: var(--light-blue);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  color: #1e1e1e;
}

.footer-link {
  color: var(--grey);
  text-transform: none;
  margin-bottom: 5px;
  font-size: .875rem;
  transition: color .3s cubic-bezier(.785, .135, .15, .86);
  display: block;
}

.footer-link:hover {
  color: var(--black);
}

.newsletter-form-wrapper {
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
}

.footer-grid-top {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 2fr;
  justify-items: stretch;
  margin-bottom: 40px;
  padding-right: 0;
}

.footer-grid-bottom {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  margin-bottom: 20px;
  display: grid;
}

.dark-footer-links-wrapper {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  display: flex;
}

.form-label {
  color: #777;
  text-align: left;
  margin-bottom: 5px;
  font-size: .9rem;
}

.partner-form-block {
  max-width: 40vw;
  padding-top: 250px;
}

.footer-section {
  margin-top: -100px;
  padding-top: 0;
  padding-left: 40px;
  padding-right: 40px;
}

.styleguide-element-wrapper-2 {
  margin-top: 40px;
}

.secondary-button {
  background-color: var(--light-blue);
  color: var(--black);
  text-transform: uppercase;
  padding: 8px 30px;
  font-size: .75rem;
  text-decoration: none;
  transition: color .2s, background-color .2s;
}

.secondary-button:hover {
  background-color: var(--black);
  color: var(--white);
}

.secondary-button:focus-visible, .secondary-button[data-wf-focus-visible] {
  outline-offset: 0px;
  border-radius: 4px;
  outline: 2px solid #0050bd;
}

.label {
  border: 1px #000;
  border-top: 1px solid #98a4a4;
  margin-top: 20px;
  padding-top: 5px;
  font-size: 12px;
}

.color-wrapper {
  width: 100%;
  height: 100%;
}

.white {
  background-color: var(--white);
  border: 1px solid #f1f1f1;
  min-height: 60px;
}

.color-palette-grid-2 {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  place-items: stretch stretch;
  width: 100%;
}

.black {
  background-color: var(--black);
  min-height: 60px;
}

.bottom-margin-150px {
  margin-bottom: 150px;
}

.styleguide-block {
  flex-direction: column;
  align-items: center;
  width: 100%;
  display: block;
}

.project-rich-text {
  margin-bottom: 40px;
}

.buttons-grid {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  place-items: center stretch;
}

.primary-button-2 {
  color: #fff;
  text-transform: uppercase;
  background-color: #1e1e1e;
  border-radius: 5px;
  padding: 6px 30px 5px;
  text-decoration: none;
}

.primary-button-2:focus-visible, .primary-button-2[data-wf-focus-visible] {
  outline-offset: 0px;
  border-radius: 4px;
  outline: 2px solid #0050bd;
}

.light-blue {
  background-color: var(--light-blue);
  min-height: 60px;
}

.help-page-h2 {
  letter-spacing: -2px;
  text-transform: capitalize;
  margin-bottom: 20px;
  margin-left: 0;
  font-size: 4vw;
}

.grey {
  background-color: var(--grey);
  min-height: 60px;
}

.link-text {
  color: var(--black);
  font-weight: 500;
}

.bottom-margin-100px {
  margin-bottom: 100px;
}

.bottom-margin-60px {
  margin-bottom: 60px;
}

.changelog-wrapper {
  width: 100%;
}

.changelog-grid {
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  grid-template-columns: 1fr 1fr 1fr;
}

.table-header {
  border-style: none none solid;
  border-width: 1px;
  border-top-color: #000;
  border-bottom-color: #9a846a;
  border-left-color: #000;
  margin-bottom: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.table-content-item {
  border: 1px #000;
  border-bottom: 1px solid #ebe1d2;
  min-height: 40px;
}

.gallery-image {
  width: 100%;
}

.utility-page-wrap {
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 100%;
  height: 85vh;
  max-height: 100%;
  display: flex;
}

.utility-page-content {
  text-align: center;
  flex-direction: column;
  width: 500px;
  display: flex;
}

.utility-page-form {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.footer {
  padding-top: 0;
  padding-left: 40px;
  padding-right: 40px;
}

.page-popups-wrapper {
  z-index: 1000;
  padding-bottom: 10px;
  padding-right: 10px;
  position: fixed;
  inset: auto 0% 0% auto;
}

.buy-template-popup {
  color: var(--white);
  background-color: #0055d4;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
  padding: 7px 10px;
  font-size: .9rem;
  transition: color .3s, background-color .3s;
  display: flex;
}

.buy-template-popup:hover {
  background-color: var(--light-blue);
  color: var(--black);
}

.all-templates-popup {
  color: var(--white);
  background-color: #292929;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 7px 10px;
  font-size: .9rem;
  transition: color .3s, background-color .3s;
  display: flex;
}

.all-templates-popup:hover {
  background-color: var(--light-blue);
  color: var(--black);
}

@media screen and (max-width: 991px) {
  .nav-menu-two {
    background-color: var(--white);
    flex-flow: column;
    justify-content: space-around;
    align-items: flex-start;
    padding: 20px 20px 20px 15px;
    display: flex;
    box-shadow: 0 8px 50px #0000000d;
  }

  .navbar-logo-left {
    padding-left: 15px;
    padding-right: 15px;
  }

  .menu-button {
    background-color: #c8c8c800;
    padding: 12px;
  }

  .menu-button.w--open {
    color: var(--black);
    background-color: #c8c8c800;
  }

  .nav-menu-wrapper {
    background-color: #0000;
  }

  .hero-image-background {
    background-attachment: scroll;
  }

  .page-title {
    padding-left: 20px;
    padding-right: 20px;
    top: 10vw;
  }

  .hero-image-foreground {
    background-attachment: scroll;
  }

  .section {
    padding-top: 150px;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
  }

  .floating-image-wrapper {
    max-width: none;
    max-height: none;
  }

  .floating-image-wrapper.contact-section {
    max-width: none;
  }

  .div-block {
    justify-content: flex-start;
    align-items: flex-end;
    max-width: none;
  }

  .logos-wrapper {
    grid-column-gap: 10vw;
    grid-row-gap: 10vw;
  }

  .separator-line {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .service-wrapper {
    max-width: none;
  }

  .project-content-box {
    box-shadow: none;
    min-width: auto;
    max-width: none;
    padding: 0;
    position: static;
    transform: translate(0);
  }

  .flex-block-2 {
    margin-top: 0;
  }

  .project-description {
    margin-bottom: 0;
  }

  .hero-section {
    padding-left: 15px;
    padding-right: 15px;
  }

  ._2x1-grid {
    grid-template-columns: 1fr;
  }

  .stats-block {
    grid-column-gap: 10vw;
    grid-row-gap: 10vw;
    max-width: none;
  }

  .inner-images-wrapper {
    max-width: none;
  }

  .large-title {
    font-size: 15.5vw;
  }

  .project-thumbnails-wrapper {
    grid-column-gap: 100px;
    grid-row-gap: 100px;
  }

  .work-with-us-block {
    flex-flow: column;
  }

  .footer-grid-top {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    padding-left: 0;
    padding-right: 0;
  }

  .partner-form-block {
    max-width: none;
    padding-top: 0;
  }

  .footer-section {
    margin-top: 0;
    padding-top: 150px;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
  }

  .styleguide-block {
    text-align: left;
  }

  .project-rich-text {
    max-width: none;
  }

  .help-page-h2 {
    font-size: 3rem;
  }

  .bottom-margin-100px {
    margin-bottom: 75px;
  }

  .footer {
    margin-top: 0;
    padding-top: 150px;
    padding-left: 15px;
    padding-right: 15px;
    overflow: hidden;
  }
}

@media screen and (max-width: 767px) {
  h2 {
    letter-spacing: -2px;
    font-size: 3rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  .nav-menu-two {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-direction: column;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .navbar-logo-left-container {
    max-width: 100%;
  }

  .nav-link {
    display: inline-block;
  }

  .navbar-brand {
    padding-left: 0;
  }

  .hero-images-wrapper {
    height: 50vh;
    min-height: 50vh;
    max-height: 50vh;
  }

  .about-block {
    flex-flow: column;
    max-width: none;
  }

  .about-blocks-wrapper {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .service-bullet-point {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }

  .stats-block {
    justify-content: space-between;
  }

  .div-block-72 {
    position: static;
  }

  .large-title {
    font-size: 15vw;
  }

  .images-wrapper {
    min-height: auto;
  }

  .work-with-us-block {
    flex-flow: column;
  }

  .footer-grid-top {
    margin-bottom: 80px;
  }

  .secondary-button {
    flex: 1;
  }

  .color-palette-grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .buttons-grid {
    grid-template-columns: 1fr 1fr;
    place-items: start;
  }

  .help-page-h2 {
    font-size: 2.5rem;
  }

  .bottom-margin-100px {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 479px) {
  h1 {
    letter-spacing: -2px;
    font-size: 14vw;
  }

  .nav-menu-two {
    flex-direction: column;
  }

  .navbar-logo-left {
    padding-left: 0;
    padding-right: 0;
  }

  .menu-button {
    padding: 0;
  }

  .container {
    max-width: none;
  }

  .navbar-wrapper {
    padding-left: 15px;
    padding-right: 15px;
  }

  .page-title {
    padding-left: 10px;
    padding-right: 10px;
    top: 10vh;
  }

  .stat {
    font-size: 2rem;
  }

  .service-content-wrapper {
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    flex-flow: column;
    max-width: none;
    display: flex;
  }

  .services-list {
    align-items: flex-start;
    display: block;
  }

  .testimonial-text {
    font-size: 1rem;
  }

  .hero-section {
    padding-left: 0;
    padding-right: 0;
  }

  .accordion-item-wrapper {
    align-items: flex-start;
  }

  .accordion-trigger {
    padding-bottom: 5px;
  }

  .open-close-box {
    right: 5%;
  }

  .accordion-content {
    padding-left: 0;
    padding-right: 0;
  }

  .accordion-grid-wrapper {
    grid-template-columns: 1fr;
  }

  .single-service-grid {
    grid-column-gap: 5px;
    grid-row-gap: 5px;
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .inner-images-wrapper {
    position: relative;
  }

  .center-image {
    width: 50vw;
    position: static;
  }

  .top-left-image {
    width: 35vw;
    position: absolute;
    inset: 20px auto auto 0%;
  }

  .top-right-image {
    width: 35vw;
    position: absolute;
    inset: 0% 0% auto auto;
  }

  .bottom-left-image {
    width: 30vw;
    position: absolute;
    inset: auto auto -20px 0%;
  }

  .bottom-right-image {
    width: 40vw;
    position: absolute;
    inset: auto 0% -40px auto;
  }

  .large-title {
    font-size: 16.5vw;
  }

  .primary-button {
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-grid-top {
    grid-row-gap: 60px;
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid-bottom {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    flex-flow: column;
    grid-template-columns: 1fr;
  }

  .dark-footer-links-wrapper {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    justify-content: space-between;
  }

  .secondary-button {
    padding-left: 10px;
    padding-right: 10px;
  }

  .buttons-grid {
    grid-column-gap: 12px;
    grid-row-gap: 12px;
  }

  .primary-button-2 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .bottom-margin-100px {
    margin-bottom: 40px;
  }

  .utility-page-content {
    width: 300px;
  }

  .buy-template-popup, .all-templates-popup {
    font-size: .9rem;
  }
}

#w-node-_5bbbe3a8-d436-46a3-da1b-5c148fe98b26-3bda33fe {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-bad632a6-9246-9b39-3da6-f18fee55ec9d-3bda33fe, #w-node-bad632a6-9246-9b39-3da6-f18fee55ecbf-3bda33fe, #w-node-bad632a6-9246-9b39-3da6-f18fee55ece1-3bda33fe, #w-node-bad632a6-9246-9b39-3da6-f18fee55ed03-3bda33fe {
  justify-self: end;
}

#w-node-_427b26cd-8a7b-6c2f-81f3-f0b362a500ee-3bda33fe, #w-node-b46db727-f2de-96bd-e3d3-aad2bd561235-3bda33fe {
  grid-area: 1 / 2 / 3 / 3;
}

#w-node-_0cce4e86-0623-dc1b-6c2d-796bb3cd57c6-3bda33fe {
  justify-self: end;
}

#w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda7a-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda7b-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda80-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda81-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda86-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda87-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda8c-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda8d-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42eda97-8fc6624a, #w-node-ba06bae5-fbf4-3045-1e07-23a9d42edaa2-8fc6624a {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

#w-node-_6b0c63c9-3272-2fab-d2e1-e6bc7e63dfa0-7e63df98 {
  justify-self: end;
}

#w-node-_3477c818-e27a-a80b-5fa5-54fc71259bf0-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bf1-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bf3-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bf4-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bf6-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bf7-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bf9-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bfa-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bfc-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bfd-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259bff-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c00-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c02-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c03-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c04-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c05-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c06-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c07-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c08-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c09-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c0a-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c0b-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c0c-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c0d-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c0e-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c0f-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c10-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c11-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c12-c4fee243, #w-node-_3477c818-e27a-a80b-5fa5-54fc71259c13-c4fee243 {
  grid-area: span 1 / span 1 / span 1 / span 1;
}

@media screen and (max-width: 479px) {
  #w-node-_5bbbe3a8-d436-46a3-da1b-5c148fe98b26-3bda33fe {
    grid-area: span 1 / span 1 / span 1 / span 1;
  }
}

/* --- CHARGESHARE CUSTOM STYLES --- */

/* LOGO FIX */
.logo-text {
    color: var(--black);
    font-size: 2rem; /* Made the logo a bit bigger */
    font-weight: 700;
}

/* HERO SECTION FIX */
.hero-image-background {
  /* This is the key fix: It sets our new hero image and adds a dark gradient on top */
  background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('https://www.thedrive.com/wp-content/uploads/images-by-url-td/content/2018/08/20180815-tesla-supercharger.jpg?quality=85');
  background-attachment: fixed; /* This keeps the cool parallax effect */
}

/* This is no longer used, but we hide it just in case */
.hero-image-foreground {
  display: none;
}

/* This fixes the giant text to look good on our new background */
.page-title {
  mix-blend-mode: normal; /* Disables the weird transparent effect */
  color: white; /* Makes the text solid white so it's readable */
  text-align: center;
  width: 100%;
}
.hero-text-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.large-title {
    white-space: normal; /* Allows the title to wrap if needed */
}

/* New style for our added subtitle */
.hero-subtitle-custom {
    color: white;
    opacity: 0.9;
    font-size: 1.25rem;
    max-width: 600px;
    margin-top: 1rem;
    line-height: 1.6;
}

/* --- CUSTOM NAVBAR STYLES --- */
.logo-text-nav {
    margin-top: 0; /* Resets spacing */
    margin-bottom: 0;
    font-size: 1.5rem; /* Adjust size as needed */
    font-weight: 700;
    color: #1e1e1e; /* Uses the template's black color */
}
.nav-link {
    color: #1e1e1e; /* Makes nav links black */
}

/* --- CUSTOM HERO HEADLINE STYLES --- */

/* This targets the container for our new text */
.hero-text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* This styles our main headline: "OWN THE EV REVOLUTION." */
.hero-headline-custom {
    color: white;
    letter-spacing: -2px;
    text-transform: uppercase;
    white-space: normal; /* Allows text to wrap */
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 8vw; /* Scales with screen width, smaller than original */
    font-weight: 700;
    line-height: 110%;
    text-align: center;
    /* This is the key part that keeps the cool transparent effect! */
    mix-blend-mode: overlay; 
}

/* This styles our new sub-headline */
.hero-subheadline-custom {
    color: white;
    text-align: center;
    max-width: 650px; /* Keeps the line length readable */
    margin-top: 1rem;
    font-size: 1.5rem; /* Larger, more impactful font size */
    font-weight: 500;
    line-height: 1.5;
    /* We turn off the blend mode here so this text is solid and easy to read */
    mix-blend-mode: normal; 
}

/* --- RESPONSIVE FIXES FOR TABLET & MOBILE --- */

/* For devices smaller than a typical landscape tablet (991px) */
@media screen and (max-width: 991px) {
    .hero-headline-custom {
        font-size: 10vw; /* Make text a bit bigger relative to the screen */
        line-height: 1.1;
    }
    .hero-subheadline-custom {
        font-size: 1.25rem;
        max-width: 90%;
    }
}

/* For devices smaller than a typical phone (479px) */
@media screen and (max-width: 479px) {
    /* Make the top navigation logo a bit smaller */
    .logo-text-nav {
        font-size: 1.2rem; 
    }

    .hero-headline-custom {
        /* This is the key fix. We make the font much larger relative to the screen width.
           This forces the words to stack vertically, which is a strong mobile design pattern. */
        font-size: 14vw;
        letter-spacing: -1px; /* Tighten up the letters a little */
    }

    .hero-subheadline-custom {
        /* We make the sub-headline smaller to give the main title more impact. */
        font-size: 1.1rem; /* A comfortable, readable size on mobile */
        max-width: 95%;   /* Use more of the screen width */
        margin-top: 0.5rem; /* Reduce the space from the headline */
    }
}

/* --- GUARANTEED MOBILE MENU STYLES --- */

/* This CSS works with the custom JavaScript snippet in index.html */
/* It only applies on screens 991px wide or smaller */

@media screen and (max-width: 991px) {
    /*
     * By default, Webflow hides the .w-nav-menu on mobile. This is correct.
     * The rule below targets the menu ONLY when our JavaScript has opened it.
     */
    .w-nav-menu[data-nav-menu-open] {
        display: block; /* This makes the menu visible */
        position: absolute;
        top: 100%; /* Position it right below the navbar */
        left: 0;
        right: 0;
        z-index: 1001; /* Ensure it's on top of other content */
        background-color: white; /* Give it a solid background */
        box-shadow: 0 8px 50px rgba(0, 0, 0, 0.08); /* Add a subtle shadow */
    }

    /* Style the list of links inside for better layout */
    .w-nav-menu[data-nav-menu-open] .nav-menu-two {
        display: flex;
        flex-direction: column; /* Stack the links vertically */
        align-items: flex-start; /* Align links to the left */
        padding: 10px 20px;
    }
    
    /* Style the individual links for spacing and clarity */
    .w-nav-menu[data-nav-menu-open] .nav-link {
        padding: 15px 0;
        width: 100%; /* Make the entire row clickable */
    }
}

/* --- STEP 1: HERO BUTTON STYLES --- */

/* Add a top margin to create space below the subtitle */
.hero-button {
    margin-top: 25px;
    width: auto; /* Override the default 100% width from the other button */
    padding: 12px 35px; /* Make it slightly larger and more prominent */
    font-size: 0.875rem; /* Increase font size a bit for visibility */
    border-radius: 5px; /* Adding a subtle rounded corner */
    background-color: #9e9e9ed4; /* <-- ADD THIS LINE */
    border-color: transparent; /* <-- ADD THIS LINE to remove the white border */
}

/* --- HOW IT WORKS SECTION STYLES --- */

.how-it-works-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates a 3-column grid */
    grid-gap: 40px; /* Space between the columns and rows */
    margin-top: 40px;
}

.how-it-works-step {
    text-align: center; /* Center aligns the icon, title, and text */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.how-it-works-icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 80px;
    background-color: #f7f7f7; /* A light grey background */
    border-radius: 50%; /* Makes it a circle */
    margin-bottom: 20px;
    color: #1e1e1e; /* Sets the icon color to black */
}

.how-it-works-step h3 {
    margin-bottom: 10px;
    font-size: 1.5rem; /* Larger font size for the heading */
}


/* --- RESPONSIVE STYLES FOR "HOW IT WORKS" --- */

/* For tablets and smaller devices */
@media screen and (max-width: 991px) {
    .how-it-works-grid {
        grid-template-columns: 1fr; /* Stacks the 3 steps into a single column */
        grid-gap: 60px; /* Increase vertical space when stacked */
    }
}

/* --- TESTIMONIAL SECTION STYLES --- */

.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
    grid-gap: 30px;
    margin-top: 40px;
}

.testimonial-card {
    background-color: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.2s, box-shadow 0.2s;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.testimonial-rating {
    color: #f5c518; /* A nice gold color for the stars */
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.testimonial-quote {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
    flex-grow: 1; /* Allows the quote to take up available space */
    margin-bottom: 20px;
}

.testimonial-author {
    border-top: 1px solid #e8e8e8;
    padding-top: 20px;
}

.author-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.author-title {
    margin: 0;
    font-size: 0.875rem;
    color: var(--grey);
}

/* --- RESPONSIVE STYLES FOR TESTIMONIALS --- */

/* For tablets */
@media screen and (max-width: 991px) {
    .testimonial-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablet */
    }
}

/* For mobile phones */
@media screen and (max-width: 767px) {
    .testimonial-grid {
        grid-template-columns: 1fr; /* 1 column on mobile */
    }
}

/* --- ROTATING TESTIMONIAL STYLES (MOBILE-ONLY) --- */

@media screen and (max-width: 767px) {
    .testimonial-grid {
        /* This prevents the grid from growing to fit all 6 hidden cards */
        min-height: 0; 
    }

    .testimonial-card {
        /* Hide all cards by default on mobile */
        display: none;
        opacity: 0;
        transition: opacity 0.5s ease-in-out;
    }
    
    .testimonial-card.is-visible {
        /* This class will be added by JavaScript to show the current two */
        display: flex; /* Overrides the 'display: none' */
        opacity: 1;
    }
}

/* --- FAQ SECTION STYLES --- */

.faq-container {
    max-width: 800px; /* Constrain width for better readability */
    margin: 40px auto 0 auto; /* Center the container */
    border-top: 1px solid #e8e8e8; /* Top border for the whole section */
}

.faq-item {
    border-bottom: 1px solid #e8e8e8; /* Separator line for each item */
}

.faq-question {
    font-size: 1.25rem;
    font-weight: 500;
    padding: 25px 0;
    cursor: pointer;
    position: relative;
    list-style: none; /* Removes the default arrow/marker */
    padding-right: 40px; /* Make space for our custom arrow */
}

/* Custom arrow for the accordion */
.faq-question::after {
    content: '+';
    font-size: 2rem;
    font-weight: 300;
    color: var(--grey);
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s;
}

/* When the accordion is open, rotate the arrow */
details[open] > summary.faq-question::after {
    content: '−'; /* Use a minus sign when open */
    transform: translateY(-50%);
}

.faq-answer {
    color: var(--grey);
    padding-bottom: 25px;
    padding-right: 40px; /* Align with the question text */
    line-height: 1.7;
}

/* Remove the default focus outline for a cleaner look */
.faq-question:focus {
    outline: none;
}

/* --- FIX FOR FOOTER IMAGE OVERLAP (DESKTOP ONLY) --- */

/* This media query targets screens 992px and wider */
@media screen and (min-width: 992px) {
    /* This rule will now ONLY apply on larger screens */
    .floating-image-wrapper.contact-section {
        margin-top: 160px; 
    }
}

/* ===============================================
   --- UI NOTIFICATIONS (TOASTS) ---
   =============================================== */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateX(120%);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.toast.show {
    transform: translateX(0);
    opacity: 1;
}

.toast.error {
    background-color: #db3b3b; /* Red for errors */
}

.toast.success {
    background-color: #158a4a; /* Green for success */
}


/* --- LOGIN PAGE STYLES --- */

.login-page-body {
    background-color: #ffffff;
    font-family: Satoshi, Arial, sans-serif;
    color: #1e1e1e;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
}

.login-container {
    width: 100%;
    max-width: 1200px; /* Max width for the whole page content */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 40px;
}

.login-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
}

.login-logo {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--black);
    text-decoration: none;
}

.lang-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.login-form-wrapper {
    width: 100%;
    max-width: 380px; /* Constrains the form width */
    align-self: center; /* This is the key fix */
}

.login-form-wrapper h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 30px;
    white-space: normal;
}

.input-group {
    margin-bottom: 20px;
}

.input-group label {
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #5c5e62;
}

.info-icon {
    margin-left: 5px;
    color: #8e8e8e;
}

.input-group input {
    width: 100%;
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.input-group input:focus {
    outline: none;
    border-color: #3e6ae1;
}

.btn {
    display: block;
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: none;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.btn-primary {
    background-color: #3e6ae1;
    color: white;
}
.btn-primary:hover {
    background-color: #3457b2;
}

.btn-secondary {
    background-color: #f0f0f0;
    color: var(--black);
}
.btn-secondary:hover {
    background-color: #e0e0e0;
}

.trouble-link {
    display: block;
    text-align: center;
    margin-top: 15px;
    color: #5c5e62;
    text-decoration: none;
    font-weight: 500;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: #8e8e8e;
    margin: 30px 0;
}

.separator::before,
.separator::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e0e0e0;
}

.separator:not(:empty)::before {
    margin-right: .5em;
}

.separator:not(:empty)::after {
    margin-left: .5em;
}

.login-footer {
    text-align: center;
    padding: 40px 0;
    font-size: 0.8rem;
    color: #8e8e8e;
}

.login-footer .footer-links {
    margin-top: 10px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.login-footer a {
    color: #5c5e62;
    text-decoration: none;
    font-weight: 500;
}

/* Responsive adjustments */
@media screen and (max-width: 479px) {
    .login-container {
        padding: 0 20px;
    }
    .login-header {
        padding: 20px 0;
    }
}

/* --- SINGLE-PAGE REGISTRATION STYLES --- */

.hidden {
    display: none;
}

.form-navigation {
    display: flex;
    gap: 15px;
}

.form-navigation .btn-primary {
    flex-grow: 7; /* Makes the primary button take up more space */
}

.btn-tertiary {
    background-color: transparent;
    color: #5c5e62;
    border: 1px solid #e0e0e0;
}
.btn-tertiary:hover {
    background-color: #f9f9f9;
}

/* --- STYLES FOR NEW REGISTRATION FIELDS --- */

/* Style dropdowns to look like text inputs */
.input-group select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid #e0e0e0;
    background-color: #f9f9f9;
    font-size: 1rem;
    color: var(--black);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Custom arrow for dropdowns */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238e8e8e%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: .65em auto;
}

/* --- REGISTRATION FORM SPACING ADJUSTMENTS --- */

/* Add space between the reCAPTCHA widget and the legal text below it */
.g-recaptcha + .legal-text {
    margin-top: 20px;
}

/* Add space between the legal text and the primary 'Next' button below it */
.legal-text + .btn-primary {
    margin-top: 20px;
}

/* --- VERIFICATION PAGE SPACING ADJUSTMENT --- */

/* This targets the 'Back to Sign In' button specifically on the verification step */
.verify-text + .btn-secondary {
    margin-top: 30px;
}

/* --- STYLE FOR READ-ONLY LOGIN INPUT --- */

.input-group input[readonly] {
    background-color: #f0f0f0;
    cursor: not-allowed;
}

/* --- NEW DASHBOARD STYLES V2 (SCOPED & BLACK THEME) --- */
/* These styles will ONLY apply to the dashboard page. */

.dashboard-page {
    /* Updated color variables for the black/grey theme */
    --primary-color: #1e1e1e;   /* Set to black */
    --primary-dark: #333333;    /* A slightly lighter black for hover */
    --secondary-bg: #f2f2f2;
    --card-bg: #ffffff;
    --border-color: #eef0f3;
    --text-dark: #1e1e1e;
    --text-light: #6c757d;
    --positive-green: #158a4a;
    --negative-red: #d93025;
    
    background-color: var(--secondary-bg);
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    padding-bottom: 80px; /* For the mobile nav */
}

/* --- MOBILE NAVIGATION (Bottom Bar) --- */
.dashboard-page .bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 65px;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
    z-index: 1000;
}

.dashboard-page .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.65rem;
    gap: 4px;
    transition: color 0.2s;
}

.dashboard-page .nav-link.active {
    color: var(--primary-color);
}

.dashboard-page .nav-link i {
    font-size: 1.25rem;
}

.dashboard-page .nav-link-primary {
    background-color: var(--primary-color);
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Adjusted shadow for black */
}
.dashboard-page .nav-link-primary:hover {
    background-color: var(--primary-dark);
}
.dashboard-page .nav-link-primary i {
    font-size: 1.5rem;
}

/* --- SIDEBAR NAVIGATION (Desktop) --- */
.dashboard-page .sidebar-nav {
    display: none;
}
.dashboard-page #logout-button-desktop {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* --- MAIN CONTENT & HEADERS --- */
.dashboard-page .main-content {
    padding: 20px;
}
.dashboard-page .desktop-header {
    display: none;
}

.dashboard-page .mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
}
.dashboard-page .mobile-header .user-info p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-light);
}
.dashboard-page .mobile-header .user-info h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -1px;
    white-space: normal;
    line-height: 1.2;
}
.dashboard-page .logout-icon {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-light);
    padding: 10px;
}

/* --- GENERIC CARD STYLES --- */
.dashboard-page .card {
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
}

/* --- DASHBOARD GRID --- */
.dashboard-page .dashboard-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

/* --- BALANCE CARD --- */
.dashboard-page .balance-card .balance-header p {
    margin: 0;
    color: var(--text-light);
}
.dashboard-page .balance-card .balance-amount {
    display: flex;
    align-items: flex-start;
    margin: 10px 0;
}
.dashboard-page .balance-card .balance-amount span {
    font-size: 2rem;
    font-weight: 600;
    margin-right: 4px;
    margin-top: 5px;
}
.dashboard-page .balance-card .balance-amount p {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    margin: 0;
}
.dashboard-page .balance-card .balance-subtitle {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--positive-green);
    font-weight: 600;
}
.dashboard-page .balance-card .balance-subtitle p {
    margin: 0;
}
.dashboard-page .balance-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}
.dashboard-page .btn {
    flex: 1;
    padding: 15px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 12px;
}
.dashboard-page .btn i {
    margin-right: 8px;
}
.dashboard-page .btn-primary {
    background-color: var(--primary-color);
    color: white;
}
.dashboard-page .btn-primary:hover {
    background-color: var(--primary-dark);
}
.dashboard-page .btn-secondary {
    background-color: #c0c8d5;
    color: var(--text-dark);
}

/* --- CHART CARD --- */
.dashboard-page .chart-card .chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.dashboard-page .chart-card h3 {
    margin: 0;
    font-size: 1.1rem;
}
.dashboard-page .chart-timespan {
    display: flex;
    background-color: var(--secondary-bg);
    border-radius: 8px;
    padding: 4px;
}
.dashboard-page .timespan-btn {
    background: none;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
}
.dashboard-page .timespan-btn.active {
    background-color: var(--card-bg);
    color: var(--text-dark);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.dashboard-page .chart-placeholder img {
    width: 100%;
}

/* --- ACTIVITY CARD --- */
.dashboard-page .activity-card h3 {
    font-size: 1.1rem;
    margin: 0 0 15px 0;
}
.dashboard-page .activity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dashboard-page .activity-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}
.dashboard-page .activity-item:last-child {
    border-bottom: none;
}
.dashboard-page .activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
}
.dashboard-page .activity-details {
    flex-grow: 1;
}
.dashboard-page .activity-details p {
    margin: 0;
    font-weight: 600;
}
.dashboard-page .activity-details span {
    font-size: 0.8rem;
    color: var(--text-light);
}
.dashboard-page .activity-amount {
    font-weight: 600;
}
.dashboard-page .activity-amount.positive {
    color: var(--positive-green);
}

/* --- DESKTOP RESPONSIVE STYLES (768px and up) --- */
@media screen and (min-width: 768px) {
    .dashboard-page {
        display: flex;
        padding-bottom: 0;
    }

    /* Show Sidebar, Hide Bottom Nav */
    .dashboard-page .bottom-nav {
        display: none;
    }
    .dashboard-page .sidebar-nav {
        display: flex;
        flex-direction: column;
        width: 240px;
        background-color: var(--card-bg);
        border-right: 1px solid var(--border-color);
        padding: 20px;
        height: 100vh;
        position: fixed;
        left: 0;
        top: 0;
    }
    .dashboard-page .sidebar-logo {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--text-dark);
        text-decoration: none;
        padding: 15px 10px;
    }
    .dashboard-page .sidebar-links {
        margin-top: 30px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .dashboard-page .sidebar-link {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 12px 15px;
        border-radius: 8px;
        text-decoration: none;
        color: var(--text-light);
        font-weight: 600;
        transition: background-color 0.2s, color 0.2s;
    }
    .dashboard-page .sidebar-link i {
        font-size: 1.2rem;
    }
    .dashboard-page .sidebar-link:hover {
        background-color: var(--secondary-bg);
    }
    .dashboard-page .sidebar-link.active {
        background-color: var(--primary-color);
        color: white;
    }
    .dashboard-page .sidebar-logout {
        margin-top: auto;
    }
    .dashboard-page .sidebar-logout button {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 15px;
      padding: 12px 15px;
      border-radius: 8px;
      text-decoration: none;
      color: var(--text-light);
      font-weight: 600;
      transition: background-color 0.2s, color 0.2s;
    }
    .dashboard-page .sidebar-logout button:hover {
        background-color: var(--secondary-bg);
    }

    /* Adjust main content for sidebar */
    .dashboard-page .main-content {
        flex-grow: 1;
        margin-left: 240px;
        padding: 40px;
    }

    /* Show Desktop Header, Hide Mobile Header */
    .dashboard-page .mobile-header {
        display: none;
    }
    .dashboard-page .desktop-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;
    }
    .dashboard-page .desktop-header h1 {
        font-size: 2rem;
        margin: 0;
    }
    .dashboard-page .desktop-header .user-info {
        font-weight: 600;
    }

    /* Re-grid the dashboard cards for desktop */
    .dashboard-page .dashboard-grid {
        display: grid; /* Ensure display is set */
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "balance kpis"
            "activity activity";
        gap: 30px;
    }
    .dashboard-page .balance-card { 
        grid-area: balance; 
    }
    .dashboard-page .kpi-grid-container { /* This is the key change */
        grid-area: kpis; 
        margin-top: 0; /* Resetting mobile margin */
        margin-bottom: 0;
    }
    .dashboard-page .activity-card { 
        grid-area: activity; 
    }
}

/* --- MOBILE-ONLY CARDLESS STYLE ADJUSTMENT --- */

/* This media query targets mobile devices (screens 767px and smaller) */
@media screen and (max-width: 767px) {
    /* Select both the balance and chart cards specifically */
    .dashboard-page .balance-card,
    .dashboard-page .chart-card {
        background-color: transparent; /* Remove the white background */
        border: none;                  /* Remove the 1px border */
        box-shadow: none;              /* Remove any potential shadow */
        border-radius: 0;              /* Remove the rounded corners */
        padding: 0;                    /* Remove the card's internal padding */
    }

    /* Remove the bottom margin from the balance card to connect it to the chart */
    .dashboard-page .balance-card {
        margin-bottom: 0;
    }
    
    /* Ensure consistent spacing between the chart and the activity card below it */
    .dashboard-page .chart-card {
        margin-bottom: 20px; 
    }

    /* --- ADD THIS NEW BLOCK TO CENTER THE TEXT --- */
    .dashboard-page .balance-header {
        text-align: center;
    }
    .dashboard-page .balance-amount,
    .dashboard-page .balance-subtitle {
        justify-content: center;
    }
    /* --- END OF NEW BLOCK --- */
}

/* --- MINIMALIST DESIGN REFINEMENTS (MOBILE-ONLY) --- */

@media screen and (max-width: 767px) {
    /* 1. Add space above the balance info */
    .dashboard-page .balance-card {
        margin-top: 30px; 
    }

    /* 2. Hide the Withdraw and Deposit buttons */
    .dashboard-page .balance-actions {
        display: none;
    }

    /* 3. Style the new SVG chart to give it a height */
    .dashboard-page .chart-svg {
        width: 100%;
        height: 150px; /* Give the chart a visible height */
        margin-top: 40px;
    }
    
    /* 4. Hide the "Earnings Over Time" title */
    .dashboard-page .chart-card .chart-header {
        display: none;
    }
    
    /* 5. Center the timespan buttons and move them below the chart */
    .dashboard-page .chart-timespan {
        width: fit-content; /* Make the container only as wide as its content */
        margin: 20px auto 0 auto; /* Center it horizontally with margin */
    }
}

/* --- SINGLE-PAGE APP & MY PORTS STYLES --- */

/* Utility class to hide sections */
.page-content.hidden {
    display: none;
}

/* My Ports List Styles */
.dashboard-page .ports-list {
    display: grid;
    gap: 20px;
}

.dashboard-page .port-item {
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 25px;
}

.dashboard-page .port-details {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-page .port-location {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.dashboard-page .port-id {
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 4px 0 0 0;
}

.dashboard-page .port-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.dashboard-page .port-info-item {
    display: flex;
    flex-direction: column;
}

.dashboard-page .port-label {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 5px;
}

.dashboard-page .port-value {
    font-size: 1.1rem;
    font-weight: 600;
    overflow-wrap: break-word;  /* Standard property to wrap long words */
    word-break: break-word;     /* Forces break for very long strings like Crypto addresses */
    white-space: normal;        /* Ensures text is allowed to wrap */
    max-width: 100%;            /* Ensures it stays within the container */
    display: block;             /* Helps container calculate width correctly */
}

.dashboard-page .port-status {
    display: inline-block;
    width: fit-content;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.dashboard-page .status-active {
    background-color: #e0f5ea;
    color: #158a4a;
}

.dashboard-page .status-construction {
    background-color: #fff3cd;
    color: #856404;
}

.dashboard-page .status-pending-approval {
    background-color: #e3e8f7;
    color: #3b5bdb;
}

/* Responsive Styles for My Ports */
@media screen and (max-width: 500px) {
    .dashboard-page .port-info-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on small mobile */
    }
}

/* --- PORT DETAILS MODAL STYLES --- */

.dashboard-page .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dashboard-page .modal-overlay:not(.hidden) {
    opacity: 1;
}

.dashboard-page .modal-content {
    background-color: var(--card-bg);
    border-radius: 16px;
    padding: 0; /* REMOVE global padding here, we will move it to children */
    width: 100%;
    max-width: 550px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transform: scale(1);
    transition: transform 0.3s ease;
    
    /* NEW FLEX PROPERTIES FOR SCROLLING */
    display: flex;
    flex-direction: column;
    max-height: 90vh; /* Limits height to 90% of screen height */
    position: relative;
}

.dashboard-page .modal-overlay:not(.hidden) .modal-content {
    transform: scale(1);
}

.dashboard-page .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 25px 30px 20px 30px; /* Add padding here */
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0; /* Prevents header from shrinking */
    margin-bottom: 0; /* Reset margin */
}
.dashboard-page .modal-header h2 { margin: 0; font-size: 1.5rem; }

.dashboard-page .modal-body {
    padding: 20px 30px; /* Add padding here */
    overflow-y: auto;   /* Enable vertical scrolling */
    flex-grow: 1;       /* Take up remaining space */
    
    /* Reset the previous specific max-height if it existed */
    max-height: none !important; 
}
.dashboard-page .modal-close-button {
    background: none;
    border: none;
    font-size: 2.5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--text-light);
    cursor: pointer;
}

.dashboard-page .modal-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.dashboard-page .modal-actions {
    margin-top: 0;
    padding: 20px 30px 30px 30px; /* Add padding here */
    border-top: 1px solid var(--border-color); /* Optional: Adds line above button */
    flex-shrink: 0; /* Prevents button area from shrinking */
    background-color: var(--card-bg); /* Ensures background covers scrolling content */
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

@media screen and (max-width: 479px) {
    .dashboard-page .modal-content {
        max-height: 85vh; /* Slightly smaller on mobile to account for browser bars */
        width: 95%; /* Use almost full width */
    }
    
    .dashboard-page .modal-header,
    .dashboard-page .modal-body,
    .dashboard-page .modal-actions {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* New Status Badge for "Inactive" */
.dashboard-page .status-inactive {
    background-color: #eef0f3; /* Light grey */
    color: #6c757d; /* Dark grey */
}

/* New Action Button Styles */
.dashboard-page .btn.btn-danger {
    background-color: #d93025; /* Red for deactivation */
    color: white;
}
.dashboard-page .btn.btn-success {
    background-color: #1e8e3e; /* Green for activation */
    color: white;
}

/* In your style.css file */

.modal-overlay.hidden {
  display: none;
}

/* --- WALLET PAGE STYLES --- */

.dashboard-page .wallet-summary-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.dashboard-page .wallet-balance-info .balance-amount {
    margin-top: 5px;
}

.dashboard-page .wallet-actions {
    display: flex;
    gap: 15px;
}
.dashboard-page .wallet-actions .btn {
    flex: 1; /* Make buttons take equal space */
}

.dashboard-page .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 25px;
    border-bottom: 1px solid var(--border-color);
}
.dashboard-page .card-header h3 {
    margin: 0;
    font-size: 1.1rem;
}
.dashboard-page .btn.btn-sm {
    padding: 6px 14px;
    font-size: 0.8rem;
}
.dashboard-page .btn-outline {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-dark);
}
.dashboard-page .btn-outline:hover {
    background-color: var(--secondary-bg);
    border-color: var(--secondary-bg);
}

.dashboard-page .linked-accounts-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dashboard-page .linked-account-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
}
.dashboard-page .linked-account-item:last-child {
    border-bottom: none;
}
.dashboard-page .linked-account-item i {
    font-size: 1.25rem;
    color: var(--text-light);
}
.dashboard-page .account-details p {
    margin: 0;
    font-weight: 500;
}
.dashboard-page .account-details span {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* Make activity list inside card have borders */
.dashboard-page .card .activity-list .activity-item {
    padding: 15px 25px;
}
.dashboard-page .card .activity-list .activity-item:first-child {
    padding-top: 20px;
}
.dashboard-page .card .activity-list .activity-item:last-child {
    border-bottom: none;
    padding-bottom: 20px;
}

/* Styling for the Transaction Filter */
.dashboard-page .transaction-filter-wrapper select {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-bg);
    color: var(--text-dark);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    
    /* Remove default appearance for custom arrow (optional but cleaner) */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236c757d%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px;
    padding-right: 30px; /* Make room for arrow */
}

.dashboard-page .transaction-filter-wrapper select:hover {
    background-color: #e2e6ea;
}

.dashboard-page .transaction-filter-wrapper select:focus {
    border-color: var(--primary-color);
}

/* Modal Form Styles */
.dashboard-page .modal-content .form-group {
    margin-bottom: 15px;
}
.dashboard-page .modal-content label {
    display: block;
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 8px;
}
.dashboard-page .modal-content input,
.dashboard-page .modal-content select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-bg);
    font-size: 1rem;
    color: var(--text-dark);
}
.dashboard-page .modal-content input:focus,
.dashboard-page .modal-content select:focus {
    outline: none;
    border-color: var(--primary-color);
}
.dashboard-page .modal-content .input-hint {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 10px;
}


/* Responsive adjustments for Wallet */
@media screen and (min-width: 768px) {
    .dashboard-page .wallet-summary-card {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* --- DASHBOARD STYLES --- */
.dashboard-page {
    --primary-color: #1e1e1e;
    --primary-dark: #333333;
    --secondary-bg: #f2f2f2;
    --card-bg: #ffffff;
    --border-color: #eef0f3;
    --text-dark: #1e1e1e;
    --text-light: #6c757d;
    --positive-green: #158a4a;
    --negative-red: #d93025;
    background-color: var(--secondary-bg);
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    padding-bottom: 80px;
    opacity: 0; /* Initially hidden for fade-in */
}
.dashboard-page .bottom-nav { display: flex; justify-content: space-around; align-items: center; position: fixed; bottom: 0; left: 0; right: 0; height: 65px; background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--border-color); z-index: 1000; }
.dashboard-page .nav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-light); text-decoration: none; font-size: 0.65rem; gap: 4px; transition: color 0.2s; padding: 0 10px; }
.dashboard-page .nav-link.active { color: var(--primary-color); }
.dashboard-page .nav-link i { font-size: 1.25rem; }
.dashboard-page .nav-link-primary { background-color: var(--primary-color); color: white; width: 50px; height: 50px; border-radius: 50%; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
.dashboard-page .nav-link-primary:hover { background-color: var(--primary-dark); }
.dashboard-page .nav-link-primary i { font-size: 1.5rem; }
.dashboard-page .sidebar-nav { display: none; }
.dashboard-page #logout-button-desktop { background: none; border: none; cursor: pointer; padding: 0; }
.dashboard-page .main-content { padding: 20px; }
.dashboard-page .desktop-header { display: none; }
.dashboard-page .mobile-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.dashboard-page .mobile-header .user-info p { margin: 0; font-size: 1rem; color: var(--text-light); }
.dashboard-page .mobile-header .user-info h1 { margin: 0; font-size: 1.75rem; font-weight: 700; letter-spacing: -1px; white-space: normal; line-height: 1.2; }
.dashboard-page .logout-icon { background: none; border: none; font-size: 1.25rem; color: var(--text-light); padding: 10px; }
.dashboard-page .card { background-color: var(--card-bg); border-radius: 16px; padding: 25px; border: 1px solid var(--border-color); margin-bottom: 20px; }
.dashboard-page .dashboard-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.dashboard-page .balance-card .balance-header p { margin: 0; color: var(--text-light); }
.dashboard-page .balance-card .balance-amount { display: flex; align-items: flex-start; margin: 10px 0; }
.dashboard-page .balance-card .balance-amount span { font-size: 2rem; font-weight: 600; margin-right: 4px; margin-top: 5px; }
.dashboard-page .balance-card .balance-amount p { font-size: 3.5rem; font-weight: 700; line-height: 1; margin: 0; }
.dashboard-page .balance-card .balance-subtitle { display: flex; align-items: center; gap: 8px; color: var(--positive-green); font-weight: 600; }
.dashboard-page .balance-card .balance-subtitle p { margin: 0; }
.dashboard-page .balance-actions { display: flex; gap: 15px; margin-top: 25px; }
.dashboard-page .btn { display: inline-flex; justify-content: center; align-items: center; width: 100%; padding: 15px; font-size: 1rem; font-weight: 600; border-radius: 12px; border:none; cursor:pointer; }
.dashboard-page .btn i { margin-right: 8px; }
.dashboard-page .btn-primary { background-color: var(--primary-color); color: white; }
.dashboard-page .btn-primary:hover { background-color: var(--primary-dark); }
.dashboard-page .btn-secondary { background-color: #eef0f3; color: var(--text-dark); }
.dashboard-page .chart-card .chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.dashboard-page .chart-card h3 { margin: 0; font-size: 1.1rem; }
.dashboard-page .chart-timespan { display: flex; background-color: var(--secondary-bg); border-radius: 8px; padding: 4px; }
.dashboard-page .timespan-btn { background: none; border: none; padding: 6px 12px; border-radius: 6px; font-weight: 600; color: var(--text-light); cursor: pointer; }
.dashboard-page .timespan-btn.active { background-color: var(--card-bg); color: var(--text-dark); box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
.dashboard-page .chart-svg { width: 100%; height: 150px; margin-top: 40px; }
.dashboard-page .activity-card h3 { font-size: 1.1rem; margin: 0 0 15px 0; }
.dashboard-page .activity-list { list-style: none; padding: 0; margin: 0; }
.dashboard-page .activity-item { display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid var(--border-color); }
.dashboard-page .activity-item:last-child { border-bottom: none; }
.dashboard-page .activity-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px; }
.dashboard-page .activity-details { flex-grow: 1; }
.dashboard-page .activity-details p { margin: 0; font-weight: 600; }
.dashboard-page .activity-details span { font-size: 0.8rem; color: var(--text-light); }
.dashboard-page .activity-amount { font-weight: 600; white-space: nowrap; }
.dashboard-page .activity-amount.positive { color: var(--positive-green); }
.dashboard-page .activity-amount.negative { color: var(--negative-red); }
.dashboard-page .page-content.hidden { display: none; }
.dashboard-page .ports-list { display: grid; gap: 20px; }
.dashboard-page .port-item { background-color: var(--card-bg); border-radius: 12px; border: 1px solid var(--border-color); padding: 25px; cursor: pointer; }
.dashboard-page .port-details { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.dashboard-page .port-location { font-size: 1.25rem; font-weight: 600; margin: 0; }
.dashboard-page .port-id { font-size: 0.9rem; color: var(--text-light); margin: 4px 0 0 0; }
.dashboard-page .port-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dashboard-page .port-info-item { display: flex; flex-direction: column; }
.dashboard-page .port-label { font-size: 0.8rem; color: var(--text-light); margin-bottom: 5px; }
.dashboard-page .port-value { font-size: 1.1rem; font-weight: 600; }
.dashboard-page .port-status { display: inline-block; width: fit-content; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.dashboard-page .status-active { background-color: #e0f5ea; color: #158a4a; }
.dashboard-page .status-inactive { background-color: #eef0f3; color: #6c757d; }
.dashboard-page .status-construction { background-color: #fff3cd; color: #856404; }
.dashboard-page .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.6); display: flex; justify-content: center; align-items: center; z-index: 2000; padding: 20px; opacity: 1; transition: opacity 0.3s ease; }
.dashboard-page .modal-overlay.hidden { opacity: 0; pointer-events: none; }
.dashboard-page .modal-content { background-color: var(--card-bg); border-radius: 16px; padding: 30px; width: 100%; max-width: 550px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); transform: scale(1); transition: transform 0.3s ease; }
.dashboard-page .modal-overlay.hidden .modal-content { transform: scale(0.95); }
.dashboard-page .modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.dashboard-page .modal-header h2 { margin: 0; font-size: 1.5rem; }
.dashboard-page .modal-close-button { background: none; border: none; font-size: 2.5rem; font-weight: 300; line-height: 1; color: var(--text-light); cursor: pointer; }
.dashboard-page .modal-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; }
.dashboard-page .modal-actions { margin-top: 30px; }
.dashboard-page .btn.btn-danger { background-color: #d93025; color: white; }
.dashboard-page .btn.btn-success { background-color: #1e8e3e; color: white; }
.dashboard-page .wallet-summary-card { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.dashboard-page .wallet-balance-info .balance-amount { margin-top: 5px; }
.dashboard-page .wallet-actions { display: flex; gap: 15px; }
.dashboard-page .wallet-actions .btn { flex: 1; }
.dashboard-page .card-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 25px; border-bottom: 1px solid var(--border-color); }
.dashboard-page .card-header h3 { margin: 0; font-size: 1.1rem; }
.dashboard-page .btn.btn-sm { padding: 6px 14px; font-size: 0.8rem; width: auto; }
.dashboard-page .btn-outline { background: transparent; border: 1px solid var(--border-color); color: var(--text-dark); }
.dashboard-page .btn-outline:hover { background-color: var(--secondary-bg); border-color: var(--secondary-bg); }
.dashboard-page .card-content { padding: 0 25px 10px; }
.dashboard-page .linked-accounts-list { list-style: none; padding: 0; margin: 0; }
.dashboard-page .linked-account-item { display: flex; align-items: center; gap: 15px; padding: 15px 0; border-bottom: 1px solid var(--border-color); }
.dashboard-page .linked-account-item:last-child { border-bottom: none; }
.dashboard-page .linked-account-item i { font-size: 1.25rem; color: var(--text-light); }
.dashboard-page .account-details p { margin: 0; font-weight: 500; }
.dashboard-page .account-details span { font-size: 0.8rem; color: var(--text-light); }
.dashboard-page .card .activity-list .activity-item { padding: 15px 25px; }
.dashboard-page .modal-content .form-group { margin-bottom: 20px; }
.dashboard-page .modal-content label { display: block; font-size: 0.9rem; font-weight: 500; margin-bottom: 8px; }
.dashboard-page .modal-content input, .dashboard-page .modal-content select { width: 100%; padding: 12px 15px; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--secondary-bg); font-size: 1rem; color: var(--text-dark); -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.dashboard-page .modal-content select { background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238e8e8e%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E'); background-repeat: no-repeat; background-position: right 15px top 50%; background-size: .65em auto; padding-right: 40px; }
.dashboard-page .modal-content input:focus, .dashboard-page .modal-content select:focus { outline: none; border-color: var(--primary-color); }
.dashboard-page .modal-content .input-hint { font-size: 0.8rem; color: var(--text-light); margin-top: 15px; text-align: center; }

@media screen and (max-width: 767px) {
    .dashboard-page .balance-card, .dashboard-page .chart-card { background-color: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; }
    .dashboard-page .balance-card { margin-bottom: 0; margin-top: 30px; }
    .dashboard-page .chart-card { margin-bottom: 20px; }
    .dashboard-page .balance-header { text-align: center; }
    .dashboard-page .balance-amount, .dashboard-page .balance-subtitle { justify-content: center; }
    .dashboard-page .balance-actions { display: none; }
    .dashboard-page .chart-card .chart-header { display: none; }
    .dashboard-page .chart-timespan { width: fit-content; margin: 20px auto 0 auto; }
}
@media screen and (max-width: 500px) { .dashboard-page .port-info-grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (min-width: 768px) {
    .dashboard-page { display: flex; padding-bottom: 0; }
    .dashboard-page .bottom-nav { display: none; }
    .dashboard-page .sidebar-nav { display: flex; flex-direction: column; width: 240px; background-color: var(--card-bg); border-right: 1px solid var(--border-color); padding: 20px; height: 100vh; position: fixed; left: 0; top: 0; }
    .dashboard-page .sidebar-logo { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); text-decoration: none; padding: 15px 10px; }
    .dashboard-page .sidebar-links { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
    .dashboard-page .sidebar-link { display: flex; align-items: center; gap: 15px; padding: 12px 15px; border-radius: 8px; text-decoration: none; color: var(--text-light); font-weight: 600; transition: background-color 0.2s, color 0.2s; }
    .dashboard-page .sidebar-link i { font-size: 1.2rem; width: 20px; text-align: center; }
    .dashboard-page .sidebar-link:hover { background-color: var(--secondary-bg); }
    .dashboard-page .sidebar-link.active { background-color: var(--primary-color); color: white; }
    .dashboard-page .sidebar-logout { margin-top: auto; }
    .dashboard-page .sidebar-logout button { width: 100%; display: flex; align-items: center; gap: 15px; padding: 12px 15px; border-radius: 8px; text-decoration: none; color: var(--text-light); font-weight: 600; transition: background-color 0.2s, color 0.2s; font-family: 'Inter', sans-serif; font-size: 1rem; }
    .dashboard-page .sidebar-logout button:hover { background-color: var(--secondary-bg); }
    .dashboard-page .main-content { flex-grow: 1; margin-left: 240px; padding: 40px; }
    .dashboard-page .mobile-header { display: none; }
    .dashboard-page .desktop-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
    .dashboard-page .desktop-header h1 { font-size: 2rem; margin: 0; }
    .dashboard-page .desktop-header .user-info { font-weight: 600; }
    .dashboard-page .dashboard-grid { grid-template-columns: repeat(2, 1fr); grid-template-areas: "balance chart" "activity activity"; gap: 30px; }
    .dashboard-page .card { margin-bottom: 0; }
    .dashboard-page .balance-card { grid-area: balance; }
    .dashboard-page .chart-card { grid-area: chart; }
    .dashboard-page .activity-card { grid-area: activity; }
    .dashboard-page .wallet-summary-card { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* --- CUSTOM DASHBOARD & PROFILE STYLES --- */

/* --- Base Fixes & Styles --- */
.dashboard-page .wallet-summary-card .balance-amount { display: flex; align-items: baseline; gap: 4px; }
.dashboard-page .wallet-summary-card .balance-amount span { font-size: 1.75rem; font-weight: 600; line-height: 1; }
.dashboard-page .wallet-summary-card .balance-amount p { font-size: 3rem; font-weight: 700; line-height: 1; }
.dashboard-page .wallet-balance-info { display: flex; flex-direction: column; align-items: center; width: 100%; }
.dashboard-page .card-header { gap: 1rem; }
.dashboard-page .payment-options { display: flex; gap: 1rem; margin: 1.5rem 0; }
.dashboard-page .payment-options .btn { flex: 1; }
.dashboard-page .payment-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
.dashboard-page .payment-instruction { margin-bottom: 1rem; color: var(--text-light); font-size: 0.9rem; line-height: 1.5; text-align: center; }
.dashboard-page .address-container { display: flex; gap: 0.5rem; }
.dashboard-page .address-container input { font-family: monospace; flex-grow: 1; }
.dashboard-page .address-container .btn { flex-shrink: 0; width: auto; padding: 10px 15px; }
.dashboard-page .withdrawal-section { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
.dashboard-page .amount-input-group { display: flex; align-items: center; gap: 1rem; }
.dashboard-page .balance-display { color: var(--text-light); font-size: 0.9rem; white-space: nowrap; }
.dashboard-page .toggle-switch-container { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding: 12px 15px; border-radius: 8px; background-color: var(--secondary-bg); }
.dashboard-page .toggle-switch-container label { margin-bottom: 0; font-weight: 500; }
.dashboard-page .toggle-switch { position: relative; display: inline-block; width: 50px; height: 28px; }
.dashboard-page .toggle-switch input { opacity: 0; width: 0; height: 0; }
.dashboard-page .toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 28px; }
.dashboard-page .toggle-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 4px; bottom: 4px; background-color: white; transition: .4s; border-radius: 50%; }
.dashboard-page input:checked + .toggle-slider { background-color: var(--primary-color); }
.dashboard-page input:checked + .toggle-slider:before { transform: translateX(22px); }
.dashboard-page .view-account-details .detail-item { display: flex; justify-content: space-between; padding: 15px 0; border-bottom: 1px solid var(--border-color); }
.dashboard-page .view-account-details .detail-item:last-of-type { border-bottom: none; }
.dashboard-page .view-account-details .detail-label { color: var(--text-light); font-weight: 500; }
.dashboard-page .view-account-details .detail-value { font-weight: 600; }
.dashboard-page .linked-account-item { cursor: pointer; }
.dashboard-page .input-hint { font-size: 0.8rem; color: var(--text-light); margin-top: 5px; padding-left: 2px; }
.dashboard-page .activity-details p { overflow-wrap: break-word; }

/* --- PROFILE PAGE & TABS STYLES --- */
.dashboard-page .profile-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); }
.dashboard-page .profile-tab-link { background: none; border: none; padding: 1rem; font-size: 1rem; font-weight: 600; color: var(--text-light); cursor: pointer; position: relative; }
.dashboard-page .profile-tab-link.active { color: var(--text-dark); }
.dashboard-page .profile-tab-link.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--primary-color); }
.dashboard-page .profile-picture-container { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 2rem; }
.dashboard-page .profile-picture-wrapper { position: relative; width: 120px; height: 120px; }
.dashboard-page .profile-picture { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background-color: var(--secondary-bg); border: 2px solid var(--border-color); }
.dashboard-page .profile-picture-upload-btn { position: absolute; bottom: 0; right: 0; background-color: var(--primary-color); color: white; border: none; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.dashboard-page .profile-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media screen and (min-width: 768px) { .dashboard-page .profile-grid { grid-template-columns: 1fr 1fr; } }

/* --- PROFILE PAGE HEADING SPACING FIX --- */
.dashboard-page #profile-content .card h2 {
    font-size: 1rem;              /* Adjusts the font size to be more suitable */
    font-weight: 600;             /* Makes the font a bit bolder */
    text-transform: uppercase;    /* Keeps the all-caps style */
    color: var(--text-light);     /* Changes the color to a lighter grey for better hierarchy */
    letter-spacing: 0.8px;        /* THIS IS THE KEY FIX: It adds space between letters */
    margin-bottom: 1.5rem;        /* Adds some space below the heading */
    margin-top: 2rem;             /* Adds space above the heading */
    padding-bottom: 0.5rem;       /* Adds a little space before the border */
    border-bottom: 1px solid var(--border-color); /* Adds a subtle separator line */
}

/* This removes the extra top margin from the very first heading in each card */
.dashboard-page #profile-content .card h2:first-child {
    margin-top: 0;
}

/* --- KYC SECTION STYLES --- */
.dashboard-page .kyc-status-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.9rem; font-weight: 600; text-transform: capitalize; }
.dashboard-page .kyc-status-badge.verified { background-color: #e0f5ea; color: #158a4a; }
.dashboard-page .kyc-status-badge.pending { background-color: #fff3cd; color: #856404; }
.dashboard-page .kyc-status-badge.unverified { background-color: #f7e3e3; color: #db3b3b; }
.dashboard-page .kyc-upload-area { text-align: center; border: 2px dashed var(--border-color); border-radius: 8px; padding: 2rem; }
.dashboard-page .kyc-upload-area .fa-id-card { font-size: 2.5rem; color: var(--text-light); margin-bottom: 1rem; }

/* --- REFERRALS SECTION STYLES --- */
.dashboard-page .referral-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.dashboard-page .stat-card { background-color: var(--secondary-bg); padding: 1.5rem; border-radius: 12px; text-align: center; }
.dashboard-page .stat-card .stat-value { font-size: 2rem; font-weight: 700; margin: 0; }
.dashboard-page .stat-card .stat-label { font-size: 0.9rem; color: var(--text-light); margin: 0; }
.dashboard-page .referral-link-container { display: flex; gap: 0.5rem; margin-top: 1rem; }
.dashboard-page .referral-link-container input { flex-grow: 1; }
.dashboard-page .referral-link-container .btn { width: auto; flex-shrink: 0; }
.dashboard-page .card h2 { font-size: 1.25rem; margin-top:0; }

/* --- UNIFIED DASHBOARD FORM STYLES (REPLACES MODAL-ONLY STYLES) --- */
.dashboard-page .form-group {
    margin-bottom: 1.25rem;
}
.dashboard-page .form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600; /* Made slightly bolder for clarity */
    margin-bottom: 8px;
    color: var(--text-dark);
}
.dashboard-page .form-group input,
.dashboard-page .form-group select {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-bg);
    font-size: 1rem;
    color: var(--text-dark);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.dashboard-page .form-group input:focus,
.dashboard-page .form-group select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.1);
}
.dashboard-page .form-group select {
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%238e8e8e%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22/%3E%3C/svg%3E');
    background-repeat: no-repeat;
    background-position: right 15px top 50%;
    background-size: .65em auto;
    padding-right: 40px;
}
.dashboard-page .form-group input[readonly] {
    background-color: #e9ecef;
    cursor: not-allowed;
}

/* --- CUSTOM DASHBOARD & PROFILE STYLES --- */
.dashboard-page .wallet-summary-card .balance-amount { display: flex; align-items: baseline; gap: 4px; }
.dashboard-page .wallet-summary-card .balance-amount span { font-size: 1.75rem; font-weight: 600; line-height: 1; }
/* ... (rest of your custom CSS from the previous step) ... */

/* --- INVEST PAGE STYLES --- */
.dashboard-page .invest-step .step-header h2 {
    font-size: 1.5rem; /* Makes the step title smaller */
    letter-spacing: normal; /* Resets the squished letter spacing */
    line-height: 1.3;
}

.dashboard-page .package-card .package-details h3 {
    margin-top: 15px; /* THIS IS THE FIX: Adds space below the image */
}

.dashboard-page .invest-step .step-header {
    margin-bottom: 1.5rem; /* Adds space between the header text and the card below it */
}

.dashboard-page .invest-step .step-header h2 {
    /* ... existing rule ... */
}

.dashboard-page .package-card .package-details h3 {
    /* ... existing rule ... */
}

/* NEW styles for the Order Summary */
.dashboard-page .summary-details {
    margin: 1.5rem 0;
}
.dashboard-page .summary-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-color);
}
.dashboard-page .summary-item:last-child {
    border-bottom: none;
}
.dashboard-page .summary-item.total {
    font-size: 1.1rem;
}
.dashboard-page .summary-item span {
    color: var(--text-light);
}

/* NEW styles for the "What Happens Next" box */
.dashboard-page .what-happens-next {
    background-color: var(--secondary-bg);
    border-radius: 8px;
    padding: 1rem;
    margin: 1.5rem 0;
}
.dashboard-page .what-happens-next h4 {
    margin-top: 0;
    margin-bottom: 0.5rem;
}
.dashboard-page .what-happens-next p {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* NEW styles to fix the checkbox alignment */
.dashboard-page .terms-agreement {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Space between checkbox and text */
    margin-bottom: 1.5rem;
}
.dashboard-page .terms-agreement input[type="checkbox"] {
    width: auto; /* Allow checkbox to be its natural size */
    margin-bottom: 0;
}
.dashboard-page .terms-agreement label {
    margin-bottom: 0;
    font-weight: 500;
}

/* ADD THIS NEW RULE TO FIX THE BUTTON SIZES */
.dashboard-page .form-navigation .btn {
    padding: 12px 10px;  /* Reduces the button height and inner spacing */
    font-size: 0.9rem;   /* Makes the text slightly smaller to prevent wrapping */
}

/* --- INVEST PAGE STEP 4 ALIGNMENT --- */
.dashboard-page .success-message-card .step-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.dashboard-page .success-message-card .step-title-wrapper h2 {
    margin: 0; /* Removes default heading margins */
}

/* --- WALLET PAGE BUTTON CENTERING --- */
.dashboard-page .wallet-actions {
    display: flex;
    gap: 15px;
    justify-content: center; /* This centers the button(s) inside */
}

.dashboard-page .wallet-actions .btn {
    flex: 0 1 220px; /* Prevents the button from growing to full width */
}

/* --- NEW CHART STYLES --- */
.dashboard-page .chart-card .chart-header {
    text-align: center;
    border-bottom: none;
    padding: 0;
    margin-bottom: 0;
}
.dashboard-page .chart-card .chart-header h3 {
    font-size: 2.5rem;
    font-weight: 700;
}
.dashboard-page .chart-card .chart-header p {
    margin: 5px 0 0 0;
    font-weight: 600;
}
.dashboard-page .chart-card .chart-header p.positive {
    color: var(--positive-green);
}
.dashboard-page .chart-card .chart-header p.negative {
    color: var(--negative-red);
}
#earnings-chart {
    margin-top: -20px; /* Pulls chart up slightly */
    margin-bottom: 20px;
}

/* --- CORRECTED CHART STYLES --- */
#earnings-chart {
    margin: 10px 0;
}

/* This hides the empty text from the custom tooltip, leaving only the line */
.apexcharts-tooltip.apexcharts-active {
    display: none;
}

/* --- DESKTOP UI POLISH & LAYOUT ENHANCEMENTS (CORRECTED V2) --- */

/* 1. Universal Modal Title Fix */
.dashboard-page .modal-header h2 {
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* 2. CRITICAL MOBILE DASHBOARD FIX */
@media screen and (max-width: 767px) {
    /* This block restores the mobile dashboard's Available Balance view */
    .dashboard-page .chart-card .chart-header {
        display: block; /* Re-enables the header container */
    }
    .dashboard-page .chart-card .balance-info-wrapper {
        display: block; /* Ensures the balance info is visible */
        text-align: center; /* Re-centers the text content */
    }
    .dashboard-page .chart-card .balance-amount,
    .dashboard-page .chart-card .balance-subtitle {
        justify-content: center; /* Re-centers the flex items */
    }
    .dashboard-page .chart-card .chart-totals-wrapper {
        display: none; /* Explicitly hides the redundant chart totals on mobile */
    }
}

/* --- FINAL DESKTOP UI & LAYOUT ENHANCEMENTS V3 --- */

/* 1. Universal Modal Title Fix (Applies Everywhere) */
.dashboard-page .modal-header h2 {
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* 2. DESKTOP-ONLY STYLES (Will not affect mobile) */
@media screen and (min-width: 768px) {

    /* 2.1 Dashboard Page: Corrected Layout */
.dashboard-page #home-content .dashboard-grid {
    grid-template-columns: 1fr 1fr; /* Two columns */
    grid-template-areas:
        "balance kpis" /* <-- CHANGED "chart" to "kpis" */
        "activity activity";
    gap: 30px;
}
.dashboard-page .balance-card { grid-area: balance; }
/* The .chart-card rule is removed */
.dashboard-page .kpi-grid-container { grid-area: kpis; } /* <-- ADDED THIS LINE */
.dashboard-page .activity-card { grid-area: activity; }

    /* Style the balance card to be the "hero" */
    .dashboard-page .balance-card {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Center the content vertically */
    }
    .dashboard-page .balance-card .balance-amount p {
        font-size: 3.5rem;
    }
    .dashboard-page .balance-card .balance-amount span {
        font-size: 2rem;
    }
    .dashboard-page .balance-card .balance-subtitle {
        font-size: 1rem;
        color: var(--positive-green); /* Ensure color is applied */
        font-weight: 600;
    }
    .dashboard-page .balance-card .balance-actions {
        display: none; /* Hide withdraw/deposit buttons on dashboard */
    }

    /* Hide the redundant header on the chart card */
    .dashboard-page .chart-card .chart-header {
        display: none;
    }

    /* 2.2 Wallet Page: Layout & Button Fixes */
    .dashboard-page #wallet-content .wallet-layout-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        margin-bottom: 30px;
    }
    .dashboard-page #wallet-content .wallet-summary-card {
        margin-bottom: 0;
    }
    .dashboard-page #wallet-content .wallet-balance-info {
        align-items: flex-start;
    }
    .dashboard-page #wallet-content .wallet-actions .btn {
        flex-grow: 0;
        width: auto;
        padding-left: 30px;
        padding-right: 30px;
    }
    .dashboard-page #wallet-content .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .dashboard-page #wallet-content #add-account-btn {
        padding: 8px 16px;
        font-size: 0.875rem;
        flex-shrink: 0;
    }

    /* 2.3 Invest Page: Package Size & Button Alignment */
    .dashboard-page .package-selection-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        align-items: stretch;
    }
    .dashboard-page .package-card {
        display: flex;
        flex-direction: column;
    }
    .dashboard-page .package-image {
        max-height: 280px;
        width: 100%;
        object-fit: contain;
    }
    .dashboard-page .package-details {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    .dashboard-page .package-features {
        flex-grow: 1;
    }
    .dashboard-page .select-package-btn {
        margin-top: auto;
    }

    /* 2.4 Profile Page: Spacing Between Cards */
    .dashboard-page #profile-settings-content .profile-cards-wrapper {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
}

@media (max-width: 768px) { /* Adjust the max-width as needed for your definition of mobile */
  #chart-total-earnings {
    display: none;
  }

  #chart-comparison {
    display: none;
  }
}

/* --- CHARGESHARE ADMIN PANEL STYLES (V3 - FINAL) --- */
/* --- THIS IS THE START OF THE ADMIN-SPECIFIC STYLES --- */

.admin-page {
    display: flex;
    background-color: #f2f2f2; /* Use a variable from the dashboard theme */
    opacity: 0;
    transition: opacity 0.3s;
    min-height: 100vh;
}

/* --- OVERRIDES & DEFAULTS --- */
.admin-page h1, 
.admin-page .desktop-header h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    letter-spacing: -1px !important;
    text-transform: none !important;
    white-space: normal !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Specific fix for modal title */
.admin-page .modal-header #admin-modal-title {
    font-size: 1.5rem !important; /* Make modal titles smaller */
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.admin-page .main-content {
    width: 100%;
    flex-grow: 1;
    padding: 40px;
    height: 100vh;
    overflow-y: auto;
}

/* Re-using dashboard variables for consistency */
.admin-page {
    --primary-color: #1e1e1e;
    --secondary-bg: #f2f2f2;
    --card-bg: #ffffff;
    --border-color: #eef0f3;
    --text-dark: #1e1e1e;
    --text-light: #6c757d;
    --positive-green: #158a4a;
    --negative-red: #d93025;
    --info-blue: #3b5bdb;
}

/* Use the same form group styles as the dashboard */
.admin-page .form-group {
    margin-bottom: 1.25rem;
}
.admin-page .form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-dark);
}
.admin-page .form-group input,
.admin-page .form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: #FFF;
    font-size: 1rem;
    color: var(--text-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-page .form-group input:focus,
.admin-page .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.1);
}

/* --- DESKTOP SIDEBAR --- */
.admin-page .sidebar-nav {
    display: flex;
    flex-direction: column;
    width: 260px;
    background-color: var(--card-bg);
    border-right: 1px solid var(--border-color);
    padding: 20px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2002;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}
.admin-page .sidebar-logo { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); text-decoration: none; padding: 15px 10px; text-align: center; }
.admin-page .sidebar-links { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
.admin-page .sidebar-link { display: flex; align-items: center; gap: 15px; padding: 12px 15px; border-radius: 8px; text-decoration: none; color: var(--text-light); font-weight: 600; transition: background-color 0.2s, color 0.2s; }
.admin-page .sidebar-link i { font-size: 1.2rem; width: 20px; text-align: center; }
.admin-page .sidebar-link:hover { background-color: var(--secondary-bg); }
.admin-page .sidebar-link.active { background-color: var(--primary-color); color: white; }
.admin-page .sidebar-logout { margin-top: auto; }
.admin-page .sidebar-logout button { width: 100%; display: flex; align-items: center; gap: 15px; padding: 12px 15px; border-radius: 8px; color: var(--text-light); font-weight: 600; font-family: 'Inter', sans-serif; font-size: 1rem; background: none; border: none; cursor: pointer; transition: background-color 0.2s; }
.admin-page .sidebar-logout button:hover { background-color: var(--secondary-bg); }

/* --- MOBILE NAVIGATION --- */
.admin-mobile-header { display: none; }
.mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 2001; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; }
.admin-page.sidebar-open .sidebar-nav { transform: translateX(0); }
.admin-page.sidebar-open .mobile-overlay { opacity: 1; visibility: visible; }

/* --- MODAL STYLES (CORRECTED) --- */
.admin-page .modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; justify-content: center; align-items: center;
    z-index: 3000; padding: 20px;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.admin-page .modal-overlay:not(.hidden) { opacity: 1; pointer-events: auto; }
.admin-page .modal-content {
    background-color: var(--card-bg); border-radius: 16px;
    padding: 30px; width: 100%; max-width: 650px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transform: scale(0.95); transition: transform 0.3s ease;
    display: flex; flex-direction: column;
}
.admin-page .modal-overlay:not(.hidden) .modal-content { transform: scale(1); }
.admin-page .modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.admin-page .modal-close-button { background: none; border: none; font-size: 2.5rem; font-weight: 300; line-height: 1; color: var(--text-light); cursor: pointer; }
.admin-page .modal-body { overflow-y: auto; max-height: 75vh; padding-right: 15px; }
.admin-page .modal-card { background-color: var(--secondary-bg); border-radius: 12px; padding: 20px; margin-bottom: 20px; border: 1px solid var(--border-color); }
.admin-page .modal-card:last-child { margin-bottom: 0; }
.admin-page .modal-card h4 { margin-top: 0; margin-bottom: 15px; font-size: 1rem; font-weight: 600; color: var(--text-dark); }
.admin-page .modal-actions-group { display: flex; gap: 15px; margin-top: 20px;}
.admin-page .modal-actions-group .btn { flex: 1; }
.admin-page .kyc-viewer { margin-bottom: 15px; }
.admin-page .kyc-viewer img { max-width: 100%; height: auto; max-height: 250px; border-radius: 8px; border: 1px solid var(--border-color); cursor: pointer; }
.admin-page .modal-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); }
.admin-page .modal-tab-link { background: none; border: none; padding: 1rem; font-size: 1rem; font-weight: 600; color: var(--text-light); cursor: pointer; position: relative; }
.admin-page .modal-tab-link.active { color: var(--text-dark); }
.admin-page .modal-tab-link.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--primary-color); }
.admin-page .modal-tab-pane.hidden { display: none; }


/* --- DASHBOARD & TABLE STYLES --- */
.admin-page .card { background-color: var(--card-bg); border-radius: 16px; border: 1px solid var(--border-color); }
.admin-page .desktop-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.admin-page .admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }
.admin-page .stat-card { text-align: center; padding: 25px; }
.admin-page .stat-card .stat-value { font-size: 2.5rem; margin:0; font-weight: 700; }
.admin-page .stat-card .stat-label { margin: 5px 0 0 0; color: var(--text-light); }
.admin-page .admin-table-controls { padding: 20px 25px; border-bottom: 1px solid var(--border-color); }
.admin-page .admin-table-controls input { width: 100%; max-width: 400px; padding: 10px 15px; border-radius: 8px; border: 1px solid var(--border-color); background-color: var(--secondary-bg); font-size: 1rem; }
.admin-page .admin-table-container { overflow-x: auto; }
.admin-page .admin-table { width: 100%; border-collapse: collapse; }
.admin-page .admin-table th, .admin-page .admin-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; vertical-align: middle;}
.admin-page .admin-table thead th { font-size: 0.8rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; }
.admin-page .admin-table tbody tr:hover { background-color: var(--secondary-bg); }
.admin-page .status-badge { display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: capitalize; }
.admin-page .status-badge.status-verified, .admin-page .status-badge.status-active { background-color: #e0f5ea; color: #158a4a; }
.admin-page .status-badge.status-pending { background-color: #fff3cd; color: #856404; }
.admin-page .status-badge.status-rejected, .admin-page .status-badge.status-banned { background-color: #f7e3e3; color: #db3b3b; }
.admin-page .status-badge.status-not-submitted { background-color: #eef0f3; color: #6c757d; }
.admin-page .btn { display: inline-flex; justify-content: center; align-items: center; padding: 12px 20px; font-size: 1rem; font-weight: 600; border-radius: 8px; border:none; cursor:pointer; text-decoration: none; }
.admin-page .btn-sm { padding: 8px 16px; font-size: 0.875rem; }
.admin-page .btn i { margin-right: 8px; }
.admin-page .btn-primary { background-color: var(--primary-color); color: white; }
.admin-page .btn-success { background-color: var(--positive-green); color: white; }
.admin-page .btn-danger { background-color: var(--negative-red); color: white; }
.admin-page .btn-outline { background-color: transparent; color: var(--text-dark); border: 1px solid var(--border-color); }
.admin-page .empty-state, .admin-page .error-state { text-align: center; padding: 40px; }
.admin-page .empty-state { color: var(--text-light); }
.admin-page .error-state { color: var(--negative-red); font-weight: 500; }

/* --- RESPONSIVE BREAKPOINT --- */
@media screen and (min-width: 992px) {
    .admin-page .sidebar-nav { transform: translateX(0); }
    .admin-page .main-content { margin-left: 260px; }
}

@media screen and (max-width: 991px) {
    .admin-page .main-content { padding: 20px; padding-top: 80px; }
    .admin-page .desktop-header { display: none; }
    .admin-page .admin-mobile-header { display: flex; align-items: center; gap: 20px; position: fixed; top: 0; left: 0; right: 0; height: 60px; padding: 0 20px; background-color: var(--card-bg); border-bottom: 1px solid var(--border-color); z-index: 2000; }
    .admin-page .admin-menu-button { background: none; border: none; font-size: 1.5rem; color: var(--text-dark); cursor: pointer; }
    .admin-page .mobile-header-title { font-size: 1.2rem; font-weight: 600; }
}

.admin-page .user-info-grid {
    display: grid;
    grid-template-columns: max-content 1fr; /* Label column sized to content, value column takes rest */
    gap: 20px 30px; /* 20px vertical gap, 30px horizontal gap */
    align-items: center;
}

.admin-page .user-info-grid .info-item {
    display: contents; /* Allows children to be direct grid items */
}

.admin-page .user-info-grid .info-item strong {
    font-weight: 600;
    color: var(--text-light); /* Lighter color for the label */
    text-align: right;
}

.admin-page .user-info-grid .info-item span {
    font-weight: 500;
    color: var(--text-dark); /* Darker color for the value */
    overflow-wrap: break-word; /* Prevents long IDs from breaking layout */
}

/* --- ADMIN PANEL: MANAGE USER MODAL - USER PORTS SECTION --- */

/* 1. Main container for the list of ports */
.admin-page .user-ports-list {
    /* Removes default list styling */
    list-style: none;
    padding: 0;
    margin: 0;
    
    /* Creates space between each port card */
    display: flex;
    flex-direction: column;
    gap: 15px; 
}

/* 2. Individual port item styling (the "card") */
.admin-page .port-list-item {
    background-color: #f9f9f9; /* A slightly off-white background */
    border: 1px solid var(--border-color);
    border-radius: 12px; /* Consistent rounded corners */
    padding: 20px;
    display: grid; /* Use grid for flexible layout */
    grid-template-columns: 1fr auto; /* Info on left, button on right */
    grid-template-rows: auto auto; /* Two rows for content */
    align-items: center;
    gap: 5px 20px; /* 5px vertical gap, 20px horizontal */
}

/* 3. Port Location Name (e.g., "Freuchat Supermarket") */
.admin-page .port-list-item-name {
    grid-column: 1 / 2; /* Span the first column */
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0;
}

/* 4. Port Identifier (e.g., "#C-12") */
.admin-page .port-list-item-id {
    grid-column: 1 / 2; /* Span the first column, on the second row */
    font-family: monospace; /* Gives IDs a distinct, code-like look */
    font-size: 0.9rem;
    color: var(--text-light);
    margin: 0;
}

/* 5. Status Badge Container */
.admin-page .port-list-item-status {
    grid-column: 2 / 3; /* Second column */
    grid-row: 1 / 2;    /* First row */
    justify-self: end;  /* Aligns the badge to the right */
}

/* 6. Action Button */
.admin-page .port-list-item .btn {
    grid-column: 2 / 3; /* Second column */
    grid-row: 2 / 3;    /* Second row */
    width: auto;        /* Button should only be as wide as its text */
    padding: 8px 16px;  /* Make the button a bit smaller */
    font-size: 0.875rem;
}

/* --- ADMIN PANEL: SITE SETTINGS (IMPROVED STYLES) --- */

/* 1. Style the introductory header text inside the card */
.admin-page #admin-settings-content .card h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 5px 0;
}

.admin-page #admin-settings-content .card p {
    color: var(--text-light);
    margin: 0 0 30px 0; /* Add space below the description */
    font-size: 0.95rem;
    max-width: 600px; /* Improve readability */
    line-height: 1.5;
}

/* 2. Style individual form groups for better spacing */
.admin-page #site-settings-form .form-group {
    margin-bottom: 25px; /* Consistent spacing between fields */
}

/* 3. Style the labels to match the rest of the admin panel */
.admin-page #site-settings-form .form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-dark);
}

/* 4. Ensure input fields have a white background, consistent with other forms */
.admin-page #site-settings-form .form-group input {
    background-color: #FFFFFF;
}

/* 5. Style the container for the save button for proper alignment */
.admin-page #site-settings-form .modal-actions-group {
    border-top: 1px solid var(--border-color);
    padding-top: 25px;
    margin-top: 15px; /* Adjusts space above the separator line */
    display: flex;
    justify-content: flex-end; /* This aligns the button to the right */
}

/* 6. Ensure the button itself is not full-width */
.admin-page #site-settings-form .btn {
    width: auto; /* Allows the button to size to its content */
}

/* ===============================================
   Modal Body Scrolling Fix
   =============================================== */

/* This new class wraps the scrollable content inside the withdrawal modal */
.modal-body {
  /* 
    This prevents the modal body from growing too tall, especially on smaller screens. 
    60vh means it will be a maximum of 60% of the viewport's (browser window) height.
  */
  max-height: 60vh;

  /* 
    This is the key property. It adds a vertical scrollbar automatically, 
    but ONLY if the content inside is taller than the max-height set above.
  */
  overflow-y: auto;
}

/* ===============================================
   --- SUPPORT CHAT STYLES ---
   =============================================== */

/* 1. Main Chat Window Container */
.dashboard-page .chat-window {
    height: 350px; /* Defines the height of the chat area */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 15px;
    padding: 15px;
    overflow-y: auto; /* Adds a scrollbar if messages overflow */
    display: flex;
    flex-direction: column; /* Stacks messages vertically */
}

/* 2. Chat Input Form (Text field + Send button) */
.dashboard-page .chat-input-form {
    display: flex;
    align-items: center;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-bg);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.dashboard-page .chat-input-form:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.1);
}

.dashboard-page .chat-input-form input {
    flex-grow: 1;
    border: none;
    background: none;
    padding: 12px 15px;
    font-size: 1rem;
    color: var(--text-dark);
    outline: none;
}

.dashboard-page .chat-input-form .btn {
    border-radius: 0 6px 6px 0;
    flex-shrink: 0;
    box-shadow: none;
    border-left: 1px solid var(--border-color);
    height: 100%; /* Ensures button height matches the input field */
    width: auto;
}

/* 3. Individual Message Bubble Styles */
.dashboard-page .chat-bubble {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 18px;
    margin-top: 10px; /* Changed from margin-bottom for correct stacking */
    line-height: 1.5;
}

.dashboard-page .chat-bubble p {
    margin: 0;
    word-wrap: break-word; /* Prevents long words from overflowing */
}

.dashboard-page .chat-bubble span {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 5px;
}

/* User's messages (blue, on the right) */
.dashboard-page .chat-bubble.user {
    align-self: flex-end;
    background-color: #007bff; /* A standard blue for the user */
    color: white;
    border-bottom-right-radius: 4px; /* Gives it the "bubble" tail */
}
.dashboard-page .chat-bubble.user span {
    text-align: right;
}

/* Admin/Support messages (grey, on the left) */
.dashboard-page .chat-bubble.admin {
    align-self: flex-start;
    background-color: var(--secondary-bg);
    color: var(--text-dark);
    border-bottom-left-radius: 4px; /* Bubble tail on the other side */
}
.dashboard-page .chat-bubble.admin span {
    text-align: left;
}

/* 4. System Message (e.g., "New Conversation Started") */
.dashboard-page .chat-bubble.system {
    max-width: 100%;
    align-self: stretch;
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 1rem 0;
    margin: 0.5rem 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.dashboard-page .chat-bubble.system::before,
.dashboard-page .chat-bubble.system::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: var(--border-color);
}

.dashboard-page .chat-bubble.system p {
    flex-shrink: 0;
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 500;
    white-space: nowrap;
}

.dashboard-page .chat-bubble.system span {
    display: none !important;
}

/* 5. "Start New Conversation" Button */
#new-conversation-btn.hidden {
    display: none;
}

/* ===============================================
   --- ADMIN PANEL SUPPORT CENTER STYLES ---
   =============================================== */

/* 1. Main two-column layout */
.admin-page .support-center-layout {
    display: grid;
    grid-template-columns: 340px 1fr; /* Fixed width for conversation list */
    gap: 30px;
    height: calc(100vh - 150px); /* Adjust height based on your header/padding */
}

/* 2. Styles for the left and right cards */
.admin-page .support-chat-list-card,
.admin-page .support-chat-window-card {
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Important for child element scrolling */
    padding: 0; /* Remove default card padding */
}

/* 3. Conversation List (Left Column) */
.admin-page .support-chat-list-card .card-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.admin-page .support-user-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto; /* Makes the list scrollable */
}
.admin-page .support-user-item {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    cursor: pointer;
    transition: background-color 0.2s;
}
.admin-page .support-user-item:hover {
    background-color: var(--secondary-bg);
}
.admin-page .support-user-item.active {
    background-color: #e3e8f7; /* Light blue selection color */
}
.admin-page .support-user-item strong {
    display: block;
    font-size: 1rem;
    color: var(--text-dark);
}
.admin-page .support-user-item small {
    color: var(--text-light);
}

/* 4. Chat Window (Right Column) */
.admin-page #support-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.admin-page #support-chat-window {
    flex-grow: 1; /* Makes the chat window fill the available vertical space */
    overflow-y: auto; /* Enables scrolling for messages */
    padding: 20px;
    display: flex;
    flex-direction: column; /* Stacks bubbles from top to bottom */
}

/* 5. Chat Input Form */
.admin-page #support-chat-form {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

/* 6. Admin Chat Bubbles (Admin on Right, User on Left) */
.admin-page .chat-window.admin .chat-bubble.user {
    align-self: flex-start;
    background-color: var(--secondary-bg);
    color: var(--text-dark);
    border-bottom-left-radius: 4px;
}
.admin-page .chat-window.admin .chat-bubble.user span {
    text-align: left;
}
.admin-page .chat-window.admin .chat-bubble.admin {
    align-self: flex-end;
    background-color: #007bff;
    color: white;
    border-bottom-right-radius: 4px;
}
.admin-page .chat-window.admin .chat-bubble.admin span {
    text-align: right;
}

/* 7. Responsive stacking for mobile */
@media (max-width: 991px) {
    .admin-page .support-center-layout {
        grid-template-columns: 1fr;
        height: auto;
    }
}

/* --- CHARGESHARE ADMIN PANEL STYLES (V3 - FINAL) --- */
/* --- THIS IS THE START OF THE ADMIN-SPECIFIC STYLES --- */

.admin-page {
    display: flex;
    background-color: #f2f2f2; /* Use a variable from the dashboard theme */
    opacity: 0;
    transition: opacity 0.3s;
    min-height: 100vh;
}

/* --- OVERRIDES & DEFAULTS --- */
.admin-page h1, 
.admin-page .desktop-header h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    letter-spacing: -1px !important;
    text-transform: none !important;
    white-space: normal !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Specific fix for modal title */
.admin-page .modal-header #admin-modal-title {
    font-size: 1.5rem !important; /* Make modal titles smaller */
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

.admin-page .main-content {
    width: 100%;
    flex-grow: 1;
    padding: 40px;
    height: 100vh;
    overflow-y: auto;
}

/* Re-using dashboard variables for consistency */
.admin-page {
    --primary-color: #1e1e1e;
    --secondary-bg: #f2f2f2;
    --card-bg: #ffffff;
    --border-color: #eef0f3;
    --text-dark: #1e1e1e;
    --text-light: #6c757d;
    --positive-green: #158a4a;
    --negative-red: #d93025;
    --info-blue: #3b5bdb;
}

/* Use the same form group styles as the dashboard */
.admin-page .form-group {
    margin-bottom: 1.25rem;
}
.admin-page .form-group label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-dark);
}
.admin-page .form-group input,
.admin-page .form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: #FFF;
    font-size: 1rem;
    color: var(--text-dark);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.admin-page .form-group input:focus,
.admin-page .form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(30, 30, 30, 0.1);
}

/* --- DESKTOP SIDEBAR --- */
.admin-page .sidebar-nav {
    display: flex;
    flex-direction: column;
    width: 260px;
    background-color: var(--card-bg);
    border-right: 1px solid var(--border-color);
    padding: 20px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2002;
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
}
.admin-page .sidebar-logo { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); text-decoration: none; padding: 15px 10px; text-align: center; }
.admin-page .sidebar-links { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; }
.admin-page .sidebar-link { display: flex; align-items: center; gap: 15px; padding: 12px 15px; border-radius: 8px; text-decoration: none; color: var(--text-light); font-weight: 600; transition: background-color 0.2s, color 0.2s; }
.admin-page .sidebar-link i { font-size: 1.2rem; width: 20px; text-align: center; }
.admin-page .sidebar-link:hover { background-color: var(--secondary-bg); }
.admin-page .sidebar-link.active { background-color: var(--primary-color); color: white; }
.admin-page .sidebar-logout { margin-top: auto; }
.admin-page .sidebar-logout button { width: 100%; display: flex; align-items: center; gap: 15px; padding: 12px 15px; border-radius: 8px; color: var(--text-light); font-weight: 600; font-family: 'Inter', sans-serif; font-size: 1rem; background: none; border: none; cursor: pointer; transition: background-color 0.2s; }
.admin-page .sidebar-logout button:hover { background-color: var(--secondary-bg); }

/* --- MOBILE NAVIGATION --- */
.admin-mobile-header { display: none; }
.mobile-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 2001; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; }
.admin-page.sidebar-open .sidebar-nav { transform: translateX(0); }
.admin-page.sidebar-open .mobile-overlay { opacity: 1; visibility: visible; }

/* --- MODAL STYLES (CORRECTED) --- */
.admin-page .modal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex; justify-content: center; align-items: center;
    z-index: 3000; padding: 20px;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.admin-page .modal-overlay:not(.hidden) { opacity: 1; pointer-events: auto; }
.admin-page .modal-content {
    background-color: var(--card-bg); border-radius: 16px;
    padding: 30px; width: 100%; max-width: 650px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transform: scale(0.95); transition: transform 0.3s ease;
    display: flex; flex-direction: column;
}
.admin-page .modal-overlay:not(.hidden) .modal-content { transform: scale(1); }
.admin-page .modal-header { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.admin-page .modal-close-button { background: none; border: none; font-size: 2.5rem; font-weight: 300; line-height: 1; color: var(--text-light); cursor: pointer; }
.admin-page .modal-body { overflow-y: auto; max-height: 75vh; padding-right: 15px; }
.admin-page .modal-card { background-color: var(--secondary-bg); border-radius: 12px; padding: 20px; margin-bottom: 20px; border: 1px solid var(--border-color); }
.admin-page .modal-card:last-child { margin-bottom: 0; }
.admin-page .modal-card h4 { margin-top: 0; margin-bottom: 15px; font-size: 1rem; font-weight: 600; color: var(--text-dark); }
.admin-page .modal-actions-group { display: flex; gap: 15px; margin-top: 20px;}
.admin-page .modal-actions-group .btn { flex: 1; }
.admin-page .kyc-viewer { margin-bottom: 15px; }
.admin-page .kyc-viewer img { max-width: 100%; height: auto; max-height: 250px; border-radius: 8px; border: 1px solid var(--border-color); cursor: pointer; }
.admin-page .modal-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); }
.admin-page .modal-tab-link { background: none; border: none; padding: 1rem; font-size: 1rem; font-weight: 600; color: var(--text-light); cursor: pointer; position: relative; }
.admin-page .modal-tab-link.active { color: var(--text-dark); }
.admin-page .modal-tab-link.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--primary-color); }
.admin-page .modal-tab-pane.hidden { display: none; }


/* --- DASHBOARD & TABLE STYLES --- */
.admin-page .card { background-color: var(--card-bg); border-radius: 16px; border: 1px solid var(--border-color); }
.admin-page .desktop-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; }
.admin-page .admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; }
.admin-page .stat-card { text-align: center; padding: 25px; }
.admin-page .stat-card .stat-value { font-size: 2.5rem; margin:0; font-weight: 700; }
.admin-page .stat-card .stat-label { margin: 5px 0 0 0; color: var(--text-light); }
.admin-page .admin-table-controls { padding: 20px 25px; border-bottom: 1px solid var(--border-color); display: flex; gap: 15px; flex-wrap: wrap; }
.admin-page .admin-table-controls input,
.admin-page .admin-table-controls select {
    width: 100%;
    max-width: 300px;
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--secondary-bg);
    font-size: 1rem;
}
.admin-page .admin-table-container { overflow-x: auto; }
.admin-page .admin-table { width: 100%; border-collapse: collapse; }
.admin-page .admin-table th, .admin-page .admin-table td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--border-color); white-space: nowrap; vertical-align: middle;}
.admin-page .admin-table thead th { font-size: 0.8rem; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.5px; }
.admin-page .admin-table tbody tr:hover { background-color: var(--secondary-bg); }
.admin-page .status-badge { display: inline-block; padding: 5px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; text-transform: capitalize; }
.admin-page .status-badge.status-verified, .admin-page .status-badge.status-active, .admin-page .status-badge.status-completed { background-color: #e0f5ea; color: #158a4a; }
.admin-page .status-badge.status-pending, .admin-page .status-badge.status-pending-approval, .admin-page .status-badge.status-under-construction, .admin-page .status-badge.status-awaiting-payment { background-color: #fff3cd; color: #856404; }
.admin-page .status-badge.status-rejected, .admin-page .status-badge.status-banned, .admin-page .status-badge.status-application-rejected { background-color: #f7e3e3; color: #db3b3b; }
.admin-page .status-badge.status-not-submitted, .admin-page .status-badge.status-inactive, .admin-page .status-badge.status-application-submitted { background-color: #eef0f3; color: #6c757d; }
.admin-page .status-badge.status-investment, .admin-page .status-badge.status-earning, .admin-page .status-badge.status-withdrawal { background-color: #e3e8f7; color: var(--info-blue); }

.admin-page .btn { display: inline-flex; justify-content: center; align-items: center; padding: 12px 20px; font-size: 1rem; font-weight: 600; border-radius: 8px; border:none; cursor:pointer; text-decoration: none; }
.admin-page .btn-sm { padding: 8px 16px; font-size: 0.875rem; }
.admin-page .btn i { margin-right: 8px; }
.admin-page .btn-primary { background-color: var(--primary-color); color: white; }
.admin-page .btn-success { background-color: var(--positive-green); color: white; }
.admin-page .btn-danger { background-color: var(--negative-red); color: white; }
.admin-page .btn-outline { background-color: transparent; color: var(--text-dark); border: 1px solid var(--border-color); }
.admin-page .empty-state, .admin-page .error-state { text-align: center; padding: 40px; }
.admin-page .empty-state { color: var(--text-light); }
.admin-page .error-state { color: var(--negative-red); font-weight: 500; }
.admin-page .table-actions { display: flex; gap: 8px; }

/* --- RESPONSIVE BREAKPOINT --- */
@media screen and (min-width: 992px) {
    .admin-page .sidebar-nav { transform: translateX(0); }
    .admin-page .main-content { margin-left: 260px; }
}

@media screen and (max-width: 991px) {
    .admin-page .main-content { padding: 20px; padding-top: 80px; }
    .admin-page .desktop-header { display: none; }
    .admin-page .admin-mobile-header { display: flex; align-items: center; gap: 20px; position: fixed; top: 0; left: 0; right: 0; height: 60px; padding: 0 20px; background-color: var(--card-bg); border-bottom: 1px solid var(--border-color); z-index: 2000; }
    .admin-page .admin-menu-button { background: none; border: none; font-size: 1.5rem; color: var(--text-dark); cursor: pointer; }
    .admin-page .mobile-header-title { font-size: 1.2rem; font-weight: 600; }
}

.admin-page .user-info-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 20px 30px;
    align-items: center;
}

.admin-page .user-info-grid .info-item { display: contents; }
.admin-page .user-info-grid .info-item strong { font-weight: 600; color: var(--text-light); text-align: right; }
.admin-page .user-info-grid .info-item span { font-weight: 500; color: var(--text-dark); overflow-wrap: break-word; }

.admin-page .user-ports-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 15px; }
.admin-page .port-list-item { background-color: #f9f9f9; border: 1px solid var(--border-color); border-radius: 12px; padding: 20px; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 5px 20px; }
.admin-page .port-list-item-name { grid-column: 1 / 2; font-size: 1.1rem; font-weight: 600; color: var(--text-dark); margin: 0; }
.admin-page .port-list-item-id { grid-column: 1 / 2; font-family: monospace; font-size: 0.9rem; color: var(--text-light); margin: 0; }
.admin-page .port-list-item-status { grid-column: 2 / 3; grid-row: 1 / 2; justify-self: end; }
.admin-page .port-list-item .btn { grid-column: 2 / 3; grid-row: 2 / 3; width: auto; padding: 8px 16px; font-size: 0.875rem; }

.admin-page #admin-settings-content .card h3 { font-size: 1.25rem; font-weight: 600; margin: 0 0 5px 0; }
.admin-page #admin-settings-content .card p { color: var(--text-light); margin: 0 0 30px 0; font-size: 0.95rem; max-width: 600px; line-height: 1.5; }
.admin-page #site-settings-form .form-group { margin-bottom: 25px; }
.admin-page #site-settings-form .form-group label { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 8px; color: var(--text-dark); }
.admin-page #site-settings-form .form-group input { background-color: #FFFFFF; }
.admin-page #site-settings-form .modal-actions-group { border-top: 1px solid var(--border-color); padding-top: 25px; margin-top: 15px; display: flex; justify-content: flex-end; }
.admin-page #site-settings-form .btn { width: auto; }

/* --- SUPPORT CHAT STYLES --- */
.admin-page .support-center-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: 30px;
    height: calc(100vh - 150px);
}
.admin-page .support-chat-list-card,
.admin-page .support-chat-window-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
}
.admin-page .support-chat-list-card .card-header,
.admin-page .support-chat-window-card .card-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    flex-shrink: 0;
}
.admin-page .support-user-list { list-style: none; padding: 0; margin: 0; overflow-y: auto; }
.admin-page .support-user-item { padding: 15px 20px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background-color 0.2s; }
.admin-page .support-user-item:hover { background-color: var(--secondary-bg); }
.admin-page .support-user-item.active { background-color: #e3e8f7; }
.admin-page .support-user-item strong { display: block; font-size: 1rem; color: var(--text-dark); }
.admin-page .support-user-item small { color: var(--text-light); }

.admin-page #support-chat-header { display: flex; justify-content: space-between; align-items: center; }
.admin-page #support-chat-window { flex-grow: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; }
.admin-page #support-chat-form { padding: 15px 20px; border-top: 1px solid var(--border-color); flex-shrink: 0; display: flex; gap: 10px; }
.admin-page #support-chat-form input { flex-grow: 1; margin: 0; }
.admin-page #support-chat-form button { flex-shrink: 0; width: auto; }

.admin-page .chat-bubble { max-width: 80%; padding: 10px 15px; border-radius: 18px; margin-bottom: 10px; line-height: 1.5; }
.admin-page .chat-bubble p { margin: 0; word-wrap: break-word; }
.admin-page .chat-bubble span { display: block; font-size: 0.75rem; opacity: 0.7; margin-top: 5px; }
.admin-page .chat-bubble.user { align-self: flex-start; background-color: var(--secondary-bg); color: var(--text-dark); border-bottom-left-radius: 4px; }
.admin-page .chat-bubble.user span { text-align: left; }
.admin-page .chat-bubble.admin { align-self: flex-end; background-color: var(--primary-color); color: white; border-bottom-right-radius: 4px; }
.admin-page .chat-bubble.admin span { text-align: right; }

@media (max-width: 991px) {
    .admin-page .support-center-layout { grid-template-columns: 1fr; height: auto; }
}

/* ===============================================
   Modal Body Scrolling Fix
   =============================================== */

/* This targets the content area of your modals */
.modal-body {
  /* 
    This prevents the modal body from growing too tall. 
    60vh means it will be a maximum of 60% of the viewport's height,
    which leaves plenty of room for the header and footer.
  */
  max-height: 60vh;

  /* 
    This is the key property. It adds a vertical scrollbar automatically, 
    but ONLY if the content inside is taller than the max-height set above.
  */
  overflow-y: auto;
}

/* ===============================================
   --- KPI GRID STYLES ---
   =============================================== */

.kpi-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columns on mobile */
    gap: 15px;
    margin-bottom: 20px;
    margin-top: 40px;
}

.kpi-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    padding: 20px;
    text-align: center;
}

.kpi-icon {
    width: 45px;
    height: 45px;
    background-color: var(--secondary-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
    color: var(--text-dark);
    font-size: 1.2rem;
}

.kpi-value {
    /* Use clamp to make font responsive: min 1.3rem, ideal 5vw, max 1.75rem */
    font-size: clamp(1.3rem, 5vw, 1.75rem); 
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
    
    /* Flexbox to keep number and unit aligned, but allow wrapping if necessary */
    display: flex;
    justify-content: center;
    align-items: baseline;
    flex-wrap: wrap; 
}

.kpi-unit {
    font-size: 0.6em; /* Unit is 60% size of the number */
    font-weight: 500;
    color: var(--text-light);
    margin-left: 4px;
    white-space: nowrap; /* Keeps "kWh" together */
}

.kpi-label {
    margin: 8px 0 0 0;
    font-size: 0.8rem;
    color: var(--text-light);
    font-weight: 500;
}

/* On desktop, switch to a 2x2 grid layout */
@media screen and (min-width: 768px) {
    .kpi-grid-container {
        grid-template-columns: 1fr 1fr; /* This creates the 2x2 grid */
        gap: 25px;
    }
}

/* --- SUPPORT CHAT SEND BUTTON (FINAL FIX INSPIRED BY NODEPACE) --- */

/* This targets the send button inside the chat form with high specificity */
.dashboard-page #support-chat-form .btn-primary {
    /* 1. Prevent the button from stretching or shrinking */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 50px;

    /* 2. Set a fixed width to create the square shape */
    width: 50px; 
    
    /* 3. CRITICAL: Remove the left and right padding from the generic .btn style */
    padding-left: 0;
    padding-right: 0;
}

/* 4. Ensure the icon inside is perfectly centered by removing its margin */
.dashboard-page #support-chat-form .btn-primary i {
    margin-right: 0;
}

.btn-outline-danger {
    background-color: transparent;
    border: 1px solid #dc3545;
    color: #dc3545;
}
.btn-outline-danger:hover {
    background-color: #dc3545;
    color: white;
}

/* --- TRANSACTION MODAL STYLES --- */
.txn-modal-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.txn-hero-section {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 0;
}

.txn-big-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    background-color: var(--secondary-bg);
    color: var(--text-dark);
}

.txn-hero-text {
    display: flex;
    flex-direction: column;
}

.txn-hero-text span {
    font-size: 0.9rem;
    color: var(--text-light);
}

.txn-hero-text h1 {
    margin: 5px 0;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.modal-divider {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 0;
    width: 100%;
}

.port-info-item.full-width {
    grid-column: 1 / -1; /* Span all columns */
}

/* Make list items look clickable */
.activity-item {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.activity-item:hover {
    background-color: var(--secondary-bg);
    border-radius: 8px; /* Optional: adds rounded corners on hover */
    padding-left: 10px; /* Optional: slight indent on hover */
    padding-right: 10px;
    margin-left: -10px; /* Compensate for padding to keep alignment */
    margin-right: -10px;
}

/* --- FIXES FOR TRANSACTION MODAL --- */

/* 1. Ensure the hidden class works with highest priority inside the modal */
.txn-modal-body .hidden {
    display: none !important;
}

/* 2. Remove the "shade" (background) from the status text in the modal header */
.txn-hero-text .status-badge {
    background-color: transparent !important; /* Removes the green/yellow pill background */
    padding: 0;
    margin-top: 5px;
    /* The text color (green/red/yellow) will remain based on the class */
}

/* Optional: Make the status text slightly larger since it has no background now */
.txn-hero-text .status-badge {
    font-size: 1rem; 
}

/* --- SESSION STATS GRID (MODAL) --- */
.session-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
    padding: 15px;
    background-color: var(--secondary-bg);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.stat-box {
    display: flex;
    flex-direction: column;
}

.stat-box small {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.stat-box p {
    margin: 0;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

.stat-box i {
    color: var(--primary-color);
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

/* --- MOBILE FIX FOR CARD HEADERS & FILTERS --- */
@media screen and (max-width: 479px) {
    /* Stack the Header Title and the Control (Filter/Button) vertically */
    .dashboard-page .card-header {
        flex-direction: column;
        align-items: flex-start; /* Align everything to the left */
        gap: 15px; /* Add space between Title and Filter */
    }

    /* Ensure the Title doesn't have extra bottom margin interfering with the gap */
    .dashboard-page .card-header h3 {
        margin-bottom: 0;
        width: 100%;
    }

    /* Make the Filter Container full width */
    .dashboard-page .transaction-filter-wrapper {
        width: 100%;
    }

    /* Make the Dropdown itself full width for easier tapping */
    .dashboard-page .transaction-filter-wrapper select {
        width: 100%;
        padding: 10px 12px; /* Slightly larger touch target */
    }
}