header {
	height: 70vh !important;

	background: #161415 url(../images/H2-3.jpg) no-repeat center center;
}

ul#nav li a {
	text-shadow: 0px 1px 3px rgba(0, 0, 0, .8);
}

header .banner-text h1.custom-headline {
	font-style: italic;
}

header .banner-text h3 {
	color: #ffffff;

	text-shadow: 0px 1px 3px rgba(0, 0, 0, .8);
}

#bob_bailey .custom-profile-pic {
	width: 220px;
	height: 220px;
}

#bob_bailey .download .button {
	background: #ee544f;
}

#bob_bailey a:hover,
#bob_bailey a:focus {
	color: #444;
}

.staff_attire-item .item-wrap,
.gallery-item .item-wrap {
	background: transparent;
}

#call-to-action .header-col .custom-heading-fb:before {
	content: "\f230";
}

.menu {
	border-bottom: none;
}

#menu .custom-menu-list {
	margin-bottom: 14px;
}

#menu .custom-menu-options {
	margin-top: 14px;
	margin-bottom: 14px;
}

#menu .appetizers-item {
	display: flex;
}

#menu .appetizers-text {
	width: 75%;
}

#menu .appetizers-price {
	width: 25%
}

#menu .appetizers-button-wrapper {
	margin-top: 30px;
}

#menu .appetizers-button {
	color: #fff !important; /* Overrides default theme styling */

	background-color: #ee544f;
}

#menu .appetizers-button-wrapper .button i {
	margin-right: 15px;

	font-size: 20px;
}

#menu .appetizers-button-wrapper .appetizers-button:hover {
	color: #fff;

	background-color: #444;
}

#bob_bailey a[href^="mailto:"],
#bob_bailey a[href^="mailto:"]:visited,
#bob_bailey a[href^="tel:"],
#bob_bailey a[href^="tel:"]:visited {
	color: #7a7a7a;
}

#contact_us a[href^="mailto:"],
#contact_us a[href^="mailto:"]:visited,
#contact_us a[href^="tel:"],
#contact_us a[href^="tel:"]:visited {
	color: #777;
}

#contact_us .contact_us-info {
	display: flex;
	width: 83.33333%;
	margin-left: auto;
	padding: 0 20px;
}

#contact_us .contact_us-text {
	margin-right: 75px;
	padding-top: 25px;
}

#contact_us .contact_us-image h4 {
	text-align: center;
}

#contact_us .contact_us-info h4 {
	margin-bottom: 12px;

	font: 22px/30px 'opensans-bold', sans-serif;
}

#contact_us .contact-pic {
	position: relative;

	width: 280px;
	height: 280px;
	margin-bottom: 12px;

	border-radius: 100%;
}

#contact_us .address {
	color: #777;
}

.gallery-item .item-wrap img,
.staff_attire-item .item-wrap img {
	width: 100%;
	height: 215px;
	object-fit: cover;
}

@media only screen and (max-width: 900px) {
	#bob_bailey .custom-profile-pic {
		width: 140px;
		height: 140px;
	}
}

@media only screen and (max-width: 767px) {
	#contact_us .contact_us-info {
		flex-direction: column;
		width: 100%;
		margin: 0;
		padding: 0 30px;
	}

	#contact_us .contact_us-image {
		display: flex;
		flex-direction: column;
	}

	#contact_us .contact_us-image img {
		order: 2;
	}

	#contact_us .contact_us-image h4 {
		order: 1;
		margin-bottom: 16px;

		text-align: left;
	}
}

/* ==========================================================================
   Visual Polish
   ========================================================================== */

/* 1. Font smoothing & smooth scroll */
html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 2. Header text readability — gradient overlay */
header#home .banner {
	position: relative;
}

header#home .banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.15) 0%,
		rgba(0, 0, 0, 0.45) 100%
	);
	z-index: 0;
}

header#home .banner-text {
	position: relative;
	z-index: 1;
}

/* 3. Button refinement */
.button, button {
	transition: all 0.3s ease;
}

.button:hover, button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 4. Gallery & staff attire hover polish */
.gallery-item .item-wrap,
.staff_attire-item .item-wrap {
	overflow: hidden;
}

.gallery-item .item-wrap img,
.staff_attire-item .item-wrap img {
	transition: transform 0.4s ease;
}

.gallery-item .item-wrap:hover img,
.staff_attire-item .item-wrap:hover img {
	transform: scale(1.05);
}

/* 5. Testimonial quote accent */
#testimonials blockquote::before {
	content: "\201C";
	font-size: 80px;
	line-height: 1;
	color: rgba(255, 255, 255, 0.15);
	font-family: Georgia, serif;
	display: block;
	margin-bottom: -20px;
}

/* 6. Section transitions on scroll */
#bob_bailey, #testimonials, #our_services, #gallery,
#menu, #staff_attire, #call-to-action, #contact_us {
	transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 7. Footer back-to-top button polish */
#go-top a {
	transition: all 0.3s ease;
}

#go-top a:hover {
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   Comprehensive Visual Refresh
   ========================================================================== */

