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

html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Roboto', sans-serif;
	color: #334;
	line-height: 1.6;
	padding-top: 80px; /* Adjust based on navbar height */
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Cinzel', serif;
	font-weight: 600;
}

/* Adjust font sizes if needed */
h1 { font-size: 2.5em; }
h2 { font-size: 2em; }
h3 { font-size: 1.75em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1.25em; }
h6 { font-size: 1em; }

a {
	text-decoration: none;
	color: inherit;
}

.container {
	width: 90%;
	max-width: 1200px;
	margin: 0 auto;
}

/* Navbar Styles */
.navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	z-index: 3;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 20px;
	border-bottom: 1px solid #eaeaea;
}

.navbar .logo img {
	height: 100px;
	width: auto;
}

/* Mobile Menu Toggle */
.menu-toggle {
	display: none;
	flex-direction: column;
	cursor: pointer;
}

.menu-toggle .bar {
	width: 25px;
	height: 3px;
	background-color: #333;
	margin: 4px 0;
	transition: 0.3s;
}

/* Navigation Links */
.nav-links {
	list-style: none;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
}

.nav-links li {
	position: relative;
	margin-left: 20px;
}

.nav-links a {
	font-size: 16px;
	color: #333;
	text-decoration: none;
}

.nav-links a:hover {
	color: #007BFF;
}

/* Dropdown Menu Styles */
.dropdown .dropbtn {
	display: inline-block;
	padding: 14px 16px;
	color: #333;
	font-size: 16px;
	background: none;
	border: none;
	cursor: pointer;
}

.dropdown .dropbtn::after {
	content: '\25BC'; /* Down arrow */
	margin-left: 5px;
}

.dropdown.active .dropbtn::after {
	content: '\25B2'; /* Up arrow */
}

.dropdown .dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 200px;
	box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
	z-index: 1;
	right: 0;
	list-style: none;
	margin: 0;
	padding: 0;
}

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

.dropdown .dropdown-content li a {
	color: #333;
	padding: 12px 16px;
	text-decoration: none;
	display: block;
}

.dropdown .dropdown-content li a:hover,
.dropdown .dropdown-content li a:focus {
	background-color: #ddd;
}

/* Cart Icon Styles */
.cart-icon {
	position: relative;
}

.cart-icon button {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	color: #333;
}

.cart-icon button:focus {
	outline: none;
}

.cart-icon svg {
	width: 24px;
	height: 24px;
	margin-right: 5px;
	color: #333;
	transition: color 0.3s ease;
}

.cart-icon button:hover svg,
.cart-icon button:hover {
	color: #007BFF;
}

.cart-text {
	display: inline-block;
}

/* Mobile Menu Styles */
@media (max-width: 768px) {
	.navbar {
		justify-content: space-between;
		padding: 10px 20px;
	}

	/* Display menu toggle */
	.menu-toggle {
		display: flex;
	}

	/* Hide nav-links by default */
	.nav-links {
		display: none;
		flex-direction: column;
		width: 100%;
		position: absolute;
		top: 100%;
		left: 0;
		background-color: #fff;
		padding: 0 20px;
		border-bottom: 1px solid #eaeaea;
	}

	/* Show nav-links when active */
	.nav-links.active {
		display: flex;
	}

	.nav-links li {
		margin: 15px 0;
		display: block;
	}

	/* Adjust dropdown in mobile view */
	.dropdown .dropdown-content {
		position: static;
		background-color: inherit;
		box-shadow: none;
	}

	.dropdown .dropdown-content li a {
		padding-left: 20px; /* Indent dropdown items */
	}
}

/* Additional Styles */
/* ... Include other styles from your code that are relevant ... */

.bar {
	width: 25px;
	height: 3px;
	background-color: #333;
	margin: 4px 0;
	transition: 0.3s;
}

/* Hero Section */
.hero {
	background-image: url('images/hallowvale/llhero.jpg?height=600&width=1200');
	background-size: cover;
	background-position: center;
	height: 80vh;
	position: relative;
	color: #fff;
}

.hero::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1; /* Add this line */
}

.hero-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
	width: 90%;
	z-index: 2; /* Add this line */
}

.hero h1 {
	font-size: 48px;
	margin-bottom: 20px;
}

.hero p {
	font-size: 24px;
	margin-bottom: 30px;
}

