/* =====================================
   LIBRARY V2.3
   3D LOGO MAKER
===================================== */

:root{

   --bg:#ffffff;
   --text:#111111;
   --muted:#666666;

   --card:#ffffff;

   --border:#e8e8e8;

   --shadow:
   0 10px 30px
   rgba(0,0,0,.05);

   --container:1280px;

}

/* =====================================
   THEMES
===================================== */

.theme-light{

   --bg:#ffffff;

   --text:#111111;

   --muted:#666666;

   --card:#ffffff;

   --border:#e8e8e8;

}

.theme-paper{

   --bg:#f6f1e7;

   --text:#2b2b2b;

   --muted:#666666;

   --card:#fbf7ef;

   --border:#dfd8ca;

}

.theme-dark{

   --bg:#101010;

   --text:#f5f5f5;

   --muted:#a1a1a1;

   --card:#171717;

   --border:#2a2a2a;

}

/* =====================================
   RESET
===================================== */

*{

   margin:0;
   padding:0;

   box-sizing:border-box;

}

html{

   scroll-behavior:smooth;

}

body{

   background:var(--bg);

   color:var(--text);

   font-family:

   Inter,
   Arial,
   sans-serif;

   line-height:1.7;

   transition:

   background .25s,
   color .25s;

}

img{

   display:block;

   max-width:100%;

}

a{

   color:inherit;

   text-decoration:none;

}

button{

   font-family:inherit;

}

.container{

   max-width:

   var(--container);

   margin:auto;

   padding:

   0 24px;

}

/* =====================================
   HEADER
===================================== */

.header{

   position:sticky;

   top:0;

   z-index:999;

   background:var(--bg);

   border-bottom:

   1px solid var(--border);

   transition:.25s;

}

.header.scrolled{

   box-shadow:var(--shadow);

}

.headerContainer{

   height:78px;

   display:flex;

   align-items:center;

   justify-content:space-between;

}

.logoLink{

   display:flex;

   align-items:center;

}

.logoLink img{

   width:52px;

   height:52px;

   object-fit:contain;

}

.desktopNav{

   display:flex;

   align-items:center;

   gap:42px;

}

.desktopNav a{

   color:var(--muted);

   font-size:15px;

   font-weight:500;

   transition:.2s;

}

.desktopNav a:hover,
.desktopNav a.active{

   color:var(--text);

}

.navActions{

   display:flex;

   align-items:center;

   gap:10px;

}

/* =====================================
   ICON BUTTON
===================================== */

.iconBtn{

   width:42px;

   height:42px;

   border:none;

   border-radius:12px;

   background:var(--card);

   border:

   1px solid var(--border);

   cursor:pointer;

   display:flex;

   align-items:center;

   justify-content:center;

}

.iconBtn img{

   width:20px;

   height:20px;

}

/* =====================================
   DROPDOWNS
===================================== */

.dropdownWrap{

   position:relative;

}

.dropdownMenu{

   display:none;

   position:absolute;

   top:56px;

   right:0;

   background:var(--card);

   border:

   1px solid var(--border);

   border-radius:14px;

   overflow:hidden;

   box-shadow:

   0 15px 40px
   rgba(0,0,0,.08);

}

.dropdownMenu.active{

   display:block;

}

.languageMenu{

   width:72px;

}

.themeMenu{

   width:68px;

}

.langItem{

   width:100%;

   height:48px;

   border:none;

   background:none;

   cursor:pointer;

   color:var(--text);

   font-weight:600;

}

.langItem:hover{

   background:rgba(0,0,0,.04);

}

.themeItem{

   width:100%;

   height:54px;

   border:none;

   background:none;

   display:flex;

   align-items:center;

   justify-content:center;

   cursor:pointer;

}

.themeItem:hover{

   background:rgba(0,0,0,.04);

}

.themeItem img{

   width:18px;

   height:18px;

}

/* =====================================
   HERO
===================================== */

