/* goodhope-critical-2026.css - merged: goodhope-bootstrap-2026 + goodhope-2026 + goodhope-chrome-2026 (2026-09-14, LCP optimization batch 1) */
/* --- source: goodhope-bootstrap-2026.css --- */
@charset "UTF-8";
/*!
 * Bootstrap  v5.3.8 (https://getbootstrap.com/)
 * Copyright 2011-2026 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root,
[data-bs-theme=light] {
  --bs-blue: #0d6efd;
  --bs-indigo: #6610f2;
  --bs-purple: #6f42c1;
  --bs-pink: #d63384;
  --bs-red: #dc3545;
  --bs-orange: #fd7e14;
  --bs-yellow: #ffc107;
  --bs-green: #198754;
  --bs-teal: #20c997;
  --bs-cyan: #0dcaf0;
  --bs-black: #000;
  --bs-white: #fff;
  --bs-gray: #6c757d;
  --bs-gray-dark: #343a40;
  --bs-gray-100: #f8f9fa;
  --bs-gray-200: #e9ecef;
  --bs-gray-300: #dee2e6;
  --bs-gray-400: #ced4da;
  --bs-gray-500: #adb5bd;
  --bs-gray-600: #6c757d;
  --bs-gray-700: #495057;
  --bs-gray-800: #343a40;
  --bs-gray-900: #212529;
  --bs-primary: #0d6efd;
  --bs-secondary: #6c757d;
  --bs-success: #198754;
  --bs-info: #0dcaf0;
  --bs-warning: #ffc107;
  --bs-danger: #dc3545;
  --bs-light: #f8f9fa;
  --bs-dark: #212529;
  --bs-primary-rgb: 13, 110, 253;
  --bs-secondary-rgb: 108, 117, 125;
  --bs-success-rgb: 25, 135, 84;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 255, 193, 7;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 248, 249, 250;
  --bs-dark-rgb: 33, 37, 41;
  --bs-primary-text-emphasis: #052c65;
  --bs-secondary-text-emphasis: #2b2f32;
  --bs-success-text-emphasis: #0a3622;
  --bs-info-text-emphasis: #055160;
  --bs-warning-text-emphasis: #664d03;
  --bs-danger-text-emphasis: #58151c;
  --bs-light-text-emphasis: #495057;
  --bs-dark-text-emphasis: #495057;
  --bs-primary-bg-subtle: #cfe2ff;
  --bs-secondary-bg-subtle: #e2e3e5;
  --bs-success-bg-subtle: #d1e7dd;
  --bs-info-bg-subtle: #cff4fc;
  --bs-warning-bg-subtle: #fff3cd;
  --bs-danger-bg-subtle: #f8d7da;
  --bs-light-bg-subtle: #fcfcfd;
  --bs-dark-bg-subtle: #ced4da;
  --bs-primary-border-subtle: #9ec5fe;
  --bs-secondary-border-subtle: #c4c8cb;
  --bs-success-border-subtle: #a3cfbb;
  --bs-info-border-subtle: #9eeaf9;
  --bs-warning-border-subtle: #ffe69c;
  --bs-danger-border-subtle: #f1aeb5;
  --bs-light-border-subtle: #e9ecef;
  --bs-dark-border-subtle: #adb5bd;
  --bs-white-rgb: 255, 255, 255;
  --bs-black-rgb: 0, 0, 0;
  --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-font-size: 1rem;
  --bs-body-font-weight: 400;
  --bs-body-line-height: 1.5;
  --bs-body-color: #212529;
  --bs-body-color-rgb: 33, 37, 41;
  --bs-body-bg: #fff;
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-emphasis-color: #000;
  --bs-emphasis-color-rgb: 0, 0, 0;
  --bs-secondary-color: rgba(33, 37, 41, 0.75);
  --bs-secondary-color-rgb: 33, 37, 41;
  --bs-secondary-bg: #e9ecef;
  --bs-secondary-bg-rgb: 233, 236, 239;
  --bs-tertiary-color: rgba(33, 37, 41, 0.5);
  --bs-tertiary-color-rgb: 33, 37, 41;
  --bs-tertiary-bg: #f8f9fa;
  --bs-tertiary-bg-rgb: 248, 249, 250;
  --bs-heading-color: inherit;
  --bs-link-color: #0d6efd;
  --bs-link-color-rgb: 13, 110, 253;
  --bs-link-decoration: underline;
  --bs-link-hover-color: #0a58ca;
  --bs-link-hover-color-rgb: 10, 88, 202;
  --bs-code-color: #d63384;
  --bs-highlight-color: #212529;
  --bs-highlight-bg: #fff3cd;
  --bs-border-width: 1px;
  --bs-border-style: solid;
  --bs-border-color: #dee2e6;
  --bs-border-color-translucent: rgba(0, 0, 0, 0.175);
  --bs-border-radius: 0.375rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.5rem;
  --bs-border-radius-xl: 1rem;
  --bs-border-radius-xxl: 2rem;
  --bs-border-radius-2xl: var(--bs-border-radius-xxl);
  --bs-border-radius-pill: 50rem;
  --bs-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  --bs-box-shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-box-shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
  --bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(13, 110, 253, 0.25);
  --bs-form-valid-color: #198754;
  --bs-form-valid-border-color: #198754;
  --bs-form-invalid-color: #dc3545;
  --bs-form-invalid-border-color: #dc3545;
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --bs-body-color: #dee2e6;
  --bs-body-color-rgb: 222, 226, 230;
  --bs-body-bg: #212529;
  --bs-body-bg-rgb: 33, 37, 41;
  --bs-emphasis-color: #fff;
  --bs-emphasis-color-rgb: 255, 255, 255;
  --bs-secondary-color: rgba(222, 226, 230, 0.75);
  --bs-secondary-color-rgb: 222, 226, 230;
  --bs-secondary-bg: #343a40;
  --bs-secondary-bg-rgb: 52, 58, 64;
  --bs-tertiary-color: rgba(222, 226, 230, 0.5);
  --bs-tertiary-color-rgb: 222, 226, 230;
  --bs-tertiary-bg: #2b3035;
  --bs-tertiary-bg-rgb: 43, 48, 53;
  --bs-primary-text-emphasis: #6ea8fe;
  --bs-secondary-text-emphasis: #a7acb1;
  --bs-success-text-emphasis: #75b798;
  --bs-info-text-emphasis: #6edff6;
  --bs-warning-text-emphasis: #ffda6a;
  --bs-danger-text-emphasis: #ea868f;
  --bs-light-text-emphasis: #f8f9fa;
  --bs-dark-text-emphasis: #dee2e6;
  --bs-primary-bg-subtle: #031633;
  --bs-secondary-bg-subtle: #161719;
  --bs-success-bg-subtle: #051b11;
  --bs-info-bg-subtle: #032830;
  --bs-warning-bg-subtle: #332701;
  --bs-danger-bg-subtle: #2c0b0e;
  --bs-light-bg-subtle: #343a40;
  --bs-dark-bg-subtle: #1a1d20;
  --bs-primary-border-subtle: #084298;
  --bs-secondary-border-subtle: #41464b;
  --bs-success-border-subtle: #0f5132;
  --bs-info-border-subtle: #087990;
  --bs-warning-border-subtle: #997404;
  --bs-danger-border-subtle: #842029;
  --bs-light-border-subtle: #495057;
  --bs-dark-border-subtle: #343a40;
  --bs-heading-color: inherit;
  --bs-link-color: #6ea8fe;
  --bs-link-hover-color: #8bb9fe;
  --bs-link-color-rgb: 110, 168, 254;
  --bs-link-hover-color-rgb: 139, 185, 254;
  --bs-code-color: #e685b5;
  --bs-highlight-color: #dee2e6;
  --bs-highlight-bg: #664d03;
  --bs-border-color: #495057;
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-form-valid-color: #75b798;
  --bs-form-valid-border-color: #75b798;
  --bs-form-invalid-color: #ea868f;
  --bs-form-invalid-border-color: #ea868f;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  text-align: var(--bs-body-text-align);
  background-color: var(--bs-body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: var(--bs-border-width) solid;
  opacity: 0.25;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--bs-heading-color);
}

h1, .h1 {
  font-size: calc(1.375rem + 1.5vw);
}
@media (min-width: 1200px) {
  h1, .h1 {
    font-size: 2.5rem;
  }
}

h2, .h2 {
  font-size: calc(1.325rem + 0.9vw);
}
@media (min-width: 1200px) {
  h2, .h2 {
    font-size: 2rem;
  }
}

h3, .h3 {
  font-size: calc(1.3rem + 0.6vw);
}
@media (min-width: 1200px) {
  h3, .h3 {
    font-size: 1.75rem;
  }
}

h4, .h4 {
  font-size: calc(1.275rem + 0.3vw);
}
@media (min-width: 1200px) {
  h4, .h4 {
    font-size: 1.5rem;
  }
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  -webkit-text-decoration-skip-ink: none;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul {
  padding-left: 2rem;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

small, .small {
  font-size: 0.875em;
}

mark, .mark {
  padding: 0.1875em;
  color: var(--bs-highlight-color);
  background-color: var(--bs-highlight-bg);
}
a {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
  text-decoration: underline;
}
a:hover {
  --bs-link-color-rgb: var(--bs-link-hover-color-rgb);
}

a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}
figure {
  margin: 0 0 1rem;
}

img,
svg {
  vertical-align: middle;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--bs-secondary-color);
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}
thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
select {
  text-transform: none;
}

[role=button] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}
select:disabled {
  opacity: 1;
}

[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
  display: none !important;
}

button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}
button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}
textarea {
  resize: vertical;
}
.table {
  --bs-table-color-type: initial;
  --bs-table-bg-type: initial;
  --bs-table-color-state: initial;
  --bs-table-bg-state: initial;
  --bs-table-color: var(--bs-emphasis-color);
  --bs-table-bg: var(--bs-body-bg);
  --bs-table-border-color: var(--bs-border-color);
  --bs-table-accent-bg: transparent;
  --bs-table-striped-color: var(--bs-emphasis-color);
  --bs-table-striped-bg: rgba(var(--bs-emphasis-color-rgb), 0.05);
  --bs-table-active-color: var(--bs-emphasis-color);
  --bs-table-active-bg: rgba(var(--bs-emphasis-color-rgb), 0.1);
  --bs-table-hover-color: var(--bs-emphasis-color);
  --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), 0.075);
  width: 100%;
  margin-bottom: 1rem;
  vertical-align: top;
  border-color: var(--bs-table-border-color);
}
.table > :not(caption) > * > * {
  padding: 0.5rem 0.5rem;
  color: var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)));
  background-color: var(--bs-table-bg);
  border-bottom-width: var(--bs-border-width);
  box-shadow: inset 0 0 0 9999px var(--bs-table-bg-state, var(--bs-table-bg-type, var(--bs-table-accent-bg)));
}
.table > tbody {
  vertical-align: inherit;
}
.table > thead {
  vertical-align: bottom;
}
.table-group-divider {
  border-top: calc(var(--bs-border-width) * 2) solid currentcolor;
}

.caption-top {
  caption-side: top;
}

.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.25rem;
}

.table-bordered > :not(caption) > * {
  border-width: var(--bs-border-width) 0;
}
.table-bordered > :not(caption) > * > * {
  border-width: 0 var(--bs-border-width);
}

.table-borderless > :not(caption) > * > * {
  border-bottom-width: 0;
}
.table-borderless > :not(:first-child) {
  border-top-width: 0;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table-striped-columns > :not(caption) > tr > :nth-child(even) {
  --bs-table-color-type: var(--bs-table-striped-color);
  --bs-table-bg-type: var(--bs-table-striped-bg);
}

.table-active {
  --bs-table-color-state: var(--bs-table-active-color);
  --bs-table-bg-state: var(--bs-table-active-bg);
}

.table-hover > tbody > tr:hover > * {
  --bs-table-color-state: var(--bs-table-hover-color);
  --bs-table-bg-state: var(--bs-table-hover-bg);
}

.table-primary {
  --bs-table-color: #000;
  --bs-table-bg: #cfe2ff;
  --bs-table-border-color: #a6b5cc;
  --bs-table-striped-bg: #c5d7f2;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bacbe6;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bfd1ec;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-secondary {
  --bs-table-color: #000;
  --bs-table-bg: #e2e3e5;
  --bs-table-border-color: #b5b6b7;
  --bs-table-striped-bg: #d7d8da;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #cbccce;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #d1d2d4;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-success {
  --bs-table-color: #000;
  --bs-table-bg: #d1e7dd;
  --bs-table-border-color: #a7b9b1;
  --bs-table-striped-bg: #c7dbd2;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #bcd0c7;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #c1d6cc;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-info {
  --bs-table-color: #000;
  --bs-table-bg: #cff4fc;
  --bs-table-border-color: #a6c3ca;
  --bs-table-striped-bg: #c5e8ef;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #badce3;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #bfe2e9;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-warning {
  --bs-table-color: #000;
  --bs-table-bg: #fff3cd;
  --bs-table-border-color: #ccc2a4;
  --bs-table-striped-bg: #f2e7c3;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #e6dbb9;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #ece1be;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-danger {
  --bs-table-color: #000;
  --bs-table-bg: #f8d7da;
  --bs-table-border-color: #c6acae;
  --bs-table-striped-bg: #eccccf;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #dfc2c4;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e5c7ca;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-light {
  --bs-table-color: #000;
  --bs-table-bg: #f8f9fa;
  --bs-table-border-color: #c6c7c8;
  --bs-table-striped-bg: #ecedee;
  --bs-table-striped-color: #000;
  --bs-table-active-bg: #dfe0e1;
  --bs-table-active-color: #000;
  --bs-table-hover-bg: #e5e6e7;
  --bs-table-hover-color: #000;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-dark {
  --bs-table-color: #fff;
  --bs-table-bg: #212529;
  --bs-table-border-color: #4d5154;
  --bs-table-striped-bg: #2c3034;
  --bs-table-striped-color: #fff;
  --bs-table-active-bg: #373b3e;
  --bs-table-active-color: #fff;
  --bs-table-hover-bg: #323539;
  --bs-table-hover-color: #fff;
  color: var(--bs-table-color);
  border-color: var(--bs-table-border-color);
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 575.98px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 767.98px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 991.98px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1199.98px) {
  .table-responsive-xl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1399.98px) {
  .table-responsive-xxl {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/*!以上是copy 前面一些原素的css; 以下是挑选的*/
