.book-card {
    position: relative;
    width: 100%;
    height: 100%;
    perspective: 1000px;
    margin: auto;
    transition: transform 0.8s ease, box-shadow 0.5s ease;
  }

  .book-card img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 15px 15px 30px rgba(0,0,0,0.25);
    transform: rotateY(-8deg) translateX(-5px);
    transition: all 0.5s ease-in-out;
    border: 3px solid #fff;
  }

  .book-card::before {
    content: "";
    position: absolute;
    right: -10px;
    top: 0;
    width: 10px;
    height: 100%;
    background: linear-gradient(to right, #ddd, #bbb);
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  .book-card:hover img {
    transform: rotateY(-2deg) translateX(0);
    box-shadow: 25px 25px 40px rgba(0,0,0,0.35);
  }

  /* Marquee Animation */
  @keyframes marquee {
    0% { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
  }

  .animate-marquee {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 15s linear infinite;
  }
           body{box-sizing: border-box;
        }
        
        .font-montserrat { font-family: 'Montserrat', sans-serif; }
        .font-lato { font-family: 'Lato', sans-serif; }
        .font-playfair { font-family: 'Playfair Display', serif; }
        
        .bg-soft-beige { background-color: #FAF6F0; }
        .bg-pastel-mint { background-color: #C9E4CA; }
        .text-warm-gray { color: #8A8A8A; }
        .bg-blush-pink { background-color: #F4D6D3; }
        .text-blush-pink { color: #F4D6D3; }
        
        .hero-gradient {
            background: linear-gradient(135deg, #FAF6F0 0%, #F4D6D3 100%);
        }
        
        .card-shadow {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        }
        
        .soft-glow {
            box-shadow: 0 0 20px rgba(196, 228, 202, 0.4);
        }
        
        .typewriter {
            overflow: hidden;
            border-right: 2px solid #C9E4CA;
            white-space: nowrap;
            animation: typing 3s steps(40, end), blink-caret 0.75s step-end infinite;
        }
        
        @keyframes typing {
            from { width: 0; }
            to { width: 100%; }
        }
        
        @keyframes blink-caret {
            from, to { border-color: transparent; }
            50% { border-color: #C9E4CA; }
        }
        
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }
        
        .fade-in.visible {
            opacity: 1;
            transform: translateY(0);
        }
        
        .floating {
            animation: float 3s ease-in-out infinite;
        }
        
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
        }
        
        .slide-up {
            animation: slideUp 20s linear infinite;
        }
        
        @keyframes slideUp {
            0% { transform: translateY(100%); }
            100% { transform: translateY(-100%); }
        }
        
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
        }
        
        .modal.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .carousel-container {
            position: relative;
            overflow: hidden;
        }
        
        .carousel-slide {
            display: none;
            animation: fadeSlide 0.5s ease-in-out;
        }
        
        .carousel-slide.active {
            display: block;
        }
        
        @keyframes fadeSlide {
            from { opacity: 0; transform: translateX(20px); }
            to { opacity: 1; transform: translateX(0); }
        }
        
        .nav-mobile {
            transform: translateX(-100%);
            transition: transform 0.3s ease;
        }
        
        .nav-mobile.open {
            transform: translateX(0);
        }