.button-container {
	display: flex;
	justify-content: space-between; /* Ensures equal spacing */
	gap: 20px; /* Optional: Adds space between buttons */
	max-width: 600px; /* Adjust as needed */
	margin: 0 auto; /* Centers the buttons */
}

.btn {
	display: inline-block;
	padding: 12px 30px;
	background-color: #007BFF;
	color: #fff;
	border-radius: 50px;
	font-size: 16px;
	transition: background-color 0.3s ease;
}

.btn:hover {
	background-color: #0056b3;
}

/* Sections */
section {
	padding: 60px 0;
	scroll-margin-top: 80px; /* Prevents headers from being cut off */
}

section h2 {
	text-align: center;
	font-size: 36px;
	margin-bottom: 40px;
}

section p {
	text-align: center;
	font-size: 18px;
	margin-bottom: 20px;
}

/* Story Universes */
.universes-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 40px;
}

.universe-card {
	background-color: #f9f9f9;
	border-radius: 8px;
	overflow: hidden;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.universe-card img {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.universe-card h3 {
	font-size: 24px;
	margin: 20px 0 10px;
}

.universe-card p {
	padding: 0 20px;
	margin-bottom: 20px;
}

.universe-card .btn {
	margin-bottom: 20px;
}

/* Product Grid Styles */
.product-grid {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 20px 0;
}

.product-grid img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.3s ease;
}

.product-grid img:hover {
	transform: scale(1.05);
}

/* Mailing List */
.newsletter-form {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

.newsletter-form input[type="email"] {
	padding: 12px;
	width: 300px;
	border: 1px solid #ccc;
	font-size: 16px;
	outline: none;
}

.newsletter-form input[type="lastname"] {
	padding: 12px;
	width: 200px;
	border: 1px solid #ccc;
	font-size: 16px;
	outline: none;
}

.newsletter-form input[type="firstname"] {
	padding: 12px;
	width: 200px;
	border: 1px solid #ccc;
	border-radius: 50px 0 0 50px;
	font-size: 16px;
	outline: none;
}

.newsletter-form button {
	padding: 12px 20px;
	border: none;
	background-color: #28A745;
	color: #fff;
	font-size: 16px;
	border-radius: 0 50px 50px 0;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.newsletter-form button:hover {
	background-color: #218838;
}

/* Footer */
footer {
	background-color: #333;
	color: #fff;
	padding: 20px 0;
}

footer p {
	text-align: center;
	font-size: 14px;
}

/* Responsive Styles */
@media (max-width: 768px) {
	/* Adjust navbar to align logo and menu toggle */
	.navbar {
		justify-content: space-between;
		padding: 10px 20px;
	}

	/* Display menu toggle */
	.menu-toggle {
		display: flex;
	}

	/* Hide nav-links by default */
	.nav-links {
		display: none;
		flex-direction: column;
		width: 100%;
		position: absolute;
		top: 100%;
		right: 0;
		background-color: #fff;
		padding: 0 20px;
		border-bottom: 1px solid #eaeaea;
	}

	/* Show nav-links when active */
	.nav-links.active {
		display: flex;
	}

	.nav-links li {
		margin: 15px 0;
	}

	.hero h1 {
		font-size: 36px;
	}

	.hero p {
		font-size: 18px;
	}

	.newsletter-form {
		flex-direction: column;
	}

	.newsletter-form input[type="email"] {
		border-radius: 50px;
		margin-bottom: 10px;
	}

	.newsletter-form button {
		border-radius: 50px;
	}
}

/* Our Story Section */
#our-story {
	position: relative; /* Establishes a positioning context */
	padding: 60px 0;
	scroll-margin-top: 80px; /* Adjust if you have a fixed navbar */
	background-image: url('images/ourstorybg.webp'); /* Replace with your image path */
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	color: #fff; /* Sets text color to white for contrast */
}

#our-story::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.8); /* Semi-transparent overlay */
	z-index: 1; /* Places overlay below content */
}

#our-story .container {
	position: relative;
	z-index: 2; /* Ensures content is above the overlay */
}

#our-story h2,
#our-story h3,
#our-story p,
#our-story .signature {
	color: #fff; /* Ensures all text is white */
}

#our-story h2 {
	font-size: 36px;
	text-align: center;
	margin-bottom: 40px;
}

#our-story h3 {
	font-size: 28px;
	text-align: center;
	margin-bottom: 30px;
}

#our-story p {
	font-size: 18px;
	line-height: 1.6;
	margin-bottom: 20px;
	text-align: center;
}

