/* ============================================================================
   FACIAL AESTHETICS — HEADER / FOOTER RESTYLE  (med-spa :: golds + blacks)
   ----------------------------------------------------------------------------
   Drop-in CSS for the WordPress page that uses get_header() / get_footer().
   It RESTYLES the existing theme header (#site-header) and footer (#site-footer)
   markup — no markup changes needed.

   EVERYTHING is scoped to  body.page-id-5146  so the gold/black look ONLY
   appears on the Facial Aesthetics page; every other page keeps the normal
   orange/blue header & footer.

   page-id-5146 = WordPress ID of /facial-aesthetics/.  If you attach a custom
   page template, you can instead scope to a template body class — just
   find/replace ".page-id-5146" below with your class (e.g. ".tmpl-facial").
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&display=swap');

:root {
	--fa-black: #0c0b09;
	--fa-black-soft: #14120f;
	--fa-charcoal: #1d1a15;
	--fa-gold: #c9a24b;
	--fa-gold-light: #e3c987;
	--fa-gold-deep: #a07d34;
	--fa-ivory: #f6f1e7;
	--fa-cream: #efe7d6;
	--fa-muted: #b6ad9c;
	--fa-line: rgba(201, 162, 75, .28);
	--fa-serif: "Cormorant Garamond", Georgia, serif;
	--fa-sans: "Jost", "Helvetica Neue", Arial, sans-serif;
	--fa-ease: cubic-bezier(.22, .61, .36, 1);
}
.site-header-container{
    padding: 0 30px !important;
}

/* ============================================================================
   HEADER
   ============================================================================ */

body.page-id-5146 #site-header.site-main-header {
	background: rgba(8, 7, 6, .92) !important;
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--fa-line) !important;
	box-shadow: none !important;
}

/* sticky upgrade (optional — remove if the theme already sticks the header) */
body.page-id-5146 #site-header.site-main-header {
	position: sticky;
	top: 0;
	z-index: 999;
}

body.page-id-5146 #site-header .site-header-sec,
body.page-id-5146 #site-header .header-bottom,
body.page-id-5146 #site-header #header-bottom {
	background: transparent !important;
}

body.page-id-5146 #site-header .site-header-module {
	min-height: 84px;
}

/* ---- Logo ---- (real logo is an SVG; invert it so it reads on black) */
body.page-id-5146 #site-header .site-branding .custom-logo {
	filter: brightness(0) invert(1);
	transition: filter .3s var(--fa-ease);
}

/* ---- Main nav links ---- */
body.page-id-5146 #site-header #menu-main-header > li > a,
body.page-id-5146 #site-header .menu-main-header-container > ul > li > a {
	font-family: var(--fa-sans) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: .12em;
	/*text-transform: uppercase;*/
	color: var(--fa-cream) !important;
	transition: color .3s var(--fa-ease);
}

body.page-id-5146 #site-header #menu-main-header > li > a:hover,
body.page-id-5146 #site-header #menu-main-header > li.current-menu-item > a,
body.page-id-5146 #site-header #menu-main-header > li.current_page_item > a,
body.page-id-5146 #site-header #menu-main-header > li:hover > a {
	color: var(--gold-light) !important;
}

/* active page indicator (Facial Aesthetics) */
body.page-id-5146 #site-header #menu-main-header > li.current-menu-item > a,
body.page-id-5146 #site-header #menu-main-header > li.current_page_item > a {
	position: relative;
}

body.page-id-5146 #site-header #menu-main-header > li.current-menu-item > a::after,
body.page-id-5146 #site-header #menu-main-header > li.current_page_item > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1px;
	background: var(--fa-gold);
}

/* caret icons */
body.page-id-5146 #site-header #menu-main-header .fa-angle-down,
body.page-id-5146 #site-header #menu-main-header i {
	color: var(--fa-gold) !important;
	opacity: .8;
}

/* ---- Dropdown / sub-menus ---- */
body.page-id-5146 #site-header #menu-main-header .sub-menu,
body.page-id-5146 #site-header #menu-main-header ul.sub-menu {
	background: var(--fa-black-soft) !important;
	border: 1px solid var(--fa-line) !important;
	border-radius: 4px;
	box-shadow: 0 24px 50px rgba(0, 0, 0, .55) !important;
	padding: 8px 0;
}