.libraryHero{

   padding:

   100px 0 80px;

   text-align:center;

}

.heroBadge{

   display:inline-flex;

   align-items:center;

   justify-content:center;

   padding:

   10px 18px;

   border:

   1px solid var(--border);

   border-radius:999px;

   color:var(--muted);

   font-size:13px;

   margin-bottom:24px;

}

.libraryHero h1{

   font-size:64px;

   line-height:1.08;

   max-width:900px;

   margin:auto;

   margin-bottom:24px;

}

.libraryHero p{

   max-width:760px;

   margin:auto;

   color:var(--muted);

   font-size:20px;

   margin-bottom:36px;

}

/* =====================================
   SEARCH
===================================== */

.librarySearch{

   max-width:760px;

   margin:auto;

}

.librarySearch input{

   width:100%;

   height:64px;

   border:

   1px solid var(--border);

   border-radius:18px;

   background:var(--card);

   color:var(--text);

   padding:

   0 24px;

   font-size:16px;

   outline:none;

}

.librarySearch input:focus{

   border-color:#111;

}

/* =====================================
   SECTION HEADER
===================================== */

.librarySection{

   padding:

   80px 0;

}

.sectionHeader{

   display:flex;

   align-items:center;

   justify-content:space-between;

   margin-bottom:32px;

}

.sectionHeader h2{

   font-size:42px;

   line-height:1.1;

}

.sectionLink{

   display:flex;

   align-items:center;

   gap:10px;

   color:var(--muted);

   font-weight:500;

}

.sectionLink img{

   width:14px;

   height:14px;

}
/* =====================================
   ARTICLES GRID
===================================== */

.articlesGrid{

   display:grid;

   grid-template-columns:

   repeat(
      3,
      minmax(0,1fr)
   );

   gap:28px;

}

.article-card{

   background:var(--card);

   border:

   1px solid var(--border);

   border-radius:22px;

   overflow:hidden;

   transition:.25s;

}

.article-card:hover{

   transform:

   translateY(-6px);

   box-shadow:

   0 20px 40px
   rgba(0,0,0,.08);

}

.article-card img{

   width:100%;

   height:240px;

   object-fit:cover;

}

.article-content{

   padding:24px;

}

.article-category{

   display:inline-flex;

   align-items:center;

   justify-content:center;

   padding:

   6px 12px;

   border-radius:999px;

   background:rgba(0,0,0,.04);

   color:var(--muted);

   font-size:12px;

   font-weight:600;

   letter-spacing:.4px;

}

.article-content h3{

   margin-top:16px;

   font-size:22px;

   line-height:1.4;

   min-height:64px;

}

.article-footer{

   display:flex;

   align-items:center;

   justify-content:space-between;

   margin-top:20px;

}

.article-footer img{

   width:16px;

   height:16px;

}

/* =====================================
   FEATURED BOOKS
===================================== */

.featuredBooksSection{

   overflow:hidden;

}

.booksCarousel{

   display:flex;

   align-items:center;

   gap:18px;

}

.booksViewport{

   flex:1;

   overflow:hidden;

}

.booksSlider{

   display:flex;

   gap:24px;

   transition:
   transform .45s ease;

   will-change:transform;

}

.book-card{

   flex:

   0 0 calc(20% - 20px);

   min-width:220px;

   background:var(--card);

   border:

   1px solid var(--border);

   border-radius:24px;

   overflow:hidden;

   transition:.25s;

}

.book-card:hover{

   transform:

   translateY(-8px);

   box-shadow:

   0 20px 40px
   rgba(0,0,0,.08);

}

.book-card img{

   width:100%;

   aspect-ratio:2/3;

   object-fit:cover;

}

.book-content{

   padding:18px;

}

.book-category{

   display:inline-flex;

   padding:

   6px 10px;

   border-radius:999px;

   background:rgba(0,0,0,.04);

   color:var(--muted);

   font-size:11px;

   font-weight:600;

}

