:root {
            --primary-pink: #ffcce0;
            --accent-pink: #ff69b4;
            --soft-white: #ffffff;
            --text-gray: #333;
        }

        body {
			margin: 0;
			padding-top: 80px; /* Space for the sticky header */
			font-family: 'Poppins', sans-serif;
			background-color: var(--soft-white);
			color: var(--text-gray);
			overflow-x: hidden; /* Only hide horizontal, allow vertical */
			width: 100%;
        }

        /* Pink Curl Decoration */
        .curl-bg {
            position: absolute;
            top: 0;
            right: 0;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle at top right, var(--primary-pink), transparent 70%);
            border-bottom-left-radius: 100% 50%;
            z-index: -1;
        }

/* Navbar */
		nav {
			position: fixed; /* Keeps it at the top */
			top: 0;
			left: 0;
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 15px 10%; /* Slightly thinner for a sleek look */
			
			/* Glassmorphism Effect */
			background: rgba(255, 255, 255, 0.8); /* See-through white */
			backdrop-filter: blur(10px); /* Blurs the content behind it */
			-webkit-backdrop-filter: blur(10px);
			
			z-index: 1500; /* Stays above everything except the drawer/modal */
			box-sizing: border-box;
			border-bottom: 1px solid rgba(255, 183, 197, 0.3); /* Thin pink bottom line */
			transition: 0.3s;
		}

		/* Add a soft shadow to make it pop */
		nav.scrolled {
			box-shadow: 0 5px 20px rgba(255, 105, 180, 0.1);
			padding: 10px 10%; /* Gets even thinner when you scroll */
		}

        .logo {
            font-size: 24px;
            font-weight: bold;
            color: var(--accent-pink);
            letter-spacing: 2px;
        }

        .menu-btn {
            background: var(--accent-pink);
            color: white;
            padding: 10px 25px;
            border-radius: 25px;
            border: none;
            cursor: pointer;
            font-weight: bold;
            transition: 0.3s;
        }

        .menu-btn:hover {
            background: #ff1493;
            transform: translateY(-2px);
        }

