/*
* Main CSS file for Ella Jaymes Photography
* This stylesheet contains all styles for the website
*/

/* ===== GLOBAL STYLES ===== */
:root {
	/* Color variables / SAVE https://coolors.co/d04e7d-c41e3d-457eac-eef0e6-7d4e57 color scheme for now */
	--primary-color: #FDFDFD; /* Snow */
	--secondary-color: #221B1F; /* Raisin Black */
	--accent-color-1: #D04E7DFF; /* Rose Red (FF is alpha for full opacity) */
	--accent-color-2: #cddafdff; /* Lavender Blue / Pale Periwinkle (FF is alpha) */
	--accent-color-3: #fde2e4ff; /* Misty Rose / Pale Pink (FF is alpha) */
	--text-color: #333333; /* Charcoal / Very Dark Gray */
	--light-text: #FFFFFF; /* White */
	--link-color: #666666; /* Medium Gray */
	--link-hover-color: #000000; /* Black */
	--blue-button: #457EAC; /* Steel Blue */

	--mobile-button-bg: #221B1F; /* Raisin Black */
	--mobile-button-hover-bg: #dd7ea1; /* Rose Vale / Used for phone icon & nav hover */
	--cardinal-red: #C41E3D; /* Cardinal Red / Used for phone and menu border | nav links hover */

	/* Font variables */
	--heading-font: 'Cormorant Garamond', serif;
	--body-font: 'Montserrat', sans-serif;

	/* Spacing variables */
	--section-spacing: 80px;
	--element-spacing: 20px;
	--global-margin: 5%;
	--contact-button-width: 180px; /* Define a width for contact buttons */
	--contact-button-height: 48px;  /* Define a height for contact buttons */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
	scroll-behavior: smooth;
}

body {
	font-family: var(--body-font);
	font-size: 1rem; /* This will be fluid, based on the html clamp() value */
	line-height: 1.6;
	color: var(--text-color);
	background-color: var(--primary-color);
	overflow-x: hidden;
}

/* Class added via JS to prevent scrolling when mobile menu is open */
/* Apply to both html and body for better cross-browser compatibility */
html.nav-open,
body.nav-open {
	overflow: hidden;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--heading-font);
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 1.1rem; /* Relative (approx 20px / ~18px desktop base) */
}

h1 {
	font-size: 2.5rem;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.5rem;
}

p {
	margin-bottom: 1.1rem; /* Relative (approx 20px / ~18px desktop base) */
}

a {
	color: var(--link-color);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--link-hover-color);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

.container {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--global-margin);
}

.section-standard {
	padding: var(--section-spacing) var(--global-margin);
}

.section-full {
	padding: var(--section-spacing) 0;
	width: 100%;
}

.section-full-bg {
	padding: var(--section-spacing) 0;
	width: 100%;
}

.section-full-bg .container {
	padding: 0 var(--global-margin);
}

section {
	padding: var(--section-spacing) 0;
}

/* ===== HEADER STYLES ===== */
header {
	background-color: var(--primary-color);
	padding: 20px var(--global-margin);
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1001;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap; /* Default, will be overridden at 992px */
}

.logo {
	padding: 0;
	width: 200px; /* Consider adjusting if it causes issues with new buttons */
	flex-shrink: 0;
	order: 0;
}

.logo img {
	height: 60px;
	width: auto;
	display: block;
}

.mobile-nav-controls {
	display: none; /* Hidden by default, shown at 992px */
	order: 2; /* Default order for flex items if shown */
}

.menu-toggle {
	background: none;
	border: none;
	font-size: 1.5rem; /* Fallback if image doesn't load, or for accessibility */
	color: var(--secondary-color);
	cursor: pointer;
	padding: 8px; /* Fallback padding */
	display: block;
}

.menu-toggle:focus {
	outline: none;
}

.main-nav {
	/* Desktop styles */
	padding: 0;
	flex-grow: 1;
	display: flex; /* Shown by default, hidden at 992px */
	justify-content: center;
	order: 1;
}

.main-nav ul {
	list-style: none;
	display: flex;
	justify-content: center;
}

.main-nav ul li {
	margin-left: 60px;
}

.main-nav ul li:first-child {
	margin-left: 0;
}

.main-nav ul li a {
	text-transform: uppercase;
	font-size: 0.9rem;
	letter-spacing: 1px;
	padding: 10px 0;
	font-weight: 600;
	transition: font-weight 0.3s ease, color 0.3s ease; /* Added color transition */
}

.main-nav ul li a:hover,
.main-nav ul li a.active {
	font-weight: 800;
	color: var(--cardinal-red); /* Hover color for nav links */
}

.phone-number {
	display: flex;
	align-items: center;
	margin-left: auto; /* Pushes to the right on desktop */
	order: 2;
	flex-shrink: 0;
}

