/* Rounded blue menu bar */
.container-header .mod-menu {
  background-color: #00AAFF !important;
  
  border-radius: 12px;        /* <- round the corners */
  overflow: hidden;           /* clip hover/bg inside the curve */
  padding: 0.25rem 0.5rem;    /* optional spacing so radius is visible */
  /* display: inline-block;    /* uncomment to shrink-wrap the bar */
}
/* Optional: rounded “pills” for each menu item */
.container-header nav.navbar .navbar-nav .nav-link {
  border-radius: 8px;
}
.container-header .mod-menu a {
          border-radius: 8px;
            color: white; /* Replace with your desired color */
  font-weight: 700;                 /* bold */
  padding: 0.25rem 0.5rem;    /* optional spacing so radius is visible */
        }
.container-header .mod-menu a:hover {
            background-color: #FFFFFF; /* Replace with your desired color */
  border-radius: 8px;
            color: #FE8408; /* Replace with your desired color */
  padding: 0.25rem 0.5rem;    /* optional spacing so radius is visible */
        }
.container-header .mod-menu a:active {
            background-color: #FFFFFF; /* Replace with your desired color */
  border-radius: 8px;
            color: #4DA099; /* Replace with your desired color */
  padding: 0.25rem 0.5rem;    /* optional spacing so radius is visible */
        }


/* CURRENT (loaded) page item */
.container-header .mod-menu li.current > a,
.container-header .mod-menu li.active > a,
.container-header .mod-menu li.alias-parent-active > a,
.container-header .mod-menu a[aria-current="page"] {
  background-color: #FFFFFF !important;  /* same bg you use on hover */
  color: #4DA099 !important;             /* distinct text color */
  border-radius: 8px !important;
  font-weight: 800 !important;
  padding: 0.25rem 0.5rem !important;
}

/* Keep the same look when hovering the current item */
.container-header .mod-menu li.current > a:hover,
.container-header .mod-menu li.active > a:hover,
.container-header .mod-menu li.alias-parent-active > a:hover,
.container-header .mod-menu a[aria-current="page"]:hover {
  background-color: #FFFFFF !important;
  color: #4DA099 !important;
}
.container-header nav.navbar .nav-item.active > .nav-link,
.container-header nav.navbar .navbar-nav .nav-link.active,
.container-header nav.navbar .navbar-nav .nav-link[aria-current="page"] {
  background-color: #FFFFFF !important;
  color: #4DA099 !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
  padding: 0.25rem 0.5rem !important;
}



:root {
  --cassiopeia-color-primary: #FE8408;
  --cassiopeia-color-link: #4DA099;
  --link-color: #30638d;
  --link-color-rgb: 48, 99, 141;
  --cassiopeia-color-hover: #00AAFF;
  --link-hover-color: #00AAFF;
  --link-hover-color-rgb: 0, 170, 255;
}
/* 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: #00AAFF;
  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;
  
}
.banner-overlay {
    background-color: rgba(0, 0, 0, 0.2); /* Change the 0.2 value for more or less transparency */
}
.container-banner { background: none !important; background-image: none !important; }