.container {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
.container {
    max-width: 540px;
  }
}
@media (min-width: 768px) {
 .container {
    max-width: 720px;
  }
}
@media (min-width: 992px) {
.container {
    max-width: 960px;
  }
}
@media (min-width: 1200px) {
.container {
    max-width: 1140px;
  }
}
@media (min-width: 1400px) {
 .container {
    max-width: 1320px;
  }
}
:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}

.row {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-0.5 * var(--bs-gutter-x));
  margin-left: calc(-0.5 * var(--bs-gutter-x));
}
.row > * {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-top: var(--bs-gutter-y);
}
.col-1 {
  flex: 0 0 auto;
  width: 8.33333333%;
}

.col-2 {
  flex: 0 0 auto;
  width: 16.66666667%;
}

.col-3 {
  flex: 0 0 auto;
  width: 25%;
}

.col-4 {
  flex: 0 0 auto;
  width: 33.33333333%;
}

.col-5 {
  flex: 0 0 auto;
  width: 41.66666667%;
}

.col-6 {
  flex: 0 0 auto;
  width: 50%;
}

.col-7 {
  flex: 0 0 auto;
  width: 58.33333333%;
}

.col-8 {
  flex: 0 0 auto;
  width: 66.66666667%;
}

.col-9 {
  flex: 0 0 auto;
  width: 75%;
}

