/* ==========================================================================
   REMOVE HERO SLIDER PAGINATION DOTS (tp-slider-3-dot)
   ========================================================================== */
.tp-slider-area .tp-slider-3-dot,
.tp-slider-area .tp-swiper-dot,
.tp-slider-area .swiper-pagination-bullets,
.tp-slider-3-dot,
.tp-slider-3-dot.d-sm-none,
.tp-swiper-dot.tp-slider-3-dot {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  z-index: -9999 !important;
}

/* ==========================================================================
   1. COMPACT TOP NAVBAR (CLEAN SINGLE BACKGROUND - ZERO EXTRA LAYERS)
   ========================================================================== */
.tp-header-area.tp-header-sticky.has-dark-logo.tp-header-height.header-main,
.tp-header-area.header-main,
.tp-header-area {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: auto !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  z-index: 999 !important;
}

/* Remove any background overlays, pseudo-elements or theme height blocks */
.tp-header-area::before,
.tp-header-area::after,
.tp-header-bottom-3::before,
.tp-header-bottom-3::after,
.tp-header-height::before,
.tp-header-height::after,
.tp-header-sticky::before,
.tp-header-sticky::after,
header::before,
header::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Reset inner header background so it never creates a double or detached background */
.tp-header-bottom-3.pl-85.pr-85,
.tp-header-bottom-3 {
  padding: 0 !important;
  min-height: 70px !important;
  height: 70px !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
}