.book-content h3{

   margin-top:14px;

   font-size:18px;

   line-height:1.4;

   min-height:52px;

}

.book-content p{

   margin-top:10px;

   color:var(--muted);

   font-size:14px;

}

.carouselButton{

   width:52px;

   height:52px;

   border:none;

   border-radius:50%;

   background:var(--card);

   border:

   1px solid var(--border);

   cursor:pointer;

   display:flex;

   align-items:center;

   justify-content:center;

   flex-shrink:0;

}

.carouselButton img{

   width:18px;

   height:18px;

}

.prevButton img{

   transform:rotate(180deg);

}

.carouselButton:hover{

   box-shadow:

   0 12px 30px
   rgba(0,0,0,.08);

}

/* =====================================
   BOOKS DOTS
===================================== */

.booksDots{

   display:flex;

   align-items:center;

   justify-content:center;

   gap:10px;

   margin-top:30px;

}

.booksDot{

   width:10px;

   height:10px;

   border-radius:50%;

   background:#d9d9d9;

   cursor:pointer;

   transition:.25s;

}

.booksDot.active{

   width:26px;

   border-radius:999px;

   background:#111111;

}

/* =====================================
   CATEGORIES
===================================== */

.categoriesGrid{

   display:grid;

   grid-template-columns:

   repeat(
      auto-fit,
      minmax(220px,1fr)
   );

   gap:22px;

}

.category-pill{

   min-height:140px;

   display:flex;

   align-items:center;

   justify-content:center;

   text-align:center;

   background:var(--card);

   border:

   1px solid var(--border);

   border-radius:24px;

   font-size:20px;

   font-weight:600;

   transition:.25s;

}

.category-pill:hover{

   transform:

   translateY(-6px);

   box-shadow:

   0 20px 40px
   rgba(0,0,0,.08);

}

/* =====================================
   TOPICS
===================================== */

.topicsGrid{

   display:flex;

   flex-wrap:wrap;

   gap:14px;

}

.topic-pill{

   padding:

   12px 18px;

   border-radius:999px;

   background:var(--card);

   border:

   1px solid var(--border);

   font-size:14px;

   font-weight:500;

   transition:.2s;

}

.topic-pill:hover{

   background:#111111;

   color:#ffffff;

}
/* =====================================
   FAQ
===================================== */

.faqGrid{

   display:grid;

   grid-template-columns:

   repeat(
      2,
      minmax(0,1fr)
   );

   gap:24px;

}

.faqCard{

   background:var(--card);

   border:

   1px solid var(--border);

   border-radius:24px;

   padding:30px;

   transition:.25s;

}

.faqCard:hover{

   transform:

   translateY(-4px);

   box-shadow:

   0 15px 35px
   rgba(0,0,0,.06);

}

.faqCard h3{

   font-size:22px;

   line-height:1.4;

   margin-bottom:12px;

}

.faqCard p{

   color:var(--muted);

}

/* =====================================
   CTA
===================================== */

.libraryCTA{

   padding:

   120px 0;

   text-align:center;

}

.libraryCTA .container{

   max-width:860px;

}

.libraryCTA h2{

   font-size:56px;

   line-height:1.1;

   margin-bottom:20px;

}

.libraryCTA p{

   color:var(--muted);

   font-size:18px;

   margin-bottom:32px;

}

.ctaButton{

   display:inline-flex;

   align-items:center;

   justify-content:center;

   min-width:180px;

   height:56px;

   padding:0 24px;

   border-radius:999px;

   background:#111111;

   color:#ffffff;

   font-weight:600;

   transition:.25s;

}

.ctaButton:hover{

   transform:

   translateY(-2px);

}

/* =====================================
   FOOTER
===================================== */

.footer{

   border-top:

   1px solid var(--border);

   padding:

   70px 0 30px;

}

