:root {
  --cassiopeia-color-primary: #004177;
  --cassiopeia-color-link: #30638d;
  --link-color: #30638d;
  --link-color-rgb: 48, 99, 141;
  --cassiopeia-color-hover: #004177;
  --link-hover-color: #004177;
  --link-hover-color-rgb: 149, 75, 86;
}

/* Move back to top button from right to left */

.back-to-top-link {
  z-index: 10000;
  color: var(--cassiopeia-color-primary, #112855);
  pointer-events: all;
  background-color: var(--white, #fff);
  border: 1px solid var(--cassiopeia-color-primary, #112855);
  opacity: 0;
  inset-inline-end: 1rem;
  border-radius: .25rem;
  padding: .5em;
  transition: opacity .2s ease-in;
  position: fixed;
  right: 200px; /* Adjust this value to your preference */
}

.back-to-top-link.visible {
  opacity: 1;
}

.back-to-top-link:hover, .back-to-top-link:focus {
  color: var(--white, #fff);
  background-color: var(--cassiopeia-color-hover);
  border-color: var(--white, #fff);
}

/* Hide the back-to-top button on mobile devices */
@media all and (max-width: 768px) {
    .back-to-top-link {  /* Replace .back-to-top with the actual class or element selector */
        display: none;
    }
}

/* on the home page, set the background colour of the header to transparent and make it fixed */

.ishome .container-header {
  background-color: transparent;
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.5s;
}

/* set the background colour of the header on regular pages and when the page has scrolled*/
.container-header,
.container-header.scrolled {
  background-color: #004177;
  background-image: unset;
}

/* remove the margin from the module containing the logo */
.mod-custom p {
  margin: 0;
}

/* set the large banner to take up the full height of the viewport */
.container-banner .banner-overlay {
  height: 100vh;
}

@media (max-width: 768px) {
  .ishome .container-header, /* only required if using the full screen image on the home page */
  .container-header {
      position: fixed!important;
      top: auto;
      bottom: 0;
      width: 100%;
      padding: 0;
      background-color: #004177;
      background-image: unset;
  }
 .navbar-collapse {
      position: fixed;
      bottom: 60px;
      left: 0;
      padding-left: 15px;
      padding-right: 15px;
      padding-bottom: 15px;
      width: 100%;
      background: #004177;
      height: auto;
      overflow: auto;
  }
  .navbar-collapse.collapsing {
    height: auto;
    transition: left 0.3s ease;
    left: -100%;
  }

  .navbar-collapse.show {
    left: 0;
    transition: left 0.3s ease-in;
  }
 .navbar-toggler {
    position: fixed;
    bottom: 20px;
    z-index: 9999;
    display: block;
    width: 70px;
    height: 70px;
    background-color: #004177;
    border: 4px solid #ffff00 !important;
    border-radius: 40px;
    right: 10px;
  }
  .container-header img {
    max-width: 75%;
  }