/* 
   2026 Vibe: Soft, Organic, Sage Green & Cream, Glassmorphism
*/

:root {
	--color-bg: #fdfcf8; /* Warm off-white */
	--color-primary: #8da399; /* Sage Green */
	--color-primary-dark: #6b8278;
	--color-accent: #e8b4a2; /* Soft Coral/Terracotta */
	--color-text-main: #2d3436;
	--color-text-light: #636e72;
	--color-white: #ffffff;

	--shadow-soft: 0 10px 40px -10px rgba(0, 0, 0, 0.08);
	--shadow-hover: 0 20px 50px -12px rgba(141, 163, 153, 0.3);

	--radius-pill: 50px;
	--radius-card: 24px;

	--font-heading: 'Playfair Display', serif;
	--font-body: 'Outfit', sans-serif;
}

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

body {
	background-color: var(--color-bg);
	color: var(--color-text-main);
	font-family: var(--font-body);
	line-height: 1.6;
	overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-heading);
	font-weight: 600;
}

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

a {
	text-decoration: none;
	color: inherit;
	transition: 0.3s ease;
}

/* --- Navigation Pill --- */
.nav-pill {
	position: fixed;
	bottom: 30px;
	left: 50%;
	transform: translateX(-50%);
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	padding: 10px 15px 10px 25px; /* Less left padding since no logo */
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-soft);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	z-index: 1000;
	width: auto; /* Shrink to fit */
	min-width: 300px;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

@media (min-width: 768px) {
	.nav-pill {
		top: 30px;
		bottom: auto;
		/* Optional: Move nav slightly to right or keep center? */
		/* If logo is top-left, center nav is fine. */
	}
}

/* Removed navbar logo styles from here */

.nav-socials {
	display: flex;
	gap: 15px;
	margin-right: 20px;
	padding-right: 20px;
	border-right: 1px solid rgba(0, 0, 0, 0.1); /* Divider */
}

.nav-socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #f0f4f3; /* Light background */
	color: var(--color-text-main);
	transition: all 0.3s ease;
}

.nav-socials a:hover {
	background: var(--color-primary);
	color: white;
	transform: translateY(-2px);
}

.nav-links {
	display: flex;
	gap: 2rem;
}

.nav-links a {
	font-weight: 500;
	color: var(--color-text-main);
	font-size: 0.95rem;
}

.nav-links a:hover {
	color: var(--color-primary);
}

.nav-cta {
	background-color: var(--color-text-main);
	color: var(--color-white);
	padding: 10px 24px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	font-size: 0.9rem;
}

.nav-cta:hover {
	background-color: var(--color-primary);
	transform: translateY(-2px);
}

/* --- Hero Section --- */
.hero {
	position: relative;
	padding: 140px 20px 100px;
	min-height: 90vh;
	display: flex;
	align-items: center;
	overflow: hidden;
}

/* Absolute Brand Logo */
.hero-brand-absolute {
	position: absolute;
	top: 30px;
	left: 40px; /* Aligned to left container margin roughly */
	z-index: 1001;
	display: block;
	width: 210px; /* Increased by 50% from 140px */
	height: 210px;
	background: #fff; /* White background for visibility */
	border-radius: 50%;
	padding: 15px; /* Slightly more padding for larger logo */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s;
}

.hero-brand-absolute:hover {
	transform: scale(1.05);
}

.hero-logo-circle {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 50%;
	cursor: default;
}

@media (max-width: 900px) {
	.hero-brand-absolute {
		width: 120px; /* Increased by 50% from 80px */
		height: 120px;
		left: 20px;
		top: 20px;
		padding: 5px;
	}
}

.hero-bg-shape {
	position: absolute;
	top: -20%;
	right: -10%;
	width: 60vw;
	height: 60vw;
	background: radial-gradient(
		circle,
		rgba(141, 163, 153, 0.2) 0%,
		rgba(255, 255, 255, 0) 70%
	);
	border-radius: 50%;
	z-index: -1;
	filter: blur(60px);
}

.hero-content {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	width: 100%;
}

@media (min-width: 768px) {
	.hero-content {
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}
}