/* Promo Banner */
		.promo-section {
			padding: 80px 10%;
			background: #fff;
			display: flex;
			justify-content: center;
		}
		
		.promo-content {
			display: flex; 
			align-items: center;
			justify-content: center;
			width: 100%;
			gap: 40px; /* Space between text and drink */
		}


		.promo-container {
			position: relative;
			width: 100%;
			max-width: 1100px;
			background: linear-gradient(135deg, #ffdde1 0%, #ee9ca7 100%);
			border-radius: 50px;
			padding: 60px;
			display: flex;
			align-items: center;
			overflow: hidden; /* Keeps the shine effect inside */
			box-shadow: 0 25px 50px rgba(238, 156, 167, 0.4);
		}

		/* Floating BOGO Badge */
		.promo-badge {
			position: absolute;
			top: -10px;
			right: 50px;
			background: #ff1493;
			color: white;
			width: 120px;
			height: 120px;
			border-radius: 50%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-weight: 800;
			font-size: 1.2rem;
			transform: rotate(15deg);
			box-shadow: 0 10px 20px rgba(0,0,0,0.1);
			z-index: 10;
			animation: pulseBadge 2s infinite;
		}

		@keyframes pulseBadge {
			0% { transform: rotate(15deg) scale(1); }
			50% { transform: rotate(10deg) scale(1.1); }
			100% { transform: rotate(15deg) scale(1); }
		}

		/* Text Side Styling */
		.promo-text-side {
			flex: 0 1 auto;
			max-width: 450px;
			text-align: left;
		}

		.limited-tag {
			background: rgba(255, 255, 255, 0.3);
			backdrop-filter: blur(5px);
			display: inline-block;
			padding: 8px 20px;
			border-radius: 30px;
			font-weight: 600;
			color: #fff;
			letter-spacing: 2px;
			margin-bottom: 20px;
		}

		.promo-title {
			font-family: 'Playfair Display', serif;
			font-size: 5rem;
			line-height: 0.9;
			color: white;
			margin: 0 0 20px;
			text-shadow: 3px 3px 0px rgba(255, 20, 147, 0.3);
		}

		.bloom-text {
			font-style: italic;
			color: #fff;
			font-weight: 400;
		}

		.promo-description {
			color: white;
			font-size: 1.2rem;
			margin-bottom: 30px;
			max-width: 400px;
			line-height: 1.6;
		}

		.claim-btn {
			background: white;
			color: #ee9ca7;
			border: none;
			padding: 15px 40px;
			border-radius: 50px;
			font-weight: 800;
			font-size: 1.1rem;
			cursor: pointer;
			transition: 0.3s;
			box-shadow: 0 10px 20px rgba(0,0,0,0.1);
		}

		.claim-btn:hover {
			transform: scale(1.05);
			background: #ff1493;
			color: white;
		}

		.expiry {
			display: block;
			margin-top: 15px;
			color: rgba(255, 255, 255, 0.8);
			font-size: 0.8rem;
			font-style: italic;
		}

		/* Image Side & Shine */
		.promo-image-side {
			flex: 0 1 auto;
		}
		
		.promo-shake-img {
			width: 320px;
			height: auto;
			filter: drop-shadow(0 20px 30px rgba(0,0,0,0.2));
			animation: floatShake 4s ease-in-out infinite;
		}

		@keyframes floatShake {
			0%, 100% { transform: translateY(0) rotate(0deg); }
			50% { transform: translateY(-20px) rotate(5deg); }
		}

		/* Shine Background Animation */
		.shine-effect {
			position: absolute;
			top: 0; left: -100%;
			width: 50%; height: 100%;
			background: linear-gradient(to right, transparent, rgba(255,255,255,0.4), transparent);
			transform: skewX(-25deg);
			animation: shine 5s infinite;
		}

		@keyframes shine {
			0% { left: -100%; }
			20% { left: 150%; }
			100% { left: 150%; }
		}

		/* Sparkles */
		.sparkle {
			position: absolute;
			font-size: 2rem;
			animation: twinkle 2s infinite alternate;
		}
		.s1 { top: 10%; right: 10%; }
		.s2 { bottom: 10%; left: 0%; animation-delay: 0.5s; }
		.s3 { top: 40%; left: -20%; animation-delay: 1s; }

		@keyframes twinkle {
			from { opacity: 0.3; transform: scale(0.8); }
			to { opacity: 1; transform: scale(1.2); }
		}

		/* Responsive */
		@media (max-width: 992px) {
			.promo-content {
				flex-direction: column; /* Stacks on small screens */
				text-align: center;
			}
			.promo-text-side {
				text-align: center;
			}
		}

/* Featured Drinks Section */
		.featured-section {
			padding: 100px 10%;
			text-align: center;
			background-color: #fff;
		}

		.featured-grid {
			display: grid;
			grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
			gap: 40px;
			margin-top: 50px;
		}

		.drink-card {
			background: white;
			padding: 40px 20px;
			border-radius: 30px;
			position: relative;
			transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			border: 1px solid #fff0f5;
			box-shadow: 0 10px 30px rgba(255, 183, 197, 0.2);
			overflow: visible; /* Allows the drink to "pop out" of the top */
		}

		/* The PNG Container & Glow */
		.drink-img-container {
			position: relative;
			height: 200px;
			margin-bottom: 20px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.glow-bg {
			position: absolute;
			width: 120px;
			height: 120px;
			background: var(--primary-pink);
			filter: blur(30px);
			border-radius: 50%;
			opacity: 0.5;
			transition: 0.4s;
			z-index: 1;
		}

		.drink-png {
			width: 180px; /* Adjust based on your PNG size */
			height: auto;
			position: relative;
			z-index: 2;
			transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
		}

		/* Hover Animations */
		.drink-card:hover {
			transform: translateY(-10px);
			border-color: var(--accent-pink);
			box-shadow: 0 20px 40px rgba(255, 105, 180, 0.2);
		}

		.drink-card:hover .drink-png {
			transform: translateY(-30px) scale(1.1); /* The "Jump" effect */
		}

		.drink-card:hover .glow-bg {
			width: 150px;
			height: 150px;
			opacity: 0.8;
			background: var(--accent-pink);
		}

		/* Text and Price */
		.drink-card h3 {
			font-family: 'Playfair Display', serif;
			font-size: 1.6rem;
			color: #333;
			margin: 15px 0 10px;
		}

		.drink-card p {
			font-size: 0.95rem;
			color: #777;
			margin-bottom: 20px;
		}

		.price-tag {
			display: inline-block;
			background: var(--primary-pink);
			color: var(--accent-pink);
			font-weight: bold;
			padding: 8px 20px;
			border-radius: 20px;
			font-size: 1.1rem;
			transition: 0.3s;
		}

		.drink-card:hover .price-tag {
			background: var(--accent-pink);
			color: white;
		}

/* Newsletter */
        .newsletter {
            background: var(--primary-pink);
            padding: 60px 10%;
            text-align: center;
            margin-top: 50px;
            position: relative;
        }

        .newsletter h2 { color: white; }

        .newsletter input {
            padding: 15px 25px;
            border-radius: 30px;
            border: none;
            width: 300px;
            margin-right: 10px;
        }

        .newsletter button {
            padding: 15px 35px;
            border-radius: 30px;
            border: none;
            background: var(--accent-pink);
            color: white;
            font-weight: bold;
            cursor: pointer;
        }

/* Full Menu Popup */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.95);
            overflow-y: auto;
            text-align: center;
            padding-top: 50px;
        }

        .modal-content {
            background: white;
            margin: auto;
            padding: 40px;
            width: 80%;
            max-width: 600px;
            border-radius: 20px;
            border: 2px solid var(--primary-pink);
        }

        .close-modal {
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            color: var(--accent-pink);
        }

        .menu-list {
            list-style: none;
            padding: 0;
            font-size: 22px;
            line-height: 2;
        }

        .menu-list li:hover { color: var(--accent-pink); }
		