/* Desktop phone number button styling (screens wider than 992px) */
.phone-number a {
	display: flex;
	align-items: center;
	background-color: var(--mobile-button-bg); /* Same background as contact buttons */
	color: var(--light-text); /* White text */
	font-weight: 600;
	padding: 10px 15px; /* Adjust padding for button appearance */
	border: 2px solid var(--cardinal-red);
	border-radius: 6px; /* Rounded corners */
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.phone-number a:hover {
	background-color: var(--mobile-button-hover-bg);
	color: var(--light-text);
	transform: translateY(-1px); /* Slight lift on hover */
}

.phone-number a .nav-button-icon { /* Icon inside desktop button */
	filter: brightness(0) invert(1); /* Makes the black icon white */
	width: 18px; /* Adjust size as needed for desktop button */
	height: 18px;
	margin-right: 8px; /* Space between icon and number */
	display: inline-block; /* Ensure it's on the same line */
}

.phone-number .phone-text { /* Actual phone number string for desktop button */
	display: inline;
	font-size: 0.9rem; /* Adjust as needed */
	letter-spacing: 1px;
	/* Dimensional text effect */
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
}

/* Style for the text label within tablet/mobile buttons (MENU/CALL) */
.button-text-label {
	display: none; /* Hidden by default, shown in button styles via media query */
	font-weight: 600;
	font-size: 0.8rem;
	text-transform: uppercase;
	margin-top: 5px; /* Space between icon image and text */
}

/* Style for the image icons within tablet/mobile buttons */
.nav-button-icon { /* This class is used by img tags in tablet/mobile buttons */
	width: 24px;
	height: 24px;
	display: block;
	margin-bottom: 0; /* Initial reset */
	/* White version of icons are assumed for tablet/mobile pink buttons */
}

/* ===== RESPONSIVE HEADER STYLES ===== */

@media (max-width: 1200px) {
	.main-nav ul li {
		margin-left: 40px;
	}
}

/* === STYLES FOR TABLET/MOBILE NAVIGATION BUTTONS (992px and below) === */
@media (max-width: 992px) {
	header {
		flex-wrap: nowrap;
		justify-content: space-between;
	}

	.main-nav {
		display: none !important;
	}

	.mobile-nav-controls {
		display: flex;
		order: 2;
		margin-left: 8px;
	}

	.phone-number { /* Container for the phone button on tablet/mobile */
		order: 1;
		margin-left: auto;
	}

	/* Hide desktop-specific phone text span IF IT WASN'T ALREADY HANDLED */
	/* .phone-number .phone-text is now styled for desktop button,
	   but for tablet/mobile, the entire .phone-number a is styled as a square button */

	.menu-toggle { /* Tablet/Mobile MENU button */
		background-color: var(--mobile-button-bg);
		color: white;
		border: none;
		border-radius: 6px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 70px;
		height: 70px;
		cursor: pointer;
		font-size: inherit;
		line-height: initial;
	}

	.menu-toggle .nav-button-icon {
		width: 24px;
		height: 24px;
		display: block; /* Ensures the image behaves as a block */
	}

	.menu-toggle:hover {
		background-color: var(--mobile-button-hover-bg);
		border: 1px solid var(--cardinal-red);
	}

	.menu-toggle i.fa-bars { /* Hide FontAwesome if image is used */
		display: none;
	}
	/* .menu-toggle .nav-button-icon styling is via the general .nav-button-icon class */

	.menu-toggle .button-text-label { /* "MENU" text */
		display: block;
	}

	/* Phone button styling for tablet/mobile */
	.phone-number a { /* This is the <a> tag becoming the square CALL button */
		background-color: var(--mobile-button-bg);
		color: white !important;
		border: 1px solid var(--mobile-button-bg);
		border-radius: 6px;
		padding: 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 70px;
		height: 70px;
		text-decoration: none;
		margin-right: 0; /* Reset desktop margin */
		text-shadow: none; /* Remove desktop text shadow */
	}
	.phone-number a:hover { /* Hover for tablet/mobile CALL button */
		background-color: var(--mobile-button-hover-bg);
		color: white !important;
		border: 1px solid var(--cardinal-red);
		transform: none; /* Reset desktop transform if any */
	}

	.phone-number a .nav-button-icon { /* Icon inside tablet/mobile CALL button */
		width: 24px;
		height: 24px;
		/* General .nav-button-icon styles apply (24x24px) */
		/* Ensure filter from desktop is overridden if not desired */
		filter: none; /* Assuming phone.png is already white */
		margin-right: 0; /* Reset desktop margin */
		display: block; /* Ensure it's block for column layout */
	}

	.phone-number a .phone-text { /* Hide the (310) 721-6174 span */
		display: none !important;
	}
	.phone-number a .button-text-label { /* "CALL" text for tablet/mobile button */
		display: block;
	}

	/* Dropdown menu styles */
	.main-nav.active {
		display: block !important;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		width: 100%;
		z-index: 1000;
	}

	.main-nav.active ul {
		display: block;
		flex-direction: column;
		align-items: stretch;
		padding: 5px 10px;
		list-style: none;
		background-color: rgba(0, 0, 0, 0.75);
	}

	.main-nav.active ul li {
		margin: 0;
		width: 100%;
	}

	.main-nav.active ul li a {
		display: block;
		padding: 12px 15px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: 0;
		font-weight: 600;
		text-align: center;
		color: var(--light-text);
		box-shadow: none;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
	}
	.main-nav.active ul li:last-child a {
		border-bottom: none;
	}
	.main-nav.active ul li a:hover,
	.main-nav.active ul li a.active { /* Combined active and hover for dropdown */
		background-color: var(--accent-color-1);
		color: var(--light-text);
		font-weight: 800;
	}
	.main-nav.active ul li a.active { /* Specific style if current page is active in dropdown */
		background-color: rgba(51, 51, 51, 0.85);
	}
}

@media (max-width: 768px) {
	/* Adjustments for smaller tablets/large phones if 992px styles need tweaking */
	/* Current 992px styles for buttons are generally fine for 768px too */
	/* Ensure hero margin-top is correct */
	.hero,
	.about-hero, .services-hero, .portfolio-hero, .pricing-hero, .reviews-hero, .contact-hero {
		margin-top: 100px; /* Assuming header is still around 100px tall */
	}
}

@media (max-width: 480px) {
	.logo img {
		height: 40px;
	}
	/* Adjust tablet/mobile button sizes for very small screens */
	.menu-toggle,
	.phone-number a { /* Targets the styled CALL button */
		width: 60px;
		height: 60px;
		padding: 8px;
	}

	.menu-toggle .nav-button-icon {
		width: 20px;
		height: 20px;
		display: block;
	}

	.phone-number a .nav-button-icon {
		width: 20px;
		height: 20px;
		display: block;
		filter: none;
	}

	.button-text-label { /* Text like MENU/CALL */
		font-size: 0.7rem;
	}
	.hero,
	.about-hero, .services-hero, .portfolio-hero, .pricing-hero, .reviews-hero, .contact-hero {
		margin-top: 80px; /* Header might be shorter */
	}
}

/* ===== HERO SECTION STYLES ===== */
.hero {
	height: 100vh;
	background-color: #000;
	position: relative;
	overflow: hidden;
	margin-top: 100px; /* Default, adjusted in media queries */
	width: 100%;
}

.hero-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	opacity: 0.7;
}

.hero-content {
	position: absolute;
	top: 25%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	color: var(--light-text);
	width: 80%;
	max-width: 800px;
	z-index: 2;
}

.hero-content h1 {
	font-size: 3rem;
	margin-bottom: 20px;
	text-transform: uppercase;
	letter-spacing: 2px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content p {
	font-size: 1.2rem;
	margin-bottom: 30px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 1200px) {
	.hero-content h1 {
		font-size: 2.5rem;
	}
}

@media (max-width: 992px) {
	.hero-content h1 {
		font-size: 2.2rem;
	}
	.hero-content p {
		font-size: 1.1rem;
	}
}

@media (max-width: 768px) {
	.hero {
		height: 80vh;
	}
	.hero-content {
		width: 90%;
		top: 30%;
	}
	.hero-content h1 {
		font-size: 2rem;
		margin-bottom: 15px;
	}
	.hero-content p {
		font-size: 1rem;
		margin-bottom: 20px;
	}
}

@media (max-width: 480px) {
	.hero {
		height: 70vh;
	}
	.hero-content h1 {
		font-size: 1.7rem;
		margin-bottom: 12px;
	}
	.hero-content p {
		font-size: 0.9rem;
		margin-bottom: 15px;
	}
	.package-pricing .price-text {
		font-size: 1.1rem;
	}
	.package-pricing .price-amount {
		font-size: 1.3rem;
	}
	.package-pricing .price-amount small {
		font-size: 0.75rem;
	}
}

@media (max-height: 500px) and (max-width: 768px) {
	.hero {
		height: 120vh;
	}
	.hero-content {
		top: 40%;
	}
}

/* ===== BUTTON STYLES ===== */
.cta-button {
	display: inline-block;
	padding: 12px 30px;
	background-color: var(--blue-button);
	color: var(--light-text);
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.9rem;
	font-weight: 600;
	border: none;
	border-radius: 6px;
	cursor: pointer;
	transition: all 0.3s ease;
	position: relative;
	z-index: 2;
}

.cta-button:hover {
	background-color: var(--secondary-color);
	color: var(--light-text);
}

.cta-button.large {
	padding: 15px 40px;
	font-size: 1rem;
}

/* ===== FEATURED SECTION STYLES ===== */
.featured {
	background-color: var(--primary-color);
	text-align: center;
	padding: 40px var(--global-margin);
}

.featured-content p {
	font-size: 1.1rem;
	color: var(--secondary-color);
	font-style: italic;
}

/* ===== AWARD SECTION STYLES ===== */
.award {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background-color: var(--primary-color);
	padding: 100px var(--global-margin);
}

.award-content {
	flex: 1;
	padding: 60px;
	min-width: 300px;
}

.award-content h2 {
	font-size: 2.5rem;
	color: var(--accent-color-1);
	margin-bottom: 40px;
	line-height: 1.2;
}

.award-content p {
	margin-bottom: 25px;
	font-size: 1.05rem;
}

.award-image {
	flex: 1;
	padding: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 300px;
}

.award-image img {
	width: 100%;
	max-width: 500px;
	height: auto;
	aspect-ratio: 3/4;
	object-fit: cover;
	border-radius: 16px;
	border: 1px solid #e0e0e0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	display: block;
}

/* ===== DECADE SECTION STYLES ===== */
.decade {
	background-color: var(--accent-color-3);
	padding: 80px var(--global-margin);
}

.decade-content {
	max-width: 800px;
	margin: 0 auto;
	text-align: left;
}

.decade-content h2 {
	font-size: 2.5rem;
	margin-bottom: 30px;
	color: var(--secondary-color);
}

/* ===== SERVICES SECTION STYLES ===== */
.services {
	padding: 100px var(--global-margin);
	text-align: center;
}

.services-content {
	max-width: 800px;
	margin: 0 auto;
	margin-bottom: 50px;
}

.services-content h2 {
	font-size: 2.2rem;
	color: var(--secondary-color);
}

.service-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 30px;
}