.badge {
	display: inline-block;
	background: #eaf0ee;
	color: var(--color-primary-dark);
	padding: 6px 16px;
	border-radius: 20px;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 20px;
	letter-spacing: 0.5px;
}

.hero-text h1 {
	font-size: 3.5rem;
	line-height: 1.1;
	margin-bottom: 20px;
	color: var(--color-text-main);
}

.hero-text h1 em {
	font-style: italic;
	color: var(--color-primary);
}

.hero-text p {
	font-size: 1.1rem;
	color: var(--color-text-light);
	margin-bottom: 30px;
	max-width: 450px;
}

.hero-actions {
	display: flex;
	gap: 15px;
}

.btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: var(--radius-pill);
	font-weight: 600;
	text-align: center;
	cursor: pointer;
}

.btn-primary {
	background-color: var(--color-primary);
	color: var(--color-white);
	box-shadow: 0 10px 20px -5px rgba(141, 163, 153, 0.4);
}

.btn-primary:hover {
	background-color: var(--color-primary-dark);
	transform: translateY(-2px);
}

.btn-outline {
	border: 1px solid var(--color-text-main);
	color: var(--color-text-main);
}

.btn-outline:hover {
	background-color: var(--color-text-main);
	color: var(--color-white);
}

.hero-image-container {
	position: relative;
}

.hero-img-placeholder {
	border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; /* Organic Blob shape */
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	animation: morph 8s ease-in-out infinite;
	aspect-ratio: 4/5;
	background: #ccc;
}

.hero-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 75% 50%;
}

@keyframes morph {
	0% {
		border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
	}
	50% {
		border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
	}
	100% {
		border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
	}
}

/* SVG Divider */
.wave-divider {
	position: absolute;
	bottom: -1px; /* Fix potential pixel gap */
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
}

.wave-divider svg {
	position: relative;
	display: block;
	width: calc(100% + 1.3px);
	height: 120px; /* Taller wave */
}

.wave-divider .shape-fill {
	fill: #ffffff; /* Match the start of About section gradient */
}

/* --- About Section --- */
.about {
	padding: 80px 20px;
	position: relative;
	background: linear-gradient(to bottom, #ffffff, #fdfcf8);
}

.container {
	max-width: 1100px;
	margin: 0 auto;
}

.about-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 50px;
	max-width: 1200px;
	margin: 0 auto;
	align-items: center;
}

@media (min-width: 768px) {
	.about-grid {
		grid-template-columns: 1fr 1fr;
	}
}

.about-img {
	position: relative;
	/* Organic Shape settings */
	border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	animation: morph 8s ease-in-out infinite;
	aspect-ratio: 1/1; /* Square-ish blob */
	width: 100%;
	max-width: 500px;
	margin: 0 auto;
}

/* Removing old blob-bg as the image itself is now the blob */
.blob-bg {
	display: none;
}

.rounded-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.about-text h2 {
	font-size: 2.5rem;
	margin-bottom: 20px;
	color: var(--color-text-main);
}

.about-text h3 {
	font-size: 1.8rem;
	margin-top: 30px;
	margin-bottom: 15px;
	color: var(--color-primary-dark);
}

.owner-bio {
	font-size: 1.1rem;
	color: var(--color-text-main);
	line-height: 1.8;
	margin-bottom: 20px;
}

.features-list {
	list-style: none;
	margin-top: 20px;
}

.features-list li {
	margin-bottom: 12px;
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1.05rem;
	color: var(--color-text-main);
}

.features-list span {
	font-size: 1.2rem;
}

/* About Wave Divider */
.wave-divider-about {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	transform: rotate(180deg); /* Flip to make it sit nicely at bottom */
}

.wave-divider-about svg {
	position: relative;
	display: block;
	width: calc(100% + 1.3px);
	height: 80px;
}

.wave-divider-about .shape-fill {
	fill: #ffffff; /* Match Services background */
}

/* Services Wave Divider */
.wave-divider-services {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	transform: rotate(180deg); /* Flip to make it sit nicely at bottom */
}

.wave-divider-services svg {
	position: relative;
	display: block;
	width: calc(100% + 1.3px);
	height: 80px;
}

