/* Modern Minimal Home Design - Fixed Layout */
@import url('https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css');

:root {
    --primary-color: #3b82f6;
    --secondary-color: #1e293b;
    --accent-color: #f59e0b;
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --bg-light: #f1f5f9;
    --white: #ffffff;
    --radius-lg: 1rem;
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

body {
    font-family: 'Vazirmatn', sans-serif !important;
    background-color: #f1f5f9;
    color: var(--text-main);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* --- Global Utilities --- */
.container-custom {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
    height: 100%;
    /* Important for flex height */
}

.section {
    padding: 5rem 0;
}

/* ============================================
   SECTION SPACING & HEADERS
   ============================================ */

.section {
    padding: 2rem 0;
    /* Further reduced for tighter spacing */
}

.trending-section,
.latest-section {
    background: #f9fafb;
    /* Light gray background */
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 2rem;
}

.section-label {
    color: var(--primary-color);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
}

.section-heading {
    font-size: 1.5rem;
    /* Reduced from 2rem */
    font-weight: 800;
    margin-top: 0.5rem;
    margin-bottom: 0;
    color: var(--secondary-color);
}

.section-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.section-link:hover {
    color: #2563eb;
}

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

.text-right {
    text-align: right;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    border-radius: 9999px;
    font-weight: 600;
    transition: all 0.2s;
    cursor: pointer;
    text-decoration: none;
}

/* رنگ قرمز برای دکمه اصلی طبق درخواست */
.btn-primary {
    background-color: #ef4444;
    color: white;
    box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.39);
}

.btn-primary:hover {
    transform: translateY(-2px);
    background-color: #dc2626;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.23);
}

.section-title {
    font-size: 2.25rem;
    font-weight: 800;
    margin-bottom: 3rem;
    color: var(--secondary-color);
    position: relative;
    display: inline-block;
}

/* ============================================
   HERO SECTION - FIXED DESKTOP LAYOUT
   ============================================ */

.hero-section {
    background: #f1f5f9;
    position: relative;
    min-height: 500px;
    height: 65vh;
    max-height: 700px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hero-grid {
    width: 100%;
    height: 100%;
    position: static;
    display: flex;
    align-items: center;

    /* جهت LTR و justify-start باعث می‌شود باکس متن به سمت چپ صفحه تمایل داشته باشد */
    direction: ltr;
    justify-content: flex-start;
}

/* Hero Content - Desktop Positioning */
.hero-content {
    position: relative;
    z-index: 20;

    /* بازگشت جهت متن به فارسی */
    direction: rtl;
    text-align: right;

    /* اصلاح نهایی: عرض 70٪ و مارجین منفی بیشتر برای کشیدن به چپ */
    width: 70%;
    max-width: 1000px;
    /* افزایش حداکثر عرض */

    /* کشیدن باکس به سمت بیرون (چپ) برای جابجایی لبه متن به چپ */
    margin-left: -25%;

    padding-left: 0;
    padding-right: 2rem;
}

.hero-content h1 {
    /* اصلاح سایز فونت */
    font-size: 1.8rem;
    line-height: 1.5;
    font-weight: 900;
    color: var(--secondary-color);
    margin: 0 0 1.5rem 0;
}

.hero-content p {
    font-size: 1rem;
    color: var(--text-muted);
    margin: 0 0 1.25rem 0;
    line-height: 1.8;
    max-width: 100%;
}

/* Hero Search Box with Animated Border */
.search-border-wrapper {
    position: relative;
    padding: 2px;
    border-radius: 10px;
    background: linear-gradient(90deg,
            #60a5fa,
            #a78bfa,
            #f472b6,
            #fb923c,
            #fbbf24,
            #60a5fa);
    background-size: 300% 300%;
    animation: shine-rotate 8s linear infinite;
    margin-bottom: 1.5rem;
    max-width: 280px;
    /* More compact */
}

.hero-search-box {
    position: relative;
    background: white;
    border-radius: 8px;
}

.hero-search-box input {
    width: 100%;
    padding: 0.65rem 2.5rem 0.65rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
    background: transparent;
}

.hero-search-box input:focus {
    outline: none;
}

.hero-search-box .search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.1rem;
    pointer-events: none;
    opacity: 0.5;
}

.hero-content>div {
    /*display: flex;*/
    gap: 1rem;
    justify-content: flex-start;
}

/* Hero Image - Absolute Background on Right */
.hero-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    /* نصف صفحه برای عکس */
    height: 100%;
    z-index: 10;
}

.hero-image img {
    height: 100%;
    width: 100%;
    object-fit: contain;
    /* جلوگیری از ناقص شدن عکس */
    object-position: right center;
    /* چسبیدن به راست */
}

/* ============================================
   SERVICES SECTION - MODERN CAROUSEL DESIGN
   ============================================ */

.services-section {
    background: #f8f9fa;
    padding: 5rem 0;
}

.services-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3.5rem;
}