.col-10 {
  flex: 0 0 auto;
  width: 83.33333333%;
}

.col-11 {
  flex: 0 0 auto;
  width: 91.66666667%;
}

.col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}
@media (min-width: 576px) {
.col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-push-1 {
 left: 8.33333333%;
}
  }
  @media (min-width: 768px) {
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  }
  @media (min-width: 992px) {
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  
  }
  
  @media (min-width: 1200px) {
 .col-xl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xl-12 {
    flex: 0 0 auto;
    width: 100%;
  }}
  
  @media (min-width: 1400px) {
  .col-xxl-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-xxl-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-xxl-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-xxl-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-xxl-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-xxl-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-xxl-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-xxl-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-xxl-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-xxl-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-xxl-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-xxl-12 {
    flex: 0 0 auto;
    width: 100%;
  }}
img {
	vertical-align:middle
}
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
	display:block;
	max-width:100%;
	height:auto
}
.img-rounded {
	border-radius:6px
}
.img-thumbnail {
	display:inline-block;
	max-width:100%;
	height:auto;
	padding:4px;
	line-height:1.42857143;
	background-color:#fff;
	border:1px solid #ddd;
	border-radius:4px;
-webkit-transition:all .2s ease-in-out;
-o-transition:all .2s ease-in-out;
transition:all .2s ease-in-out
}
.img-thumbnail{padding:.25rem;background-color:#fff;border:1px solid #dee2e6;border-radius:.25rem;max-width:100%;height:auto}
.figure {
  display: inline-block;
}
.text-center {
  text-align: center !important;
}
.text-left {
	text-align:left
}

.ratio {
  position: relative;
  width: 100%;
}
.ratio::before {
  display: block;
  padding-top: var(--bs-aspect-ratio);
  content: "";
}
.ratio > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.ratio-1x1 {
  --bs-aspect-ratio: 100%;
}

.ratio-4x3 {
  --bs-aspect-ratio: 75%;
}

.ratio-16x9 {
  --bs-aspect-ratio: 56.25%;
}

.ratio-21x9 {
  --bs-aspect-ratio: 42.8571428571%;
}

/* --- source: goodhope-2026.css --- */
@charset "utf-8";
/* CSS Document */
body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.42857143;
	color: #333;
	background-color: #fff;
}
a {
	text-decoration: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
	display: block;
}
.headerback {
	background-color: #7ed5ff;
	text-align: center;
	padding: 18px;
}
.natitle {
	color: #FFFFFF;
	margin-top: 50px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: oblique;
}
.quote01 {
	width: 180px;
	font-size: 18px;
	color: #FFFFFF;
	background-color: #FF6600;
	padding: 16px;
	border-radius: 18px;
	margin-top: 30px;
	box-shadow: 5px 5px 2px #888888;
	border: thin solid #FFFFFF;
}
.quote01:hover {
	background-color: #CCCCCC;
	display: block;
}
.quote01 a {
	color:#ffffff;
	text-decoration: none;
}
.navul {
	margin-top: 38px;
	padding-top: 18px;
}
.navul li {
	background: #58c4a7;
	margin: 5px;
	padding: 8px;
	border-radius: 5px;
	list-style-type: none;
}
.navul li:hover {
	background-color: #7ed5ff;
}
.navul li a {
	color: #FFFFFF;
}
.navul li a:hover {
	color: #EAEAEA;
	text-decoration: none;
}
 @media (min-width: 768px) {
 .navul {
 background: #7ed5ff;
 height: 48px;
 border-radius: 5px;
}
 .navul li {
 float: left;
 background-color: #7ed5ff;
}
}
.orange {
	color: #FF6600;
}
.orange a {
	color: #FF0000;
}
.title {
	width: 99%;
	margin-bottom: 38px;
	font-size: 18px;
	font-weight: bold;
	text-decoration: blink;
	margin-top: 38px;
}
.colul li {
	list-style-type: none;
}

