
  <style>
  
  /* Navbar Background & Logo */  
  .navbar.bg-dark {
    background: none !important;
  }
  nav.navbar {
    background-image: url('/assets/images/navbarbg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
  }
  .navbar-nav .nav-item {
    display: block !important;
  }
  .navbar .nav-link {
    position: relative !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    display: block !important;
    pointer-events: all !important;
  }
  .navbar .nav-link {
    color: #ffffff !important; /* Keeps text white for better contrast */
  }
  .navbar .nav-link:hover {
    color: #ffcc00 !important; /* Adds a hover effect */
  }
  .navbar-logo {
    height: 40px; /* Adjust the height as needed */
    width: auto; /* Keeps the image proportional */
    /* margin-right: 10px; Adds space between logo and text */
    vertical-align: middle; /* Aligns it properly with text */
  }

/* Parallax Container */
  .parallax {
    position: relative;
    overflow: hidden;
    height: 100vh; /* Full viewport on desktop */
  }
  /* Parallax Background */
  .parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-attachment: fixed; /* Parallax effect on desktop */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: brightness(70%);
  }
  /* Text Overlay */
  .parallax-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    color: #fff;
    text-align: center; /* Helps center text on all screens */
  }
  /* Override for smaller screens */
  @media (max-width: 768px) {
    .parallax {
      height: 300px; /* Set a fixed height for mobile */
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
    }
    .parallax-bg {
      background-attachment: scroll; /* Prevent fixed background */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
    }
    /* Ensure text remains over the image */
    .parallax-text {
      position: absolute; /* Keep it over the image */
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      color: white;
      width: 90%; /* Adjust for smaller screens */
      z-index: 2;
    }
    .parallax-text h1.display-4 {
      font-size: 1.75rem; /* Smaller font for mobile */
    }
    .parallax-text p.lead {
      font-size: 1rem;
    }
  }
	body {
       overflow-x: hidden;
    }
	 body, html {
      height: 100%;
      margin: 0;
      padding: 0;
    }
	 body a {
	   color:#ff0000;
	   font-weight:bold;
	 }
	.custom-border {
	  border: 2px solid #000; /* Set the border color to black (#000) or any other color code you prefer */
    }
	.custom-bg-color {
      background-color: #C0C0C0;
    }
	.paragraph-text {
      font-size: 20px;
	  color: #000000;
    }
	p {
      font-size: 20px;
    }
	.error-text {
	  font-size: 20px;
	  color: #000000;
	}

  #scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px; /* Circle size */
    height: 60px; /* Circle size */
    background-color: rgba(128, 128, 128, 0.6); /* Semi-transparent grey */
    border-radius: 50%; /* Make it a perfect circle */
    display: flex;
    align-items: center; /* Vertically center the icon */
    justify-content: center; /* Horizontally center the icon */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    z-index: 1000;
  }
  #scroll-to-top i {
    font-size: 32px; /* Adjust arrow size */
    color: #007BFF; /* Medium blue */
  }
  /* Hover effect */
  #scroll-to-top:hover {
    background-color: rgba(128, 128, 128, 0.8); /* Slightly darker grey */
    transform: scale(1.1); /* Slightly enlarge */
  }
  #scroll-to-top:hover i {
    color: #0056b3; /* Darker blue on hover */
  }
  /* Style to enable hover-based submenus */
  .dropdown-submenu {
    position: relative;
  }
  .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none;
    position: absolute;
  }
  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
  }
  
/* Hero Section Style */
  .hero-section {
    background-image: url('/assets/images/hero.jpg');
    height: 60vh; /* Reduced height for a more compact look */
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;
  }
  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .hero-content {
    position: relative;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
  }
  
/* In-page image display styles */
  .float-right {
    float: right;
    margin-left: 15px; /* Adds space between text and image */
	margin-top: 10px; /* Adds space above the baseline to balance it with the top of paragraph text */
    margin-bottom: 10px; /* Optional spacing */
    max-width: 40%; /* Ensures the image doesn't take up too much space */
  }
  .float-left {
    float: left;
    margin-right: 15px; /* Adds space between text and image */
	margin-top: 10px; /* Adds space above the baseline to balance it with the top of paragraph text */
    margin-bottom: 10px; /* Optional spacing */
    max-width: 40%; /* Ensures the image doesn't take up too much space */
  }
  .framed-image {
    display: inline-block; /* Keeps padding outside the image */
    border: 2px solid #888; /* Thin border with a subtle color */
    padding: 8px; /* Space between the border and the image */
    background-color: #fff; /* Optional: Background color for contrast */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Soft shadow for depth */
  }