.services-header h2 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--secondary-color);
    margin-bottom: 0.75rem;
}

.services-header p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.7;
}

/* Carousel Container with Navigation */
.services-carousel-wrapper {
    position: relative;
    padding: 0 3rem;
    /* Space for arrows */
}

/* Services Carousel - Horizontal Scroll */
.services-carousel {
    display: flex;
    gap: 1.5rem;
    overflow-x: hidden;
    /* Hide scrollbar */
    scroll-behavior: smooth;
    padding: 2.5rem 0 2rem;
    /* Top padding for protruding icons */
    -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar completely */
.services-carousel::-webkit-scrollbar {
    display: none;
}

/* Navigation Arrows */
.carousel-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 45px;
    height: 45px;
    background: white;
    border-radius: 50%;
    border: none;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #1a1a1a;
    transition: all 0.3s ease;
    z-index: 10;
}

.carousel-nav:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transform: translateY(-50%) scale(1.05);
}

.carousel-nav.prev {
    left: 0;
}

.carousel-nav.next {
    right: 0;
}

/* Service Card - Reduced Height */
.service-card {
    flex: 0 0 280px;
    background: white;
    border-radius: 16px;
    padding: 3rem 1.75rem 1.75rem 1.75rem;
    /* Extra top padding for icon */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    text-align: right;
    display: flex;
    flex-direction: column;
    position: relative;
    min-height: 240px;
    /* Reduced from default */
}

.service-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

/* Service Icon Circle - Protruding from Card */
.service-icon {
    position: absolute;
    top: -32px;
    /* Half outside */
    right: 1.75rem;
    /* Align with card padding */
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Icon Color Variants */
.icon-purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.icon-pink {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.icon-green {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.icon-orange {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.icon-blue {
    background: linear-gradient(135deg, #30cfd0 0%, #330867 100%);
}

/* Service Card Text */
.service-card h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.6rem;
    line-height: 1.4;
}

.service-card p {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 1rem;
    flex-grow: 1;
}

/* Service Link */
.service-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: #ef4444;
    text-decoration: none;
    transition: color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.service-link:hover {
    color: #dc2626;
}

/* Services CTA Button */
.services-cta {
    text-align: center;
    margin-top: 3rem;
}

.btn-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, #ff1744 0%, #f50057 100%);
    color: white;
    font-size: 1rem;
    font-weight: 700;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(255, 23, 68, 0.3);
    transition: all 0.3s ease;
}

.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(255, 23, 68, 0.4);
}

/* SLIDERS */

.slider-container {
    position: relative;
    overflow: visible;
    padding: 1rem 0 0rem;
    min-height: 600px;
}

.slider-track {
    display: flex;
    gap: 2rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 2rem 1rem 0rem 1rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f3f4f6;
    align-items: flex-start;
}

.slider-track::-webkit-scrollbar {
    height: 8px;
}

.slider-track::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 10px;
}

.slider-track::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

.slider-track::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ============================================
   PRODUCT CARD
   ============================================ */

.book-card {
    flex: 0 0 280px;
    min-height: 480px;
    position: relative;
    margin-bottom: 60px;
    margin-left: 10px;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
}

.book-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: -20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='100 40 350 539' preserveAspectRatio='none'%3E%3Cpath d='M139 489C154.464 489 167 501.536 167 517V551C167 566.464 154.464 579 139 579H128C112.536 579 100 566.464 100 551V517C100 501.536 112.536 489 128 489H139ZM408 40C431.196 40 450 58.804 450 82V537C450 560.196 431.196 579 408 579H219C195.804 579 177 560.196 177 537V517.5C177 496.569 160.298 479.54 139.494 479.013L137.506 478.987C116.702 478.46 100 461.431 100 440.5V82C100 58.804 118.804 40 142 40H408Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    filter: drop-shadow(0 10px 40px rgba(0, 0, 0, 0.1));
    z-index: 0;
    transition: filter 0.3s ease;
}

.book-card:hover::before {
    filter: drop-shadow(0 20px 60px rgba(0, 0, 0, 0.15));
}

.book-card>* {
    position: relative;
    z-index: 1;
}

