/* styles.css */

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

:root {
    --primary-red: #8B1E1E;
    --light-red: #C84646;
    --dark-maroon: #5C0F0F;
    --cream: #F5E6D3;
    --beige: #E8D7C3;
    --dark-brown: #3D2517;
    --text-dark: #2C1810;
    --white: #fff6e6;
    --gold: #D4AF37;
}

body {
    font-family: 'Georgia', serif;
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header Styles */
/* Header Styles */
.header {
    /* 1. Add a linear gradient overlay */
    /* 2. Add the background image using a relative path */
    /* 3. Define the fallback color */
    background: 
        linear-gradient(135deg, var(--dark-maroon) 0%, var(--primary-red) 100%),
        url('asset/header.png') no-repeat center center / cover, /* <--- UPDATED PATH HERE */
        var(--light-red);
    
    background-blend-mode: multiply; 
    
    /* ... rest of the styles ... */
    padding: 35px 0 0 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

/* New Sticky Divider Style */
.header-divider-sticky {
    /* Use the dark brown variable you have defined */
    background-color: #7e5424; 
    
    /* Set the height (thickness) of the divider to match the shelf look */
    height: 14px; 
    
    /* Add a subtle shadow to emphasize the shelf edge */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); 
    
    width: 100%; 
    z-index: 1001; /* Ensure the divider sits clearly over any content below it */
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 15px;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid var(--light-red);
    object-fit: cover;
}

.author-name {
    color: var(--white);
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.main-nav {
    display: flex;
    gap: 30px;
}

.nav-link {
    color: var(--white);
    text-decoration: none;
    font-size: 1rem;
    transition: color 0.3s;
    position: relative;
}

.nav-link:hover {
    color: var(--gold);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gold);
    transition: width 0.3s;
}

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

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.social-links {
    display: flex;
    gap: 10px;
}

.social-icon {
    color: var(--white); /* This will be overridden by the icon's direct color */
    font-size: 1.2rem; /* Size of the container, icon will inherit */
    transition: transform 0.3s, color 0.3s;
    
    /* NEW STYLES for the cube background */
    display: flex; /* Make it a flex container to center the icon */
    justify-content: center; /* Center icon horizontally */
    align-items: center; /* Center icon vertically */
    width: 30px; /* Width of the "cube" */
    height: 30px; /* Height of the "cube" */
    background-color: var(--white); /* White background for the cube */
    border-radius: 5px; /* Slightly rounded corners for the cube */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Subtle shadow for depth */
}

.social-icon i {
    /* Style for the actual Font Awesome icon */
    color: var(--text-dark); /* Black color for the icon */
    font-size: 1rem; /* Adjust icon size relative to cube if needed */
    /* Remove any existing color from .social-icon if it conflicts */
}

.social-icon:hover {
    color: var(--gold); /* This might still apply to the link, but the icon color is separate */
    transform: translateY(-3px);
    
    /* NEW: Change hover effect for the cube itself */
    background-color: var(--beige); /* Lighter background on hover */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* Stronger shadow on hover */
}
.social-icon:hover i {
    color: var(--primary-red); /* Example: change icon to red on hover */
}
.btn-order {
    background: var(--gold);
    color: var(--dark-brown);
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s, box-shadow 0.3s;
}

.btn-order:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

.mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Hero Section */


.hero-section {
    /* Stacked backgrounds: Dark gradient FIRST, then your image, then a fallback color */
    background: 
        linear-gradient(to bottom, rgba(0, 0, 0, 0.719) 0%, rgba(0, 0, 0, 0.637) 100%), /* Dark gradient overlay */
        url('asset/books.png') no-repeat center center / cover, /* Your background image */
        var(--beige); /* Fallback background color */
    
    /* Optional: Blend mode for how the gradient interacts with the image.
       'multiply' or 'overlay' are good for darkening/enriching. 
       'hard-light' or 'soft-light' can also create interesting effects. */
    background-blend-mode: multiply; /* Or 'overlay' for less intense darkening */
    
    padding: 80px 0;
}

.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.hero-left {
    animation: fadeInLeft 1s ease-out;
}

.series-tag {
    background: var(--gold);
    color: var(--dark-brown);
    padding: 8px 20px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 20px;
    font-weight: bold;
}

.hero-title {
    font-size: 3rem;
    color: var(--dark-brown);
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-description {
    font-size: 1.1rem;
    color: var(--text-dark);
    margin-bottom: 30px;
    text-align: justify;
}

.hero-features {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 1.1rem;
}

.feature-icon-dot {
    /* The new element for the circular icon */
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #d4af37; /* Gold/yellow dot color */
    margin-top: 14px; /* Adjust to align dot with the main text baseline */
    flex-shrink: 0; /* Ensures the dot doesn't shrink */
}

.feature-content {
    display: flex;
    flex-direction: column;
}

.feature-main-text {
    font-size: 1.5em; /* Larger size for main text */
    font-weight: bold;
    color: #fff; /* White */
}

.feature-sub-text {
    font-size: 0.9em; /* Smaller size for sub-text */
    color: #a0a0a0; /* Lighter/gray color */
}

.hero-title,
.hero-description,
.hero-features,
.feature-item {
    color: var(--white); /* Example: Make text white for contrast */
}
.feature-icon {
    font-size: 1.5rem;
}

.btn-hero {
    background: var(--primary-red);
    color: var(--white);
    padding: 15px 40px;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-hero:hover {
    background: var(--dark-maroon);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(139, 30, 30, 0.3);
}

.hero-right {
    display: flex;
    justify-content: center;
    align-items: center; /* Vertically center the showcase within hero-right */
    animation: fadeInRight 1s ease-out;
}




.hero-right {
    display: flex;
    justify-content: center; /* Center the image horizontally */
    align-items: center; /* Vertically center the image */
    animation: fadeInRight 1s ease-out;
}

/* NEW styles for the single hero image */
.hero-single-image {
    max-width: 100%; /* Ensure it doesn't overflow its container */
    width: 2050px; /* Adjust as needed for your desired size */
    height: auto; /* Maintain aspect ratio */
    border-radius: 8px; /* Slightly rounded corners for a clean look */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); /* Add a subtle shadow */
    transition: transform 0.3s ease-in-out; /* Smooth hover effect */
    /* You can remove margin-top: -100px now, or adjust if you want to pull it up */
    /* margin-top: -50px; */ 
}

.hero-single-image:hover {
    transform: translateY(-5px) scale(1.02); /* Lift and slightly enlarge on hover */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4); /* Stronger shadow on hover */
}

/* Container: Keeps the stack aligned to the left of its area */
.book-stack-container {
    position: relative;
    width: 600px; 
    height: 500px;
    perspective: 1500px; 
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 20px; /* Small buffer from the text */
}

.stacked-book {
    position: absolute;
    width: 210px; /* Slightly smaller to allow more spread visibility */
    height: auto;
    border-radius: 4px;
    box-shadow: 10px 10px 25px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease-out; /* Smooth pop effect */
    cursor: pointer;
    /* This ensures they rotate from the 'spine' edge */
    transform-origin: left center; 
}

/* LOGIC: 
   - Each book moves further Right (X)
   - Each book moves further Back (Z)
   - Each book rotates more (Y) 
*/
.book-1 { z-index: 6; transform: translateX(0px)   translateZ(0px)    rotateY(0deg); }
.book-2 { z-index: 5; transform: translateX(65px)  translateZ(-40px)  rotateY(-12deg); }
.book-3 { z-index: 4; transform: translateX(130px) translateZ(-80px)  rotateY(-18deg); }
.book-4 { z-index: 3; transform: translateX(195px) translateZ(-120px) rotateY(-24deg); }
.book-5 { z-index: 2; transform: translateX(260px) translateZ(-160px) rotateY(-30deg); }
.book-6 { z-index: 1; transform: translateX(325px) translateZ(-200px) rotateY(-36deg); }

/* NEW HOVER LOGIC:
   Stays in position, but pops forward (Z) and straightens (0deg)
*/
.stacked-book:hover {
    z-index: 100 !important; /* Forces it to the absolute top */
    /* We use 'inherit' for X so it stays in its horizontal slot */
    transform: translateZ(80px) rotateY(0deg) scale(1.08) !important;
    box-shadow: 15px 15px 40px rgba(0, 0, 0, 0.7);
}

/* Specific Hover X-positions to keep them exactly where they are */
.book-1:hover { transform: translateX(0px)   translateZ(80px) rotateY(0deg) scale(1.08) !important; }
.book-2:hover { transform: translateX(65px)  translateZ(80px) rotateY(0deg) scale(1.08) !important; }
.book-3:hover { transform: translateX(130px) translateZ(80px) rotateY(0deg) scale(1.08) !important; }
.book-4:hover { transform: translateX(195px) translateZ(80px) rotateY(0deg) scale(1.08) !important; }
.book-5:hover { transform: translateX(260px) translateZ(80px) rotateY(0deg) scale(1.08) !important; }
.book-6:hover { transform: translateX(325px) translateZ(80px) rotateY(0deg) scale(1.08) !important; }


.book-carousel {
    display: none;
}
/* Author Section */
.author-section {
    padding: 80px 0;
    background: var(--white);
}

.section-title {
    font-size: 2.5rem;
    color: var(--dark-brown);
    text-align: center;
    margin-bottom: 50px;
    position: relative;
}

.section-title::after {
    content: '';
    display: block;
    width: 100px;
    height: 3px;
    background: var(--primary-red);
    margin: 15px auto 0;
}

.author-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 50px;
    align-items: center;
}

