:root {
	--amber: #C98A1F;
	--amber-soft: #F6E7C7;
	--ash: #B8D8CE;
	--bone: #D9D2C2;
	--carbon: #1B1F1C;
	--earth: #8B5A0F;
	--floral: #FAF7F0;
	--ink: #1A1A1A;
	--ink-2: #6B6760;
	--ink-3: #9A9388;
	--olive: #8B8880;
	--silver: #A8A59C;
	--teal: #1F7A6B;
	--teal-rgb: 31, 122, 107;
	--teal-2: #155A50;
	--teal-soft: #DCEDE8;
	--teal-muted: #6FB6A4;
	--vb-border: #EAE3D3;
	
}

.ls-1 {
	letter-spacing: -0.01em;
}

.ls-2 {
	letter-spacing: -0.02em;
}

/* Backgrounds */
.bg-amber-soft {
	background: var(--amber-soft)!important;
}

.bg-carbon {
	background: var(--carbon)!important;
}

.bg-floral {
	background: var(--floral)!important;
}

.bg-teal {
	background: var(--teal)!important;
}

.bg-teal-soft { 
	background: var(--teal-soft)!important;
}

/* Text classes */
.text-amber {
	color: var(--amber)!important;
}

.text-ash {
	color: var(--ash)!important;
}

.text-earth {
	color: var(--earth)!important;
}

.text-ink {
	color: var(--ink)!important;
}

.text-ink-2 {
	color: var(--ink-2)!important;
}

.text-silver {
	color: var(--silver)!important;
}

.text-teal {
	color: var(--teal)!important;
}

.text-teal-2 {
	color: var(--teal-2)!important;
}

.text-teal-muted {
	color: var(--teal-muted)!important;
}

.section-heading {
	font-size: clamp(28px, 3vw, 36px);
	color: var(--ink);
	letter-spacing: -0.02em; 
}

.section-cta {
	font-size: 14px;
}

.vb-avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.vb-author small {
	color: var(--ink-3);
}

.vb-quote {
	font-size: 15px;
}

.vb-quote::before {
	content: '“';
    color: var(--teal);
    font-weight: 700;
    margin-right: 1px;
}

.vb-quote::after {
	content: '“';
    color: var(--teal);
    font-weight: 700;
}

.vb-related-place a {
	background: var(--floral);
	transform: all 0.4s ease;
	font-size: 13px;
	color: var(--ink);
}

.vb-related-place a:hover {
	background: #fff;
	color: var(--teal);
}

.vb-pin {
	width: 22px;
	height: 22px;
	text-align: center;
}

/* Borders */
.vb-border {
	border-color: var(--vb-border)!important;
}

.border-teal {
	border-color: var(--teal)!important;
}

/* Navigation */
#mainHeader {
    position: sticky !important;
    top: 0;
    z-index: 1000001;
    width: 100%;
	border-bottom: 1px solid var(--bone);
}

.navbar-brand {
    font-size: 1.5rem;      
}

.navbar-dark .navbar-nav .nav-item {
    padding: 0.5rem 1.25rem;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: #fff!important;
}



a.nav-link {
	position: relative;
	color: var(--ink)!important;
	padding: 0px!important;
}

a.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px; /* Adjust to place the underline closer or further from the text */
    width: 100%;
    height: 1px; /* Adjust the thickness of the underline */
    background: var(--neutral-200); /* Adjust the underline color as needed */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease; /* Adjust the duration of the transition */
}

a.nav-link:hover::after {
    transform: scaleX(1);
}

/* Navbar */
#mainHeader {
    position: sticky !important;
    top: 0;
    z-index: 1000001;
    width: 100%;
}

.navbar-brand {
    font-size: 1.5rem;      
}

.navbar-light .navbar-nav .nav-item {
    padding: 0.5rem 1.25rem;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: var(--ink)
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed; /* Change back to fixed */
    top: 0; /* Will be set by JavaScript */
    left: 0;
    width: 100%;
    height: 100vh; /* Will be set by JavaScript */
    background-color: var(--neutral-800);
    z-index: 1050;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-menu-content {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

.mobile-nav-link {
    color: var(--white);
    text-decoration: none;
    font-size: 1.5rem;
    font-weight: 500;
    transition: color 0.2s ease;
}

.mobile-nav-link:hover {
    color: var(--green);
}

#mobileMenuBtn.bg-floral {
    background-color: var(--neutral-100) !important;
    color: var(--neutral-800) !important;
}

/* Hero section */
.eyebrow, .eyebrow-center {
	gap: 10px;
	letter-spacing: 0.08em;
	font-size: 13px;
}

.eyebrow::before {
	content:'';
	width: 24px;
	height: 1px;
	background: var(--teal);
	display: inline-block;
}


/* Buttons */
.btn-teal {
    border: 1px solid var(--teal);
}

.btn-teal:hover {
    background: rgba(var(--teal-rgb), 0.9)!important;
}

.btn-bone {
	border: 1px solid var(--bone)!important;
}

.btn-bone:hover {
    background: #fff!important;
	border: 1px solid var(--bone)!important;

}

.btn-orange {
    background-color: var(--orange);
    color: var(--white);
}

.btn-blue {
    background-color: var(--blue);
    color: var(--white);
}

.btn-outline-dark, .btn-outline-light {
    transition: all 0.4s ease;
}

.btn-outline-dark:hover {
    background-color: var(--neutral-800)!important;
    color: var(--white)!important;
}

.btn-outline-light {
    border-color: var(--white)!important;
    color: var(--white)!important;
}

.btn-outline-light:hover {
    background-color: var(--white)!important;
    color: var(--neutral-800)!important;
}


.btn-neutral-800 {
    background-color: var(--neutral-800);
    color: #fff;
    border: 2px solid var(--neutral-800);
    transition: all 0.4 ease;
}

.btn-neutral-800:hover {
    background-color: transparent;
    border: 2px solid var(--neutral-800)!important;
    color: var(--neutral-800)!important;
}

.btn-neutral-800:hover i {
    color: var(--neutral-800)!important;
}

/* Footer section */

a.footer-link {
	position: relative;
	color: var(--neutral-100)!important;
}

a.footer-link::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px; /* Adjust to place the underline closer or further from the text */
    width: 100%;
    height: 1px; /* Adjust the thickness of the underline */
    background: var(--neutral-200); /* Adjust the underline color as needed */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease; /* Adjust the duration of the transition */
}

a.footer-link:hover::after {
    transform: scaleX(1);
}

.copyright {
	border-top: 1px solid rgba(255,255,255,0.08);
}

/* Other */
.gap-25 {
	gap: .75rem;
}

.spc {
	letter-spacing: 0.08em;
}

/* Animations */
.animate-jump {
    transition: all 0.4s ease;
}
.animate-jump:hover {
	    transform: translateY(-3px);
}