/* Framewrk v2.0.0
(C) 2025 Pixel Savage, All Rights Reserved
=============================================================================================
LAST UPDATED: 20250820
 
== Table of Contents ==
Variables - Framewrk base variables
Base – Resets, tag defaults, foundational, overrides (e.g. body, headings, link tweaks - native tags plus Bootstrap defaults)
Components – Complete, reusable UI blocks (e.g. wrappers, cards, nav, buttons, accordions, breadcrumbs, stylized form) - fully assembled LEGO sets
Utilities/Atomic – Single-purpose, composable helpers (e.g. spacing, text-overflow, overlay) - LEGO bricks

	Changelog:
	20250601 - Initial build
	20250627 - merged some individual build CSS
	20250727 - Added final Background Components, fonts used info
	20250728 - added .section-title
	20250805 - added .page-header-sub
	20250812 - added new ultimate form
	20250820 - added responsive to gallery title and hover icon, added gallery-desc class for removing on XS/SM

FONTS USED:
Plus Jakarta Sans: 400, 500, 700
Montserrat: 400, 600
*/

/* ==========================================================================================
Variables
USAGE: .theme-main {color:var(--theme-color-main);}
========================================================================================== */
:root {
	/* — Theme colors — */
	--theme-color-main:#00bfff;
	--theme-color-main-rgb: 0, 191, 255;   /* - RGB (for Bootstrap links) */
	--theme-color-dark:#008bbb;
	--theme-color-dark-rgb: 0, 139, 187;

	/* — Navbar sizing & transition — */
	--navbar-height:         80px;
	--navbar-mini-height:    60px;
	--navbar-transition:     0.3s ease;

	/* - Logo padding for default and mini navbars */
	--navbar-logo-padding: 0.75rem;
	--navbar-mini-logo-padding: 0.5rem 0.75rem; /* - only shrink height for mini */

	/* — Scroll-style colors — */
	--scroll-light-bg:       #fff;
	--scroll-light-text:     #000;
	--scroll-dark-bg:        #000;
	--scroll-dark-text:      #fff;

	/* - Custom Links (BS5 Overrides) */
	--bs-link-color-rgb: 104, 117, 130;
	--bs-link-hover-color-rgb: var(--theme-color-dark-rgb);

	/* - Fonts */
	--font-family-heading: 'Plus Jakarta Sans', var(--bs-font-sans-serif);
	--font-family-ui: 'Montserrat', var(--bs-font-sans-serif);

	/* - Breadcrumb Link Colors (BS5 Overrides) */
	--breadcrumb-link-color: #eaeaea; /* - base for dark backgrounds */
	--breadcrumb-divider-color: #999; /* - base for dark backgrounds */
	--breadcrumb-item-active-color: #eaeaea;

	/* - Page Header Sub background/text */
	--page-header-sub-bg-color: #010101;
	--page-header-sub-color: #fff;
	/*--page-header-sub-bg-img:url('../img/bg-texture-dk.jpg');*/

	/* - BS Form Overrides */
	--bs-border-radius: 0.125rem; /*2px*/
}




/* ==========================================================================================
=Base
========================================================================================== */
body {
	/*font-family: 'Custom Font', var(--bs-font-sans-serif);*/
	font-family: 'Plus Jakarta Sans', var(--bs-font-sans-serif);
}

/* - Headers Custom Font (inc BS5 font stack) */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--font-family-heading);
}

a {
	text-decoration: none;
	transition: color 0.4s ease; 
}

::selection{
    background:var(--theme-color-main);
    color:#fff;
    text-shadow:none
}





/* ----------------------------------------------------------------------
- Buttons - Based off BS5 Button with only my adjustments
--------------------------------------------------------------------------- */
.btn {
	padding: 0.75rem 1.25rem;
	font-weight: 500;
	border-radius: 0;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
	/* - Outlines - Target all outline buttons */
	.btn[class*="btn-outline-"] {border-width: 2px;}




/* ==========================================================================================
- Components
========================================================================================== */
/* ----------------------------------------------------------------------
= Header/Navbar - Custom based on POLO and Crafto 20250620
--------------------------------------------------------------------------- */
header {
	position: sticky;
	top: 0;
	transition: all var(--navbar-transition);
	z-index: 999;
}

.navbar {
	height: var(--navbar-height);
	border-bottom: 1px solid rgba(255,255,255,0.15);
	padding:0;
	transition: 
		background var(--navbar-transition), 
		box-shadow var(--navbar-transition);
}
	/* - Navbar Mini */
	.navbar-mini {height: var(--navbar-mini-height);}

	/* - Navbar Shrink */
	.navbar.navbar-shrink {height: var(--navbar-mini-height);}


/* - Navbar Custom BG
------------------------------------------------------------ */
.navbar.bg-transparent {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: rgba(0,0,0,0.05) !important;
	color: #fff;
	z-index: 1030; /* higher than hero/image layers */
}

.navbar.bg-blur {
	position: fixed;
	top: 0;
	width: 100%;
	background-color: rgba(255,255,255,0.1) !important; /* - Clean frosted glass look */
	color: #fff;
	-webkit-backdrop-filter: blur(4px); /* - For Safari/WebKit (iOS, macOS) */
	backdrop-filter: blur(4px); /* - For everything else */
	z-index: 1030; /* higher than hero/image layers */
}
	/* Disables navbar blur while mobile menu (offcanvas) open */
	.navbar.bg-blur.no-blur {-webkit-backdrop-filter: none;	backdrop-filter: none;}




/* - Navbar Scroll (added via JS)
------------------------------------------------------------ */
.navbar-scrolled {box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);}
.navbar-scrolled.scroll-style-light {background: var(--scroll-light-bg) !important;}
.navbar-scrolled.scroll-style-dark {background: var(--scroll-light-dk) !important;}


