@charset "UTF-8";
/* CSS Document */

/* Background color for navbar and dropdown menus */

.navbar-custom, .navbar-custom .dropdown-menu {

    background-color:#C98EEA;
    padding-left: 10px;
    padding-right: 10px;

}

/* Text color for navbar and dropdown menus */

.navbar-custom .navbar-brand, .navbar-custom .navbar-text,

.navbar-custom .navbar-nav .nav-link,

.navbar-custom .dropdown-item {

    color: #000000;

}

/* Background and text colors for current page link and links on hover and focus */

.navbar-custom .nav-item.active .nav-link,

.navbar-custom .nav-item:hover .nav-link,

.navbar-custom .nav-item:focus .nav-link,

.navbar-custom .dropdown-item:hover, 

.navbar-custom .dropdown-item:focus {

    background-color: #C98EEA;

    color:#D0EA99;

}

/* Border and text colors for menu icon on small screens */

.custom-toggler.navbar-toggler {

    border-color:#000000;

    color: #000000;

}

/* Hamburger icon - use same rgb values as previous rule for stroke */

.custom-toggler .navbar-toggler-icon {

  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 	  stroke='rgba(236,240,241, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  color:#D0EA99;

}

img {
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
}



.image-container {
  display: flex;
  justify-content: space-around; /* Adds space between images */
  flex-wrap: wrap; /* Allows stacking on mobile */
  gap: 10px; /* Space between images */
}

.fluid-img {
  width: calc(33.333% - 10px); /* 3 per row minus gap */
  height: auto; /* Maintains aspect ratio */
}
/* Responsive adjustment for mobile */
@media (max-width: 600px) {
  .fluid-img {
    width: 100%; /* Stack vertically on small screens */
  }
}

/* Style the footer */

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #C98EEA;
  color: #D0EA99;
  text-align: center;
}

/*center an image - img is an inline element*/

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	height: auto;
}