/*
  ============================================================
  PlotList — Premium Luxury Light Theme
  Design: Warm Ivory + Deep Gold + Rich Navy
  ============================================================
*/

/* ── Google Font: Inter ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ── CSS Custom Properties ── */
:root {
  --ivory: #FAFAF7;
  --ivory-2: #F4F3EE;
  --ivory-3: #EEEAE0;
  --gold: #B8963E;
  --gold-2: #D4AF57;
  --gold-light: rgba(184, 150, 62, 0.12);
  --gold-glow: rgba(184, 150, 62, 0.25);
  --navy: #0F1C2E;
  --navy-2: #1A2C45;
  --navy-3: #243650;
  --text: #0F1C2E;
  --text-mid: #3D5170;
  --text-muted: #7A8BA0;
  --border: rgba(15, 28, 46, 0.08);
  --card: #FFFFFF;
  --card-shadow: 0 4px 24px rgba(15, 28, 46, 0.07);
  --card-hover: 0 16px 56px rgba(15, 28, 46, 0.13);
  --radius: 16px;
  --radius-sm: 10px;
}

/* ══════════════════════════════════════════
   GLOBAL BASE
══════════════════════════════════════════ */

html,
body {
  font-family: 'Inter', sans-serif !important;
  background-color: var(--ivory) !important;
  color: var(--text) !important;
  scroll-behavior: smooth;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

p {
  color: var(--text-mid) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px;
  line-height: 1.8;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Inter', sans-serif !important;
  color: var(--navy) !important;
}

a {
  transition: all .25s ease !important;
}

::selection {
  background: var(--gold);
  color: #fff;
}

/* ── Preloader ── */
.js-preloader {
  background: var(--ivory) !important;
}

.preloader-inner {
  background: transparent !important;
}

.preloader-inner .dot,
.preloader-inner .dots span {
  background: var(--gold) !important;
}


/* ══════════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 5px;
}

::-webkit-scrollbar-track {
  background: var(--ivory-2);
}

::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gold-2);
}


/* ══════════════════════════════════════════
   HEADER / NAVBAR
══════════════════════════════════════════ */

.header-area {
  background: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
  transition: all .4s ease !important;
}

.background-header {
  background: rgba(250, 250, 247, 0.92) !important;
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 2px 40px rgba(15, 28, 46, 0.08) !important;
}

/* Logo */
.header-area .main-nav a.logo {
  background-image: url(../images/white-logo.png) !important;
}

.background-header .main-nav a.logo {
  background-image: url(../images/black-logo.png) !important;
}

/* Nav links */
.header-area .main-nav .nav li a {
  color: rgba(255, 255, 255, 0.88) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  letter-spacing: 0.5px !important;
  position: relative;
}

.background-header .main-nav .nav li a {
  color: var(--navy) !important;
}

/* Animated underline */
.header-area .main-nav .nav li a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  border-radius: 2px;
  transition: width .3s ease;
}

.header-area .main-nav .nav li:hover a::after,
.header-area .main-nav .nav li a.active::after {
  width: 60%;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: var(--gold-2) !important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: var(--gold) !important;
}

/* CTA "Add Your Listing" button */
.header-area .main-nav .nav li:last-child a,
.background-header .main-nav .nav li:last-child a {
  background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important;
  color: #fff !important;
  border-radius: 50px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  padding: 10px 22px !important;
  box-shadow: 0 4px 20px rgba(15, 28, 46, 0.25) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1 !important;
  height: auto !important;
  vertical-align: middle !important;
}

.header-area .main-nav .nav li:last-child a:hover,
.background-header .main-nav .nav li:last-child a:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
  box-shadow: 0 6px 28px var(--gold-glow) !important;
  transform: translateY(-2px);
}

.header-area .main-nav .nav li:last-child a i,
.background-header .main-nav .nav li:last-child a i {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
  margin-right: 0 !important;
  flex-shrink: 0;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 1 !important;
}

/* Mobile hamburger */
.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  background-color: #fff !important;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: var(--navy) !important;
}