.footerTop{

   display:grid;

   grid-template-columns:

   2fr 1fr 1fr;

   gap:50px;

}

.footerBrand p{

   max-width:420px;

   color:var(--muted);

   margin-top:18px;

}

.footerLogo img{

   width:72px;

   height:72px;

   object-fit:contain;

}

.footerNavigation,
.footerResources{

   display:flex;

   flex-direction:column;

   gap:12px;

}

.footerNavigation h4,
.footerResources h4{

   margin-bottom:10px;

}

.footerNavigation a,
.footerResources a{

   color:var(--muted);

}

.footerBottom{

   margin-top:50px;

   padding-top:24px;

   border-top:

   1px solid var(--border);

}

.footerBottom p{

   text-align:center;

   color:var(--muted);

}

/* =====================================
   DARK MODE FIXES
===================================== */

.theme-dark .article-card,
.theme-dark .book-card,
.theme-dark .faqCard,
.theme-dark .category-pill,
.theme-dark .topic-pill,
.theme-dark .dropdownMenu,
.theme-dark .carouselButton{

   background:#171717;

}

.theme-dark .booksDot{

   background:#3a3a3a;

}

.theme-dark .booksDot.active{

   background:#ffffff;

}

.theme-dark .ctaButton{

   background:#ffffff;

   color:#111111;

}

/* =====================================
   TABLET
===================================== */

@media(max-width:1100px){

   .libraryHero h1{

      font-size:52px;

   }

   .articlesGrid{

      grid-template-columns:

      repeat(
         2,
         minmax(0,1fr)
      );

   }

   .book-card{

      flex:

      0 0 calc(33.333% - 16px);

   }

   .footerTop{

      grid-template-columns:

      1fr 1fr;

   }

}

/* =====================================
   MOBILE
===================================== */

@media(max-width:768px){

   .headerContainer{

      height:72px;

   }

   .desktopNav{

      display:none;

   }

   .libraryHero{

      padding:

      80px 0 60px;

   }

   .libraryHero h1{

      font-size:38px;

   }

   .libraryHero p{

      font-size:17px;

   }

   .sectionHeader{

      flex-direction:column;

      align-items:flex-start;

      gap:12px;

   }

   .sectionHeader h2{

      font-size:34px;

   }

   .articlesGrid{

      grid-template-columns:1fr;

   }

   .faqGrid{

      grid-template-columns:1fr;

   }

   .book-card{

      flex:

      0 0 78%;

   }

   .carouselButton{

      display:none;

   }

   .category-pill{

      min-height:110px;

      font-size:18px;

   }

   .libraryCTA{

      padding:

      90px 0;

   }

   .libraryCTA h2{

      font-size:38px;

   }

   .footerTop{

      grid-template-columns:1fr;

      gap:40px;

   }

}

/* =====================================
   SMALL MOBILE
===================================== */

@media(max-width:480px){

   .container{

      padding:

      0 18px;

   }

   .libraryHero h1{

      font-size:32px;

   }

   .book-card{

      flex:

      0 0 85%;

   }

}
/* =====================================
   CATEGORY CARD FIX V3
===================================== */

.categoriesGrid{

   display:grid;

   grid-template-columns:
   repeat(
      auto-fit,
      minmax(220px,1fr)
   );

   gap:22px;

}

.categoryCard{

   min-height:140px;

   display:flex;

   align-items:center;

   justify-content:center;

   text-align:center;

   background:var(--card);

   border:1px solid var(--border);

   border-radius:24px;

   font-size:20px;

   font-weight:600;

   transition:.25s;

}

.categoryCard:hover{

   transform:
   translateY(-6px);

   box-shadow:
   0 20px 40px
   rgba(0,0,0,.08);

}

/* =====================================
   TOPIC FIX
===================================== */

.topic-pill{

   display:inline-flex;

   align-items:center;

   justify-content:center;

}

/* =====================================
   DARK MODE FIX
===================================== */

