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



ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #395C85;
}

li {
  float: left;
}

li a {
  display: block;
  color: #D7B86E;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #D7B86E;
	color: #395C85;
}

/* CSS */
/*.row {
    display: flex;
    align-items: center; /* Align items vertically */
    /*justify-content: space-between; /* Adjust space between items */
	
/*}*/

.col {
    flex: 1; /* Allows the columns to resize proportionally */
}

.col-2 {
    max-width: 150px; /* Set a max-width for the image column */
}

img {
    max-width: 100%; /* Ensure the image is responsive */
    height: auto; /* Maintain aspect ratio */
}

h4 {
	color:chocolate;
}

.container {
    max-width: 95%;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}

label {
    display: block;
    margin: 10px 0 5px;
}

input, textarea, button {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    background-color: #395C85;
    color: D7b86e;
    border: none;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

/* Footer Styles */
.footer {
	background-color: #395C85;
	color: #D7B86E;
	text-align: center;    /* Center Text Alignment */
    padding: 20px;         /* Add Padding */
    font-size: 14px;
}

.footer a {
    color: #00bcd4; /* Light Blue for Links */
    text-decoration: none; /* Remove underline */
}

.footer a:hover {
    color: #ff5722; /* Change color on hover */
}

/* Apply minimum height to body */
html, body {
    height: 100%; /* Full height to ensure content expands */
    min-height: 600px; /* Minimum height of 600px */
    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
    display: flex; /* Enable flexbox for layout control */
    flex-direction: column; /* Stack child elements vertically */
}

/* Main content wrapper for ensuring full height layout */
.main-content {
    flex: 1; /* Fills available vertical space */
	
}

.flex-container {
  display: flex;
	flex-direction: row;
	flex-wrap: wrap;
  justify-content: space-evenly;
	  align-items: flex-start;

}

.h2{
	color:pink;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
  .flex-container {
    flex-direction: column;
  }
}