/* FONTS */
.body-font{font-family: "montserrat", sans-serif;} /* Weights 500 & 700 */
.title-font{font-family: "nave", sans-serif;} /* Weights 300, 600 & 900 */

/* COLORS */
.darkGrey { color: #3e3e40; }
.blueGreen { color: #4e746a; }
.orange { color: #b24c0f; }
.lightOrange { color: #DE793D; }
.tan {color:#CFC0A0; }
.light {color:#f1ede1; }

/* Prevent any element from overflowing horizontally */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    overflow-x: hidden;  /* Apply to all elements to prevent horizontal overflow */
}
/* Scroll Wrapper */
.scroll-wrapper {
  position: relative;
  height: 100vh;
  width: 100vw;
  overflow: hidden; /* prevents double scrollbars */
}

.scroll-content {
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  box-sizing: border-box;

  /* Hide native scrollbar (for WebKit) */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
}
.scroll-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

.custom-scrollbar {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 26px;
  height: 100%;
  background: transparent;
  z-index: 9999;
  pointer-events: none; /* lets content be clickable */
}

.custom-thumb
{
	position: absolute;
	width: 100%;
	background: #000;
	border-radius: 26px;
	pointer-events: auto;
	/* makes the thumb draggable */
	cursor: pointer;
	border: 1px #4e746a solid;
	 box-shadow: 2px 2px 4px #00000088;
}

html.touch-device .custom-scrollbar {
  display: none;
}
html.touch-device .custom-thumb {
  display: none;
}

body.hide-scroll-thumb .custom-thumb {
  display: none !important;
}

/* Ensure no horizontal overflow */
html, body {
/*  scroll-behavior: smooth; */
    height: 100%;
    width: 100%;
    overflow: hidden; /* Disable native scroll */
}

/* Prevent content and containers from overflowing horizontally */
.container, .wrapper-content, .header, .text-menu, .top-menu, .hamburger-menu {
    max-width: 100vw;  /* Ensure no element exceeds the viewport width */
    overflow-x: hidden;  /* Prevent horizontal overflow */
}

:focus { outline: 0; }

body
{
	position: relative;
	min-height: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
	background-color: #000;
	background: #f6f4ee url('../images/BKG-Parchment.jpg') no-repeat center center;
	background-attachment: fixed;
	font-style: normal;
}

/* 
h1, h2, h3, h4, .text-menu, .top-menu{font-family: "nave", sans-serif;}

h2
{
	font-weight: 900;
	font-size: clamp(34px, 2.8vw, 48px);
	color: #3e3e40;
	text-align: center;
}
 */

.text-menu, .top-menu{font-family: "nave", sans-serif;}

#logo
{
	width: 90%;
	max-width: 561px;
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
}

#wrapper-tl
{
	position: fixed;
	top: 0;
	left: -27.04%;
	width: 27.04%;
	z-index: 450;
}

#tl
{
	overflow: hidden;
	width: 100%;
	height: 0;
	padding-bottom: 116.71597633136095%;
	background: transparent url('../images/corner-left.png') no-repeat 0 0;
	background-size: contain;
}

#wrapper-tr
{
	position: fixed;
	top: 0;
	right: -73.88%;
	width: 73.88%;
	z-index: 451;
}

#tr
{
	overflow: hidden;
	width: 100%;
	height: 0;
	padding-bottom: 21.81916621548457%;
	background: transparent url('../images/corner-right.png') no-repeat 0 0;
	background-size: contain;
}

#wrapper-bl
{
	position: fixed;
	bottom: 0;
	left: -81.44%;
	width: 81.44%;
	z-index: 452;
}

#bl
{
	overflow: hidden;
	width: 100%;
	height: 0;
	padding-bottom: 21.856581532416502%;
	background: transparent url('../images/corner-left-bottom.png') no-repeat 0 0;
	background-size: contain;
}

@media (max-width: 989px)
{
	.home #wrapper-bl
	{
		width: 100%;
		height: 145px;
	}
	
	.home #bl
	{
		height: 100%;
		padding-bottom: 0;
		background-size: 670px;
	}
}

#wrapper-br
{
	position: fixed;
	bottom: 0;
	right: -30.88%;
	width: 30.88%;
	z-index: 453;
}

#br
{
	overflow: hidden;
	width: 100%;
	height: 0;
	padding-bottom: 106.7357512953368%;
	background: transparent url('../images/corner-right-bottom.png') no-repeat 0 0;
	background-size: contain;
}

.portfolio #wrapper-tl,
				.portfolio #wrapper-tr,
				.portfolio #wrapper-bl,
				.portfolio #wrapper-br, { position: fixed; }

.corner
{
	display: block;
	pointer-events: none;
}

.container
{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 100%;
}

#wrapper-content
{
	overflow: auto;
	width: 90vw;
	margin: 0 auto 100px auto;
	/* 
					padding-left: 20px;
					padding-right: 20px;
		 */
}

@media (max-width: 767px)
{
	#wrapper-content { margin-bottom: 50px; }
}

.header
{
	position: relative;
	width: 100vw;
	/* Ensures it spans the full viewport width */
	height: 25vh;
	min-height: 130px;
	background-image: url('../images/BKG-Sky-Header.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: flex;
	justify-content: center;
	align-items: center;
}

.header-shadow
{
	position: relative;
	width: 100vw;
	/* Ensures it spans the full viewport width */
	height: auto;
	display: flex;
	justify-content: center;
	align-items: top;
}

.headerLogo
{
	height: 60%;
	/* 80% of parent height */
	width: auto;
	/* Maintain aspect ratio */
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* Hide stacked logo by default */
.logo-stacked {
    display: none;
}

/*MENU */
.top-menu
{
	display: block;
	/* Hide by default */
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
	font-size: clamp(20px, 1.3vw, 24px);
	font-weight: 300;
}

.top-menu ul
{
	list-style: none;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 10px;
}

.top-menu li
{
	display: inline-block;
}

.top-menu a
{
	text-decoration: none;
	font-weight: 600;
	color: #3E3E40;
	transition: color 0.3s ease-in-out;
}

.top-menu a:hover { color: #B24C0F; text-decoration: none;}

.top-menu li:hover
{
	text-decoration: none;
}


.text-menu {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  	text-align: center;
	margin: 20px 0;
}

/* Only show once everything is loaded */
body.loaded .text-menu {
  visibility: visible;
  opacity: 1;
}

.text-menu ul
{
	list-style: none;
	padding: 0;
	display: flex;
	justify-content: center;
	gap: 15px;
}

.text-menu li
{
	display: inline-block;
	background-color: #ffffffAA;
	border: 1px #000;
	padding: 16px 22px;
	border-radius: 8px;
	box-shadow: 4px 4px 10px #00000008;
}

.text-menu a
{
	text-decoration: none;
	font-weight: 600;
	font-size: clamp(20px, 1.3vw, 28px);
	color: #b24c0f;
	transition: color 0.3s ease-in-out;
}

.text-menu a:hover { color: #4e746a; text-decoration: none;}

.text-menu li:hover
{
	background-color: #fff;
	/* New background color on hover */
}

.text-menu li.active-menu-item {
	color: #aaa; /* Keep the distinct color */
	font-weight: 600;
	font-size: clamp(20px, 1.3vw, 28px);
	box-shadow: none; /* Remove box shadow */
	text-decoration: none;
	display: inline-block;
	cursor: default; /* Indicates the item is inactive */
	pointer-events: none; /* Prevents any hover or click interactions */
	background-color: #00000008;
}

/* Prevent hover styles from affecting the active item */
.text-menu li.active-menu-item:hover {
	background-color: inherit;
	color: inherit;
	cursor: default;
	box-shadow: none;
}

.content { max-width: 100vw; padding: 0 clamp(30px, 3.5vw, 40px) 140px;}
.hidden { display: none !important; }

/* General styles for the hamburger menu */
.hamburger-menu
{
	display: none;
	cursor: pointer;
	text-align: center;
	z-index: 400;
	position: relative;
	margin: 10px;
	
	/* Default positioning */
}

.hamburger-menu .bar
{
	display: block;
	width: 40px;
	height: 5px;
	margin: 5px auto;
	background-color: #4e746a;
	transition: 0.3s;
	transform-origin: center;
	border-radius: 2px;
}

/* Show hamburger icon when the screen is less than 1024px */

@media (max-width: 800px)
{
	 .logo-horizontal {
        display: none;
    }
    .logo-stacked {
        display: block;
    }
	.hamburger-menu
	{
		display: block;
		/* Show hamburger menu */
		position: relative;
		/* Default positioning */
	}
	
	/* Position the hamburger icon in the top-right when active */
	.hamburger-menu.active
	{
		position: absolute;
		/* Position it in the viewport */
		top: 20px;
		/* Adjust top positioning */
		right: 20px;
		/* Adjust right positioning */
		z-index: 10000 !important;
	}
	
	/* Hide normal navigation menu on small screens */
	.text-menu { display: none; }
	
	/* Mobile menu (hidden by default, shown on hamburger click) */
	.mobile-menu
	{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #191F17FF;
		display: none;
		/* Hidden by default */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		z-index: 400; 
	}
	
	.mobile-menu ul
	{
		list-style: none;
		padding: 0;
	}
	
	.mobile-menu li
	{
		margin: 20px;
		text-align: center;
		
	}
	
	.mobile-menu a
	{
		color: #CE7A30;
		font-size: 30px;
		font-weight: 600;
		text-decoration: none;
	}
	
	.mobile-menu a:hover { color: #fff; text-decoration: none;}
	
	.mobile-menu li.active-menu-item {
		color: #CE7A3066;
		font-size: 30px;
		font-weight: 600;
	}

}

/* Ensure the navigation is visible on larger screens */


@media (min-width: 801px)
{
	.text-menu
	{
		display: block;
		/* Show regular menu on larger screens */
		text-align: center;
	}
	
	.hamburger-menu
	{
		display: none !important;
		/* Hide hamburger menu */
	}
}


/* Active state for the hamburger menu */
.hamburger-menu.active .bar:nth-child(1)
{
    transform: rotate(45deg) translate(7px, 7px);
    background-color: #fff;
}

.hamburger-menu.active .bar:nth-child(2) { 
    opacity: 0; 
}

.hamburger-menu.active .bar:nth-child(3)
{
    transform: rotate(-45deg) translate(7px, -7px);
    background-color: #fff;
}

/*END MENU */

/* Hides HTML till loaded */
html {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-in;
}

html.visible {
  visibility: visible;
  opacity: 1;
}