/* ============================================================
   Shared section UI — tabs + media cards
   Glass cards tuned to warm amber wallpaper
   ============================================================ */

:root {
  --nn-ui-crimson: #960605;
  --nn-ui-gold: #f9af1f;
  --nn-ui-ink: #1a120c;
  --nn-ui-mute: #5c4a3a;
  --nn-ui-line: rgba(249, 175, 31, 0.38);
  --nn-ui-card: rgba(255, 248, 236, 0.78);
  --nn-ui-card-strong: rgba(255, 250, 242, 0.9);
  --nn-ui-saffron-soft: rgba(249, 175, 31, 0.28);
  --nn-ui-shadow: 0 18px 42px rgba(90, 40, 10, 0.16);
  --nn-ui-blur: blur(18px);
  --nn-font: "Mukta", sans-serif;
  --nn-gutter: 50px;
}

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

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
iframe,
video {
  max-width: 100%;
}

/* ---------- Section gutters (laptop / tablet / mobile) ---------- */

.container-fluid {
  padding-left: var(--nn-gutter);
  padding-right: var(--nn-gutter);
}

@media (max-width: 1399.98px) {
  :root {
    --nn-gutter: 72px;
  }
  
.nn-bhajan-brand-mark,
.nn-prav-brand-mark,
.nn-kolek-brand-mark,
.nn-lifestyle-brand-mark {
  width: 35px !important;
  height: 35px !important;
}
.container-fluid{
  padding-left: 20px!important;
  padding-right: 20px !important;
}

}

@media (max-width: 1199.98px) {
  :root {
    --nn-gutter: 40px;
  }
}
@media (max-width: 991.98px) {
  :root {
    --nn-gutter: 24px;
  }
  .container-fluid {
    padding-left: var(--nn-gutter);
    padding-right: var(--nn-gutter);
  }
  .nn-site-header.new .nn-header-navwrap{
    width: auto;
  }
}

@media (max-width: 575.98px) {
  :root {
    --nn-gutter: 16px;
  }
  .container-fluid {
    padding-left: var(--nn-gutter);
    padding-right: var(--nn-gutter);
  }
}

@media (max-width: 991.98px) {
  body {
    background-attachment: scroll;
  }
}

.nn-bhajan-filters,
.nn-prav-filters,
.nn-kolek-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 5px;
  background: rgba(255, 248, 236, 0.7);
  border: 1px solid var(--nn-ui-line);
  border-radius: 999px;
  backdrop-filter: var(--nn-ui-blur);
  -webkit-backdrop-filter: var(--nn-ui-blur);
  box-shadow: 0 8px 24px rgba(90, 40, 10, 0.1);
}

.nn-bhajan-filter,
.nn-prav-filter,
.nn-kolek-filter {
  appearance: none;
  min-width: 100px;
  border: 0;
  margin: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: transparent;
  color: var(--nn-ui-mute);
  font-family: "Mukta", sans-serif;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.2s ease;
  white-space: nowrap;
}

.nn-bhajan-filter.is-active,
.nn-prav-filter.is-active,
.nn-kolek-filter.is-active {
  background: var(--nn-ui-crimson);
  color: #fff;
}

.nn-bhajan-filter:hover:not(.is-active),
.nn-prav-filter:hover:not(.is-active),
.nn-kolek-filter:hover:not(.is-active) {
  background: var(--nn-ui-saffron-soft);
  color: var(--nn-ui-crimson);
}

.nn-bhajan-filter:focus-visible,
.nn-prav-filter:focus-visible,
.nn-kolek-filter:focus-visible {
  outline: 2px solid var(--nn-ui-crimson);
  outline-offset: 2px;
}

/* ---------- Media cards ---------- */

.nn-bhajan-card,
.nn-prav-card,
.nn-kolek-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  aspect-ratio: 16 / 10;
  background: #1a120c;
  box-shadow: 0 12px 32px rgba(90, 40, 10, 0.2);
  border: 1px solid rgba(249, 175, 31, 0.28);
}

.nn-bhajan-card {
  aspect-ratio: 4 / 5;
}

.nn-bhajan-card img,
.nn-prav-card img,
.nn-kolek-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.nn-bhajan-card:hover img,
.nn-prav-card:hover img,
.nn-kolek-card:hover img {
  transform: scale(1.04);
}

.nn-bhajan-card::after,
.nn-prav-card::after,
.nn-kolek-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(20, 14, 10, 0.82) 100%);
  pointer-events: none;
}

.nn-bhajan-card-play,
.nn-prav-card-play,
.nn-kolek-card-play {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 248, 236, 0.95);
  color: var(--nn-ui-crimson);
  font-size: 11px;
}

.nn-bhajan-card-play i,
.nn-prav-card-play i,
.nn-kolek-card-play i {
  margin-left: 1px;
}

.nn-bhajan-card-meta,
.nn-prav-card-meta,
.nn-kolek-card-meta {
  position: absolute;
  left: 15px;
  right: 10px;
  bottom: 15px;
  z-index: 2;
}

.nn-bhajan-card-meta span,
.nn-prav-card-meta span,
.nn-kolek-card-meta span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 5px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
}

.nn-bhajan-card-meta strong,
.nn-prav-card-meta strong,
.nn-kolek-card-meta strong {
  display: block;
  font-family: "Mukta", sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}

.nn-inline-player-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 4;
  background: #000;
}

.nn-bhajan-card.is-playing::after,
.nn-prav-card.is-playing::after,
.nn-kolek-card.is-playing::after {
  opacity: 0;
}

.nn-bhajan-card.is-playing .nn-bhajan-card-play,
.nn-bhajan-card.is-playing .nn-bhajan-card-meta,
.nn-prav-card.is-playing .nn-prav-card-play,
.nn-prav-card.is-playing .nn-prav-card-meta,
.nn-kolek-card.is-playing .nn-kolek-card-play,
.nn-kolek-card.is-playing .nn-kolek-card-meta,
.nn-kolek-product-media.is-playing .nn-kolek-card-play,
.nn-kolek-media.is-playing .nn-kolek-card-play {
  opacity: 0;
  pointer-events: none;
}

.nn-bhajan-card.is-playing:hover img,
.nn-prav-card.is-playing:hover img,
.nn-kolek-card.is-playing:hover img,
.nn-kolek-product:has(.nn-kolek-product-media.is-playing):hover .nn-kolek-product-media img {
  transform: none;
}

