:root {
  /* Overshoot on landing. Local to the pins — the shared tokens in style.css
     are all decelerating curves with no overshoot. */
  --ease-drop: cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes pulse {
  20% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.1); opacity: 1; }
  80% { transform: scale(1); opacity: 0.7; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* Every pin is a <use> of the same <symbol>, so .pin/.shadow can't be reached
   per instance — the phase offset is inherited in as a custom property set on
   the <use> instead. Without it every pin bobs in lockstep. */
.pin {
  animation: bounce 2s ease-in-out infinite;
  animation-delay: var(--pin-delay, 0s);
  transform-origin: bottom center;
}

.shadow {
  animation: pulse 3s infinite ease-in-out;
  animation-delay: var(--pin-delay, 0s);
  transform-origin: center;
}
/* Hovering the <use> only changes colour — the bounce/pulse animations own the
   transform on the inner <g>, so a hover transform there would fight them. */
.pin-shape{
    color: black;
    transition: color var(--dur-base) var(--ease-standard);
}
.pin-shape:hover{
    color: var(--primary-color);
}
.pin-shape.primary{
    color: red;
}
.pin-shape.primary:hover{
    color: #b00020;
}

/* Entrance. It rides on the <use> because .pin's own transform belongs to
   `bounce`; fill-box makes the pin scale from its own tip rather than the SVG
   origin. The travel is in viewBox user units (the pin is 50 tall), so it
   scales with the map at every breakpoint. */
.js .reveal.pin-shape{
    transform-box: fill-box;
    transform-origin: bottom center;
    transform: translateY(-36px) scale(0.4);
    transition: opacity var(--dur-base) var(--ease-standard),
                transform var(--dur-slow) var(--ease-drop);
    transition-delay: calc(var(--reveal-i, 0) * 60ms);
}
.js .reveal.pin-shape.is-visible{
    transform: none;
}

/* Labels trail their pin in. Opacity only — a transform would drift the label
   off its city on the way. */
.js .reveal.pin-label{
    transform: none;
    transition: opacity var(--dur-base) var(--ease-standard);
    transition-delay: calc(var(--reveal-i, 0) * 60ms + 140ms);
}

/* Eased open instead of a d-none pop, so the button grows into the spinner. */
.submit-spinner{
    width: 0;
    margin-right: 0;
    opacity: 0;
    transition: width var(--dur-base) var(--ease-out),
                margin-right var(--dur-base) var(--ease-out),
                opacity var(--dur-base) var(--ease-standard);
}
.submit-spinner.is-active{
    width: 1rem;
    margin-right: .4rem;
    opacity: 1;
}
.map-peninsular{
    height: 500px;
}
.map-borneo{
    height: 500px;
}
.pin-label{
    fill: var(--primary-color);
}
@media (min-width: 1170px) and (max-width: 1500px){
    .map-peninsular{
        height: 400px;
    }
    .map-borneo{
        height: 400px;
    }
}
@media (min-width: 1000px) and (max-width: 1170px){
    .map-peninsular{
        height: 340px;
    }
    .map-borneo{
        height: 340px;
    }
}
.show-on-large{
    display: block;
}
.map-header{
    display: none;
}
.corporate-office-info {
  font-size: medium;
  line-height: 1.2;
}
.corporate-office-info .address{
  text-align: justify;
}

@media (min-width: 470px) and (max-width: 1000px){
    .map-peninsular{
        height: 300px;
    }
    .map-borneo{
        height: 300px;
    }
}
@media(max-width: 470px){
    .map-peninsular{
        height: 250px;
    }
    .map-borneo{
        height: 250px;
    }
    /* .reveal.is-visible sets opacity:1 and outweighs a bare .pin-label, so the
       revealed state has to be hidden here too or labels come back on phones. */
    .pin-label,
    .js .reveal.pin-label.is-visible{
        opacity: 0;
    }
    .corporate-office-info {
      font-size: small;
    }
    .corporate-office-info > div {
      font-size: small;
    }
}
@media(max-width: 863px){
    .show-on-large{
        display: none;
    }
    .map-header{
        display: block;
        font-weight: 400;
        color: var(--primary-color);
        font-size: 1.1rem;
    }
}

@media(max-width: 570px){
    .header{
        margin-left: .5rem;
        padding: 0;
    }
}


@media (max-width: 950px){
    .corporate-office-info{
        gap: 1rem !important;
    }
  .corporate-office-info > div {
    gap: 0.5rem !important;
  }
}
@media (max-width: 837.98px) {
  .corporate-office-info {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    text-align: center;
  }
  .corporate-office-info > .d-flex {
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
     text-align: justify;
  }

   .corporate-office-info > .d-flex > p {
       text-align: justify;
       max-width: 90%;
   }

    .corporate-office-info > h3 {
        text-align: center;
        margin-bottom: 0;
    }

    .corporate-office-info > p {
        text-align: center;
        margin-bottom: 0;
    }
}
td, th{
    border-style: dashed;
    border-color: var(--primary-color);
    color: var(--primary-color) !important;
}
th{
    border-style: none;

}
td, th, tr, table{
    background-color: #f2f2f2 !important;
}
td.location{
    color: gray !important;
}
.page-item > button{
    background-color: transparent;
}