:root {
  --bg-color: #212530;
  --text-color: #222;
}

body {
  background: var(--bg-color);
  color: var(--text-color);
}

body.dark-mode {
  --bg-color: #212530;
  --text-color: #ffffff;
}

/* Default Light Mode */
body {
  background-color: #ffffff;
  color: #222;
  transition: 0.3s ease;
}

/* Light mode elements */
.section,
.header,
.footer,
.card {
  background-color: #ffffff;
  color: #222;
}

/* Dark Mode */
body.dark-mode {
  background-color: #212530 !important;
  color: #ffffff !important;
}

/* Dark mode sab elements par force apply */
body.dark-mode .section,
body.dark-mode .header,
body.dark-mode .footer,
body.dark-mode .card,
body.dark-mode div,
body.dark-mode p,
body.dark-mode span,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode a {
  background-color: transparent !important;
  color: #ffffff !important;
}

/* ===============================
   ROOT VARIABLES
=============================== */
:root {
  --bg-color: #ffffff;
  --text-color: #222222;
  --card-bg: #ffffff;
  --feature-icon: #8b1538;
  --overlay-dark: rgba(0, 0, 0, 0.55);
  --dropdown-bg: #ffffff;
  --dark-bg-color: #212530;
}

/* ===============================
   DARK MODE VARIABLES
=============================== */
body.dark-mode {
  --bg-color: #212530;
  --text-color: #ffffff;
  --card-bg: #1e1e1e;
  --feature-icon: #ffcc00;
  --overlay-dark: rgba(0, 0, 0, 0.6);
  --dropdown-bg: #1f1f1f;
}

/* ===============================
   GLOBAL STYLES
=============================== */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}

/* Headings and paragraphs */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  color: var(--text-color);
}

/* Card/section elements */
.section,
.header,
.footer,
.card {
  background-color: var(--card-bg);
  color: var(--text-color);
  transition: 0.3s ease;
}

/* ===============================
   SLIDER
=============================== */
.single-slider {
  position: relative;
}

.single-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  transition: 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

/* Slider content */
.slider-content-4 h1,
.slider-content-4 h2 {
  color: #ffffff; /* Keep readable over slider images */
}

/* Dark overlay in dark mode */
body.dark-mode .single-slider::before {
  background: var(--overlay-dark);
}

.slider-area .single-slider {
  width: 100%;
  height: 420px;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.slider-area .single-slider .slider-img {
  width: 100%;
  height: 100%;
  /* object-fit: contain; */
  display: block;
}

.slider-area .single-slider .slider-content-4 {
  position: absolute!important;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  right: auto;
  text-align: left;
  max-width: 60%;
}

.slider-area .single-slider .slider-content-4 a {
  position: relative;
  z-index: 3;
  display: inline-block;
  background: #8B1538;
  border: 2px solid #d6681b;
  border-radius: 4px;
  color: #fff;
  font-size: 18px;
  line-height: 28px;
  margin-top: 20px;
  padding: 8px 28px;
  text-decoration: none;
}

@media (max-width: 991px) {
  .slider-area .single-slider {
    height: 320px;
  }
  .slider-area .single-slider .slider-content-4 {
    left: 20px!important;
    right: 20px!important;
    max-width: 70%!important;
  }
  .slider-area .single-slider .slider-content-4 h1 {
    font-size: 20px!important;
    line-height: 1.2!important;
  }
  .slider-area .single-slider .slider-content-4 h2 {
    font-size: 16px!important;
    line-height: 1.2!important;
  }
  .slider-area .single-slider .slider-content-4 a {
    font-size: 16px!important;
    line-height: 24px!important;
    padding: 8px 22px!important;
  }
  .home-4 .slider-content-4 {
    position: absolute!important;
    left: 20px!important;
    right: 20px!important;
    top: 50%!important;
    transform: translateY(-50%)!important;
    text-align: left!important;
    max-width: 70%!important;
    z-index: 3!important;
  }
  .home-4 .slider-content-4 h1 { font-size: 20px!important; line-height: 1.2!important; }
  .home-4 .slider-content-4 h2 { font-size: 16px!important; line-height: 1.2!important; }
}

@media (max-width: 575px) {
  .slider-area .single-slider {
    height: 220px;
  }
  .slider-area .single-slider .slider-content-4 {
    left: 15px!important;
    right: 15px!important;
    max-width: none!important;
    text-align: center!important;
  }
  .slider-area .single-slider .slider-content-4 h1 {
    font-size: 18px!important;
    line-height: 1.2!important;
  }
  .slider-area .single-slider .slider-content-4 h2 {
    font-size: 14px!important;
    line-height: 1.2!important;
  }
  .home-4 .slider-content-4 {
    position: absolute!important;
    left: 15px!important;
    right: 15px!important;
    top: 62%!important;
    transform: translateY(-50%)!important;
    text-align: center!important;
    max-width: none!important;
    z-index: 3!important;
  }
  .slider-area .single-slider .slider-content-4 a {
    margin-top: 12px;
    padding: 6px 18px!important;
    font-size: 14px!important;
    line-height: 20px!important;
  }
  .home-4 .slider-content-4 h1 { font-size: 18px!important; line-height: 1.2!important; }
  .home-4 .slider-content-4 h2 { font-size: 14px!important; line-height: 1.2!important; }
}

/* ===============================
   RIGHT SIDE BANNER
=============================== */
.about-banner-box,
.book-features-area {
  background-color: var(--card-bg);
  padding: 20px;
  border-radius: 6px;
  transition: 0.3s ease;
}

/* Book Stats Card */
.book-stats-card {
  background: var(--card-bg);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  padding: 18px 16px 20px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}
.book-stats-title {
  font-family: "Rufina", serif;
  font-weight: 700;
  font-size: 22px;
  color: #8B1538;
  text-align: center;
  margin: 0 0 6px;
  position: relative;
}
.book-stats-title::after {
  content: "";
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg,#8B1538,#d6681b);
  display: block;
  margin: 8px auto 0;
  border-radius: 2px;
}
.book-stats-sub {
  text-align: center;
  margin: 2px 0 0px;
  color: #02779a;
  
  font-size:18px;font-weight:800
}
.book-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.book-stat {
  background: transparent;
  border-radius: 8px;
  text-align: center;
  padding: 10px;
}
.stat-label {
  font-size: 14px;
  color: var(--text-color);
  margin-bottom: 8px;
  font-weight: 600;
}
.stat-value {
  font-size: 15px;
    font-weight: 700;
    color: #2e7d32;
    border: 2px solid #57b657;
    border-radius: 8px;
    padding: 4px 0;
    background: rgba(87, 182, 87, 0.06);
}
@media (max-width: 575px) {
  .book-stats-title { font-size: 20px; }
  .book-stats-sub { font-size: 13px; }
  .stat-value { font-size: 20px; }
}

/* ===============================
   ABOUT NEW AREA (3-column)
=============================== */
.about-new-area {
  background: #ffffff;
  padding: 20px 0;
}
.about-new-area .about-new-box {
  border: 1px solid rgba(0,0,0,0.08);
  border-top: 3px solid #8B1538;
  border-radius: 6px;
  padding: 18px 18px 16px;
  margin-bottom: 20px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  height: 100%;
  min-height: 307px; /* rectangular and wide feel */
  transition: transform .25s ease, box-shadow .25s ease;
  display: flex;
  flex-direction: column;
}
.about-new-area .about-new-box:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.12), 0 6px 14px rgba(0,0,0,0.06);
}
.about-new-title {
  text-align: left;
  margin: 0 0 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #333;
  font-size: 16px;
  text-decoration: underline;
}
.about-new-content p {
  margin: 0 0 14px;
  line-height: 1.7;
  color: var(--text-color);
}
.about-new-content,
.about-new-editor {
  flex: 1 1 auto;
}
.about-new-actions {
  text-align: center;
  margin-top: 10px;
  margin-top: auto; /* align buttons at bottom across cards */
}
.about-new-btn {
  display: inline-block;
  padding: 6px 14px;
  border: 0;
  color: #fff;
  border-radius: 999px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  background: linear-gradient(135deg, #8B1538 0%, #a81e4b 100%);
  box-shadow: 0 6px 14px rgba(139,21,56,0.25);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.about-new-btn:hover,
.about-new-btn:focus,
.about-new-btn:active,
.about-new-btn:visited {
  color: #fff !important;
  text-decoration: none;
}
.about-new-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 10px 18px rgba(139,21,56,0.35);
}
.about-new-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(139,21,56,0.25);
}
.about-new-comments {
  list-style: none;
  padding-left: 0;
  margin: 0 0 12px;
}
.about-new-comments li {
  margin: 6px 0;
  color: var(--text-color);
}
.about-new-form textarea {
  width: 100%;
  resize: none;
  border: 1px solid #e3e3e3;
  border-radius: 8px;
  padding: 10px 12px;
  background: transparent;
  color: var(--text-color);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}