/* Hero Banner */
		:root {
			--hero-white: #ffffff;
			--pink-accent: #ffb7c5;
			--pink-text: #ff69b4;
			--soft-gray: #555555;
		}

		.hero-container {
			position: relative;
			width: 100%;
			min-height: 80vh;
			background-color: var(--hero-white);
			display: flex;
			align-items: center;
			padding: 0 10%;
			overflow: hidden; /* Keeps the curl lines contained */
			font-family: 'Poppins', sans-serif;
		}

		/* Pink Curl Lines (Background Decoration) */
		.hero-curls {
			position: absolute;
			top: 0;
			right: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
			pointer-events: none;
			opacity: 0.6;
		}

		.hero-content {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			position: relative;
			z-index: 2; /* Sits above the pink lines */
		}

		/* Left Side: Text */
		.hero-text {
			flex: 1;
			max-width: 550px;
		}

		.hero-text h1 {
			font-family: 'Playfair Display', serif;
			font-size: 5rem;
			line-height: 1.1;
			color: #333;
			margin-bottom: 20px;
		}

		.hero-text p {
			font-size: 1.2rem;
			color: var(--soft-gray);
			margin-bottom: 35px;
			line-height: 1.6;
		}

		.hero-btn {
			background-color: var(--pink-text);
			color: white;
			padding: 18px 40px;
			border-radius: 50px;
			text-decoration: none;
			font-weight: 600;
			letter-spacing: 1px;
			transition: 0.3s;
			border: none;
			cursor: pointer;
			box-shadow: 0 10px 20px rgba(255, 105, 180, 0.2);
		}

		.hero-btn:hover {
			background-color: #ff4fa3;
			transform: translateY(-3px);
			box-shadow: 0 15px 25px rgba(255, 105, 180, 0.3);
		}

		/* Right Side: Image Grow & Glow */
		.hero-image-wrapper {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.hero-milkshake {
			width: 100%;
			max-width: 480px;
			height: auto;
			transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
			cursor: pointer;
			/* Start with no glow */
			filter: drop-shadow(0 0 0px transparent);
		}

		/* THE GROW & GLOW EFFECT */
		.hero-milkshake:hover {
			transform: scale(1.1) rotate(1deg);
			filter: drop-shadow(0 0 30px var(--pink-accent));
		}

		/* Mobile Responsive */
		@media (max-width: 992px) {
			.hero-container { padding: 80px 5%; text-align: center; }
			.hero-content { flex-direction: column; }
			.hero-text h1 { font-size: 3.5rem; }
			.hero-image-wrapper { margin-top: 50px; }
		}

/* Hamburger Styling */
			.hamburger {
				cursor: pointer;
				display: block;
			}
			.hamburger div {
				width: 30px;
				height: 3px;
				background-color: var(--accent-pink);
				margin: 6px 0;
				transition: 0.4s;
			}

		
/* Find Us Section */		
		.map-section {
			padding: 80px 10%;
			text-align: center;
			background-color: #fff;
		}

		.map-container-wrapper {
			max-width: 700px;         /* This makes it smaller and more centered */
			margin: 40px auto 0;      /* Centers it horizontally */
			border-radius: 40px;      /* Extra rounded corners for a soft look */
			overflow: hidden;         /* Clips the map to the rounded corners */
			border: 10px solid white; /* Creates a 'frame' effect */
			box-shadow: 0 20px 40px rgba(255, 183, 197, 0.4); /* Soft pink glow shadow */
			outline: 2px solid var(--primary-pink); /* Thin pink outline around the white frame */
		}

		/* Optional: Make the map slightly greyscale to match your theme better */
		.map-container-wrapper iframe {
			filter: saturate(0.8) contrast(1.1);
		}
		
/* Social Media Section */
	.oa-social-section {
		position: relative;
		padding: 100px 10%;
		text-align: center;
		background: linear-gradient(180deg, #ffffff 0%, #fff0f5 100%);
		overflow: hidden;
	}

	.sweet-tagline {
		font-family: 'Playfair Display', serif;
		color: var(--accent-pink);
		font-style: italic;
		font-size: 1.5rem;
		margin-bottom: 0;
	}

	.oa-title {
		font-size: 3.5rem;
		font-weight: 800;
		letter-spacing: -2px;
		margin-top: 10px;
		color: #333;
	}

	.pink-glow {
		color: var(--accent-pink);
		text-shadow: 0 0 15px rgba(255, 105, 180, 0.4);
	}

	.oa-subtitle {
		font-size: 1.1rem;
		color: #888;
		margin-bottom: 50px;
	}

	/* The Floating Bubbles */
	.bubble-container {
		display: flex;
		justify-content: center;
		gap: 40px;
		flex-wrap: wrap;
	}

	.social-bubble {
		position: relative;
		width: 100px;
		height: 100px;
		background: white;
		border-radius: 50%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-decoration: none;
		color: var(--accent-pink);
		font-size: 2rem;
		box-shadow: 0 10px 25px rgba(255, 183, 197, 0.5);
		transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
		animation: float 3s ease-in-out infinite;
	}

	/* Individual animation delays so they don't move together */
	.social-bubble.instagram { animation-delay: 0s; }
	.social-bubble.tiktok { animation-delay: 0.5s; }
	.social-bubble.facebook { animation-delay: 1s; }

	@keyframes float {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-20px); }
	}

	/* Hover Effect - The "POP" */
	.social-bubble:hover {
		transform: scale(1.3) rotate(10deg);
		background: var(--accent-pink);
		color: white;
		box-shadow: 0 20px 40px rgba(255, 105, 180, 0.6);
	}

	.bubble-label {
		font-size: 0.8rem;
		font-weight: 600;
		margin-top: 5px;
		opacity: 0;
		transition: 0.3s;
	}

	.social-bubble:hover .bubble-label {
		opacity: 1;
	}

	/* Decorative Sprinkles */
	.sprinkle {
		position: absolute;
		width: 15px;
		height: 15px;
		background: var(--primary-pink);
		border-radius: 50%;
		opacity: 0.6;
	}
	.sprinkle:nth-child(1) { top: 10%; left: 15%; width: 30px; height: 30px; background: #ffe4e1; }
	.sprinkle:nth-child(2) { bottom: 20%; right: 10%; background: #ffb7c5; }
	.sprinkle:nth-child(3) { top: 40%; right: 20%; width: 20px; height: 20px; }

/* About Section Styling */
		.about-section {
			padding: 100px 10%;
			background-color: #fff;
			overflow: hidden;
		}

		.about-container {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 60px;
			max-width: 1100px;
			margin: 0 auto;
		}

		/* The Postcard Effect */
		.about-image-wrapper {
			position: relative;
			flex: 1;
		}

		.postcard-frame {
			position: relative;
			z-index: 2;
			background: white;
			padding: 15px 15px 60px 15px; /* Bottom padding makes it look like a Polaroid */
			border-radius: 10px;
			box-shadow: 0 15px 45px rgba(255, 183, 197, 0.4);
			transform: rotate(-3deg); /* The "OA" tilt */
			transition: 0.5s ease;
		}

		.postcard-frame:hover {
			transform: rotate(0deg) scale(1.02);
		}

		.resto-img {
			width: 100%;
			height: 400px;
			object-fit: cover; /* Keeps image from stretching */
			border-radius: 5px;
		}

		/* Floating "Est" Badge */
		.est-badge {
			position: absolute;
			bottom: 15px;
			right: 20px;
			font-family: 'Playfair Display', serif;
			font-size: 1.2rem;
			color: var(--accent-pink);
			font-weight: bold;
		}

		/* Decorative Pink Blob in Background */
		.blob-bg {
			position: absolute;
			top: -20px;
			left: -20px;
			width: 100%;
			height: 100%;
			background: var(--primary-pink);
			border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
			z-index: 1;
			opacity: 0.3;
		}

		/* Story Text Styling */
		.about-text {
			flex: 1;
		}

		.mini-title {
			color: var(--accent-pink);
			font-family: 'Poppins', sans-serif;
			text-transform: uppercase;
			letter-spacing: 3px;
			font-size: 0.9rem;
			margin-bottom: 10px;
		}

		.story-title {
			font-family: 'Playfair Display', serif;
			font-size: 3rem;
			line-height: 1;
			margin-bottom: 25px;
			color: #333;
		}

		.highlight {
			color: var(--accent-pink);
			position: relative;
		}

		.about-text p {
			font-size: 1.1rem;
			line-height: 1.8;
			color: #555;
			margin-bottom: 20px;
		}

		/* Responsive for Mobile */
		@media (max-width: 900px) {
			.about-container {
				flex-direction: column;
				text-align: center;
			}
			.postcard-frame {
				transform: rotate(0);
			}
		}
	
/* Menu Card Styles */
		.menu-card {
			max-width: 800px; /* Wider for two columns */
			padding: 50px;
			background: #fff;
			border-radius: 40px;
			border: 3px solid var(--primary-pink);
			box-shadow: 0 30px 60px rgba(255, 105, 180, 0.2);
			background-image: radial-gradient(var(--primary-pink) 1px, transparent 1px);
			background-size: 20px 20px; /* Subtle polka dot background */
		}

		.menu-header {
			text-align: center;
			margin-bottom: 40px;
		}

		.menu-title {
			font-family: 'Playfair Display', serif;
			font-size: 3rem;
			color: var(--accent-pink);
			margin: 0;
		}

		.menu-sections {
			display: flex;
			gap: 40px;
			justify-content: space-between;
		}

		.menu-column {
			flex: 1;
		}

		.category-title {
			font-family: 'Poppins', sans-serif;
			color: #333;
			border-bottom: 2px dashed var(--primary-pink);
			padding-bottom: 10px;
			margin-bottom: 20px;
			font-size: 1.4rem;
		}

		.menu-list {
			list-style: none;
			padding: 0;
		}

		.menu-list li {
			margin-bottom: 15px;
			transition: 0.3s;
		}

		.item-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.item-name {
			font-weight: 600;
			font-size: 1.1rem;
			color: #444;
		}

		.item-price {
			font-family: 'Playfair Display', serif;
			font-weight: bold;
			color: var(--accent-pink);
		}

		/* Badges/Tags */
		.tag {
			font-size: 0.6rem;
			padding: 2px 8px;
			border-radius: 10px;
			margin-left: 5px;
			vertical-align: middle;
			text-transform: uppercase;
			color: white;
		}
		.tag.new { background: #ff69b4; }
		.tag.best { background: #ffb7c5; }

		.menu-footer {
			text-align: center;
			margin-top: 40px;
			font-style: italic;
			color: #888;
		}

		/* Make it stack on small phones */
		@media (max-width: 600px) {
			.menu-sections {
				flex-direction: column;
			}
			.menu-card {
				padding: 20px;
			}
		}

/* Side Menu Overlay Styling */
			.side-nav {
				height: 100vh;     
				width: 0;          
				position: fixed;
				z-index: 3000;     
				top: 0;
				right: 0;
				background-color: #fffafb;
				background-image: radial-gradient(var(--primary-pink) 0.5px, transparent 0.5px);
				background-size: 15px 15px;
				
				overflow-x: hidden; 
				overflow-y: auto;  
				display: block;    
				
				transition: 0.5s cubic-bezier(0.77, 0, 0.175, 1);
				box-shadow: -10px 0 30px rgba(255, 183, 197, 0.3);
				box-sizing: border-box;
			}

			.side-nav a {
				padding: 15px 30px;
				text-decoration: none;
				font-size: 20px;
				color: var(--text-gray);
				display: block;
				transition: 0.3s;
			}

			/* The close button needs to stay on top */
			.side-nav .closebtn {
				position: absolute;
				top: 15px;
				right: 25px;
				font-size: 40px;
				color: var(--accent-pink);
				z-index: 3001;
			}

			/* Header inside drawer */
			.nav-header {
				text-align: center;
				padding: 60px 20px 20px; /* More top padding to clear close button */
				border-bottom: 2px dashed var(--primary-pink);
				margin: 0 20px 20px;
			}

			.nav-avatar {
				width: 60px;
				height: 60px;
				background: var(--primary-pink);
				border-radius: 50%;
				margin: 0 auto 10px;
				font-size: 30px;
				line-height: 60px;
			}

			/* Links sliding effect */
			.nav-links a {
				padding: 12px 30px;
				font-weight: 600;
			}

			.nav-links a:hover {
				color: var(--accent-pink);
				background: rgba(255, 204, 224, 0.3);
				padding-left: 40px;
			}

			.nav-info {
				padding: 20px 30px;
				font-size: 0.9rem;
				color: #666;
			}

			.nav-special {
				background: var(--accent-pink);
				color: white;
				margin: 20px 20px 80px 20px; /* Extra bottom margin so it's not cropped */
				padding: 15px;
				border-radius: 20px;
				text-align: center;
			}

		/* Close Button Position */
		.side-nav .closebtn {
			position: absolute;
			top: 10px;
			right: 25px;
			font-size: 36px;
			color: var(--accent-pink);
			text-decoration: none;
		}
		
/* Footer Styling */
		.footer-section {
			position: relative;
			background: var(--accent-pink);
			color: white;
			padding-bottom: 40px;
			margin-top: 100px; /* Space for the wave */
		}

		/* The SVG Wave */
		.footer-wave {
			position: absolute;
			top: -110px;
			left: 0;
			width: 100%;
			overflow: hidden;
			line-height: 0;
		}

		.footer-wave svg {
			position: relative;
			display: block;
			width: calc(150% + 1.3px); /* Makes it slightly wider for extra curve */
			height: 120px;
		}

		.footer-wave .shape-fill {
			fill: var(--accent-pink);
		}

		.footer-container {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 20px 10% 50px;
			gap: 40px;
		}

		.footer-col {
			flex: 1;
			min-width: 250px;
		}

		.footer-logo {
			font-family: 'Playfair Display', serif;
			font-size: 2rem;
			margin-bottom: 15px;
			letter-spacing: 2px;
		}

		.footer-tagline {
			font-size: 0.95rem;
			opacity: 0.9;
			line-height: 1.6;
		}

		.footer-col h3 {
			font-family: 'Playfair Display', serif;
			font-size: 1.5rem;
			margin-bottom: 20px;
			position: relative;
		}

		/* Tiny heart under titles */
		.footer-col h3::after {
			content: '💖';
			font-size: 0.8rem;
			position: absolute;
			bottom: -15px;
			left: 0;
		}

		.footer-col ul {
			list-style: none;
			padding: 0;
		}

		.footer-col ul li {
			margin-bottom: 12px;
		}

		.footer-col ul li a {
			color: white;
			text-decoration: none;
			transition: 0.3s;
			opacity: 0.8;
		}

		.footer-col ul li a:hover {
			opacity: 1;
			padding-left: 10px;
			color: var(--primary-pink);
		}

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

		.footer-socials a {
			color: var(--accent-pink);
			background: white;
			width: 35px;
			height: 35px;
			border-radius: 50%;
			display: grid;
			place-items: center;
			text-decoration: none;
			transition: 0.3s;
		}

		.footer-socials a:hover {
			transform: scale(1.2) rotate(10deg);
			background: var(--primary-pink);
		}

		.footer-bottom {
			text-align: center;
			border-top: 1px solid rgba(255, 255, 255, 0.2);
			padding-top: 30px;
			margin: 0 10%;
			font-size: 0.85rem;
			opacity: 0.7;
		}

		/* Mobile Responsive */
		@media (max-width: 768px) {
			.footer-container {
				flex-direction: column;
				text-align: center;
			}
			.footer-col h3::after {
				left: 50%;
				transform: translateX(-50%);
			}
			.footer-socials {
				justify-content: center;
			}
		}
		
/* Delivery Section Styles */
		.delivery-section { padding: 60px 10%; background: #fff; }
		.delivery-logos { display: flex; justify-content: center; gap: 30px; margin-top: 30px; flex-wrap: wrap; }

		.delivery-card {
			background: white;
			padding: 20px 40px;
			border-radius: 25px;
			text-decoration: none;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 10px;
			border: 2px solid var(--primary-pink);
			transition: 0.3s;
		}

		.delivery-card img { height: 30px; width: auto; }
		.delivery-card span { font-weight: 600; color: #555; font-size: 0.9rem; }
		.delivery-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(255, 105, 180, 0.2); }

		/* Sprinkle Animation Styles */
		.sprinkle-p {
			position: fixed;
			pointer-events: none;
			z-index: 9999;
			border-radius: 50%;
			animation: flyOut 0.8s ease-out forwards;
		}

		@keyframes flyOut {
			0% { transform: translate(0, 0) scale(1); opacity: 1; }
			100% { transform: translate(var(--x), var(--y)) scale(0); opacity: 0; }
		}

		/* Fix for Smooth Scroll jumping too far (due to sticky header) */
		section { scroll-margin-top: 90px; }
		html { scroll-behavior: smooth; }