General Styles 
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Cardo', serif;	
}

.container {
  max-width: 960px;
}

.navbar {
  background-color: #3B4465;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}
.navbar a {
  color: white;
  transition: ease-in-out color .15s;
}
.navbar a:hover {
  color: #fff;
  text-decoration: none;
}

/* Hero Section Styles */
.hero {
    background-color: #2b3d52; /* Dark blue background */
    color: #ffffff; /* White text */
    text-align: center;
    padding: 200px 0px; /* Adjust as needed */
	background-image: url('images/buildings.jpg');
	background-size: cover; /* Cover ensures that the background covers the entire footer */
    background-position: center; /* Align the background image nicely */
    background-repeat: no-repeat; /* Prevent the background image from repeating */	
	min-height: 300px;
	width: 100%;
	height: 100%;	
}

.hero h1 {
	font-size: 5em;
}

.hero h2 {
	font-size: 3em;	
}

#about p {
	font-size: 1.5em;
}

#about .emphasis {
	font-weight: bold;
}

/*.main-title, .subtext { */
  /*display: inline-block; /* This makes the elements inline-block */
  /*text-align: left; /* Aligns the text to the left */
  /*width: 100%; /* Forces the elements to take full width of their line */
/*}*/

/* Logo Styles */
nav img {
    height: 50px; /* Adjust as needed */
    width: auto;
    /* Additional styling */
}

.navbar a.active {
    font-weight: bold;
    color: #0056b3; /* or any color to indicate active state */
}

.program-cell {
  background: linear-gradient(to bottom right, #0094FF, #123456); /* Replace with your colors */
  color: white; 
  padding: 20px;
  border-radius: 8px;  
}

footer {
    background-color: #2b3d52; /* Dark blue background */
	background-image: url('images/footerbuildingnew.jpg');
	padding: 200px 0px; /* Adjust as needed */
    background-size: cover; /* Scale the image to 100% of the footer's width */	
	background-position: center; /* Align the background image nicely */
    background-repeat: no-repeat; /* Prevent the background image from repeating */
    color: white; /* White text */    	
	min-height: 300px;
	width: 100%;
	height: 100%;
}

.footer-image-container img {
  max-width: 100%; /* Ensures the image is responsive and does not overflow its container */
  max-height: 250px; /* Adjust this value based on your needs */
  width: auto; /* Allows the image to scale responsively */
  height: auto; /* Maintain aspect ratio */
  object-fit: contain; /* Ensures the image is scaled correctly without being cropped */
}

.social-icons {
  margin-top: 20px; /* Or any other spacing you prefer */
}

.social-icons a {
  color: #fff; /* White icons */
  font-size: 24px; /* Size of icons */
}

.social-icons a:hover {
  color: #ccc; /* Lighter color on hover */
}

.flex-equal > * {
  -ms-flex: 1;
  flex: 1;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    -ms-flex: 1;
    flex: 1;
  }
}

.overflow-hidden { overflow: hidden; }