/* - Navbar Links (Default)
------------------------------------------------------------ */
.navbar .nav-link {
	font-family: var(--font-family-ui);
	text-transform: uppercase;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.6px;
}


/* - Navbar Brand/Logo and Scroll Swap Logic
------------------------------------------------------------ */
.navbar .navbar-brand {
	height: var(--navbar-height);
	display: flex;
	align-items: center;
}
	/* - Responsive Logo 20250520: Limit brand to at most x% of the bar */
	.navbar .navbar-brand {max-width: clamp(250px, 75%, 400px);} /* - XS */ 
	@media (min-width: 576px) {.navbar .navbar-brand {max-width: clamp(250px, 65%, 400px);}} /* - SM-LG */
	@media (min-width: 992px) {.navbar .navbar-brand {max-width: clamp(250px, 40%, 350px);}} /* - XL+ */

/* - Responsive Logo */
.navbar .navbar-brand img {
	height: 100%;
	width: auto;
	max-width: 100%;
	padding: var(--navbar-logo-padding);
	object-fit: contain;
}
.navbar.navbar-mini .navbar-brand img,
.navbar.navbar-shrink .navbar-brand img {
	padding: var(--navbar-mini-logo-padding);
}

/* - Navbar Hide/Show logos onload */	
.navbar .navbar-brand .logo-sticky {display: none;}
.navbar .navbar-brand .logo-main {display: inline-block;}
.navbar.navbar-scrolled .logo-main {display: none;}
.navbar.navbar-scrolled .logo-sticky {display: inline-block;}

/* - Navbar When shrink via JS, shrink brand too */
.navbar.navbar-shrink .navbar-brand,
.navbar.navbar-mini .navbar-brand {
	height: var(--navbar-mini-height);
}