.author-image {
    position: relative;
}

.author-photo {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.author-bio {
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: justify;
}

.btn-secondary {
    background: var(--dark-brown);
    color: var(--white);
    padding: 12px 30px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s;
    
    /* Ensure it behaves like a block/button and remove link underline */
    display: inline-block; 
    text-decoration: none;
}

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

/* Book Showcase Section */
.book-showcase-section {
    background: linear-gradient(135deg, var(--dark-maroon) 0%, var(--primary-red) 100%);
    padding: 80px 0;
    position: relative;
    overflow: hidden;
}

.showcase-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
    padding-top: 40px; /* Gives room for the title to sit high */
}

.showcase-visual-stack {
    position: relative;
    height: 450px; /* Define a height to contain the absolute elements */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.showcase-book-overlay {
    position: absolute;
    top: 50px; /* Moves the bird down slightly so it's "under" the title */
    left: -20px; /* Adjust to shift left/right */
    z-index: 1;
    width: 100%;
}
.showcase-title {
    position: relative;
    z-index: 10; /* Ensures text stays above the bird */
    font-size: 3.5rem; /* Larger for that "Title" impact */
    color: var(--white);
    line-height: 1.1;
    margin-top: 20px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.5); /* Helps readability over the gold bird */
}

.showcase-description-side {
    display: flex;
    align-items: center; /* Vertically centers the text relative to the left side */
    padding-left: 20px;
}

