/* === HOMEPAGE CAROUSEL — TRUE CROSSFADE === */
/* == Homepage Slideshow == */
.slideshow-box:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 300px;
    background: url(/webcontent/webimage/menu-overlay.png) repeat-x top left;
    top: 0;
    left: 0;
	z-index: 1;
	transform: scale(1);
    transition: transform 0.8s ease;
}
.slideshow-box:after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(/webcontent/webimage/home-slider-mask-new1.png) repeat-x bottom left;
    bottom: 0;
    left: 0;
	z-index: 1;
}
.slideshow-box {
	height: 95vh;
	width: 100%;
	position: relative;
	margin-top: -50px;
}
#slide-1 {
	background-image: url("/webcontent/webimage/1.jpg");
}
#slide-2 {
	background-image: url("/webcontent/webimage/2.jpg");
}
#slide-3 {
	background-image: url("/webcontent/webimage/3.jpg");
}
#slide-4 {
	background-image: url("/webcontent/webimage/4.jpg");
}
.fill {
	width: 100%;
	height: 95vh;
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
}
#myCarousel {
	position: relative;
	width: 100%;
	z-index:0;
}
.carousel-inner {
	height: 100%;
}
.carousel-fade .carousel-inner .item {
	opacity: 0;
	transition-property: opacity;
}
.carousel-fade .carousel-inner .active {
	opacity: 1;
}
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
	left: 0;
	opacity: 0;
	z-index: 1;
}
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
	opacity: 1;
}
.carousel-fade .carousel-control {
	z-index: 2;
}
@media all and (transform-3d), (-webkit-transform-3d) {
	.carousel-fade .carousel-inner > .item.next,
	.carousel-fade .carousel-inner > .item.active.right {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	.carousel-fade .carousel-inner > .item.prev,
	.carousel-fade .carousel-inner > .item.active.left {
		opacity: 0;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
	.carousel-fade .carousel-inner > .item.next.left,
	.carousel-fade .carousel-inner > .item.prev.right,
	.carousel-fade .carousel-inner > .item.active {
		opacity: 1;
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}
}
.carousel-caption {
	bottom: 25vh;
}
.carousel-caption h1 {
	text-transform: uppercase;
}
.carousel-caption h1 small {
	color: #fff;
	text-transform: lowercase;
}
/* === welcome message on carousel === */
.welcome-message-home {
	position: absolute;
	left:0;
	right: 0;
	bottom: 100px;
	margin: 0 auto;
	padding-right: 50px;
	z-index: 5;
	background-color: rgba(0, 180, 229, 0.5);
}
.welcome-message-home h2 span {
	color: #fff;
	font-size: 3.0vw;
	text-align: right;
	font-weight: 500;
}
.welcome-message-home h2 {
	color: #fff;
	font-size: 2.0vw;
	text-align: right;
	font-weight: 200!important;
}

#feature-boxes .row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 20px;
}

#feature-boxes .feature-box {
  float: none;
  width: 18%;
  margin: 0;
  padding: 0;
}

@media (max-width: 991px) {
  #feature-boxes .row {
    flex-wrap: wrap;
  }

  #feature-boxes .feature-box {
    width: calc(50% - 20px);
  }
}

@media (max-width: 600px) {
  #feature-boxes .feature-box {
    width: 100%;
  }
}
/* === FEATURE BOX TEXT + HOVER FIX === */

#feature-boxes {
  padding: 30px 15px;
}

#feature-boxes .feature-box {
  position: relative;
  height: 220px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: transform 0.35s ease, filter 0.35s ease;
}

#feature-boxes .feature-box:hover {
  transform: scale(1.05);
  filter: brightness(1.05);
}

#feature-boxes .feature-box a {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

#feature-boxes .feature-box span {
  background: rgba(0, 180, 229, 0.8);
  color: #fff;
  padding: 10px 18px;
  border-radius: 30px;
  font-size: 1.2em;
  font-weight: 700;
  text-align: center;
  transition: all 0.35s ease;
}

#feature-boxes .feature-box:hover span {
  background: #e51837;
  color: #fff;
  transform: scale(1.08);
}