.directory {
	border-top: 2px solid #7ed5ff;
}
.bian {
	position: sticky;
	margin-top: 30px;
	margin-bottom:30px;
	border: thin solid #33CCFF;
	box-shadow: 1px 1px 3px #888888;
	border-radius: 8px;
}
.bian a:hover {
	color:#CCCCCC;
}
.content {
	background-color: #ffffff;
	margin-top: 28px;
}
.content a {
	text-decoration: underline;
}
 @media (max-width: 767px) {
 .content {
 margin-right: 0px;
}
}
.serviceh3 {
	font-size: 48px;
	color: #FF6600;
	text-decoration: blink;
	text-shadow: 6px 6px 6px #CCCCCC;
	margin-bottom:38px;
	margin-top:18px;
}
.secondnav {
	line-height: 28px;
	margin: 18px;
}
.phoneonline {
	position: fixed;
	bottom: 0px;
	width: 100%;
	clear: both;
	left: 0px;
	z-index: 9999;
	background-color: #FF6600;
	border-radius: 3px;
	padding: 5px;
}
.phoneonline a {
	color: #FFFFFF;
	text-align: center;
	display: block;
}
@media (min-width:768px) {
 .phoneonline {
 display: none;
}
}
footer {
	padding-top: 30px;
	background-color: #7ed5ff;
	color: #FFFFFF;
}
footer a {
	color: #FFFFFF;
}
footer li {
	color: #FFFFFF;
	margin-bottom: 8px;
	list-style-type: none;
}
footer a:hover {
	color: #EFEFEF;
	text-decoration: none;
}
footer p:hover {
	color: #EFEFEF;
}
.footerli:hover {
	color: #EFEFEF;
}
.address {
	padding-bottom: 18px;
	margin-bottom: 0;
}
.address:hover {
	color: #EFEFEF;
}
.img-responsive {
	display:block;
	max-width:100%;
	height:auto
}
.mainback {
	margin-top: -20px;
	padding-top: 10px;
	background-color: #7ed5ff;
}
 @media (min-width:767px) {
 .mainback {
 width: 100%;
 background-color: #7ed5ff;
 height: 408px;
}
 .airbackimg {
 background-image: url(../freightimg/air-freight-08.jpg);
 background-repeat: no-repeat;
 background-position: center;
 height: 280px;
}
}
 .marginblow {
 margin-bottom: 58px;
}
.back-cor-orange {
	background-color: #FF6600;
	color: #FFFFFF;
}
.quotegirl {
 height: 230px;
 padding: 18px;
 color: #FFFFFF;
 font-family: Georgia, "Times New Roman", Times, serif;
}
.quotegirl h3 {
	height: 18px;
	color: #FFFFFF;
}
.quotegirl p{
	color: #FFFFFF;
}
 @media (min-width:768px) {
 .quotegirl p {
 width: 50%;
 margin: 0 auto;
}
 .quotegirl {
 background-image: url(../freightimg/quotegirl.png);
 background-repeat: no-repeat;
 background-position: right;
}
}
.quote03 a {
 width: 180px;
 font-size: 18px;
 color: #FFFFFF;
 background-color: #FF6600;
 padding: 16px;
 border-radius: 8px;
 border: thin solid #FFFFFF;
}
.quote03 a:hover {
 background-color: #FFFFFF;
 color: #FF6600;
}
.quote03 {
 clear: both;
 padding-top: 38px;
}
.onlineside {
 position: fixed;
 bottom: 1%;
 right: 3px;
 width: 150px;
 margin-right: 3px;
}
.onlineside:hover {
 width:180px;
}
.breadcrumb {
	background: #CCCCCC;
}