/* Mobile nav */
@media (max-width: 767px) {
  .header-area {
    background-color: var(--ivory) !important;
  }

  .header-area .main-nav .nav li {
    background: var(--card) !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .header-area .main-nav .nav li a {
    background: var(--card) !important;
    color: var(--navy) !important;
  }

  .header-area .main-nav .nav li a:hover {
    background: var(--ivory-2) !important;
    color: var(--gold) !important;
  }

  .header-area .main-nav .menu-trigger span,
  .header-area .main-nav .menu-trigger span:before,
  .header-area .main-nav .menu-trigger span:after {
    background-color: var(--navy) !important;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* ══════════════════════════════════════════
   HERO BANNER
══════════════════════════════════════════ */

.main-banner {
  position: relative;
  overflow: hidden;
}

.main-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg,
      rgba(15, 28, 46, 0.82) 0%,
      rgba(36, 54, 80, 0.65) 55%,
      rgba(184, 150, 62, 0.22) 100%);
  z-index: 1;
}

.main-banner .container {
  position: relative;
  z-index: 2;
}

.main-banner .top-text h6 {
  color: var(--gold-2) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: 4px !important;
  text-transform: uppercase !important;
}

.main-banner .top-text h2 {
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
  font-size: 52px !important;
  line-height: 1.12 !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ffffff 40%, var(--gold-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Search bar */
form#search-form {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(184, 150, 62, 0.2) !important;
  border-radius: 16px !important;
  padding: 8px !important;
  box-shadow: 0 20px 60px rgba(15, 28, 46, 0.2), 0 0 0 1px rgba(184, 150, 62, 0.1) !important;
  display: flex !important;
  align-items: center !important;
}

form#search-form select,
form#search-form input {
  background: transparent !important;
  color: var(--navy) !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
}

form#search-form input::placeholder {
  color: var(--text-muted) !important;
}

form#search-form input.searchText {
  border-left: 1px solid var(--border) !important;
  border-right: 1px solid var(--border) !important;
}

form#search-form select option {
  background: #fff;
  color: var(--navy);
}

form#search-form button {
  background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important;
  color: #fff !important;
  border-radius: 12px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 4px 20px rgba(15, 28, 46, 0.3) !important;
  transition: all .3s ease !important;
  border: none !important;
}

form#search-form button:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
  box-shadow: 0 6px 28px var(--gold-glow) !important;
  transform: scale(1.02);
}

form#search-form button i {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

/* Category icon pills in hero */
.main-banner ul.categories li .icon {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  transition: all .35s ease !important;
}

.main-banner ul.categories li a:hover .icon {
  background: var(--gold) !important;
  box-shadow: 0 0 20px var(--gold-glow) !important;
  transform: translateY(-4px);
}

.main-banner ul.categories li a {
  color: rgba(255, 255, 255, 0.92) !important;
  font-family: 'Inter', sans-serif !important;
}


/* ══════════════════════════════════════════
   PAGE HEADING (category, listing, contact)
══════════════════════════════════════════ */

.page-heading {
  position: relative;
}

.page-heading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(165deg,
      rgba(15, 28, 46, 0.80) 0%,
      rgba(36, 54, 80, 0.60) 60%,
      rgba(184, 150, 62, 0.18) 100%);
  z-index: 1;
}

.page-heading .container {
  position: relative;
  z-index: 2;
}

.page-heading .top-text h6 {
  color: var(--gold-2) !important;
  letter-spacing: 4px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.page-heading .top-text h2 {
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
}


/* ══════════════════════════════════════════
   BODY / PAGE SECTIONS BACKGROUND
══════════════════════════════════════════ */

.popular-categories,
.recent-listing,
.category-post,
.listing-page,
.contact-page {
  background: transparent !important;
}

/* Alternating subtle warmth */
.popular-categories {
  background: var(--ivory-2) !important;
  padding-top: 120px;
  padding-bottom: 120px;
}

.recent-listing {
  background: var(--ivory) !important;
  border-top: 1px solid var(--border) !important;
}


/* ══════════════════════════════════════════
   SECTION HEADINGS
══════════════════════════════════════════ */

.section-heading h2 {
  color: var(--navy) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 800 !important;
}

.section-heading h6 {
  color: var(--gold) !important;
  letter-spacing: 4px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}


/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */

.main-white-button a {
  background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important;
  color: #fff !important;
  border-radius: 50px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  box-shadow: 0 4px 20px rgba(15, 28, 46, 0.2) !important;
  transition: all .3s ease !important;
  letter-spacing: 0.3px !important;
}

.main-white-button a:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
  color: #fff !important;
  box-shadow: 0 6px 28px var(--gold-glow) !important;
  transform: translateY(-2px);
}

