.hero-bg {
            background-color: #f9e4bc;
            padding: 40px 0;
            text-align: center;
        }
        .navbar-nav {
            margin-left: auto;
        }
        .nav-item {
            margin-left: 15px;
        }
        .nav-item .nav-link {
            color: #000;
            transition: color 0.3s;
        }
        .nav-item .nav-link:hover {
            color: #007bff;
            text-decoration: underline;
        }
        .newsletter {
            background-color: #f1f1f1;
            padding: 20px;
            text-align: center;
        }
        .resources {
            padding: 40px 0;
            text-align: center;
        }
        .about-img {
            max-width: 200px;
            border-radius: 50%;
        }
        /* Mobile-specific styles */
        @media (max-width: 768px) {
            .navbar-nav {
                flex-direction: column;
                align-items: center;
                width: 100%;
            }
            .navbar-collapse {
                background-color: #f8f9fa;
                padding: 10px;
            }
            .navbar-nav .nav-item {
                margin: 10px 0;
            }
            .navbar-nav .nav-link {
                font-size: 1.2rem;
                padding: 10px;
                width: 100%;
                text-align: center;
            }
            .carousel-caption {
                display: block !important;
                font-size: 0.9rem;
            }
            .carousel-caption h5 {
                font-size: 1rem;
            }
            .about-img {
                max-width: 150px;
            }
            .newsletter form {
                max-width: 90%;
                margin: 0 auto;
            }
            .resources .card {
                margin-bottom: 15px;
            }
        }
        @media (max-width: 576px) {
            .newsletter h3 {
                font-size: 1.2rem;
            }
            .newsletter .form-control {
                font-size: 0.9rem;
            }
            .about-img {
                max-width: 120px;
            }
        }



  /* ========== Variables ========== */
  :root{
    --slider-height-desktop: 582px;   /* desktop carousel height */
    --slider-height-tablet: 520px;
    --bio-width-desktop: 38%;
    --bio-bg-desktop: rgba(0,0,0,0.45);
    --bio-padding: 1.25rem;
    --bio-radius: 12px;

    /* Mobile preview height for collapsed bio (adjust if you want more preview) */
    --bio-mobile-preview-height: 120px;
  }

  /* ========== Base slider ========== */
  #slider{
    position: relative;
    overflow: hidden;
  }
  .carousel-inner, .carousel-item { width: 100%; }

  /* Desktop/tabled fixed-height area (so overlay sits at center) */
  @media (min-width: 768px) {
    #slider { height: var(--slider-height-desktop); }
    @media (min-width: 992px) {
      #slider { height: var(--slider-height-desktop); }
    }
  }

  /* ========== Carousel item background for md+ (desktop) ========== */
  .carousel-item-bg {
    display: none; /* only used on md+ as background */
  }
  @media (min-width: 768px) {
    .carousel-item-bg {
      display: block;
      position: absolute;
      inset: 0;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center center;
      z-index: 0;
    }
    .carousel-inner, .carousel-item { height: 100%; }
  }

  /* ========== Hero image for mobile: show full image (uncropped) ========== */
  .hero-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain; /* keep full image visible */
  }
  @media (min-width: 768px) {
    .hero-img { display: none; } /* hide on md+ (we use background image there) */
  }

  /* ========== Desktop Bio overlay (right, vertically centered) ========== */
  .bio {
    display: none; /* only desktop/tablet overlay */
  }
  @media (min-width: 768px) {
    .bio {
      display: block;
      position: absolute;
      top: 50%;
      right: 5%;
      transform: translateY(-50%);
      width: var(--bio-width-desktop);
      background: var(--bio-bg-desktop);
      color: #fff;
      padding: var(--bio-padding);
      border-radius: var(--bio-radius);
      z-index: 5;
      box-shadow: 0 6px 18px rgba(0,0,0,0.35);

      /* scrolling if long */
      max-height: calc(var(--slider-height-desktop) - 60px);
      overflow-y: auto;
    }
  }

  .bio h4 { margin: 0 0 0.5rem; font-weight:700; font-size:1.25rem; }
  .bio .bio-content { margin: 0; line-height: 1.55; white-space: pre-wrap; }

  /* subtle scrollbar */
  .bio::-webkit-scrollbar { width: 8px; }
  .bio::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); border-radius:8px; }

  /* ========== Mobile bio (below image) ========== */
  .bio-mobile {
    display: block;
    background: rgba(0,0,0,0.65);
    color: #fff;
    padding: 1rem;
    border-radius: 12px 12px 8px 8px;
    margin: 12px 12px 20px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.25);
    line-height: 1.5;
  }

  /* Collapsed preview state with gradient fade */
  .bio-mobile .preview {
    max-height: var(--bio-mobile-preview-height);
    overflow: hidden;
    position: relative;
    transition: max-height .28s ease;
    white-space: pre-wrap;
  }
  .bio-mobile .preview::after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 3.4rem;
    background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.66));
    pointer-events: none;
  }
  .bio-mobile.expanded .preview {
    max-height: none;
  }
  .bio-mobile.expanded .preview::after { display: none; }

  .bio-mobile .actions {
    margin-top: 0.6rem;
    display:flex;
    gap:.5rem;
    align-items:center;
  }
  .btn-see {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.14);
    color: #fff;
    padding: .35rem .7rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
  }

  /* Hide mobile bio on md+ (desktop shows overlay) */
  @media (min-width: 768px) {
    .bio-mobile { display: none; }
  }

  /* ========== Slight responsive tweaks ========== */
  @media (max-width: 576px) {
    :root { --bio-mobile-preview-height: 110px; }
    .bio-mobile { margin: 10px; padding: 0.9rem; border-radius: 10px; }
  }

  /* carousel controls stacking */
  .carousel-control-prev, .carousel-control-next {
    z-index: 6; /* above desktop overlay */
  }
  


  

  /* section styles */
  .section-title {
    font-weight: 800;
    font-size: 2.25rem;
    letter-spacing: .02em;
    margin: 2.25rem 0 1rem;
    text-align: center;
  }

  /* Tabs & mobile categories */
  #mobile-categories { margin-bottom: 1rem; }
  #mobile-categories .list-group-item { cursor: pointer; }
  .category-tag {
    display: inline-block;
    font-size: .75rem;
    background: rgba(0,0,0,0.06);
    color: #333;
    padding: .18rem .5rem;
    border-radius: 10px;
    margin-bottom: .45rem;
    font-weight: 600;
  }

  /* Article cards */
  .article-card .card {
    border: 0;
    border-radius: .5rem;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(12, 18, 26, 0.06);
    transition: transform .18s ease, box-shadow .18s ease;
    height: 100%;
  }
  .article-card .card:hover { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(12,18,26,0.12); }

  .article-card .card-img-top {
    height: 160px;
    object-fit: cover;
    width: 100%;
    display: block;
  }
  @media (max-width: 576px) {
    .article-card .card-img-top { height: 200px; } /* make image taller on extra-small for visual */
  }

  .article-title { font-size: 1rem; margin: 0.25rem 0; font-weight:700; }
  .article-date { color:#666; font-size:.85rem; margin:0; }

  /* hide/show animation */
  .article-card { transition: opacity .18s ease, transform .18s ease; }
  .article-card.hidden { opacity: 0; pointer-events: none; transform: scale(.995); display: none; }
  .article-card a{ text-decoration: none; color: inherit; }

  /* Pagination styling (centered already by Bootstrap) */
  .pagination .page-link { border-radius: .35rem; }

  /* Books carousel / list */
  .carousel-book { text-align:center; padding: 0.65rem; }
  .carousel-book img { width: 140px; height: 210px; object-fit: cover; border-radius: 6px; display:block; margin: 0 auto 0.6rem; }
  .book-title { font-weight:700; font-size:.95rem; margin:0; }
  .book-price { color:#666; font-size:.9rem; margin:0.15rem 0 0; }

  /* Desktop: show carousel (slides contain multiple .carousel-book) */
  #bookCarousel .carousel-inner .carousel-item { padding: 1.25rem 0; }
  #bookCarousel .carousel-book { width: 180px; }

  /* Mobile books: horizontal scroller (visible only on small screens) */
  .books-scroll { display:flex; gap:1rem; overflow-x:auto; padding: 12px 8px; -webkit-overflow-scrolling: touch; }
  .books-scroll .carousel-book { flex: 0 0 auto; width: 140px; }

  /* Hide desktop carousel on small screens and hide scroller on md+ */
  @media (max-width: 767.98px) {
    #bookCarousel .d-md-block { display:none !important; } /* ensure desktop-style multi-item carousel hidden */
    .books-scroll { display:flex; }
  }
  @media (min-width: 768px) {
    .books-scroll { display:none; }
  }

  /* small tweaks */
  .section-container { padding: 1.25rem 0 3rem; }
  .category-filter.active, .list-group-item.active { background-color:#0d6efd; color:#fff; border-color:#0d6efd; }