.crest-left-align {
    justify-content: flex-start !important; /* Ensure it doesn't center itself */
    margin-top: 20px;
}

.crest-left-align .showcase-book-img {
    max-width: 300px; /* Adjust size since it's now under text */
    margin-left: 0;
}

.crest-left-align .medallion-bg {
    /* Reposition the glowing background to align with the left-aligned image */
    left: 150px; 
    width: 350px;
    height: 350px;
}

.showcase-description {
    color: var(--gold);
    font-size: .9rem;   
    line-height: 1.8;
    text-align: left;
}

.btn-light {
    background: var(--white);
    color: var(--primary-red);
    padding: 15px 40px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-light:hover {
    background: var(--gold);
    color: var(--dark-brown);
    transform: translateY(-3px);
}

.showcase-book {
    position: relative;
    display: flex;
    justify-content: center;
}

.showcase-text-side {
    z-index: 10;
    padding-left: 30px;
}
.medallion-bg {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.2) 0%, transparent 70%);
    border: 3px solid rgba(212, 175, 55, 0.3);
    border-radius: 50%;
    top: 47%;
    left: 41%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.medallion-bg::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    border: 2px solid rgba(212, 175, 55, 0.2);
    border-radius: 50%;
    top: 10%;
    left: 10%;
}

.showcase-book-img {
    width: 100%;
    max-width: 450px; /* Adjust based on how big you want the bird */
    opacity: 0.9; /* Slight transparency can look classy */
}

