/* Brand Color Scheme - Matching MoreGlow Logo */

:root {
	--brand-dark-gray: #3a3a3e;
	--brand-medium-gray: #4a4a4e;
	--brand-light-gray: #5a5a5e;
	--brand-orange: #ff6b35;
	--brand-orange-hover: #ff8555;
	--brand-white: #ffffff;
	--brand-off-white: #f5f5f5;
}

/* Recent Work Gallery Styling */
#recent-work.section {
	background: var(--brand-medium-gray) !important;
	color: var(--brand-white);
}

#recent-work h2 {
	color: var(--brand-white) !important;
}

#recent-work p.lead {
	color: var(--brand-off-white) !important;
}

.recent-work-item {
	position: relative;
	width: 100%;
	padding-bottom: 75%; /* 4:3 aspect ratio */
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.recent-work-item:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
}

.recent-work-item img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Hero Section */
#home.section {
	background: linear-gradient(135deg, var(--brand-dark-gray) 0%, var(--brand-medium-gray) 100%);
	color: var(--brand-white);
}

#home h1 {
	color: var(--brand-white) !important;
}

#home p.lead {
	color: var(--brand-off-white) !important;
}

#home .btn-primary {
	background-color: var(--brand-orange) !important;
	border-color: var(--brand-orange) !important;
	color: var(--brand-white) !important;
}

#home .btn-primary:hover {
	background-color: var(--brand-orange-hover) !important;
	border-color: var(--brand-orange-hover) !important;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
}

/* About Section */
#about.section {
	background: var(--brand-medium-gray) !important;
	color: var(--brand-white);
}

#about h2 {
	color: var(--brand-white) !important;
}

#about p.lead,
#about p {
	color: var(--brand-off-white) !important;
}

/* Gallery Section */
#gallery.section {
	background: var(--brand-dark-gray);
	color: var(--brand-white);
}

#gallery h2 {
	color: var(--brand-white) !important;
}

#gallery p.lead {
	color: var(--brand-off-white) !important;
}

#gallery .gallery-caption {
	background: var(--brand-medium-gray) !important;
	border-top: 3px solid var(--brand-orange) !important;
}

#gallery .gallery-caption h5 {
	color: var(--brand-white) !important;
}

#gallery .gallery-caption p {
	color: var(--brand-off-white) !important;
}

#gallery .gallery-item {
	box-shadow: 0 5px 20px rgba(255, 107, 53, 0.2);
}

#gallery .gallery-item:hover {
	box-shadow: 0 10px 30px rgba(255, 107, 53, 0.3);
}

/* Services Section */
#services.section {
	background: var(--brand-light-gray) !important;
	color: var(--brand-white);
}

#services h2 {
	color: var(--brand-white) !important;
}

#services p.lead {
	color: var(--brand-off-white) !important;
}

#services .card {
	background: var(--brand-dark-gray) !important;
	border: 2px solid var(--brand-medium-gray) !important;
	transition: all 0.3s ease;
}

#services .card:hover {
	border-color: var(--brand-orange) !important;
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(255, 107, 53, 0.2);
}

#services .card h4 {
	color: var(--brand-white) !important;
}

#services .card p {
	color: var(--brand-off-white) !important;
}

#services .card i {
	color: var(--brand-orange) !important;
}

/* Testimonials Section */
#testimonials.section {
	background: var(--brand-dark-gray) !important;
	color: var(--brand-white);
}

#testimonials h2 {
	color: var(--brand-white) !important;
}

#testimonials p.lead {
	color: var(--brand-off-white) !important;
}

#testimonials .card {
	background: var(--brand-medium-gray) !important;
	border: 2px solid var(--brand-light-gray) !important;
}

#testimonials .card p {
	color: var(--brand-off-white) !important;
}

#testimonials .card .font-weight-bold {
	color: var(--brand-white) !important;
}

#testimonials .card .text-muted {
	color: var(--brand-off-white) !important;
	opacity: 0.8;
}

#testimonials .fa-star {
	color: var(--brand-orange) !important;
}

/* Call to Action Section */
.section-primary {
	background: linear-gradient(135deg, var(--brand-orange) 0%, #ff8555 100%) !important;
}

.section-primary h2 {
	color: var(--brand-white) !important;
}

.section-primary .btn-light {
	background-color: var(--brand-white) !important;
	color: var(--brand-orange) !important;
	border: 2px solid var(--brand-white) !important;
}

.section-primary .btn-light:hover {
	background-color: transparent !important;
	color: var(--brand-white) !important;
	border-color: var(--brand-white) !important;
}

/* Contact Section */
#contact.section {
	background: var(--brand-medium-gray) !important;
	color: var(--brand-white);
}

#contact h2 {
	color: var(--brand-white) !important;
}

#contact p.lead {
	color: var(--brand-off-white) !important;
}

#contact .form-control {
	background-color: var(--brand-dark-gray) !important;
	border: 2px solid var(--brand-light-gray) !important;
	color: var(--brand-white) !important;
}

#contact .form-control:focus {
	background-color: var(--brand-dark-gray) !important;
	border-color: var(--brand-orange) !important;
	color: var(--brand-white) !important;
	box-shadow: 0 0 0 0.2rem rgba(255, 107, 53, 0.25);
}

#contact .form-control::placeholder {
	color: var(--brand-off-white) !important;
	opacity: 0.6;
}

#contact select.form-control option {
	background-color: var(--brand-dark-gray) !important;
	color: var(--brand-white) !important;
}

#contact .btn-primary {
	background-color: var(--brand-orange) !important;
	border-color: var(--brand-orange) !important;
	color: var(--brand-white) !important;
}

#contact .btn-primary:hover {
	background-color: var(--brand-orange-hover) !important;
	border-color: var(--brand-orange-hover) !important;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
}

/* Footer */
#footer {
	background: var(--brand-dark-gray) !important;
	color: var(--brand-white);
}

#footer h4 {
	color: var(--brand-white) !important;
}

#footer p,
#footer li {
	color: var(--brand-off-white) !important;
}

#footer a {
	color: var(--brand-orange) !important;
}

#footer a:hover {
	color: var(--brand-orange-hover) !important;
}

#footer i {
	color: var(--brand-orange) !important;
}

#footer .footer-copyright {
	background: var(--brand-medium-gray) !important;
	border-top: 2px solid var(--brand-orange);
}

#footer .footer-copyright p {
	color: var(--brand-off-white) !important;
}

#footer .footer-copyright a {
	color: var(--brand-orange) !important;
}

#footer .footer-copyright a:hover {
	color: var(--brand-orange-hover) !important;
}

/* Global Button Styles */
.btn-primary,
.btn-primary.btn-modern {
	background-color: var(--brand-orange) !important;
	border-color: var(--brand-orange) !important;
	color: var(--brand-white) !important;
	transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary.btn-modern:hover {
	background-color: var(--brand-orange-hover) !important;
	border-color: var(--brand-orange-hover) !important;
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(255, 107, 53, 0.3);
}

/* Text Color Overrides */
.text-color-dark {
	color: var(--brand-white) !important;
}

.text-color-primary {
	color: var(--brand-orange) !important;
}

/* Ensure all sections have proper spacing */
.section {
	position: relative;
}

/* Add subtle texture overlay for depth */
.section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: 
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 2px,
			rgba(255, 255, 255, 0.02) 2px,
			rgba(255, 255, 255, 0.02) 4px
		);
	pointer-events: none;
	z-index: 0;
}

.section > * {
	position: relative;
	z-index: 1;
}