.main-white-button a i {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

.main-button {
  background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important;
  color: #fff !important;
  border-radius: 50px !important;
  box-shadow: 0 4px 20px rgba(15, 28, 46, 0.25) !important;
}

.main-button:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
  box-shadow: 0 6px 28px var(--gold-glow) !important;
}


/* ══════════════════════════════════════════
   POPULAR CATEGORIES TABS
══════════════════════════════════════════ */

.popular-categories .naccs {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: var(--card-shadow) !important;
}

.popular-categories .naccs .menu div {
  background-color: var(--ivory-2) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-mid) !important;
  transition: all .3s ease !important;
}

.popular-categories .naccs .menu div:hover {
  background: var(--gold-light) !important;
  color: var(--navy) !important;
}

.popular-categories .naccs .menu div.active,
.popular-categories .naccs .menu div.active .thumb {
  background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important;
  color: #fff !important;
}

.popular-categories .icon {
  background: var(--ivory-3) !important;
  border: 1px solid var(--border) !important;
}

.popular-categories .naccs .menu div.active .icon {
  background: rgba(255, 255, 255, 0.15) !important;
}

.popular-categories .nacc .thumb .left-text h4 {
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

.popular-categories .nacc .thumb .left-text p {
  color: rgba(255, 255, 255, 0.78) !important;
}


/* ══════════════════════════════════════════
   LISTING CARDS
══════════════════════════════════════════ */

.recent-listing .item .listing-item,
.listing-page .item .listing-item {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--card-shadow) !important;
  overflow: hidden;
  transition: all .35s ease !important;
}

.recent-listing .item .listing-item:hover,
.listing-page .item .listing-item:hover {
  transform: translateY(-6px);
  border-color: rgba(184, 150, 62, 0.25) !important;
  box-shadow: var(--card-hover), 0 0 0 1px rgba(184, 150, 62, 0.15) !important;
}

.recent-listing .item .right-content h4 a,
.recent-listing .item .right-content h4,
.listing-page .item .right-content h4 {
  color: var(--navy) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

.recent-listing .item .right-content h4 a:hover,
.listing-page .item .right-content h4 a:hover {
  color: var(--gold) !important;
}

.recent-listing .item .right-content h6,
.listing-page .item .right-content h6 {
  color: var(--text-muted) !important;
}

.recent-listing .item .right-content span.price,
.listing-page .item .right-content span.price {
  color: var(--navy) !important;
  font-weight: 600 !important;
}

.recent-listing .item .right-content span.price .icon,
.listing-page .item .right-content span.price .icon {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
}

.recent-listing .item .right-content span.details,
.listing-page .item .right-content span.details {
  color: var(--text-muted) !important;
}

.recent-listing .item .right-content span.details em,
.listing-page .item .right-content span.details em {
  color: var(--gold) !important;
  font-style: normal;
}

/* Stars */
.recent-listing .item .right-content ul.rate li i,
.listing-page .item .right-content ul.rate li i {
  color: var(--gold) !important;
}

.recent-listing .item .right-content ul.rate li:last-child,
.listing-page .item .right-content ul.rate li:last-child {
  color: var(--text-muted) !important;
  font-size: 13px !important;
}

/* Owl dots */
.recent-listing .owl-dots .owl-dot,
.listing-page .owl-dots .owl-dot {
  background: var(--ivory-3) !important;
  border: 1px solid var(--gold) !important;
}

.recent-listing .owl-dots .active,
.listing-page .owl-dots .active {
  background: var(--gold) !important;
}


/* ══════════════════════════════════════════
   CATEGORY PAGE
══════════════════════════════════════════ */

.category-post {
  background: var(--ivory) !important;
}

.category-post .naccs .menu div {
  background: var(--ivory-2) !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-mid) !important;
}

.category-post .naccs .menu div:hover {
  background: var(--gold-light) !important;
}

.category-post .naccs .menu div.active,
.category-post .naccs .menu div.active .thumb {
  background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important;
  color: #fff !important;
}

.category-post .naccs .menu div h4 {
  color: var(--navy) !important;
}

.category-post .naccs .menu div.active h4 {
  color: #fff !important;
}

.category-post .top-content {
  border-bottom: 1px solid var(--border) !important;
}

.category-post .description {
  border-bottom: 1px solid var(--border) !important;
}

.category-post .top-content .top-icon {
  background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important;
  box-shadow: 0 8px 24px rgba(15, 28, 46, 0.2) !important;
}

