:root {
            --ngg-bg-dark: #31271d;
            --ngg-bg-darker: #0f0f0f;
            --ngg-gold: #f5c518;
            --ngg-gold-light: #ffdb4d;
            --ngg-text-light: #ffffff;
            --ngg-text-muted: #c3c0bc;
            --ngg-border-radius: 60px;
            --ngg-tab-height: 70px;
            --ngg-font-main: 'Arial', sans-serif;
            --ngg-not-selected: #c3c0bc;
        }

        .ngg-container {
            max-width: 1300px;
            margin: 0 auto;
        }

        .ngg-tabs-container {
            position: relative;
            overflow: hidden;
            border-radius: var(--ngg-border-radius);
            border:1px solid #e6ac6d;
            background: var(--ngg-bg-dark);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .ngg-tabs {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
        }

        .ngg-tabs::-webkit-scrollbar {
            display: none;
        }

        .ngg-tab {
            flex: 1 0 200px;
            min-width: 180px;
            padding: 15px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            white-space: nowrap;
            border-radius:var(--ngg-border-radius);
            color:var(--ngg-not-selected);
        }

        .ngg-tab.ngg-active {
            background: linear-gradient(135deg, var(--ngg-gold), var(--ngg-gold-light));
            color: #000;
            font-weight: bold;
        }
        /*
        .ngg-tab.ngg-active::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 10px solid var(--ngg-gold);
            transition: all 0.3s ease;
        }*/

        .ngg-tab.ngg-disabled {
            opacity: 1;
            cursor: not-allowed;
            pointer-events: none;
            color: var(--ngg-text-muted);
        }
        .ngg-tab.ngg-disabled span, .ngg-tab:not(.ngg-disabled) span { color:var(--ngg-gold); }
        .ngg-tab.ngg-active span { color:#000; }
        .ngg-tab.ngg-active:hover span { color:gold; }


        .ngg-tab:not(.ngg-disabled):hover {
            background: rgba(245, 197, 24, 0.2);
            color:#fff; 
        }

        .ngg-tab-title {
            font-size: 1.5rem;
            font-weight: 800;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }

        .ngg-tab-date {
            font-size: 2.3rem;
            font-weight: 800;
        }

        .ngg-tab.ngg-active .ngg-tab-date {
            font-size: 2.3rem;
            font-weight:800;
        }

        .ngg-tab-content-container {
            padding: 40px 30px;
            /*
            background: var(--ngg-bg-dark);
            border-radius: 0 0 var(--ngg-border-radius) var(--ngg-border-radius);*/
            min-height: 200px;
            display: none;
        }

        .ngg-tab-content-container.ngg-active {
            display: block;
            animation: ngg-fadeIn 0.5s ease;
        }

        @keyframes ngg-fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .ngg-content-title {
            font-size: clamp(2rem, 3vw, 3rem);
            color: var(--ngg-gold);
            font-weight:800;
        }
        .ngg-content-subtitle { font-size: clamp(2rem, 3vw, 3rem); color:#fff; font-weight:700; }

        .ngg-content-desc {
            font-size: 1.1rem;
            line-height: 1.6;
            color: var(--ngg-text-light);
        }

        /* NGG Pricetag */

        .ngg-item-pricetag { display:flex; width:100%; gap:5px; padding:0 5px; color:white; }
        .ngg-item-pricetag div { flex:1; }
        .ngg-db-tag {
            width:100%;
            height: 42px;
            border-top-left-radius:5px;
            border-bottom-left-radius:5px;
            border-bottom-right-radius:30px;
            background: #DA1600;
            background: linear-gradient(90deg, rgba(218, 22, 0, 1) 0%, rgba(197, 26, 0, 1) 59%, rgba(247, 142, 35, 1) 99%);
        }
        .ngg-tag { 
            display:flex;
            border-top-left-radius:5px;
            border-bottom-left-radius:5px;
            border-bottom-right-radius:30px;
            background: #DA1600;
            background: linear-gradient(90deg, rgba(218, 22, 0, 1) 0%, rgba(197, 26, 0, 1) 59%, rgba(247, 142, 35, 1) 99%); 
            color:white;
            padding:2px 10px 2px 7px; 
            max-height:40px; 
            align-items:center;
            gap:0 3px;
        }
        .ngg-tag div > img { display:block; position: relative; top:4px; border-radius: 0; max-width:42px; }
        .ngg-savings { font-size:clamp(1.5rem, 2vw, 2rem); font-weight:800; font-style:italic; line-height:0.8; }
        .ngg-savings span { font-size:clamp(1.15rem, 1.5vw, 1.5rem); font-style:italic; }
        
        .ngg-db-sm { font-size:12px; line-height:1.25; font-weight:bold; }

.ngg-price-thunder {
 width: 33px;
 height: 43px;
 background: linear-gradient(169deg, rgba(254, 201, 141, 1) 0%, rgba(255, 133, 0, 1) 100%);
}

.ngg-price-percent {
 width: 122.72px;
 height: 36px;
 border-radius: 0 0 0 20px; /* Only 4 values allowed */
 background: 
 linear-gradient(142deg, rgba(255, 133, 0, 1) 0%, rgba(254, 201, 141, 1) 100%),
 linear-gradient(90deg, rgba(236, 60, 0, 1) 0%, rgba(255, 153, 48, 1) 100%);
}


    /* NGG Timeline */
        .ngg-timeline { position:relative; display:flex; flex-direction:column; margin:2% auto; overflow: hidden; }

        .ngg-timeline-line {     
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 4px;
            background: #a9a18e;
            transform: translateX(-50%);
            z-index: 1; 
        }

        .ngg-date-deals {
            display:flex; flex-direction: column; }
        
        .ngg-timeline-item {
            /*display: flex;*/
            /*justify-content: center;*/
            align-items: center;
            margin: 10px 0 3%;
            position: relative;
            z-index: 2;
            width:48%;
            border-radius:100px;
            font-family:'Open Sans', sans-serif;
        }

        .ngg-item-right { align-items: flex-end; }

        .ngg-timeline-date { font-size: clamp(3rem, 3vw, 3.5rem); font-weight:700; }

        .ngg-left { text-align:center; }
        .ngg-shift-left { position:relative; left:calc(-4% - 14px); }
        .ngg-shift-right { position:relative; left:calc(4% - 1px); }
               
        .ngg-item-deal { display:flex; justify-content:flex-start; padding:1%; width:100%; }
        .ngg-item-deal > div { flex:1; }
        .ngg-item-deal img { border-radius:50%; max-width:170px; width:100%; padding:5px; }
        .ngg-item-deal.ngg-comingsoon img { border-radius:50%; width:100%; }
        .ngg-item-details { display:flex; flex-direction:column; text-align:left; padding:2% 3%; justify-content:center; }
        .ngg-item-inactive { display:flex; flex-direction:column; text-align:left; padding:5px; justify-content:center; }
        .ngg-img-inactive img { max-width:90px; max-height:90px; width:100%; padding:5px; }

        .ngg-item-price { display:flex; gap:20px; padding:2% 0; align-items:center; }
        .ngg-was-price { text-decoration: line-through; }
        
        

        .ngg-date-wrapper { 
            position: relative;
        }

        .ngg-date-label {
            background: #2a2a2a;
            color: #ccc;
            padding: 10px 20px;
            border-radius: 12px;
            font-size: 1.8rem;
            font-weight: bold;
            white-space: nowrap;
            box-shadow: 0 4px 12px rgba(0,0,0,0.3);
            position: relative;
            z-index: 2;
            }
        
        .ngg-date-expired { color:#a9a18e; }
        
          .ngg-arrow{
            position:absolute;
            width:0;height:0;
            border-top:15px solid transparent;
            border-bottom:15px solid transparent;
            z-index:2;
            }

            /* Left-pointing */
            .ngg-arrow.ngg-left{
            top:8px; /* distance from top of container */
            border-right:22px solid #f5e6c2;
            padding-left:1%;
            }

            .ngg-arrow.ngg-offleft{
            top:8px; /* distance from top of container */
            border-right:22px solid #a9a18e;
            padding-left:1%;
            }

            /* Right-pointing */
            .ngg-arrow.ngg-right{
            bottom:8px;
            border-left:22px solid #f5e6c2;
            padding-right:0%;
            }

            .ngg-arrow.ngg-offright{
            bottom:8px;
            border-left:22px solid #a9a18e;
            padding-right:0%;
            }

            .ngg-date-right-h2 { padding-left:3%; }


        /* Active */
        .ngg-item-live { background: #FFE5AA;
            background: linear-gradient(314deg, rgba(255, 229, 170, 1) 60%, rgba(197, 147, 73, 1) 85%, rgba(128, 75, 25, 1) 99%); }
        .ngg-date-active { color:#ffe5aa; } 

        /* Coming Soon */
        .ngg-item-notlive { background-color:#3c2c18; color:#fff; }
        .ngg-item-notlive img { opacity:1; max-width:90px; max-height:90px; padding:4px; }
        .ngg-item-coming h3 { color:#f66300; font-weight:800; font-style:italic; padding-top:2%; }
        .ngg-date-inactive { color:#a9a18e; }

        /* Expired */
        .ngg-item-expired { background-color:#262626; color:#fff; max-height:110px; }
        .ngg-item-expired img { opacity:0.5; }

            
        /* Responsive */
        @media (max-width:1000px) {
            .ngg-tab {
                flex: 1 0 160px;
                min-width: 150px;
                padding: 12px 15px;
            }

             .ngg-tab-title {
                font-size: 1.35rem;
            }

            .ngg-tab-date {
                font-size: 1.25rem;
            }

            .ngg-tab.ngg-active .ngg-tab-date {
                font-size: 1.35rem;
            }

            .ngg-content-title {
                font-size: 2rem;
            }

            .ngg-content-desc {
                font-size: 1rem;
            }
            .ngg-shift-left { left:calc(5% - 20px); width:170px; }
            .ngg-shift-right { left:calc(3% - 3px); width:170px; }
            .ngg-timeline-line { width:2px; left:5%; }
            .ngg-timeline-item { width:80%; margin:20px auto 2%; }            
            .ngg-arrow.ngg-offleft { border-right:0; border-left:22px solid #a9a18e; }
            .ngg-arrow.ngg-left { border-right:0; border-left:22px solid #f5e6c2; }
            .ngg-arrow { left:12%; }
            .ngg-arrow.ngg-offright, .ngg-arrow.ngg-right { left:20px; }
            .ngg-date-right-h2 { padding:0; }
        }


        @media (max-width: 768px) {
            .ngg-tab {
                flex: 1 0 180px;
                min-width: 180px;
                padding: 8px 10px;
            }

            .ngg-tab-title {
                font-size: 1.35rem;
            }

            .ngg-tab-date {
                font-size: 1.25rem;
            }

            .ngg-tab.ngg-active .ngg-tab-date {
                font-size: 1.35rem;
            }

            .ngg-content-title {
                font-size: 2rem;
            }

            .ngg-content-desc {
                font-size: 1rem;
            }
            .ngg-tab-content-container { padding:5% 1%; }
            .ngg-timeline-item { width:100%; border-top-left-radius: 100px;  border-bottom-left-radius: 100px; border-top-right-radius: 15px; border-bottom-right-radius: 15px;}
            .ngg-shift-left, .ngg-shift-right { left:0; margin:2% 0 0; }
            .ngg-date-right-h2 { padding-left:9%; }
            .ngg-timeline-line { width:2px; left:2%; }
            .ngg-tab { flex:1 0 170px; min-width:170px; }
            .ngg-date-inactive, .ngg-date-active, .ngg-date-expired { background-color:#231a14; }
            .ngg-timeline-line { z-index:0; }
            .ngg-date-right-h2 { padding:0; }
            .ngg-item-details h3, .ngg-item-inactive h3 { font-size:14px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; }
            .ngg-buynow { position:absolute; right:10px; bottom:10px; }
            .ngg-item-price { gap:0; align-items:flex-start; flex-direction: column; }
            .ngg-item-deal img { max-width:140px; max-height:140px; }
            .ngg-img-inactive img, .ngg-item-notlive img, .ngg-item-deal.ngg-comingsoon img { max-width:60px; max-height:60px; }
            .ngg-inactive { display:flex; flex-direction:row; align-items:center; gap:20px; }
            .ngg-tag div > img { top:2px; }
            .ngg-buynow { padding:2px 2%; right:10px; bottom:6px; }
            .ngg-arrow.ngg-offleft { border-right:0; border-left:22px solid #a9a18e; }
            .ngg-arrow.ngg-left { border-right:0; border-left:22px solid #f5e6c2; }
            .ngg-arrow { left:8px; }
            .ngg-arrow.ngg-offright, .ngg-arrow.ngg-right { left:6px; }
            .ngg-shift-left, .ngg-shift-right { width:130px; }            
        }