body.page-id-5146 #site-header #menu-main-header .sub-menu li > a {
	color: var(--fa-muted) !important;
	font-family: var(--fa-sans) !important;
	font-size: 13px !important;
	letter-spacing: .03em;
	text-transform: none;
	padding: 9px 22px !important;
	transition: all .25s var(--fa-ease);
}

body.page-id-5146 #site-header #menu-main-header .sub-menu li > a:hover {
	color: var(--fa-gold-light) !important;
	background: rgba(201, 162, 75, .08) !important;
	padding-left: 28px !important;
}


/* "Call Now : (575) ..." link */
body.page-id-5146 #site-header .header_cta_call_btn {
	color: var(--fa-cream) !important;
	font-family: var(--fa-sans) !important;
	font-size: 14px !important;
	letter-spacing: .04em;
	white-space: nowrap;
	transition: color .3s var(--fa-ease);
	border-color: var(--fa-gold-light) !important;
	border-radius: 2px !important;
}

body.page-id-5146 #site-header .header_cta_call_btn:hover {
	background-color: var(--fa-gold-light) !important;
	color: var(--fa-ivory) !important;
}

body.page-id-5146 #site-header .header_cta_call_btn .first_number_header_call {
	/*color: var(--fa-gold-light) !important;*/
	/*text-transform: uppercase;*/
	letter-spacing: .2em;
	/*font-size: 11px;*/
}

/* "Book Now" button -> solid gold */
body.page-id-5146 #site-header .cta_anchor_appointment,
body.page-id-5146 #site-header .btn.cta_anchor_appointment {
	background: linear-gradient(135deg, var(--fa-gold-light), var(--fa-gold) 55%, var(--fa-gold-deep)) !important;
	border: 1px solid var(--fa-gold-light) !important;
	border-radius: 2px !important;
	color: var(--fa-black) !important;
	font-family: var(--fa-sans) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: .2em;
	/*text-transform: uppercase;*/
	padding: 13px 30px !important;
	transition: all .4s var(--fa-ease);
}

body.page-id-5146 #site-header .cta_anchor_appointment span {
	color: var(--fa-black) !important;
}

body.page-id-5146 #site-header .cta_anchor_appointment:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 30px rgba(201, 162, 75, .3) !important;
}

/* ---- Mobile hamburger bars ---- */
body.page-id-5146 #site-header .site-header-navbar-toggler .bar-icon {
	background: var(--fa-gold-light) !important;
}

/* ---- Collapsed mobile menu panel ---- */
@media (max-width: 1300px) {
    body.page-id-5146  .site-navigation ul.menu li.current-menu-item{
        background: var(--fa-gold-light) !important;
    }
    body.page-id-5146 #site-header #menu-main-header > li.current-menu-item > a,
    body.page-id-5146 #site-header #menu-main-header > li.current_page_item > a {
    	color: var(--fa-black-soft) !important;
    }
    body.page-id-5146.toggle-menu-open .menu-main-header-container{
        margin-top: 110px;
    }
}
@media (max-width: 1199.98px) {
	body.page-id-5146 #site-header .site-header-navbar-items.navbar-collapse {
		background: var(--fa-black-soft) !important;
		border: 1px solid var(--fa-line) !important;
		border-radius: 6px;
		margin-top: 12px;
		padding: 10px 18px;
	}

	body.page-id-5146 .site-navigation ul.menu li,
	body.page-id-5146 #site-header #menu-main-header > li {
		border-bottom: 1px solid var(--fa-line);
	}

	body.page-id-5146 #site-header #menu-main-header > li:last-child {
		border-bottom: 0;
	}

	body.page-id-5146 #site-header #menu-main-header > li.current-menu-item > a::after,
	body.page-id-5146 #site-header #menu-main-header > li.current_page_item > a::after {
		display: none;
	}

	body.page-id-5146 #site-header .sub-menu {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
	}
}

/* ============================================================================
   FOOTER
   ============================================================================ */