.service-item {
	position: relative;
	overflow: hidden;
	height: 300px;
}

.service-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.service-item:hover img {
	transform: scale(1.1);
}

.service-item h3 {
	margin: 0;
	font-size: 1.5rem;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	color: var(--light-text);
	padding: 20px;
	text-align: center;
}

/* ===== STORY SECTION STYLES ===== */
.story {
	display: flex;
	flex-wrap: wrap;
	background-color: var(--primary-color);
	padding: 80px var(--global-margin);
}

.story-content {
	flex: 1;
	padding: 50px;
	min-width: 300px;
}

.story-content h2 {
	font-size: 2.5rem;
	margin-bottom: 30px;
}

.story-info {
	flex: 1;
	padding: 50px;
	min-width: 300px;
}

/* ===== MOMENTS QUOTE SECTION STYLES ===== */
.moments-quote {
	position: relative;
	width: 100%;
	height: 80vh;
	overflow: hidden;
}

/* Desktop View Container */
.moments-quote .desktop-view {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Mobile View Container - Hidden by default */
.moments-quote .mobile-view {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Image container stays absolute as in original */
.moments-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.moments-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Desktop Overlays */
.quote-overlay {
	position: absolute;
	top: 0;
	right: 0;
	width: 40%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: right;
	padding: 0 5%;
}

.contact-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 40%;
	height: 100%;
	display: flex;
	align-items: center;
	padding: 0 5%;
}

/* Mobile Overlays */
.contact-overlay-mobile {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 40px 20px 30px;
	background: linear-gradient(to top,
		rgba(255, 255, 255, 0.95) 0%,
		rgba(255, 255, 255, 0.85) 70%,
		rgba(255, 255, 255, 0) 100%);
	text-align: center;
}

/* Content Styles */
.quote-content {
	color: #545454ff;
	text-shadow: 1px 1px 3px rgba(248, 248, 246, 0.8);
}

.quote-text {
	font-family: var(--heading-font);
	font-style: italic;
	font-size: 2rem;
	line-height: 1.4;
	margin-bottom: 20px;
}

.quote-author {
	font-family: var(--heading-font);
	font-size: 1.5rem;
}

.contact-content {
	color: #545454ff;
	text-shadow: 1px 1px 3px rgba(248, 248, 246, 0.8);
	max-width: 300px;
}

.contact-content p {
	font-size: 1.3rem;
	line-height: 1.6;
	letter-spacing: 1px;
	font-style: normal;
}

/* Mobile-specific content adjustments */
.mobile-view .contact-content {
	max-width: none;
	margin: 0 auto;
}

/* ===== CTA SECTION STYLES ===== */
.cta {
	background-color: #EEF0E6; /* Alabaster */
	padding: 80px var(--global-margin);
	text-align: center;
	border-top: 1px solid #8b6220ff;
}

.cta-container {
	display: flex;
	justify-content: space-around;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
	flex-wrap: wrap;
	gap: 20px;
}

.cta-col {
	flex: 1;
	position: relative;
	padding: 20px;
	min-width: 250px;
}

.cta-heading {
	font-size: 0.8rem;
	letter-spacing: 2px;
	color: #666;
	margin-bottom: 15px;
	text-transform: uppercase;
}

.cta h2 {
	font-size: 2rem;
	color: #666;
	margin: 0;
	font-weight: 300;
	text-transform: uppercase;
}

.cta-divider {
	width: 1px;
	height: 100px;
	background-color: rgba(102, 102, 102, 0.3);
	display: block;
}

@media (max-width: 992px) {
	.cta-divider {
		display: none;
	}
}

.cta-link {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ===== SERVICE AREAS SECTION STYLES ===== */
/* This section seems to be for a generic "Service Areas" display, distinct from the Contact Page's "Areas Served" */
.service-areas {
	position: relative;
	padding: 100px 0;
	min-height: 500px;
	height: auto;
	text-align: center;
	overflow: hidden;
	background-image: url('/images/service-areas-bg.jpg'); /* Different background image */
	background-size: cover;
	background-position: center;
}

.service-areas:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8);
	z-index: 1;
}

.service-areas-content {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 var(--global-margin);
	z-index: 2;
}

.service-areas h3 { /* This h3 is for subheadings within .service-areas, not the location card titles */
	font-size: 1rem;
	font-weight: 600;
	letter-spacing: 2px;
	margin-bottom: 10px;
	color: #e84855;
	text-shadow: 1px 1px 0px #e091ae, 2px 2px 3px rgba(0, 0, 0, 0.6);
}

.service-areas h2 {
	font-size: 2.2rem;
	font-weight: 600;
	color: var(--light-text);
	margin-bottom: 50px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.areas-list { /* This is a list style, different from the grid of cards in .areas-served on contact.html */
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px 30px;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
}

.areas-list li {
	font-size: 1.1rem;
	font-family: var(--heading-font);
	color: var(--light-text);
	transition: color 0.3s ease;
	padding: 8px 10px;
}

.areas-list li:hover {
	color: var(--accent-color-1);
}

/* ===== ABOUT PAGE STYLES ===== */
.about-hero {
	height: 50vh;
	background-color: var(--accent-color-3);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.about-hero-content h1 {
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 10px;
}

.about-hero-content h2 {
	font-size: 3rem;
	margin-bottom: 10px;
}

.studio-images {
	padding: 80px var(--global-margin);
}

.studio-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 200px);
	grid-gap: 20px;
}

.studio-image {
	overflow: hidden;
}