.theme-dark .categoryCard{

   background:#171717;

   color:#ffffff;

   border-color:#2a2a2a;

}
/* =====================================
   UI POLISH V3.1
===================================== */

/* Theme + Language Buttons */

.theme-dark .iconBtn{

   background:#1c1c1c;

   border:1px solid #333333;

   box-shadow:
   0 0 0 1px rgba(255,255,255,.03);

}

.theme-dark .iconBtn:hover{

   background:#252525;

}

.theme-dark .iconBtn img{

   opacity:.95;

}

/* Dropdown */

.theme-dark .dropdownMenu{

   background:#1c1c1c;

   border:1px solid #333333;

   box-shadow:
   0 15px 40px rgba(0,0,0,.45);

}

.theme-dark .langItem:hover,
.theme-dark .themeItem:hover{

   background:#252525;

}

/* Featured Books Arrows */

.theme-dark .carouselButton{

   background:#1c1c1c;

   border:1px solid #333333;

   color:#ffffff;

}

.theme-dark .carouselButton:hover{

   background:#252525;

   transform:translateY(-2px);

}

.theme-dark .carouselButton img{

   filter:
   brightness(0)
   invert(1);

   opacity:.95;

}

/* Light Mode Arrow Polish */

.theme-light .carouselButton,
.theme-paper .carouselButton{

   background:#ffffff;

   border:1px solid #dddddd;

}

.theme-light .carouselButton:hover,
.theme-paper .carouselButton:hover{

   box-shadow:
   0 10px 25px rgba(0,0,0,.08);

}

/* Active Dots */

.theme-dark .booksDot{

   background:#3a3a3a;

}

.theme-dark .booksDot.active{

   background:#ffffff;

}

/* Mobile Slider Arrows */

@media(max-width:768px){

   .carouselButton{

      width:48px;

      height:48px;

   }

}

/* Compact book cards for large mobile and portrait tablet viewports. */
@media(min-width:376px) and (max-width:820px){

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

   .book-card img{
      width:100%;
      height:340px;
      aspect-ratio:auto;
      object-fit:cover;
   }

   .book-content{
      padding:16px;
   }

   .book-content h3{
      min-height:auto;
      font-size:17px;
   }

}

/* =====================================
   LARGE-SCREEN PRESENTATION
   Scoped above the approved 1440px layout.
===================================== */

@media (min-width:1600px){

   .container{
      max-width:1480px;
      padding-inline:40px;
   }

   .libraryHero{
      padding:128px 0 104px;
   }

   .libraryHero h1{
      max-width:1080px;
      font-size:76px;
   }

   .libraryHero p{
      max-width:860px;
      font-size:22px;
   }

   .librarySearch{
      max-width:860px;
   }

   .librarySection{
      padding:104px 0;
   }

   .sectionHeader h2{
      font-size:48px;
   }

   .articlesGrid{
      gap:34px;
   }

   .article-card img{
      height:280px;
   }

   .article-content{
      padding:28px;
   }

   .booksSlider{
      gap:30px;
   }

   .book-card{
      min-width:250px;
   }

   .categoryCard{
      min-height:138px;
      font-size:22px;
   }

}

@media (min-width:2560px){

   .container{
      max-width:1760px;
      padding-inline:56px;
   }

   .libraryHero{
      padding:150px 0 124px;
   }

   .libraryHero h1{
      max-width:1240px;
      font-size:88px;
   }

   .libraryHero p{
      max-width:940px;
      font-size:24px;
   }

   .librarySearch{
      max-width:940px;
   }

   .librarySearch input{
      height:72px;
      font-size:18px;
   }

   .librarySection{
      padding:124px 0;
   }

   .sectionHeader h2{
      font-size:54px;
   }

   .article-card img{
      height:320px;
   }

   .article-content h3{
      font-size:26px;
   }

   .book-card{
      min-width:280px;
   }

}