/* Books Section */
.books-section {
    padding: 80px 0;
    background-color: var(--cream); 
    background-image: 
    linear-gradient(to right, rgba(61, 37, 23, 0.1) 0%, transparent 10%), 
    linear-gradient(to left, rgba(61, 37, 23, 0.1) 0%, transparent 10%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.books-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.book-card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.book-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.book-cover {
    width: 100%;
    padding-top: 150%; 
    position: relative; /* Essential for positioning the image inside */
    overflow: hidden;
}

.book-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover; 
    transition: transform 0.3s;
}

.book-card:hover .book-img {
    transform: scale(1.05); /* Slightly less aggressive scale is safer */
    transform-origin: center center;
}

.book-info {
    padding: 25px;
    display: flex;
    flex-direction: column; 
    
    /* ADD this line to make the content stretch to fill the height of the card */
    height: 100%;
}

.book-title {
    font-size: 1.5rem;
    color: var(--dark-brown);
    margin-bottom: 10px;
}

.book-subtitle {
    color: var(--primary-red);
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.book-options {
    /* Set up the two columns using flexbox */
    display: flex; 
    justify-content: space-between; /* Space out the columns */
    gap: 10px; /* Space between columns */
    margin: 15px 0 20px 0; /* Space above and below the entire price block */
    text-align: center;
}

.book-options .book-link {
    display: block; /* Makes the link fill the whole option div */
    text-decoration: none; /* Removes the underline */
    color: inherit; 
    padding: 10px 5px; /* Matches the desired internal spacing */
    height: 100%;
}
.option-kindle,
.option-paperback {
    flex: 1; /* Make both columns take up equal width */
    padding: 0;
    background-color: var(--dark-maroon);
    border: 1px solid var(--beige); /* Light border */
    border-radius: 5px;
    transition: all 0.3s;
    border-color: var(--primary-red);
}

.option-paperback {
    /* Highlight the main option */
    border-color: var(--primary-red);
    background-color: var(--dark-maroon);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.option-kindle:hover,
.option-paperback:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Styles for the format label (Kindle/Paperback) */
.book-options .book-format {
    /* Override any existing margin/padding and style it as the format title */
    margin: 0 0 5px 0;
    padding: 0;
    color: var(--beige);
    font-size: 1.05rem;
    font-weight: bold;
}

/* Styles for the price */
.book-options .book-price {
    /* Override any existing margin/padding and style it as the price */
    margin: 0;
    padding: 0;
    font-size: 1.4rem;
    color: var(--light-red);
    font-weight: bold;
}

.book-format {
    color: var(--text-dark);
    font-size: 0.9rem;
    margin: 5px 0;
}

.book-price {
    font-size: 1.3rem;
    color: var(--primary-red);
    font-weight: bold;
    margin: 15px 0;
}

.btn-book-order {
    width: 100%;
    background: var(--primary-red);
    color: var(--white);
    padding: 12px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-book-order:hover {
    background: var(--dark-maroon);
    transform: translateY(-2px);
}

/* Reviews Section */
/* Reviews Section */
.reviews-section {
    padding: 80px 0;
    background-color: var(--white); /* Base color */
    
    /* Layered linear gradients for the side-by-side brown "burn" effect */
    background-image: 
        linear-gradient(to right, rgba(61, 37, 23, 0.1) 0%, transparent 10%), 
        linear-gradient(to left, rgba(61, 37, 23, 0.1) 0%, transparent 10%);
    
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.rating-display {
    text-align: center;
    margin-bottom: 50px;
}

.stars {
    font-size: 2rem;
    color: var(--gold);
    margin-bottom: 10px;
}

.rating-text {
    font-size: 1.5rem;
    color: var(--dark-brown);
    font-weight: bold;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.reviews-row-2-flex-center {
    /* Use flexbox to easily center the items horizontally */
    display: flex;
    justify-content: center; /* This centers the items in the row */
    gap: 30px; /* Space between the two review cards */
    margin-bottom: 40px;
    
    /* Ensure the content is contained within the overall container width */
    width: 100%; 
    
    /* Optional: If the cards themselves don't span enough width, 
       we can limit the overall container width and center it, 
       but `justify-content: center` is usually enough. */
}

/* Ensure the review cards within the flex container maintain a standard width */
.reviews-row-2-flex-center > .review-card {
    /* Each card takes up 1/3 of the space minus gap, matching the top row's width */
    flex-basis: calc(33.333% - 20px); 
    max-width: 380px; /* Optional maximum width */
}





.review-card {
    background: var(--cream);
    padding: 30px;
    border-radius: 10px;
    border: 2px solid var(--primary-red);
    transition: transform 0.3s;
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(139, 30, 30, 0.2);
}

.review-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.reviewer-img circle {
    fill: var(--text-dark); /* Or a specific light grey variable */
}

.reviewer-img path {
    stroke: var(--text-dark); /* Or a specific light grey variable */
}

.reviewer-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: .5px solid var(--primary-red);
}

.reviewer-name {
    color: var(--dark-brown);
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.reviewer-title {
    color: #8B1E1E;
    font-size: 1rem;
    margin-bottom: 5px;
}

.review-stars {
    color: var(--gold);
    font-size: 1rem;
}

.review-text {
    color: var(--text-dark);
    font-style: italic;
    line-height: 1.6;
}

/* Blog Section */
.blog-section {
    padding: 80px 0;
    background-color: var(--beige); /* Base color */
    
    /* Layered linear gradients for the side-by-side brown "burn" effect */
    background-image: 
        linear-gradient(to right, rgba(61, 37, 23, 0.1) 0%, transparent 10%), 
        linear-gradient(to left, rgba(61, 37, 23, 0.1) 0%, transparent 10%);
    
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.blog-card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.blog-card:hover {
    transform: translateY(-10px);
}

.blog-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
}

.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.blog-card:hover .blog-img {
    transform: scale(1.1);
}

.blog-content {
    padding: 25px;
}

.blog-title {
    font-size: 1.3rem;
    color: var(--dark-brown);
    margin-bottom: 15px;
}

.blog-excerpt {
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.6;
}

.btn-blog {
    display: inline-block;
    background: var(--primary-red);
    color: var(--white);
    padding: 10px 25px;
    text-decoration: none;
    border-radius: 5px;
    transition: all 0.3s;
}

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

.blog-footer {
    text-align: center;
}
.bird-divider {
    width: 100%;
    height: 100px; /* Adjust based on the actual image height */
    
    /* 1. Ensure this path is correct based on your folder */
    background-image: url('asset/footer.png'); 
    
    background-repeat: repeat-x;
    background-size: auto 100%; 
    background-position: center bottom;
    background-color: transparent; 
    
    /* 2. THE GAP KILLER: Force zero margins and padding */
    margin-top: 0 !important;    
    margin-bottom: -2px !important; /* Slight negative pulls footer up to overlap slightly */
    padding: 0 !important;
    
    /* 3. THE TRANSPARENCY TRICK: Removes the white box background from the image */
    mix-blend-mode: multiply; 
    
    display: block;
    position: relative;
    z-index: 5;
}

/* Ensure the section above doesn't have a forced white background */
.gallery-section {
    background: var(--white);
    padding-bottom: 0 !important; /* Removes padding that causes the white gap */
    margin-bottom: 0 !important;
    overflow: hidden; /* Prevents internal element margins from leaking out */
}

.btn-view-more {
    display: inline-block;
    background: var(--dark-brown);
    color: var(--white);
    padding: 15px 40px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: all 0.3s;
}

.btn-view-more:hover {
    background: var(--primary-red);
    transform: translateY(-3px);
}

/* Gallery Section */
.gallery-section {
    padding: 80px 0;
    background: var(--white);
}

.gallery-note {
    text-align: center;
    color: var(--text-dark);
    font-size: 1.1rem;
    margin-bottom: 40px;
    font-style: italic;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 40px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

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

.btn-gallery {
    display: block;
    margin: 0 auto;
    background: var(--primary-red);
    color: var(--white);
    padding: 15px 40px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-gallery:hover {
    background: var(--dark-maroon);
    transform: translateY(-3px);
}

/* Contact Section */
.contact-section {
    padding: 80px 0;
    background: linear-gradient(135deg, var(--dark-maroon) 0%, var(--primary-red) 100%);
}

.section-title-light {
    font-size: 2.5rem;
    color: var(--white);
    text-align: center;
    margin-bottom: 50px;
}

.contact-form {
    max-width: 600px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 25px;
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    font-family: 'Georgia', serif;
}

.form-textarea {
    resize: vertical;
}

.btn-submit {
    width: 100%;
    background: var(--gold);
    color: var(--dark-brown);
    padding: 15px;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s;
}

.btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(212, 175, 55, 0.4);
}

/* Footer */
.footer {
    background: linear-gradient(135deg, var(--dark-maroon) 0%, #3D1414 100%);
    color: var(--white);
    padding: 60px 0 20px;
    position: relative;
    overflow: hidden;
    margin-top: 0 !important;
    border-top: none;
}

.footer-birds-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 200"><path d="M50,100 Q70,80 90,100 T130,100" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/><path d="M200,120 Q220,100 240,120 T280,120" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/><path d="M400,90 Q420,70 440,90 T480,90" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/><path d="M600,110 Q620,90 640,110 T680,110" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/><path d="M800,85 Q820,65 840,85 T880,85" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/><path d="M1000,105 Q1020,85 1040,105 T1080,105" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="2"/></svg>') repeat-x;
    opacity: 0.3;
    animation: flyBirds 30s linear infinite;
}

@keyframes flyBirds {
    from {
        background-position: 0 0;
    }
    to {
        background-position: 1200px 0;
    }
}

.footer-content {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 60px;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.footer-author {
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.footer-social {
    display: flex;
    gap: 20px;
}

.footer-social-link {
    color: var(--white);
    font-size: 1.5rem;
    transition: all 0.3s;
}

.footer-social-link:hover {
    color: var(--gold);
    transform: translateY(-5px);
}

.footer-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.footer-heading {
    font-size: 1.3rem;
    margin-bottom: 20px;
    color: var(--gold);
}

.footer-links,
.footer-contact {
    list-style: none;
}

.footer-links li,
.footer-contact li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-links a:hover {
    color: var(--gold);
}

.footer-contact li {
    color: var(--cream);
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-contact i {
    color: var(--gold);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,0.2);
    position: relative;
    z-index: 1;
}

.copyright {
    color: var(--cream);
    font-size: 0.95rem;
}

/* Animations */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .main-nav {
        display: none;
    }

    .mobile-toggle {
        display: block;
    }

    .hero-content,
    .author-content,
    .showcase-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .showcase-content {
        grid-template-columns: 1fr;
    }
    .showcase-visual-stack {
        height: auto;
        margin-bottom: 50px;
    }
    .showcase-book-overlay {
        position: relative;
        top: 0;
        left: 0;
        margin-top: -50px;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .books-grid,
    .reviews-grid,
    .blog-grid,
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .header-right {
        display: none;
    }

    .hero-title {
        font-size: 2rem;
    }

    .books-grid,
    .blog-grid,
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .reviews-grid {
        grid-template-columns: 1fr;
    }

    .reviews-grid > .review-card:nth-child(4) {
        grid-column: auto; /* Reset column span */
        grid-column-start: auto;
        display: block; /* Reset display to default */
        margin: 0;
    }

    .reviews-grid > .review-card:nth-child(4), 
    .reviews-grid > .review-card:nth-child(5) {
        max-width: 100%; 
        width: 100%;
    }
    

    /* Hide the 6th card slot if we only have 5 reviews */
    .reviews-grid > .review-card:nth-child(6) {
        display: none;
    }

    .section-title {
        font-size: 2rem;
    }

    .showcase-title {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    .author-name {
        font-size: 1.2rem;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .hero-description {
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.8rem;
    }
}