.about-new-editor {
 
  grid-template-columns: 1fr 140px;
  gap: 14px;
  align-items: start;
}
.about-new-editor .editor-text p {
  margin: 0;
  line-height: 1.7;
}
.about-new-editor .editor-image img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
@media (max-width: 767px) {
  .about-new-editor {
    grid-template-columns: 1fr;
  }
  .about-new-editor .editor-image img { height: 150px; }
  .about-new-area .about-new-box { min-height: 300px; }
}
@media (max-width: 575px) {
  .about-new-area .about-new-box { min-height: 280px; }
}

/* ===============================
   HOME BOOK CARD (sliders)
=============================== */
.home-book-card {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  padding: 12px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.home-book-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.12), 0 6px 14px rgba(0,0,0,0.06);
}
.home-book-card .product-img img {
  border-radius: 8px;
}
.new-book-area .product-flag,
.hot-sell-area-2 .product-flag {
  display: none !important;
}
.new-book-area .product-link,
.hot-sell-area-2 .product-link,
.new-book-area .quick-view,
.hot-sell-area-2 .quick-view {
  display: none !important;
}
.home-book-card .product-details h4 {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.3;
}

/* ===============================
   OWL NAV (subcategory + featured)
=============================== */
.subcategory-row { position: relative; }
.subcat-active .owl-nav,
.hot-sell-active .owl-nav {
  position: absolute !important;
  top: 50% !important;
  left: 0 !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}