.category-post .top-content .top-icon h4 {
  color: #fff !important;
}

.category-post .nacc .thumb h4 {
  color: var(--navy) !important;
  font-family: 'Inter', sans-serif !important;
}

.category-post .nacc .thumb span.list-item {
  color: var(--text-muted) !important;
}

.category-post .nacc .thumb .text-icon h4 {
  color: var(--navy) !important;
}

.category-post .nacc .thumb .main-white-button a {
  background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important;
  color: #fff !important;
}

.category-post .nacc .thumb .main-white-button a:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
}

.category-post .nacc .thumb .main-white-button a i {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}


/* ══════════════════════════════════════════
   LISTING PAGE TABS
══════════════════════════════════════════ */

.listing-page {
  background: var(--ivory) !important;
}

.listing-page .naccs .menu div {
  background: var(--ivory-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text-mid) !important;
  transition: all .3s !important;
}

.listing-page .naccs .menu div:hover {
  background: var(--gold-light) !important;
  color: var(--navy) !important;
}

.listing-page .naccs .menu div.active,
.listing-page .naccs .menu div.active .thumb {
  background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important;
  color: #fff !important;
}

.listing-page .icon {
  background: var(--ivory-3) !important;
  border: 1px solid var(--border) !important;
}

.listing-page .naccs .menu div.active .icon {
  background: rgba(255, 255, 255, 0.15) !important;
}


/* ══════════════════════════════════════════
   CONTACT PAGE
══════════════════════════════════════════ */

.contact-page {
  background: var(--ivory) !important;
}

.contact-page .inner-content {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--card-shadow) !important;
}

form#contact input,
form#contact textarea {
  background: var(--ivory-2) !important;
  border: 1px solid var(--border) !important;
  color: var(--navy) !important;
  font-family: 'Inter', sans-serif !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color .25s, box-shadow .25s !important;
}

form#contact input:focus,
form#contact textarea:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px var(--gold-light) !important;
  outline: none !important;
  background: #fff !important;
}

form#contact input::placeholder,
form#contact textarea::placeholder {
  color: var(--text-muted) !important;
}

form#contact span {
  color: var(--text-muted) !important;
}

form#contact button {
  background: linear-gradient(135deg, var(--navy), var(--navy-2)) !important;
  color: #fff !important;
  border-radius: 50px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 20px rgba(15, 28, 46, 0.2) !important;
  transition: all .3s ease !important;
}

form#contact button:hover {
  background: linear-gradient(135deg, var(--gold), var(--gold-2)) !important;
  box-shadow: 0 6px 28px var(--gold-glow) !important;
  transform: translateY(-2px);
}

form#contact button i {
  background: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}


/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */

footer {
  background: var(--navy) !important;
  border-top: none !important;
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), var(--gold-2), var(--gold), transparent);
}

footer h4 {
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
}

footer p,
footer a {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Inter', sans-serif !important;
}

footer a:hover {
  color: var(--gold-2) !important;
  border-bottom-color: var(--gold-2) !important;
}

footer .helpful-links ul li a:hover,
footer .contact-us a:hover {
  color: var(--gold-2) !important;
  border-bottom-color: var(--gold-2) !important;
}

footer .sub-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.35) !important;
}

footer .logo img {
  filter: brightness(0) invert(1) !important;
  opacity: 0.95 !important;
}


/* ══════════════════════════════════════════
   SUBTLE AMBIENT TEXTURES
══════════════════════════════════════════ */

