:root{
      --navy:#08264a;
      --navy-2:#031a35;
      --cream:#fbf7ef;
      --paper:#fffdf8;
      --gold:#c88a1a;
      --ink:#18263b;
      --muted:#6d6d6d;
      --line:#eadfce;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:"Noto Serif Devanagari", serif;
      color:var(--ink);
      background:#fff;
    }
    a{text-decoration:none}

    .site-header{
      background:#fff;
      border-bottom:1px solid #eee;
      position:sticky;
      top:0;
      z-index:1000;
      box-shadow:0 2px 18px rgba(0,0,0,.04);
    }
    .brand-title{
      font-family:"Playfair Display", serif;
      font-size:38px;
      line-height:1;
      color:var(--navy);
      letter-spacing:.3px;
    }
    .brand-tagline{
      font-size:16px;
      color:#222;
      margin-top:4px;
    }
    .navbar-nav .nav-link{
      color:#111;
      font-size:15px;
      font-weight:600;
      padding:10px 13px!important;
      white-space:nowrap;
    }
    .navbar-nav .nav-link:hover,
    .navbar-nav .nav-link.active{color:var(--navy)}
    .dropdown-menu{border:0; box-shadow:0 12px 30px rgba(0,0,0,.12)}

    .hero{
      background:var(--cream);
      min-height:500px;
      position:relative;
      overflow:hidden;
      border-bottom:1px solid var(--line);
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:1;
    }
    .hero-art{
      position:absolute;
      right:0;
      top:0;
      width:66%;
      height:100%;
      background:url('../../assets/images/hero-books-sketch.jpg') center right/cover no-repeat;
      opacity:.96;
    }
    .hero-content{position:relative; z-index:2; padding:86px 0}
    .hero h1{
      font-family:"Playfair Display", serif;
      font-size:78px;
      color:var(--navy);
      margin-bottom:8px;
    }
    .hero h2{font-size:31px; font-weight:500; margin-bottom:14px}
    .gold-line{width:78px;height:3px;background:var(--gold);margin:12px 0 28px}
    .hero p{font-size:19px; line-height:1.85; max-width:520px}
    .btn-navy{
      background:var(--navy);
      color:#fff;
      padding:13px 26px;
      border-radius:6px;
      font-weight:700;
      border:1px solid var(--navy);
    }
    .btn-navy:hover{background:#001a36;color:#fff;transform:translateY(-1px)}

    .section-title{
      text-align:center;
      font-size:28px;
      font-weight:700;
      margin-bottom:30px;
      position:relative;
    }
    .section-title::after{
      content:"";
      width:70px;
      height:3px;
      background:var(--gold);
      position:absolute;
      left:50%;
      transform:translateX(-50%);
      bottom:-12px;
    }

    .categories{padding:38px 0 52px;background:#fff}
    .cat-card{
      background:var(--paper);
      border:1px solid var(--line);
      border-radius:8px;
      min-height:150px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      flex-direction:column;
      transition:.25s ease;
      padding:18px 12px;
      color:var(--ink);
    }
    .cat-card i{font-size:42px;color:var(--navy);margin-bottom:14px}
    .cat-card span{font-size:16px;font-weight:700;line-height:1.35}
    .cat-card:hover{
      transform:translateY(-6px);
      box-shadow:0 16px 30px rgba(8,38,74,.12);
      border-color:#d5c3a8;
      color:var(--navy);
    }

    .about-section{
      background:var(--cream);
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      overflow:hidden;
    }
    .about-card{padding:46px 0}
    .profile-img{
      width:150px;height:150px;border-radius:50%;object-fit:cover;
      border:5px solid #fff;box-shadow:0 8px 28px rgba(0,0,0,.12);
    }
    .about-card h3{font-family:"Playfair Display",serif;color:var(--navy);font-size:30px}
    .about-card p{font-size:17px;line-height:1.85}
    .note-art{
      min-height:300px;
      background:url('../../assets/images/notebook-quote-sketch.jpg') center/cover no-repeat;
    }

    .info-panels{padding:38px 0;background:#fff}
    .panel-card{
      border:1px solid #ece6dd;
      border-radius:8px;
      padding:24px;
      height:100%;
      box-shadow:0 8px 22px rgba(0,0,0,.035);
    }
    .panel-card h4{font-size:20px;color:var(--navy);margin-bottom:18px}
    .tweet-box,.quote-box{
      border:1px solid #eee;
      border-radius:7px;
      padding:18px;
      background:#fff;
      min-height:135px;
    }
    .social a{
      width:38px;height:38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
      margin-right:10px;color:#fff;background:var(--navy);
    }
    .links-list a{
      display:flex;justify-content:space-between;align-items:center;
      padding:10px 0;border-bottom:1px solid #eee;color:#222;
    }

    .subscribe{
      background:var(--cream);
      border-top:1px solid var(--line);
      padding:26px 0;
    }
    .subscribe h4{font-size:20px;font-weight:700;margin:0;color:var(--navy)}
    .subscribe .form-control{height:46px;border-radius:4px 0 0 4px}
    .subscribe .btn{border-radius:0 4px 4px 0;background:var(--navy);color:#fff;padding:0 28px}

    .footer{
      background:linear-gradient(135deg,var(--navy),var(--navy-2));
      color:#fff;
      padding:42px 0 28px;
      position:relative;
      overflow:hidden;
    }
    .footer h2{font-family:"Playfair Display",serif;font-size:36px}
    .footer h5{font-size:18px;margin-bottom:16px}
    .footer a{color:#fff;opacity:.88;display:block;margin-bottom:9px}
    .footer a:hover{opacity:1;color:#fff}
    .footer .social a{background:rgba(255,255,255,.13); display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;color:#fff;margin-right:10px}
    .footer .social a i{line-height:0;}
    .copyright{border-top:1px solid rgba(255,255,255,.16);margin-top:26px;padding-top:18px;font-size:14px;opacity:.9}

    @media(max-width:991px){
      .hero-art{width:100%;opacity:.28}
      .hero h1{font-size:58px}
      .hero-content{padding:62px 0}
      .navbar-nav .nav-link{padding:9px 0!important}
      .note-art{min-height:220px;border-left:0;border-top:1px solid var(--line)}
    }
    @media(max-width:575px){
      .brand-title{font-size:31px}
      .hero h1{font-size:48px}
      .hero h2{font-size:25px}
      .hero p{font-size:16px}
    }

    /* Category Page */
    .inner-hero {
  background: #fbf7ef;
  padding: 25px 0;
  border-bottom: 1px solid #eadfce;
}

.inner-hero h1 {
  color: #08264a;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 12px;
}

.inner-hero p {
  max-width: 700px;
  font-size: 18px;
  line-height: 1.8;
  color: #444;
}

.post-card {
  background: #fffdf8;
  border: 1px solid #eadfce;
  border-radius: 10px;
  overflow: hidden;
  height: 100%;
  transition: 0.25s ease;
}

.post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 35px rgba(8, 38, 74, 0.12);
}

.post-card img {
  width: 100%;
  height: 230px;
  object-fit: cover;
}

.post-card-body {
  padding: 22px;
}

.post-category {
  display: inline-block;
  color: #c88a1a;
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 10px;
}

.post-card h3 {
  color: #08264a;
  font-size: 22px;
  margin-bottom: 12px;
}

.post-card h3 a {
  color: #08264a;
  transition: 0.25s ease;
}

.post-card h3 a:hover {
  color: #171512;
}

.post-card p {
  color: #555;
  line-height: 1.7;
}

.read-more {
  color: #08264a;
  font-weight: 700;
}

/* Inner Page */
/* ================= MOBILE RESPONSIVE FIXES ================= */

/* Breadcrumb Wrapper */
.article-hero {
  background: #fbf7ef;
  padding: 25px 0;
  border-bottom: 1px solid #eadfce;
}

/* Breadcrumb Design */
.custom-breadcrumb {
  background: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  border: 1px solid #eadfce;
  margin-bottom: 20px;
  display: inline-flex;
  flex-wrap: wrap;
}

/* Breadcrumb Items */
.custom-breadcrumb .breadcrumb-item {
  font-size: 14px;
}

.custom-breadcrumb .breadcrumb-item a {
  color: #08264a;
  font-weight: 600;
}

.custom-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
  color: #999;
}

/* Active item */
.custom-breadcrumb .active {
  color: #777;
}


.custom-breadcrumb li {
  word-break: break-word;
}

/* Article Title */
.article-hero h1 {
  font-size: 46px;
  line-height: 1.35;
}

.article-hero p {
  max-width: 700px;
  font-size: 18px;
  color: #555;
}

/* Sidebar */
.article-sidebar {
  position: sticky;
  top: 110px;
}

.sidebar-box {
  background: #fffdf8;
  border: 1px solid #eadfce;
  border-radius: 10px;
  padding: 22px;
  margin-bottom: 24px;
}

.sidebar-box h3 {
  color: #08264a;
  font-size: 24px;
  margin-bottom: 18px;
}

.sidebar-post {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #eadfce;
  color: #18263b;
}

.sidebar-post:last-child {
  border-bottom: 0;
}

.sidebar-post img {
  width: 86px;
  height: 72px;
  object-fit: cover;
  border-radius: 6px;
}

.sidebar-post h4 {
  font-size: 16px;
  line-height: 1.45;
  margin-bottom: 5px;
  color: #08264a;
}

.sidebar-post span {
  color: #c88a1a;
  font-size: 13px;
  font-weight: 700;
}

/* Category List */
.sidebar-category {
  padding: 0;
  margin: 0;
  list-style: none;
}

.sidebar-category li a {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid #eadfce;
  color: #18263b;
  font-weight: 600;
}

.sidebar-category li:last-child a {
  border-bottom: 0;
}

/* Article Content */
.article-main-img {
  width: 100%;
  max-height: 520px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid #eadfce;
  margin-bottom: 35px;
}

.article-content {
  font-size: 18px;
  line-height: 2;
  color: #263142;
}

.article-content h2 {
  color: #08264a;
  font-size: 30px;
  margin-top: 36px;
  margin-bottom: 14px;
}

.article-content blockquote {
  background: #fff8e8;
  border-left: 5px solid #c88a1a;
  padding: 22px 28px;
  margin: 30px 0;
  font-size: 22px;
  color: #08264a;
  font-weight: 600;
}

/* ================= TABLET ================= */
@media(max-width: 991px) {
  .article-sidebar {
    position: static;
    margin-top: 40px;
  }
}

/* ================= MOBILE ================= */
@media(max-width: 768px) {

  .article-hero h1 {
    font-size: 30px;
    line-height: 1.4;
  }

  .article-main-img {
    max-height: 280px;
  }

  .article-content {
    font-size: 16px;
    line-height: 1.8;
  }

  .article-content h2 {
    font-size: 22px;
  }

  .article-content blockquote {
    font-size: 18px;
    padding: 16px;
  }
}

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

  .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .sidebar-post {
    gap: 10px;
  }

  .sidebar-post img {
    width: 70px;
    height: 60px;
  }

  .sidebar-post h4 {
    font-size: 14px;
  }
}

/* About Page */

.page-hero {
  background: #fbf7ef;
  padding: 25px 0;
  border-bottom: 1px solid #eadfce;
}

.page-hero h1 {
  color: #08264a;
  font-size: 44px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-hero p {
  max-width: 720px;
  font-size: 18px;
  color: #555;
  line-height: 1.8;
}

.content-card {
  background: #fffdf8;
  border: 1px solid #eadfce;
  border-radius: 12px;
  padding: 34px;
}

.content-card h2 {
  color: #08264a;
  font-size: 30px;
  margin-bottom: 18px;
}

.content-card p {
  font-size: 18px;
  line-height: 2;
  color: #263142;
}

.content-card blockquote {
  background: #fff8e8;
  border-left: 5px solid #c88a1a;
  padding: 20px 26px;
  margin: 28px 0;
  font-size: 21px;
  color: #08264a;
  font-weight: 600;
}

@media(max-width: 768px) {
  .page-hero h1 {
    font-size: 32px;
  }

  .content-card {
    padding: 24px 20px;
  }

  .content-card p {
    font-size: 16px;
    line-height: 1.85;
  }

  .content-card blockquote {
    font-size: 18px;
    padding: 16px;
  }
}

/* Contact Page */

.contact-card {
  background: #fffdf8;
  border: 1px solid #eadfce;
  border-radius: 12px;
  padding: 30px;
}

.contact-card h2 {
  color: #08264a;
  margin-bottom: 20px;
}

.contact-card label {
  font-weight: 600;
  margin-bottom: 5px;
}

.contact-card .form-control {
  border-radius: 6px;
  padding: 10px;
  border: 1px solid #ddd;
}

.contact-info {
  background: #fbf7ef;
  border: 1px solid #eadfce;
  border-radius: 12px;
  padding: 30px;
  height: 100%;
}

.contact-info h3 {
  color: #08264a;
  margin-bottom: 15px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 15px;
  font-size: 16px;
}

.contact-item i {
  font-size: 20px;
  color: #08264a;
}

/* Mobile */
@media(max-width:768px) {
  .contact-card,
  .contact-info {
    padding: 20px;
  }
}