body {
	background: #0f0f0f;
	color: white;
	font-family: sans-serif;
	overflow-x: hidden;
}

/* 🌌 Background */

@keyframes float {
	from {
		transform: translateY(100vh);
	}

	to {
		transform: translateY(-10vh);
	}
}

/* Navbar */
.navbar {
	background: rgba(0, 0, 0, 0.8);
	padding: 15px;
}

.navbar a {
	color: #aaa;
	margin-left: 15px;
	text-decoration: none;
}

.navbar a:hover {
	color: white;
}

/* Hero */
.hero {
	height: 100vh;
	display: flex;
	align-items: center;
}

/* Cards */
.book-card {
	background: #1a1a1a;
	padding: 20px;
	margin-top: 20px;
	border-radius: 10px;
	transition: 0.4s;
}

.book-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.fade-in {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 1s ease, transform 1s ease;
}

.fade-in.show {
	opacity: 1;
	transform: translateY(0);
}

.home-page .navbar-brand,
.home-page .footer-title {
    font-family: 'Fredoka One', cursive;
    color: #e67e22 !important;
    font-size: 2rem;
    font-weight: 500;
}



.navbar-brand,
.footer-title {
    font-family: 'Fredoka One';
    color: #e67e22 !important;
    font-size: 2rem;
    font-weight: 500;
}

/* Page transition */
.fade-page {
	opacity: 0;
	transition: opacity 0.5s ease;
}

.fade-page.show {
	opacity: 1;
}

.book-card img {
	transition: 0.4s ease;
}

.book-card:hover img {
	transform: scale(1.05);
}

.book-card {
	transition: 0.4s ease;
}

.book-card:hover {
	transform: translateY(-6px);
}

/* Author Name Styling */
.author-name {
	font-family: 'Playfair Display', serif;
	font-size: 3rem;
	font-weight: 700;
	letter-spacing: 1px;
}

/* Tagline */
.author-tagline {
	font-family: 'Inter', sans-serif;
	color: #bbb;
	margin-top: 10px;
}

.author-name {
	font-family: 'Playfair Display', serif;
	font-size: 1.8rem;
	font-weight: 600;
	letter-spacing: 1px;
}