.studio-image.large {
	grid-column: span 1;
	grid-row: span 1;
}

.studio-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.studio-image:hover img {
	transform: scale(1.1);
}

.business {
	background-color: var(--accent-color-2);
	text-align: center;
	padding: 80px var(--global-margin);
}

.business-content {
	max-width: 800px;
	margin: 0 auto;
}

.quote {
	padding: 80px var(--global-margin);
	text-align: center;
	background-color: var(--primary-color);
}

.quote blockquote {
	font-size: 1.8rem;
	font-style: italic;
	max-width: 800px;
	margin: 0 auto;
	color: var(--secondary-color);
}

.about-content {
	display: flex;
	padding: 80px var(--global-margin);
	background-color: var(--accent-color-3);
	flex-wrap: wrap;
}

.about-left, .about-right {
	flex: 1;
	padding: 0 30px;
	min-width: 300px;
	margin-bottom: 20px;
}

.team {
	padding: 80px var(--global-margin);
	background-color: var(--primary-color);
}

.team-content {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.team-logo {
	margin: 30px 0;
}

.team-logo img {
	border-radius: 16px;
	border: 1px solid #e0e0e0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	display: block; /* Ensures block behavior, consistent with global img styles */
	margin-left: auto; /* To center the image if its container is wider */
	margin-right: auto; /* To center the image */
}

.team-description h3 {
	margin-bottom: 20px;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* ===== SERVICES PAGE STYLES ===== */
.services-hero {
	height: 50vh;
	background-color: var(--accent-color-1);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.services-hero-content h1 {
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 10px;
}

.services-hero-content h2 {
	font-size: 3rem;
	margin-bottom: 10px;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-gap: 30px;
	padding: 80px var(--global-margin);
}

.service-item.large {
	height: 400px;
}

.service-description {
	padding: 80px var(--global-margin);
	background-color: var(--accent-color-3);
	text-align: center;
}

.description-content {
	max-width: 800px;
	margin: 0 auto;
}

.service-detail {
	display: flex;
	padding: 80px var(--global-margin);
	align-items: center;
	flex-wrap: wrap;
}

.service-detail.reverse {
	flex-direction: row-reverse;
}

.service-image {
	flex: 1;
	padding: 0 30px;
	min-width: 300px;
	margin-bottom: 30px;
}

.service-image img {
	border-radius: 16px;
	border: 1px solid #e0e0e0;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	display: block;
}

.service-info {
	flex: 1;
	padding: 0 30px;
	min-width: 300px;
}

.service-info h3 {
	margin-bottom: 20px;
}

.service-info .cta-button {
	margin-top: 20px;
}

/* ===== PORTFOLIO PAGE STYLES ===== */
.portfolio-hero {
	height: 80vh;
	position: relative;
}

.portfolio-hero-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.portfolio-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.portfolio-hero-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba(255, 255, 255, 0.9);
	padding: 50px;
	text-align: center;
	max-width: 600px;
	width: 90%;
}

.portfolio-title {
	text-align: center;
	padding: 80px var(--global-margin);
	background-color: var(--primary-color);
}

.portfolio-categories {
	padding: 80px var(--global-margin);
	text-align: center;
	background-color: var(--accent-color-3);
}

.category-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 30px;
	margin-top: 50px;
}

.category-item {
	position: relative;
	overflow: hidden;
	height: 300px;
}

.category-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.category-item:hover img {
	transform: scale(1.1);
}

.category-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.6);
	color: var(--light-text);
	padding: 20px;
	text-align: center;
}

.portfolio-description, .studio-description {
	padding: 80px var(--global-margin);
	background-color: var(--primary-color);
}

.portfolio-description .description-content,
.studio-description .description-content {
	max-width: 800px;
	margin: 0 auto;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 20px;
	padding: 80px var(--global-margin);
	background-color: var(--accent-color-3);
}

.gallery-item {
	height: 300px;
	overflow: hidden;
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.gallery-item:hover img {
	transform: scale(1.1);
}

/* ===== PRICING PAGE STYLES ===== */
.pricing-hero {
	height: 80vh;
	position: relative;
}

.pricing-hero-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.pricing-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pricing-hero-content {
	position: absolute;
	bottom: 50px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	color: var(--light-text);
	width: 80%;
}

.pricing-packages {
	padding: 80px var(--global-margin);
	background-color: var(--accent-color-3);
	margin-top: 100px; /* Default margin-top, adjusted in hero margin overrides */
}

.pricing-packages h2 {
	text-align: center;
	margin-bottom: 50px;
}

.packages-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 30px;
}

.package {
	background-color: var(--primary-color);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.package:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.package:hover .package-image img {
	transform: scale(1.05);
}

.package h3 {
	background-color: var(--secondary-color);
	color: var(--light-text);
	padding: 20px;
	text-align: center;
	margin: 0;
}

.package-image {
	height: 200px;
	overflow: hidden;
}

.package-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.package-details {
	padding: 30px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	min-height: 400px; /* Set minimum height to ensure consistency */
}

.package-details ul {
	list-style: none;
	margin-bottom: 30px;
	flex-grow: 1; /* This will push pricing and button to bottom */
	display: flex;
	flex-direction: column;
	justify-content: flex-start; /* Align items to top of available space */
}

.package-details ul li {
	margin-bottom: 10px;
	position: relative;
	padding-left: 25px;
}

.package-details ul li:before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--accent-color-1);
}

/* Pricing Display */
.package-pricing {
	text-align: center;
	margin: 20px 0 25px 0;
	padding: 15px 0;
	border-top: 2px solid var(--accent-color-3);
	border-bottom: 2px solid var(--accent-color-3);
	margin-top: auto; /* This ensures pricing always sits at same relative position */
}

.package-pricing .price-text {
	font-size: 1.3rem;
	font-weight: 600;
	color: var(--accent-color-1);
	text-transform: none;
	letter-spacing: 1px;
	font-family: var(--heading-font);
	line-height: 1.2; /* Consistent line height */
}

.package-pricing .price-amount {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--secondary-color);
	line-height: 1.1; /* Consistent line height */
}

/* Style for small text in hourly pricing */
.package-pricing .price-amount small {
	font-size: 0.8rem;
	font-weight: 400;
	color: var(--text-color);
	display: block;
	margin-top: 2px;
	text-transform: none;
	letter-spacing: 0;
}

/* Button positioning */
.package-details .cta-button {
	margin-top: auto; /* Ensures button is always at bottom */
	text-align: center;
	transform: none;
}

