:root {
    --cassiopeia-color-primary: #aeb0b5;
    --cassiopeia-color-link: #000000;
    --cassiopeia-color-hover: #5b616b;
}


/* First we colour the background of the 'container-header' white. Because the purple is technically an image */
.container-header {
    background-color: white;
    background-image: none;
}

/* Main Menu Text Colour */
.container-header .mod-menu {
    color: #323a45;
}

/* We add padding and radius so that on hover there is a nice background 
.container-header .mod-menu a {
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px; 
    padding: 3px 15px;
    color: #0088cc;
}*/

/* Main Menu Hover Colour 
.container-header .mod-menu a:hover {
    background-color: #94bfa2;
}*/

/* We need to change the color of the Hamburger Menu because white on white is not good */
.container-header .navbar-toggler {
    color: #000000;
    border: 1px solid #000000;
}


/* Button Colour */
.btn-primary:hover {
  	background-color: #94bfa2;
    border: 1px solid #4aa564;
}

/* Footer */
.footer .grid-child {
 	column-gap: 2.5em;
}

/* Font Awesome */
.fa {font-family: inherit;}
.fa::before {font-family: "Font Awesome 5 Free"; margin-right: 5px;}

.far {font-family: inherit;}
.far::before {font-family: "Font Awesome 5 Free"; margin-right: 5px;}

.fas {font-family: inherit;}
.fas::before {font-family: "Font Awesome 5 Free"; margin-right: 5px;}

.image-title {
  	margin-left: 10px;
}

hr {
  	margin-top: 20px;
    margin-bottom: 20px;
    border: 10px solid Gainsboro;
 	border-radius: 5px;
}


/* Change Banner Background Image for Mobile (up to 767px) */
@media (max-width: 767px) {
    .container-banner .banner-overlay {
        background-attachment: scroll; /* Add scroll for background image */
    }
}