:root {
  --dam-teal: #007880;
  --dam-teal-dark: #005f66;
  --dam-orange: #f86000;
  --dam-dark: #202733;
}

/* DAM Shipping brand palette while retaining the uploaded template structure. */
.bg-primary { background: var(--dam-teal) !important; }
.btn.btn-primary {
  background: var(--dam-teal) !important;
  border-color: var(--dam-teal) !important;
}
.btn.btn-primary:hover {
  background: transparent !important;
  color: var(--dam-teal) !important;
  border-color: var(--dam-teal) !important;
}
.heading-section .subheading,
.ftco-navbar-light .navbar-nav > .nav-item.active > a,
.services .icon span,
.services .btn-custom,
.blog-entry .topper .one,
.blog-entry .text .heading a:hover,
a:hover,
a:focus {
  color: var(--dam-teal);
}
.ftco-navbar-light .navbar-nav > .nav-item.cta > a,
.ftco-navbar-light.scrolled .nav-item.cta > a,
.services:hover .btn-custom,
.services:hover .icon,
.blog-entry .topper .one,
.ftco-consultation .overlay {
  background: var(--dam-teal) !important;
  border-color: var(--dam-teal) !important;
}
.ftco-navbar-light .navbar-nav > .nav-item.cta > a:hover {
  background: var(--dam-orange) !important;
  border-color: var(--dam-orange) !important;
  color: #fff !important;
}
.ftco-navbar-light.scrolled .nav-item.active > a,
.ftco-navbar-light.scrolled .nav-item > a:hover {
  color: var(--dam-teal) !important;
}
.hero-wrap .overlay { background: #071e27; opacity: .58; }
.hero-wrap h1 { text-shadow: 0 3px 18px rgba(0,0,0,.22); }
.ftco-footer { background: #15262b; }
.ftco-footer .logo a span { color: rgba(255,255,255,.75); }
#ftco-loader .path { stroke: var(--dam-orange) !important; }

.dam-navbar-logo {
  display: block;
  width: 230px;
  max-width: 48vw;
  height: 54px;
  object-fit: contain;
  object-position: left center;
}
.ftco-navbar-light.scrolled .dam-navbar-logo { height: 46px; }
.dam-footer-logo {
  width: 230px;
  max-width: 100%;
  height: auto;
  margin-bottom: 18px;
}
.dam-section-img {
  background-position: center;
  background-size: cover;
}
.dam-schedule-front:before,
.dam-vessel-case:before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(4,30,37,.78), rgba(4,30,37,.08));
}
.dam-schedule-front .box,
.dam-vessel-case .text { position: relative; z-index: 2; }
.dam-schedule-front .box h2,
.dam-schedule-front .box p { text-shadow: 0 2px 10px rgba(0,0,0,.45); }
.dam-contact-alert {
  background: rgba(255,255,255,.96);
  border-left: 4px solid var(--dam-teal);
  padding: 12px 16px;
  color: #233;
  margin-bottom: 20px;
  border-radius: 3px;
}
.dam-contact-alert.error { border-left-color: var(--dam-orange); }
.dam-gallery-avatar {
  border: 3px solid rgba(0,120,128,.18);
}
.dam-cta-link {
  display: inline-block;
  background: #fff;
  color: var(--dam-teal) !important;
  padding: 12px 24px;
  border-radius: 3px;
  font-weight: 600;
}
.dam-cta-link:hover { color: var(--dam-orange) !important; }
@media (max-width: 991.98px) {
  .dam-navbar-logo { width: 190px; height: 46px; }
  .ftco-navbar-light { background: #15262b !important; }
}

/* Homepage schedule: keep the uploaded homepage template, but restore DAM Shipping's timetable output. */
.dam-home-schedule-section { overflow: hidden; }
.dam-home-schedule-card {
  background: #fff;
  border: 1px solid #e4ecee;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 34px rgba(18, 59, 64, .08);
}
.dam-home-schedule-head {
  padding: 18px 22px;
  border-bottom: 1px solid #e5ecee;
  background: #fff;
}
.dam-home-schedule-head h4 {
  color: #252525;
  font-weight: 700;
  font-size: 19px;
}
.dam-home-schedule-code {
  display: block;
  margin-bottom: 3px;
  color: var(--dam-teal);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dam-home-schedule-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 30px;
  background: rgba(0, 120, 128, .10);
  color: var(--dam-teal-dark);
  font-size: 12px;
  font-weight: 700;
}
.dam-home-schedule-table {
  min-width: 1060px;
  margin: 0;
  background: #fff;
}
.dam-home-schedule-table thead th {
  background: var(--dam-teal-dark);
  color: #fff;
  border-color: rgba(255,255,255,.28);
  padding: 10px 9px;
  vertical-align: middle;
  font-size: 12px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.dam-home-schedule-table tbody td {
  border-color: #d7e1e4;
  padding: 12px 9px;
  vertical-align: middle;
  color: #164f55;
  font-size: 13px;
  line-height: 1.3;
  background: #fff;
}
.dam-home-schedule-table tbody tr:hover td { background: #f7fbfb; }
.dam-home-schedule-table tbody td:nth-child(2),
.dam-home-schedule-table tbody td:last-child { color: var(--dam-teal-dark); }
.dam-home-schedule-note {
  padding: 12px 20px;
  border-top: 1px solid #e5ecee;
  background: #f8fbfb;
  color: #65777a;
  font-size: 12px;
}
.dam-home-schedule-empty {
  padding: 36px 24px;
  border: 1px solid #e4ecee;
  border-radius: 8px;
  background: #fff;
  color: #7c898c;
  text-align: center;
}
@media (max-width: 767.98px) {
  .dam-home-schedule-head { padding: 15px 16px; }
  .dam-home-schedule-table { min-width: 1000px; }
}

/* FIX: service icon must stay visible when the service card is hovered/focused. */
.services:hover .icon span,
.services:focus .icon span,
.services:focus-within .icon span {
  color: #ffffff !important;
}

.services .icon,
.services .icon span {
  transition: all .3s ease;
}

/* FIX: homepage gallery carousel uses larger rectangular images and four cards per desktop slide. */
.testimony-section .carousel-testimony .owl-stage {
  display: flex;
  align-items: stretch;
}
.testimony-section .carousel-testimony .owl-item {
  display: flex;
  height: auto;
}
.testimony-section .carousel-testimony .item {
  width: 100%;
  height: 100%;
  display: flex;
}
.testimony-section .testimony-wrap {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e5ecee;
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(20, 55, 60, .08);
}
.testimony-section .testimony-wrap .text {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.testimony-section .testimony-wrap .text > .d-flex {
  order: 1;
  display: flex !important;
  flex-direction: column;
  align-items: stretch !important;
  width: 100%;
}
.testimony-section .testimony-wrap .dam-gallery-avatar,
.testimony-section .testimony-wrap .user-img.dam-gallery-avatar {
  width: 100% !important;
  height: 210px !important;
  flex: 0 0 210px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.testimony-section .testimony-wrap .pl-3 {
  width: 100%;
  padding: 17px 18px 6px !important;
}
.testimony-section .testimony-wrap .name {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  margin: 0 0 3px;
}
.testimony-section .testimony-wrap .position {
  color: var(--dam-teal);
  font-size: 14px;
  font-weight: 500;
}
.testimony-section .testimony-wrap .text > p.mb-4 {
  order: 2;
  margin: 0 !important;
  padding: 2px 18px 20px;
  color: #777;
  font-size: 14px;
  line-height: 1.65;
}
.testimony-section .carousel-testimony .owl-dots {
  margin-top: 28px;
}
@media (max-width: 1199.98px) {
  .testimony-section .testimony-wrap .dam-gallery-avatar,
  .testimony-section .testimony-wrap .user-img.dam-gallery-avatar {
    height: 200px !important;
    flex-basis: 200px;
  }
}
@media (max-width: 767.98px) {
  .testimony-section .testimony-wrap .dam-gallery-avatar,
  .testimony-section .testimony-wrap .user-img.dam-gallery-avatar {
    height: 230px !important;
    flex-basis: 230px;
  }
}

/* =========================================================
   DAM Shipping visual refinement
   - navbar looks identical before/after scroll
   - tighter vertical rhythm
   - consistent 10px corners
   ========================================================= */
.ftco-navbar-light,
.ftco-navbar-light.scrolled,
.ftco-navbar-light.sleep,
.ftco-navbar-light.awake {
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(20, 40, 45, .08) !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link,
.ftco-navbar-light.scrolled .navbar-nav > .nav-item > .nav-link {
  color: #252525 !important;
  padding-top: .85rem !important;
  padding-bottom: .85rem !important;
}
.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover,
.ftco-navbar-light .navbar-nav > .nav-item.active > .nav-link,
.ftco-navbar-light.scrolled .navbar-nav > .nav-item.active > .nav-link,
.ftco-navbar-light.scrolled .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--dam-teal) !important;
}
.ftco-navbar-light .navbar-nav > .nav-item.cta > a,
.ftco-navbar-light.scrolled .navbar-nav > .nav-item.cta > a {
  color: #fff !important;
  background: var(--dam-teal) !important;
  border-color: var(--dam-teal) !important;
  border-radius: 10px !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}
.ftco-navbar-light .navbar-toggler,
.ftco-navbar-light.scrolled .navbar-toggler {
  color: #222 !important;
  border-color: rgba(0,0,0,.15) !important;
}
.ftco-navbar-light .navbar-toggler span,
.ftco-navbar-light.scrolled .navbar-toggler span { color: #222 !important; }
.dam-navbar-logo,
.ftco-navbar-light.scrolled .dam-navbar-logo { height: 46px !important; }

/* Tighter homepage spacing. */
.ftco-section { padding: 3.25rem 0 !important; }
.ftco-section.ftco-no-pt { padding-top: 0 !important; }
.ftco-section.ftco-no-pb { padding-bottom: 0 !important; }
.ftco-section .row.mb-5,
.ftco-section .row.mb-5.pb-3 { margin-bottom: 2rem !important; padding-bottom: 0 !important; }
.heading-section h2.mb-4 { margin-bottom: 1rem !important; }
.services-wrap { padding-top: 2rem !important; }
.dam-about-home-actions .years { margin-top: 12px !important; }

/* Consistent 10px box corners across homepage. */
.services,
.services .icon,
.img-video,
.case,
.dam-home-schedule-card,
.dam-home-schedule-empty,
.testimony-section .testimony-wrap,
.blog-entry,
.blog-entry .block-20,
.ftco-consultation .form-control,
.ftco-consultation textarea,
.btn,
.dam-cta-link,
.tab-content,
.nav-pills .nav-link {
  border-radius: 10px !important;
}
.services { overflow: hidden; }
.img-video,
.case,
.blog-entry,
.testimony-section .testimony-wrap { overflow: hidden; }
.testimony-section .testimony-wrap { border-radius: 10px !important; }
.dam-home-schedule-card { border-radius: 10px !important; }
.dam-contact-alert { border-radius: 10px !important; }

@media (max-width: 991.98px) {
  .ftco-navbar-light,
  .ftco-navbar-light.scrolled {
    background: #fff !important;
  }
  .ftco-navbar-light .navbar-nav > .nav-item > .nav-link { color: #252525 !important; }
  .ftco-section { padding: 2.5rem 0 !important; }
}
/* Keep decorative service icons circular; card/box corners remain 10px. */
.services .icon { border-radius: 50% !important; }

/* =========================================================
   Shared public header on homepage
   The homepage now uses the exact same header partial as
   every other public page. Keep it visually identical at
   all times; no separate transparent/scrolled header state.
   ========================================================= */
body > .dam-navbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 1030 !important;
  margin: 0 !important;
  background: #ffffff !important;
  box-shadow: 0 2px 12px rgba(20, 40, 45, .08) !important;
  padding: 8px 0 !important;
}
body > .dam-navbar .dam-navbar-brand {
  display: inline-flex;
  align-items: center;
  padding: .2rem 0;
  margin-right: 1.1rem;
}
body > .dam-navbar .dam-logo-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
}
body > .dam-navbar .dam-site-logo {
  display: block;
  width: 205px;
  max-width: 44vw;
  height: auto;
}
body > .dam-navbar .navbar-nav > .nav-item > .nav-link {
  color: #252525 !important;
  font-size: 13px;
  font-weight: 500;
  padding: .9rem .72rem !important;
}
body > .dam-navbar .navbar-nav > .nav-item > .nav-link:hover,
body > .dam-navbar .navbar-nav > .nav-item > .nav-link.active {
  color: var(--dam-teal) !important;
}
body > .dam-navbar .dam-contact-button {
  display: inline-block;
  background: var(--dam-teal) !important;
  border: 1px solid var(--dam-teal) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-size: 13px;
  font-weight: 600;
  padding: .72rem 1.1rem !important;
  margin-top: .18rem;
}
body > .dam-navbar .dam-contact-button:hover {
  background: var(--dam-orange) !important;
  border-color: var(--dam-orange) !important;
  color: #fff !important;
}
body > .dam-navbar .navbar-toggler {
  border-radius: 10px;
  border-color: rgba(0,0,0,.12);
}

/* Service CTA arrow: keep it inside the card instead of dropping below it on hover. */
.services {
  padding: 20px 20px 76px !important;
  overflow: hidden;
}
.services .btn-custom,
.services:hover .btn-custom,
.services:focus .btn-custom,
.services:focus-within .btn-custom {
  bottom: 16px !important;
}
.services .btn-custom {
  opacity: 0;
}
.services:hover .btn-custom,
.services:focus .btn-custom,
.services:focus-within .btn-custom {
  opacity: 1;
}

@media (max-width: 991.98px) {
  body > .dam-navbar .dam-site-logo {
    width: 175px;
    max-width: 58vw;
  }
  body > .dam-navbar .navbar-collapse {
    padding: .75rem 0 1rem;
  }
  body > .dam-navbar .navbar-nav > .nav-item > .nav-link {
    padding: .65rem 0 !important;
  }
  body > .dam-navbar .dam-contact-button {
    margin-top: .35rem;
  }
}

/* =========================================================
   DAM Shipping unified public button system
   Consistent normal / hover / focus / active states.
   ========================================================= */
:root {
  --dam-button-teal: #007880;
  --dam-button-teal-dark: #005f66;
  --dam-button-orange: #f86000;
  --dam-button-orange-dark: #d94f00;
  --dam-button-focus: rgba(248, 96, 0, .24);
  --dam-button-shadow: 0 8px 20px rgba(0, 120, 128, .16);
  --dam-button-shadow-hover: 0 12px 26px rgba(248, 96, 0, .22);
}

.btn,
.dam-contact-button,
.dam-cta-link,
.services .btn-custom {
  transition: background-color .22s ease, border-color .22s ease, color .22s ease,
              box-shadow .22s ease, transform .22s ease !important;
  text-decoration: none !important;
}

.btn:not(.btn-link) {
  border-radius: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
}

/* Solid actions: one DAM Shipping visual language. */
.btn.btn-primary,
.btn.btn-dark,
.btn.btn-success,
.btn.btn-warning {
  background: var(--dam-button-teal) !important;
  border-color: var(--dam-button-teal) !important;
  color: #fff !important;
  box-shadow: var(--dam-button-shadow);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus,
.btn.btn-dark:hover,
.btn.btn-dark:focus,
.btn.btn-success:hover,
.btn.btn-success:focus,
.btn.btn-warning:hover,
.btn.btn-warning:focus {
  background: var(--dam-button-orange) !important;
  border-color: var(--dam-button-orange) !important;
  color: #fff !important;
  box-shadow: var(--dam-button-shadow-hover) !important;
  transform: translateY(-2px);
}

.btn.btn-primary:active,
.btn.btn-dark:active,
.btn.btn-success:active,
.btn.btn-warning:active,
.btn.btn-primary.active,
.btn.btn-dark.active,
.btn.btn-success.active,
.btn.btn-warning.active {
  background: var(--dam-button-orange-dark) !important;
  border-color: var(--dam-button-orange-dark) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(217, 79, 0, .20) !important;
  transform: translateY(0);
}

/* Outline actions: calm by default, strong orange highlight on hover. */
.btn.btn-outline-primary,
.btn.btn-outline-success,
.btn.btn-outline-secondary {
  background: #fff !important;
  border-color: var(--dam-button-teal) !important;
  color: var(--dam-button-teal) !important;
  box-shadow: none !important;
}

.btn.btn-outline-primary:hover,
.btn.btn-outline-primary:focus,
.btn.btn-outline-success:hover,
.btn.btn-outline-success:focus,
.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:focus {
  background: var(--dam-button-orange) !important;
  border-color: var(--dam-button-orange) !important;
  color: #fff !important;
  box-shadow: var(--dam-button-shadow-hover) !important;
  transform: translateY(-2px);
}

.btn.btn-outline-primary:active,
.btn.btn-outline-success:active,
.btn.btn-outline-secondary:active {
  background: var(--dam-button-orange-dark) !important;
  border-color: var(--dam-button-orange-dark) !important;
  color: #fff !important;
  transform: translateY(0);
}

/* Keyboard focus remains obvious without changing the text colour. */
.btn:focus,
.btn:focus-visible,
.dam-contact-button:focus,
.dam-contact-button:focus-visible,
.dam-cta-link:focus,
.dam-cta-link:focus-visible,
.services .btn-custom:focus,
.services .btn-custom:focus-visible {
  outline: 0 !important;
  box-shadow: 0 0 0 .22rem var(--dam-button-focus), var(--dam-button-shadow-hover) !important;
}

.btn:disabled,
.btn.disabled {
  opacity: .56 !important;
  transform: none !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* Main navbar CTA follows the same teal -> orange behaviour. */
body > .dam-navbar .dam-contact-button,
.ftco-navbar-light .navbar-nav > .nav-item.cta > a,
.ftco-navbar-light.scrolled .navbar-nav > .nav-item.cta > a {
  background: var(--dam-button-teal) !important;
  border-color: var(--dam-button-teal) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(0, 120, 128, .14);
}
body > .dam-navbar .dam-contact-button:hover,
body > .dam-navbar .dam-contact-button:focus,
.ftco-navbar-light .navbar-nav > .nav-item.cta > a:hover,
.ftco-navbar-light .navbar-nav > .nav-item.cta > a:focus,
.ftco-navbar-light.scrolled .navbar-nav > .nav-item.cta > a:hover,
.ftco-navbar-light.scrolled .navbar-nav > .nav-item.cta > a:focus {
  background: var(--dam-button-orange) !important;
  border-color: var(--dam-button-orange) !important;
  color: #fff !important;
  box-shadow: var(--dam-button-shadow-hover) !important;
  transform: translateY(-1px);
}

/* White CTA on dark/teal backgrounds. */
.dam-cta-link {
  background: #fff !important;
  border: 1px solid #fff !important;
  color: var(--dam-button-teal) !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .10);
}
.dam-cta-link:hover,
.dam-cta-link:focus {
  background: var(--dam-button-orange) !important;
  border-color: var(--dam-button-orange) !important;
  color: #fff !important;
  box-shadow: var(--dam-button-shadow-hover) !important;
  transform: translateY(-2px);
}

/* Service-card circular arrow: visible white icon, matching highlight. */
.services .btn-custom,
.services:hover .btn-custom,
.services:focus-within .btn-custom {
  background: var(--dam-button-teal) !important;
  border-color: var(--dam-button-teal) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px rgba(0, 120, 128, .18);
}
.services .btn-custom span,
.services:hover .btn-custom span,
.services:focus-within .btn-custom span {
  color: #fff !important;
}
.services .btn-custom:hover,
.services .btn-custom:focus {
  background: var(--dam-button-orange) !important;
  border-color: var(--dam-button-orange) !important;
  color: #fff !important;
  box-shadow: var(--dam-button-shadow-hover) !important;
  transform: translateY(-2px);
}

/* Keep button icons/text visually unified. */
.btn i,
.btn span,
.dam-contact-button i,
.dam-contact-button span,
.dam-cta-link i,
.dam-cta-link span {
  color: inherit !important;
}

.navbar-toggler {
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.navbar-toggler:hover,
.navbar-toggler:focus {
  border-color: var(--dam-button-teal) !important;
  background: rgba(0, 120, 128, .06) !important;
  box-shadow: 0 0 0 .18rem rgba(0, 120, 128, .12) !important;
}

/* =========================================================
   Responsive image presentation for DAM Shipping assets.
   Use cover so images fill their containers neatly on all screens.
   ========================================================= */
.dam-vessel-case,
.carousel-case .case {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #0b3444 !important;
}

.case .text,
.dam-vessel-case .text {
  width: calc(100% - 32px) !important;
  max-width: calc(100% - 32px) !important;
  margin: 0 16px;
  padding: 18px 16px;
  box-sizing: border-box;
  overflow: hidden;
}
.case .text h3,
.case .text h3 a,
.case .text span,
.dam-vessel-case .text h3,
.dam-vessel-case .text h3 a,
.dam-vessel-case .text span {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: normal;
}

.testimony-section .testimony-wrap .dam-gallery-avatar,
.testimony-section .testimony-wrap .user-img.dam-gallery-avatar {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #0b3444 !important;
}

.blog-entry .block-20 {
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-color: #0b3444 !important;
}

/* =========================================================
   Homepage mobile navigation - same compact panel as inner pages
   ========================================================= */
@media (max-width: 991.98px) {
  body > .dam-navbar > .container {
    position: relative;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  body > .dam-navbar .navbar-toggler {
    width: 44px;
    height: 42px;
    padding: 6px 8px !important;
    display: inline-grid;
    place-items: center;
    border: 1px solid #cbd7d9 !important;
    background: #fff !important;
    box-shadow: 0 3px 10px rgba(19, 55, 61, .08);
  }

  body > .dam-navbar .navbar-collapse {
    position: absolute;
    top: calc(100% + 8px);
    left: 16px;
    right: 16px;
    z-index: 1050;
    padding: 10px !important;
    background: #fff;
    border: 1px solid #e2ebec;
    border-radius: 12px;
    box-shadow: 0 18px 42px rgba(15, 50, 56, .16);
    max-height: calc(100vh - 92px);
    overflow-y: auto;
  }

  body > .dam-navbar .navbar-nav {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
    gap: 2px;
    align-items: stretch !important;
  }

  body > .dam-navbar .navbar-nav > .nav-item {
    width: 100%;
    margin: 0 !important;
  }

  body > .dam-navbar .navbar-nav > .nav-item > .nav-link {
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 10px 12px !important;
    border-radius: 8px;
    line-height: 1.35;
    color: #26383b !important;
  }

  body > .dam-navbar .navbar-nav > .nav-item > .nav-link:hover,
  body > .dam-navbar .navbar-nav > .nav-item > .nav-link:focus,
  body > .dam-navbar .navbar-nav > .nav-item > .nav-link.active {
    color: var(--dam-teal) !important;
    background: rgba(0, 120, 128, .08);
  }

  body > .dam-navbar .dam-contact-button {
    display: block !important;
    width: 100%;
    margin: 7px 0 0 !important;
    padding: 10px 14px !important;
    text-align: center;
  }
}

@media (max-width: 575.98px) {
  body > .dam-navbar > .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  body > .dam-navbar .dam-site-logo {
    width: 160px !important;
    max-width: calc(100vw - 86px) !important;
  }
  body > .dam-navbar .navbar-collapse {
    left: 12px;
    right: 12px;
  }
}