/* ---------------------------------------------------------------------------
- NAVBAR DESKTOP ONLY
--------------------------------------------------------------------------- */
@media (min-width: 992px) {
	/* - Navbar Link colors for Backgrounds
	------------------------------------------------------------ */
	/* - Navbar Main link color var (white on dark) */
	.navbar {--navbar-link-color: #fff;}
	
	/* - Navbar Light backgrounds */
	.navbar.bg-white,
	.navbar.bg-light,
	.navbar.bg-warning,
	.navbar.bg-info {
	--navbar-link-color: #000;
	}

	/* - Navbar Other Variations */
	.navbar.bg-primary {--navbar-link-color: rgba(255,255,255,0.6);}

	/* - Navbar Apply Main link color */
	.navbar .nav-link {color: var(--navbar-link-color);}


	/* - Navbar Scroll nav-link and dropdowns (added via JS)
	------------------------------------------------------------ */
	.navbar-scrolled.scroll-style-light .nav-link,
	.navbar-scrolled.scroll-style-light .dropdown-toggle {color: #000 !important;}
	.navbar-scrolled.scroll-style-dark .nav-link,
	.navbar-scrolled.scroll-style-dark .dropdown-toggle {color: #fff !important;}


	/* - Navbar BS OVERRIDE - Symmetrical nav items: removes leading/trailing nav-link padding so no matter how navbar aligned, will not have extra padding on sides */
	.navbar-nav > .nav-item:first-child > .nav-link {padding-left: 0 !important;} /* - Remove leading padding on first link */
	.navbar-nav > .nav-item:last-child > .nav-link {padding-right: 0 !important;} /* - Remove trailing padding on last link */


	/* - Navbar Add padding start/end on the navbar if .container-fluid */
	.navbar:has(> .container-fluid) {padding: 0 1.25rem;}


	/* - Navbar Dropdown base styling
	------------------------------------------------------------ */
	.navbar .dropdown {
		position: relative;
		margin-left: 6px;
	}

	.navbar .dropdown:hover > .dropdown-menu {
		display: block;
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
		visibility: visible;
	}
	
	.navbar .dropdown-menu {
		display: none;
		position: absolute;
		top: 100%; /* aligns below nav item */
		left: 0;
		min-width: 250px;
		background: #1e1e1e;
		box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.2);
		visibility: hidden;
		opacity: 0;
		transform: translateY(10px);
		transition: opacity var(--navbar-transition), transform var(--navbar-transition);
		pointer-events: none;
		z-index: 9999;
	}
	
	.dropdown-menu a {
		display: flex;
		align-items: center;
		padding: 10px 20px;
		color: #f0f0f0;
	}
	
	.dropdown-menu a i {
		margin-right: 10px;
		width: 20px;
		text-align: center;
	}

	/* ----- Navbar Dropdown Theming: MAIN NAVBAR ONLOAD ----- */
	.navbar.bg-white .dropdown-menu {background: #fff;}
	.navbar.bg-white .dropdown-menu .dropdown-item {color: #000;}
	.navbar.bg-white .dropdown-menu .dropdown-item:hover {background-color: #f2f2f2;}
	
	.navbar.bg-dark .dropdown-menu, .navbar.bg-transparent .dropdown-menu, .navbar.bg-blur .dropdown-menu {background: #1e1e1e;}
	.navbar.bg-dark .dropdown-menu .dropdown-item, .navbar.bg-transparent .dropdown-menu .dropdown-item, .navbar.bg-blur .dropdown-menu .dropdown-item {color: #f0f0f0;}
	.navbar.bg-dark .dropdown-menu .dropdown-item:hover, .navbar.bg-transparent .dropdown-menu .dropdown-item:hover, .navbar.bg-blur .dropdown-menu .dropdown-item:hover {background-color: rgba(255, 255, 255, 0.05);}

	/* ----- Navbar Dropdown Theming: SCROLLED STATE ----- */
	.navbar-scrolled.scroll-style-light .dropdown-menu {background: #fff;}
	.navbar-scrolled.scroll-style-light .dropdown-menu .dropdown-item {color: #000;}
	.navbar-scrolled.scroll-style-light .dropdown-menu .dropdown-item:hover {background-color: #f2f2f2;}
	
	.navbar-scrolled.scroll-style-dark .dropdown-menu {background: #1e1e1e;}
	.navbar-scrolled.scroll-style-dark .dropdown-menu .dropdown-item {color: #f0f0f0;}
	.navbar-scrolled.scroll-style-dark .dropdown-menu .dropdown-item:hover {background-color: rgba(255, 255, 255, 0.05);}
}

/* ---------------------------------------------------------------------------
- NAVBAR MOBILE MENU
--------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	/* - Remove border and box-shadow on focus */
	.btn-close:focus,
	.navbar-toggler,
	.navbar-toggler:focus {
	border:none;
	box-shadow:none;
	}

	/* - Navbar Hamburger: Framewrk Version (based on BS5)
	------------------------------------------------------------ */
	/* - Navbar Main toggler color var (white on dark) */
	.navbar .navbar-toggler-framewrk {--navbar-toggler-color: #fff;}
	
		/* - Light backgrounds */
		.navbar.bg-white .navbar-toggler-framewrk,
		.navbar.bg-light .navbar-toggler-framewrk,
		.navbar.bg-warning .navbar-toggler-framewrk,
		.navbar.bg-info .navbar-toggler-framewrk {
		--navbar-toggler-color: #000;
		}
	
		/* - Navbar Apply Main toggler color */
		.navbar .navbar-toggler-framewrk {color: var(--navbar-toggler-color);}

	/* - Navbar Scroll toggler Dark on light scroll bg */
	.navbar.navbar-scrolled.scroll-style-light .navbar-toggler-framewrk {color:#000;}
	/* - Navbar Scroll toggler White on dark scroll bg */
	.navbar.navbar-scrolled.scroll-style-dark .navbar-toggler-framewrk {color:#fff;}
}


/* - Transparent Navbar offset (for page-header, hero, etc)
------------------------------------------------------------ */
/* - Base offset class using a pseudo-element */
.offset-section::before {
	display: block;
	content: "";
}
	/* - Standard transparent navbar offset */
	.offset-standard::before {height: var(--navbar-height);}

	/* - Mini navbar offset */
	.offset-mini::before {height: var(--navbar-mini-height);}



/* ---------------------------------------------------------------------------
- Page Header, Breadcrumb, Page Header Sub
formerly known as Page Title and Section Intro
--------------------------------------------------------------------------- */
/* - Ensure position relative so absolute children stay within */
#page-header {
	position: relative;
	padding: 4rem 0;
	overflow: hidden;
}
	@media (min-width: 992px) { #page-header {padding: 7rem 0;} } /* - Desktops */

/* - Background image div covers the whole section */
#page-header .section-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center;
	background-size: cover;
	z-index: -2;
}

#page-header h2 {font-family: "Plus Jakarta Sans", var(--bs-font-sans-serif); line-height: 1.2; font-weight: 700; letter-spacing: 2px;}


/* - Page Header Title/Breadcrumb Layouts
------------------------------------------------------------ */
/*.page-header-content {}*/

.page-header-content.breadcrumb-right {
	display: flex;
	flex-direction: column;	/* - stack on small */
}
	/* - Desktops */
	@media (min-width: 992px) {
		.page-header-content.breadcrumb-right {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		}
	}

.page-header-content.breadcrumb-left {
	display: flex;
	flex-direction: column;
}
	/* Desktop: swap the order with row-reverse */
	@media (min-width: 992px) {
		.page-header-content.breadcrumb-left {
		flex-direction: row-reverse;
		justify-content: space-between;
		align-items: center;
		}
	}

.page-header-content.breadcrumb-center {
	display: flex;
	flex-direction: column;
	align-items: center; /* - set center for mobile and desktop */
}
	/* - Desktops */
	@media (min-width: 992px) {
		.page-header-content.breadcrumb-center {
		justify-content: center;
		}
	}


/* - Breadcrumb - based off BS5.3.7 20250703
------------------------------------------------------------ */
.breadcrumb {
	--bs-breadcrumb-divider-color: var(--breadcrumb-divider-color);
	--bs-breadcrumb-item-active-color: var(--breadcrumb-item-active-color);
	color: var(--breadcrumb-link-color);
	font-size: 0.8rem;
	text-transform:uppercase;
	font-family: var(--font-family-ui);
}

.breadcrumb-item + .breadcrumb-item::before {
	--bs-breadcrumb-divider: "❯❯"; /* Unicode (U+276F Heavy right-pointing angle quotation mark ornament) */
}

/* - Breadcrumb Link Colors (BS does not set a color so it uses body) */
.breadcrumb a {color: var(--breadcrumb-link-color);}
.breadcrumb a:hover,
.breadcrumb a:focus {
	color: #fff;
	text-decoration: underline;
}


/* - Page Header Sub: Inner pages after Page Header
------------------------------------------------------------ */
.page-header-sub {
	padding:2rem 0;
	background-color:var(--page-header-sub-bg-color);
	background-image:var(--page-header-sub-bg-img);
	color:var(--page-header-sub-color);
}

/* XS - ORANGE (portrait phones, less than 576px) */
.page-header-sub-title {font-size: 1.5rem; line-height: 2rem;}
	/* MD - BLUE (tablets, >=768px) */
	@media (min-width: 768px) {.page-header-sub-title {font-size: 1.75rem; line-height: 2.25rem;}}
	/* XL - PINK (large desktops, >=1200px) */
	@media (min-width: 1200px) {.page-header-sub-title {font-size: 2rem; line-height: 2.5rem;}}




/* ---------------------------------------------------------------------------
- Sections
--------------------------------------------------------------------------- */
/* - Section Wrapper
------------------------------------------------------------ */
.section-wrapper {
	position: relative;
	padding: 6rem 0; /* - approx 4rem = 64px, 6rem = 96px, 7rem = 112px, 7.5rem = 120px, 8rem = 128px, 16rem = 256px (if 1rem = 16px) */
}
.section-wrapper-sm {padding: 4rem 0;}
.section-wrapper-lg {padding: 8rem 0;}	/* - Hero, big callouts, features */
.section-wrapper-xl {padding: 16rem 0;}	/* - Full-page "wow" sections */

@media (max-width: 575.98px) {	/* - Bootstrap's sm breakpoint */
	.section-wrapper {padding: 4rem 0;}
	.section-wrapper-sm {padding: 3rem 0;}
	.section-wrapper-lg {padding: 5rem 0;}
	.section-wrapper-xl {padding: 7rem 0;}
}
.section-title {
	font-size: 2.7rem;
	letter-spacing: -1px;
	font-weight: 700;
}


/* - Eyebrow, Section Label (goes above section titles)
------------------------------------------------------------ */
.eyebrow, .section-label {
	display: inline-block; /* prevents stretching full width */
	margin-bottom: 1rem; /* aka BS mb-3 */
	padding: 0.4375rem 1.5625rem; /*7px 25px*/
	background-color: #f8f8f9;
	color: #000;
	font-size: 0.8125rem; /* 13px going by BS 1rem root which = 16px in major browsers */
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 3.125rem; /*50px*/
}



/* ----------------------------------------------------------------------
=Forms
---------------------------------------------------------------------- */
/*BS 5.3.7 Overrides (pulled straight from CSS starting at line 2085) */
label, .form-label {
	margin-bottom: 0.25rem;
	font-size: 0.925rem;
}

.form-control:focus {
	border-color: #666;
	box-shadow: none;
}

.form-control::placeholder {
	color: #a9a9a9;
	font-size:0.875rem;
}

/* - Select */
.form-select:focus {
	border-color: #666;
	box-shadow: none;
}

/* - Checks */
.form-check-input:focus {
	border-color: var(--bs-border-color);
	box-shadow: none;
}
.form-check-input:checked {
	background-color: #000;
	border-color: #000;
}
.form-check-input[type=checkbox]:indeterminate {
	background-color: #000;
	border-color: #000;
}

/* - Switch - No customizations */

/* - Range */
/*.form-range:focus::-webkit-slider-thumb {box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(0, 0, 0, 0.25);}
.form-range:focus::-moz-range-thumb {box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(0, 0, 0, 0.25);}
.form-range::-webkit-slider-thumb {background-color: #000;}
.form-range:active::-webkit-slider-thumb {background-color: #999;}
.form-range::-moz-range-thumb {background-color: #000;}
.form-range:active::-moz-range-thumb {background-color: #999;}*/

/* - Input Group - padding and font size adjust based on 'Plus Jakarta Sans' */
/*.input-group-text {
	padding: .175rem .75rem .375rem;
	font-size: 0.85rem;
}*/


/* - Framewrk Form Customizations
------------------------------------------------------------ */
/* CAPTCHA hpot */
input[name=paramcheck] {display:none !important; visibility:hidden !important;}
.captchatext {font-family:"Courier New", Courier, monospace; font-size:1.125rem; font-weight:bold; color:#8cc152;}



/* ---------------------------------------------------------------------------
Required Field Badge v2.0.0
UPDATED: 20250809

Description:
- Rebuilt for BS5+
- Add "required" to container (div class="form-group")
- Adds a red "required" dot to the main field/group label
- Uses inline-flex single fields, auto-switch to flex for checkboxs/radios
- Prevents the dot from appearing on individual checkbox/radio item labels
--------------------------------------------------------------------------- */
/* -  Base: > targets only the direct group label */
.required > label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* - The red dot */
.required > label::after {
	display: inline-block;
	position: relative;
	top: 1px;
	width: 8px;
	height: 8px;
	background-color: #ff3333;
	content: "";
	border-radius: 50%;
}

/* - Smart switch: if required block contains checkbox/radio items, upgrade main label to block-level flex */
.required:has(.form-check) > label,
.required:has(.form-check-input) > label {
	display: flex !important;
}

/* - Prevent dots on individual checkbox/radio labels inside the group */
.required .form-check-label::after {content: none !important;}



/* ---------------------------------------------------------------------------
Parsley.js Validation v2.0.0 - Icons and Colors
UPDATED: 20250808

Description:
- Complete rebuild for BS5+
- Built off BS 5.3.7 .was-validated styles to integrate with Parsley
- Adds colors/icons for success/error states without altering core BS
--------------------------------------------------------------------------- */
/* - Success: base style for all form control, select, input group */
.form-control.parsley-success,
.form-select.parsley-success,
.input-group.parsley-success .form-control,
.input-group.parsley-success .form-select {
	border-color: #8cc152;
	padding-right: calc(1.5em + 0.75rem);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%238cc152' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right calc(0.375em + 0.1875rem) center;
	background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* - Success: override for single-select <select>, have .form-select and .parsley-success, are not multi-selects, either have no size attribute or have size="1" */
.form-select.parsley-success:not([multiple]):not([size]),
.form-select.parsley-success:not([multiple])[size="1"] {
	border-color: #8cc152;
	padding-right: 4.125rem;
	background-image:
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%238cc152' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"),
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23343a40' viewBox='0 0 16 16'%3e%3cpath d='M1.5 5.5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat, no-repeat;
	background-position: center right 2.25rem, right 0.75rem center;
	background-size: 1rem 1rem, 1rem 1rem;
}

.form-control.parsley-success:focus,
.form-select.parsley-success:focus {
	border-color: #8cc152;
	box-shadow: none; /*0 0 0 0.25rem rgba(140, 193, 82, 0.25);*/
}

.form-check-input.parsley-success {border-color: #8cc152;}
.form-check-input.parsley-success:checked {background-color: #8cc152;}
.form-check-input.parsley-success:focus {box-shadow: none;} /*0 0 0 0.25rem rgba(140, 193, 82, 0.25);*/
.form-check-input.parsley-success ~ .form-check-label {color: #8cc152;}


/* - Error: base style for all form controls, all selects, and input groups */
.form-control.parsley-error,
.form-select.parsley-error,
.input-group.parsley-error .form-control,
.input-group.parsley-error .form-select {
	border-color: #ff3333;
	padding-right: calc(1.5em + 0.75rem);
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ff3333' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff3333' stroke='none'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: right calc(0.375em + 0.1875rem) center;
	background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* - Error: override for single-select <select>, have .form-select and .parsley-success, are not multi-selects, either have no size attribute or have size="1" */
.form-select.parsley-error:not([multiple]):not([size]),
.form-select.parsley-error:not([multiple])[size="1"] {
	border-color: #ff3333;
	padding-right: 4.125rem;
	background-image:
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23ff3333' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23ff3333' stroke='none'/%3e%3c/svg%3e"),
		url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23343a40' viewBox='0 0 16 16'%3e%3cpath d='M1.5 5.5l6 6 6-6'/%3e%3c/svg%3e");
	background-repeat: no-repeat, no-repeat;
	background-position: center right 2.25rem, right 0.75rem center;
	background-size: 1rem 1rem, 1rem 1rem;
}

.form-control.parsley-error:focus,
.form-select.parsley-error:focus {
	border-color: #ff3333;
	box-shadow: none; /*0 0 0 0.25rem rgba(255, 51, 51, 0.25);*/
}

.form-check-input.parsley-error {border-color: #ff3333;}
.form-check-input.parsley-error:checked {background-color: #ff3333;}
.form-check-input.parsley-error:focus {box-shadow: none;} /*0 0 0 0.25rem rgba(255, 51, 51, 0.25);*/
.form-check-input.parsley-error ~ .form-check-label {color: #ff3333;}

/* - Errors List (from Parsley) */
.parsley-errors-list {
	margin: 0.125rem 0 0;
	padding: 0;
	list-style: none;
	color: #ff3333;
	font-size: 0.75em;
	opacity: 0;
	transition: opacity 0.3s ease-in;
}
.parsley-errors-list.filled {opacity: 1;}



/* ---------------------------------------------------------------------------
CharLimit: Min/Max badge on textarea/s (framewrk-charlimit.js) v1.0.0
UPDATED: 20250809

Description:
- Previously known as MaxLength
- Displays min/maximum length of field, usually textarea
- Uses the HTML5 attribute "minlength" and "maxlength"
- Based of jQuery version https://github.com/mimo84/bootstrap-maxlength/
--------------------------------------------------------------------------- */
/* - Anchor only the textarea + badge, not the label */
.maxlength-wrapper {
	position: relative;
	display: inline-block;
	width: 100%;
}

/* - Badge styling & positioning (top-outside, right) */
.maxlength {
	position: absolute;
	top: -25px; /* - above textarea border */
	right: 0.75rem;
	background-color: #000;
	color: #fff;
	font-size: 0.75rem;
	padding: 4px 10px;
	border-radius: var(--bs-border-radius) var(--bs-border-radius) 0 0;
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
	transition: opacity 0.18s;
	z-index: 99;
}
	/* SM+ - >=576px+ */
	@media (min-width: 576px) {.maxlength {right: 1.25rem; padding: 4px 20px;}}

.maxlength.maxlength-secondary {background: #444; color: rgba(255,255,255,0.7);}
.maxlength.maxlength-danger {background: #ff3333; color: rgba(255,255,255,0.7);}
.maxlength.maxlength-success {background: #8cc152; color: rgba(255,255,255,0.7);}

/* - Option: Align (set align:'center' in initialize JS block) */
.maxlength.align-center {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
}



/* ---------------------------------------------------------------------------
- Footer
--------------------------------------------------------------------------- */




/* ---------------------------------------------------------------------------
- Framewrk Image Gallery 20250820
--------------------------------------------------------------------------- */
.gallery-wrapper {margin-bottom: 4rem;}

/* Gallery Filter 20250730
------------------------------------------------------------ */
.gallery-filter {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	margin-top: 1rem;
}

.gallery-filter ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	gap: 0.125rem;
}
	/* BS SM and up */
	@media (min-width: 576px) { .gallery-filter ul {gap: 0.5rem;} }

.gallery-filter li {
	margin: 0;
}

.gallery-filter li a {
	display: block;
	position: relative;
	padding: 0.5rem;
	font-size: 0.9rem;
	color: #3c4043;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	line-height: 1.2;
	border-radius: 50px;
	border-width: 2px;
	border-style: solid;
	border-color: transparent;
	transition: all .3s ease;
}
	/* BS SM and up */
	@media (min-width: 576px) {
		.gallery-filter li a {
		padding: 0.5rem 0.625rem;
		font-size: 0.85rem;
		line-height: 0.9375rem;
		}
	}

.gallery-filter li:hover a,
.gallery-filter li.active a {
	background-color: var(--theme-color-main);
	color: #fff;
}
/* - remove pointer finger on active link for good UI */
.gallery-filter li.active a {pointer-events: none;} 

/* - Gallery Filter Style Variants */
.gallery-filter.gf-outline li:hover a, .gallery-filter.gf-outline li.active a {border-color: #000; color: #000; background-color: transparent;}
.gallery-filter.gf-lines li a {border-radius: 0; border: none; background-color: transparent !important;}
.gallery-filter.gf-lines li a::after {content: ''; position: absolute; top: auto; bottom: -2px; left: 50%; width: 0; height: 2px; transition: all 0.3s ease;}
.gallery-filter.gf-lines li:hover a, .gallery-filter.gf-lines li.active a {color: #000;}
.gallery-filter.gf-lines li:hover a::after, .gallery-filter.gf-lines li.active a::after {width: 100%; left: 0%; background-color: #000;}
.gallery-filter.gf-line-bottom {border-bottom: 2px solid #ebebeb;}


/* - Active title overlay (hidden on mobile) */
.gallery-active-title {
	display: none;
	position: relative;
	font-size: 1.5rem;
	color: #3c4043;
	font-weight: 100;
	opacity: 0.25;
}
	@media (min-width: 576px) { .gallery-active-title {display: block; margin-bottom: 0; font-size: 1.5rem;} } /* SM */
	@media (min-width: 768px) {	.gallery-active-title {font-size: 2.25rem;} } /* MD */
	@media (min-width: 992px) {	.gallery-active-title {font-size: 2.5rem;} } /* LG */
	@media (min-width: 1200px) { .gallery-active-title {font-size: 3rem;} } /* XL */


/* - Gallery Layout and Items
------------------------------------------------------------ */
.gallery-grid {
	display: block;
	position: relative;
	padding: 0;
	overflow: hidden;
	/* - spacing between gallery-items - or remove and use BS .g-* */
	--bs-gutter-x: 1.25rem; /* - 1.5rem is BS .g-4 */
	--bs-gutter-y: 1.25rem;
}
.gallery-grid > * {
	opacity: 0;
	transition: opacity .5s ease;
}

.gallery-grid.gallery-loaded > * {opacity: 1;}

/* - Gallery Items */
.gallery-item {
	position: relative;
	display: block;
}

.gallery-item-content {
	position: relative;
	overflow: hidden;
}

.gallery-image::after {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background-color: #000;
	transition: all 0.3s ease;
	opacity: 0;
	content: ' ';
	z-index: 2;
}

.gallery-image img {
	display: block;
	width: 100%;
	height: auto;
	transition: all 0.5s ease-out;
}


/* - Overlay Content: Default 20250820
------------------------------------------------------------ */
.gallery-overlay {
	position: absolute;
	inset: 0; /* - shorthand for top/left/bot/right*/
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 1.25rem;
	background: rgba(0,0,0,0); /* - transparent */
	font-size: 0.8rem;
	color:#fff;
	letter-spacing: 0.0625rem;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 250ms ease, background 250ms ease;
	z-index: 3;
}
/* - Overlay Hover: Overlay (default) */
.gallery-item:not(.no-overlay):hover .gallery-image::after {opacity: 0.5;}
.gallery-item:not(.no-overlay):hover .gallery-overlay {opacity: 1; visibility: visible;}

/* - Hover Icon - auto added so no need to include full icon on every port item */
.gallery-overlay::after {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1rem;
	height: 1rem;
	margin: 0.25rem;
	padding-left: 1px; /* fix to center Font Awesome icon */
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-size: 1.125rem;
	color: #fff;
	content: "\f065";
	border-radius: 50%;
	border: 0;
	transition: all 250ms ease-in-out 0s;
}
	@media (min-width: 768px) { .gallery-overlay::after {border: 2px solid #fff; width: 2.25rem; height: 2.25rem;} } /* MD */
	@media (min-width: 992px) { .gallery-overlay::after {padding-left: 2px;} } /* LG */
	@media (min-width: 1200px) { .gallery-overlay::after {width: 2.5rem; height: 2.5rem; margin: 0.5rem; padding-left: 2px;} } /* XL */
	@media (min-width: 1400px) { .gallery-overlay::after {margin: 0.625rem;} } /* XXL */

.gallery-title {
	margin-bottom: 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
	@media (min-width: 992px) { .gallery-title {font-size: 0.85rem;} } /* LG */
	@media (min-width: 1200px) { .gallery-title {font-size: 1rem;} } /* XL */
	@media (min-width: 1400px) { .gallery-title {font-size: 1.25rem;} } /* XXL */

.gallery-desc {display:none;}
	@media (min-width: 992px) { .gallery-desc {display:block;} } /* LG */


/* - Overlay Content: no-overlay - convert overlay to visible block
------------------------------------------------------------ */
.gallery-item.no-overlay .gallery-overlay {
	position: relative;
	inset: auto;
	display: block;
	width: 100%;
	height: auto;
	background: #fff;
	padding: 0.75rem 0 0.5rem 0;
	text-align: left;
	color: #3c4043;
	opacity: 1;
	visibility: visible;
}

/* Remove overlay icon for .no-overlay */
.gallery-item.no-overlay .gallery-overlay::after {display: none;}

/* no-overlay title and description */
.gallery-item.no-overlay .gallery-title {
	color: #000;
	text-align: left;
}
.gallery-item.no-overlay .gallery-overlay > div {
	color: #000;
	opacity: 1;
}


/* - Gallery Hover Options
------------------------------------------------------------ */
/* - Image Zoom In */
.gallery-item.img-zoom .gallery-image img {transform: scale(1);}
.gallery-item.img-zoom:hover .gallery-image img {transform: scale(1.1);}

/* - Image Zoom Out */
.gallery-item.img-zoom-out .gallery-image img {transform: scale(1.1);}
.gallery-item.img-zoom-out:hover .gallery-image img {transform: scale(1);}

/* - Image Rotate */
.gallery-item.img-rotate .gallery-image img {transform: rotate(0deg) scale(1); transition: transform 0.7s ease 0s;}
.gallery-item.img-rotate:hover .gallery-image img {transform: rotate(-7deg) scale(1.2); }

/* - Overlay Paddding */
.gallery-item.overlay-padding .gallery-image::after {height: auto; inset: 0.9375rem; width: auto;}

/* - Overlay Light */
.gallery-item.overlay-light .gallery-image::after {background-color: #fff;}
.gallery-item.overlay-light .gallery-title {color: #000;}
.gallery-item.overlay-light .gallery-overlay {color: rgba(0,0,0,0.6);}
.gallery-item.overlay-light .gallery-overlay::after {color: #000; border-color: #000;}
.gallery-item.overlay-light:hover .gallery-image::after {opacity: 0.75;}

/* - Overlay White */
.gallery-item.overlay-white .gallery-image::after {background-color: #fff;}
.gallery-item.overlay-white .gallery-title {color: #000;}
.gallery-item.overlay-white .gallery-overlay {color: rgba(0,0,0,0.6);}
.gallery-item.overlay-white .gallery-overlay::after {color: #000; border-color:#000}
.gallery-item.overlay-white:hover .gallery-image::after {opacity: 0.9;}

/* - Overlay Black */
.gallery-item.overlay-black .gallery-image::after {background-color: #000;}
/*.gallery-item.overlay-black .gallery-title {color: ;}*/
.gallery-item.overlay-black .gallery-overlay {color: rgba(255,255,255,0.75);}
/*.gallery-item.overlay-black .gallery-overlay::after {color: ; border-color:}*/
.gallery-item.overlay-black:hover .gallery-image::after {opacity: 0.9;}





/* ==========================================================================================
=Utilities/Atomic
========================================================================================== */
/* ---------------------------------------------------------------------------
- Framewrk BG Colors
--------------------------------------------------------------------------- */
.bg-light {background-color:#f8f8f9 !important;}
.bg-lighter {background-color:#fafafb;}
.bg-lightest {background-color:#fcfcfd;}

.bg-dark {background-color:#242528 !important;}
.bg-darker {background-color:#1a1b1e;}
.bg-darkest {background-color:#111215;}
.bg-nearblack {background-color:#090a0c;}
.bg-theme {background-color:var(--theme-color-main);}



/* ---------------------------------------------------------------------------
-  Background Components: Reusable utilities for bg img, overlays, stacking fx
  TOC:
   - Overlay: .bg-overlay and styles (gradient/color overlay)
   - Image: .bg-image  (background image)
   - Video (YouTube): .bg-video-yt (background YouTube embed video)
   - Parent positioning utilities
--------------------------------------------------------------------------- */
/* Background Overlay 20250726
------------------------------------------------------------ */
.bg-overlay {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, #000000 100%);
	opacity: .75;
	transition: background 0.3s, opacity 0.3s;
	pointer-events: none;
}

/* - Overlay Styles */
.bg-overlay[data-style="1"] { background: #fff; }
.bg-overlay[data-style="2"] { background: var(--theme-color-main); opacity: 0.9; }
.bg-overlay[data-style="3"] { background: linear-gradient(140deg, #7c1bd6 0%, #31049b 100%); opacity: 0.9; }
.bg-overlay[data-style="4"] { background: linear-gradient(140deg, rgba(236, 0, 83, 0.979) 0%, rgba(231, 46, 0, 0.71) 100%); opacity: 0.9; }
.bg-overlay[data-style="5"] { background: radial-gradient(circle at left top, #09c8e6 20%, var(--theme-color-main) 38%, #5839e4 66%); opacity: 0.9; }
.bg-overlay[data-style="6"] { background: radial-gradient(circle at left top, #fe68bb 38%, #4294fa 66%); opacity: 0.9; }
.bg-overlay[data-style="7"] { background: radial-gradient(circle at right top, #c4d622 20%, #93d839 38%, #4294fa 66%); opacity: 0.9; }
.bg-overlay[data-style="8"] { background: linear-gradient(180deg, #e02b20 0%, #720462 100%); opacity: 0.9; }
.bg-overlay[data-style="9"] { background: radial-gradient(circle at center, #00a6c0 0%, #0c71c3 100%); opacity: 0.9; }
.bg-overlay[data-style="10"] { background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.99) 100%); opacity: 1; }
.bg-overlay[data-style="11"] { background: linear-gradient(90deg, #0090f0 0%, #5d08e6 100%); opacity: 0.9; }
.bg-overlay[data-style="12"] { background: linear-gradient(to bottom, #ba01ff 0, #ff0092 100%); opacity: 0.8; }
.bg-overlay[data-style="WeddingDayBlues"] { background: linear-gradient(to right, #ff0080, #ff8c00, #40e0d0); opacity: 0.9; }
.bg-overlay[data-style="Amin"] { background: linear-gradient(to right, #4a00e0, #8e2de2); opacity: 0.9;}
.bg-overlay[data-style="RainbowBlue"] {background: linear-gradient(to right, #0575e6, #00f260); opacity: 0.9;}
.bg-overlay[data-style="PacificDream"] {background: linear-gradient(to right, #0f3443, #34e89e); opacity: 0.9;}
.bg-overlay[data-style="IbizaSunset"] {background: linear-gradient(to right, #ff6a00, #ee0979); opacity: 0.9;}
.bg-overlay[data-style="BackToEarth"] {background: linear-gradient(to right, #92fe9D, #00C9ff); opacity: 0.9;}
.bg-overlay[data-style="TealLove"] {background: linear-gradient(to right, #11ffbd, #aaffa9); opacity: 0.9;}
.bg-overlay[data-style="DayTripper"] {background: linear-gradient(to right, #ff5858, #f857a6); opacity: 0.9;}
.bg-overlay[data-style="SeaBlizz"] {background: linear-gradient(to right, #93edc7, #1cd8d2); opacity: 0.9;}
.bg-overlay[data-style="Mojito"] {background: linear-gradient(to right, #93f9b9, #1d976c); opacity: 0.9;}
.bg-overlay[data-style="BloodyMary"] {background: linear-gradient(to right, #dd2476, #ff512f); opacity: 0.9;}
.bg-overlay[data-style="Purpink"] {background: linear-gradient(to right, #e100ff, #7f00ff); opacity: 0.9;}
.bg-overlay[data-style="Timber"] {background: linear-gradient(to right, #00dbde, #fc00ff); opacity: 0.9;}


/* Background Images 20250726
------------------------------------------------------------ */
.bg-image {
	position: absolute;
	inset: 0;
	z-index: -2;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	transition: background-image 0.3s;
	pointer-events: none;
	overflow: hidden;
}


/* Background Video - YouTube 20250726
------------------------------------------------------------ */
.bg-video-yt {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: -2;
	pointer-events: none;
}

.bg-video-yt iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
	max-height: none;
	transform: translate(-50%, -50%);
	pointer-events: none;
	border: none;
}

/* - Play/Pause, Mute/Unmute and expose Native buttons */
.bg-video-yt-toggle,
.bg-video-yt-mute,
.bg-video-yt-native {
	position: absolute;
	right: 20px;
	bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	color: rgba(255,255,255,0.5);
	border: none;
	border-radius: 50%;
	outline: none;
	cursor: pointer;
	transition: all 0.3s;
	z-index: 10;
}
.bg-video-yt-mute { right: 64px; } /* - space out if using all three */
.bg-video-yt-native { right: 108px; }

.bg-video-yt-toggle:hover,
.bg-video-yt-mute:hover,
.bg-video-yt-native:hover {
	background: rgba(0,0,0,0.6);
	color: rgba(255,255,255,1);
}
.bg-video-yt-toggle:focus,
.bg-video-yt-mute:focus,
.bg-video-yt-native:focus {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* - expose native video to manually use (so I can slow it down) */
.overlay-native-mode .bg-overlay,
.overlay-native-mode .container {display: none !important;}

.overlay-native-mode .bg-video-yt-toggle,
.overlay-native-mode .bg-video-yt-mute,
.overlay-native-mode .bg-video-yt-native {z-index:100;}

.overlay-native-mode .bg-video-yt,
.overlay-native-mode .bg-video-yt iframe {
	height:250px;
	pointer-events: auto !important;
	z-index: 100 !important;
}


/* - Parent positioning utilities 20250726
Add position: relative ANY parent that directly contains BG layer
------------------------------------------------------------ */
*:has(> .bg-overlay),
*:has(> .bg-image),
*:has(> .bg-video-yt) {
	position: relative;
	z-index: 0; /* - fix for instances where layout is screwy like in BS Accordions */
}



/* ---------------------------------------------------------------------------
- Back To Top/Scroll Progress
--------------------------------------------------------------------------- */
/* - Scroll progress */
.scroll-progress {
	position: fixed;
	right: 20px;
	top: 50%;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s linear;
	transform: translateY(-50%);
	mix-blend-mode: difference;
	z-index: 111;
}
.scroll-progress.visible {
	opacity: 1;
	visibility: visible;
}
.scroll-progress .scroll-top {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-decoration: none;
}
.scroll-progress .scroll-line {
	display: block;
	position: relative;
	width: 2px;
	height: 60px;
	background-color: rgba(255, 255, 255, 0.15);
	color: inherit;
}
.scroll-progress .scroll-point {
	position: absolute;
	display: inline-block;
	top: 0px;
	left: 0px;
	width: 2px;
	background-color: #fff;
}
.scroll-progress .scroll-text {
	margin-bottom: 15px;
	color: #fff;
	font-family: "Montserrat", sans-serif;
	font-size: 11px;
	text-transform: uppercase;
	transform: rotate(180deg);
	writing-mode: vertical-lr;
}
.scroll-progress.scroll-simple {
	position: fixed;
	top: auto;
	right: 50px;
	bottom: 50px;
	transform: none;
	mix-blend-mode: inherit;
	z-index: 111;
}
.scroll-progress.scroll-simple .scroll-top {
	padding: 0;
	height: 34px;
	width: 34px;
	background: #fff;
	font-size: 1.0625rem; /*17px*/
	line-height: 34px;
	box-shadow: 0 0 25px rgba(23, 23, 23, 0.25);
	border-radius: 100%;
}