body::before {
  content: '';
  position: fixed;
  top: -30%;
  right: -15%;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(184, 150, 62, 0.05) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

body::after {
  content: '';
  position: fixed;
  bottom: -20%;
  left: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(15, 28, 46, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}


/* ══════════════════════════════════════════
   ANIMATIONS
══════════════════════════════════════════ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.main-banner .top-text {
  animation: fadeInUp .8s ease both;
}

.main-banner form {
  animation: fadeInUp .8s ease .2s both;
}

.main-banner ul.categories {
  animation: fadeInUp .8s ease .4s both;
}


/* ══════════════════════════════════════════
   RESPONSIVE — TABLET LARGE  (≤ 1199px)
══════════════════════════════════════════ */

@media (max-width: 1199px) {

  .main-banner .top-text h2 {
    font-size: 42px !important;
  }

  .popular-categories {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .popular-categories .naccs .menu div,
  .category-post .naccs .menu div,
  .listing-page .naccs .menu div {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }
}


/* ══════════════════════════════════════════
   RESPONSIVE — TABLET  (≤ 991px)
══════════════════════════════════════════ */

@media (max-width: 991px) {

  /* Hero */
  .main-banner {
    min-height: 520px !important;
    padding: 130px 0 60px !important;
  }

  .main-banner .top-text h2 {
    font-size: 34px !important;
    line-height: 1.2 !important;
  }

  .main-banner .top-text h6 {
    font-size: 11px !important;
    letter-spacing: 3px !important;
  }

  /* Search form: 2-col layout */
  form#search-form {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 12px !important;
  }

  form#search-form .col-lg-3 {
    width: 50% !important;
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  form#search-form .col-lg-3:last-child {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  form#search-form button {
    width: 100% !important;
    padding: 14px !important;
    border-radius: 10px !important;
  }

  /* Hero category icons */
  .main-banner ul.categories {
    flex-wrap: wrap !important;
    gap: 12px !important;
    justify-content: center !important;
  }

  /* Category / Listing tab sidebar → horizontal strip */
  .popular-categories {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  .popular-categories .naccs .col-lg-3,
  .category-post .naccs .col-lg-3,
  .listing-page .naccs .col-lg-3 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .popular-categories .naccs .col-lg-9,
  .category-post .naccs .col-lg-9,
  .listing-page .naccs .col-lg-9 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-top: 16px;
  }

  .popular-categories .naccs .menu,
  .category-post .naccs .menu,
  .listing-page .naccs .menu {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 0;
    border-bottom: 1px solid var(--border);
    padding-bottom: 4px;
  }

  .popular-categories .naccs .menu div,
  .category-post .naccs .menu div,
  .listing-page .naccs .menu div {
    flex: 0 0 auto !important;
    border-bottom: none !important;
    border-right: 1px solid var(--border) !important;
    white-space: nowrap !important;
    padding: 12px 18px !important;
  }

  .popular-categories .naccs .menu::-webkit-scrollbar,
  .category-post .naccs .menu::-webkit-scrollbar,
  .listing-page .naccs .menu::-webkit-scrollbar {
    height: 3px;
  }

  /* Tab content — stack text & image */
  .popular-categories .nacc .thumb .col-lg-5,
  .popular-categories .nacc .thumb .col-lg-7,
  .category-post .nacc .thumb .col-lg-5,
  .category-post .nacc .thumb .col-lg-7 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  .popular-categories .nacc .thumb .right-image img,
  .category-post .nacc .thumb .right-image img {
    width: 100% !important;
    border-radius: var(--radius) !important;
    margin-top: 20px;
  }

  /* Listing cards — vertical stack */
  .recent-listing .item .listing-item,
  .listing-page .item .listing-item {
    flex-direction: column !important;
  }

  .recent-listing .item .listing-item .left-image,
  .listing-page .item .listing-item .left-image {
    width: 100% !important;
    max-width: 100% !important;
  }

  .recent-listing .item .listing-item .left-image img,
  .listing-page .item .listing-item .left-image img {
    width: 100% !important;
    height: 220px !important;
    object-fit: cover !important;
  }

  .recent-listing .item .right-content,
  .listing-page .item .right-content {
    padding: 20px !important;
    width: 100% !important;
  }

  /* Footer: stack columns */
  footer .col-lg-4 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 32px;
  }

  /* Contact: stack form halves */
  .contact-page .inner-content .col-lg-6 {
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 24px;
  }
}


/* ══════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 767px)
══════════════════════════════════════════ */

