/***************************************************************
*
* BODY
*
****************************************************************/

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* Full height of the viewport */
}

main {
	flex: 1; /* Take up the available space */
}

/***************************************************************
*
* WIDTHS
*
****************************************************************/

@media(max-width: 768px) {
	.mobile100 {
		width: 100% !important;
	}
}

/***************************************************************
*
* NAVIGATION
*
****************************************************************/

nav
{

}

.navbar-nav li
{
	margin-right:20px;
}

.navbar-nav li:last-child
{
	margin-right: 0 !important;
}

.nav-link
{
	font-weight: 600;
}

.nav-link:hover
{
	color: #4169e1;
}

/***************************************************************
*
* TYPOGRAPHY
*
****************************************************************/

h2
{
	color: #000000;
}

h2 span
{
	color: #4169e1;
	border-bottom:6px solid #4169e1;
}

p, li
{
	font-size: 1.2em;
	line-height: 2em;
	color: #676767;
}

p strong
{
	color: #676767;;
}

a
{
	color: #4169e1;
	text-decoration: none;
}

/***************************************************************
*
* BUTTONS
*
****************************************************************/

.btn-primary
{
	background-color: #4169e1;
	color: #ffffff;
	border: none;
}

.btn-primary:hover
{
	background-color: #666666;
	color: #ffffff;
}

.btn-primary:active {
	background-color: #000000 !important; /* Set to your button's color */
	border-color: #000000 !important;
}

/***************************************************************
*
* ICONS
*
****************************************************************/

#social i
{
	font-size:3em;
}

#social a
{
	margin-right:20px;
	color: #ffffff !important;
}

#social a:last-child
{
	margin-right: 0;
}

#social a:hover
{
	color: #f7f7f7 !important;
}

/***************************************************************
*
* HOME PANELS
*
****************************************************************/

#homePanel1 {
	min-height: 600px;
	background: url('/images/main.webp') no-repeat center center;
	background-size: cover; /* Make sure the background image covers the container */
	background-color: #2349a5;
	color: #ffffff;

	display: flex;
	justify-content: center; /* Center horizontally */
	align-items: center; /* Center vertically */
	text-align: center; /* Optional: center text inside the container */
}

#homePanel1 h1
{
	text-align: left;
}

#homePanel1 h2
{
	text-align: left;
	letter-spacing: 4px;
}

#homePanel1 h2 span
{
	color: #ffffff;
	border-bottom:4px solid #ffffff;
}

#homePanel2
{
	background-color: #ffffff;
	color: #000000;
}

#homePanel3
{
	background-color: #f8f9fa;
	color: #000000;
}

/***************************************************************
*
* BREADCRUMBS
*
****************************************************************/

#breadcrumbs
{
	background-color: #2349a5;
}

#breadcrumbs p
{
	color: #ffffff;
}

#breadcrumbs a
{
	color: #ffffff;
}

#breadcrumbs a:hover
{
	text-decoration: underline;
}

/***************************************************************
*
* CARDS
*
****************************************************************/

.homePageCard
{
	background-color: #ffffff;
	border: 1px solid #4169e1;
	opacity: 0;
	transform: translateY(30px); /* Start slightly below */
	transition: opacity 1s ease-in, transform 1s ease-in;
}

.homePageCard.show
{
  opacity: 1;
  transform: translateY(0); /* Move to normal position */
}

.homePageCard p
{
	color: #676767;
}

.homePageCard i
{
	font-size: 3rem;
	margin: 0 0 20px 0;
	color: #4169e1;
}

.card-header
{
	font-size: 1.2rem !important;
}

p.card-text i
{
	font-size: 1rem !important;
}

/***************************************************************
*
* FORMS
*
****************************************************************/

/* Apply styles to all input, textarea, and select elements in forms */
form .form-control
{
	background-color: #f5f5f5; /* Light grey background */
	border: 2px solid #f5f5f5; /* No border */
	padding: 0.75rem 1rem; /* Larger padding */
	font-size: 1.1rem; /* Slightly larger font size */
	border-radius: 0.25rem; /* Optional: Rounded corners */
}

/* Remove focus box-shadow and slightly darker background when focused */
form .form-control:focus
{
	box-shadow: none; /* Remove focus shadow */
	background-color: #f5f5f5; /* Light grey background */
	border: 2px solid #000000; /* No border */
}

/***************************************************************
*
* PORTFOLIO
*
****************************************************************/

.portfolio img
{
	padding:12px;
	background-color:#f7f7f7;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.image-frame
{
	background-color: #f8f9fa; /* Bootstrap's light grey */
	height: 200px;
	overflow: hidden;
	border-radius: 0.25rem;
}

/***************************************************************
*
* FADE IN
*
****************************************************************/

.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in.show {
	opacity: 1;
	transform: none;
}

/***************************************************************
*
* FOOTER
*
****************************************************************/

.footer
{
	background-color: #272727;
}

.footer p
{
	color: #ffffff;
	font-size:0.9em;
}

.footer a
{
	color:#ffffff;
	text-decoration: none;
}