/* ---------- Section brand (+ circle) ---------- */

.nn-bhajan-brand,
.nn-prav-brand,
.nn-kolek-brand,
.nn-lifestyle-brand {
  display: inline-flex;
  align-items: start;
  justify-content: start;
  gap: 12px;
  color: var(--nn-ui-crimson);
  text-decoration: none;
  padding: 10px 14px 10px 10px;
  min-width: 0;
}

.nn-bhajan-brand-mark,
.nn-prav-brand-mark,
.nn-kolek-brand-mark,
.nn-lifestyle-brand-mark {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nn-ui-crimson);
  color: #fff;
  font-size: 19px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(249, 175, 31, 0.35);
}
.is-fixed .nn-bhajan-brand-mark,
.is-fixed .nn-prav-brand-mark,
.is-fixed .nn-kolek-brand-mark,
.is-fixed .nn-lifestyle-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--nn-ui-crimson);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(249, 175, 31, 0.35);
}

.nn-bhajan-brand strong,
.nn-prav-brand strong,
.nn-kolek-brand strong,
.nn-lifestyle-brand h2 {
  display: block;
  font-family: "Mukta", sans-serif;
  font-size: clamp(25px, 2.4vw, 45px);
  font-weight: 700;
  line-height: 1.1;
  color: #000;
}

.is-fixed .nn-bhajan-brand strong,
.is-fixed .nn-prav-brand strong,
.is-fixed .nn-kolek-brand strong,
.is-fixed .nn-lifestyle-brand h2 {
   font-size: clamp(25px, 2.4vw, 25px);
}


.nn-bhajan-brand em,
.nn-prav-brand em,
.nn-kolek-brand em,
.nn-lifestyle-brand em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  color: #000;
  font-size: 14px;
  font-weight: 500;
}

@media (max-width: 991.98px) {
  .nn-bhajan-toolbar,
  .nn-prav-toolbar,
  .nn-kolek-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .nn-bhajan-brand,
.nn-prav-brand,
.nn-kolek-brand,
.nn-lifestyle-brand {
  justify-content: flex-start;
}
.nn-site-header{
  height: auto ;
  padding: 20px;
}

  .nn-bhajan-filters,
  .nn-prav-filters,
  .nn-kolek-filters {
    width: 100%;
    overflow-x: scroll;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
    scrollbar-color: var(--nn-ui-gold) rgba(249, 175, 31, 0.16);
    border-bottom-color: rgba(249, 175, 31, 0.6);
  }

  .nn-bhajan-filters::-webkit-scrollbar,
  .nn-prav-filters::-webkit-scrollbar,
  .nn-kolek-filters::-webkit-scrollbar {
    height: 8px;
  }

  .nn-bhajan-filters::-webkit-scrollbar-track,
  .nn-prav-filters::-webkit-scrollbar-track,
  .nn-kolek-filters::-webkit-scrollbar-track {
    background: rgba(249, 175, 31, 0.16);
    border-radius: 999px;
  }

  .nn-bhajan-filters::-webkit-scrollbar-thumb,
  .nn-prav-filters::-webkit-scrollbar-thumb,
  .nn-kolek-filters::-webkit-scrollbar-thumb {
    background: var(--nn-ui-gold);
    border: 1px solid rgba(255, 248, 236, 0.7);
    border-radius: 999px;
  }

  .nn-bhajan-filter,
  .nn-prav-filter,
  .nn-kolek-filter {
    flex: 0 0 auto;
  }
  .nn-footer-social.header a {
    width: 25px;
    height: 25px;
    font-size: 15px;
}
}

@media (max-width: 575.98px) {
  .nn-bhajan-brand strong,
  .nn-prav-brand strong,
  .nn-kolek-brand strong,
  .nn-lifestyle-brand h2 {
    font-size: clamp(22px, 7vw, 28px);
  }

  .nn-bhajan-filter,
  .nn-prav-filter,
  .nn-kolek-filter {
    font-size: 15px;
    padding: 8px 12px;
  }
}