/* Social Media Links */
  .social-media-links {
    margin-top: 20px;
  }
  .social-icon {
    display: inline-block;
    font-size: 36px; /* Adjust icon size */
    color: #fff; /* Default color */
    background: #333; /* Background color */
    width: 60px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    border-radius: 50%; /* Makes circular icons */
    margin: 30px 10px; /* Space between icons */
    transition: background 0.3s ease, transform 0.2s ease;
  }
  .social-icon:hover {
    transform: scale(1.1); /* Slight enlarge effect */
  }
  /* Facebook Icon */
  .social-icon .fa-facebook-f {
    color: #1877F2;
  }
  /* YouTube Icon */
  .social-icon .fa-youtube {
    color: #FF0000;
  }
  
  /* video archive sidebar styles */
  .video-archive-container {
    width: 100%; /* Ensures the container always matches the column width */
  }
  .accordion {
    width: 100%; /* Prevents it from expanding beyond the intended width */
  }
  /* style accordion card headers */
  .accordion .card-header {
    background-color: #003366; /* Dark Blue */
    color: white;
    font-weight: bold;
    text-align: left; /* Keeps text aligned */
  }
  /* accordion button styles */
  .accordion .btn-link {
    color: white; /* White text */
    font-weight: bold;
    text-decoration: none;
    width: 100%; /* Make the button fill the panel */
    text-align: left;
  }
  .accordion .btn-link:hover, 
  .accordion .btn-link:focus {
    color: #ffcc00; /* Yellow hover effect */
    text-decoration: none;
  }
  .accordion .card-body {
    background-color: #f8f9fa; /* Light gray background */
    padding: 10px;
  }
  
/* info box styles */
  .info-box {
    float: right; /* Floats it to the right of paragraph text */
    width: 40%; /* Adjust width as needed */
    padding: 10px;
    margin: 10px 0 10px 15px; /* Adds spacing around it */
    border: 1px solid #333; /* Thin border around the box */
    background-color: #dcdcdc; /* Light background for contrast */
    font-size: 0.95rem; /* Slightly smaller text */
}
  @media (max-width: 768px) { /* On smaller screens */
    .info-box {
        float: none; /* Stack normally instead of floating */
        width: 100%; /* Full width for better readability */
        margin: 10px 0; /* Adjust margins */
    }
  }
  
	/* 1) (Bootstrap 5+) Override the primary CSS variable */
	:root {
	  --bs-primary: #000080;
	}
	/* 2) Fallback overrides for buttons, backgrounds, and text */
	.btn-primary {
	  background-color: #000080 !important;
	  border-color:     #000080 !important;
	}
	.btn-primary:hover,
	.btn-primary:focus,
	.btn-primary:active {
	  /* slightly darker for hover/focus/active */
	  background-color: #000066 !important;
	  border-color:     #000066 !important;
	}
	.bg-primary {
	  background-color: #000080 !important;
	}
	.text-primary {
	  color: #000080 !important;
	  font-weight:bold !important;
	}
	
	/* High-contrast firebrick style for danger alerts */
	.alert.alert-danger {
	  background-color: #B22222 !important;  /* firebrick */
	  border-color:     #B22222 !important;
	  color:            #ffffff !important;
	}
	/* “Notice” heading in bold white */
	.alert.alert-danger h4 {
	  color:          #ffffff;
	  font-weight:    bold;
	}
	/* Message text in bold white and right-aligned */
	.alert.alert-danger p {
	  color:          #ffffff;
	  font-weight:    bold;
	  text-align:     right;
	}
	
  .staff-member {
    overflow: hidden; /* Forces each staff section to respect float boundaries */
    margin-bottom: 20px; /* Adds spacing between staff members */
    padding-bottom: 20px;
    border-bottom: 1px solid #999; /* Optional: Adds a subtle divider */
  }

  </style>