.package-details .cta-button:hover {
	background-color: var(--secondary-color);
	color: var(--light-text);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.additional-options {
	padding: 80px var(--global-margin);
	background-color: var(--primary-color);
}

.additional-options h2 {
	text-align: center;
	margin-bottom: 50px;
}

.options-content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.option {
	flex: 1 1 calc(33.333% - 30px);
	margin-bottom: 30px;
	padding: 30px;
	background-color: var(--accent-color-3);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	min-width: 280px;
}

.option h3 {
	margin-bottom: 15px;
}

.booking-process {
	padding: 80px var(--global-margin);
	background-color: var(--accent-color-2);
	text-align: center;
}

.booking-process h2 {
	margin-bottom: 50px;
}

.process-steps {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.step {
	flex: 1 1 calc(33.333% - 30px);
	margin-bottom: 30px;
	padding: 30px;
	background-color: var(--primary-color);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	min-width: 280px;
}

.step h3 {
	margin-bottom: 15px;
	color: var(--accent-color-1);
	letter-spacing: 1px;
	font-weight: 600;
}

/* ===== REVIEWS PAGE STYLES ===== */
.reviews-hero {
	height: 100vh;
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: flex-start;
	overflow: hidden;
}

.reviews-hero-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.reviews-hero-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 50%; /* Adjusted to show top of boy's head */
}

/* Gradient overlay */
.reviews-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.35) 35%,
		rgba(0, 0, 0, 0.05) 70%,
		transparent 100%
	);
	z-index: 2;
}

.reviews-hero-content {
	position: relative;
	z-index: 3;
	text-align: left;
	color: var(--light-text);
	max-width: 500px;
	padding: 60px;
	margin-left: 0;
}

.reviews-hero-content h1 {
	font-size: 2.8rem;
	font-weight: 300;
	letter-spacing: 3px;
	margin-bottom: 15px;
	text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.7);
	line-height: 1.1;
}

.reviews-hero-content h2 {
	font-size: 1.3rem;
	font-weight: 400;
	letter-spacing: 2px;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
	opacity: 0.95;
}

/* Enhanced Mobile Reviews Hero Section */
@media (max-width: 768px) {
	.reviews-hero {
		height: 80vh;
		align-items: flex-end;
	}

	/* Remove the first gradient overlay for mobile */
	.reviews-hero::before {
		display: none;
	}

	.reviews-hero-image {
		/* Keep container absolutely positioned - don't override with relative */
		overflow: hidden;
		/* Removed: position: relative; - this was causing the issue */
	}

	.reviews-hero-image img {
		/* Use absolute positioning for precise centering */
		position: absolute;
		top: 0;
		left: 50%; /* Start from center */
		width: 130%;
		height: 100%;
		object-fit: cover;
		object-position: center center;
		transform: translateX(-50%); /* Move back by half its width to center */
	}

	.reviews-hero-content {
		padding: 20px; /* Reduced internal padding */
		/* Add a semi-transparent background for extra text protection */
		background: linear-gradient(
			135deg,
			rgba(0, 0, 0, 0.4) 0%,
			rgba(0, 0, 0, 0.2) 100%
		);
		border-radius: 12px;
		backdrop-filter: blur(2px);
		box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
		/* Position at bottom with minimal spacing */
		position: absolute;
		bottom: 15px; /* Minimal bottom spacing */
		left: 15px; /* Minimal left spacing */
		right: 15px; /* Minimal right spacing */
		width: auto; /* Let left/right positioning control width */
		max-width: none; /* Remove any width restrictions */
	}

	.reviews-hero-content h1 {
		font-size: 2.2rem;
		letter-spacing: 2px;
		/* Enhanced text shadow for better readability */
		text-shadow:
			2px 2px 4px rgba(0, 0, 0, 0.8),
			0 0 8px rgba(0, 0, 0, 0.6);
		margin-bottom: 8px;
	}

	.reviews-hero-content h2 {
		font-size: 1.1rem;
		letter-spacing: 1px;
		/* Enhanced text shadow for better readability */
		text-shadow:
			1px 1px 3px rgba(0, 0, 0, 0.8),
			0 0 6px rgba(0, 0, 0, 0.6);
		opacity: 0.95;
		margin-bottom: 0;
	}
}

/* ===== REVIEWS INTRODUCTION SECTION STYLES ===== */
.reviews-intro {
	text-align: center;
	padding: 80px var(--global-margin);
	background-color: var(--primary-color);
}

.reviews-intro .intro-content {
	max-width: 800px;
	margin: 0 auto;
	text-align: left; /* Changed from center to left for better readability */
}

.reviews-intro .intro-content p {
	font-size: 1.1rem;
	color: var(--secondary-color);
	font-style: italic;
	line-height: 1.6;
	margin-bottom: 0; /* Remove bottom margin since it's the only paragraph */
}

.reviews-grid {
	padding: 0 var(--global-margin) 80px;
	position: relative;
	overflow: hidden;
}

.testimonials-slider {
	position: relative;
	width: 100%;
	height: 450px;
	overflow: hidden;
}

.review-item {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	opacity: 0;
	transform: translateX(100%);
	transition: all 0.8s ease-in-out;
	border-radius: 12px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
	overflow: hidden;
	background: var(--secondary-color);
	margin-bottom: 0;
}

.review-item.active {
	opacity: 1;
	transform: translateX(0);
}

.review-item.prev {
	transform: translateX(-100%);
}

/* Create the blurred background using ::before pseudo-element */
.review-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1; /* Behind the content but above the container */

	/* Use the CSS custom property set by JavaScript */
	background-image: var(--review-bg-image);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	/* Apply blur and dark overlay effects */
	filter: blur(8px) brightness(0.4); /* Blur + darken the background */
	transform: scale(1.1); /* Slightly scale up to avoid blur edge artifacts */
}

/* Additional semi-transparent dark overlay for better text readability */
.review-item::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2; /* Above the blurred background but below content */
	background: rgba(0, 0, 0, 0.3); /* Semi-transparent dark overlay */
}

.review-item.reverse {
	flex-direction: row-reverse;
}

.review-image {
	flex: 1;
	height: 100%;
	position: relative;
	z-index: 3;
	min-width: 250px;
	min-height: auto;
}

.review-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px; /* Slightly round the image corners */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Add subtle shadow to the image */
}

.review-content {
	flex: 2;
	padding: 50px;
	min-width: 300px;
	position: relative;
	z-index: 3;
	color: var(--light-text);
}

.review-content h3 {
	margin-bottom: 10px;
	color: var(--light-text); /* White text */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Strong text shadow for readability */
	font-weight: 600; /* Slightly bolder for impact */
}

.review-content p {
	color: var(--light-text); /* White text */
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Subtle text shadow for readability */
	line-height: 1.7; /* Improved line height for better readability */
}

.stars {
	color: #FFD700; /* Gold color for stars */
	font-size: 1.2rem;
	margin-bottom: 20px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Shadow for stars too */
	filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5)); /* Subtle glow effect */
}

.reviewer {
	font-style: italic;
	color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
	font-weight: 500; /* Slightly bolder for emphasis */
}

.testimonials-slider:hover .review-item {
	animation-play-state: paused !important;
}

/* Enhanced hover effect for the entire review item */
.review-item:hover {
	transform: translateY(-3px); /* Subtle lift on hover */
	box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25); /* Enhanced shadow on hover */
	transition: all 0.3s ease;
}

/* Hover effect for the review image */
.review-item:hover .review-image img {
	transform: scale(1.05); /* Slight zoom on hover */
	transition: transform 0.3s ease;
}

.review-stats {
	display: flex;
	justify-content: space-around;
	padding: 80px 0;
	background-color: var(--secondary-color);
	color: var(--light-text);
	text-align: center;
	flex-wrap: wrap;
}

.stat {
	margin-bottom: 30px;
	padding: 0 20px;
}