.breadcrumb li {
	display: block;
	float: left;
	margin-right: 18px;
	margin-bottom: 18px;
}

.clearleft {
	clear: left;
}
.quotation a {
	font-size: 28px;
	line-height: 80px;
	color: #FFFFFF;
	background-color: #66CCFF;
	width: 260px;
	height: 80px;
	padding:30px;
	margin:0 auto;
	border:2px solid;
	border-radius:50px;
}
.quotation a:hover {
	color:#58c4a7;
	background-color:#FFFFFF;
}
.sidenow {
	font-size: 18px;
	color: #FF6600;
	text-align: center;
	padding-bottom: 8px;
	padding-top: 8px;
}
/*以下是 ship to usa 这个面页的CSS*/

.imgtext h2 {
	color: #FFFFFF;
	font-size: 58px;
	margin-left: 10%;
	margin-bottom: 8px;
}
.imgtext p {
	color: #FFFFFF;
	margin-left: 10%;
}
.backcolo66 {
	color: #FFFFFF;
	background-color: #FF6600;
}
 @media (min-width:768px) {
 .backcolo66 {
 height: 230px;
}
}
.bene1 {
	font-family: 'Proxima Nova W01', Helvetica, Roboto, Arial, sans-serif;
	padding: 38px;
}
.bene1 p:hover {
	color: #FFFFFF;
}
.bene2 {
	border-right-width: thin;
	border-right-style: solid;
	border-right-color: #FFFFFF;
	padding-left: 15px;
	padding-right: 15px;
}
.bigsize {
	font-size: 23px;
	font-weight: bold;
}