.tp-header-bottom-3 .container-fluid {
  padding-left: 20px !important;
  padding-right: 20px !important;
  max-width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.tp-header-sticky-area {
  display: none !important;
  height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.tp-header-height {
  height: auto !important;
}

.tp-slider-area,
.tp-slider-area.p-relative.z-index-1,
.tp-slider-area.p-relative.z-index-1 .tp-slider-item-3 {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

main,
.breadcrumb__area,
.tp-breadcrumb-area {
  position: relative !important;
  margin-top: 0 !important;
}

/* ==========================================================================
   2. CLEAN ACTION ICONS (NO BADGES, CRISP DISPLAY)
   ========================================================================== */
.tp-header-action .tp-header-action-badge,
.tp-header-action-badge,
.tp-header-bottom-3 .tp-header-action-btn span,
.tp-header-bottom-3 .tp-header-action-item span,
.tp-header-bottom-3 .tp-header-action span,
.tp-header-bottom-3 .tp-header-action .tp-item-count,
.tp-header-action .tp-item-count,
.tp-header-action [class*="badge"],
.tp-header-action [class*="count"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  font-size: 0 !important;
  pointer-events: none !important;
}

.tp-header-bottom-3 .tp-header-action svg,
.tp-header-area .tp-header-action svg {
  width: 19px !important;
  height: 19px !important;
  transform: none !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

.tp-header-bottom-3 .tp-header-action svg path,
.tp-header-bottom-3 .tp-header-action svg {
  stroke: #111827 !important;
  color: #111827 !important;
  transition: color 0.2s ease, stroke 0.2s ease !important;
}

.tp-header-bottom-3 .tp-header-action svg:hover path {
  stroke: #eab308 !important;
}

.tp-header-bottom-3 .tp-header-action {
  gap: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
}

/* ==========================================================================
   3. MENU LINKS & TYPOGRAPHY
   ========================================================================== */
.tp-header-bottom-3 .main-menu.menu-style-3.menu-style-4 ul li a,
.tp-header-bottom-3 .tp-main-menu-content ul li a,
.tp-header-bottom-3 .main-menu ul li a,
.tp-header-bottom-3 .tp-header-action a,
.tp-header-bottom-3 .tp-header-action-btn {
  color: #111827 !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}

.tp-header-bottom-3 .main-menu ul li a:hover,
.tp-header-bottom-3 .tp-main-menu-content ul li a:hover {
  color: #eab308 !important;
}

.tp-header-area .logo img.logo-light,
.tp-header-area .logo a > img:first-child {
  display: none !important;
}
.tp-header-area .logo img.logo-dark,
.tp-header-area .logo a > img:nth-child(2) {
  display: inline-block !important;
}

/* ==========================================================================
   4. STICKY NAVBAR BEHAVIOR (SEAMLESS SINGLE BACKGROUND - NO DOUBLE LAYER)
   ========================================================================== */
.tp-header-area.tp-header-sticky.has-dark-logo.tp-header-height.header-main.header-sticky,
.tp-header-area.header-main.header-sticky,
.tp-header-area.header-sticky,
.tp-header-sticky.header-sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  min-height: 68px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06) !important;
  z-index: 99999 !important;
}

/* Inner header on sticky: stays clean transparent, inheriting the single white background */
.header-sticky .tp-header-bottom-3,
.tp-header-bottom-3.header-sticky,
header.header-sticky .tp-header-bottom-3 {
  position: static !important;
  min-height: 68px !important;
  height: 68px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.header-sticky .main-menu ul li a,
.header-sticky .tp-main-menu-content ul li a,
.header-sticky .tp-header-action a,
.header-sticky .tp-header-action-btn {
  color: #111827 !important;
}

/* --- HIDE STICKY NAVBAR WHEN SIDE MENU / OFFCANVAS IS OPEN (MOBILE & LAPTOPS) --- */
body:has(.offcanvas__area.offcanvas-opened) .tp-header-area.header-sticky,
body:has(.offcanvas__area.offcanvas-opened) .tp-header-sticky,
body:has(.offcanvas__area.offcanvas-opened) .header-sticky,
body:has(.offcanvas-opened) .header-sticky,
body:has(.body-overlay.opened) .tp-header-area.header-sticky,
body:has(.body-overlay.opened) .tp-header-sticky,
body:has(.body-overlay.opened) .header-sticky,
.offcanvas__area.offcanvas-opened ~ header .header-sticky,
.offcanvas__area.offcanvas-opened ~ header .tp-header-area,
.body-overlay.opened ~ header .header-sticky,
.body-overlay.opened ~ header .tp-header-area {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-100%) !important;
}

/* Ensure the side menu drawer and dark backdrop sit above everything */
.body-overlay {
  z-index: 999998 !important;
}
.offcanvas__area {
  z-index: 999999 !important;
}

/* ==========================================================================
   5. PERFECT CENTER NAVIGATION (ZERO OVERLAP WITH LOGO)
   ========================================================================== */
@media (min-width: 992px) {
  /* 3-Column flex row with balanced outer columns */
  .tp-header-bottom-3 .row.align-items-center {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    position: relative !important;
  }

  /* Left Column: Logo */
  .tp-header-bottom-3 .col-xl-2.col-lg-2.col-6:first-child,
  .tp-header-bottom-3 .col-lg-2:first-child,
  .tp-header-bottom-3 .col-xl-2:first-child {
    flex: 0 0 140px !important;
    width: 140px !important;
    max-width: 140px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    z-index: 10 !important;
  }

  .tp-header-bottom-3 .logo {
    position: static !important;
    left: 0 !important;
    margin: 0 !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Middle Column: Dead-Center Menu */
  .tp-header-bottom-3 .row.align-items-center .col-xl-8.col-lg-8.d-none.d-lg-block,
  .tp-header-bottom-3 .col-xl-8.col-lg-8 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 10px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 5 !important;
  }

  .tp-header-bottom-3 .main-menu,
  .tp-header-bottom-3 .tp-main-menu-content {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 auto !important;
  }

  .tp-header-bottom-3 .tp-main-menu-content > nav > ul,
  .tp-header-bottom-3 .main-menu ul {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    flex-wrap: nowrap !important;
  }

  /* Completely resets the theme margin-inline-end so items sit in true center */
  .tp-header-bottom-3 .main-menu ul li,
  .tp-header-bottom-3 .tp-main-menu-content ul li,
  .main-menu.menu-style-3>nav>ul>li,
  .main-menu.menu-style-3.menu-style-4>nav>ul>li {
    margin: 0 !important;
    margin-inline-end: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Right Column: Balanced with Left Column at 140px for exact center alignment */
  .tp-header-bottom-3 .col-xl-2.col-lg-2.col-6:last-child,
  .tp-header-bottom-3 .col-lg-2:last-child,
  .tp-header-bottom-3 .col-xl-2:last-child {
    flex: 0 0 140px !important;
    width: 140px !important;
    max-width: 140px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    z-index: 10 !important;
  }
}

/* ==========================================================================
   PERFECT MEGA MENU: IMAGES ON FIRST 2 ONLY + CLICKABLE WEDDING COLLECTIONS
   ========================================================================== */

/* 1. Disable Black Hover Tooltips & Badges */
.tooltip,
.bs-tooltip-top,
.bs-tooltip-bottom,
.bs-tooltip-auto,
[role="tooltip"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.tp-header-bottom-3 .main-menu ul li > a::after,
.tp-header-bottom-3 .main-menu ul li::after {
  display: none !important;
  content: none !important;
}

/* Clean Active Underline on Hover / Selected Item */
.tp-header-bottom-3 .main-menu > nav > ul > li:hover > a,
.tp-header-bottom-3 .main-menu > nav > ul > li.active > a {
  border-bottom: 2px solid #111827 !important;
  background: transparent !important;
  color: #111827 !important;
}

/* 2. Anchor Dropdown to Dead Center of Navbar */
.tp-header-bottom-3 .main-menu ul li.has-dropdown,
.tp-header-bottom-3 .main-menu ul li {
  position: static !important;
}

.tp-header-bottom-3,
.tp-header-bottom-3 .container-fluid {
  position: relative !important;
}

/* 3. Base Dropdown Card (Clean White Luxury Background & Shadow) */
.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown > .tp-submenu {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  height: auto !important;
  min-height: auto !important;
  padding: 28px 36px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-top: none !important;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  z-index: 99999 !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 32px !important;
  box-sizing: border-box !important;
}

/* Hover bridge */
.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown > .tp-submenu::before {
  content: "" !important;
  position: absolute !important;
  top: -12px !important;
  left: 0 !important;
  width: 100% !important;
  height: 12px !important;
  background: transparent !important;
  display: block !important;
}

/* Reveal on Hover */
@media (min-width: 991px) {
  .tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown:hover > .tp-submenu {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* ==========================================================================
   4. ADAPTIVE BACKGROUND WIDTH (WITH IMAGES VS WITHOUT IMAGES)
   ========================================================================== */

/* A. FIRST 2 MENUS (NECKLACES & EARRINGS): Wide 880px Card to fit 3 cols + Images */
.tp-header-bottom-3 .main-menu > nav > ul > li:nth-child(2).has-dropdown > .tp-submenu,
.tp-header-bottom-3 .main-menu > nav > ul > li:nth-child(3).has-dropdown > .tp-submenu {
  width: 880px !important;
  max-width: 95vw !important;
}

/* B. MIDDLE MENUS (BANGLES & ACCESSORIES): Sleek ~560px Card (No Empty Space) */
.tp-header-bottom-3 .main-menu > nav > ul > li:nth-child(4).has-dropdown > .tp-submenu,
.tp-header-bottom-3 .main-menu > nav > ul > li:nth-child(5).has-dropdown > .tp-submenu {
  width: auto !important;
  min-width: 540px !important;
  max-width: 600px !important;
  gap: 30px !important;
}

/* ==========================================================================
   5. COLUMN HEADINGS & SUB-TYPES (DEFAULT BEHAVIOR)
   ========================================================================== */

/* 3 Main Heading Columns */
.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown > .tp-submenu > li {
  flex: 0 0 145px !important;
  width: 145px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Main Heading Title (Default: acts as non-clickable header for menus 1 to 5) */
.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown > .tp-submenu > li > a {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
  height: auto !important;
  line-height: 1.3 !important;
  background: transparent !important;
  pointer-events: none !important;    
  white-space: nowrap !important;
  display: block !important;
}

.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown > .tp-submenu > li > a svg,
.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown > .tp-submenu > li > a::after {
  display: none !important;
  content: none !important;
}

/* Sub-Types List */
.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown > .tp-submenu > li > .tp-submenu {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  position: static !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  gap: 6px !important;              
}

.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown > .tp-submenu > li > .tp-submenu li {
  width: 100% !important;
  height: auto !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Sub-type links (clickable to their respective pages) */
.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown > .tp-submenu > li > .tp-submenu li a {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #64748b !important;
  padding: 2px 0 !important;
  height: auto !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  background: transparent !important;
  display: block !important;
  transition: all 0.15s ease !important;
  pointer-events: auto !important;
}

.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown > .tp-submenu > li > .tp-submenu li a:hover {
  color: #010f1c !important;
  transform: translateX(2px) !important;
  background: transparent !important;
}

/* Kill any nested popups / flyouts */
.tp-header-bottom-3 .tp-submenu .tp-submenu::after,
.tp-header-bottom-3 .tp-submenu li::after,
.tp-header-bottom-3 .tp-submenu .tp-submenu .tp-submenu {
  display: none !important;
  content: none !important;
}

/* ==========================================================================
   6. DUAL IMAGES: ONLY FOR FIRST 2 MENUS (NECKLACES & EARRINGS)
   ========================================================================== */

/* Show Images on Item 2 (NECKLACES) & Item 3 (EARRINGS) */
.tp-header-bottom-3 .main-menu > nav > ul > li:nth-child(2).has-dropdown:hover > .tp-submenu::after,
.tp-header-bottom-3 .main-menu > nav > ul > li:nth-child(3).has-dropdown:hover > .tp-submenu::after {
  content: "" !important;
  flex: 0 0 270px !important;
  width: 270px !important;
  height: 170px !important;
  margin-left: auto !important;
  align-self: flex-start !important;
  border-radius: 10px !important;
  background-image: 
    url('https://demo.treasurebysimora.com/storage/necklaces.webp'), 
    url('https://demo.treasurebysimora.com/storage/black-background-1.jpg') !important;
  background-size: 125px 170px, 125px 170px !important;
  background-position: left center, right center !important;
  background-repeat: no-repeat !important;
  display: block !important;
}

/* Remove images from the remaining dropdowns */
.tp-header-bottom-3 .main-menu > nav > ul > li:nth-child(n+4).has-dropdown > .tp-submenu::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* ==========================================================================
   7. ONLY FOR LAST OPTION (WEDDING COLLECTIONS): CLICKABLE HEADINGS
   ========================================================================== */

/* Dropdown card sized specifically for the 3 Wedding Collections headings */
.tp-header-bottom-3 .main-menu > nav > ul > li:last-child.has-dropdown > .tp-submenu,
.tp-header-bottom-3 .main-menu > nav > ul > li:nth-child(6).has-dropdown > .tp-submenu {
  width: auto !important;
  min-width: 480px !important;
  max-width: 540px !important;
  padding: 22px 30px !important;
  gap: 24px !important;
  justify-content: space-between !important;
}

.tp-header-bottom-3 .main-menu > nav > ul > li:last-child.has-dropdown > .tp-submenu > li,
.tp-header-bottom-3 .main-menu > nav > ul > li:nth-child(6).has-dropdown > .tp-submenu > li {
  flex: 1 1 auto !important;
  width: auto !important;
  text-align: left !important;
}

/* MAKE THE 3 HEADINGS CLICKABLE & NAVIGATIONAL ONLY IN WEDDING COLLECTIONS */
.tp-header-bottom-3 .main-menu > nav > ul > li:last-child.has-dropdown > .tp-submenu > li > a,
.tp-header-bottom-3 .main-menu > nav > ul > li:nth-child(6).has-dropdown > .tp-submenu > li > a {
  pointer-events: auto !important;     
  cursor: pointer !important;
  margin-bottom: 0 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  transition: all 0.2s ease !important;
}

/* Elegant hover effect on the Wedding Collections headings */
.tp-header-bottom-3 .main-menu > nav > ul > li:last-child.has-dropdown > .tp-submenu > li > a:hover,
.tp-header-bottom-3 .main-menu > nav > ul > li:nth-child(6).has-dropdown > .tp-submenu > li > a:hover {
  color: #eab308 !important;            
  transform: translateY(-2px) !important;
}

/* ==========================================================================
   7. RESPONSIVE BREAKPOINTS (PERFECT ALIGNMENT & NO EXTRA BACKGROUND)
   ========================================================================== */

/* --- A. LAPTOP 1024px VIEWPORT (992px to 1199px) --- */
@media (min-width: 992px) and (max-width: 1199px) {
  /* 1. Clean single background & exact 68px height */
  .tp-header-area.tp-header-sticky.has-dark-logo.tp-header-height.header-main,
  .tp-header-area.header-main,
  .tp-header-area {
    background: #ffffff !important;
    background-color: #ffffff !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    min-height: 68px !important;
  }

  .tp-header-area::before,
  .tp-header-area::after,
  .tp-header-bottom-3::before,
  .tp-header-bottom-3::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  .tp-header-bottom-3.pl-85.pr-85,
  .tp-header-bottom-3 {
    padding: 0 !important;
    min-height: 68px !important;
    height: 68px !important;
    background: transparent !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  .tp-header-bottom-3 .container-fluid {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .tp-header-bottom-3 .row.align-items-center,
  .tp-header-bottom-3 .row {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  /* 2. Logo Column: Centered vertically on the left */
  .tp-header-bottom-3 .row > [class*="col"]:first-child,
  .tp-header-bottom-3 .col-xl-2.col-lg-2:first-child,
  .tp-header-bottom-3 .col-lg-2:first-child,
  .tp-header-bottom-3 .logo {
    flex: 0 0 125px !important;
    width: 125px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10 !important;
  }

  .tp-header-bottom-3 .logo a {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    margin: 0 !important;
    line-height: 1 !important;
  }

  .tp-header-bottom-3 .logo img {
    height: 32px !important;
    width: auto !important;
    display: block !important;
    margin: auto 0 !important;
  }

  /* 3. Menu Navigation Column: Centered with balanced spacing */
  .tp-header-bottom-3 .row.align-items-center .col-xl-8.col-lg-8.d-none.d-lg-block,
  .tp-header-bottom-3 .col-xl-8.col-lg-8 {
    flex: 1 1 auto !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 10px !important;
    z-index: 5 !important;
  }

  .tp-header-bottom-3 .main-menu,
  .tp-header-bottom-3 .tp-main-menu-content {
    height: 100% !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .tp-header-bottom-3 .main-menu > nav,
  .tp-header-bottom-3 .main-menu > nav > ul,
  .tp-header-bottom-3 .tp-main-menu-content > nav,
  .tp-header-bottom-3 .tp-main-menu-content > nav > ul,
  .tp-header-bottom-3 .main-menu ul {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px !important;
    list-style: none !important;
    flex-wrap: nowrap !important;
  }

  .tp-header-bottom-3 .main-menu ul li,
  .tp-header-bottom-3 .tp-main-menu-content ul li {
    position: relative !important;
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
  }

  .tp-header-bottom-3 .main-menu ul li a,
  .tp-header-bottom-3 .tp-main-menu-content ul li a {
    height: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.15px !important;
    padding: 0 3px !important;
    white-space: nowrap !important;
  }

  .tp-header-bottom-3 .main-menu ul li a svg,
  .tp-header-bottom-3 .tp-main-menu-content ul li a svg {
    width: 9px !important;
    height: 9px !important;
    margin-left: 3px !important;
    display: inline-block !important;
    vertical-align: middle !important;
  }

  /* 4. Action Icons Column: Completely anchored to the right */
  .tp-header-bottom-3 .row > [class*="col"]:last-child,
  .tp-header-bottom-3 .col-xl-2.col-lg-2:last-child,
  .tp-header-bottom-3 .col-lg-2:last-child {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 100px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    margin-left: auto !important; /* Forces column to far right edge */
    padding: 0 !important;
    z-index: 10 !important;
  }

  /* Remove theme ml-50 margin, reduce gap between icons, and align hard right */
  .tp-header-bottom-3 .tp-header-action {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    margin: 0 !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    padding: 0 !important;
    gap: 22px !important; /* Reduced icon gap */
  }

  .tp-header-bottom-3 .tp-header-action-item {
    margin: 0 !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .tp-header-bottom-3 .tp-header-action svg {
    width: 17px !important;
    height: 17px !important;
    display: block !important;
  }

  /* 5. REMOVE HAMBURGER MENU ITEM FROM 1024px LAPTOP */
  .tp-header-bottom-3 .tp-header-action-item.d-lg-none.tp-header-action-item-menu,
  .tp-header-bottom-3 .tp-header-action-item-menu,
  .tp-header-bottom-3 .tp-offcanvas-open-btn,
  .tp-header-bottom-3 .tp-header-action .d-lg-none {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    overflow: hidden !important;
  }

  /* 6. Dropdown Submenu: Opens directly below navbar */
  .tp-header-bottom-3 .has-dropdown > .tp-submenu,
  .tp-header-bottom-3 ul.tp-submenu,
  .tp-header-bottom-3 .tp-submenu {
    position: absolute !important;
    top: 100% !important;
    bottom: auto !important;
    left: 0 !important;
    right: auto !important;
    min-width: 210px !important;
    width: max-content !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    border-radius: 0 0 8px 8px !important;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-top: none !important;
    z-index: 99999 !important;
  }

  .tp-header-bottom-3 .tp-submenu li {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .tp-header-bottom-3 .tp-submenu li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    height: auto !important;
    padding: 9px 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #111827 !important;
    white-space: nowrap !important;
    background: transparent !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
  }

  .tp-header-bottom-3 .tp-submenu li a:hover {
    color: #eab308 !important;
    background-color: #f8fafc !important;
    padding-left: 24px !important;
  }
}

/* --- B. TABLETS & MOBILE (Below 992px) --- */
@media (max-width: 991px) {
  .tp-header-area.tp-header-sticky.has-dark-logo.tp-header-height.header-main,
  .tp-header-area.header-main,
  .tp-header-area {
    min-height: 60px !important;
    height: 60px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

  .tp-header-area::before,
  .tp-header-area::after,
  .tp-header-bottom-3::before,
  .tp-header-bottom-3::after {
    display: none !important;
    content: none !important;
    background: none !important;
  }

  .tp-header-bottom-3.pl-85.pr-85,
  .tp-header-bottom-3 {
    padding: 0 !important;
    min-height: 60px !important;
    height: 60px !important;
    background: transparent !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
  }

  .tp-header-bottom-3 .container-fluid {
    height: 100% !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    display: flex !important;
    align-items: center !important;
  }

  .tp-header-bottom-3 .row {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .tp-header-bottom-3 .logo img {
    height: 28px !important;
    width: auto !important;
  }

  .tp-header-bottom-3 .tp-header-action {
    gap: 12px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
  }

  .tp-header-bottom-3 .tp-header-action svg {
    width: 18px !important;
    height: 18px !important;
  }
}

/* --- C. MID-SIZE LAPTOPS & DESKTOPS (1200px to 1440px) --- */
@media (min-width: 1200px) and (max-width: 1440px) {
  .tp-header-area.tp-header-sticky.has-dark-logo.tp-header-height.header-main,
  .tp-header-area.header-main,
  .tp-header-area {
    min-height: 70px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

  .tp-header-bottom-3.pl-85.pr-85,
  .tp-header-bottom-3 {
    height: 70px !important;
    min-height: 70px !important;
    background: transparent !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
  }

  .tp-header-bottom-3 .container-fluid {
    height: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    display: flex !important;
    align-items: center !important;
  }

  .tp-header-bottom-3 .logo img {
    height: 32px !important;
    width: auto !important;
  }

  .tp-header-bottom-3 .main-menu > nav > ul,
  .tp-header-bottom-3 .tp-main-menu-content > nav > ul {
    gap: 16px !important;
  }

  .tp-header-bottom-3 .main-menu ul li a,
  .tp-header-bottom-3 .tp-main-menu-content ul li a {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
    padding: 8px 4px !important;
  }

  .tp-header-bottom-3 .tp-header-action {
    gap: 14px !important;
  }
}

/* --- D. LARGE MONITORS (>= 1441px) --- */
@media (min-width: 1441px) {
  .tp-header-area.tp-header-sticky.has-dark-logo.tp-header-height.header-main,
  .tp-header-area.header-main,
  .tp-header-area {
    min-height: 74px !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
  }

  .tp-header-bottom-3.pl-85.pr-85,
  .tp-header-bottom-3 {
    height: 74px !important;
    min-height: 74px !important;
    background: transparent !important;
    background-color: transparent !important;
    display: flex !important;
    align-items: center !important;
  }

  .tp-header-bottom-3 .container-fluid {
    height: 100% !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    display: flex !important;
    align-items: center !important;
  }

  .tp-header-bottom-3 .logo {
    position: static !important;
    left: 0 !important;
  }

  .tp-header-bottom-3 .logo img {
    height: 36px !important;
    width: auto !important;
  }

  .tp-header-bottom-3 .main-menu > nav > ul,
  .tp-header-bottom-3 .tp-main-menu-content > nav > ul {
    gap: 22px !important;
  }

  .tp-header-bottom-3 .main-menu ul li a {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    padding: 10px 6px !important;
  }

  .tp-header-bottom-3 .has-dropdown .tp-submenu,
  .tp-header-bottom-3 ul.tp-submenu,
  .tp-header-bottom-3 .tp-submenu {
    min-width: 200px !important;
    padding: 6px 0 !important;
  }

  .tp-header-bottom-3 .tp-submenu li a {
    font-size: 13px !important;
    padding: 8px 18px !important;
  }
}

/* ==========================================================================
   8. BANNER, TOP COLLECTIONS & FONT STYLING
   ========================================================================== */
.col-md-6.col-sm-6 .tp-banner-content-4 {
  margin-top: -30px !important;
  transform: translateY(-10px) !important; 
  position: relative !important;
  z-index: 5 !important;
}

@media (max-width: 767px) {
  .col-md-6.col-sm-6 .tp-banner-content-4 {
    margin-top: -15px !important;
    transform: translateY(0) !important;
  }
}

.tp-product-category.pt-60.pb-15 .container::before,
.tp-product-category .container:first-of-type::before {
  content: "Top Collections";
  display: block;
  width: 100%;
  text-align: center;
  font-size: clamp(24px, 5vw, 38px);
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 30px;
  position: relative;
  z-index: 2;
}

.tp-product-category.pt-60.pb-15 .container::after,
.tp-product-category .container:first-of-type::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin: -20px auto 30px auto;
  border-radius: 99px;
}


@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&family=Montserrat:wght@500;600&display=swap');


/* ==========================================================================
   2-LINE HEADING ABOVE PRODUCT CATEGORIES ROW (TITLE + SUBTITLE)
   ========================================================================== */
.tp-product-category.pt-60.pb-15 .container {
  position: relative !important;
}


.tp-product-category.pt-60.pb-15 .container::before {
  content: "Top Categories"; 
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: clamp(24px, 4vw, 36px) !important;
  font-weight: 700 !important;
  color: #010f1c !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
  margin-bottom: 8px !important;
  position: relative !important;
  z-index: 2 !important;
}

.tp-product-category.pt-60.pb-15 .container::after {
  content: "Explore our latest handcrafted jewelry and trending collections";
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: clamp(13px, 2vw, 15px) !important;
  font-weight: 400 !important;
  color: #64748b !important;
  letter-spacing: 0.2px !important;
  line-height: 1.4 !important;
  margin-bottom: 35px !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ==========================================================================
   PERFECT 2-LINE HEADINGS (ZERO OVERLAP - 100% RESPONSIVE)
   ========================================================================== */
.tp-product-category.pt-60.pb-15 .container {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
}

/* 1. TOP LINE: Top Categories */
.tp-product-category.pt-60.pb-15 .container::before {
  content: "Top Categories" !important;
  order: 1 !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: clamp(22px, 3.5vw, 32px) !important;
  font-weight: 700 !important;
  color: #000000 !important;
  line-height: 1.2 !important;
  margin: 0 0 10px 0 !important;
  position: static !important;
}

/* 2. SECOND LINE: Full Collections */
.tp-product-category.pt-60.pb-15 .container::after {
  font-family: 'Bodoni Moda', Georgia, serif !important;
  order: 2 !important;
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-size: clamp(14px, 2vw, 17px) !important;
  font-weight: 600 !important;
  color: #252880 !important; 
  letter-spacing: 0.5px !important;
  line-height: 1.3 !important;
  margin: 0 0 35px 0 !important;   position: static !important;
}

/* 3. PRODUCT ROW: Sits neatly below both texts */
.tp-product-category.pt-60.pb-15 .row.row-cols-xl-5,
.tp-product-category.pt-60.pb-15 .row {
  order: 3 !important;
  width: 100% !important;
  margin-top: 0 !important;
}

/* 4. MOBILE ADJUSTMENT */
@media (max-width: 767px) {
  .tp-product-category.pt-60.pb-15 .container::before {
    margin-bottom: 8px !important;
  }
  .tp-product-category.pt-60.pb-15 .container::after {
    margin-bottom: 25px !important;
  }
}

/* ==========================================================================
   9. RESPONSIVE HERO SLIDER
   ========================================================================== */
.tp-slider-area,
.tp-slider-active-3,
.tp-slider-active-3.swiper-container {
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
}

.tp-slider-active-3 .swiper-wrapper {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
}

.tp-slider-active-3 .swiper-slide:not(.swiper-slide-active) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.tp-slider-active-3 .swiper-slide-active {
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 2 !important;
}

.tp-slider-content-3 {
  position: relative !important;
  z-index: 5 !important;
}

.tp-slider-item-3,
.tp-slider-thumb-3.include-bg,
.tp-slider-item-3 [style*="background-image"] {
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

@media (min-width: 768px) and (max-width: 991px) {
  .tp-slider-height-3,
  .tp-slider-active-3,
  .tp-slider-active-3 .swiper-slide,
  .tp-slider-item-3 {
    height: 480px !important;
    min-height: 480px !important;
    max-height: 480px !important;
    overflow: hidden !important;
  }

  .tp-slider-thumb-3,
  .tp-slider-thumb-3.include-bg,
  .tp-slider-item-3,
  .tp-slider-item-3 [style*="background-image"] {
    background-position: 75% center !important;
  }

  .tp-slider-thumb-3:after {
    background: rgba(10, 15, 30, 0.35) !important;
  }

  .col-xl-6.col-lg-6.col-md-8 {
    flex: 0 0 85% !important;
    max-width: 85% !important;
    width: 85% !important;
  }

  .tp-slider-title-3,
  .tp-slider-area .tp-slider-title-3,
  .tp-slider-content-3 .tp-slider-title-3,
  .col-xl-6.col-lg-6.col-md-8 .tp-slider-title-3,
  h3.tp-slider-title-3 {
    font-size: 32px !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
  }

  .tp-slider-content-3 span {
    font-size: 16px !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5) !important;
  }

  .tp-slider-btn-3 .tp-btn {
    padding: 10px 24px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 767px) {
  .tp-slider-height-3,
  .tp-slider-active-3,
  .tp-slider-active-3 .swiper-slide,
  .tp-slider-item-3 {
    height: 450px !important;
    min-height: 450px !important;
    max-height: 450px !important;
    overflow: hidden !important;
  }

  .tp-slider-thumb-3,
  .tp-slider-thumb-3.include-bg,
  .tp-slider-item-3,
  .tp-slider-item-3 [style*="background-image"] {
    background-size: cover !important;
    background-position: 78% center !important;
  }

  .tp-slider-thumb-3:after {
    background: rgba(5, 12, 28, 0.38) !important;
  }

  .tp-slider-item-3 .col-xl-6.col-lg-6.col-md-8 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .tp-slider-content-3 {
    padding: 0 12px !important;
    text-align: left !important;
  }

  .tp-slider-title-3,
  .tp-slider-area .tp-slider-title-3,
  .tp-slider-content-3 .tp-slider-title-3,
  .col-xl-6.col-lg-6.col-md-8 .tp-slider-title-3,
  h3.tp-slider-title-3,
  [class*="tp-slider-title"] {
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin-bottom: 12px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7) !important;
  }

  .tp-slider-content-3 span,
  .tp-slider-sub-title-3 {
    font-size: 13px !important;
    line-height: 1.3 !important;
    margin-bottom: 8px !important;
    display: inline-block !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7) !important;
  }

  .tp-slider-btn-3 {
    margin-top: 4px !important;
  }

  .tp-slider-btn-3 .tp-btn {
    padding: 8px 20px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    height: auto !important;
  }
}

@media (min-width: 760px) and (max-width: 991px) {
  .tp-product-category .row.row-cols-md-4,
  .tp-product-category .row {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }

  .tp-product-category .row.row-cols-md-4 > .col,
  .tp-product-category .row > .col {
    flex: 0 0 33.333% !important;
    max-width: 33.333% !important;
    width: 33.333% !important;
  }

  .tp-feature-area .tp-feature-inner-2 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    row-gap: 25px !important;
  }

  .tp-feature-area .tp-feature-item-2 {
    flex: 0 0 48% !important;
    max-width: 48% !important;
    width: 48% !important;
    margin-bottom: 0 !important;
  }

  .tp-feature-item-2:after,
  .tp-feature-item-2:not(:last-child):after {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .tp-feature-area .tp-feature-inner-2 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    row-gap: 10px !important;
  }

  .tp-feature-area .tp-feature-item-2 {
    flex: 0 0 calc(50% - 5px) !important;
    max-width: calc(50% - 5px) !important;
    width: calc(50% - 5px) !important;
    background: #fbfbfb !important;
    border: 1px solid #eeeeee !important;
    border-radius: 8px !important;
    padding: 10px 8px !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .tp-feature-area .tp-feature-icon-2 {
    margin-right: 8px !important;
    flex-shrink: 0 !important;
  }

  .tp-feature-area .tp-feature-title-2 {
    font-size: 12.5px !important;
    font-weight: 600 !important;
  }

  .tp-feature-area .tp-feature-content-2 p {
    font-size: 10.5px !important;
    color: #777 !important;
    margin-bottom: 0 !important;
  }

  .tp-feature-item-2:after,
  .tp-feature-item-2:not(:last-child):after {
    display: none !important;
  }
}

/* ==========================================================================
   10. RESPONSIVE PROMOTIONAL BANNERS
   ========================================================================== */
.tp-banner-area .tp-banner-item-4,
.tp-banner-area .tp-banner-full {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}

.tp-banner-area .col-md-6.col-sm-6 .tp-banner-content-4,
.col-md-6.col-sm-6 .tp-banner-content-4 {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: none !important;
  position: absolute !important;
  z-index: 5 !important;
}

.tp-banner-area .tp-banner-thumb-4,
.tp-banner-area .tp-banner-full-thumb {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1 !important;
  margin: 0 !important;
  margin-bottom: 0 !important;
}

.tp-banner-area .tp-banner-thumb-4 a,
.tp-banner-area .tp-banner-thumb-4 picture,
.tp-banner-area .tp-banner-thumb-4 img,
.tp-banner-area .tp-banner-full-thumb a,
.tp-banner-area .tp-banner-full-thumb picture,
.tp-banner-area .tp-banner-full-thumb img {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

.tp-banner-content-4,
.tp-banner-full-content {
  position: absolute !important;
  z-index: 3 !important;
}

.col-xl-12 .tp-banner-title-4 {
   font-size: 28px !important;
   line-height: 1.25 !important;
}

.col-xl-12 .tp-banner-btn-4 {
   font-size: 28px !important;
   
}

.col-md-6.col-sm-6 .tp-banner-title-4 {
   font-size: 25px !important;
   height: 22px !important; 
}

@media (min-width: 992px) {
  .col-xl-12 .tp-banner-item-4.tp-banner-height-4 {
    height: 288px !important;
    min-height: 288px !important;
  }
  .col-xl-12 .tp-banner-item-4 .tp-banner-thumb-4 img {
    object-fit: cover !important;
    object-position: right center !important;
  }
  .col-xl-12 .tp-banner-content-4 {
    left: 40px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: 55% !important;
  }

  .col-md-6.col-sm-6 .tp-banner-item-4.tp-banner-height-4 {
    height: 288px !important;
    min-height: 288px !important;
  }
  .col-md-6.col-sm-6 .tp-banner-item-4 .tp-banner-thumb-4 img {
    object-fit: cover !important;
    object-position: center bottom !important;
  }
  .col-md-6.col-sm-6 .tp-banner-content-4 {
    top: 32px !important;
    left: 30px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .tp-banner-full.tp-banner-full-height {
    height: 100% !important;
    min-height: 601px !important;
  }
  .tp-banner-full .tp-banner-full-thumb img {
    object-fit: cover !important;
    object-position: center center !important;
  }
  .tp-banner-full-content {
    bottom: 50px !important;
    left: 45px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .col-xl-12 .tp-banner-item-4.tp-banner-height-4 {
    height: 250px !important;
    min-height: 250px !important;
    background-color: #F3F7FF !important;
    margin-bottom: 20px !important;
  }
  .col-xl-12 .tp-banner-item-4 .tp-banner-thumb-4 img {
    object-fit: cover !important;
    object-position: right center !important;
  }
  .col-xl-12 .tp-banner-content-4 {
    left: 30px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: 55% !important;
  }
  .col-xl-12 .tp-banner-title-4 {
    font-size: 22px !important;
    line-height: 1.25 !important;
  }

  .col-md-6.col-sm-6 .tp-banner-item-4.tp-banner-height-4 {
    height: 255px !important;
    min-height: 255px !important;
    background-color: #F3F7FF !important;
  }
  .col-md-6.col-sm-6 .tp-banner-item-4 .tp-banner-thumb-4 img {
    object-fit: cover !important;
    object-position: center bottom !important;
  }
  .col-md-6.col-sm-6 .tp-banner-content-4 {
    position: absolute !important;
    top: 25px !important;
    left: 25px !important;
    margin: 0 !important;
    transform: none !important;
    bottom: auto !important;
    right: auto !important;
    max-width: 85% !important;
  }
  .col-md-6.col-sm-6 .tp-banner-content-4 span {
    display: block !important;
    color: #2061e3 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important;
  }
  .col-md-6.col-sm-6 .tp-banner-title-4 {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
    color: #111 !important;
  }

  .tp-banner-full {
    margin-top: 25px !important;
    height: 380px !important;
    min-height: 380px !important;
  }
  .tp-banner-full .tp-banner-full-thumb img {
    object-fit: cover !important;
    object-position: center 30% !important;
  }
  .tp-banner-full-content {
    bottom: 35px !important;
    left: 35px !important;
  }
  .tp-banner-full-title {
    font-size: 30px !important;
  }
}

@media (max-width: 767px) {
  .tp-banner-area .tp-banner-height-4,
  .tp-banner-item-4.tp-banner-height-4 {
    background-color: #F3F7FF !important;
  }

  .col-xl-12 .tp-banner-item-4.tp-banner-height-4 {
    height: 205px !important;
    min-height: 205px !important;
    margin-bottom: 14px !important;
  }
  .col-xl-12 .tp-banner-item-4 .tp-banner-thumb-4 img {
    object-fit: cover !important;
    object-position: right center !important;
  }
  .col-xl-12 .tp-banner-content-4 {
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    max-width: 58% !important;
  }
  .col-xl-12 .tp-banner-content-4 span {
    font-size: 12px !important;
    margin-bottom: 2px !important;
  }
  .col-xl-12 .tp-banner-title-4 {
    font-size: 17px !important;
    line-height: 1.2 !important;
    margin-bottom: 10px !important;
  }
  .col-xl-12 .tp-banner-btn-4 .tp-btn {
    padding: 5px 14px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  .tp-banner-area .col-xl-6.col-lg-7 .row .col-md-6.col-sm-6 {
    flex: 0 0 50% !important;
    max-width: 50% !important;
    width: 50% !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .tp-banner-area .col-xl-6.col-lg-7 .row .col-xl-12 {
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
  .col-md-6.col-sm-6 .tp-banner-item-4.tp-banner-height-4 {
    height: 195px !important;
    min-height: 195px !important;
    margin-bottom: 14px !important;
  }
  .col-md-6.col-sm-6 .tp-banner-item-4 .tp-banner-thumb-4 img {
    object-fit: cover !important;
    object-position: center bottom !important;
  }
  .col-md-6.col-sm-6 .tp-banner-content-4 {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    margin: 0 !important;
    transform: none !important;
    bottom: auto !important;
    right: auto !important;
    max-width: 88% !important;
  }
  .col-md-6.col-sm-6 .tp-banner-content-4 span {
    display: block !important;
    font-size: 11px !important;
    margin-bottom: 2px !important;
  }
  .col-md-6.col-sm-6 .tp-banner-title-4 {
    font-size: 15px !important;
    line-height: 1.2 !important;
    margin-bottom: 0 !important;
  }

  .tp-banner-full {
    margin-top: 4px !important;
    height: 330px !important;
    min-height: 330px !important;
    width: 100% !important;
  }
  .tp-banner-full .tp-banner-full-thumb img {
    object-fit: cover !important;
    object-position: center 25% !important;
  }
  .tp-banner-full-content {
    bottom: 25px !important;
    left: 20px !important;
  }
  .tp-banner-full-content span {
    font-size: 13px !important;
  }
  .tp-banner-full-title {
    font-size: 24px !important;
    line-height: 1.15 !important;
    margin-bottom: 0 !important;
  }
}

/* ==========================================================================
   11. SCROLLBAR REMOVAL (CAROUSELS)
   ========================================================================== */
.tp-best-swiper-scrollbar,
.tp-swiper-scrollbar,
.swiper-scrollbar,
.tp-swiper-scrollbar-drag {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   12. HERO BANNER PROTECTION
   ========================================================================== */
.tp-slider-area,
.tp-slider-area .tp-slider-active-3 {
  cursor: default !important;
  padding-bottom: 0 !important;
}

.tp-slider-area .tp-slider-thumb-3,
.tp-slider-area .tp-slider-thumb-3:after {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.tp-slider-area .tp-slider-arrow-3 button {
  position: absolute !important;
}

/* ==========================================================================
   13. PRODUCT SLIDER ARROWS & DOTS
   ========================================================================== */
.tp-best-slider,
.tp-featured-slider,
.tp-trending-slider,
.tp-product-arrival-area {
  position: relative !important;
}

.tp-best-slider-active.swiper-container,
.tp-featured-slider-active.swiper-container,
.tp-trending-slider-active.swiper-container,
.tp-product-arrival-active.swiper-container {
  position: relative !important;
  overflow: hidden !important;
  cursor: grab !important;
  padding: 10px 4px 15px 4px !important;
}

.tp-best-slider-active.swiper-container:active,
.tp-featured-slider-active.swiper-container:active,
.tp-trending-slider-active.swiper-container:active,
.tp-product-arrival-active.swiper-container:active {
  cursor: grabbing !important;
}

.tp-best-slider .tp-slider-nav-arrow,
.tp-featured-slider .tp-slider-nav-arrow,
.tp-trending-slider .tp-slider-nav-arrow,
.tp-product-arrival-area .tp-slider-nav-arrow {
  position: absolute !important;
  top: 45% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  color: #010f1c !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 25 !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  outline: none !important;
  padding: 0 !important;
}

.tp-best-slider .tp-slider-nav-arrow:hover,
.tp-featured-slider .tp-slider-nav-arrow:hover,
.tp-trending-slider .tp-slider-nav-arrow:hover,
.tp-product-arrival-area .tp-slider-nav-arrow:hover {
  background: #010f1c !important;
  color: #ffffff !important;
  border-color: #010f1c !important;
  box-shadow: 0 6px 20px rgba(1, 15, 28, 0.25) !important;
  transform: translateY(-50%) scale(1.08) !important;
}

.tp-slider-nav-arrow svg {
  width: 18px !important;
  height: 18px !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
  fill: none !important;
}

.tp-slider-nav-arrow.tp-arrow-prev {
  left: -20px !important;
}

.tp-slider-nav-arrow.tp-arrow-next {
  right: -20px !important;
}

.tp-slider-nav-arrow.swiper-button-disabled {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 767px) {
  .tp-best-slider .tp-slider-nav-arrow,
  .tp-featured-slider .tp-slider-nav-arrow,
  .tp-trending-slider .tp-slider-nav-arrow,
  .tp-product-arrival-area .tp-slider-nav-arrow {
    display: none !important;
  }
}

.tp-best-slider .tp-slider-dots-container,
.tp-featured-slider .tp-slider-dots-container,
.tp-trending-slider .tp-slider-dots-container,
.tp-product-arrival-area .tp-slider-dots-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 20px !important;
  padding: 6px 0 !important;
  position: relative !important;
  bottom: auto !important;
}

.tp-slider-dots-container .swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  background-color: #cbd5e1 !important;
  border-radius: 99px !important;
  opacity: 1 !important;
  margin: 0 !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

.tp-slider-dots-container .swiper-pagination-bullet-active {
  width: 28px !important;
  height: 8px !important;
  background-color: #010f1c !important;
  border-radius: 99px !important;
}

.tp-slider-dots-container .swiper-pagination-bullet:hover {
  background-color: #94a3b8 !important;
}

.tp-slider-dots-container .swiper-pagination-bullet-active:hover {
  background-color: #010f1c !important;
}

@media (max-width: 767px) {
  .tp-best-slider .tp-slider-dots-container,
  .tp-featured-slider .tp-slider-dots-container,
  .tp-trending-slider .tp-slider-dots-container,
  .tp-product-arrival-area .tp-slider-dots-container {
    margin-top: 14px !important;
    gap: 6px !important;
  }
  .tp-slider-dots-container .swiper-pagination-bullet {
    width: 6px !important;
    height: 6px !important;
  }
  .tp-slider-dots-container .swiper-pagination-bullet-active {
    width: 22px !important;
    height: 6px !important;
  }
}

/* ==========================================================================
   14. REMOVE 'ALL CATEGORIES' FROM MOBILE / TABLET DRAWER
   ========================================================================== */
.tp-offcanvas-category-toggle,
.tp-category-mobile-menu,
.offcanvas__category,
.pb-40.offcanvas__category,
.tp-offcanvas-category,
.tp-category-menu-toggle,
.offcanvas__area .offcanvas__category,
.offcanvas__wrapper .offcanvas__category,
.offcanvas__category button,
.tp-offcanvas-tabs .nav-link:last-child,
.offcanvas__nav-tabs .nav-link[data-bs-target*="cat"],
.offcanvas__nav-tabs .nav-link[data-bs-target*="category"],
.offcanvas__nav-tabs .nav-link[aria-controls*="category"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  overflow: hidden !important;
}

.tp-offcanvas-tabs .nav-link:first-child,
.offcanvas__nav-tabs .nav-link:first-child {
  width: 100% !important;
  border: none !important;
  text-align: center !important;
}

/* ==========================================================================
   DISABLE NEWSLETTER EMAIL SUBSCRIBE FORM
   ========================================================================== */
.tp-subscribe-area .tp-subscribe-form,
.tp-subscribe-form {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* ==========================================================================
   AUTH CARD BANNER: EXPANDED IMAGE RESOLUTION & SIZING
   ========================================================================== */
.tp-page-area .col-md-6.auth-card__left,
.tp-page-area .auth-card__left {
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  height: 100% !important;
  min-height: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 12px 0 0 12px !important;
}

/* Container & image element sizing */
.tp-page-area .auth-card__left .auth-card__banner,
.tp-page-area .auth-card__banner {
  width: 100% !important;
  height: 100% !important;
  min-height: 580px !important;
  max-width: 2000px !important;
  max-height: 4000px !important;
  position: relative !important;
  display: block !important;
  overflow: hidden !important;
  /* If background-image is loaded through CSS: */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* If the banner contains an  tag: */
.tp-page-area .auth-card__left .auth-card__banner img,
.tp-page-area .auth-card__banner img {
  width: 100% !important;
  height: 100% !important;
  max-width: 2000px !important;
  max-height: 4000px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

/* Keep responsive on mobile / tablet screens */
@media (max-width: 767px) {
  .tp-page-area .col-md-6.auth-card__left,
  .tp-page-area .auth-card__left {
    border-radius: 12px 12px 0 0 !important;
  }

  .tp-page-area .auth-card__left .auth-card__banner,
  .tp-page-area .auth-card__banner {
    min-height: 260px !important;
    max-height: 380px !important;
  }
}

/* ==========================================================================
   MOVE TP-ABOUT-THUMB-2 FURTHER DOWN & TO THE RIGHT
   ========================================================================== */

/* 1. Ensure right-side text remains visible and sharp */
.tp-about-area .tp-about-content-2,
.tp-about-area .tp-section-title-wrapper-2 {
  position: relative !important;
  z-index: 5 !important;
}

/* 2. Desktop & Laptops (>= 992px): Pushed further down and further right */
@media (min-width: 992px) {
  .tp-about-area .tp-about-thumb-2 {
    position: absolute !important;
    bottom: -105px !important;              
    top: auto !important;
    right: -140px !important;               
    left: auto !important;
    max-width: 320px !important;
    z-index: 2 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
  }

  .tp-about-area .tp-about-thumb-2 img {
    width: 100% !important;
    height: auto !important;
    max-height: 380px !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* 3. Tablets (768px to 991px): Proportionally shifted down and right */
@media (min-width: 768px) and (max-width: 991px) {
  .tp-about-area .tp-about-thumb-2 {
    position: absolute !important;
    bottom: -45px !important;              
    top: auto !important;
    right: -25px !important;               
    left: auto !important;
    max-width: 250px !important;
    z-index: 2 !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
    border-radius: 6px !important;
  }

  .tp-about-area .tp-about-thumb-2 img {
    width: 100% !important;
    height: auto !important;
    max-height: 300px !important;
    object-fit: cover !important;
    display: block !important;
  }
}


@media (max-width: 767px) {
  .tp-about-area .tp-about-thumb-2 {
    position: relative !important;
    bottom: auto !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    margin-top: 25px !important;
    margin-bottom: 25px !important;
    max-width: 80% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    z-index: 2 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12) !important;
    border-radius: 6px !important;
  }

  .tp-about-area .tp-about-thumb-2 img {
    width: 100% !important;
    height: auto !important;
    max-height: 250px !important;
    object-fit: cover !important;
    display: block !important;
  }
}

/* ==========================================================================
   UNIFIED LUXURY JEWELRY TYPOGRAPHY
   (ZERO UPPERCASE • NO NAVBAR/SUBMENU OVERRIDES • ELEGANT PARAGRAPH STYLE)
   ========================================================================== */

/* 1. PARAGRAPHS & BODY TEXT: Playfair Display (Refined Luxury Editorial Serif) */
p,
.tp-feature-content-2 p,
.tp-about-content-2 p,
.tp-blog-item-2 p,
.tp-postbox-details-content p,
.tp-footer-desc p {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

/* Base inputs & form controls */
input,
select,
textarea {
  font-family: 'Playfair Display', Georgia, serif !important;
  text-transform: none !important;
}

/* 2. HERO SLIDER MAIN TITLE: Cormorant Garamond — Regular (400) */
.tp-slider-area .tp-slider-title-3,
.tp-slider-content-3 .tp-slider-title-3,
.col-xl-6.col-lg-6.col-md-8 .tp-slider-title-3,
h3.tp-slider-title-3,
.tp-slider-title-3,
.tp-slider-title-3 span {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 48px !important;
  font-weight: 400 !important;           
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
  text-transform: none !important;
}

@media (min-width: 768px) and (max-width: 991px) {
  .tp-slider-area .tp-slider-title-3,
  .tp-slider-content-3 .tp-slider-title-3,
  .col-xl-6.col-lg-6.col-md-8 .tp-slider-title-3,
  h3.tp-slider-title-3,
  .tp-slider-title-3,
  .tp-slider-title-3 span {
    font-size: 32px !important;
    font-weight: 400 !important;           
    line-height: 1.2 !important;
  }
}

@media (max-width: 767px) {
  .tp-slider-area .tp-slider-title-3,
  .tp-slider-content-3 .tp-slider-title-3,
  .col-xl-6.col-lg-6.col-md-8 .tp-slider-title-3,
  h3.tp-slider-title-3,
  .tp-slider-title-3,
  .tp-slider-title-3 span,
  [class*="tp-slider-title"] {
    font-size: 22px !important;
    font-weight: 400 !important;          
    line-height: 1.25 !important;
  }
}

/* 3. MAIN HEADINGS & TITLES: Cormorant Garamond */
h1, h2, h3, h4,
.tp-section-title-2,
.tp-section-title-3,
.tp-section-title,
.tp-product-category.pt-60.pb-15 .container::before,
.tp-product-category .container:first-of-type::before {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

.tp-product-category.pt-60.pb-15 .container::before {
  font-size: clamp(24px, 3.5vw, 32px) !important;
  margin-bottom: 8px !important;
}

/* 4. SLIDER SUBTITLE ACCENTS & SMALL LABELS */
.tp-slider-content-3 > span,
.tp-slider-sub-title-3,
.tp-section-title-pre-2,
.tp-section-title-pre {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

/* 5. BUTTONS & BANNER LABELS: Natural Casing (Zero Forced Uppercase) */
.tp-btn,
.tp-btn-2,
.tp-btn-border,
.tp-slider-btn-3 .tp-btn,
button,
.btn,
.tp-feature-title-2,
.tp-banner-title-4 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: none !important;
}

/* ==========================================================================
   TP-BANNER-AREA: FONT ONLY FOR  AND COLOR ONLY FOR 
   ========================================================================== */

/* 1. Only change the  elements to match 'tp-banner-full-title' */
.tp-banner-area a,
.tp-banner-area .tp-banner-title-4 a,
.tp-banner-area .tp-banner-full-title a,
.tp-banner-area .tp-banner-btn-4 a,
.tp-banner-area .tp-btn {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  text-transform: none !important;
}

/* 2. Change the  elements color */
.tp-banner-area .tp-banner-content-4 span,
.tp-banner-area .tp-banner-full-content span,
.tp-banner-area span {
  color: #c59b27 !important;
}

/* ==========================================================================
   TP-FEATURE-AREA: MAKE  TITLES BIGGER THAN  ELEMENTS
   ========================================================================== */
.tp-feature-area .tp-feature-inner-2 h3,
.tp-feature-area .tp-feature-inner-2 .tp-feature-title-2,
.tp-feature-area .tp-feature-item-2 h3 {
  font-size: 15px !important;              
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
  display: block !important;
  text-transform: uppercase !important;
}

/* Ensure  inside or beside  remains balanced & smaller */
.tp-feature-area .tp-feature-inner-2 a,
.tp-feature-area .tp-feature-inner-2 p,
.tp-feature-area .tp-feature-content-2 p,
.tp-feature-area .tp-feature-item-2 a {
  font-size: 13.5px !important;            
  line-height: 1.4 !important;
}

/* Mobile responsive scaling */
@media (max-width: 767px) {
  .tp-feature-area .tp-feature-inner-2 h3,
  .tp-feature-area .tp-feature-inner-2 .tp-feature-title-2,
  .tp-feature-area .tp-feature-item-2 h3 {
    font-size: 16px !important;           
  }

  .tp-feature-area .tp-feature-inner-2 a,
  .tp-feature-area .tp-feature-inner-2 p,
  .tp-feature-area .tp-feature-content-2 p,
  .tp-feature-area .tp-feature-item-2 a {
    font-size: 12px !important;
  }
}

/* ==========================================================================
   PERFECT NAVBAR TYPOGRAPHY (NATURAL CASING • ZERO UPPERCASE)
   ========================================================================== */

/* 1. Main Top Navbar Links (Home, Necklaces, Earrings, etc.) */
.tp-header-bottom-3 .main-menu > nav > ul > li > a,
.tp-header-bottom-3 .tp-main-menu-content > nav > ul > li > a,
.tp-header-bottom-3 .main-menu ul li a,
.tp-header-bottom-3 .tp-main-menu-content ul li a,
.header-sticky .main-menu ul li a,
.header-sticky .tp-main-menu-content ul li a {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13.5px !important;          
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;       
  line-height: 1.2 !important;
}

/* 2. Mega Menu Main Column Headings (Inside Dropdown) */
.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown > .tp-submenu > li > a,
.tp-header-bottom-3 .main-menu ul li.has-dropdown > .tp-submenu > li > a {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;        
}

/* 3. Mega Menu Sub-items / Sub-links (Inside Dropdown Columns) */
.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown > .tp-submenu > li > .tp-submenu li a,
.tp-header-bottom-3 .main-menu ul li.has-dropdown > .tp-submenu > li > .tp-submenu li a {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;       
}

/* 4. Laptop 1024px Viewport adjustment (Keeps all 6 menu items on one row) */
@media (min-width: 992px) and (max-width: 1199px) {
  .tp-header-bottom-3 .main-menu > nav > ul > li > a,
  .tp-header-bottom-3 .tp-main-menu-content > nav > ul > li > a,
  .tp-header-bottom-3 .main-menu ul li a {
    font-size: 12px !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
  }
}

/* 5. Mobile & Tablet Offcanvas Drawer Links */
.offcanvas__area .mean-container .mean-nav ul li a,
.offcanvas__area .tp-main-menu-mobile ul li a,
.tp-offcanvas-menu ul li a {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;        
}

/* ==========================================================================
   FIX: PERFECT DROPDOWN ARROW ALIGNMENT (DEAD-CENTER WITH MENU TEXT)
   ========================================================================== */

/* 1. Ensure the parent  behaves as an inline flex container */
.tp-header-bottom-3 .main-menu > nav > ul > li > a,
.tp-header-bottom-3 .tp-main-menu-content > nav > ul > li > a,
.tp-header-bottom-3 .main-menu ul li a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  gap: 5px !important;                    
}

/* 2. Dropdown SVG / Icon: Equal vertical alignment & proportional sizing */
.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown > a svg,
.tp-header-bottom-3 .main-menu ul li.has-dropdown > a svg,
.tp-header-bottom-3 .main-menu ul li > a svg,
.tp-header-bottom-3 .tp-main-menu-content ul li > a svg,
.tp-header-bottom-3 .main-menu > nav > ul > li > a i,
.tp-header-bottom-3 .main-menu ul li > a i {
  display: inline-block !important;
  width: 9px !important;
  height: 9px !important;
  min-width: 9px !important;
  min-height: 9px !important;
  margin: 0 !important;
  margin-left: 1px !important;
  padding: 0 !important;
  transform: translateY(1px) !important;  
  vertical-align: middle !important;
  transition: transform 0.25s ease !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* 3. Smooth subtle rotation when hovering the dropdown item */
.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown:hover > a svg,
.tp-header-bottom-3 .main-menu ul li.has-dropdown:hover > a svg {
  transform: translateY(1px) rotate(180deg) !important;
}

/* 4. Kill any stray pseudo-element arrows generated by theme */
.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown > a::before,
.tp-header-bottom-3 .main-menu > nav > ul > li.has-dropdown > a::after {
  display: none !important;
  content: none !important;
}

/* 5. Submenu internal headings: Remove unwanted arrow artifacts */
.tp-header-bottom-3 .tp-submenu li > a svg,
.tp-header-bottom-3 .tp-submenu li > a::after {
  display: none !important;
}

/* ==========================================================================
   SHIFT CATEGORY PRODUCT ROW DOWNWARD (FIX MOBILE OVERLAY)
   ========================================================================== */

/* 1. Base / Desktop & Tablet: Give clear breathing space below heading */
.tp-product-category .row.row-cols-xl-5.row-cols-lg-5.row-cols-md-4,
.tp-product-category .row.row-cols-xl-5,
.tp-product-category.pt-60.pb-15 .row {
  margin-top: 25px !important;           
  position: relative !important;
  z-index: 1 !important;
  width: 100% !important;
}


@media (max-width: 767px) {
  .tp-product-category .row.row-cols-xl-5.row-cols-lg-5.row-cols-md-4,
  .tp-product-category .row.row-cols-xl-5,
  .tp-product-category.pt-60.pb-15 .row {
    margin-top: 35px !important;         
    padding-top: 5px !important;
  }
}

/* ==========================================================================
   TP-FEATURE-AREA: ONE-BY-ONE (STACKED) CARDS ON MOBILE RESPONSIVE
   ========================================================================== */
@media (max-width: 767px) {
  /* 1. Container wraps items vertically in a single column */
  .tp-feature-area .tp-feature-inner-2 {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;                 
    padding: 0 10px !important;
    width: 100% !important;
  }

  /* 2. Each feature item occupies full width (one per row) */
  .tp-feature-area .tp-feature-item-2,
  .tp-feature-area .tp-feature-inner-2 .tp-feature-item-2,
  .tp-feature-area [class*="tp-feature-item"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    display: flex !important;
    align-items: center !important;
    padding: 14px 18px !important;       
    background: #fbfbfb !important;
    border: 1px solid #eeeeee !important;
    border-radius: 10px !important;
    box-sizing: border-box !important;
  }

  /* 3. Icon on the left */
  .tp-feature-area .tp-feature-item-2 .tp-feature-icon-2 {
    margin-right: 15px !important;
    flex-shrink: 0 !important;
  }

  /* 4. Text content filling the rest of the row */
  .tp-feature-area .tp-feature-item-2 .tp-feature-content-2 {
    flex: 1 1 auto !important;
    text-align: left !important;
  }

  /* 5. Title & description sizing for clean readability */
  .tp-feature-area .tp-feature-title-2,
  .tp-feature-area .tp-feature-item-2 h3 {
    font-size: 15px !important;
    font-weight: 600 !important;
    margin-bottom: 3px !important;
    line-height: 1.3 !important;
  }

  .tp-feature-area .tp-feature-content-2 p {
    font-size: 12.5px !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
  }

  /* 6. Remove any theme vertical divider borders/pseudo-elements */
  .tp-feature-area .tp-feature-item-2::after,
  .tp-feature-area .tp-feature-item-2::before {
    display: none !important;
    content: none !important;
  }
}

/* ==========================================================================
   TP-PRODUCT-CATEGORY: LUXURY BRAND LOGO WARM GOLD BACKGROUND THEME
   ========================================================================== */

/* 1. Section background matching the warm luxury logo palette */
.tp-product-category.pt-60.pb-15,
.tp-product-category {
  background: linear-gradient(180deg, #faf7f2 0%, #f5efe6 100%) !important;
  background-color: #faf7f2 !important;
  position: relative !important;
  overflow: hidden !important;
  border-top: 1px solid rgba(197, 155, 39, 0.12) !important;
  border-bottom: 1px solid rgba(197, 155, 39, 0.12) !important;
}

/* 2. Top Categories Heading (Deep Warm Charcoal for luxury contrast) */
.tp-product-category.pt-60.pb-15 .container::before,
.tp-product-category .container:first-of-type::before {
  color: #1a1612 !important;
}

/* 3. Subtitle (Warm golden amber tone from the logo) */
.tp-product-category.pt-60.pb-15 .container::after,
.tp-product-category .container:first-of-type::after {
  color: #8c734b !important;
}

/* Category Title text inside card */
.tp-product-category .tp-product-category-title,
.tp-product-category .tp-category-content-4 h4 {
  color: #1a1612 !important;
}

/* ==========================================================================
   FOOTER ONLY: WARM GOLD LUXURY GRADIENT BACKGROUND
   ========================================================================== */
footer,
.tp-footer-area,
.tp-footer-style-2,
.tp-footer-area.tp-footer-style-2,
.tp-footer-bottom {
  background: linear-gradient(180deg, #faf7f2 0%, #f5efe6 100%) !important;
  background-color: #faf7f2 !important;
  border-top: 1px solid rgba(197, 155, 39, 0.15) !important;
  position: relative !important;
}

/* Ensure copyright and bottom bar seamlessly match */
.tp-footer-bottom,
.tp-footer-bottom-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

/* ==========================================================================
   TP-BEST-AREA (BEST SELLERS SWIPER): LUXURY PRODUCT CARD STYLING
   ========================================================================== */

/* 1. Carousel Track Clearance (Allows Card Shadows to Show Without Clipping) */
.tp-best-area .tp-best-slider-active,
.tp-best-area .swiper-container {
  overflow: visible !important;
  padding: 12px 6px 24px 6px !important;
}

.tp-best-area .swiper-wrapper {
  align-items: stretch !important;       
}

/* 2. Product Card Container: Clean Modern Jewelry Elevation */
.tp-best-area .swiper-slide .tp-product-item-2,
.tp-best-area .swiper-slide .tp-product-item-3,
.tp-best-area .swiper-slide [class*="tp-product-item"] {
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
  padding: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  height: 100% !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Smooth Luxury Hover State */
.tp-best-area .swiper-slide .tp-product-item-2:hover,
.tp-best-area .swiper-slide .tp-product-item-3:hover,
.tp-best-area .swiper-slide [class*="tp-product-item"]:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(197, 155, 39, 0.35) !important; 
  box-shadow: 0 14px 34px rgba(180, 140, 60, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* 3. Product Thumbnail Image: Soft Backdrop & Smooth Zoom */
.tp-best-area .tp-product-thumb-2,
.tp-best-area .tp-product-thumb-3,
.tp-best-area [class*="tp-product-thumb"] {
  position: relative !important;
  background-color: #faf9f6 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  margin-bottom: 14px !important;
  aspect-ratio: 1 / 1 !important;         
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.tp-best-area [class*="tp-product-thumb"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  transition: transform 0.45s ease !important;
}

.tp-best-area [class*="tp-product-item"]:hover [class*="tp-product-thumb"] img {
  transform: scale(1.05) !important;      
}

/* 4. Action Icons Floating on Image (Wishlist, Quickview) */
.tp-best-area .tp-product-action-2,
.tp-best-area [class*="tp-product-action"] {
  gap: 8px !important;
  z-index: 5 !important;
}

.tp-best-area [class*="tp-product-action"] .tp-product-action-btn-2,
.tp-best-area [class*="tp-product-action"] button,
.tp-best-area [class*="tp-product-action"] a {
  background: #ffffff !important;
  color: #111827 !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s ease !important;
}

.tp-best-area [class*="tp-product-action"] button:hover,
.tp-best-area [class*="tp-product-action"] a:hover {
  background: #111827 !important;
  color: #ffffff !important;
}

/* 5. Product Details Content */
.tp-best-area [class*="tp-product-content"] {
  text-align: center !important;
  padding: 0 4px 6px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

/* Product Title */
.tp-best-area [class*="tp-product-title"] a,
.tp-best-area .tp-product-title-2 a {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  line-height: 1.35 !important;
  margin-bottom: 6px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.2s ease !important;
}

.tp-best-area [class*="tp-product-title"] a:hover {
  color: #c59b27 !important;             
}

/* Product Price */
.tp-best-area [class*="tp-product-price"],
.tp-best-area .tp-product-price-2 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  letter-spacing: 0.02em !important;
}

/* Old/Crossed Price */
.tp-best-area [class*="tp-product-price"] .old-price,
.tp-best-area .tp-product-price-2.old-price {
  font-size: 13px !important;
  color: #94a3b8 !important;
  margin-left: 6px !important;
  text-decoration: line-through !important;
}

/* Add to Cart Button on Card (if shown) */
.tp-best-area .tp-product-add-cart-btn-large,
.tp-best-area .tp-btn {
  border-radius: 8px !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
}

/*============================================================*/
@media (max-width: 991px) {
  .tp-bottom-menu-sticky,
  .tp-mobile-item,
  .tp-bottom-menu-area,
  [class*="tp-bottom-menu"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
    position: absolute !important;
    z-index: -9999 !important;
    bottom: -9999px !important;
  }

  /* Remove any bottom padding added to body or main to clear the sticky menu */
  body,
  main,
  #root,
  #app {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* ==========================================================================
   TP-BANNER-AREA: MOVE CONTENT TO INSIDE BOTTOM OF ALL 3 BANNERS
   ========================================================================== */

/* 1. Ensure banner cards establish a clean relative container */
.tp-banner-area .tp-banner-item-4,
.tp-banner-area .col-xl-12 .tp-banner-item-4,
.tp-banner-area .col-md-6 .tp-banner-item-4,
.tp-banner-area .tp-banner-full {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;   
  overflow: hidden !important;
}

/* 2. Position tp-banner-content-4 at the INSIDE BOTTOM (Increased Clearance) */
.tp-banner-area .tp-banner-content-4,
.tp-banner-area .col-xl-12 .tp-banner-content-4,
.tp-banner-area .col-md-6.col-sm-6 .tp-banner-content-4,
.tp-banner-area .tp-banner-full-content {
  position: absolute !important;
  top: auto !important;                   
  bottom: 15px !important;               
  left: 32px !important;
  right: auto !important;
  transform: none !important;            
  margin: 0 !important;
  z-index: 5 !important;
  max-width: 85% !important;
}

/* Soft contrast gradient so text is always crisp over the bottom of the photo */
.tp-banner-area .tp-banner-thumb-4::after,
.tp-banner-area .tp-banner-full-thumb::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 60% !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.28) 0%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}


@media (max-width: 767px) {
  .tp-banner-area .tp-banner-content-4,
  .tp-banner-area .col-xl-12 .tp-banner-content-4,
  .tp-banner-area .col-md-6.col-sm-6 .tp-banner-content-4,
  .tp-banner-area .tp-banner-full-content {
    bottom: 18px !important;              
    left: 20px !important;
    max-width: 90% !important;
  }
}


/* ==========================================================================
   REDUCE THE ABOUT SECTION IN HOMPAGE
   ========================================================================== */

@media (min-width: 1025px) {
  .tp-about-wrapper .tp-section-title-wrapper-4 {
	 padding: 0 0 0 100px !important;
  }
}

@media (min-width: 769px) {
  .tp-about-wrapper .tp-section-title-wrapper-4 {
	 padding: 0 0 0 115px !important;
  }
}
 .tp-about-wrapper .tp-section-title-pre-4::after{
   content: " ♥" !important;
   font-size: 25px !important;
   font-family: Georgia, serif !important;
}
 .tp-about-wrapper {
   position: relative !important;
   bottom: 40px !important;
}


.loading-spinner,
.tp-product-tab-content .loading,
.tp-product-tab-content .loading-overlay,
.tp-product-tab-content::before,
.tp-product-tab-content::after {
    display: none !important;
    background: transparent !important;
}

/* Disable the loading effect completely */
.tp-product-tab-content.is-loading {
    position: relative;
    min-height: auto !important;
    pointer-events: auto !important;
}

.tp-product-tab-content.is-loading > * {
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
}

/* Hide the custom loading spinner */
.tp-product-tab-content.is-loading::after {
    display: none !important;
}

@keyframes tpSpin {
    to {
        transform: rotate(360deg);
    }
}