.stat h3 {
	font-size: 3rem;
	color: var(--accent-color-1);
	margin-bottom: 10px;
}

/* ===== CONTACT PAGE STYLES ===== */
.contact-hero {
	height: 50vh;
	background-color: var(--accent-color-1);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.contact-hero-content h1 {
	font-size: 1.5rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin-bottom: 10px;
}

.contact-hero-content h2 {
	font-size: 3rem;
	margin-bottom: 10px;
}

.service-locations { /* Existing style - kept for completeness if needed */
	padding: 40px var(--global-margin);
	background-color: var(--primary-color);
	text-align: center;
}

.service-locations .locations-content {
	max-width: 800px;
	margin: 0 auto;
}

/* Main wrapper for the entire "Get in Touch" + Image/Form section */
.contact-image-form-section {
	padding: var(--section-spacing) var(--global-margin); /* Master padding for the whole section */
	background-color: var(--accent-color-3); /* Light pink background for the whole section */
	position: relative;
}

/* Container for the "GET IN TOUCH" title and new contact methods */
.contact-section-title-container {
	text-align: center;
	margin-bottom: 30px; /* Space between this title area and the two-column container */
}

.contact-section-title-container h2 {
	font-size: 2.8rem;
	color: var(--secondary-color);
	margin-bottom: 10px;
}

.contact-section-title-container p {
	font-size: 1.1rem;
	color: var(--text-color);
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 25px; /* Space after paragraph before buttons */
}

/* Styling for contact method buttons (Phone, Email) moved here */
.contact-section-title-container .contact-methods {
	display: flex;
	justify-content: center;
	gap: 15px;
	flex-wrap: wrap;
	margin-bottom: 40px; /* Space after buttons before the two-column container */
}

.contact-method { /* This class is used by phone/email links */
	display: inline-flex; /* To use align-items and justify-content */
	align-items: center;
	justify-content: center;
	width: var(--contact-button-width);   /* Use variable */
	height: var(--contact-button-height); /* Use variable */
	padding: 0 15px; /* Adjust horizontal padding as needed, vertical is controlled by height */
	background-color: var(--secondary-color);
	color: var(--light-text);
	text-align: center;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.5px;
	border: 1px solid transparent;
	box-sizing: border-box; /* Important for fixed width/height and padding */
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, border-color 0.3s ease;
}

.contact-method:hover {
	background-color: var(--accent-color-1);
	border-color: var(--accent-color-1);
	color: var(--light-text);
	transform: translateY(-2px);
}

/* Container for the two columns (image and form area) */
.contact-container {
	display: flex;
	flex-wrap: wrap;
	max-width: 1200px;
	margin: 0 auto;
	gap: 0; /* Remove gap, padding will handle spacing if columns touch */
	align-items: stretch; /* Make columns equal height */
	background-color: var(--primary-color); /* White background for the content "card" */
	padding: 0; /* Remove padding here, apply to columns if needed, or manage by outer section */
	border-radius: 12px;
	box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
	overflow: hidden; /* To ensure child border-radius for image works well */
}

.contact-image-column {
	flex: 1 1 50%;
	min-width: 300px; /* Or adjust based on desired smallest size */
	display: flex; /* For the image to use height: 100% if needed */
	position: relative; /* For potential absolute positioning of an overlay if ever needed */
}

.contact-image-column img {
	width: 100%;
	height: 100%; /* Make image take full height of its column */
	object-fit: cover; /* Ensures image covers the column, may crop */
	display: block; /* Remove extra space below image */
	border-radius: 0; /* Image itself doesn't need radius if container has overflow:hidden and rounds corners */
}

.contact-form-column {
	flex: 1 1 50%;
	min-width: 300px; /* Or adjust based on desired smallest size */
	display: flex;
	flex-direction: column;
}

.form-wrapper {
	background-color: var(--primary-color); /* Ensure it matches .contact-container or is transparent */
	width: 100%;
	display: flex;
	flex-direction: column;
	height: 100%; /* Make form wrapper take full height of column */
	justify-content: space-between; /* Distribute space if form is shorter than image */
	padding: 30px; /* Add padding inside the form wrapper */
	box-sizing: border-box;
}

.form-header {
	background-color: var(--secondary-color);
	color: var(--light-text);
	padding: 15px 25px; /* Adjusted padding */
	border-radius: 8px 8px 0 0;
	text-align: center;
	border-bottom: 3px solid var(--accent-color-1);
	margin-bottom: 25px; /* Space after header */
}

.form-header h3 {
	margin: 0;
	font-size: 1.4rem; /* Adjusted size */
	font-weight: 600;
}

/* Content area within the form column (actual form) */
.contact-form-column .form-content {
	padding: 0; /* Padding is now on .form-wrapper */
	flex-grow: 1;
}

.contact-form-column form {
	text-align: left;
	margin-top: 0;
}

.contact-form-column .form-group {
	margin-bottom: 18px;
}

.contact-form-column label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--text-color);
}