.marginbo0 {
	margin-bottom: 0px;
}
.addingbackhei {
	padding-top: 48px;
	background-color: #f7f9fa;
	height: 790px;
}
 @media (min-width:768px) {
 .addingbackhei {
 height: 395px;
}
}
.serviceh2 {
	font-size: 48px;
	color: #999999;
	text-decoration: blink;
	text-shadow: 6px 6px 6px #CCCCCC;
}
 @media (max-width:768px) {
 .phonedisplayno {
 display: none;
}
 .serviceh2,  .serviceh3 {
 font-size: 28px;
}
}
.pwidth {
	width: 80%;
	margin: 0 auto;
}
.margetop {
	margin-top: 38px;
}
.customs01 {
	background-color: #f7f9fa;
	border-radius: 25px;
	margin: 10px;
	padding: 15px;
}
.customs01 img {
	border-radius: 40px;
}
.customs01 p {
	width: 90%;
}
 @media (min-width:768px) {
 .customs01 {
 background-color: #f7f9fa;
 border-radius: 25px;
 margin: 10px;
 float: left;
 width: 45%;
 margin: 10px;
 padding: 15px;
}
 .customs01 img {
 border-radius: 40px;
}
 .customs01 p {
 width: 90%;
}
}
.colul li {
	margin-bottom: 15px;
	list-style-position: outside;
	list-style-type: disc;
}
/*以上是 ship to usa 这个面页的CSS; 以下是alibaba1688的CSS*/
.sidequote {
	margin-top: 20%;
	background-color: #F0F0EE;
	font-family: "Times New Roman", Times, serif;
	box-shadow: 2px 2px 1px #888666;
	border: thin double #CCCCCC;
	border-radius: 5px;
	-moz-border-radius: 5px;
	/* Old Firefox */
	padding: 15px;
}
.sidequote a {
	color: #000000;
}
/*以上是alibaba1688的CSS; 以下是blog这个面页增加的*/

.backh {
	margin-top: 68px;
	margin-bottom: 68px;
	background-color: #5dd5c8;
	padding: 5%;
	color: #ffffff;
}
.backh {
	padding-bottom: 28%;
	padding-top: 38%;
	border: 3px solid;
	box-shadow: 5px 5px 8px #888888;
	background: #ddcccc;
	border-radius: 58px;
	-moz-border-radius: 58px;/* 老的 Firefox */
}
 @media (max-width:768px) {
 .backh {
 padding-top: 38%;
 padding-bottom: 50%
}
}
/*以上是blog这个面页增加的*/


/* --- source: goodhope-chrome-2026.css --- */
@charset "utf-8";
/* ============================================================
   GoodHope Freight — site chrome (top bar / header nav / footer)
   Extracted from index.html 2026-09. Shared by all pages.
   Load this stylesheet LAST so it overrides legacy page CSS.
   ============================================================ */

/* Brand variables (also used by footer rules)
   Re-aligned 2026-09-06 to single brand palette:
     - #015d38 (deep forest green) — primary
     - #01401f (deeper green)    — primary-dark / hover-deep
     - #71bf38 (lime green)       — primary-light / hover-soft
     - #ff6600 (warm orange)      — accent / CTA
     - #cc4f00 (deep orange)      — accent-dark / CTA hover
*/
:root {
	--primary: #015d38;
	--primary-dark: #01401f;
	--primary-light: #71bf38;
	--accent: #ff6600;
	--accent-dark: #cc4f00;
	--light-bg: #f5f7f5;
	--lighter-blue: #eaf4ec;
	--text-dark: #1a3329;
	--text-light: #5f6c63;
	--white: #ffffff;
	--border: #d4e0d9;
	--success: #71bf38;
	--topbar-bg: #015d38;
}