/* === SIDE PANEL === */
#side-panel {
  position: fixed;
  left: -320px;                   /* wider to match tab */
  bottom: 50%;
  transform: translateY(50%);     /* vertically centres panel */
  width: 320px;
	height: 80px;
  background: #e51837;
  color: #fff;
  z-index: 9999;
  transition: left 0.3s ease;
  padding: 5px 20px 5px 30px;   /* space from tab */
  border-radius: 0 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;        /* vertically centres content */
}

#side-panel.open {
  left: 0;
}

/* Semicircle toggle button */
#panel-toggle {
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);    /* aligns perfectly with panel */
  width: 50px;
  height: 80px;
  background: #e51837;
  border: none;
  color: #fff;
  border-radius: 0 40px 40px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  animation: pulseTab 2s ease-in-out infinite;
  z-index: 10000;
}

#panel-toggle i {
  font-size: 22px;
  color: #fff;
}

#panel-toggle:hover i {
  color: #00b4e5;
}

/* Pulse animation */
@keyframes pulseTab {
  0%   { transform: translateY(-50%) scale(1); }
  50%  { transform: translateY(-50%) scale(1.06); }
  100% { transform: translateY(-50%) scale(1); }
}
/* Stop pulsing when panel is open */
#side-panel.open #panel-toggle {
    animation: none !important;
    transform: translateY(-50%) scale(1) !important;
}

/* Hide on mobile */
@media (max-width: 768px) {
  #side-panel { display: none; }
}

#side-panel a {
  color: #fff !important;
}



/* === FEATURE BOX FIX === */
#feature-boxes a { cursor: pointer; }

/* Mobile */
@media (max-width: 768px){
  #contact-panel { width: 100%; right: -100%; }
}

/* ==============================
   HOUSEPOINTS
================================ */
.housepoints { margin: 60px 0 40px; }
.housepoints a { text-decoration: none; }
.housepoints h2 {
  color: var(--pink);
  font-weight: 900;
}

.sl-housepoints {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 0 10px;
}

.sl-hp-entry {
  flex: 1 1 calc(25% - 20px);
  max-width: 25%;
  min-width: 220px;
  padding: 20px;
  text-align: center;
}
.sl-hp-house {
  font-weight: bold;
  font-size: 1.5em;
  margin-top: 10px;
}
.sl-hp-points {
  font-size: 2em;
  margin-top: 10px;
}
/* Housepoints: place markers (1st/2nd/3rd/4th) */
.sl-hp-entry { 
  position: relative; 
  overflow: visible; /* ensure the badge can sit above the box */
}

.place-label {
  position: absolute;
  top: 0;                 /* anchor at top edge of the box */
  left: 50%;
  transform: translate(-50%, -110%); /* sit above and centred */
  background: #ffd700;    /* gold badge */
  color: #000;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.9em;
  line-height: 1;
  z-index: 10;            /* above winner pulse and content */
  display: none;          /* toggled by .show */
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* little pointer under the badge */
.place-label::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  border: 6px solid transparent;
  border-top-color: #ffd700;
}

/* show state (set by JS) */
.place-label.show { 
  display: inline-block;
  animation: fadeInLabel 0.5s ease-in forwards;
}

/* keep it tidy on small screens */
@media (max-width: 575px) {
  .place-label {
    font-size: 0.8em;
    transform: translate(-50%, -115%);
  }
}

