:root {
  --loong-blue: #0a4aa4;
  --loong-blue-bright: #1473d2;
  --loong-navy: #071c33;
  --loong-ink: #151c24;
  --loong-steel: #5c6874;
  --loong-mist: #edf2f6;
  --loong-line: #d7e0e8;
  --loong-white: #ffffff;
}

.garment-logo img {
  object-fit: contain !important;
  object-position: left center !important;
}

@media (min-width: 701px) {
  :root {
    --c1: #0a4aa4;
    --c2: #2f7dd1;
  }

  ::selection {
    color: #ffffff;
    background: var(--loong-blue);
  }

  a:focus-visible,
  button:focus-visible {
    outline: 3px solid rgba(20, 115, 210, 0.55);
    outline-offset: 3px;
  }

  .garment-nav > a,
  .dropdown-trigger {
    letter-spacing: 0;
  }

  .garment-header.is-scrolled {
    border-bottom-color: rgba(7, 28, 51, 0.1);
    box-shadow: 0 10px 30px rgba(7, 28, 51, 0.08);
  }

  body .dibu {
    padding-top: 72px;
    background-image: linear-gradient(90deg, rgba(4, 14, 27, 0.97), rgba(4, 14, 27, 0.82)), url(../img/loong/factory-campus-plain-v2.webp) !important;
    background-position: center 46% !important;
    background-size: cover !important;
    border-top: 4px solid var(--loong-blue);
  }

  body .dibu .bls {
    display: none;
  }

  body .dibu .footer-l .logo {
    width: 230px;
    max-width: 100%;
  }

  body .dibu .footer-l .logo img {
    width: 100%;
    height: auto;
    object-fit: contain !important;
    object-position: left center !important;
  }

  body .dibu .footer-r ul h3 {
    color: #ffffff;
  }

  body .dibu .footer-r ul h3::after {
    background: var(--loong-blue-bright);
  }

  body .dibu .footer-r ul li a:hover,
  body .dibu .footer-website a:hover {
    color: #9bc8ff;
  }
}