/* Chrome typography (matches index.html body font) */
.top-bar,
.header-nav,
footer.footer {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ===== TOP BAR ===== */
.top-bar{
    position:relative;
    z-index:1000;
    display:flex;
    justify-content:flex-start;
    align-items:center;
    flex-wrap:wrap;
    background: var(--topbar-bg);
    padding:10px 2rem;
    gap:26px;
    font-size:14px;
    transition: transform 0.3s ease;
}
.topbar-right{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:26px;
    flex-wrap:wrap;
}
.top-bar.hide-bar{
    transform: translateY(-100%);
}
.top-item{
    display:flex;
    align-items:center;
    gap:6px;
    color: #ffffff;
    text-decoration:none;
}
.icon-orange{
    color: var(--accent);
    font-size:16px;
}
/* Reset native button styles so button.top-item sits flush with anchor.top-item */
button.top-item{
    background:none;
    border:none;
    padding:0;
    margin:0;
    font:inherit;
    color:inherit;
    cursor:pointer;
    line-height:inherit;
}
button.top-item:hover{
    color: var(--accent);
}
.top-item:hover{
    color: var(--accent);
}
/* Search box */
.search-box{
    display:flex;
    margin-left:auto;
    margin-right:16px;
}
.search-box input{
    border:none;
    padding:5px 10px;
    outline:none;
    border-radius:2px;
}
.search-box button{
    background:#fff;
    border:none;
    cursor:pointer;
    padding:0 10px;
}
/* Language dropdown */
.lang-item{
    position:relative;
}
.lang-arrow{
    display:inline-block;
    width:0;
    height:0;
    border-left:4px solid transparent;
    border-right:4px solid transparent;
    border-top:4px solid #fff;
    margin-left:4px;
}
.lang-dropdown{
    position:absolute;
    top:100%;
    right:0;
    background:#fff;
    border:1px solid #ddd;
    min-width:100px;
    display:none;
    z-index:100;
}
.lang-dropdown a{
    display:block;
    padding:7px 12px;
    text-decoration:none;
    color:#000;
}
.lang-item:hover .lang-dropdown{
    display:block;
}
.lang-item.open .lang-dropdown{
    display:block;
}

/* ===== MAIN NAV ===== */
.header-nav{
    position:sticky;
    top:0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#ffffff;
    padding:0 2rem;
    z-index:999;
    border-bottom:1px solid #eee;
}
.logo-wrap img{
    height:65px;
    display:block;
}
/* Desktop menu */
.nav-list{
    display:flex;
    list-style:none;
    align-items:center;
}
.nav-item{
    position:relative;
}
.nav-link{
    display:flex;
    align-items:center;
    color: var(--primary);
    text-decoration:none;
    padding:0 1.1rem;
    line-height:65px;
    white-space:nowrap;
    gap:6px;
}
.nav-item:hover .nav-link{
    background:#f5f5f5;
}
/* Dropdown arrow */
.arrow{
    width:0;
    height:0;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    border-top:6px solid #333;
    transition:0.2s;
}
.nav-item:hover .arrow{
    transform:rotate(180deg);
}
/* Dropdown grid layout */
.dropdown{
    position:absolute;
    left:0;
    top:100%;
    background:#fff;
    box-shadow:0 3px 12px rgba(0,0,0,0.12);
    display:none;
    padding:1rem;
}
.nav-item:hover .dropdown{
    display:grid;
}
.dropdown-shipping{
    grid-template-columns: repeat(2, 1fr);
    gap:0.6rem;
    width:max-content;
}
.dropdown-value{
    grid-template-columns: repeat(2, 1fr);
    gap:0.6rem;
    width:max-content;
}
.dropdown-solution{
    grid-template-columns: repeat(2, 1fr);
    gap:0.6rem;
    width:max-content;
}
.dropdown-about{
    grid-template-columns: repeat(1, 1fr);
    gap:0.6rem;
    width:max-content;
}
.dropdown-tools{
    grid-template-columns: repeat(2, 1fr);
    gap:0.6rem;
    width:max-content;
}
.dropdown-resources{
    grid-template-columns: repeat(1, 1fr);
    gap:0.6rem;
    width:max-content;
}
.dropdown a{
    color:#000;
    text-decoration:none;
    padding:0.4rem 0.8rem;
    white-space:nowrap;
}
.dropdown a:hover{
    background:#eee;
}
/* Get Quote button */
.quote-btn{
    background: var(--accent);
    color: #fff !important;
    text-decoration:none;
    padding:10px 24px;
    border-radius:30px;
    white-space:nowrap;
    margin-left:16px;
}
.quote-btn:hover{
    background: var(--accent-dark);
}
/* Mobile hamburger button */
.menu-toggle{
    display:none;
    font-size:26px;
    background:none;
    border:none;
    cursor:pointer;
}

/* ===== HEADINGS & BODY (rebrand 2026-09-06) =====
   Chrome is loaded last so these override Bootstrap defaults. */
h1, h2, h3 {
    color: var(--primary);
}
h1 {
    font-weight: 600;
    letter-spacing: -0.01em;
}
h2 {
    font-weight: 600;
}
h3 {
    font-weight: 500;
    color: var(--text-dark);
}
h4, h5 {
    color: var(--text-dark);
}
p {
    color: var(--text-dark);
}
body {
    color: var(--text-dark);
}
a {
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
}
a:hover {
    color: var(--accent);
}

/* ===== FOOTER ===== */
.footer {
	background: var(--primary-dark);
	color: rgba(255, 255, 255, 0.8);
	padding: 80px 0 0;
}
.footer h5 {
	color: var(--white);
	font-size: 1.2rem;
	margin-bottom: 25px;
	font-weight: 700;
}
.footer p, .footer li {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.95rem;
	line-height: 1.8;
}
.footer ul {
	list-style: none;
	padding: 0;
}
.footer ul li {
	padding: 5px 0;
	margin-bottom: 0; /* neutralize legacy footer li margin */
}
.footer ul li a {
	color: rgba(255, 255, 255, 0.7);
	text-decoration: none;
	transition: all 0.3s ease;
	font-size: 0.9rem;
}
.footer ul li a:hover {
	color: var(--accent);
	padding-left: 5px;
}
.footer-contact-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 15px;
}
.footer-contact-item i {
	color: var(--accent);
	margin-top: 5px;
	width: 20px;
}
.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 25px 0;
	margin-top: 60px;
	text-align: center;
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.6);
}
.footer-bottom a {
	color: rgba(255, 255, 255, 0.6);
}
.social-links {
	display: flex;
	gap: 10px;
	margin-top: 20px;
}
.social-links a {
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	transition: all 0.3s ease;
}
.social-links a:hover {
	background: var(--accent);
	color: var(--white);
	transform: translateY(-3px);
}