.book-image-container {
    padding: 12px 12px 0 12px;
    position: relative;
    display: block;
    text-decoration: none;
    transition: opacity 0.3s;
}

.book-image-container:hover {
    opacity: 0.9;
}

.book-title-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.book-title-link:hover .book-title {
    color: var(--primary-color);
}

.book-cover {
    height: 280px;
    width: 100%;
    object-fit: cover;
    border-radius: 1.25rem;
    display: block;
}

.book-badge {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    background-color: #22c55e;
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    border-radius: 2rem;
    z-index: 10;
    box-shadow: 0 4px 10px rgba(34, 197, 94, 0.3);
}

.book-details {
    padding: 1rem 1.25rem 4rem 1.25rem;
    text-align: right;
    position: relative;
}

.book-title {
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--secondary-color);
    margin: 0 0 0.4rem 0;
    line-height: 1.4;
}

.book-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 0.5rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book-price {
    font-weight: 800;
    font-size: 1.1rem;
    color: var(--text-main);
    display: block;
    margin-top: 0.5rem;
}

.book-action-btn {
    position: absolute;
    bottom: -15px;
    left: -5px;
    width: 55px;
    height: 55px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: var(--text-main);
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 10;
}

.book-action-btn:hover {
    color: var(--primary-color);
}

/* ============================================
   ABOUT SECTION - WITH ANIMATED GRADIENT BORDER
   ============================================ */

.about-section {
    background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
}