/* ------------------------------------------------------------------
   1. CSS Custom Properties
   ------------------------------------------------------------------ */
:root {
	--teal: #0D9488;
	--teal-light: #14B8A6;
	--teal-glow: rgba(13, 148, 136, 0.35);
	--radius: 6px;
	--radius-lg: 10px;
	--shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.06);
	--shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ------------------------------------------------------------------
   2. Global Teal Override (#11ABB0 -> var(--teal))
   ------------------------------------------------------------------ */

/* Base links */
a, a:visited { color: var(--teal); }

/* Buttons */
.button, .button:visited, button,
input[type="submit"], input[type="reset"], input[type="button"] {
	background: var(--teal);
}

/* Header social + scroll-down */
header .social li a:hover { color: var(--teal-light); }
header .scrolldown a:hover { color: var(--teal-light); }

/* Our Services / Menu section */
#our_services a, #our_services a:visited,
#menu a, #menu a:visited { color: var(--teal); }
#our_services h1 span, #menu h1 span { border-bottom-color: var(--teal); }

/* Contact section */
#contact_us a, #contact_us a:visited { color: var(--teal); }
#contact_us span.required { color: var(--teal); }
#message-success { color: var(--teal); }

/* Go-top button */
#go-top a:hover { background-color: var(--teal); }

/* Nav current link */
ul#nav li.current a { color: var(--teal-light); }

/* Footer copyright bullet */
footer .copyright li:before { color: var(--teal); }

/* Pagination active */
.pagination .current, .pagination .current:hover { background-color: var(--teal); }

/* Definition list + stats */
dt { color: var(--teal); }
.stats-tabs li a:hover { color: var(--teal); }

/* ------------------------------------------------------------------
   3. Better Border-Radius (3px -> 6px)
   ------------------------------------------------------------------ */
.button, .button:visited, button,
input[type="submit"], input[type="reset"], input[type="button"] {
	border-radius: var(--radius);
}
#contact_us input, #contact_us textarea, #contact_us select {
	border-radius: var(--radius);
}
#contact_us button.button { border-radius: var(--radius); }
.popup-modal { border-radius: var(--radius-lg); overflow: hidden; }
.gallery-item .item-wrap, .staff_attire-item .item-wrap {
	border-radius: var(--radius);
}

/* ------------------------------------------------------------------
   4. Nav Bar Refinement
   ------------------------------------------------------------------ */
#nav-wrap { transition: background-color 0.4s ease, backdrop-filter 0.4s ease; }
#nav-wrap.opaque {
	background-color: rgba(30, 30, 30, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

ul#nav li a { position: relative; }
ul#nav li a::after {
	content: "";
	position: absolute;
	bottom: 6px;
	left: 13px;
	right: 13px;
	height: 2px;
	background: var(--teal-light);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s ease;
}
ul#nav li a:hover::after,
ul#nav li.current a::after { transform: scaleX(1); }
ul#nav li a:hover { color: var(--teal-light); }

/* ------------------------------------------------------------------
   5. Gallery / Staff Attire Depth
   ------------------------------------------------------------------ */
.gallery-item .item-wrap, .staff_attire-item .item-wrap {
	box-shadow: var(--shadow-card);
	transition: all 0.3s ease-in-out, box-shadow 0.3s ease;
}
.gallery-item .item-wrap:hover, .staff_attire-item .item-wrap:hover {
	box-shadow: var(--shadow-lift);
}

/* ------------------------------------------------------------------
   6. Improved Text Contrast
   ------------------------------------------------------------------ */
#bob_bailey p { color: #9CA3AF; }
#contact_us { color: #9CA3AF; }
#contact_us .address { color: #9CA3AF; }
#call-to-action p { color: #9CA3AF; }
#bob_bailey a[href^="mailto:"], #bob_bailey a[href^="mailto:"]:visited,
#bob_bailey a[href^="tel:"], #bob_bailey a[href^="tel:"]:visited { color: #9CA3AF; }
#contact_us a[href^="mailto:"], #contact_us a[href^="mailto:"]:visited,
#contact_us a[href^="tel:"], #contact_us a[href^="tel:"]:visited { color: #9CA3AF; }

/* ------------------------------------------------------------------
   7. Profile & Contact Pic Enhancement
   ------------------------------------------------------------------ */
#bob_bailey .profile-pic, #bob_bailey .custom-profile-pic {
	border: 3px solid var(--teal);
	box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.15), 0 4px 16px rgba(0, 0, 0, 0.3);
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
#bob_bailey .profile-pic:hover, #bob_bailey .custom-profile-pic:hover {
	box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.25), 0 8px 24px rgba(0, 0, 0, 0.35);
}
#contact_us .contact-pic {
	border: 3px solid var(--teal);
	box-shadow: 0 0 0 4px rgba(13, 148, 136, 0.15), 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* ------------------------------------------------------------------
   8. Gallery Overlay Modernization
   ------------------------------------------------------------------ */
