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

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

/***************************************************************
*
* LOGO
*
****************************************************************/

@media (min-width: 768px) {
  #logo
  {
	  width:480px !important;
  }
}

/***************************************************************
*
* NAV
*
****************************************************************/

nav
{

}

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

.nav-link:hover
{
	color: #cb9742;
	text-decoration: none;
}

/***************************************************************
*
* PANELS
*
****************************************************************/

#panelWomanWings
{
	color: #ffffff;
	background-color: #c4b7b2;
	background-image: url('/images/woman-wings.webp');
	background-position: center; /* Position the background image */
	background-repeat: no-repeat; /* Prevent the background from repeating */
	background-size: cover; /* Ensure the background covers the entire div */
	position: relative; /* Necessary for child absolute positioning */
	min-height: 100vh;
	padding: 3em calc(20vw - 70px) 6em;
  }

@media (min-width: 768px)
{
  #panelWomanWings {
	  background-attachment: fixed; /* Works on desktop */
  }
}

  #opaquePanel
  {
	  padding:30px 30px 0 30px;
	  background-color: rgba(0, 0, 0, 0.5);
	  -webkit-border-radius: 0.375rem;
	  -moz-border-radius: 0.375rem;
	  border-radius: 0.375rem;
  }

@media (min-width: 768px)
{
  #opaquePanel
  {
	  background-color:  transparent;
	  padding:0 0 0 0;
  }
}

#panelBokeh
{
	color: #ffffff;
	background-color: #672c03;
	background-image: url('/images/blurry.webp');
	background-attachment: fixed; /* Creates the parallax effect */
	background-position: top; /* Center the background image */
	background-repeat: no-repeat; /* Prevent the background from repeating */
	background-size: cover; /* Ensure the background covers the entire div */
	position: relative; /* Necessary for child absolute positioning */
}

.panelWhite
{
	background-color: #ffffff;
	color:#000000;
}

.panelGrey
{
	background-color: #f3efed;
	color:#000000;
}

/***************************************************************
*
* CAROUSEL
*
****************************************************************/

.carousel-control-previous-icon, .carousel-control-next-icon {
	color: #ffffff;
	opacity:1.0;
}

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

h2
{
	color: #311503
}

a
{
	color: #cb9742;
	text-decoration: none;
}

/* Only underline "regular" links, not buttons or list-group items */
a:not(.btn):not(.list-group-item):hover {
	text-decoration: underline;
}

/***************************************************************
*
* TABLES
*
****************************************************************/

/* Standard blue links in tables */
table a {
	color: #0d6efd; /* Bootstrap default link blue */
	text-decoration: none;
}

table a:hover {
	text-decoration: underline;
}

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

.icon
{
	margin-right:1em;
	color:#cccccc
}

.icon:hover
{
	color: #000000;
}

.btn-primary > i.bi {
	color: #ffffff !important;
}
/***************************************************************
*
* LISTS
*
****************************************************************/

/* Make links black */
.list-group-item a {
  color: black !important;
  text-decoration: none; /* optional */
  display: block;        /* ensures the link fills the li */
  width: 100%;
  height: 100%;
}

/* Change background of the whole block on hover */
.list-group-item:hover {
  background-color: #f0f0f0; /* light grey */
}

/* Optional: keep the link text black on hover */
.list-group-item:hover a {
  color: black !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 */
	border-radius: 0.25rem; /* Optional: Rounded corners */
}

.form-control:disabled,
.form-select:disabled {
	background-color: #ffffff !important;
	color: #000000; /* default text color */
	border: 1px solid #f5f5f5;
}

/* 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;
}

.input-group-text {
	background-color: #f5f5f5; /* Match input background */
	border: 2px solid #f5f5f5; /* Remove border */
}

/* Change checkbox background to red when checked */
.form-check-input:checked {
	background-color: #03c2e3 !important;
	border-color: #03c2e3 !important;
}

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

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

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

.myButton
{
	background-color: rgba(0, 0, 0, 0.5);
}

/***************************************************************
*
* TABLES
*
****************************************************************/

.custom-bg,
.custom-bg thead,
.custom-bg tbody,
.custom-bg tr,
.custom-bg th,
.custom-bg td {
	background-color: transparent !important;
}

/***************************************************************
*
* FLIP CARDS
*
****************************************************************/

.flip-card {
	perspective: 1000px;
	margin-bottom: 1.5rem;
	height: 500px;
}

.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transition: transform 0.6s;
	transform-style: preserve-3d;
}

.flip-card-inner.flipped {
	transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	border-radius: .5rem;
	overflow: hidden;
}

.flip-card-front {
	display: flex;
	flex-direction: column;
	background-color: #343a40;
	color: #edd289;
	border: 1px solid #343a40;
	z-index: 2;
}

.flip-card-front .card-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.flip-card-front .card-text-container {
	flex-grow: 1;
}

.flip-card-back {
	transform: rotateY(180deg);
	background-color: #edd289;
	color: #000000;
	border: 1px solid #edd289;
	padding: 1rem;
	display: flex;
	flex-direction: column;
}

.flip-card-learn-more {
	border-color: #edd289;
	color: #edd289;
	margin-top: auto;
}
.flip-card-learn-more:hover {
	background-color: #edd289;
	color: #343a40;
}

.flip-card-icon {
	font-size: 3rem;
	display: block;
	text-align: center;
	margin-bottom: 1rem;
}

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

.footer
{
	background-color: #0e0704;
	color:#ffffff;
}

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

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