.site-footer {
	background: rgba(40, 40, 40, 0.9);
	backdrop-filter: blur(5px);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.gallery-img {
	opacity: 0;
	transform: translateY(30px);
	transition: 0.8s ease;
}

.gallery-img.show {
	opacity: 1;
	transform: translateY(0);
}

/* Base hidden state */
.image-block,
.text-block {
	opacity: 0;
	transform: translateY(15px);
}

/* Image appears first */
.image-block {
	animation: fadeInUp 0.6s ease-out forwards;
	animation-delay: 0.1s;
}

/* Text appears after */
.text-block {
	animation: fadeInUp 0.6s ease-out forwards;
	animation-delay: 0.5s;
}

/* Animation */
@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Base hidden state */
.title-block,
.img-block {
	opacity: 0;
	transform: translateY(15px);
}

/* Title first */
.title-block {
	animation: fadeInUp 0.6s ease-out forwards;
	animation-delay: 0.1s;
}

/* Images staggered */
.img-1 {
	animation: fadeInUp 0.6s ease-out forwards;
	animation-delay: 0.3s;
}

.img-2 {
	animation: fadeInUp 0.6s ease-out forwards;
	animation-delay: 0.5s;
}

.img-3 {
	animation: fadeInUp 0.6s ease-out forwards;
	animation-delay: 0.7s;
}

/* Hover effect (optional but nice) */
.gallery-img {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Animation */
@keyframes fadeInUp {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.book-card {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.btn-buy {
	background-color: #ffaa00;
	color: #fff;
	border-radius: 25px;
	padding: 6px 18px;
	font-weight: 500;
	border: none;
	transition: 0.3s ease;
	text-decoration: none;
	display: inline-block;
}

.btn-buy:hover {
	background-color: #333333;
	transform: scale(1.05);
	color: #fff;
}

/* Smooth appearance */
.scroll-book {
	will-change: transform, opacity;
}

/* Slight delay between books (optional stagger) */
.scroll-book:nth-child(1) {
	transition-delay: 0.1s;
}

.scroll-book:nth-child(2) {
	transition-delay: 0.2s;
}

.scroll-book:nth-child(3) {
	transition-delay: 0.3s;
}

/* Base hidden */
.book-img,
.book-text,
.book-btn {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.5s ease;
}

/* When card becomes visible */
.scroll-book.show .book-img {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.1s;
}

/* Text appears after */
.scroll-book.show .book-text {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.4s;
}

/* Button appears last */
.scroll-book.show .book-btn {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.7s;
}

/* 🔥 Better gallery animation */
.gallery-img {
	opacity: 0;
	transform: translateY(40px) scale(0.95);
	transition: all 0.8s ease;
}

/* When visible */
.gallery-img.show {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* ✨ Stagger effect (makes it feel premium) */
.gallery-img:nth-child(1) {
	transition-delay: 0.1s;
}

.gallery-img:nth-child(2) {
	transition-delay: 0.2s;
}

.gallery-img:nth-child(3) {
	transition-delay: 0.3s;
}

.gallery-img:nth-child(4) {
	transition-delay: 0.4s;
}

.gallery-img:nth-child(5) {
	transition-delay: 0.5s;
}

.gallery-img:nth-child(6) {
	transition-delay: 0.6s;
}

/* HERO SPACING */
.hero {
	min-height: 90vh;
}

/* LAYOUT FEEL */
.hero-layout {
	gap: 40px;
}

/* AUTHOR IMAGE (LEFT SIDE) */
.author-main-img {
	width: 100%;
	max-width: 420px;
	border-radius: 12px;
	object-fit: cover;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

/* AUTHOR NAME (BIG EDITORIAL STYLE) */
.author-name {
	font-family: "Playfair Display", serif;
	font-size: 3.2rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 10px;
}

/* TAGLINE */
.author-tagline {
	color: #cfcfcf;
	font-size: 1rem;
	max-width: 400px;
	margin-bottom: 25px;
}

/* BOOK IMAGE (RIGHT SIDE FEATURE) */
.hero-book img {
	width: 180px;
	border-radius: 6px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6);
	transition: transform 0.4s ease;
}

.hero-book img:hover {
	transform: scale(1.05);
}

/* 📚 SECTION TITLE */
.section-title {
	font-family: "Playfair Display", serif;
	font-size: 2.2rem;
	font-weight: 600;
	letter-spacing: 1px;
	color: #ffffff;
}

/* 📦 BOOK CARD WRAPPER */
.book-card {
	background: transparent;
	/* keeps your dark theme clean */
	padding: 15px;
	border-radius: 12px;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* ✨ hover effect */
.book-card:hover {
	transform: translateY(-8px);
}

/* 📚 BOOK IMAGE */
.book-img-featured {
	width: 100%;
	max-width: 180px;
	/* 🔥 controls size */
	height: auto;
	object-fit: cover;
	border-radius: 12px;
	margin-bottom: 10px;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* hover zoom on image */
.book-card:hover .book-img-featured {
	transform: scale(1.05);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

/* 📖 TITLE UNDER BOOK */
.book-title {
	font-family: "Inter", sans-serif;
	font-size: 1rem;
	color: #ddd;
	margin-top: 8px;
}

/* 📱 RESPONSIVE FIX */
@media (max-width: 768px) {
	.book-img-featured {
		max-width: 140px;
	}
}

/* 📖 ABOUT PAGE LAYOUT */
.about-section {
	padding-top: 100px;
	padding-bottom: 80px;
}

/* 🖼️ AUTHOR IMAGE */
.about-img {
	max-width: 380px;
	width: 100%;
	border-radius: 16px;
	box-shadow: 0 25px 70px rgba(0, 0, 0, 0.6);
	transition: transform 0.4s ease;
}

.about-img:hover {
	transform: scale(1.03);
}

/* ✍️ TEXT STYLE */
.about-title {
	font-family: "Playfair Display", serif;
	font-size: 2.4rem;
	color: #ffffff;
}

.about-text p {
	color: #d0d0d0;
	font-size: 1.05rem;
	line-height: 1.8;
	margin-bottom: 15px;
}

/* 📱 MOBILE RESPONSIVE */
@media (max-width: 768px) {
	.about-img {
		max-width: 260px;
		margin-bottom: 20px;
	}

	.about-text {
		text-align: center;
	}
}

.about-text p {
	text-indent: 30px;
	margin-bottom: 18px;
	line-height: 1.8;
}

.about-text p {
	text-align: justify;
	text-justify: inter-word;
	line-height: 1.8;
}

body {
	padding-top: 80px;
}

.about-image-name {
	font-family: "Playfair Display", serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #ffffff;
	font-size: 1.4rem;
	margin-top: 15px;
}

.gallery-img {
	width: 100%;
	max-width: 280px;
	/* controls size */
	height: 200px;
	/* keeps uniform shape */
	object-fit: cover;
	/* prevents stretching */
	border-radius: 12px;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* hover effect */
.gallery-img:hover {
	transform: scale(1.05);
	box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

html,
body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
}

/* main content grows and pushes footer down */
main,
section {
	flex: 1;
}

/* footer stays at bottom naturally */
.site-footer {
	margin-top: auto;
}

/* 📚 BOOK IMAGE FIX (controls size properly) */
.book-cover {
	width: 100%;
	max-width: 180px;
	/* controls size */
	height: auto;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
	transition: transform 0.4s ease;
}

/* hover effect */
.book-card:hover .book-cover {
	transform: scale(1.05);
}

/* optional: tighter layout for books */
.book-card {
	background: rgba(255, 255, 255, 0.03);
	border-radius: 14px;
}

/* 📚 BOOK IMAGE */
.book-cover {
	width: 100%;
	max-width: 180px;
	border-radius: 12px;
	object-fit: cover;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
	transition: transform 0.4s ease;
}

.book-card:hover .book-cover {
	transform: scale(1.05);
}

/* 📖 TITLE FONT */
.book-text {
	font-family: "Playfair Display", serif;
	font-weight: 600;
	color: white;
}

/* 📄 DESCRIPTION FONT */
.book-card p {
	font-family: "Inter", sans-serif;
	font-weight: 300;
	line-height: 1.8;
	color: #cfcfcf;
}

/* BUTTON */
.btn-buy {
	background: #2D4356;
	border-radius: 25px;
	color: white;
	padding: 6px 18px;
	transition: 0.3s;
}

.btn-buy:hover {
	background: #333;
	transform: scale(1.05);
}

.gallery-title {
	font-family: "Playfair Display", serif;
	font-weight: 600;
	letter-spacing: 1px;
}

.carousel-img {
	max-height: 520px;
	width: 100%;
	object-fit: contain;
	/* ✅ FIX: no cropping */
	border-radius: 12px;
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
	display: block;
	margin: 0 auto;
}

/* INITIAL STATE (hidden) */
.animate-left,
.animate-right {
	opacity: 0;
	transform: translateX(50px);
	transition: all 1s ease;
}

/* LEFT starts from left */
.animate-left {
	transform: translateX(-60px);
}

/* RIGHT starts from right */
.animate-right {
	transform: translateX(60px);
}

/* WHEN ACTIVE (visible) */
.animate-show {
	opacity: 1;
	transform: translateX(0);
}

.description {
	text-align: justify;
	text-indent: 40px;
}

h3.book-text {
	text-align: center;
	text-indent: 0;
}

.book-fan {
	position: relative;
	width: 500px;
	height: 350px;
	margin: 80px auto;
}

/* shared book style */
.book {
	position: absolute;
	width: 220px;
	border-radius: 12px;
	box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);
	transition: transform 0.4s ease, z-index 0.3s ease;
}

/* LEFT BOOK */
.book1 {
	left: 0;
	top: 30px;
	transform: rotate(-15deg);
	z-index: 1;
}

/* CENTER BOOK (slightly bigger) */
.book2 {
	left: 130px;
	top: 0;
	transform: rotate(0deg) scale(1.05);
	z-index: 3;
}

/* RIGHT BOOK */
.book3 {
	left: 260px;
	top: 30px;
	transform: rotate(15deg);
	z-index: 2;
}

/* hover effect */
.book:hover {
	transform: rotate(0deg) scale(1.15);
	z-index: 10;
}

.book-card .row {
	flex-direction: row !important;
}

/* IMAGE CARD */
.gallery-item {
	background: #fff;
	padding: 5px;
	border-radius: 10px;
	box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
	overflow: hidden;
}

/* IMAGE STYLE */
.gallery-item img {
	width: 100%;
	height: 400px;
	object-fit: cover;
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.3s ease;
}

/* HOVER */
.gallery-item img:hover {
	transform: scale(1.03);
}

/* LIGHTBOX BACKGROUND */
.lightbox {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	justify-content: center;
	align-items: center;
	z-index: 9999;
}

/* EXPANDED IMAGE */
.lightbox img {
	max-width: 90%;
	max-height: 90%;
	border-radius: 10px;
}

.book-text {
	font-size: 1.1rem;
	line-height: 1.6;
	text-align: justify;
	text-indent: 35px;
}

.book-text {
	text-align: justify;
	text-indent: 35px;
	font-size: 1.1rem;
	line-height: 1.6;
}

/* BIG BOOK TITLES */
.book-text h3,
h3.book-text {
	font-size: 2rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 10px;
	letter-spacing: 0.5px;
}

/* =========================GALLERY ANIMATION (STAGGER)========================= */
/* hidden by default */
.gallery-item {
	opacity: 0;
	transform: translateY(30px);
	transition: all 0.6s ease;
}

/* when visible */
.gallery-item.show {
	opacity: 1;
	transform: translateY(0);
}

/* stagger delay */
.row .col-md-4:nth-child(1) .gallery-item {
	transition-delay: 0.1s;
}

.row .col-md-4:nth-child(2) .gallery-item {
	transition-delay: 0.2s;
}

.row .col-md-4:nth-child(3) .gallery-item {
	transition-delay: 0.3s;
}

.row .col-md-4:nth-child(4) .gallery-item {
	transition-delay: 0.4s;
}

.row .col-md-4:nth-child(5) .gallery-item {
	transition-delay: 0.5s;
}

.row .col-md-4:nth-child(6) .gallery-item {
	transition-delay: 0.6s;
}

/* base state */
.about-text p {
	opacity: 0;
}

/* LEFT animation */
@keyframes slideLeft {
	from {
		opacity: 0;
		transform: translateX(-60px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* RIGHT animation */
@keyframes slideRight {
	from {
		opacity: 0;
		transform: translateX(60px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* PARAGRAPH 1 → LEFT */
.para-1 {
	animation: slideLeft 0.9s ease forwards;
	animation-delay: 0.3s;
}

/* PARAGRAPH 2 → RIGHT */
.para-2 {
	animation: slideRight 0.9s ease forwards;
	animation-delay: 0.9s;
}

/* PARAGRAPH 3 → LEFT */
.para-3 {
	animation: slideLeft 0.9s ease forwards;
	animation-delay: 1.5s;
}

.about-text p {
	font-size: 1.3rem;
	line-height: 2;
	color: #d0d0d0;
}

/* REMOVE CONTAINER / FRAME EFFECT */
.about-img {
	max-width: 380px;
	width: 100%;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
	display: block;
	margin: 0 auto;
}

/* REMOVE ALL HOVER EFFECTS ON ABOUT IMAGE */
.about-img {
	transition: none;
	transform: none;
}

/* disable hover scaling or movement */
.about-img:hover {
	transform: none;
	box-shadow: none;
}




/* 1. Playful Background & Global Styles */
body {
	background: #fdfbf7;
	/* Off-white paper color */
	/* Watercolor texture effect */
	background-image: radial-gradient(#f0eadd 1px, transparent 1px);
	background-size: 20px 20px;
	font-family: 'Quicksand', sans-serif;
	color: #444;
}

/* 2. Navigation - Warm & Friendly */
.navbar {
	background-color: rgba(255, 255, 255, 0.9);
	border-bottom: 3px solid #ffcc00;
	/* Sunny yellow accent */
	padding: 15px 0;
}




.nav-links a {
	text-decoration: none;
	color: #555;
	margin-left: 20px;
	font-weight: 600;
	transition: 0.3s;
}


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

.author-name {
	font-family: 'Fredoka One', cursive;
	font-size: 4.5rem;
	color: #2980b9;
	/* Friendly blue */
	text-shadow: 2px 2px 0px #fff;
}

.author-tagline {
	font-size: 1.4rem;
	color: #666;
	margin-bottom: 30px;
}

.image-frame {
	display: inline-block;
	padding: 15px;
	background: white;
	border-radius: 50% 20% 50% 20%;
	/* Whimsical organic shape */
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.btn-primary-custom {
	background-color: #e67e22;
	color: white;
	padding: 12px 30px;
	border-radius: 50px;
	font-weight: bold;
	text-decoration: none;
	transition: all 0.2s;
}

.btn-primary-custom:hover {
	transform: translateY(2px);
	box-shadow: 0 2px 0px #d35400;
	color: white;
}

/* 4. Book Fan Section */
.section-title {
	font-family: 'Fredoka One', cursive;
	text-align: center;
	color: #27ae60;
	/* Meadow green */
	margin-bottom: 50px;
}

.book-fan-container {
	height: 400px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.book-fan {
	position: relative;
}

.book {
	position: absolute;
	width: 220px;
	border-radius: 10px;
	box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.2);
	transition: transform 0.4s ease, z-index 0s;
	border: 5px solid white;
}

/* Fan effect */
.book1 {
	transform: rotate(-15deg) translateX(-80px);
	z-index: 1;
}

.book2 {
	transform: rotate(0deg) scale(1.1);
	z-index: 3;
}

.book3 {
	transform: rotate(15deg) translateX(80px);
	z-index: 2;
}

/* Interactive Hover - Makes books "pop" when clicked/hovered */
.book:hover {
	z-index: 10;
	transform: scale(1.2) rotate(0deg);
}

/* 5. Footer */
.site-footer {
	background: #2c3e50;
	color: white;
	border-top: 10px solid #f1c40f;
}

.hero-img {
	/* Adjust this number to make it as small or large as you like */
	max-width: 320px;
	height: auto;
	border-radius: 20px;
	/* Optional: adds nice rounded corners for a kid-friendly look */
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.image-frame {
	display: inline-block;
	padding: 10px;
	background: white;
	border-radius: 25px;
}

.text-block {
	padding-left: 20px;
}

/* --- Text Color & Formatting --- */
.about-text p {
	color: #000000 !important;
	text-align: justify;
	text-indent: 50px;
	margin-bottom: 25px;
	font-size: 1.15rem;
	line-height: 1.8;
	opacity: 0;
}


.about-image-name {
	color: #000000;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
}


.slide-in-left {
	animation: slideFromLeft 1.2s ease forwards;
}

.slide-in-right {
	animation: slideFromRight 1.2s ease forwards;
	animation-delay: 0.4s;
}

.slide-in-left-delay {
	animation: slideFromLeft 1.2s ease forwards;
	animation-delay: 0.8s;
}

/* --- Movement Keyframes --- */

@keyframes slideFromLeft {
	0% {
		opacity: 0;
		transform: translateX(-60px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes slideFromRight {
	0% {
		opacity: 0;
		transform: translateX(60px);
	}

	100% {
		opacity: 1;
		transform: translateX(0);
	}
}



/* General Book Page Styling */
.books-section {
	background-color: #fdfbf7;
	padding-bottom: 80px;
}

.book-card {
	background: white;
	border-radius: 20px;
	border: none;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	overflow: hidden;
	position: relative;
}

.book-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.book-cover {
	border-radius: 10px;
	box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
	max-height: 350px;
}

.book-title {
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	margin-bottom: 15px;
}

.book-description {
	color: #444;
	line-height: 1.7;
	text-align: justify;
}

/* --- THEMATIC COLORS --- */

/* Gold Theme (My Front Porch) */
.theme-gold {
	border-left: 8px solid #d4a373;
}

.theme-gold .book-title {
	color: #8b5e34;
}

.theme-gold .btn-buy {
	background-color: #d4a373;
	color: white;
}

.theme-gold .btn-buy:hover {
	background-color: #bc8a5f;
}

/* Pink Theme (Lindsey) */
.theme-pink {
	border-left: 8px solid #ffafcc;
}

.theme-pink .book-title {
	color: #c9184a;
}

.theme-pink .btn-buy {
	background-color: #ffafcc;
	color: white;
}

.theme-pink .btn-buy:hover {
	background-color: #ff8fab;
}

/* Blue Theme (Sarabel) */
.theme-blue {
	border-left: 8px solid #a2d2ff;
}

.theme-blue .book-title {
	color: #0077b6;
}

.theme-blue .btn-buy {
	background-color: #a2d2ff;
	color: white;
}

.theme-blue .btn-buy:hover {
	background-color: #48cae4;
}

/* Button Styling */
.btn-buy {
	padding: 10px 25px;
	font-weight: 600;
	border-radius: 30px;
	border: none;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-top: 15px;
}


.section-title {
	color: #2d6a4f;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
}

.book-title {
	color: #000000 !important;
	font-family: 'Playfair Display', serif;
	font-weight: 700;
	margin-bottom: 15px;
}

.book-description {
	color: #000000 !important;
	line-height: 1.8;
	text-align: justify;
	font-size: 1.1rem;
	font-weight: 400;
}



.theme-gold {
	border-left: 8px solid #d4a373;
}

.theme-pink {
	border-left: 8px solid #ffafcc;
}

.theme-blue {
	border-left: 8px solid #a2d2ff;
}

/* Button Hover Effects (so they still feel themed) */
.theme-gold .btn-buy {
	background-color: #d4a373;
	color: white;
}

.theme-pink .btn-buy {
	background-color: #ffafcc;
	color: white;
}

.theme-blue .btn-buy {
	background-color: #a2d2ff;
	color: white;
}

.btn-buy:hover {
	filter: brightness(90%);
	color: white;
}

.section-title {
	color: #2d6a4f  ;
	font-family: 'Playfair Display', serif;
	font-weight: 800;
	font-size: 2.5rem;
	letter-spacing: 2px;
	margin-bottom: 60px;
	text-align: center;


	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
}


@media (max-width: 768px) {
	.section-title {
		font-size: 2.5rem;
	}
}

.book-description {
	text-indent: 2em;
	margin-top: 10px;
	line-height: 1.6;
	text-align: justify;
}


.book-title {
	font-size: 1.5rem;
}

.gallery-title {
	color: #2d6a4f;
}






 
.nav-link {
	color: #222;
	font-weight: 500;
	text-decoration: none;
}

.nav-link:hover {
	color: #e67e22;
}

.book-description {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.book-description.show {
	opacity: 1;
	transform: translateY(0);
}



.gallery-subtitle {
	font-family: 'Quicksand', sans-serif;
	font-size: 1.1rem;
	color: #777;
	margin-top: 10px;
	letter-spacing: 0.5px;
}

.gallery-title {
	margin-top: -20px;
}



.about-img {
	opacity: 0;
	transform: translateY(30px);
	animation: fadeUpImage 1s ease forwards;
	animation-delay: 0.5s;
	/* delay before showing */
}

@keyframes fadeUpImage {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
/* FORCE SAME FONT EVERYWHERE */




.navbar {
  background: #ffffff;
  border-bottom: 1px solid #eaeaea;
  padding: 14px 0;

  /* FIX FLICKER */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.nav-links a {
  transition: color 0.2s ease;
}

body {
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.loaded {
  opacity: 1;
}

/* =========================
   PAGE FADE FIX (NO CONTENT LOSS)
========================= */

body {
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.loaded {
  opacity: 1;
}

/* =========================
   NAVBAR (STABLE + NO FLICKER)
========================= */

.navbar {
  background: #ffffff;
  border-bottom: 1px solid #eaeaea;
  padding: 14px 0;
  transform: translateZ(0);
}

/* =========================
   BACKGROUND LAYER FIX
========================= */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle, rgba(142,154,142,0.15) 2px, transparent 3px);
  background-size: 60px 60px;
  animation: floatLights 18s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes floatLights {
  from { transform: translateY(0); }
  to { transform: translateY(-150px); }
}

/* =========================
   CONTENT ALWAYS ABOVE BACKGROUND
========================= */

section,
nav,
footer,
.books-section,
.book-card {
  position: relative;
  z-index: 2;
}

/* =========================
   BOOK DESCRIPTION FIX
========================= */

.book-description {
  color: #2c3e50;
  opacity: 1;
  display: block;
}

/* =========================
   OPTIONAL SAFETY (prevents hiding)
========================= */

.book-card p {
  visibility: visible;
}
/* Letter animation */
.letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.4s forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.book-description {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(5px);
  transition: opacity 0.9s ease, transform 0.9s ease, filter 0.9s ease;
  will-change: opacity, transform, filter;
}

/* When visible */
.book-description.show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Optional: nicer feel when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .book-description {
    opacity: 1 ;
    transform: none ;
    filter: none ;
    transition: none ;
  }
}
.book-description {
  font-family: "Quicksand", sans-serif ;
  font-size: 1.05rem ;
  line-height: 1.8;
  color: #2c3e50;

  text-align: justify;
  text-indent: 2em;

  margin-top: 10px;

  /* animation base state */
  opacity: 0;
  transform: translateY(18px);
  filter: blur(5px);

  transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
}

/* when visible (JS adds this) */
.book-description.show {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* safety: always visible if JS fails */
.book-description.no-js {
  opacity: 1 ;
  transform: none ;
  filter: none ;
}

/* accessibility */
@media (prefers-reduced-motion: reduce) {
  .book-description {
    opacity: 1 ;
    transform: none ;
    filter: none ;
    transition: none ;
  }
}


.book {
  transform-origin: center;
  will-change: transform;
  animation: floatBooks 4.5s ease-in-out infinite;
}

/* Keep your original fan positioning separate (IMPORTANT) */
.book1 {
  transform: rotate(-15deg) translateX(-80px);
  z-index: 1;
}

.book2 {
  transform: rotate(0deg) scale(1.1);
  z-index: 3;
}

.book3 {
  transform: rotate(15deg) translateX(80px);
  z-index: 2;
}

/* Floating is now applied using a wrapper-like approach via keyframes
   WITHOUT overriding base transform */
@keyframes floatBooks {
  0% {
    translate: 0px 0px;	
  }
  50% {
    translate: 0px -10px;
  }
  100% {
    translate: 0px 0px;
  }
}

/* Smooth hover without breaking transforms */
.book:hover {
  animation-play-state: paused;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.25));
  transition: filter 0.3s ease;
}


/*WELCOME*/
.bounce-text {
  display: inline-block;
  opacity: 1;
  visibility: visible;
}

.bounce-text .letter {
  display: inline-block;
}

/*intro description*/
#typing-text::after {
  content: "|";
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}

#typing-text {
  text-align: justify;
  text-indent: 40px; 
  line-height: 1.6;  
}

#typing-text::after {
  content: "|";
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0; }
}
/*intro description*/

/* Explore Button Hover*/
.btn-primary-custom {
  background-color: #ffaa00;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 25px;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.btn-primary-custom:hover {
  opacity: 1 ;   /* force override any fade */
  background-color: #2D4356;
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.btn-primary-custom:focus,
.btn-primary-custom:active {
  opacity: 1 ;
}
/* Explore Button Hover*/

/* Buy Button Remove the Black Hover*/
.btn-buy {
  background-color: #ffaa00;
  color: white;
  border: none;
  padding: 10px 22px;
  border-radius: 25px;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn-buy:hover,
.btn-buy:focus,
.btn-buy:active {
  background-color: #2D4356 ; /* keep your color */
  color: white;
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  transform: translateY(-3px);
  opacity: 1 ;
}
/* Buy Button Remove the Black Hover*/



/* =========================
   ABOUT PAGE BACKGROUND
========================= */
body.about-page {
  min-height: 100vh;
  margin: 0;
  position: relative;

  background: #f7f4ef; /* soft paper base */
}

/* subtle elegant gradient overlay */
body.about-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background: radial-gradient(circle at top left, rgba(255,255,255,0.8), transparent 60%),
              radial-gradient(circle at bottom right, rgba(210, 220, 230, 0.5), transparent 60%);
}

/* optional soft texture feel */
body.about-page::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  opacity: 0.04;

  background-image: url("https://www.transparenttextures.com/patterns/paper-fibers.png");
}


/*Header Design*/
.glass-nav {
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  transition: all 0.3s ease;
}

/* spacing inside navbar */
.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* BRAND STYLE */
.brand-glow {
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  color: #1f2937;
  letter-spacing: 1px;
  transition: 0.3s ease;
}

.brand-glow:hover {
  color: #0ea5e9;
  text-shadow: 0 0 10px rgba(14, 165, 233, 0.4);
}

/* LINKS */
.nav-links {
  display: flex;
  gap: 25px;
}

.nav-links a {
  text-decoration: none;
  color: #1f2937;
  font-weight: 600;
  position: relative;
  transition: 0.3s ease;
}

/* hover underline animation */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0%;
  height: 2px;
  background: #2D4356;
  transition: 0.3s ease;
}

.nav-links a:hover {
  color: #0703ff;
}

.nav-links a:hover::after {
  width: 100%;
}

/* MOBILE RESPONSIVE */
@media (max-width: 768px) {
  .nav-container {
    flex-direction: column;
    gap: 10px;
  }

  .nav-links {
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/*each text Jumps Featured header in the home page*/
.wave-text span {
  display: inline-block;
  animation: jump 1.6s infinite ease-in-out;
}

/* smooth bounce */
@keyframes jump {
  0%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
  60% {
    transform: translateY(0);
  }
}


/* each letter jumps */
.wave-text span {
  display: inline-block;
  animation: jump 1.6s infinite ease-in-out;
}

/* smooth bounce */
@keyframes jump {
  0%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-6px);
  }
  60% {
    transform: translateY(0);
  }
}

/* gradient animated text */
.wave-text span {
  background: linear-gradient(-45deg, #2d6a4f);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}











/* Color Variables */
:root {
    --primary-blue: #34495e;
    --accent-blue: #4a90e2;
    --soft-green: #f2f9f1;
    --text-gray: #555;
}

/* Testimonial Section */
.testimonials {
    background-color: rgba(255, 255, 255, 0.5);
    padding: 40px 20px;
    text-align: center;
    font-style: italic;
    border-top: 1px solid #eee;
}

/* Author Teaser */
.author-teaser {
    display: flex;
    justify-content: center;
    padding: 80px 20px;
    background: linear-gradient(to bottom, #ffffff, var(--soft-green));
}

.teaser-container {
    display: flex;
    align-items: center;
    max-width: 800px;
    gap: 40px;
}

.author-img {
    width: 150px;
    height: 150px;
    background-color: #ccc; /* Replace with Robert's image */
    border-radius: 50%;
    flex-shrink: 0;
}

/* Newsletter Section */
.newsletter {
    background-color: var(--primary-blue);
    color: white;
    padding: 60px 20px;
    text-align: center;
}

.newsletter h4 {
    font-size: 24px;
    margin-bottom: 10px;
}

.signup-form {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

.signup-form input {
    padding: 12px 20px;
    border-radius: 25px;
    border: none;
    width: 300px;
}

.signup-form button {
    padding: 12px 30px;
    background-color: var(--accent-blue);
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.3s;
}

.signup-form button:hover {
    background-color: #357abd;
}










/* =========================
   SECOND FOOTER BAR
========================= */
.footer-bar {
  background-color: #2f4354;  /* 👈 your new background color */
  color: #ffffff;
  font-size: 16px;
  padding: 18px 0;
}

/* LINKS INSIDE FOOTER */
.footer-bar a {
  color: #e67e22;   /* soft blue links */
  text-decoration: none;
  font-weight: 500;
  transition: 0.2s ease;
}

/* hover effect */
.footer-bar a:hover {
  color: #ffffff;
  opacity: 0.8;
}





.site-footer {
  background-color: #2f4354;
  color: #ffffff;
  border-top: 8px solid #f1c40f;
}

/* Logo inside first footer */
.footer-logo {
  width: 70px;
  height: 70px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Footer title styling */
.footer-title {
  font-family: 'Fredoka One', cursive;
  color: #e67e22 !important;
  font-size: 1.8rem;
  font-weight: 700;
}

/* spacing consistency */
.site-footer p {
  margin-bottom: 5px;
  font-size: 14px;
}























/* Prevent shifting */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 260px; /* keeps space stable so text doesn't jump */
}

/* Logo */
.navbar-logo {
  width: 70px;
  height: 70px;
  object-fit: contain;
  flex-shrink: 0; /* prevents shrinking that causes movement */
}

/* Title stability */
.brand-text {
  display: inline-block;
  white-space: nowrap;
}



.brand-text {
  font-weight: 600;
  letter-spacing: 0.5px;
}