#our-story .signature {
	font-style: italic;
	text-align: center;
	margin-top: 40px;
}

/* Optional: Add text shadow for better readability */
#our-story h2,
#our-story h3,
#our-story p,
#our-story .signature {
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}

/* Responsive Styles */
@media (max-width: 768px) {
	#our-story h2 {
		font-size: 28px;
	}

	#our-story h3 {
		font-size: 24px;
	}

	#our-story p {
		font-size: 16px;
	}
}

/* Existing styles remain unchanged */

/* Tailstar Universe */
.tailstar-intro {
	background-image: url('images/Glitteron.webp'); /* Replace with your image path */
}

/* Hallowvale Universe */
.hallowvale-intro {
	background-image: url('images/Hallowvale.webp'); /* Replace with your image path */
}

/* Everlight Hollow Universe */
.everlight-intro {
	background-image: url('images/everlight-hollow/everlight-main.webp'); /* Replace with your image path */
}

/* Tropica Avia Universe */
.tropica-intro {
	background-image: url('images/TropicaAvia.webp'); /* Replace with your image path */
}

/* Universe Introduction Section */
.universe-intro {
	position: relative; /* Establish positioning context */
	padding: 100px 0; /* Increase padding for visual impact */
	text-align: center;
	color: #fff; /* Set text color to white */
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

.universe-intro .overlay {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */
	z-index: 1;
}

.universe-intro .container {
	position: relative;
	z-index: 2; /* Ensure content is above overlay */
}

.universe-intro h1 {
	font-size: 48px;
	margin-bottom: 20px;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); /* Text shadow for readability */
}

.universe-intro p {
	font-size: 20px;
	margin-bottom: 30px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}
/* Character Grid Section */
.character-grid {
	padding: 60px 0;
	background-color: #dadada;
}

.character-grid h2 {
	text-align: center;
	font-size: 36px;
	margin-bottom: 40px;
}

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

.character-card {
	background-color: #fff;
	border-radius: 8px;
	overflow: hidden;
	text-align: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	padding-bottom: 20px;
	scroll-margin-top: 300px; /* Adjust value as needed */
}

.character-card img {
	width: 100%;
	height: 300px;
	object-fit: cover;
}

.character-card h3 {
	font-size: 24px;
	margin: 20px 0 10px;
}

.character-card p {
	font-size: 16px;
	line-height: 1.5;
	padding: 0 20px;
}

/* Shop Section */
.online-shop {
	padding: 60px 0;
	background-color: #1a1a1a;
	color: #ffffff;
}

.shop-container {
	display: flex;
	align-items: center;
	justify-content: center;
}

.shop-image {
	flex: 0 0 auto;
	width: 50%; /* Adjust as needed */
	max-width: 400px; /* Maximum width for the image container */
	margin-right: 40px;
}

.shop-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1; /* Maintains square aspect ratio */
	object-fit: cover;
	display: block;
}

.shop-content {
	flex: 1;
	text-align: center;
}

.shop-content h2 {
	font-size: 36px;
	margin-bottom: 20px;
}

.shop-content p {
	font-size: 18px;
	margin-bottom: 30px;
	color: #f0f0f0;
}

.shop-content .btn {
	background-color: #007BFF;
	color: #ffffff;
}

.shop-content .btn:hover {
	background-color: #0056b3;
}

/* Responsive Styles */
@media (max-width: 768px) {
	.shop-container {
		flex-direction: column;
		align-items: center;
	}

	.shop-image {
		width: 80%;
		margin-right: 0;
		margin-bottom: 30px;
	}

	.shop-content {
		text-align: center;
	}

	.shop-content h2 {
		font-size: 28px;
	}

	.shop-content p {
		font-size: 16px;
	}
}
/* Shop This Story Section */
.shop-story {
	padding: 60px 0;
	text-align: center;
	background-color: #1a1a1a;
	color: #fff;
}

.shop-story h2 {
	font-size: 36px;
	margin-bottom: 20px;
}

.shop-story p {
	font-size: 18px;
	margin-bottom: 30px;
}

.shop-story .btn {
	background-color: #007BFF;
	color: #fff;
}

.shop-story .btn:hover {
	background-color: #0056b3;
}