.contact-form-column input[type="text"],
.contact-form-column input[type="email"],
.contact-form-column input[type="tel"],
.contact-form-column input[type="date"],
.contact-form-column select,
.contact-form-column textarea {
	width: 100%;
	padding: 12px; /* This is the padding that allows browser icon to show */
	border: 1px solid #ccc;
	background-color: #f9f9f9;
	font-family: var(--body-font);
	font-size: 0.95rem;
	border-radius: 6px;
	color: var(--text-color);
	transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-form-column input:focus,
.contact-form-column select:focus,
.contact-form-column textarea:focus {
	outline: none;
	border-color: var(--accent-color-1);
	box-shadow: 0 0 0 2px rgba(224, 145, 174, 0.2);
}

.contact-form-column select {
	appearance: none;
	-webkit-appearance: none; /* For broader browser compatibility */
	-moz-appearance: none;    /* For broader browser compatibility */
	background-image: url('/images/global/down-arrow.svg');
	background-repeat: no-repeat;
	background-position: right 12px center; /* Adjust positioning as needed */
	background-size: 1em; /* Adjust size (e.g., '16px', '1.2em 0.8em') if needed */
	padding-right: 35px; /* Adjust if your arrow size + position requires different spacing */
}

/* Optional: Hide the default arrow on Internet Explorer/Edge */
.contact-form-column select::-ms-expand {
	display: none;
}

.contact-form-column textarea {
	min-height: 120px;
}

.contact-form-column .submit-button {
	display: block;
	width: 100%;
	padding: 14px 30px;
	background-color: var(--accent-color-1);
	color: var(--light-text);
	text-align: center;
	border-radius: 6px;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 1px;
	border: none;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
	margin-top: 10px;
}

.contact-form-column .submit-button:hover {
	background-color: #d17c9c;
	transform: translateY(-2px);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments for the new layout */
@media (max-width: 992px) { /* Tablet and below */
	.contact-section-title-container h2 {
		font-size: 2.4rem;
	}
	.contact-section-title-container p {
		font-size: 1rem;
	}
	.contact-section-title-container .contact-methods {
		margin-bottom: 30px; /* Adjust space for tablet */
	}
	.contact-method {
		width: var(--contact-button-width); /* Maintain defined width if space allows */
		padding: 0 10px; /* Adjust padding if text is longer */
	}
	.contact-container {
		flex-direction: column;
		gap: 0; /* Remove gap as columns stack, padding on .contact-image-form-section handles outer space */
		padding: 0; /* Remove padding from container, apply to form-wrapper instead */
		box-shadow: none; /* Optional: remove card shadow when stacked */
		border-radius: 0;
	}
	.contact-image-column,
	.contact-form-column {
		flex-basis: auto; /* Let content dictate height when stacked */
		max-width: 100%; /* Allow full width within parent */
	}
	.contact-image-column img {
		max-height: 50vh; /* More constrained height for image when stacked */
		border-radius: 0; /* Remove radius when stacked, or apply to top of section */
	}
	.form-wrapper {
		padding: 25px; /* Padding for form when stacked */
		border-radius: 0; /* Remove radius from form wrapper when stacked if container is not rounded */
	}
}

@media (max-width: 768px) { /* Mobile */
	.contact-image-form-section {
		padding: calc(var(--section-spacing) * 0.8) var(--global-margin); /* Reduce overall section padding */
	}
	.contact-section-title-container h2 {
		font-size: 2rem;
	}
	.contact-section-title-container .contact-methods {
		gap: 10px; /* Reduce gap between buttons */
	}
	.contact-method {
		width: calc(50% - 5px); /* Two buttons per row */
		font-size: 0.8rem;
		height: calc(var(--contact-button-height) * 0.9);
	}

	.form-header h3 {
		font-size: 1.3rem;
	}
	.form-wrapper {
		padding: 20px;
	}
	.contact-image-column img {
		max-height: 40vh; /* Further adjust image height for mobile */
	}
}

.map {
	padding: 80px var(--global-margin);
	background-color: var(--primary-color);
	text-align: center;
}

.map-content {
	max-width: 800px;
	margin: 0 auto;
	padding-top: 60px;
	padding-bottom: 60px;
}

.map-content h2 {
	margin-bottom: 20px;
}

.map-content p {
	margin-bottom: 30px;
}

.map-container {
	height: 450px;
	margin: 0;
	overflow: hidden;
	position: relative;
}

.map-container iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

/* Styles for "AREAS SERVED" section on Contact Page */
.areas-served {
	padding: 80px var(--global-margin) 120px var(--global-margin); /* Adjusted padding-bottom to make background more visible */
	background-image: url('../images/contact/beach-scene.png');
	background-size: cover;
	background-position: center;
	text-align: center;
	position: relative; /* For stacking context if needed */
}

.areas-served h2 {
	font-weight: 600; /* Make title slightly bolder for readability */
	color: var(--light-text);
	text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
	margin-bottom: 20px; /* Original value */
}

.areas-served p { /* Targets the introductory paragraph under the main H2 */
	color: var(--light-text);
	text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
	margin-bottom: 50px; /* Increased spacing before the grid */
	max-width: 800px; /* Optional: constrain width for better readability */
	margin-left: auto;
	margin-right: auto;
}

.areas-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* Ensures 3 columns on wider screens */
	grid-gap: 30px;
	margin-top: 50px; /* Spacing from the paragraph above */
	position: relative; /* Ensure cards are layered correctly if needed */
	z-index: 2; /* Ensure cards are above the section background */
}

.area {
	background-color: rgba(253, 253, 253, 0.85); /* Slightly transparent card background (var(--primary-color) was #fdfdfd) */
	padding: 30px;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
	border-radius: 8px; /* Slightly rounded corners */
	transition: all 0.3s ease; /* For hover effects */
}

.area:hover {
	transform: translateY(-5px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.area h3 {
	margin-bottom: 15px;
	color: var(--accent-color-1);
	font-weight: 600; /* Made card names slightly bolder */
}

.area p { /* Targets paragraphs inside each location card */
	color: var(--text-color); /* Ensure text inside cards is readable */
	font-size: 0.95rem; /* Optional: slightly smaller text for card details */
	line-height: 1.5;
}

/* ===== GENERAL RESPONSIVE STYLES ===== */
/* This rule dynamically adjusts margin-top for hero sections based on fixed header height */
.about-hero, .services-hero, .portfolio-hero, .pricing-hero, .reviews-hero, .contact-hero {
	margin-top: 100px; /* Fallback, should match header's effective height */
}

@media (max-width: 992px) { /* Same breakpoint as new nav buttons */
	.about-hero, .services-hero, .portfolio-hero, .pricing-hero, .reviews-hero, .contact-hero {
		margin-top: 100px; /* Example: If header is still ~100px tall */
	}
}
@media (max-width: 768px) {
	.about-hero, .services-hero, .portfolio-hero, .pricing-hero, .reviews-hero, .contact-hero {
		margin-top: 100px; /* Example: If header is still ~100px tall */
	}
}
@media (max-width: 480px) {
	.about-hero, .services-hero, .portfolio-hero, .pricing-hero, .reviews-hero, .contact-hero {
		margin-top: 80px; /* Header might be shorter here due to smaller logo */
	}
	.package-pricing .price-text {
		font-size: 1.1rem;
	}
	.package-pricing .price-amount {
		font-size: 1.3rem;
	}
	.package-pricing .price-amount small {
		font-size: 0.75rem;
	}
}

@media (max-width: 1200px) {
	.service-grid, .packages-grid, .category-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.package-details {
		min-height: 350px; /* Reduce min-height for smaller screens */
	}
}

@media (max-width: 992px) {
	h1 {
		font-size: 2rem;
	}
	h2 {
		font-size: 1.8rem;
	}
	.award, .story, .service-detail {
		flex-direction: column;
	}

	.service-detail.reverse {
		flex-direction: column;
	}

	.review-content {
		padding: 40px 30px;
	}

	.review-image {
		min-height: 250px;
		min-width: auto;
	}

	/* Moments Quote tablet adjustments */
	.quote-overlay {
		width: 45%;
		padding: 0 3%;
	}
	.contact-overlay {
		width: 45%;
		padding: 0 3%;
	}
	.quote-text {
		font-size: 1.8rem;
	}
	.quote-author {
		font-size: 1.3rem;
	}
	.contact-content p {
		font-size: 1.2rem;
	}

	.testimonials-slider {
		height: 600px;
	}

	.service-detail.reverse {
		flex-direction: column;
	}
	.award-content, .story-content, .story-info, .service-image, .service-info {
		padding: 30px;
		flex: 1 1 100%;
	}
	.option, .step {
		flex: 1 1 calc(50% - 15px);
		min-width: 0;
	}
	.areas-grid { /* If .areas-grid should be 2 columns here before going to 1 */
		grid-template-columns: repeat(2, 1fr);
	}
	.pricing-packages { /* Adjust margin top for pricing page based on new header height */
		margin-top: 100px; /* Example, check actual header height at this breakpoint */
	}
}

/* Mobile Moments Quote Section */
@media (max-width: 992px) {
	/* Mobile Moments Quote Section */
	/* Hide desktop view */
	.moments-quote .desktop-view {
		display: none;
	}
	/* Show mobile view */
	.moments-quote .mobile-view {
		display: block;
		position: relative;
	}
	/* Reset section height and add background gradient */
	.moments-quote {
		height: auto;
		/* Gradient background that blends from photo colors to CTA section */
		background: linear-gradient(to bottom,
			transparent 0%,
			transparent 60%,
			#b3b5aa 60%,		/* Grayish-green from photo bottom */
			#c5c7bc 70%,		/* Transition color */
			#d7d9cf 80%,		/* Lighter transition */
			#eef0e6 100%		/* Alabaster - matches CTA section */
		);
		padding-bottom: 0;	/* Remove bottom padding, let contact section handle it */
	}
	/* Image container adjustments */
	.moments-quote .mobile-view .moments-image {
		position: relative;
		width: 100%;
		margin-bottom: 0;	/* Remove gap between image and text below */
	}
	/* Quote overlay - positioned at top of image */
	.quote-overlay-mobile {
		position: absolute;
		top: 20px;
		left: 0;
		right: 0;
		padding: 30px 20px;
		text-align: center;
	}
	/* Quote text styling - matching desktop colors */
	.quote-overlay-mobile .quote-text {
		color: #545454ff; /* Same as desktop */
		font-size: 1.3rem;
		line-height: 1.4;
		margin-bottom: 15px;
		text-shadow:
			1px 1px 3px rgba(248, 248, 246, 0.8), /* Same subtle shadow as desktop */
			1px 1px 2px rgba(0, 0, 0, 0.2); /* Subtle dark shadow for contrast */
	}
	.quote-overlay-mobile .quote-author {
		color: #545454ff; /* Same as desktop */
		font-size: 1rem;
		text-shadow:
			1px 1px 3px rgba(248, 248, 246, 0.8), /* Same subtle shadow as desktop */
			1px 1px 2px rgba(0, 0, 0, 0.2); /* Subtle dark shadow for contrast */
	}
	/* Contact overlay - now positioned below image */
	.contact-overlay-mobile {
		position: relative;	/* Changed from absolute */
		bottom: auto;
		left: 0;
		right: 0;
		padding: 60px 20px 40px;	/* Increased top padding for breathing room */
		background: transparent;	/* Remove white gradient since section has it */
		text-align: center;
	}
	/* Contact content styling */
	.contact-overlay-mobile .contact-content {
		color: #545454;
		max-width: 90%;
		margin: 0 auto;
	}
	.contact-overlay-mobile .contact-content p {
		font-size: 1.3rem;
		line-height: 1.6;
		margin-bottom: 12px;
	}

	/* Other 768px styles - KEEP ALL OF THESE */
	.service-grid, .packages-grid, .category-grid, .gallery-grid, .areas-grid {
		grid-template-columns: 1fr;
	}
	.studio-grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
	.studio-image.large {
		grid-column: auto;
		grid-row: auto;
	}
	.studio-image {
		height: 250px;
	}
	.stat {
		flex-basis: 50%;
	}
	.cta-container {
		flex-direction: column;
	}
	.cta-col {
		margin-bottom: 40px;
		width: 100%;
	}
	.about-left, .about-right {
		padding: 0 15px;
	}
	.option, .step {
		flex: 1 1 100%;
	}
	.areas-served {
		padding: 60px var(--global-margin) 100px var(--global-margin);
	}
	.pricing-packages {
		margin-top: 100px;
	}
	.package-details {
		min-height: auto;
	}

	.package-pricing .price-text {
		font-size: 1.2rem;
	}

	.package-pricing .price-amount {
		font-size: 1.4rem;
	}

	.review-content {
		padding: 30px 25px;
	}

	.review-content h3 {
		font-size: 1.3rem;
	}

	.review-content p {
		font-size: 0.95rem;
	}

	.testimonials-slider {
		height: 650px;
	}
}

@media (max-width: 576px) {
	h1 { font-size: 1.8rem; }
	h2 { font-size: 1.6rem; }
	.stat {
		flex-basis: 100%;
	}
	.service-item, .category-item, .gallery-item {
		height: 250px;
	}
	:root {
		--global-margin: 3%;
	}

	/* Moments Quote extra small devices */
	.quote-overlay-mobile {
		top: 15px;
		padding: 25px 20px;
	}
	.contact-overlay-mobile {
		padding: 50px 20px 35px;	/* Adjusted for below-image positioning */
	}
	.quote-overlay-mobile .quote-text {
		font-size: 1.2rem;
	}
	.quote-overlay-mobile .quote-author {
		font-size: 1rem;
	}
	.contact-overlay-mobile .contact-content p {
		font-size: 1.2rem;
		margin-bottom: 12px;
	}
	.mobile-view .contact-content {
		max-width: 85%;
	}
}

@media (max-width: 480px) {
	/* Moments Quote very small devices */
	.moments-quote .mobile-view {
		min-height: auto;	/* Let content determine height */
	}
	/* Enhance gradient for smaller screens */
	.moments-quote {
		background: linear-gradient(to bottom,
			transparent 0%,
			transparent 55%,
			#b3b5aa 55%,		/* Start gradient slightly earlier */
			#c5c7bc 68%,		/* Transition color */
			#d7d9cf 82%,		/* Lighter transition */
			#eef0e6 100%		/* Alabaster - matches CTA section */
		);
	}
	.quote-overlay-mobile {
		top: 10px;
		padding: 20px 15px;
	}
	.quote-overlay-mobile .quote-text {
		font-size: 1.1rem;
		line-height: 1.3;
		margin-bottom: 10px;
	}
	.quote-overlay-mobile .quote-author {
		font-size: 0.9rem;
	}
	.contact-overlay-mobile {
		padding: 45px 15px 30px;	/* Good top spacing for below-image position */
	}
	.contact-overlay-mobile .contact-content p {
		font-size: 1.1rem;
		letter-spacing: 0.5px;
		margin-bottom: 10px;
	}
	.mobile-view .contact-content p {
		padding: 0 5px;
	}
	.mobile-view .contact-content {
		padding-top: 0;			/* Remove any extra top padding */
		padding-bottom: 20px;	/* Space below the text block */
	}

	.pricing-packages { /* Adjust margin top for pricing page */
		margin-top: 80px; /* Example, check actual header height at this breakpoint */
	}

	.review-content {
		padding: 25px 20px;
	}

	.review-item {
		margin-bottom: 0;
		border-radius: 8px;
	}

	.testimonials-slider {
		height: 700px;
	}
}

/* ===== FOOTER STYLES ===== */
footer {
	background-color: var(--secondary-color);
	color: var(--light-text);
	padding: 0;
	text-align: center;
	width: 100%;
}

.footer-social-band {
	padding: 20px var(--global-margin);
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 20px;
	border-bottom: 1px solid #444;
}

.social-icon {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #67515E;
	color: var(--light-text);
	font-size: 20px;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.social-icon:hover {
	background-color: var(--accent-color-1);
	color: var(--light-text);
}

.footer-copyright-band {
	background-color: #171215;
	padding: 15px var(--global-margin);
	font-size: 0.85rem;
}

.footer-copyright-band p {
	margin: 0;
	color: #ccc;
}

/* Responsive adjustments for footer if needed */
@media (max-width: 768px) {
	.social-icon {
		width: 36px;
		height: 36px;
		font-size: 18px;
	}

	.footer-copyright-band {
		font-size: 0.8rem;
	}
}