body.page-id-5146 #site-footer.site-main-footer {
	background: var(--fa-black) !important;
	border-top: 1px solid var(--fa-line);
	color: var(--fa-ivory) !important;
	font-family: var(--fa-sans) !important;
	padding-top: 72px;
}

/* subtle gold hairline above the footer */
body.page-id-5146 #site-footer.site-main-footer::before {
	content: "";
	display: block;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--fa-gold), transparent);
	margin: 0 0 60px;
}

/* column headings */
body.page-id-5146 #site-footer .widget-title {
	font-family: var(--fa-sans) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: .24em;
	/*text-transform: uppercase;*/
	color: var(--fa-gold-light) !important;
	margin-bottom: 20px;
}

/* body / description / hours / address text */
body.page-id-5146 #site-footer p,
body.page-id-5146 #site-footer .footer_descr_blk p,
body.page-id-5146 #site-footer .opeing_hour_timming_blk p,
body.page-id-5146 #site-footer .textwidget p {
	color: var(--fa-muted) !important;
	font-size: 14.5px;
}


/* footer nav links */
body.page-id-5146 #site-footer .menu-main-footer-container a,
body.page-id-5146 #site-footer .footer-link_nav a {
	color: var(--fa-muted) !important;
	font-size: 14.5px;
	transition: color .3s var(--fa-ease);
}

body.page-id-5146 #site-footer .menu-main-footer-container a:hover,
body.page-id-5146 #site-footer .footer-link_nav a:hover {
	color: var(--fa-gold-light) !important;
}

/* member badge */
body.page-id-5146 #site-footer .member-badge img {
	max-width: 130px;
	border-radius: 4px;
	margin-top: 18px;
}

/* ---- Footer bottom bar ---- */
body.page-id-5146 #site-footer .site-footer-bottom {
	margin-top: 56px;
	border-top: 1px solid var(--fa-line);
	padding-top: 22px;
}

body.page-id-5146 #site-footer .site-footer-bottom,
body.page-id-5146 #site-footer .footer-bottom-info p {
	color: var(--fa-muted) !important;
	font-size: 13px;
}

body.page-id-5146 #site-footer .footer-bottom-info a,
body.page-id-5146 #site-footer .footer-bottom-info a span {
	color: var(--fa-cream) !important;
	transition: color .3s var(--fa-ease);
}

body.page-id-5146 #site-footer .footer-bottom-info a:hover,
body.page-id-5146 #site-footer .footer-bottom-info a:hover span {
	color: var(--fa-gold-light) !important;
}

body.page-id-5146 #site-footer .menu-privacy-menu a {
	color: var(--fa-cream) !important;
}

body.page-id-5146 #site-footer .menu-privacy-menu a:hover {
	color: var(--fa-gold-light) !important;
}

/* ============================================================================
   RESPONSIVE TWEAKS
   ============================================================================ */

@media (max-width: 991.98px) {
	body.page-id-5146 #site-footer .footer_col_content_column {
		margin-bottom: 32px;
	}
}

@media (max-width: 575.98px) {
	body.page-id-5146 #site-header .header_cta_call_btn {
		font-size: 12px !important;
	}

	body.page-id-5146 #site-footer.site-main-footer {
		padding-top: 56px;
		text-align: center;
	}
	body.page-id-5146 .social_media_icon_links{
	    justify-content: center;
	}

}


@media only screen and (max-width: 1750px) {
    body.page-id-5146 header#site-header .cta_book_appointment a.btn.cta_anchor_appointment {
        display: none !important;
    }
    
}
@media only screen and (max-width: 1600px) and (min-width: 1300px){
    body.page-id-5146 #site-header .header_cta_call_btn .second_number_header_call{
        display: none;
    }
    body.page-id-5146 #site-header .cta_book_appointment,
    body.page-id-5146 #site-header .header_cta_call_btn{
        margin-right: 0 !important;
    }
    body.page-id-5146 #site-header .header_cta_call_btn{
        padding: 12px 20px;
    }
}
@media only screen and (max-width: 1300px){
    #navbarSupportedContent .menu-main-header-container{
        height: fit-content;
        background: var(--fa-black-soft) !important;
        overflow: hidden;
    }
}