/* Animated Gradient Border Wrapper */
.shine-border-wrapper {
    position: relative;
    padding: 3px;
    /* Border width */
    border-radius: 2rem;
    background: linear-gradient(90deg,
            #60a5fa,
            #a78bfa,
            #f472b6,
            #fb923c,
            #fbbf24,
            #60a5fa);
    background-size: 300% 300%;
    animation: shine-rotate 8s linear infinite;
}

@keyframes shine-rotate {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

.about-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    background: white;
    border-radius: 2rem;
    padding: 3rem;
    position: relative;
}

.about-text {
    text-align: right;
    order: 1;
    /* Text first in RTL */
}

.about-text h2 {
    font-size: 2.25rem;
    margin-bottom: 1.25rem;
    font-weight: 800;
    color: var(--secondary-color);
}

.about-text p {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* Stats */
.about-stats {
    display: flex;
    gap: 3rem;
    justify-content: flex-start;
}

.stat-item {
    text-align: center;
}

.stat-item h3 {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0 0 0.5rem 0;
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-item span {
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* Image */
.about-image {
    order: 2;
    /* Image second in RTL */
}

.about-image img {
    width: 100%;
    height: auto;
    border-radius: 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* ============================================
   FOOTER - MODERN MINIMAL DESIGN
   ============================================ */

.footer-modern {
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: 3rem 0 1.5rem;
}

/* Top Row: Logo + Tagline */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 2.5rem;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 0.15rem;
}

.footer-logo .logo-text {
    font-size: 1.35rem;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.5px;
}

.footer-logo .logo-dot {
    color: #3b82f6;
    font-size: 1rem;
}

.footer-tagline {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
    max-width: 400px;
    text-align: left;
}

/* Middle Row: 3 Columns + Contact */
.footer-middle {
    display: grid;
    grid-template-columns: 1fr 1fr 1.5fr;
    gap: 3rem;
    margin-bottom: 2.5rem;
}

.footer-col h4 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 1rem;
}

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

.footer-col li {
    margin-bottom: 0.65rem;
}

.footer-col a {
    color: #6b7280;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s;
}

.footer-col a:hover {
    color: #1a1a1a;
}

/* Contact List with Icons */
.contact-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
}

.contact-list svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.contact-list a {
    color: #6b7280;
}

/* Social Icons */
.footer-social {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}

.footer-social a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    transition: all 0.2s;
}

.footer-social a:hover {
    background: #1a1a1a;
    color: white;
}

/* Bottom Row: Copyright + Legal */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.footer-copyright {
    font-size: 0.85rem;
    color: #9ca3af;
    margin: 0;
}

.footer-legal {
    display: flex;
    gap: 1.5rem;
}

.footer-legal a {
    font-size: 0.85rem;
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s;
}

.footer-legal a:hover {
    color: #1a1a1a;
}

/* ============================================
   RESPONSIVE - TABLET
   ============================================ */

@media (max-width: 1024px) {
    .hero-content {
        width: 60%;
        max-width: none;
        padding-left: 2rem;
        margin-left: 0;
        /* Reset for tablet if needed, or keep negative */
    }

    .hero-content h1 {
        font-size: 2.2rem;
    }

    .hero-image {
        width: 50%;
    }

    .about-split {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

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

/* ============================================
   RESPONSIVE - MOBILE
   Image on TOP, Text BELOW
   ============================================ */

@media (max-width: 768px) {
    .hero-section {
        height: auto;
        min-height: auto;
        max-height: none;
        padding-top: 0;
        display: block;
        /* Remove flex to let normal flow handle it, or use flex column */
    }

    .hero-grid {
        display: flex;
        flex-direction: column;
        height: auto;
        padding: 0;
        direction: rtl;
        /* بازگشت به RTL برای موبایل */
    }

    /* FIX: Remove container padding in mobile to remove side gaps */
    .hero-section .container-custom {
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    /* 1. Image on TOP */
    .hero-image {
        position: relative;
        width: 100%;
        height: 350px;
        order: 1;
        right: auto;
        top: auto;
    }

    .hero-image img {
        position: absolute;
        width: 100%;
        height: 100%;
        /* برگرداندن به cover برای موبایل چون ابعاد فیکس است */
        object-fit: cover;
        object-position: center top;
        /* Center image focus for mobile */
    }

    /* 2. Text BELOW Image */
    .hero-content {
        position: relative;
        width: 100%;
        max-width: 100%;
        padding: 2rem 1.5rem;
        text-align: center;
        order: 2;
        padding-left: 1.5rem;
        /* Reset desktop padding */
        padding-right: 1.5rem;
        background: #f1f5f9;
        /* Match bg */
        margin-top: 0;
        /* Remove negative margin to prevent overlap */
        margin-left: 0;
        /* Reset negative margin for mobile */
        z-index: 20;
    }

    .hero-content h1 {
        font-size: 1.8rem;
        text-align: center;
        margin-bottom: 1rem;
    }

    .hero-content p {
        text-align: center;
        margin-bottom: 1.5rem;
        font-size: 1rem;
        max-width: 100%;
    }

    .hero-content>div {
        justify-content: center;
        flex-direction: column;
        gap: 0.75rem;
    }

    .hero-content .btn {
        width: 100%;
        justify-content: center;
    }

    /* Services Section - Mobile: Vertical Stack */
    .services-section {
        padding: 3rem 0;
    }

    .services-header h2 {
        font-size: 1.8rem;
    }

    /* Hide carousel wrapper padding and navigation arrows */
    .services-carousel-wrapper {
        padding: 0;
    }

    .carousel-nav {
        display: none;
        /* Hide arrows on mobile */
    }

    .services-carousel {
        flex-direction: column;
        overflow-x: visible;
        gap: 1.25rem;
        padding: 0;
    }

    .service-card {
        flex: 1 1 auto;
        width: 100%;
        padding: 3rem 1.5rem 1.5rem;
        /* Maintain top padding for icon */
    }

    /* Icon stays protruding on mobile */
    .service-icon {
        right: 50%;
        transform: translateX(50%);
        /* Center the icon */
    }

    .services-cta {
        margin-top: 2rem;
    }

    .btn-cta {
        width: 100%;
        padding: 1rem 2rem;
    }

    /* Footer - Mobile Optimization */
    .footer-modern {
        padding: 2rem 0 1rem;
    }

    .footer-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding-bottom: 2rem;
        margin-bottom: 2rem;
    }

    .footer-tagline {
        text-align: right;
        max-width: 100%;
    }

    .footer-middle {
        grid-template-columns: 1fr 1fr;
        /* Two columns for Company & Navigation */
        gap: 1.5rem 1rem;
        /* Reduce gap */
    }

    .footer-contact {
        grid-column: 1 / -1;
        /* Span full width */
        order: 3;
        /* Move to bottom */
    }

    .footer-social {
        justify-content: flex-start;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.25rem;
        padding-top: 1.25rem;
    }

    .footer-legal {
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
    }

    .about-split {
        padding: 2rem;
    }

    /* About Section - Mobile: Image top, Text bottom */
    .shine-border-wrapper {
        padding: 2px;
        /* Thinner border on mobile */
    }

    .about-split {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }

    .about-text {
        text-align: center;
        order: 2;
        /* Text below image */
    }

    .about-image {
        order: 1;
        /* Image on top */
    }

    .about-stats {
        justify-content: center;
        gap: 2rem;
    }

    .stat-item h3 {
        font-size: 2rem;
    }

    .book-card {
        flex: 0 0 240px;
        min-height: 420px;
    }

    .book-cover {
        height: 220px;
    }
}