/* Winner highlight */
.sl-hp-entry.winner::before { animation: pulse-winner 1.5s infinite; }
@keyframes pulse-winner {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Housepoint images */
[data-housename="Blue Owls"]::before,
[data-housename="Green Owls"]::before,
[data-housename="Red Owls"]::before,
[data-housename="Yellow Owls"]::before {
    content: "";
    display: inline-block;
    width: 120px;
    height: 120px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 5px auto;
}

[data-housename="Blue Owls"]::before {
    background-image: url('/webcontent/webimage/blue-owls.jpg');
}
[data-housename="Green Owls"]::before {
    background-image: url('/webcontent/webimage/green-owls.jpg');
}
[data-housename="Red Owls"]::before {
    background-image: url('/webcontent/webimage/red-owls.jpg');
}
[data-housename="Yellow Owls"]::before {
    background-image: url('/webcontent/webimage/yellow-owls.jpg');
}


/* House-specific colours */
[data-housename="House 1"] .sl-hp-house { color: #e4ae01; }
[data-housename="House 2"] .sl-hp-house { color: #004c89; }
[data-housename="House 3"] .sl-hp-house { color: #c80901; }
[data-housename="House 4"] .sl-hp-house { color: #2bad28; }

.housepoints-row h2 {
	
  font-family: "Quicksand", sans-serif;
	margin-bottom: -20px;
}
.housepoints-row a:hover {
	text-decoration: none!important;
}
/* == Google Translate CSS == */
.goog-te-gadget-simple {
	padding-left: 6px;
	border: 0px !important;
	margin-bottom: 10px;
}


/* === VALUE BOX GRID === */
.values-text-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin: 30px 0;
}

@media (max-width: 991px) {
    .values-text-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .values-text-grid { grid-template-columns: repeat(1, 1fr); }
}

/* === VALUE BOX BASE === */
.value-box {
    position: relative;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
	font-size: 25px;
    text-align: center;
	max-height: 200px;
	width: 100%;
    border-radius: 50% / 50%;
    padding: 20px;
    overflow: hidden;
    cursor: pointer;

    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;

    /* subtle shadow */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    transition: transform .3s ease, box-shadow .3s ease;
}

/* Default category background colours */
.value-box[data-type="achieve"]      { background: #4f81bc; }
.value-box[data-type="believe"]       { background: #c0504e; }
.value-box[data-type="care"]  { background: #4aacc5; }

/* === GRADIENT OVERLAY ANIMATION === */
.value-box::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #00b4e5, #e51837);
    transition: width .45s ease-out;
    z-index: 1;
}
.value-box:hover::before {
    width: 100%;
}

/* === TEXT LAYERS === */
.value-main,
.value-desc {
    position: absolute;
    z-index: 2;
    transition: opacity .35s ease;
    padding: 0 15px;
}

.value-main { opacity: 1; }
.value-desc {
    opacity: 0;
    font-size: 25px;
    line-height: 1.4;
    text-transform: none;
}

/* Swap the text on hover */
.value-box:hover .value-main { opacity: 0; }
.value-box:hover .value-desc { opacity: 1; }

/* === LIFT EFFECT ON HOVER === */
.value-box:hover {
    transform: translateY(-6px);
    box-shadow: 0px 8px 25px rgba(0,0,0,0.25);
}



/* ================================================
   VALUES STRIP (PURPLE → RED GRADIENT BAR)
   ================================================= */
.values-strip {
    width: 100%;
	height: 180px;
    padding: 35px 15px;
    text-align: center;

    /* Gradient sampled from your chain logo */
    background: linear-gradient(90deg, #43289b 0%, #7a2390 35%, #c21f52 70%, #e4243c 100%);



    position: relative;
    z-index: 5;
}
.values-strip::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -50px;
    width: 100%;
    height: 120px;
    background: #fff;

    clip-path: path("M -0.838676 88.4999 H 2315 V 44.4999 C 1889.36 29.1082 1896.31 -4.6488 1348.64 13.2494 C 800.965 31.1477 622.46 83.9149 -0.838676 43.9999 V 88.4999 Z");
}
.values-inner {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #ffffff;
    letter-spacing: 1px;
    text-transform: uppercase;
    word-spacing: 12px;
}

/* Mobile font sizing */
@media(max-width: 768px){
    .values-inner {
        font-size: 18px;
        line-height: 1.4;
        display: block;
        padding: 0 10px;
    }
}


















// <weight>: Use a value from 200 to 800
// <uniquifier>: Use a unique and descriptive class name

.plus-jakarta-sans-<uniquifier> {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
/* ===============================
   VARIABLES
=============================== */
:root {
  --darkred: #e51837;
  --red: #e51837;
  --orange: #e51837;
  --pink: #e51837;
  --darkpurple: #e51837;
  --purple: #e51837;
}

/* ===============================
   NAVBAR BASE STYLES
=============================== */
.navbar-default {
  background-color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: 0 4px 4px rgba(0,0,0,0.1);
}

.navbar-default svg {
  margin-bottom: 10px;
}

.navbar-default .navbar-nav > li > a {
  padding-top: 50px;
  padding-bottom: 40px;
  width: 170px;
}

/* Centre the navbar links, etc. */
.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
  margin-top: 7px;
}
.navbar .navbar-collapse {
  text-align: center;
}

/* ===============================
   MENU LINK COLOURS AND STATES
=============================== */
/* Base colour for links (default state) */
.navbar-nav > li:nth-child(1) > a,
.navbar-nav > li:nth-child(1) > .dropdown-toggle {
  color: var(--darkred);
}
.navbar-nav > li:nth-child(2) > a,
.navbar-nav > li:nth-child(2) > .dropdown-toggle {
  color: var(--red);
}
.navbar-nav > li:nth-child(3) > a,
.navbar-nav > li:nth-child(3) > .dropdown-toggle {
  color: var(--orange);
}

.nav-right > li:nth-child(1) > .dropdown-toggle {
  color: var(--pink);
}
.nav-right > li:nth-child(2) > .dropdown-toggle {
  color: var(--darkpurple);
}
.nav-right > li:nth-child(3) > .dropdown-toggle {
  color: var(--purple);
}

/* Hover/focus states + dropdown toggle active states */
.navbar-default .navbar-nav > li:hover > a,
.navbar-default .navbar-nav > li:focus > a,
.navbar-default .navbar-nav > li > .dropdown-toggle:hover,
.navbar-default .navbar-nav > li > .dropdown-toggle:focus,
.nav-right > li:hover > .dropdown-toggle,
.nav-right > li:focus > .dropdown-toggle {
  color: #fff !important;
  background-color: transparent !important; /* animation gives the fill */
}

/* Colours for dropdown toggles when hovered/focused/active */
.navbar-nav > li:nth-child(1):hover > .dropdown-toggle,
.navbar-nav > li:nth-child(1):focus > .dropdown-toggle,
.navbar-nav > li:nth-child(1):active > .dropdown-toggle {
  background-color: var(--darkred);
}
.navbar-nav > li:nth-child(2):hover > .dropdown-toggle,
.navbar-nav > li:nth-child(2):focus > .dropdown-toggle,
.navbar-nav > li:nth-child(2):active > .dropdown-toggle {
  background-color: var(--red);
}
.navbar-nav > li:nth-child(3):hover > .dropdown-toggle,
.navbar-nav > li:nth-child(3):focus > .dropdown-toggle,
.navbar-nav > li:nth-child(3):active > .dropdown-toggle {
  background-color: var(--orange);
}

/* Dropdown menu hh behaviour */
.navbar-nav > li:hover .dropdown-menu,
.nav-right > li:hover .dropdown-menu {
  background-color: #fff;
  color: #000;
  text-align: center;
}
.navbar-nav > li:hover .dropdown-menu li a:hover,
.nav-right > li:hover .dropdown-menu li a:hover {
  color: #fff;
}
.navbar-nav > li:nth-child(1):hover .dropdown-menu li a:hover {
  background-color: var(--darkred);
}
.navbar-nav > li:nth-child(2):hover .dropdown-menu li a:hover {
  background-color: var(--red);
}
.navbar-nav > li:nth-child(3):hover .dropdown-menu li a:hover {
  background-color: var(--orange);
}
.nav-right > li:nth-child(1):hover .dropdown-menu li a:hover {
  background-color: var(--pink);
}
.nav-right > li:nth-child(2):hover .dropdown-menu li a:hover {
  background-color: var(--darkpurple);
}
.nav-right > li:nth-child(3):hover .dropdown-menu li a:hover {
  background-color: var(--purple);
}

/* ===============================
   ANIMATED FILL LAYER
=============================== */
/* Set up menu-bg vars */
.navbar-nav > li:nth-child(1) { --menu-bg: var(--darkred); }
.navbar-nav > li:nth-child(2) { --menu-bg: var(--red); }
.navbar-nav > li:nth-child(3) { --menu-bg: var(--orange); }
.nav-right > li:nth-child(1) { --menu-bg: var(--pink); }
.nav-right > li:nth-child(2) { --menu-bg: var(--darkpurple); }
.nav-right > li:nth-child(3) { --menu-bg: var(--purple); }

/* Base link + dropdown-toggle setup for animation */
.navbar-default .navbar-nav > li > a,
.nav-right > li > .dropdown-toggle {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 0;
  transition: color 1.45s ease;
}
.navbar-default .navbar-nav > li > a::before,
.nav-right > li > .dropdown-toggle::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 14px; height: 14px;
  background: var(--menu-bg, #e51837);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 1.45s ease;
  z-index: -1;
}
.navbar-default .navbar-nav > li > a:hover::before,
.navbar-default .navbar-nav > li > a:focus::before,
.nav-right > li > .dropdown-toggle:hover::before,
.nav-right > li > .dropdown-toggle:focus::before {
  transform: translate(-50%, -50%) scale(40);
}

/* Optional: reduce motion users */
@media (prefers-reduced-motion: reduce) {
  .navbar-default .navbar-nav > li > a,
  .nav-right > li > .dropdown-toggle,
  .navbar-default .navbar-nav > li > a::before,
  .nav-right > li > .dropdown-toggle::before {
    transition: none;
  }
}

/* ===============================
   RIGHT-SIDE DROPDOWNS ALIGNMENT
=============================== */
.nav-right > li {
  position: relative;
}
.nav-right > li > .dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  min-width: 160px;
  text-align: left;
  margin-top: 0;
  border: none;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  z-index: 1000;
}
.fa-duotone {
	font-size: 25px !important;
}


/* ===============================
   OTHER STYLES (unchanged / general)
=============================== */

.footer-logo img { width: 100%; }
.ridge-logo { height: 155px; padding-left: 10px; }
.navbar-right { float: none !important; }
.btn-info { width: 130px; }

.headbanner {
  border-bottom: 4px solid #65584f;
  border-top: 4px solid #65584f;
  background-color: #fff;
}

.home-quicklinks {
  position: relative;
  top: -50px;
}
.home-quicklinks .pulse-button_upper {
  position: relative;
  top: -60px;
}

.pulse-button {
  position: relative;
  width: 175px;
  height: 175px;
  border: none;
  box-shadow: 0 0 0 0 rgba(10, 36, 99, 0.7);
  border-radius: 50%;
  color: #fff;
  background-color: #0A2463;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  animation: none;
  margin: 20px 0;
}
.pulse-button:focus {
  outline: 0;
}
.pulse-button:hover {
  animation: pulse 1s infinite cubic-bezier(0.66, 0, 0, 1);
}

@keyframes pulse {
  to { box-shadow: 0 0 0 45px rgba(232, 76, 61, 0); }
}

.sl-searchbox { margin-top: 10px; }
h2.col-sm-12, h1.col-sm-12, p.col-xs-12, p.col-sm-12 { padding: 0; }

#mainbody {
	font-size: 17px;
  background-color: #fff;
  padding-top: 80px;
  padding-bottom: 40px;
  border-radius: 10px;
  margin-bottom: 20px;
}

#header-outer { min-height: 250px; margin-bottom: 20px; }
#header { padding-top: 20px; }

#footer-outer {
    position: relative;
    background: #303030;    /* required footer colour */
    color: #ffffff;
    overflow: hidden;
    padding: 80px 0;
}

#footer-outer a {
	color: #fff!important;
}
#footer-outer h3 {
	color: #fff!important;
}
/* Silhouette image behind content */
.footer-bg-chain {
    position: absolute;
    right: -10%;            /* push slightly off-screen for style */
    top: 50%;
    transform: translateY(-50%);
    width: 90vw;            /* responsive scaling */
    max-width: 1200px;
    opacity: 0.25;          /* subtle, like Triumph example */
    pointer-events: none;   /* keeps links clickable */
    user-select: none;
}
.footer-link a { color: #fff; }

.gallery-item {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  transition: all 0.5s;
  transform: scale(0.8);
  height: 200px;
  display: flex;
  align-items: center;
}
.gallery-item:hover {
  transform: scale(1);
  box-shadow: 0 10px 20px rgba(128,128,128,0.75);
}

.page-image > div { text-align: center; margin: 20px auto; }
.page-image > div > img {
  width: 100%;
  display: block;
  margin: 0 auto;
}
.page-image-small-height > div > img {
  height: 25% !important;
  max-width: 600px;
  display: block;
  margin: 0 auto;
}
.page-image-small > div > img {
  width: 25% !important;
  max-width: 600px;
  display: block;
  margin: 0 auto;
}
.page-image-medium > div > img {
  width: 50%;
  max-width: 600px;
  display: block;
  margin: 0 auto;
}
.page-image-big > div > img {
  width: 75%;
  max-width: 600px;
  display: block;
  margin: 0 auto;
}

.page-quote > p {
  font-style: italic;
  text-align: center;
  margin: 20px auto;
}
.page-boxout > div > p {
  background-color: #C8102E;
  color: #fff;
  padding: 10px;
  margin-left: -15px !important;
  margin-right: -15px !important;
}

.page-imageslider .carousel-inner > .item > img,
.page-imageslider .carousel-inner > .item img {
  max-height: 500px;
  margin: 0 auto;
}
.page-imageslider .carousel-control.left,
.page-imageslider .carousel-control.right {
  background-image: none;
}

body {
  font-family: "Plus Jakarta Sans", sans-serif;
	font-size: 17px;
  background-color: #fff;
  margin-top: 100px;
}
h1, h2, h3 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: bold;
}
a { color: #555; }
a:hover { color: #777; }

.message {
  position: relative;
  padding: 15px;
  color: #000;
  background: #dddddd;
  border-radius: 20px;
}
.message:after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 40px;
  border-width: 15px 15px 0;
  border-style: solid;
  border-color: #dddddd transparent;
  display: block;
  width: 0;
}

.messagedate { text-align: right; margin-bottom: 1.8em; font-size: .75em; }

/* Category Items */
.cat-item {
  margin-bottom: 0;
  padding: 10px 0;
  border-bottom: 1px solid #e51837;
}
.cat-item:hover {
  background-color: rgba(186, 25, 42, 0.5);
  color: #fff;
}
.cat-title { margin-top: 0; }

/* Tables etc. */
.page-table td { border: 1px solid #bbbbbb !important; background-color: #fff; }
.cellshaded { background-color: #e51837 !important; color: #fff; }
.page-table-container {
  overflow-x: auto;
  margin-left: -15px !important;
  margin-right: -15px !important;
}
/* ==============================
   BANNERS & MARQUEE
================================ */
marquee {
  color: #fff;
  white-space: nowrap;
  background: #ba192a;
  border: 4px solid #ba192a;
}
.fixed {
  background: #fff;
  position: fixed;
  bottom: 0;
  width: 105%;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}
.scroll { list-style: none; margin: 10px; padding: 0; font-size: 1em; }
.scroll li { display: inline-block; padding: 0 20px 0 10px; border-right: 2px solid #412a99; }
.scroll li:last-child { border-right: none; }
.scroll li a { color: #fff; text-decoration: none; }
/* Other content and spacing corrections as previously */
/* ===============================
   RESPONSIVE / MEDIA QUERIES
=============================== */
@media screen and (max-width: 1220px) {
	.navbar-default .navbar-nav > li > a {
		padding-top: 40px;
		width: 150px;
	}
	.ridge-logo {
		max-height: 120px;
	}
}


@media screen and (max-width: 1186px) {
  .navbar-default .navbar-nav > li > a {
    width: 100%;
    padding-top: 30px;
    padding-bottom: 10px;
  }
  .navbar-toggle {
    margin: 32px 20px 32px 0;
  }
}


@media screen and (max-width: 782px) {
  #mainbody { border-radius: 0; }
  body { padding-bottom: 120px !important; }
  .slfooter { padding: 0; height: 150px; }
  .gradient-border-top { padding-bottom: 0; }
  .gradient-border-top h3 { font-size: 10px; line-height: 15px; }
  .gradient-border-top span { padding-left: 5px; }
  .fixed { width: 107% !important; }
  .home-quicklinks,
  .home-quicklinks .pulse-button-upper {
    top: 0;
    position: relative;
  }
}

@media screen and (max-width: 782px) {
  .slfooter .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    margin-bottom: 60px;
  }
  .slfooter .row > div { width: 50%; float: none; }
  .slfooter .row > div:nth-child(2) {
    order: 1; width: 100%; margin-bottom: 15px;
  }
  .slfooter .row > div:nth-child(1) { order: 2; }
  .slfooter .row > div:nth-child(3) { order: 3; }
  .dropdown-menu > li > a {
    padding: 12px 20px;
    display: block;
  }
}
@media (max-width: 782px) {
	.navbar .navbar-collapse {
		max-height: 450px;	
		overflow: scroll !important;
	}
	.open>.dropdown-menu {
		text-align: center;
	}
	.navbar-header {
		float: none;
	}
	.navbar-left,.navbar-right {
		float: none !important;
	}
	.navbar-toggle {
		display: block;
	}
	.navbar-collapse {
		border-top: 1px solid transparent;
		box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
	}
	.navbar-fixed-top {
		top: 0;
		border-width: 0 0 1px;
	}
	.navbar-collapse.collapse {
		display: none!important;
	}
	.navbar-nav {
		float: none!important;
		margin-top: 7.5px;
	}
	.navbar-nav>li {
		float: none;
	}
	.navbar-nav>li>a {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.collapse.in{
		display:block !important;
	}
	.navbar-nav .open .dropdown-menu {
		position: static;
		float: none;
		width: auto;
		margin-top: 0;
		background-color: transparent;
		border: 0;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
	max-width: 60%;
 }
@media screen and (max-width: 768px) {
	#mainbody {
		padding-top: 150px;
	}
	.header-background {
		top: -40px!important;
	}
}
/* News ticker replacement for marquee */
/* 1. The Container */
.ticker-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #00b4e5; /* Matching your screenshot's dark red/brown */
  overflow: hidden;
  z-index: 9999;
  height: 60px;
}

/* 2. The List Animation */
.sl-news-ticker-list {
  display: flex; /* Keeps the LI items side-by-side */
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
  align-items: center;
  white-space: nowrap;
  width: max-content;
  animation: ticker-scroll 45s linear infinite;
}

.sl-news-ticker-list:hover {
  animation-play-state: paused;
}

/* 3. The List Items */
.sl-news-ticker-list li {
  color: white;
  padding: 10px 20px;
  display: flex; /* Ensures the marker stays on the same line */
  align-items: center;
  font-family: Arial, sans-serif;
  font-size: 16px;
}
.sl-news-ticker-list li a{
  color: white;
	font-size:1.5em;
}
/* 4. The Fixed Red Marker */
.sl-news-ticker-list li:not(:last-child)::after {
  content: "■"; /* Using a square like your image suggests */
  color: #f8dc11; /* Bright Red */
  margin-left: 40px; /* Space after the text before the marker */
  display: inline-block; /* Keeps it on the same line */
  vertical-align: middle;
}

/* 5. The Responsive Animation */
@keyframes ticker-scroll {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100%);
  }
}
.masked-image {
	position: relative;
            width: 100%;
            aspect-ratio: 1 / 1; /* Ensures square */
            background-size: cover;
            background-position: center;
            -webkit-mask-image: url('/webcontent/webimage/oval-img-mask.png');
            -webkit-mask-size: cover;
            -webkit-mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-image: url('/webcontent/webimage/oval-img-mask.png');
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center;
            background-color: #fff; /* fallback color while loading */
	transform: scale(1);
    transition: transform 0.8s ease;
        }