:root {
       --bg: #0d0d0d;
       --surface: #161616;
       --border: #2a2a2a;
       --accent: #e8c97a;
       --accent2: #c45f3c;
       --text: #f0ebe3;
       --muted: #7a7570;
   }

   .st-glinner {
       background-image: url(../images/blog-BG.jpg);
       background-position: center;
       background-repeat: no-repeat;
       background-size: cover;
       position: relative;
       padding: 50px 0;
   }

   .st-glinner:after {
       position: absolute;
       content: "";
       top: 0;
       bottom: 0;
       left: 0;
       right: 0;
       background: #0d0c0c;
       background: linear-gradient(180deg, rgba(13, 12, 12, 0.785) 78%, rgba(255, 255, 255, 1) 100%);
   }

   .st-glinner .container {
       position: relative;
       z-index: 10;
   }

   .st-glinner .header-in {
       padding: 3rem 2rem 1rem;
       text-align: center;
   }

   .st-glinner .header-in h1 {
       font-family: 'Playfair Display', serif;
       font-size: clamp(2.2rem, 6vw, 4rem);
       letter-spacing: -0.02em;
       background: linear-gradient(135deg, #ffffff, #bdfa39);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
   }

   .st-glinner .header-in p {
       color: #fff;
       margin-top: 0.4rem;
       font-size: 18px;
       letter-spacing: 0.15em;
       text-transform: uppercase;
   }

   /********** Tab btn start ********/
   .st-glinner .tab-nav {
       display: flex;
       justify-content: center;
       gap: 0.5rem;
       margin: 2.5rem auto 0;
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: 999px;
       padding: 0.4rem;
       width: fit-content;
   }

   .st-glinner .tab-btn {
       background: none;
       border: none;
       color: #d5fe7d;
       font-size: 18px;
       font-weight: 500;
       padding: 15px 30px;
       border-radius: 999px;
       cursor: pointer;
       transition: all 0.3s ease;
       display: flex;
       align-items: center;
       gap: 0.5rem;
       letter-spacing: 0.04em;
   }

   .st-glinner .tab-btn svg {
       width: 16px;
       height: 16px;
       transition: transform 0.3s ease;
   }

   .st-glinner .tab-btn.active {
       background: #bdfa39;
       color: #0d0d0d;
   }

   .st-glinner .tab-btn.active svg {
       transform: scale(1.15);
   }

   .st-glinner .tab-btn:hover:not(.active) {
       color: var(--text);
       background: var(--border);
   }

   /******* Tab Content start ********/
   .st-glinner .tab-content {
       margin: 2.5rem auto 4rem;
       padding: 0 1.5rem;
   }

   .st-glinner .tab-panel {
       display: none;
       animation: fadeUp 0.45s ease forwards;
   }

   .st-glinner .tab-panel.active {
       display: block;
   }

   @keyframes fadeUp {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

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

   /* ─── IMAGE GRID ─── */

   .st-glinner .img-card {
       position: relative;
       border-radius: 12px;
       overflow: hidden;
       cursor: pointer;
       background: var(--surface);
       border: 1px solid var(--border);
       transition: transform 0.3s ease, box-shadow 0.3s ease;
       margin-bottom: 20px;
   }


   .st-glinner .img-card:hover {
       transform: translateY(-6px) scale(1.01);
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
   }

   .st-glinner .img-card img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       transition: transform 0.5s ease;
   }

   .st-glinner .img-card:hover img {
       transform: scale(1.06);
   }

   .st-glinner .img-card .overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 60%);
       opacity: 0;
       transition: opacity 0.3s ease;
       display: flex;
       align-items: flex-end;
       padding: 1rem;
   }

   .st-glinner .img-card:hover .overlay {
       opacity: 1;
   }

   .st-glinner .img-card .overlay span {
       font-size: 0.8rem;
       color: #fff;
       letter-spacing: 0.08em;
       text-transform: uppercase;
   }

   /* ─── REELS GRID ─── */
   .st-glinner .reels-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
       gap: 1rem;
       margin: auto;
   }

   .st-glinner .reel-card {
       position: relative;
       border-radius: 14px;
       overflow: hidden;
       aspect-ratio: 9/16;
       background: var(--surface);
       border: 1px solid var(--border);
       cursor: pointer;
       transition: transform 0.3s ease, box-shadow 0.3s ease;
   }

   .st-glinner .reel-card:hover {
       transform: translateY(-6px);
       box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
   }

   .st-glinner .reel-thumb {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       transition: transform 0.5s ease;
   }

   .st-glinner .reel-card:hover .reel-thumb {
       transform: scale(1.04);
   }

   .st-glinner .reel-overlay {
       position: absolute;
       inset: 0;
       background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1) 50%, transparent 100%);
   }

   .st-glinner .play-btn {
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%) scale(0.85);
       width: 48px;
       height: 48px;
       background: rgb(139 139 139);
       backdrop-filter: blur(8px);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: transform 0.3s ease, background 0.3s ease;
   }

   .st-glinner .reel-card:hover .play-btn {
       transform: translate(-50%, -50%) scale(1);
       background: rgba(232, 201, 122, 0.3);
   }

   .st-glinner .play-btn svg {
       width: 20px;
       height: 20px;
       fill: #e6ff95;
       margin-left: 3px;
   }

   .st-glinner .reel-info {
       position: absolute;
       bottom: 0;
       left: 0;
       right: 0;
       padding: 0.8rem;
   }

   .st-glinner .reel-info .reel-title {
       font-size: 0.78rem;
       font-weight: 500;
       color: #fff;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .st-glinner .reel-info .reel-views {
       font-size: 0.68rem;
       color: #cde96c;
       margin-top: 2px;
   }

   .st-glinner .section-label {
       font-family: 'Playfair Display', serif;
       font-size: 1.5rem;
       margin-bottom: 1.5rem;
       color: var(--text);
       display: flex;
       align-items: center;
       gap: 0.8rem;
   }

   .st-glinner .section-label::after {
       content: '';
       flex: 1;
       height: 1px;
       background: #cde96c;
   }

   /***** popup start *****/
   .st-glinner .img-card img {
       width: 100%;
       border-radius: 12px;
       cursor: pointer;
       transition: 0.3s ease;
   }

   .st-glinner .img-card img:hover {
       transform: scale(1.03);
       box-shadow: 0 15px 40px rgba(34, 197, 94, 0.25);
   }

   .st-glinner .img-modal {
       display: none;
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, 0.9);
       justify-content: center;
       align-items: center;
       z-index: 9999;
       animation: fadeIn 0.3s ease;
   }

   .st-glinner .modal-content {
       max-width: 60%;
       max-height: 60%;
       border-radius: 15px;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
   }

   .st-glinner .close-modal {
       position: absolute;
       top: 175px;
       right: 348px;
       background: #000;
       padding: 8px;
       border-radius: 5px;
       font-size: 35px;
       color: #22c55e;
       cursor: pointer;
       font-weight: 600;
       z-index: 10;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

   @media (max-width:990px) {
       .st-glinner .header-in {
           padding: 0rem 0rem 0rem;
           text-align: center;
       }
   }