.subcat-active.owl-carousel .owl-nav button,
.hot-sell-active.owl-carousel .owl-nav button {
  opacity: 1 !important;
  visibility: visible !important;
}
.subcat-active,
.hot-sell-active {
  position: relative;
  z-index: 1;
}
.subcat-active .owl-nav button.owl-prev,
.subcat-active .owl-nav button.owl-next,
.hot-sell-active .owl-nav button.owl-prev,
.hot-sell-active .owl-nav button.owl-next {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff !important;
  color: #8b1538 !important;
  border: 1px solid rgba(139,21,56,0.3) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  pointer-events: auto;
  transition: background .2s ease, color .2s ease;
  position: absolute;
}
.subcat-active .owl-nav .owl-prev,
.hot-sell-active .owl-nav .owl-prev { left: -12px; }
.subcat-active .owl-nav .owl-next,
.hot-sell-active .owl-nav .owl-next { right: -12px; }
.subcat-active.owl-carousel:hover .owl-nav button.owl-prev,
.hot-sell-active.owl-carousel:hover .owl-nav button.owl-prev { left: -12px !important; }
.subcat-active.owl-carousel:hover .owl-nav button.owl-next,
.hot-sell-active.owl-carousel:hover .owl-nav button.owl-next { right: -12px !important; }
.subcat-active .owl-nav button:hover,
.hot-sell-active .owl-nav button:hover {
  background: #8b1538 !important;
  color: #ffffff !important;
}
.subcat-active .owl-nav [class*="owl-"]:focus,
.hot-sell-active .owl-nav [class*="owl-"]:focus { outline: none; }
@media (max-width: 767px) {
  .subcat-active .owl-nav button.owl-prev,
  .subcat-active .owl-nav button.owl-next,
  .hot-sell-active .owl-nav button.owl-prev,
  .hot-sell-active .owl-nav button.owl-next {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
  .subcat-active .owl-nav .owl-prev,
  .hot-sell-active .owl-nav .owl-prev { left: -8px; }
  .subcat-active .owl-nav .owl-next,
  .hot-sell-active .owl-nav .owl-next { right: -8px; }
}

/* ===============================
   POST-HEADER MARQUEE (center -> right)
=============================== */
.post-marquee-area {
  background: #cb2c2c;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
  padding: 6px 0;
  overflow: hidden;
  border-radius: 9px 0px 0px 9px;
  right: 123px;
  position: relative;
}
.post-marquee-area .container-fluid {
  padding-left: 0;
  padding-right: 0;
}
.post-marquee {
  position: relative;
  height: 28px;
}
.post-marquee-text {
  /* position: absolute; */
  left: 50%;
  white-space: nowrap;
  color: #ffcb00;
  font-weight: 700;
  transform: translateX(-50%);
  animation: postMarqueeRight 124s linear infinite;
  animation-play-state: running;
  will-change: left, transform;
}
.post-marquee:hover .post-marquee-text {
  animation-play-state: paused;
}
@keyframes postMarqueeRight {
  0%   { left: 50%; transform: translateX(-50%); }
  100% { left: 100%; transform: translateX(0%); }
}
@media (max-width: 575px) {
  .post-marquee-text { font-size: 13px; animation-duration: 16s; }
}

/* Feature icon */
.feature-icon i {
  font-size: 25px;
  color: var(--feature-icon);
}

/* ===============================
   MEGA MENU
=============================== */
/* Light Mode */
.mega-menu {
  background-color: #ffffff;
  color: #222;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

.mega-menu a {
  color: #222;
  transition: 0.3s;
}

.mega-menu a:hover {
  color: #8b1538;
}

/* Dark Mode */
body.dark-mode .mega-menu {
  background-color: #111111 !important;
  color: #ffffff !important;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.6);
}

body.dark-mode .mega-menu a {
  color: #ffffff !important;
}

body.dark-mode .mega-menu a:hover {
  color: #ffcc00 !important;
}

/* Mega Menu Titles in Dark Mode */
body.dark-mode .mega-menu .title {
  color: #ffcc00 !important;
}

/* ===============================
   CATEGORY MENU
=============================== */

/* Headings */
.category-area h3,
.category-area h3 a {
  color: var(--text-color);
}

/* Dropdown container */
.category-menu,
.category-menu ul,
.category-menu .left-menu {
  background-color: #ffffff !important;
  color: #222 !important;
  transition: 0.3s ease;
}

/* Links */
.category-menu a {
  color: #222 !important;
  transition: 0.3s;
}

.category-menu a:hover {
  color: #8b1538 !important;
}

/* Sub dropdown */
.category-menu ul ul {
  background-color: #ffffff !important;
}

/* Enable scroll inside category left-menu */
.category-menu ul li .left-menu {
  max-height: 420px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
/* Scrollbar styling */
.category-menu ul li .left-menu::-webkit-scrollbar {
  width: 8px;
}
.category-menu ul li .left-menu::-webkit-scrollbar-track {
  background: #f0f0f0;
}
.category-menu ul li .left-menu::-webkit-scrollbar-thumb {
  background: #c5c5c5;
  border-radius: 6px;
}
.category-menu ul li .left-menu::-webkit-scrollbar-thumb:hover {
  background: #a9a9a9;
}

/* ===============================
   DARK MODE OVERRIDES
=============================== */
body.dark-mode .category-menu,
body.dark-mode .category-menu * {
  color: #ffffff !important;
}

body.dark-mode .category-menu,
body.dark-mode .category-menu ul,
body.dark-mode .category-menu .left-menu {
  background-color: #111111 !important;
}

/* Dark mode dropdown headings */
.category-menu .title {
  font-weight: 600;
}

/* Dark mode: title yellow */
body.dark-mode .category-menu .title {
  color: #ffc107 !important; /* Yellow headings */
}

body.dark-mode .category-menu .title:hover {
  color: #ff9800 !important;
}

body.dark-mode .category-menu a:hover {
  color: #ffcc00 !important;
}

/* -------------------------------
   TOTAL BOOKS AREA
---------------------------------*/

/* Wrapper background & text */
.total-books-area {
  background-color: #f9f9f9; /* Light mode bg */
  color: #222; /* Light mode text */
  transition: all 0.3s ease;
  padding: 40px 0;
  border-radius: 8px;
}

/* Inner card */
.total-books-card {
  background-color: #ffffff; /* Light card bg */
  color: #222;
  padding: 20px;
  border-radius: 6px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

/* Headings & text */
.total-books-heading p,
.library-title,
.total-text,
.books-text {
  color: #222; /* Light mode text */
}

/* -------------------------------
   DARK MODE OVERRIDE
---------------------------------*/
body.dark-mode .total-books-area {
  background-color: #1e1e1e !important;
  color: #ffffff !important;
}

body.dark-mode .total-books-card {
  background-color: #2a2a2a !important;
  color: #ffffff !important;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
}

body.dark-mode .total-books-heading p,
body.dark-mode .library-title,
body.dark-mode .total-text,
body.dark-mode .books-text {
  color: #ffffff !important;
}

/* ===============================
   MOBILE MENU DARK MODE
=============================== */

/* Mobile Menu Area - Dark Mode */
body.dark-mode .mobile-menu-area {
  background-color: #262626 !important;
}

/* Mean Container - Dark Mode */
body.dark-mode .mean-container .mean-bar {
  background-color: #262626 !important;
}

body.dark-mode .mean-container .mean-bar::after {
  color: #ffffff !important;
}

body.dark-mode .mean-container a.meanmenu-reveal {
  background-color: transparent !important;
}

body.dark-mode .mean-container a.meanmenu-reveal span {
  background-color: #ffffff !important;
}

/* Mean Nav - Dark Mode */
body.dark-mode .mean-container .mean-nav {
  background-color: #262626 !important;
}

/* Menu Links - Dark Mode */
body.dark-mode .mean-container .mean-nav ul li a {
  background-color: #262626 !important;
  color: #ffffff !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .mean-container .mean-nav ul li a:hover {
  background-color: #8b1538 !important;
  color: #ffffff !important;
}

/* Submenu Links (Level 2) - Dark Mode */
body.dark-mode .mean-container .mean-nav ul li li a {
  background-color: #1a1a1a !important;
  color: #cccccc !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode .mean-container .mean-nav ul li li a:hover {
  background-color: #8b1538 !important;
  color: #ffffff !important;
}

/* Submenu Links (Level 3) - Dark Mode */
body.dark-mode .mean-container .mean-nav ul li li li a {
  background-color: #0f0f0f !important;
  color: #aaaaaa !important;
}

body.dark-mode .mean-container .mean-nav ul li li li a:hover {
  background-color: #8b1538 !important;
  color: #ffffff !important;
}

/* Menu Titles - Dark Mode */
body.dark-mode .mean-container .mean-nav ul li a.title {
  background-color: #333333 !important;
  color: #ffc107 !important;
  font-weight: 700 !important;
}

/* Container */
body.dark-mode .mobile-menu,
body.dark-mode .mobile-menu ul,
body.dark-mode .mobile-menu ul ul {
  background-color: #1f1f1f !important; /* Dark background */
  color: #ffffff !important; /* White text */
}

/* Links */
body.dark-mode .mobile-menu a {
  color: #ffffff !important;
}

/* Link hover */
body.dark-mode .mobile-menu a:hover {
  color: #ffcc00 !important; /* Yellow hover for visibility */
}

/* Submenu titles */
body.dark-mode .mobile-menu .title {
  color: #ffc107 !important; /* Yellow headings */
  font-weight: 600;
}

/* Submenu toggle icons (fa-angle-down / fa-angle-right) */
body.dark-mode .mobile-menu li > a i {
  color: #ffffff !important;
}

/* ===============================
   SEARCH BAR DARK MODE & MOBILE FIXES
=============================== */

/* Search Trigger Button - Dark Mode */
body.dark-mode .search-trigger {
  color: #ffffff !important;
}

body.dark-mode .search-trigger:hover {
  color: #ffcc00 !important;
}

/* Search Overlay - Dark Mode */
body.dark-mode .search-overlay {
  background-color: #1f1f1f !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Search Container - Dark Mode */
body.dark-mode .search-container {
  background-color: transparent !important;
}

/* Search Input - Dark Mode */
body.dark-mode .search-container input {
  background-color: transparent !important;
  color: #ffffff !important;
}

body.dark-mode .search-container input::placeholder {
  color: #aaaaaa !important;
}

/* Search Icon - Dark Mode */
body.dark-mode .search-icon {
  color: #ffffff !important;
}

/* Close Button - Dark Mode */
body.dark-mode .close-search {
  color: #ffffff !important;
}

body.dark-mode .close-search:hover {
  color: #ffcc00 !important;
}

/* Search Backdrop - Dark Mode (optional enhancement) */
body.dark-mode .search-backdrop {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* ===============================
   SEARCH BAR MOBILE RESPONSIVE FIXES
=============================== */

/* Mobile Screen Adjustments */
@media (max-width: 767px) {
  /* Reduce padding on mobile */
  .search-container {
    padding: 0 15px !important;
  }

  /* Reduce font size on mobile */
  .search-container input {
    font-size: 16px !important;
    padding: 8px 5px !important;
  }

  /* Adjust search icon size on mobile */
  .search-icon {
    font-size: 18px !important;
    margin-right: 10px !important;
  }

  /* Adjust close button size on mobile */
  .close-search {
    font-size: 24px !important;
    margin-left: 10px !important;
  }

  /* Ensure full width and adjust height on mobile */
  .search-overlay {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    height: 80px !important;
  }
}

/* Tablet Screen Adjustments */
@media (min-width: 768px) and (max-width: 991px) {
  .search-container {
    padding: 0 25px !important;
  }

  .search-container input {
    font-size: 18px !important;
  }
}

/* cta section design ke liye dark mode me background color aur text color ko adjust karna hoga. Aapko cta section ke CSS me dark mode ke liye specific styles add karne honge. Yahan ek example diya gaya hai:
 */

/* ===============================
   THEME VARIABLES
=============================== */
:root {
  --cta-text: #111;
  --cta-subtext: #333;
  --cta-btn-bg: #8b1538;
  --cta-btn-text: #fff;
  --cta-overlay: rgba(255, 255, 255, 0.6);
  --body-bg: #ffffff;
}

body.dark-mode {
  --cta-text: #ffffff;
  --cta-subtext: #cccccc;
  --cta-btn-bg: #b91c4b;
  --cta-btn-text: #ffffff;
  --cta-overlay: rgba(0, 0, 0, 0.75);
  --body-bg: #111111;
}

/* ===============================
   CTA SECTION
=============================== */
.cta-section {
  position: relative;
  background: url("../img/madhur/cta_bg.jpg") center/cover no-repeat;
  padding: 40px 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--cta-btn-bg);
}

.cta-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: var(--cta-overlay); */
  z-index: 1;
  pointer-events: none; /* important */
}

.cta-content {
  position: relative;
  z-index: 2;
  max-width: 850px;
  margin: auto;
}

.cta-content h2 {
  font-size: 28px;
  margin-bottom: 20px;
  color: var(--cta-text);
}

.cta-content p {
  font-size: 17px;
  margin-bottom: 35px;
  color: var(--cta-subtext);
  line-height: 1.8;
}

.cta-btn {
  display: inline-block;
  padding: 14px 34px;
  background: var(--cta-btn-bg);
  color: var(--cta-btn-text);
  text-decoration: none;
  font-weight: 600;

  transition: 0.3s ease;
}

.cta-btn:hover {
  background: var(--cta-text);
  color: var(--cta-btn-text);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* Dark mode glow */
body.dark-mode .cta-btn {
  box-shadow: 0 0 15px rgba(185, 28, 75, 0.6);
}

/* ===============================
   TOGGLE BUTTON
=============================== */
.mode-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 8px 15px;
  cursor: pointer;
}

/* ===============================
   RESPONSIVE
=============================== */

/* Tablet */
@media (max-width: 992px) {
  .cta-section {
    padding: 80px 20px;
  }
  .cta-content h2 {
    font-size: 28px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .cta-section {
    padding: 60px 15px;
  }
  .cta-content h2 {
    font-size: 22px;
    line-height: 1.4;
  }
  .cta-content p {
    font-size: 14px;
  }
  .cta-btn {
    padding: 12px 25px;
    font-size: 15px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .cta-content h2 {
    font-size: 20px;
  }
  .cta-content p {
    font-size: 13px;
  }
}

/* book_category section  ka complete css hai  */
/* ===============================
   THEME VARIABLES (Dark Mode Ready)
================================= */
:root {
  --bg-color: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
  --card-bg: #ffffff;
  --text-color: #222;
  --muted-text: #777;
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  --primary-color: #3f51b5;
}

body.dark-mode {
  --bg-color: #121212;
  --card-bg: #1f1f1f;
  --text-color: #f1f1f1;
  --muted-text: #b0b0b0;
  --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  --card-border: 1px solid #404040;
}

/* ===============================
   LAYOUT
================================= */

body {
  background: var(--bg-color);
  color: var(--text-color);
  transition: 0.3s ease;
  min-height: 100vh;
}

.container {
  width: 90%;
  margin: auto;
}

.main-section {
  display: flex;
  gap: 25px;
  margin: 40px auto;
}

/* ===============================
   BLOG SECTION
================================= */

.blog-section {
  flex: 0 0 70%;
}

.post-card {
  background: var(--card-bg);
  display: flex;
  gap: 15px;
  padding: 18px;
  margin-bottom: 25px;
  border-radius: 8px;
  border: var(--card-border, none);
  box-shadow: var(--shadow);
  transition: 0.3s ease;
}

.post-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.post-card img {
  width: 150px;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
}

.post-content h2 {
  margin-bottom: 8px;
  font-size: 20px;
  border: none;
}

.post-content .date {
  font-size: 14px;
  color: var(--muted-text);
  margin-bottom: 10px;
  border: none;
}

.post-content p {
  border: none;
}

.post-card a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s ease;
}

.post-card .card-link:hover {
  color: var(--primary-color);
}

.post-card img {
  cursor: pointer;
}

/* ===============================
   PAGINATION STYLES
================================= */

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 40px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.pagination-btn {
  padding: 8px 12px;
  border: 2px solid var(--primary-color);
  background: white;
  color: var(--primary-color);
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: 0.3s ease;
}

.pagination-btn:hover:not(:disabled) {
  background: var(--primary-color);
  color: white;
  transform: scale(1.05);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination-btn.active {
  background: var(--primary-color);
  color: white;
}

.page-numbers {
  display: flex;
  gap: 5px;
}

.page-numbers button {
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--primary-color);
  background: white;
  color: var(--primary-color);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s ease;
}

.page-numbers button:hover {
  background: var(--primary-color);
  color: white;
}

.page-numbers button.active {
  background: var(--primary-color);
  color: white;
  border-color: var(--primary-color);
}

.pagination-info {
  text-align: center;
  color: var(--muted-text);
  font-size: 14px;
  margin-top: 10px;
}

/* ===============================
   SIDEBAR
================================= */

.sidebar {
  flex: 0 0 30%;
}

.sidebar h3 {
  margin-bottom: 15px;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  background: var(--card-bg);
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 6px;
  box-shadow: var(--shadow);
  transition: 0.3s;
}

.sidebar li:hover {
  transform: translateX(4px);
}

/* ===============================
   RESPONSIVE
================================= */

@media (max-width: 992px) {
  .main-section {
    flex-direction: column;
  }

  .blog-section,
  .sidebar {
    flex: 100%;
  }

  .post-card {
    flex-direction: column;
  }

  .post-card img {
    width: 100%;
    height: auto;
  }
}

/* category_detail page ka css hai */
/* ===============================
   ROOT VARIABLES
================================= */
:root {
  --bg-page: #f4f6f9;
  --bg-card: #ffffff;
  --text-heading: #111;
  --text-body: #555;
  --primary: #8b1538;
  --secondary: #eef4ff;
  --border: #ddd;
  --shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

body.dark-mode {
  --bg-page: #121212;
  --bg-card: #1e1e1e;
  --text-heading: #fff;
  --text-body: #b5b5b5;
  --primary: #4da3ff;
  --secondary: #2a2a2a;
  --border: #333;
  --shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* ===============================
   MAIN WRAPPER
================================= */
.ack-main-wrapper {
  background: var(--bg-page);
  padding: 50px 20px;
  font-family: "Segoe UI", sans-serif;
}

.ack-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 30px;
}

.ack-card {
  background: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
}

body.dark-mode .ack-card {
  background: linear-gradient(135deg, #252525 0%, #1f1f2e 100%);
  border: 1px solid #404050;
}

.ack-padding {
  padding: 25px;
}

/* ===============================
   BOOK SECTION
================================= */
.ack-image-container img {
  width: 100%;
  display: block;
}

.ack-book-info-body {
  padding: 25px;
}

.ack-book-title {
  font-size: 28px;
  color: var(--text-heading);
  margin-bottom: 20px;
}

.ack-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 15px;
  background: var(--secondary);
  padding: 15px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.ack-meta-label {
  font-size: 12px;
  text-transform: uppercase;
  opacity: 0.7;
}

.ack-meta-value {
  font-weight: bold;
  color: var(--primary);
}

.ack-book-desc {
  line-height: 1.7;
  border-left: 4px solid var(--primary);
  padding-left: 15px;
  margin-bottom: 25px;
  color: var(--text-body);
}

/* ===============================
   BUTTONS
================================= */
.ack-btn-group {
  display: flex;
  gap: 15px;
}

.ack-btn {
  flex: 1;
  padding: 14px;
  text-align: center;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: 0.3s;
}

.ack-btn-online {
  background: var(--primary);
  color: #fff;
}

.ack-btn-online:hover {
  background: #6b0f2a;
  color: #fff;
  box-shadow: 0 4px 12px rgba(139, 21, 56, 0.4);
}

body.dark-mode .ack-btn-online:hover {
  background: #66ccff;
  color: #000;
  box-shadow: 0 4px 12px rgba(77, 163, 255, 0.4);
}

.ack-btn-offline {
  border: 2px solid var(--primary);
  color: var(--primary);
  background: transparent;
}

.ack-btn-offline:hover {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(139, 21, 56, 0.4);
}

body.dark-mode .ack-btn-offline:hover {
  background: #4da3ff;
  color: #000;
  border-color: #4da3ff;
  box-shadow: 0 4px 12px rgba(77, 163, 255, 0.4);
}

.ack-btn:hover {
  transform: translateY(-3px);
}

/* ===============================
   SIDEBAR
================================= */
.ack-sidebar-title {
  font-size: 20px;
  color: var(--text-heading);
}

.ack-post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ack-post-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.ack-post-list a {
  text-decoration: none;
  color: var(--primary);
}

/* ===============================
   SPACING BETWEEN CARDS
================================= */
.ack-container > div:last-child .ack-card:first-child {
  margin-bottom: 30px;
}

/* ===============================
   COMMENT HEADER + LIKE
================================= */
.ack-comment-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  gap: 15px;
}

.ack-btn-like-main {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border: 2px solid var(--primary);
  border-radius: 30px;
  background: transparent;
  color: var(--primary);
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.3s ease;
}

.ack-btn-like-main:hover {
  transform: translateY(-2px);
}

.ack-btn-like-main.liked {
  background: var(--primary);
  color: #fff;
}

/* ===============================
   FORM
================================= */
.ack-form-group textarea {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-page);
  color: var(--text-heading);
}

.ack-submit {
  margin-top: 15px;
  padding: 12px 25px;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
}

/* ===============================
   RESPONSIVE
================================= */
@media (max-width: 900px) {
  .ack-container {
    grid-template-columns: 1fr;
  }

 
}

@media (max-width: 500px) {
  .ack-comment-header {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ===============================
   REGISTER PAGE - DARK MODE STYLES
================================= */

/* User Login Area - Dark Mode */
body.dark-mode .user-login-area {
  background-color: #212530 !important;
  color: #ffffff !important;
}

/* Login Title - Dark Mode */
body.dark-mode .login-title h2 {
  color: #ffffff !important;
}

/* Billing Fields - Dark Mode */
body.dark-mode .billing-fields {
  background-color: transparent;
}

/* Single Register - Label - Dark Mode */
body.dark-mode .single-register label {
  color: #ffffff !important;
}

body.dark-mode .single-register label span {
  color: #ff6b6b !important;
}

/* Form Input Fields - Dark Mode */
body.dark-mode .single-register input[type="text"],
body.dark-mode .single-register input[type="email"],
body.dark-mode .single-register input[type="password"],
body.dark-mode .single-register textarea {
  background-color: #2a2f42 !important;
  color: #ffffff !important;
  border: 1px solid #404050 !important;
}

body.dark-mode .single-register input::placeholder {
  color: #999999 !important;
}

body.dark-mode .single-register input[type="text"]:focus,
body.dark-mode .single-register input[type="email"]:focus,
body.dark-mode .single-register input[type="password"]:focus,
body.dark-mode .single-register textarea:focus {
  outline: none !important;
  border-color: #8b1538 !important;
  box-shadow: 0 0 5px rgba(139, 21, 56, 0.5) !important;
}

/* Checkbox - Dark Mode */
body.dark-mode .single-register input[type="checkbox"] {
  accent-color: #8b1538;
}

/* Checkbox Label - Dark Mode */
body.dark-mode .single-register-3 label {
  color: #ffffff !important;
}

body.dark-mode .single-register-3 a {
  color: #4da3ff !important;
}

body.dark-mode .single-register-3 a:hover {
  text-decoration: underline;
}

/* Register Button - Dark Mode */
body.dark-mode .single-register button {
  background-color: #8b1538 !important;
  color: #ffffff !important;
  border: none !important;
  padding: 12px 30px !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  font-weight: 600 !important;
  transition: 0.3s ease !important;
}

body.dark-mode .single-register button:hover {
  background-color: #b91c4b !important;
  box-shadow: 0 4px 12px rgba(139, 21, 56, 0.4) !important;
}

body.dark-mode .single-register button a {
  color: #ffffff !important;
  text-decoration: none !important;
}

/* login page  design and dark mode and light mode  */
/* ===============================
   THEME VARIABLES (Light Mode)
================================= */
:root {
  --bg-page: #f5f7fb;
  --bg-card: #ffffff;
  --text-main: #111;
  --text-light: #666;
  --border: #e5e5e5;
  --primary: #8b1538;
  --primary-hover: #8b1538;
  --secondary: #f1f1f1;
  --secondary-hover: #e2e2e2;
  --shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* ===============================
   DARK MODE
================================= */
body.dark-mode {
  --bg-page: #0f172a;
  --bg-card: #1e293b;
  --text-main: #ffffff;
  --text-light: #cbd5e1;
  --border: #334155;
  --secondary: #334155;
  --secondary-hover: #475569;
  --shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

/* ===============================
   PAGE BACKGROUND
================================= */

.user-login-area {
  background: var(--bg-page);
  padding: 30px 0;
}

/* ===============================
   LOGIN CARD
================================= */

.login-card {
  background: var(--bg-card);
  padding: 35px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--border);
}

/* ===============================
   TITLE
================================= */

.login-title h2 {
  color: var(--text-main);
  font-weight: 600;
}

/* ===============================
   INPUT FIELD
================================= */

.theme-input {
  width: 100%;
  padding: 12px 14px;

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

  background: var(--bg-card);
  color: var(--text-main);

  transition: 0.3s;
}

.theme-input:focus {
  outline: none;
  border-color: var(--primary);
}

/* ===============================
   LABEL
================================= */

.single-login label {
  color: var(--text-main);
  font-weight: 500;
  margin-bottom: 6px;

  display: block;
}

/* ===============================
   BUTTON AREA
================================= */

.single-login-2 {
  margin-top: 25px;

  display: flex;
  gap: 15px;

  justify-content: center;

  flex-wrap: wrap;
}

/* ===============================
   LOGIN BUTTON
================================= */

.single-login-2 button[type="submit"] {
  background: var(--primary);
  color: #fff;
  padding: 12px 35px;
  border-radius: 30px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  transition: 0.3s;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.single-login-2 button[type="submit"]:hover {
  background: var(--primary-hover);
}

/* ===============================
   REGISTER BUTTON
================================= */

.btn-secondary {
  background: var(--secondary);
  color: var(--text-main);
  padding: 12px 35px;
  border-radius: 30px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  transition: 0.3s;
}

.btn-secondary:hover {
  background: var(--secondary-hover);
}

/* ===============================
   LINK
================================= */

.theme-link {
  color: var(--primary);
  font-weight: 500;
  text-decoration: none;
}

.theme-link:hover {
  text-decoration: underline;
}

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

@media (max-width: 576px) {
  .login-card {
    padding: 25px 20px;
  }

  .single-login-2 {
    flex-direction: column;
  }

  .single-login-2 button {
    width: 100%;
  }
}

/* contact section  design and responsive and dark mode and light mode  */
:root {
  --primary: #8b1538;
  --bg: #f5f6fa;
  --card: #ffffff;
  --text: #111;
  --border: #ddd;
  --input: #fafafa;
}

/* DARK MODE */

body.dark-mode {
  --bg: #121212;
  --card: #1e1e1e;
  --text: #fff;
  --border: #333;
  --input: #2a2a2a;
}

body {
  background: var(--bg);
  color: var(--text);
}

/* =====================
CONTACT
===================== */

.contact-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  padding: 20px;
}

.contact-card {
  width: 100%;
  background: var(--card);
  border-radius: 10px;
  padding: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}

/* =====================
FORM
===================== */
.contact-form {
  width: 100%;
}

.contact-form h2 {
 margin-bottom: 20px;
  font-size: 26px;
  text-align: left;
}

/* GRID */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}

.input-group {
  width: 100%;
}

.input-group label {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
  display: block;
}

.input-group input,
.input-group textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--input);
  color: var(--text);
  font-size: 15px;
}
textarea {
  height: 120px;
}

/* BUTTON */

.btn-submit {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 6px;
  background: var(--primary);
  color: white;
  font-size: 16px;
  margin-top: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
  min-height: 48px;
  font-weight: 600;
}

.btn-submit:hover {
  background: #6b0e2a;
}

.btn-submit:active {
  transform: scale(0.98);
}

/* =====================
LARGE DESKTOP
===================== */

@media (min-width: 1200px) {
  .contact-wrapper {
    padding: 50px;
  }

  .contact-card {
    padding: 50px;
  }
}
/* =====================
DESKTOP
===================== */

@media (max-width: 1200px) and (min-width: 901px) {
  .contact-wrapper {
    padding: 30px;
  }

  .contact-card {
    padding: 30px;
  }
}

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

@media (max-width: 900px) {
  .form-row {
    flex-direction: column;

    gap: 15px;
  }
  .contact-card {
    padding: 25px;

    margin-bottom: 20px;
  }

  .contact-form h2 {
    font-size: 24px;

    margin-bottom: 25px;
  }

  .input-group label {
    margin-bottom: 8px;

    font-size: 14px;
  }
}

/* =====================
MOBILE (600px - 900px)
===================== */

@media (max-width: 600px) {
  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
  }

  .contact-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
  }

  .contact-card {
    width: 100%;
    padding: 16px;
    border-radius: 8px;
    margin: 0;
  }

  .contact-form h2 {
    font-size: 22px;
    margin-bottom: 20px;
    font-weight: 600;
  }

  .form-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 12px;
  }

  .input-group {
    width: 100%;
  }

  .input-group label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
  }

  .input-group input,
  .input-group textarea {
    font-size: 16px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 100%;
  }

  textarea {
    height: 100px;
    resize: vertical;
    min-height: 100px;
  }

  .btn-submit {
    width: 100%;
    padding: 14px;
    font-size: 16px;
    margin-top: 15px;
    min-height: 48px;
  }
}

/* =====================
SMALL MOBILE (320px - 599px)
===================== */

@media (max-width: 480px) {
  .contact-wrapper {
    padding: 18px;
  }
  .contact-card {
    padding: 12px;
    border-radius: 6px;
    margin: 0;
  }
  .contact-form h2 {
    font-size: 18px;
    margin-bottom: 16px;
  }
  .form-row {
    gap: 10px;
    margin-bottom: 10px;
  }

  .input-group label {
    font-size: 12px;
    margin-bottom: 5px;
  }

  .input-group input,
  .input-group textarea {
    font-size: 16px;
    padding: 10px;
    border-radius: 4px;
  }

  textarea {
    height: 90px;
  }
  .btn-submit {
    padding: 12px;
    font-size: 15px;
    margin-top: 12px;
    min-height: 44px;
  }
}

/* =====================
EXTRA SMALL MOBILE (Below 320px)
===================== */

@media (max-width: 320px) {
  .contact-card {
    padding: 10px;
  }

  .contact-form h2 {
    font-size: 16px;
    margin-bottom: 12px;
  }

  .input-group label {
    font-size: 11px;
  }

  .input-group input,
  .input-group textarea {
    font-size: 14px;
    padding: 8px;
  }
}


/* feedback section design and dark mode and light mode */
/* =========================
FEEDBACK SECTION
========================= */

.feedback-container {
  max-width: 500px;
  margin: 30px auto;
  padding: 20px;
}

/* Card */

.feedback-card {
  background: var(--card);
  padding: 28px;
  border-radius: 10px;
  border: 1px solid var(--border);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
  transition: 0.3s;
}

/* Title */

.feedback-title {
  text-align: center;
  font-size: 26px;
  margin-bottom: 10px;
  color: var(--text);
  font-weight: 700;
}

.feedback-subtitle {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 22px;
}

/* Form */

.feedback-group {
  margin-bottom: 18px;
}

.feedback-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--text);
  font-size: 14px;
}