/* --- SECTION CONTAINER --- */
        .ptd-portal-section {
            padding:70px 0 70px;
            width: 100%;
        }

        /* --- TABBED NAVIGATION HEADER --- */
        .ptd-header-bar {
            /* background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 16px 24px; */
            margin-bottom: 30px;
            /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03); */
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 16px;
        }

        .ptd-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
        }

        .ptd-brand-icon {
            width: 42px;
            height: 42px;
            background-color: #800000;
            color: #ffffff;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }

        .ptd-brand-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: #800000;
            line-height: 1.1;
            margin: 0;
        }

        .ptd-brand-sub {
            font-size: 0.78rem;
            color: #64748b;
            margin: 0;
            font-weight: 500;
        }

        /* Tabs Design */
        .ptd-tabs-nav {
            display: flex;
            gap: 4px;
            border-bottom: 2px solid #f1f5f9;
        }

        .ptd-tab-item {
            border: none;
            background: transparent;
            color: #64748b;
            font-weight: 700;
            font-size: 0.88rem;
            padding: 8px 18px;
            position: relative;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .ptd-tab-item:hover,
        .ptd-tab-item.active {
            color: #800000;
        }

        .ptd-tab-item.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background-color: #800000;
            border-radius: 3px 3px 0 0;
        }

        /* --- VERTICAL MEDIA CARDS --- */
        .ptd-short-card {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 15px -3px rgba(0, 0, 0, 0.04);
            display: flex;
            flex-direction: column;
            height: 100%;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .ptd-short-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
        }

        .ptd-short-media {
            position: relative;
            width: 100%;
            aspect-ratio: 3 / 4;
            background-color: #0f172a;
            overflow: hidden;
        }

        .ptd-short-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .ptd-badge-icon {
            position: absolute;
            top: 12px;
            right: 12px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.3);
            backdrop-filter: blur(4px);
        }

        .ptd-badge-icon.ig { background: linear-gradient(45deg, #f09433, #dc2743, #bc1888); }
        .ptd-badge-icon.tt { background: #000000; }
        .ptd-badge-icon.yt { background: #ff0000; }

        .ptd-short-info {
            padding: 14px;
            background-color: #ffffff;
            border-top: 1px solid #f1f5f9;
            margin-top: auto;
        }

        .ptd-short-tag {
            font-size: 0.68rem;
            font-weight: 800;
            color: #d97706;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            display: block;
            margin-bottom: 2px;
        }

        .ptd-short-title {
            font-size: 1.2rem;
            font-weight: 700;
            color: #0f172a;
            margin: 0;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        /* --- VERTICALLY STACKED ADS COLUMN --- */
        .ptd-ads-stack {
            display: flex;
            flex-direction: column;
            gap: 12px;
            height: 100%;
            justify-content: space-between;
        }

        .ptd-ad-banner-item {
            flex: 1;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
            border: 1px solid #e2e8f0;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            display: block;
            text-decoration: none;
            position: relative;
        }

        .ptd-ad-banner-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.1);
        }

        .ptd-ad-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            min-height: 110px;
        }

        /* --- BOTTOM BANNER --- */
        .ptd-bottom-banner img{
            /* background-color: #fbcfe8; */
            /* border-radius: 16px; */
            /* padding: 12px 24px; */
            margin-top: 70px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: auto;
            margin-right: auto;
            /* border: 1px solid #f472b6; */
        }

        .ptd-banner-brand {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: 800;
            color: #800000;
            font-size: 1.15rem;
        }

        .ptd-banner-info {
            background-color: #0056b3;
            color: #ffffff;
            font-weight: 700;
            font-size: 0.85rem;
            padding: 6px 16px;
            border-radius: 8px;
            text-align: center;
        }

        .ptd-banner-call {
            background-color: #dc2626;
            color: #ffffff;
            font-weight: 800;
            font-size: 0.82rem;
            padding: 7px 18px;
            border-radius: 8px;
            text-decoration: none;
            letter-spacing: 0.5px;
            transition: opacity 0.2s;
        }

        .ptd-banner-call:hover {
            opacity: 0.9;
            color: #ffffff;
        }

        @media (max-width: 991.98px) {
            .ptd-header-bar {
                flex-direction: column;
                align-items: flex-start;
            }
            .ptd-tabs-nav {
                width: 100%;
                overflow-x: auto;
            }
            .ptd-bottom-banner {
                flex-direction: column;
                gap: 12px;
                text-align: center;
            }
        }


.nn-kolek-product-v2 {
  background: #fff8ef;
  border:1px solid #f1e9de;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.nn-bhajan-main-title strong, .nn-bhajan-main-title em{
  color: #fff;
}

.nn-kolek-product-v2:hover {
  /* transform: translateY(-5px); */
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
}

.nn-kolek-media {
  position: relative;
  width: calc(100% + 2px);
  margin-left: -1px;
  margin-right: -1px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
}

.nn-kolek-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.08);
}

.nn-kolek-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #d32f2f;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 12px;
}

.nn-kolek-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  color: #ffffff;
}

.nn-kolek-stock-pill {
  align-self: flex-start;
  font-size: 14px;
  background:rgb(249 175 31);
  color: #750403;
  padding: 4px 8px 0;
  border-radius: 4px;
  margin-bottom: 12px;
}

.nn-kolek-stock-pill.muted {
      background: rgb(140 20 21 / 72%);
    color: #ffffff;
}

.nn-kolek-content h3 {
  font-size: 20px;
  margin: 0 0 6px 0;
  color: #000000;
}

.nn-kolek-content p {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.85);
  margin-bottom: 16px;
  flex-grow: 1;
  line-height: 1.4;
}


.nn-kolek-split-buy-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #8c1414;
  color: #ffffff;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: bold;
  transition: background 0.2s ease, color 0.2s ease;
}

.nn-kolek-split-buy-btn:hover {
  background: #f0f0f0;
  color: #610d0d;
}

.nn-kolek-split-buy-btn .btn-price {
  font-size: 15px;
}

.nn-kolek-split-buy-btn .btn-price.sm {
  font-size: 13px;
}