.wave-divider-services .shape-fill {
	fill: #fdfcf8; /* Match Pricing background (var(--color-bg)) */
}

/* --- Services Section --- */
.services {
	padding: 100px 20px;
	background: var(--color-white);
	position: relative;
	z-index: 1;
}

.section-header {
	text-align: center;
	margin-bottom: 60px;
}

.section-eyebrow {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 3px;
	color: var(--color-accent); /* Terracotta stand out */
	margin-bottom: 12px;
}

.section-header h2 {
	font-size: 2.5rem;
	color: var(--color-text-main);
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 30px;
}

.service-card {
	background: #fff;
	padding: 30px;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-soft);
	transition: 0.3s;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.service-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-hover);
}

.service-icon {
	width: 100px;
	height: 100px;
	object-fit: contain;
	margin: 0 auto 20px auto; /* Centered with margin bottom */
	display: block;
}

.service-card h3 {
	font-size: 1.5rem;
	margin-bottom: 10px;
	color: var(--color-primary-dark);
}

.service-card p {
	color: var(--color-text-light);
	font-size: 0.95rem;
}

/* Preparation Guide */
.preparation-guide {
	background: var(--color-bg);
	border-radius: var(--radius-card);
	padding: 60px 40px;
	margin: 100px auto 0;
	max-width: 1200px;
	text-align: center;
	border: 1px solid rgba(141, 163, 153, 0.2);
}

.preparation-guide h3 {
	font-size: 2rem;
	color: var(--color-primary-dark);
	margin-bottom: 50px;
}

.prep-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 30px;
	text-align: left;
	list-style: none;
	padding: 0;
}