/* Inputs */

.feedback-input {
  width: 100%;
  padding: 11px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  transition: 0.3s;
}

.feedback-input:focus {
  outline: none;
  border-color: #8b1538;
  box-shadow: 0 0 0 2px rgba(139, 21, 56, 0.15);
}

/* Textarea */

.feedback-textarea {
  min-height: 110px;
  resize: vertical;
}

/* Button */

.feedback-btn {
  width: 100%;
  background: #8b1538;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  cursor: pointer;
  transition: 0.3s;
  font-weight: 600;
}

.feedback-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/* Responsive */

@media (max-width: 768px) {
  .feedback-container {
    margin: 40px auto;
    padding: 15px;
  }

  .feedback-card {
    padding: 22px;
  }

  .feedback-title {
    font-size: 22px;
  }
}

/* blog section design and dark mode and light mode  */
/* =====================
THEME
===================== */

:root {
  --primary: #8b1538;
  --bg: #f5f6fa;
  --card: #ffffff;
  --text: #111;
  --muted: #777;
}

body.dark {
  --bg: #111;
  --card: #1c1c1c;
  --text: #fff;
  --muted: #aaa;
}

/* =====================
CONTAINER
===================== */

.blog-container {
  max-width: 1200px;
  margin: auto;
  padding: 50px 20px;
}

/* =====================
GRID
===================== */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

/* =====================
CARD
===================== */

.blog-card {
  background: var(--card);

  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  transition: 0.3s;
}

.blog-card:hover {
  transform: translateY(-6px);
}

/* IMAGE FULL */

.blog-image img {
  width: 100%;
  height: 200px;
  display: block;
}


/* AUTHOR + DATE */

.blog-meta {
  display: flex;
  justify-content: space-between;
  padding: 12px 15px 0px 15px;
  font-size: 13px;
  color: var(--muted);
}

/* TITLE */

.blog-title {
  color: var(--primary);
  padding: 8px 15px;
  font-size: 18px;
  font-weight: bold;
}

/* DESCRIPTION */

.blog-desc {
  padding: 0px 15px 20px 15px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
}

/* BUTTON */

.view-btn {
  display: block;
  margin: 40px auto;
  background: var(--primary);
  color: white;
  border: none;
  padding: 14px 35px;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
}

.view-btn:hover {
  opacity: 0.9;
}