@media (max-width: 767px) {

  /* Hero */
  .main-banner {
    min-height: auto !important;
    padding: 110px 0 50px !important;
    text-align: center !important;
  }

  .main-banner .top-text h2 {
    font-size: 28px !important;
    line-height: 1.25 !important;
    background: linear-gradient(135deg, #ffffff 40%, var(--gold-2) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .main-banner .top-text h6 {
    font-size: 10px !important;
  }

  /* Search: fully stacked */
  form#search-form {
    flex-direction: column !important;
    gap: 10px !important;
  }

  form#search-form .col-lg-3,
  form#search-form .col-lg-3:last-child {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  form#search-form input.searchText {
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
  }

  /* Category icon pills: 2-col grid so labels always have room */
  .main-banner ul.categories {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
    text-align: center !important;
    padding: 0 !important;
    list-style: none !important;
  }

  /* Override base template inline-block so grid can control cells */
  .main-banner ul.categories li {
    display: block !important;
    width: auto !important;
    text-align: center !important;
  }

  .main-banner ul.categories li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    font-size: 13px !important;
    gap: 8px !important;
    white-space: nowrap !important;
    color: rgba(255, 255, 255, 0.92) !important;
  }

  /* Section headings */
  .section-heading h2 {
    font-size: 26px !important;
  }

  .section-heading h6 {
    font-size: 10px !important;
    letter-spacing: 3px !important;
  }

  /* Page headings */
  .page-heading .top-text h2 {
    font-size: 28px !important;
  }

  .page-heading {
    padding: 100px 0 50px !important;
  }

  /* Popular categories spacing */
  .popular-categories {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .popular-categories .naccs {
    border-radius: var(--radius-sm) !important;
  }

  .popular-categories .nacc .thumb .left-text h4,
  .category-post .nacc .thumb h4 {
    font-size: 18px !important;
  }

  /* Listing card tweaks */
  .recent-listing .item .listing-item .left-image img,
  .listing-page .item .listing-item .left-image img {
    height: 200px !important;
  }

  .recent-listing .item .right-content h4,
  .listing-page .item .right-content h4 {
    font-size: 16px !important;
  }

  .recent-listing .item .right-content .main-white-button a,
  .listing-page .item .right-content .main-white-button a {
    width: 100% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
  }

  /* Bigger OWL dot touch targets */
  .recent-listing .owl-dots .owl-dot,
  .listing-page .owl-dots .owl-dot {
    width: 10px !important;
    height: 10px !important;
    margin: 0 5px !important;
  }

  /* Main buttons full width */
  .main-white-button a {
    display: block !important;
    text-align: center !important;
    width: 100% !important;
  }

  /* Footer */
  footer {
    padding-top: 50px !important;
    padding-bottom: 20px !important;
  }

  footer h4 {
    font-size: 16px !important;
    margin-bottom: 12px !important;
  }

  footer p,
  footer a {
    font-size: 14px !important;
  }

  footer .sub-footer {
    text-align: center !important;
    padding: 16px 0 !important;
    font-size: 13px !important;
  }

  /* Contact */
  .contact-page .inner-content {
    padding: 24px 16px !important;
  }

  form#contact input,
  form#contact textarea {
    font-size: 14px !important;
  }

  form#contact button {
    width: 100% !important;
    padding: 14px !important;
  }

  /* Remove decorative blobs (performance) */
  body::before,
  body::after {
    display: none !important;
  }

  /* Mobile nav CTA button */
  .header-area .main-nav .nav li:last-child a,
  .background-header .main-nav .nav li:last-child a {
    width: 100% !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }
}


/* ══════════════════════════════════════════
   RESPONSIVE — SMALL PHONE  (≤ 480px)
══════════════════════════════════════════ */

@media (max-width: 480px) {

  /* Hero */
  .main-banner .top-text h2 {
    font-size: 24px !important;
  }

  /* Category pills: still 2 cols at small phone — inherited from ≤767px */

  /* Section heading */
  .section-heading h2 {
    font-size: 22px !important;
  }

  /* Listing card image shorter */
  .recent-listing .item .listing-item .left-image img,
  .listing-page .item .listing-item .left-image img {
    height: 175px !important;
  }

  /* Card content padding */
  .recent-listing .item .right-content,
  .listing-page .item .right-content {
    padding: 14px !important;
  }

  .recent-listing .item .right-content h4,
  .listing-page .item .right-content h4 {
    font-size: 15px !important;
  }

  .recent-listing .item .right-content ul.info {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* Tab menu items smaller */
  .popular-categories .naccs .menu div,
  .category-post .naccs .menu div,
  .listing-page .naccs .menu div {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* Categories section */
  .popular-categories {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* Page heading */
  .page-heading .top-text h2 {
    font-size: 22px !important;
  }

  /* Footer column spacing */
  footer .col-lg-4 {
    margin-bottom: 24px;
  }

  /* Buttons */
  .main-white-button a {
    padding: 12px 20px !important;
    font-size: 14px !important;
  }

  /* Contact form */
  form#contact input,
  form#contact textarea {
    font-size: 13px !important;
    padding: 10px 12px !important;
  }

  /* Search inputs */
  form#search-form select,
  form#search-form input {
    font-size: 13px !important;
    padding: 10px 12px !important;
  }
}