@media (min-width: 600px) {
	.prep-list {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 992px) {
	.prep-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.prep-list li {
	background: #fff;
	padding: 30px;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
	font-size: 1rem;
	color: var(--color-text-main);
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.3s ease;
}

.prep-list li:hover {
	transform: translateY(-5px);
}

.prep-content h4 {
	font-size: 1.2rem;
	color: var(--color-primary-dark);
	margin-bottom: 12px;
	font-weight: 700;
}

.prep-content p {
	font-size: 0.95rem;
	color: var(--color-text-light);
	line-height: 1.6;
	margin: 0;
}

/* Detailed Service Rows */
.service-details {
	margin-top: 100px; /* Reduced from 220px because Prep Guide is above */
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.service-detailed-row {
	display: flex;
	align-items: center;
	gap: 50px;
}

/* Reverse layout for Dog section (Text left, Image right - handled in HTML order but flex-direction ensures mobile stacking correct if needed? Actually HTML order handles desktop, mobile we might want text first usually? Let's just stack naturally for now.) */
/* On mobile we usually want Image then Text or Text then Image consistently.
   If we use HTML order:
   Cat: Img -> Text
   Dog: Text -> Img
   Mobile: 
   Cat: Img top, Text bottom
   Dog: Text top, Img bottom.
   This is fine, or we can use order property to control. */

@media (max-width: 900px) {
	.service-detailed-row {
		flex-direction: column;
		text-align: center;
		gap: 30px;
	}

	.service-detailed-row.reverse {
		flex-direction: column-reverse; /* Ensure image is top on mobile for consistency? Or kept as is? User said alternating. Let's keep alternating on desktop, but maybe stack consistently on mobile? actually standard behavior is fine. */
	}
}

.service-img-wrapper {
	flex: 1;
}

.rounded-blob-img {
	width: 100%;
	max-width: 500px;
	border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; /* Another organic shape */
	box-shadow: var(--shadow-soft);
	aspect-ratio: 4/3;
	object-fit: cover;
	margin: 0 auto;
	transition: transform 0.3s;
}

.service-detailed-row:hover .rounded-blob-img {
	transform: scale(1.02) rotate(1deg);
}

.service-text-content {
	flex: 1;
}

.service-text-content h3 {
	font-size: 2rem;
	color: var(--color-primary-dark);
	margin-bottom: 20px;
}

.service-text-content p {
	font-size: 1.1rem;
	margin-bottom: 20px;
	color: var(--color-text-light);
}

.features-list-small {
	list-style: none;
	padding: 0;
}

.features-list-small li {
	margin-bottom: 10px;
	font-weight: 500;
	color: var(--color-text-main);
}

/* --- Pricing Section --- */
.pricing {
	padding: 100px 20px;
	background-color: var(--color-bg); /* Alternating background */
	position: relative;
	z-index: 1;
}

.pricing-tabs {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 40px;
}

.tab-btn {
	background: transparent;
	border: 1px solid var(--color-primary);
	color: var(--color-text-main);
	padding: 12px 24px;
	border-radius: var(--radius-pill);
	cursor: pointer;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 1rem;
	transition: all 0.3s ease;
}

.tab-btn:hover {
	background: rgba(141, 163, 153, 0.1);
}

.tab-btn.active {
	background: var(--color-primary);
	color: var(--color-white);
	box-shadow: 0 5px 15px rgba(141, 163, 153, 0.4);
}

.pricing-content {
	max-width: 800px;
	margin: 0 auto;
	background: #fdfcf8;
	padding: 40px;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-soft);
	min-height: 300px;
}

.tab-content {
	display: none;
	animation: fadeIn 0.5s ease;
}

.tab-content.active {
	display: block;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.price-table {
	width: 100%;
	border-collapse: collapse;
}

.price-table tr {
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.price-table tr:last-child {
	border-bottom: none;
}

.price-table td {
	padding: 20px 0;
	font-size: 1.1rem;
	color: var(--color-text-main);
}

.price-table td:last-child {
	text-align: right;
	font-weight: 700;
	color: var(--color-primary-dark);
}

.pricing-cta {
	text-align: center;
	margin-top: 50px;
}

.pricing-cta p {
	margin-bottom: 20px;
	color: var(--color-text-light);
	font-size: 1.1rem;
}

/* Pricing Wave Divider */
.wave-divider-pricing {
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	transform: rotate(180deg) scaleX(-1); /* Flip vertically and horizontally for variety */
}

.wave-divider-pricing svg {
	position: relative;
	display: block;
	width: calc(100% + 1.3px);
	height: 80px;
}

.wave-divider-pricing .shape-fill {
	fill: #ffffff; /* Match Gallery (white) background */
	opacity: 0.5; /* Slight transparency for "glassy" transition into images content? Or solid? let's do solid first. */
	fill: #ffffff;
	opacity: 1;
}

/* --- Gallery Section --- */
.gallery {
	padding: 100px 20px;
	background-color: #ffffff;
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	grid-auto-flow: dense; /* Helps fill gaps */
}

@media (min-width: 768px) {
	.item-large {
		grid-column: span 2;
		grid-row: span 2;
	}
	.item-tall {
		grid-row: span 2;
	}
	.item-wide {
		grid-column: span 2;
	}
}

.gallery-item {
	position: relative;
	border-radius: var(--radius-card);
	overflow: hidden;
	height: 300px; /* Default height */
	box-shadow: var(--shadow-soft);
	cursor: pointer;
}

.item-large,
.item-tall {
	height: 624px; /* 300*2 + 24 gap */
}

@media (max-width: 767px) {
	.item-large,
	.item-tall {
		height: 300px; /* Reset on mobile */
	}
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

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

.gallery-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 20px;
	transform: translateY(100%);
	transition: transform 0.4s ease;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.gallery-item:hover .gallery-overlay {
	transform: translateY(0);
}

.gallery-overlay h3 {
	font-size: 1.2rem;
	color: var(--color-text-main);
	margin-bottom: 4px;
}

.gallery-overlay p {
	font-size: 0.9rem;
	color: var(--color-text-main);
	font-weight: 500;
}

/* --- CTA Section --- */
.cta-section {
	position: relative;
	padding: 120px 20px 100px; /* More top padding for wave */
	background: url('assets/hero.png') no-repeat center center/cover;
	background-attachment: fixed; /* Parallax effect */
	color: #fff;
	text-align: center;
	overflow: hidden;
}

.cta-section::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(45, 52, 54, 0.7); /* Dark overlay */
	z-index: 0;
}

.cta-content {
	position: relative;
	z-index: 1;
	max-width: 700px;
	margin: 0 auto;
}

.cta-content h2 {
	font-size: 3rem;
	margin-bottom: 20px;
	color: #fff;
}

.cta-content p {
	font-size: 1.2rem;
	margin-bottom: 40px;
	opacity: 0.9;
}

.btn-white {
	display: inline-block;
	padding: 14px 32px;
	background: #fff;
	color: var(--color-primary-dark);
	font-weight: 600;
	border-radius: var(--radius-pill);
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-white:hover {
	background: #f0f0f0;
	transform: translateY(-2px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
	color: var(--color-primary);
}

/* --- Reviews Section --- */
.reviews {
	padding: 100px 20px 180px; /* Increased bottom padding to avoid wave overlap */
	background-color: var(--color-bg); /* Matches Pricing */
	position: relative;
	padding-top: 140px; /* Space for top wave */
}

.wave-divider-reviews-top {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
}

.wave-divider-reviews-top svg {
	position: relative;
	display: block;
	width: calc(100% + 1.3px);
	height: 70px;
}

.wave-divider-reviews-top .shape-fill {
	fill: #ffffff; /* Matches Gallery bg */
}

.reviews-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
}

.review-card {
	background: #fff;
	padding: 30px;
	border-radius: var(--radius-card);
	box-shadow: var(--shadow-soft);
	position: relative;
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
}

.review-card:hover {
	transform: translateY(-5px);
}

.stars {
	margin-bottom: 20px;
	font-size: 1.2rem;
}

.review-text {
	font-size: 1rem;
	color: var(--color-text-light);
	font-style: italic;
	margin-bottom: 30px;
	flex-grow: 1;
	line-height: 1.6;
}

.review-author {
	display: flex;
	justify-content: center; /* Center since image is gone */
	margin-top: auto;
	text-align: center; /* Ensure text block is centered */
}

/* Image styles removed */

.review-author h4 {
	font-size: 1rem;
	color: var(--color-text-main);
	margin-bottom: 2px;
}

.review-author span {
	font-size: 0.85rem;
	color: var(--color-primary);
	font-weight: 500;
}

/* CTA Wave Divider (Top) */
.wave-divider-cta-top {
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	z-index: 2;
}

.wave-divider-cta-top svg {
	position: relative;
	display: block;
	width: calc(100% + 1.3px);
	height: 60px;
}

.wave-divider-cta-top .shape-fill {
	fill: #ffffff; /* Transitions from Gallery (White) */
}

/* --- Footer --- */
.footer {
	background: var(--color-text-main);
	color: #fff;
	padding: 40px 20px 20px;
	border-radius: 0;
	margin-top: 0;
}

.footer-container {
	display: grid;
	grid-template-columns: 1fr;
	gap: 40px;
	margin-bottom: 60px;
}

/* --- Scroll Animations --- */
.animate-on-scroll {
	opacity: 0;
	transition: all 0.8s ease-out;
	will-change: opacity, transform;
}

.fade-up {
	transform: translateY(30px);
}

.slide-left {
	transform: translateX(-50px);
}

.slide-right {
	transform: translateX(50px);
}

.animate-active {
	opacity: 1;
	transform: translate(0, 0);
}

.animate-finished {
	transition: all 0.3s ease !important; /* Restore normal interaction speed */
}

@media (min-width: 768px) {
	.footer-container {
		grid-template-columns: 1.5fr 1fr 1fr;
	}
}

.footer-logo {
	width: 120px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: white;
	padding: 5px;
}

.footer h4 {
	color: var(--color-primary);
	margin-bottom: 20px;
	font-size: 1.2rem;
}

.footer p {
	color: #b2bec3;
	margin-bottom: 10px;
}

.footer-bottom {
	text-align: center;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-top: 20px;
	color: #636e72;
	font-size: 0.85rem;
}

.footer-socials {
	display: flex;
	gap: 15px;
	margin-top: 20px;
}

.footer-socials a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	transition: all 0.3s ease;
}

.footer-socials a:hover {
	background: var(--color-primary);
	transform: translateY(-3px);
}