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

/***************************************************************
*
* CUSTOM COLORS
*
****************************************************************/



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

h1 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	font-size: 4rem;
}

h2 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
	font-size: 3rem;
}

h3 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
}

h4
{

}

p, li {
  font-family: "Lato";
}

a
{
	text-decoration: none;
}

a:hover
{

}

.indent {
	margin-left: 2rem;
}

.double-indent {
	margin-left: 4rem;
}

/***************************************************************
*
* SITE NAME
*
****************************************************************/

.site-name
{
	font-size:1.6rem;
}

@media (max-width: 767px) { /* Mobile */
	.site-name
	{
		font-size:1.2rem;
	}
}

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

nav
{
	background-color: #817a7a;
}

.nav-link
{
	color: #ffffff;
}

.nav-link:hover
{
	color: #dddddd;
}

/***************************************************************
*
* OFF CANVAS NAVIGATION
*
****************************************************************/

/* Dark grey, slightly opaque background for the offcanvas */
.offcanvas-start
{
	background-color: rgba(33, 33, 33, 0.95) !important; /* Dark grey with opacity */
}

/* Ensure the text color inside the offcanvas is white and not opaque */
.offcanvas-start .offcanvas-body, .offcanvas-start .offcanvas-header
{
	color: #ffffff;
}

.offcanvas-body h2
{
	color: #ffffff;
}

/* Apply white color to nav-links only inside the offcanvas */
.offcanvas-start .nav-link
{
	color: #ffffff;
}

.offcanvas-body p, .offcanvas-body a {
	color: #ffffff;
}

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

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

/* Change checkbox background to main green when checked */
.form-check-input:checked {
	background-color: var(--main-green) !important;
	border-color: var(--main-green) !important;
}

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

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

.btn-primary:hover {
	background-color: #cecbc6;
	color: #000000;
}

.btn-1
{
	border: 1px solid #000000;
	color: #000000 !important;
	border-radius: 0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
}

.btn-2
{
	border: 1px solid #cecbc6;
	color: #cecbc6 !important;
	border-radius: 0;
	font-family: 'Cormorant Garamond', serif;
	font-weight: 300;
}

.btn-1:hover,
.btn-1:focus,
.btn-1:active,
.btn-1:active:focus,
.btn-2:hover,
.btn-2:focus,
.btn-2:active,
.btn-2:active:focus {
	background-color: #000000 !important;
	border-color: #000000 !important;
	color: #cecbc6 !important;
}

a.btn-1,
a.btn-2 {
	color: inherit;
}

a.btn-1:active,
a.btn-2:active {
	color: #cecbc6 !important;
}

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

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

.fade-in.show
{
	opacity: 1;
	transform: translateY(0);
}


/***************************************************************
*
* BOTTOM NAVIGATION
*
****************************************************************/

.bottom-nav
{
	background-color: #272727;
}

.bottom-nav h5
{
	color: #ffffff;
}

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

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

.bottom-nav a:hover
{
	color: #ffffff !important;
}

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

.footer
{
	background-color: #000000;
	color: #cccccc;
}

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

.footer a:hover
{
	color: #ffffff !important;
}