.nn-kolek-split-buy-btn .btn-text {
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.m-lifestyle-section {
            padding: 70px 0 70px;
        }

        /* --- MODERN HEADER --- */
        .m-header-box {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 36px;
            flex-wrap: wrap;
            gap: 16px;
            /* background: #ffffff;
            padding: 20px 28px;
            border-radius: 20px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.03); */
        }

        .m-header-left {
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .m-header-icon-box {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #800000, #600000);
            color: #ffffff;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.35rem;
            box-shadow: 0 4px 12px rgba(128, 0, 0, 0.25);
        }

        .m-header-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: #800000;
            margin: 0;
            line-height: 1.15;
        }

        .m-header-sub {
            font-size: 0.82rem;
            color: #64748b;
            margin: 0;
            font-weight: 600;
        }

        .m-explore-tag {
            background-color: rgba(128, 0, 0, 0.06);
            color: #800000;
            font-size: 0.82rem;
            font-weight: 700;
            padding: 6px 16px;
            border-radius: 50px;
            border: 1px solid rgba(128, 0, 0, 0.12);
        }

        /* --- MODERN CARD LAYOUT --- */
        .m-card-item {
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 24px;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            isolation: isolate;
            transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
                        box-shadow 0.55s ease,
                        border-color 0.55s ease;
            overflow: hidden;
            z-index: 0;
        }

        /* Circular expand from top-left → fills full card maroon (in + out) */
        .m-card-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
            width: 250%;
            height: 335%;
            border-radius: 50%;
            background: #960605;
            transform: translate(-50%, -50%) scale(0);
            transform-origin: center;
            transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
            pointer-events: none;
            will-change: transform;
        }

        .m-card-item:hover {
            /* transform: translateY(-6px); */
            box-shadow: 0 16px 32px -8px rgba(150, 6, 5, 0.28);
            border-color: #960605;
        }

        .m-card-item:hover::before {
            transform: translate(-50%, -50%) scale(1);
        }
      
        .m-card-top,
        .m-card-body-content,
        .m-author-chip {
            position: relative;
            z-index: 1;
        }

        .m-card-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .m-icon-badge {
            width: 52px;
            height: 52px;
            border-radius: 14px;
            background-color: rgba(128, 0, 0, 0.06);
            color: #800000;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
            transition: background-color 0.55s ease, color 0.55s ease, box-shadow 0.55s ease;
        }

        .m-card-item:hover .m-icon-badge {
            background-color: rgba(255, 255, 255, 0.18);
            color: #ffffff;
            box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
        }

        .m-arrow-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background-color: #f1f5f9;
            color: #64748b;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.8rem;
            transition: background-color 0.55s ease, color 0.55s ease, transform 0.55s ease;
        }

        .m-card-item:hover .m-arrow-btn {
            background-color: #f9af1f;
            color: #960605;
            transform: rotate(-45deg);
        }

        .m-card-body-content {
            margin-bottom: 20px;
        }

        .m-card-title {
            font-size: 1.2rem;
            font-weight: 800;
            color: #0f172a;
            margin-bottom: 8px;
            line-height: 1.3;
            transition: color 0.55s ease;
        }

        .m-card-desc {
            font-size: 0.84rem;
            color: #64748b;
            line-height: 1.5;
            margin: 0;
            transition: color 0.55s ease;
        }

        .m-card-item:hover .m-card-title {
            color: #ffffff;
        }

        .m-card-item:hover .m-card-desc {
            color: rgba(255, 255, 255, 0.88);
        }

        /* Author Chip at Bottom */
        .m-author-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background-color: #f8fafc;
            border: 1px solid #e2e8f0;
            padding: 4px 6px;
            border-radius: 50px;
            font-size: 0.78rem;
            font-weight: 700;
            color: #334155;
            width: fit-content;
            transition: background-color 0.55s ease, border-color 0.55s ease, color 0.55s ease;
        }

        .m-card-item:hover .m-author-chip {
            background-color: rgba(255, 255, 255, 0.16);
            border-color: rgba(255, 255, 255, 0.28);
            color: #ffffff;
        }

        .m-author-avatar {
            width: 20px;
            height: 20px;
            background-color: #cbd5e1;
            color: #475569;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.65rem;
            transition: background-color 0.55s ease, color 0.55s ease;
        }

        .m-card-item:hover .m-author-avatar {
            background-color: rgba(249, 175, 31, 0.9);
            color: #960605;
        }

        .m-author-none {
            visibility: hidden;
        }

        @media (prefers-reduced-motion: reduce) {
            .m-card-item::before {
                transition: none;
                transform: translate(-50%, -50%) scale(0);
                opacity: 0;
            }

            .m-card-item:hover::before {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1);
            }
        }

        /* --- BOTTOM BANNER --- */
        .m-promo-banner {
            background: linear-gradient(135deg, #0d1b2a, #1b263b);
            color: #ffffff;
            border-radius: 20px;
            padding: 16px 32px;
            margin-top: 40px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow: 0 10px 25px -5px rgba(13, 27, 42, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .m-banner-brand {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 800;
            color: #f472b6;
            font-size: 1.2rem;
        }

        .m-banner-info {
            background-color: rgba(255, 255, 255, 0.1);
            color: #ffffff;
            font-weight: 700;
            font-size: 0.88rem;
            padding: 8px 20px;
            border-radius: 50px;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .m-banner-call {
            background: linear-gradient(135deg, #dc2626, #b91c1c);
            color: #ffffff;
            font-weight: 800;
            font-size: 0.85rem;
            padding: 10px 24px;
            border-radius: 50px;
            text-decoration: none;
            letter-spacing: 0.5px;
            transition: opacity 0.2s;
            box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
        }

        .m-banner-call:hover {
            opacity: 0.9;
            color: #ffffff;
        }

        @media (max-width: 991.98px) {
            .m-promo-banner {
                flex-direction: column;
                gap: 14px;
                text-align: center;
            }
        }



        /* Main Light Wrapper */
.purpose-sec-light {
  background-color: #f7f5f0; /* Off-white warm canvas */
  color: #121212;
  padding: 100px 0;
  font-family: 'Yantramanav', sans-serif;
  overflow: hidden;
}

.border-bottom-light {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Header Typography */
.meta-tag {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.85rem;
  letter-spacing: 2px;
  color: #e65100; /* Deep Saffron */
  text-transform: uppercase;
  font-weight: 700;
}

.main-display-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #0f0f0f;
  margin: 0;
}

.main-display-title .dim {
  color: rgba(0, 0, 0, 0.25);
}

.hero-manifesto {
  font-size: 1.15rem;
  color: #555555;
  line-height: 1.7;
  max-width: 500px;
  margin-left: auto;
}

/* Bento Tile Base */
.bento-tile {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  padding: 35px 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 320px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.tile-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tile-num {
  font-family: 'Space Grotesk', sans-serif;
  color: rgba(0, 0, 0, 0.35);
  font-size: 0.95rem;
  font-weight: 700;
}

.status-indicator {
  width: 8px;
  height: 8px;
  background-color: rgba(0, 0, 0, 0.12);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.live-tag {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 0.7rem;
  background: rgba(230, 81, 0, 0.08);
  color: #e65100;
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 1px;
  font-weight: 700;
}

.tile-body h3 {
  font-size: 1.75rem;
  font-weight: 800;
  color: #111111;
  margin-bottom: 12px;
  transition: transform 0.3s ease;
}

.tile-body p {
  color: #666666;
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}

/* Interactive Button Arrow */
.tile-action {
  margin-top: 30px;
}

.action-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #f0ece3;
  border: 1px solid rgba(0, 0, 0, 0.05);
  color: #111;
  font-size: 1.2rem;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Light Mode Micro-Interactions */
.bento-tile:hover {
  background: #ffffff;
  border-color: rgba(230, 81, 0, 0.4);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(230, 81, 0, 0.08);
}

.bento-tile:hover .status-indicator {
  background-color: #e65100;
  box-shadow: 0 0 10px rgba(230, 81, 0, 0.5);
}

.bento-tile:hover .tile-body h3 {
  transform: translateX(4px);
  color: #e65100;
}

.bento-tile:hover .action-arrow {
  background: #e65100;
  border-color: #e65100;
  color: #ffffff;
  transform: rotate(-45deg) scale(1.08);
}

/* Highlight Tile Variation */
.highlight-tile {
  background: linear-gradient(145deg, #ffffff 0%, #fffbf7 100%);
  border-color: rgba(230, 81, 0, 0.15);
}

/* Responsive Overrides */
@media (max-width: 991px) {
  .hero-manifesto {
    margin-left: 0;
  }
  .purpose-sec-light {
    padding: 60px 0;
  }
}

/* Main Wrapper Background */
.nm-team-section {
  padding: 80px 0;
}

/* Card Component Wrapper */
.nm-team-card {
  position: relative;
  width: 100%;
}

.nm-card-inner {
  position: relative;
  width: 100%;
  border-radius: 12px;
}

/* Back Frame Effect (Teal Offset Background) */
.nm-card-bg-shape {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #600000; /* Teal color matching design */
  border-radius: 14px;
  transform: rotate(0deg);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
  z-index: 1;
}

/* Main Image Frame */
.nm-image-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.12; /* Maintains exact image proportions */
  border-radius: 12px;
  overflow: hidden;
  background-color: #c4d0d0;
  z-index: 2;
  transition: transform 0.35s ease;
}

.nm-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Dark Social Overlay on Hover */
.nm-social-overlay {
  position: absolute;
  inset: 0;
  background: rgba(18, 30, 32, 0.78); /* Dark semi-transparent filter */
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.nm-social-links {
  display: flex;
  gap: 10px;
  transform: translateY(10px);
  transition: transform 0.3s ease;
}

.nm-social-links a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.nm-social-links a:hover {
  background: #ffffff;
  color: #121e20;
}

/* Meta Data Below Image */
.nm-card-meta {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 16px;
  padding: 0 4px;
}

.nm-member-name {
  font-size: 1.4rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px 0;
  letter-spacing: -0.2px;
}

.nm-member-role {
  font-size: 1rem;
  color: #6b7280;
  margin: 0;
  font-weight: 400;
}

.nm-email-btn {
  font-size: 1.1rem;
  font-weight: 600;
  color: #111827;
  text-decoration: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.2s ease;
}

.nm-email-btn:hover {
  color: #600000;
}

/* ====================================
   HOVER STATES (Card 2 Effect)
==================================== */
.nm-team-card:hover .nm-card-bg-shape {
  opacity: 1;
  transform: rotate(-3deg) scale(1.02); /* Creates exact offset angle */
}

.nm-team-card:hover .nm-social-overlay {
  opacity: 1;
  visibility: visible;
}

.nm-team-card:hover .nm-social-links {
  transform: translateY(0);
}


/* Main Section with Clean White Background */
.bx-contact-section {
  background-color: #ffffff;
  padding: 80px 0;
  color: #121820;
}

/* ----------------------------------
   Top 4 Info Cards (Light Gray Bg)
---------------------------------- */
.bx-info-card {
  background-color: rgba(249, 175, 31, 0.15);
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 40px 24px;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.bx-info-card:hover {
  transform: translateY(-5px);
  border-color: var(--nn-ui-gold);
  box-shadow: 0 10px 25px rgba(150, 6, 5, 0.06);
}

.bx-icon-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background-color: var(--nn-ui-crimson);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.bx-info-card:hover .bx-icon-circle {
  background-color: var(--nn-ui-crimson);
  color: #ffffff;
  transform: scale(1.05);
}

.bx-info-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #121820;
}

.bx-info-text {
  font-size: 1rem;
  color: #272829;
  line-height: 1.6;
  margin: 0;
}

.bx-info-text a {
  color: #272829;
  text-decoration: none;
  transition: color 0.2s ease;
}

.bx-info-text a:hover {
  color: var(--nn-ui-crimson);
}

.bx-info-text .bx-link-bold {
  color: var(--nn-ui-crimson);
  font-weight: 700;
}

/* ----------------------------------
   Bottom Section: Form & Map
---------------------------------- */
.bx-form-card {
  background-color: rgba(249, 175, 31, 0.15);
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 48px;
  height: 100%;
}

.bx-form-title {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.35;
  color: #121820;
  margin-bottom: 40px;
  max-width: 90%;
}

/* Form Inputs with Dashed Lines */
.bx-input {
  width: 100%;
  border: none;
  border-bottom: 2px dashed #cbd5e1;
  border-radius: 0;
  padding: 12px 0;
  font-size: 0.95rem;
  color: #121820;
  background: transparent;
  outline: none;
  transition: all 0.3s ease;
}

.bx-input::placeholder {
  color: #67748e;
}

.bx-input:focus {
  border-bottom-color: var(--nn-ui-gold);
  border-bottom-style: solid;
}

.bx-select {
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2367748e'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 20px;
}

.bx-textarea {
  resize: none;
}

/* Button Styling using your colors */
.bx-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  background-color: var(--nn-ui-crimson);
  color: #ffffff;
  border: none;
  padding: 8px 10px 8px 30px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 8px 20px rgba(150, 6, 5, 0.2);
}

.bx-btn-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--nn-ui-gold);
  color: var(--nn-ui-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.bx-submit-btn:hover {
  background-color: var(--nn-ui-crimson);
  opacity: 0.92;
  box-shadow: 0 12px 25px rgba(150, 6, 5, 0.3);
  transform: translateY(-2px);
}

.bx-submit-btn:hover .bx-btn-arrow {
  transform: rotate(45deg);
  background-color: #ffffff;
}

/* Google Map Frame */
.bx-map-card {
  background-color: #f7f8fa;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  height: 100%;
  min-height: 450px;
}

.bx-map-card iframe {
  width: 100%;
  height: 100%;
  min-height: 450px;
  border: 0;
}

/* Responsive Tweaks */
@media (max-width: 991px) {
  .bx-form-card {
    padding: 32px 24px;
  }
  .bx-form-title {
    font-size: 1.6rem;
    max-width: 100%;
  }
}

.home2 .nn-bhajan-panel-head{
  background:none ;
}

.home2 .nn-bhajan-panel{
   background:#fff8ef ;
  border:none;
  border-radius: 12px;
  width: 100%;
}

.home2 .nn-bhajan-panel-head h2, .home2 .nn-bhajan-panel-head h3 {
  color: #a11116 !important;
}
.home2 .nn-bhajan-panel-head small{
  color: #a11116 !important;
}
.home2 .nn-bhajan-feed-more {
  display: block;
  padding: 11px 14px;
  /* border-top: 1px solid var(--nn-b-line); */
  color:  rgba(150, 7, 8);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  background:#fff ;
}

.home2 .nn-bhajan-player-meta{
  background: none;
}


.home2 .nn-bhajan-player-meta h3{
  font-size: 20px;
  margin: 0 0 6px 0;
  color: #000000;
}

.home2 .nn-bhajan-player{
  background: none;
}
.home2 .nn-bhajan-yt {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 999px;
    background:var(--nn-b-crimson);
    border: 1px solid rgba(150, 6, 5, 0.22);
    color:  rgb(255, 255, 255);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.home2 .nn-bhajan-yt i{
  
  color: #ffffff;
}


/* Master Container: Pure White Canvas */
.nn-program-section {
  background-color: #ffffff;
  padding: 90px 0;
  font-family: 'Mukta', sans-serif;
  color: #1a1a1a;
}

/* Header Section with Golden Divider */
.nn-section-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 80px auto;
}

.nn-sub-heading {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--nn-ui-gold, #f9af1f);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  display: inline-block;
  margin-bottom: 10px;
}

.nn-main-heading {
  font-size: 3rem;
  font-weight: 800;
  color: var(--nn-ui-crimson, #960605);
  margin: 0 0 20px 0;
  line-height: 1.2;
}

/* Spiritual Center Divider */
.nn-heading-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.nn-heading-divider .line {
  height: 2px;
  width: 80px;
  background: linear-gradient(90deg, rgba(249, 175, 31, 0) 0%, var(--nn-ui-gold, #f9af1f) 100%);
}

.nn-heading-divider .line:last-child {
  background: linear-gradient(90deg, var(--nn-ui-gold, #f9af1f) 0%, rgba(249, 175, 31, 0) 100%);
}

.nn-heading-divider .symbol {
  color: var(--nn-ui-crimson, #960605);
  font-size: 1.4rem;
}

/* Feature Row Blocks (Non-card Layout) */
.nn-feature-block {
  padding: 20px 0;
}

.text-crimson {
  color: var(--nn-ui-crimson, #960605);
}

/* Image Frames with Elegant Gold Border Accents */
.nn-image-frame {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(150, 6, 5, 0.08);
  aspect-ratio: 16 / 10;
  border: 1px solid rgba(249, 175, 31, 0.25);
}

.nn-image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.nn-feature-block:hover .nn-image-frame img {
  transform: scale(1.05);
}

.nn-badge-overlay {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(150, 6, 5, 0.92);
  color: #ffffff;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 30px;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(249, 175, 31, 0.4);
}

/* Text Content & Typography */
.nn-item-title {
  font-size: 2.1rem;
  font-weight: 800;
  color: #121820;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.nn-item-desc {
  font-size: 1.15rem;
  line-height: 1.9;
  color: #4a5568;
  margin-bottom: 24px;
}

/* Customized Section Divider with Praying Hands Icon */
.nn-divider-line {
  position: relative;
  text-align: center;
  margin: 60px 0;
}

.nn-divider-line::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(150, 6, 5, 0) 0%, rgba(150, 6, 5, 0.15) 50%, rgba(150, 6, 5, 0) 100%);
  z-index: 1;
}

.nn-divider-line i {
  position: relative;
  z-index: 2;
  background-color: #ffffff;
  padding: 0 20px;
  color: var(--nn-ui-gold, #f9af1f);
  font-size: 1.2rem;
}

/* Tag Pill Styling */
.nn-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.nn-tag {
  background-color: rgba(249, 175, 31, 0.1);
  color: var(--nn-ui-crimson, #960605);
  border: 1px solid rgba(249, 175, 31, 0.35);
  font-size: 0.95rem;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 20px;
  transition: all 0.3s ease;
}

.nn-tag:hover {
  background-color: var(--nn-ui-crimson, #960605);
  color: #ffffff;
  border-color: var(--nn-ui-crimson, #960605);
}

.nn-tag i {
  color: var(--nn-ui-gold, #f9af1f);
}

.nn-tag:hover i {
  color: #ffffff;
}

/* Bulleted List Styling with Praying Hands Icon */
.nn-bullet-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nn-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 1.08rem;
  color: #2d3748;
  font-weight: 600;
  line-height: 1.6;
}

.nn-bullet-list li i {
  color: var(--nn-ui-gold, #f9af1f);
  font-size: 1.1rem;
  margin-top: 4px;
  flex-shrink: 0;
}

/* Mobile & Tablet Optimizations */
@media (max-width: 991px) {
  .nn-program-section {
    padding: 60px 0;
  }
  .nn-main-heading {
    font-size: 2.2rem;
  }
  .nn-item-title {
    font-size: 1.65rem;
  }
  .nn-item-desc {
    font-size: 1.05rem;
  }
  .bg-newstyle{
    padding:20px !important;
  }
  .sidebar-detail{
  margin-top: 30px !important;
}
.vps-light-title{
  font-size: 1.3rem!important;
}
}

.bg-newstyle{
  padding: 50px; 
  border-radius: 20px;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.btn-text i{
  font-size: 16px;
  font-weight: 700;
}
  /* Container Padding */
        .vps-light-container {
            padding-top: 2rem;
            padding-bottom: 3.5rem;
        }

        .detailpage {
          position: relative;
          padding: 40px 0;
        }

        /* Main Video Player Container (16:9 Aspect Ratio) */
        .vps-light-player-wrapper {
            position: relative;
            width: 100%;
            padding-top: 56.25%; /* 16:9 Aspect Ratio */
            background-color: #000000;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
            border: 1px solid #e2e8f0;
        }

        .vps-light-player-wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* Main Video Information Header */
        .vps-light-meta-box {
            margin-top: 1.25rem;
            /* background: #ffffff; */
            padding: 0.5rem;
            border-radius: 16px;
            /* border: 1px solid #e2e8f0; */
            /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03); */
        }

        .vps-light-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background-color: #fef2f2;
            color: #dc2626;
            font-size: 0.725rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            padding: 0.35rem 0.75rem;
            border-radius: 20px;
            margin-bottom: 0.75rem;
            border: 1px solid rgba(220, 38, 38, 0.2);
        }

        .vps-light-badge i {
            font-size: 0.65rem;
        }

        .vps-light-title {
            font-size: 2rem;
            font-weight: 800;
            line-height: 1.35;
            color: #0f172a;
            margin-bottom: 0.6rem;
            letter-spacing: -0.01em;
            transition: opacity 0.2s ease;
        }

        .vps-light-desc {
            font-size: 0.9rem;
            color: #64748b;
            line-height: 1.65;
            margin-bottom: 1rem;
            transition: opacity 0.2s ease;
        }

        .vps-light-stats {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;
            font-size: 0.8rem;
            color: #64748b;
            padding-top: 0.85rem;
            border-top: 1px solid #e2e8f0;
        }

        .vps-light-stats span {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
        }

        /* Sidebar Header */
        .vps-light-sidebar-header {
            font-size: 1.1rem;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-bottom: 0.6rem;
            border-bottom: 2px solid #960605;
        }

        .vps-light-live-tag {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            font-size: 0.75rem;
            color: #dc2626;
            font-weight: 700;
            background-color: #fef2f2;
            padding: 0.2rem 0.6rem;
            border-radius: 12px;
        }

        .vps-light-dot {
            width: 7px;
            height: 7px;
            background-color: #dc2626;
            border-radius: 50%;
            animation: vpsPulse 1.5s infinite;
        }

        @keyframes vpsPulse {
            0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.7); }
            70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(220, 38, 38, 0); }
            100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
        }

        /* Recommended Sidebar Card */
        .vps-light-card {
            display: flex;
            gap: 0.85rem;
            background-color: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 0.65rem;
            margin-bottom: 0.85rem;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
        }

        .vps-light-card:hover {
            transform: translateY(-2px);
            background-color: #f9f1f1;
            border-color: rgba(199, 2, 2, 0.3);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        }

        /* Active Card Highlight State */
        .vps-light-card.vps-light-active {
            background-color: #fff0f0;
            border-color: #960605;
            box-shadow: 0 0 0 1px #960605, 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
        }

        /* .vps-light-card.vps-light-active::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 4px;
            background-color: #0284c7;
            border-top-left-radius: 12px;
            border-bottom-left-radius: 12px;
        } */

        /* Card Thumbnail Wrapper */
        .vps-light-thumb {
            position: relative;
            width: 150px;
            height: 100px;
            border-radius: 8px;
            overflow: hidden;
            background-color: #e2e8f0;
        }

        .vps-light-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .vps-light-card:hover .vps-light-thumb img {
            transform: scale(1.08);
        }

        .vps-light-time {
            position: absolute;
            bottom: 4px;
            right: 4px;
            background-color: rgba(15, 23, 42, 0.85);
            color: #ffffff;
            font-size: 0.65rem;
            font-weight: 600;
            padding: 2px 5px;
            border-radius: 4px;
        }

        .vps-light-overlay {
            position: absolute;
            inset: 0;
            background: rgba(15, 23, 42, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.2s ease;
        }

        .vps-light-card:hover .vps-light-overlay,
        .vps-light-card.vps-light-active .vps-light-overlay {
            opacity: 1;
        }

        .vps-light-overlay i {
            color: #ffffff;
            font-size: 1rem;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
        }

        /* Card Text Info */
        .vps-light-card-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            flex: 1;
        }

        .vps-light-card-title {
            font-size: 1.2rem;
            font-weight: 600;
            line-height: 1.35;
            color: #0f172a;
            display: -webkit-box;
            line-clamp: 2;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin: 0;
            transition: color 0.2s ease;
        }

        .vps-light-card.vps-light-active .vps-light-card-title {
            color: #960605;
            font-weight: 700;
        }

        .vps-light-card-author {
            font-size: 0.725rem;
            color: #64748b;
            margin-top: 4px;
            display: flex;
            align-items: center;
            gap: 4px;
        }

        /* Advertisement Banner Card */
        .vps-light-ad {
            background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
            border-radius: 12px;
            padding: 1.25rem;
            margin-bottom: 0.85rem;
            color: #ffffff;
            box-shadow: 0 10px 15px -3px rgba(234, 88, 12, 0.25);
            position: relative;
            overflow: hidden;
        }

        .vps-light-ad::after {
            content: 'SPONSORED';
            position: absolute;
            top: 8px;
            right: 8px;
            font-size: 0.55rem;
            font-weight: 800;
            background: rgba(0, 0, 0, 0.2);
            padding: 2px 6px;
            border-radius: 4px;
            letter-spacing: 0.05em;
        }

        .vps-light-ad-title {
            font-size: 1.1rem;
            font-weight: 800;
            margin-bottom: 0.25rem;
            text-transform: uppercase;
            letter-spacing: -0.02em;
        }

        .vps-light-ad-sub {
            font-size: 0.775rem;
            opacity: 0.95;
            margin-bottom: 0.75rem;
            max-width: 85%;
            line-height: 1.4;
        }

        .vps-light-ad-btn {
            display: inline-block;
            background-color: #ffffff;
            color: #ea580c;
            font-weight: 700;
            font-size: 0.75rem;
            padding: 0.4rem 0.85rem;
            border-radius: 6px;
            text-decoration: none;
            transition: all 0.2s ease;
        }

        .vps-light-ad-btn:hover {
            background-color: #fff7ed;
            transform: translateY(-1px);
            color: #c2410c;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
        }


        /* 1. Ensure none of the parent elements break fixed positioning context */
body, .detailpage, .bg-newstyle {
  overflow: visible !important;
}

/* 2. Give room to the sticky column */
#vpsLightPlayerSection {
  transition: top 0.1s ease-out; /* Smooths out scroll ticks */
}

@media (min-width: 992px) {
  /* Enforce flex layout on row to keep columns side-by-side */
  .bg-newstyle > .row {
    display: flex;
    align-items: flex-start;
  }

  /* Make the video section sticky inside its own column boundary */
  #vpsLightPlayerSection {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 20px; /* Offset from top of viewport */
    z-index: 10;
  }
}

.sidebar-detail{
  margin-top: 100px;
}


.pdp-top-nav {
      background-color: #ffffff;
      border-bottom: 2px solid #ebd8c3;
      padding: 12px 0;
    }

    .pdp-brand-title {
      color: #73181f;
      font-weight: 800;
      font-size: 1.6rem;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .pdp-btn-back {
      color: #73181f;
      border: 1px solid #73181f;
      background-color: transparent;
      border-radius: 8px;
      padding: 6px 14px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s ease;
    }

    .pdp-btn-back:hover {
      background-color: #73181f;
      color: #ffffff;
    }

    /* Main Product Card & Image */
    .pdp-main-card {
      background-color: #ffffff;
      border: 1px solid #e7d5c0;
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 15px rgba(115, 24, 31, 0.05);
    }

    .pdp-img-container {
      background-color: #fbf6f0;
      border: 1px solid #eedecb;
      border-radius: 12px;
      padding: 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 380px;
      aspect-ratio: 4 / 3;
      overflow: hidden;
    }

    .pdp-img-container img {
      width: 100%;
      height: 100%;
      max-width: none;
      max-height: none;
      object-fit: cover;
      object-position: center;
      transition: transform 0.3s ease;
    }

    .pdp-img-container:hover img {
      transform: scale(1.05);
    }

    .pdp-tag-stock {
      position: absolute;
      top: 14px;
      left: 14px;
      background-color: #e37400;
      color: #ffffff;
      font-weight: 700;
      font-size: 0.82rem;
      padding: 4px 12px;
      border-radius: 6px;
    }

    /* Details Column */
    .pdp-title-nepali {
      font-weight: 800;
      color: #2c1a11;
      font-size: 2.1rem;
      line-height: 1.25;
      margin-bottom: 2px;
    }

    .pdp-title-english {
      font-size: 1.1rem;
      color: #6e5849;
      font-weight: 500;
      margin-bottom: 16px;
    }

    .pdp-price-box {
      background-color: #fbf6f0;
      border: 1px dashed #d97706;
      border-radius: 12px;
      padding: 12px 20px;
      display: inline-flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
    }

    .pdp-price-current {
      font-size: 2.1rem;
      font-weight: 800;
      color: #73181f;
    }

    .pdp-price-old {
      font-size: 1.15rem;
      text-decoration: line-through;
      color: #8c7665;
    }

    /* Variant Selectors */
    .pdp-variant-btn {
      border: 1px solid #d9c1a7;
      background-color: #ffffff;
      color: #2c1a11;
      border-radius: 8px;
      padding: 8px 16px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .pdp-variant-btn.active {
      border-color: #73181f;
      background-color: #73181f;
      color: #ffffff;
    }

    /* Quantity Field */
    .pdp-qty-btn {
      width: 40px;
      height: 40px;
      border: 1px solid #d9c1a7;
      background-color: #ffffff;
      color: #73181f;
      font-weight: 800;
      font-size: 1.2rem;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }

    .pdp-qty-btn:hover {
      background-color: #fbf6f0;
    }

    .pdp-qty-input {
      width: 60px;
      height: 40px;
      text-align: center;
      border: 1px solid #d9c1a7;
      border-radius: 8px;
      font-weight: 800;
      font-size: 1.1rem;
      background-color: #ffffff;
    }

    /* WhatsApp Button */
    .pdp-btn-wa-main {
      background-color: #73181f;
      color: #ffffff !important;
      font-size: 1.15rem;
      font-weight: 700;
      padding: 14px 24px;
      border-radius: 10px;
      border: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      text-decoration: none;
      transition: background-color 0.2s ease, transform 0.1s ease;
      box-shadow: 0 4px 12px rgba(115, 24, 31, 0.2);
      width: 100%;
    }

    .pdp-btn-wa-main:hover {
      background-color: #551116;
      transform: translateY(-2px);
    }

    .pdp-btn-call {
      border: 1px solid #73181f;
      color: #73181f;
      background-color: transparent;
      font-weight: 700;
      padding: 10px 16px;
      border-radius: 8px;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      width: 100%;
      transition: all 0.2s ease;
    }

    .pdp-btn-call:hover {
      background-color: #fbf6f0;
      color: #551116;
    }

    /* Tabs Section */
    .pdp-nav-tabs {
      border-bottom: 2px solid #e7d5c0;
    }

    .pdp-nav-tabs .nav-link {
      color: #6e5849;
      font-weight: 700;
      font-size: 1.05rem;
      border: none;
      border-bottom: 3px solid transparent;
      padding: 12px 20px;
      background: transparent;
    }

    .pdp-nav-tabs .nav-link.active {
      color: #73181f;
      border-bottom-color: #73181f;
      background: transparent;
    }

    .pdp-tab-container {
      background-color: #ffffff;
      border: 1px solid #e7d5c0;
      border-top: none;
      border-radius: 0 0 12px 12px;
      padding: 24px;
    }

    /* Shop Related Card Layout (Matches reference image) */
    .pdp-shop-card {
      background-color: #fbf6f0;
      border: 1px solid #ebd8c3;
      border-radius: 12px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      height: 100%;
      transition: transform 0.2s ease;
    }

    .pdp-shop-card:hover {
      transform: translateY(-4px);
    }

    .pdp-shop-card-img {
      height: 200px;
      background-color: #ffffff;
      position: relative;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .pdp-shop-card-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .pdp-shop-card-body {
      padding: 14px;
      display: flex;
      flex-direction: column;
      flex-grow: 1;
    }

    .pdp-shop-card-title {
      font-weight: 700;
      font-size: 1.1rem;
      color: #2c1a11;
      margin-bottom: 4px;
    }

    .pdp-shop-card-desc {
      font-size: 0.85rem;
      color: #6e5849;
      margin-bottom: 14px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.35;
    }

    .pdp-shop-card-bar {
      margin-top: auto;
      background-color: #73181f;
      color: #ffffff;
      border-radius: 6px;
      padding: 8px 12px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-decoration: none;
      font-weight: 700;
      font-size: 0.95rem;
    }

    .pdp-shop-card-bar:hover {
      background-color: #551116;
      color: #ffffff;
    }

    /* Floating Mobile Footer */
    .pdp-mobile-float {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #ffffff;
      border-top: 1px solid #ebd8c3;
      padding: 10px 16px;
      box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
      z-index: 1050;
      display: none;
    }

    .pdp-btn-wa-float {
      background-color: #25d366;
      color: #ffffff !important;
      font-size: 1.05rem;
      font-weight: 700;
      border-radius: 10px;
      padding: 12px 16px;
      text-decoration: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
    }

    @media (max-width: 767.98px) {
      .pdp-mobile-float {
        display: block;
      }
      .pdp-title-nepali {
        font-size: 1.7rem;
      }
      .pdp-img-container {
        min-height: 280px;
      }
    }