/* Product Card Styles */
section.shop-story .product-card {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	background-color: #fff;
	color: #333; /* Set text color to dark gray */
	border-radius: 8px;
	overflow: hidden;
	margin: 40px 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

section.shop-story .product-image {
	flex: 0 0 40%;
	max-width: 40%;
}

section.shop-story .product-image img {
	width: 100%;
	height: auto;
	display: block;
}

section.shop-story .product-details {
	flex: 1;
	padding: 20px; /* Adjust padding as needed */
	color: #333;
	text-align: left; /* Align text to the left */
}

section.shop-story .product-details h3 {
	font-size: 28px;
	margin-bottom: 15px;
	color: #333;
	text-align: left;
}

section.shop-story .product-details p {
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 15px;
	color: #333;
	text-align: left;
}

/* Styles for UL and LI in Product Details */
section.shop-story .product-details ul {
	list-style: disc inside;
	margin: 0;
	padding-left: 0;
}

section.shop-story .product-details li {
	margin-bottom: 5px;
	padding-left: 0;
}

section.shop-story .product-price {
	font-size: 24px;
	font-weight: bold;
	margin-bottom: 20px;
	color: #333;
	text-align: left;
}

section.shop-story .product-details .btn {
	padding: 12px 30px;
	background-color: #28A745;
	color: #fff;
	border-radius: 50px;
	font-size: 16px;
	text-decoration: none;
	display: inline-block;
	transition: background-color 0.3s ease;
}

section.shop-story .product-details .btn:hover {
	background-color: #218838;
}

/* Responsive Styles */
@media (max-width: 768px) {
	section.shop-story .product-card {
		flex-direction: column;
	}

	section.shop-story .product-image,
	section.shop-story .product-details {
		max-width: 100%;
	}

	section.shop-story .product-image {
		flex: 0 0 auto;
	}

	section.shop-story .product-details {
		padding: 20px;
		text-align: left; /* Ensure text remains left-aligned on smaller screens */
	}
}

/* Adjusted Button Styles */
.btn {
	display: inline-block;
	padding: 12px 30px;
	background-color: #007BFF;
	color: #fff;
	border-radius: 50px;
	font-size: 16px;
	transition: background-color 0.3s ease;
}

.btn:hover {
	background-color: #0056b3;
}

/* Responsive Styles */
@media (max-width: 768px) {
	.universe-intro {
		padding: 80px 0;
	}

	.universe-intro h1 {
		font-size: 36px;
	}

	.universe-intro p {
		font-size: 18px;
	}

	.character-card img {
		height: auto;
	}

	.shop-story h2 {
		font-size: 28px;
	}
}

/* Universe Overview Section */
.universe-overview {
	padding: 60px 0;
	background-color: #f9f9f9; /* Light background color */
	color: #333; /* Text color */
}

.universe-overview h2 {
	text-align: center;
	font-size: 36px;
	margin-bottom: 40px;
}

.universe-overview p {
	font-size: 18px;
	line-height: 1.6;
	margin-bottom: 20px;
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

@media (max-width: 768px) {
	.universe-overview h2 {
		font-size: 28px;
	}

	.universe-overview p {
		font-size: 16px;
		padding: 0 20px;
	}
}

/* Styles for Privacy Policy */
#privacy-policy {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

#privacy-policy h1,
#privacy-policy h2,
#privacy-policy h3 {
	color: #333;
	text-align: center;
}

#privacy-policy p,
#privacy-policy ul {
	font-size: 16px;
	line-height: 1.6;
	color: #555;
	text-align: left;
}

#privacy-policy ul {
	margin-left: 20px;
}

#privacy-policy a {
	color: #007BFF;
	text-decoration: none;
}

#privacy-policy a:hover {
	text-decoration: underline;
}

/* ... Existing styles ... */

/* Ensure images are responsive */
.product-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Accessibility focus styles */
.btn:focus,
input:focus,
.product-card:focus {
	outline: 2px solid #ffcc00;
	outline-offset: 2px;
}

/* Product Filter */
.product-filter {
	text-align: center;
	margin-bottom: 30px;
}

.product-filter label {
	font-size: 18px;
	margin-right: 10px;
}

.product-filter input {
	padding: 8px 12px;
	font-size: 16px;
	width: 300px;
	max-width: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.product-filter input:focus {
	border-color: #ffcc00;
	outline: none;
	box-shadow: 0 0 5px rgba(255, 204, 0, 0.5);
}

/* No Products Found Message */
.no-products-message {
	font-size: 18px;
	color: #666;
	text-align: center;
	width: 100%;
}

/* Highlighted Text */
mark {
	background-color: #ffeb3b;
	color: inherit;
}