.gallery-item .item-wrap .overlay, .staff_attire-item .item-wrap .overlay {
	background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(13,148,136,0.3) 100%);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
}
.gallery-item .item-wrap .link-icon, .staff_attire-item .item-wrap .link-icon {
	width: 44px; height: 44px; line-height: 44px;
	font-size: 22px;
	margin-left: -22px; margin-top: -22px;
	border: 2px solid rgba(255,255,255,0.6);
	border-radius: 50%;
	transition: opacity 0.3s ease-in-out, transform 0.3s ease;
}
.gallery-item .item-wrap:hover .link-icon,
.staff_attire-item .item-wrap:hover .link-icon { transform: scale(1.1); }

/* ------------------------------------------------------------------
   9. Typography Refinement
   ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 { letter-spacing: -0.025em; }
#testimonials blockquote p { font-size: 22px; line-height: 44px; letter-spacing: -0.01em; }
#call-to-action h2 { letter-spacing: -0.03em; }

/* ------------------------------------------------------------------
   10. Responsive Section Spacing (clamp)
   ------------------------------------------------------------------ */
#bob_bailey { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(36px, 6vw, 66px); }
#our_services, #menu { padding-top: clamp(48px, 8vw, 90px); padding-bottom: clamp(36px, 6vw, 72px); }
#staff_attire, #gallery { padding-top: clamp(48px, 8vw, 90px); padding-bottom: clamp(36px, 6vw, 60px); }
#testimonials .text-container { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(36px, 6vw, 66px); }
#call-to-action { padding-top: clamp(36px, 6vw, 66px); padding-bottom: clamp(30px, 5vw, 48px); }
#contact_us { padding-top: clamp(48px, 8vw, 96px); padding-bottom: clamp(48px, 8vw, 102px); }

/* ------------------------------------------------------------------
   11. Animated Link Underlines
   ------------------------------------------------------------------ */
#bob_bailey a:not(.button),
#our_services a:not(.button),
#menu a:not(.button),
#contact_us a:not(.button) {
	background-image: linear-gradient(var(--teal-light), var(--teal-light));
	background-size: 0% 1px;
	background-position: left bottom;
	background-repeat: no-repeat;
	transition: background-size 0.3s ease, color 0.3s ease;
}
#bob_bailey a:not(.button):hover,
#our_services a:not(.button):hover,
#menu a:not(.button):hover,
#contact_us a:not(.button):hover {
	background-size: 100% 1px;
}

/* ------------------------------------------------------------------
   13. Testimonial Slider Dots
   ------------------------------------------------------------------ */
.flex-control-paging li a {
	width: 10px; height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,0.25);
	box-shadow: none;
	transition: background 0.3s ease, transform 0.3s ease;
}
.flex-control-paging li a:hover {
	background: rgba(255,255,255,0.5);
	transform: scale(1.2);
}
.flex-control-paging li a.flex-active {
	background: var(--teal);
	transform: scale(1.3);
	box-shadow: 0 0 8px var(--teal-glow);
}

/* ------------------------------------------------------------------
   14. Banner HR Modernization
   ------------------------------------------------------------------ */
header .banner-text hr {
	border: none;
	height: 1px;
	background: linear-gradient(to right, transparent 0%, var(--teal) 30%, var(--teal) 70%, transparent 100%);
	opacity: 0.5;
}

/* ------------------------------------------------------------------
   15. Contact Form Input Modernization
   ------------------------------------------------------------------ */
#contact_us input, #contact_us textarea, #contact_us select {
	border: 1px solid rgba(255,255,255,0.08);
	transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
#contact_us input:focus, #contact_us textarea:focus, #contact_us select:focus {
	background-color: rgba(13,148,136,0.15);
	border-color: var(--teal);
	box-shadow: 0 0 0 3px var(--teal-glow);
	color: #fff;
}
#contact_us button.button {
	background: var(--teal);
	letter-spacing: 2px;
}
#contact_us button.button:hover {
	background: var(--teal-light);
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 16px var(--teal-glow);
}

/* ------------------------------------------------------------------
   16. Mobile Nav Modernization
   ------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
	#nav-wrap > a {
		background-color: var(--teal);
		border-radius: var(--radius);
		transition: background-color 0.3s ease;
	}
	#nav-wrap > a:hover { background-color: var(--teal-light); }
	#nav-wrap:target > ul#nav {
		background: rgba(20,20,24,0.95);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border-radius: var(--radius-lg);
		padding: 24px 20px 36px 20px;
		margin: 0 16px;
		box-shadow: 0 12px 40px rgba(0,0,0,0.5);
	}
	ul#nav li {
		border-bottom-color: rgba(255,255,255,0.06);
		border-bottom-style: solid;
	}
	ul#nav li:last-child { border-bottom: none; }
	ul#nav li a { padding: 12px 0; }
	ul#nav li a:hover { color: var(--teal-light); }
	ul#nav li a::after { display: none; }
}

/* ------------------------------------------------------------------
   17. Custom Selection Color
   ------------------------------------------------------------------ */
::selection { background: var(--teal); color: #fff; }
::-moz-selection { background: var(--teal); color: #fff; }