@font-face {
    font-family: 'Fafo Sans';
    src: url('./fafo_sans/Fafo Sans Regular.woff2') format('woff2'),
       url('./fafo_sans/Fafo Sans Regular.woff') format('woff'),
       url('./fafo_sans/Fafo Sans Regular.otf') format('opentype'),
       url('./fafo_sans/Fafo Sans Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
    @font-face {
  font-family: 'Fafo Sans';
  src: url('./fafo_sans/Fafo Sans Bold.woff2') format('woff2'),
       url('./fafo_sans/Fafo Sans Bold.woff') format('woff'),
       url('./fafo_sans/Fafo Sans Bold.otf') format('opentype'),
       url('./fafo_sans/Fafo Sans Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
.cart-modal-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent overlay */
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 1000;
    }
    
    .cart-modal-content {
      background: white;
      border-radius: 1.5rem;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
      max-width: 56rem;
      width: 90%;
      max-height: 90vh;
      overflow-y: auto;
      position: relative;
    }
.hero-bg, .hero-bg-mobile {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
        }

        .hero-bg.active {
            opacity: 1;
        }

        .floating-elements {
            transition: opacity 1.5s ease-in-out;
        }

        .floating-elements.hidden {
            opacity: 0;
        }

        .hero-bg-1 {
            background-image: url('./images/Group 167.png');
            background-size:cover;
            background-position: center;
            overflow-y: visible;
        }

        .hero-bg-2 {
            background-image: url('./images/Red Banner.png');
            background-size: cover;
            background-position: center;
        }

        .hero-bg-3 {
            background-image: url('./images/Yellow Banner.png');
            background-size: cover;
            background-position: center;
        }

        .hero-bg-mobile {
            background-image: url('./images/mobile-banner.png');
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            z-index:0;
        }

        @media (max-width: 768px) {
            .hero{
      align-items: center !important;
      text-align: center !important;
    
  }
          .hero-bg{
            display: none;
          }
            .hero-bg-mobile {
                display: block;
                opacity: 1;
            }
        }


        * {
            font-family: 'Fafo Sans', sans-serif;
        }
        @keyframes float {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        .float-animation {
            animation: float 3s ease-in-out infinite;
        }

@media (max-width: 768px) {

  /* ---------- CARDS (PRODUCTS / NOVELS / TESTIMONIALS) ---------- */
  .grid.md\:grid-cols-2.lg\:grid-cols-3,
  .grid.grid-cols-1.md\:grid-cols-2 {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    justify-items: center !important;
  }

  .relative.w-\[400px\],
  .testimonial-card {
    width: 100% !important;
    max-width: 300px !important;
    min-height: 420px !important;
    padding: 1.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .relative.w-\[400px\] .bg-\[\#E52C4F\],
  .relative.w-\[400px\] .bg-\[\#A7D341\],
  .relative.w-\[400px\] .bg-\[\#F7CC38\] {
    padding: 1.25rem !important;
    border-radius: 1.5rem !important;
    min-height: 100% !important;
  }

  .relative.w-\[400px\] h2,
  .testimonial-card h3 {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }

  .relative.w-\[400px\] p,
  .testimonial-card p {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }

  .relative.w-\[400px\] img {
    width: 9rem !important;
    margin: 0 auto !important;
  }

  /* ---------- HIDE FLOATING DECORATIONS ---------- */
  .absolute.left-10,
  .absolute.right-10,
  .absolute.top-20,
  .absolute.top-\[15\%\] {
    display: none !important;
  }

  /* ---------- FOOTER ---------- */
  .grid.md\:grid-cols-2.lg\:grid-cols-4 {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
}

/* SMALL MOBILE */
@media (max-width: 480px) {

  h1.pt-\[6rem\] {
    font-size: 2rem !important;
  }

  .relative.w-\[400px\],
  .testimonial-card {
    max-width: 260px !important;
    min-height: 400px !important;
    padding: 1rem !important;
  }

  .relative.w-\[400px\] h2 {
    font-size: 1.5rem !important;
  }
}