/* ===== RESPONSIVE ===== */
/* Breakpoint: below 992px switch to mobile layout */
@media(max-width:992px){
    /* Hide the top bar entirely */
    .top-bar{
        display:none !important;
    }
    /* Show hamburger button, hide horizontal menu */
    .menu-toggle{
        display:block;
    }
    .nav-list{
        position:absolute;
        top:100%;
        left:0;
        width:100%;
        background:#fff;
        flex-direction:column;
        align-items:flex-start;
        max-height:0;
        overflow:hidden;
        transition:max-height 0.3s;
        box-shadow:0 3px 5px rgba(0,0,0,0.1);
    }
    .nav-list.open{
        max-height:2000px;
    }
    .nav-link{
        width:100%;
        line-height:50px;
    }
    /* Mobile dropdowns become static */
    .dropdown{
        position:static;
        box-shadow:none;
        border-top:1px solid #ddd;
        width:100%;
    }
    .quote-btn{
        margin:12px 1.4rem;
    }
}
@media (max-width: 1366px) {
    .nav-link {
        padding: 0 0.7rem;
        font-size: 15px;
    }
}

/* ============================================================
   BRAND OVERRIDE — high specificity
   goodhope-2026.css / home.css / goodhope.css are loaded BEFORE
   this chrome stylesheet. Some page-level class hooks
   (.serviceh2/.serviceh3/.orange/.learnmore/.back-cor-orange/
    .mainback) carry hard-coded #FF6600 / #999 / #7ed5ff etc.
   These rules win the cascade via !important so the new green
   palette propagates everywhere.
   ============================================================ */
.serviceh2 {
    color: var(--primary-dark) !important;
    font-size: 2.2rem !important;
    text-shadow: none !important;
    text-decoration: none !important;
}
.serviceh3 {
    color: var(--primary) !important;
    font-size: 1.7rem !important;
    text-shadow: none !important;
    text-decoration: none !important;
}
.orange {
    color: var(--accent) !important;
}
.learnmore {
    color: var(--accent) !important;
    border-bottom-color: var(--accent) !important;
}
.learnmore a {
    color: var(--accent) !important;
}

.mainback {
    background: linear-gradient(135deg, #015d38 0%, #1f7a4e 100%) !important;
}
/* Hero text inside .mainback stays white (now reads against deep green gradient) */
.mainback .imgtext h2,
.mainback .imgtext p {
    color: #ffffff !important;
}

/* Smooth scrolling for in-page anchors */
html { scroll-behavior: smooth; }

@charset "utf-8";
/* ============================================================
   GoodHope Freight — Cookie Consent Banner styles (2026-09)
   Shared across the site. Brand palette: green #015d38 +
   orange accent #ff6600 (matches goodhope-chrome-2026.css).
   ============================================================ */
.gh-cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 28px;
    background: #0c2b1d;
    color: #ffffff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.95rem;
    line-height: 1.55;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.28);
    border-top: 3px solid #71bf38;
    transform: translateY(110%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.gh-cookie-banner.gh-show {
    transform: translateY(0);
}
.gh-cookie-banner p {
    margin: 0;
    flex: 1 1 360px;
    color: rgba(255, 255, 255, 0.92);
}
.gh-cookie-banner p a {
    color: #71bf38;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 600;
}
.gh-cookie-banner p a:hover {
    color: #ff6600;
}
.gh-cookie-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.gh-cookie-btn {
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    padding: 11px 24px;
    border-radius: 30px;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.gh-cookie-btn:focus-visible {
    outline: 2px solid #ff6600;
    outline-offset: 2px;
}
.gh-cookie-btn-accept {
    background: #ff6600;
    color: #ffffff;
}
.gh-cookie-btn-accept:hover {
    background: #cc4f00;
    transform: translateY(-1px);
}
.gh-cookie-btn-decline {
    background: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.55);
}
.gh-cookie-btn-decline:hover {
    background: rgba(255, 255, 255, 0.14);
}

@media (max-width: 640px) {
    .gh-cookie-banner {
        padding: 14px 18px;
    }
    .gh-cookie-actions {
        width: 100%;
    }
    .gh-cookie-btn {
        flex: 1 1 auto;
    }
}