:root {
    --primary-color: #0d6efd;
    --secondary-color: #198754;
    --text-color: #212529;
    --bg-color: #f8f9fa;
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--bg-color);
    color: var(--text-color);
}

.btn-primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.hero {
    background: linear-gradient(135deg, #0d6efd, #6610f2);
    color: white;
    padding: 100px 0;
}

/* --- Header Navigation Styles --- */
/* ==========================================================================
   Header & Navigation Styles (Bootstrap 5.0.2 Compatible)
   ========================================================================== */

/* 1. सभी नॉर्मल नेविगेशन लिंक्स का गोल्डन कलर और फॉन्ट स्टाइल */
/* --- Sticky Header Fixes --- */

.sticky-top {
    top: 0;
    z-index: 1020; /* यह सुनिश्चित करता है कि हेडर हमेशा सब कंटेंट के ऊपर रहे */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); /* स्क्रॉल करते समय हेडर के नीचे हल्की सी डार्क शैडो */
    backdrop-filter: blur(10px); /* हल्का सा मॉडर्न ब्लर इफेक्ट बैकग्राउंड के लिए */
}

.navbar-nav .nav-link {
    color: #ffaa00 !important;
    font-weight: 700;
    font-size: 0.95rem;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* 2. लिंक्स पर माउस ले जाने (Hover) पर लाइट गोल्डन इफेक्ट */
.navbar-nav .nav-link:hover {
    color: #ffcc00 !important;
    text-decoration: none;
}

/* 3. Bootstrap 5 ड्रॉपडाउन टॉगल एरो (त्रिकोण) का कलर गोल्डन करने के लिए */
.navbar-nav .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0.255em;
    vertical-align: 0.255em;
    content: "";
    border-top: 0.3em solid #ffaa00;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
}

/* 4. 'Home' या ऐक्टिव लिंक के लिए वाइट ब्लॉक स्टाइल (टेक्स्ट को ब्लैक रखने के लिए) */
.navbar-nav .nav-item .text-dark {
    color: #000000 !important;
}

.navbar-nav .nav-item .text-dark:hover {
    color: #111111 !important;
    background-color: #f8f9fa !important;
}

/* 5. डार्क ड्रॉपडाउन मेनू कस्टमाइजेशन */
.dropdown-menu-dark {
    background-color: #121317 !important;
    border: 1px solid #1a1a1a !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    margin-top: 0.5rem !important;
}

.dropdown-menu-dark .dropdown-item {
    color: #ffffff !important;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    transition: all 0.2s ease;
}

/* ड्रॉपडाउन आइटम्स पर होवर इफेक्ट */
.dropdown-menu-dark .dropdown-item:hover {
    background-color: #ffaa00 !important;
    color: #000000 !important;
}

/* ==========================================================================
   WhatsApp "Get ID Now" Button Styles
   ========================================================================== */

/* 6. मुख्य बटन की स्टाइल (बड़ा और प्रीमियम लुक) */
.btn-lg {
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    background-color: #ffcc00 !important; /* थोड़ा हल्का चमकीला गोल्डन */
    color: #000000 !important;
    text-decoration: none !important;
}

/* बटन पर माउस ले जाने (Hover) पर इंटरैक्शन */
.btn-lg:hover {
    background-color: #ffcc00 !important; /* थोड़ा हल्का चमकीला गोल्डन */
    color: #000000 !important;
    transform: translateY(-2px); /* हल्का सा ऊपर उठने का इफेक्ट */
    box-shadow: 0 6px 20px rgba(255, 170, 0, 0.35); /* स्मूथ नियॉन ग्लो */
}

/* बटन पर क्लिक करते समय (Active) का रिस्पॉन्स */
.btn-lg:active {
    transform: translateY(1px);
    box-shadow: 0 2px 10px rgba(255, 170, 0, 0.2);
}

/* ==========================================================================
   Mobile Responsive Adjustments (Media Queries)
   ========================================================================== */

@media (max-width: 991.98px) {
    /* मोबाइल स्क्रीन पर लिंक्स के बीच बेहतर स्पेसिंग */
    .navbar-nav {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
    
    .navbar-nav .nav-item {
        width: 100%;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    /* मोबाइल व्यू में 'Home' बटन को फुल-विड्थ ब्लॉक न बनाकर केवल टेक्स्ट रैप देना */
    .navbar-nav .nav-link.text-dark {
        display: inline-block !important;
        width: auto;
    }
    
    /* मोबाइल मेनू ओपन होने पर बटन के ऊपर गैप */
    .navbar-collapse .text-center {
        margin-top: 1.5rem !important;
    }
}


/* --- Complete Footer Custom Styles --- */

.site-footer {
    background-color: #050505; /* गहरा ब्लैक बैकग्राउंड */
    color: #ffffff;
    font-family: Arial, sans-serif;
    /* border-top: 2px solid #ffaa00; */
}

/* हेडिंग्स की स्टाइलिंग (अंडरलाइन इफ़ेक्ट के साथ) */
.site-footer .footer-heading {
    color: #ffaa00; /* गोल्डन कलर */
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #ffaa00;
    display: inline-block;
    padding-bottom: 4px;
}

/* लिंक्स की लिस्ट की स्टाइलिंग */
.site-footer .footer-links li {
    margin-bottom: 10px;
}

.site-footer .footer-links li a {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

/* लिंक्स पर माउस ले जाने पर गोल्डन होवर इफ़ेक्ट */
.site-footer .footer-links li a:hover {
    color: #ffaa00;
}

/* 18+ और गेमिंग के छोटे छोटे गोल बैज */
.site-footer .badge-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #222;
    color: #aaa;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid #444;
}

/* सोशल मीडिया गोल बटन्स */
.site-footer .social-icons .social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #ffffff;
    margin-right: 10px;
    font-size: 1rem;
    transition: transform 0.2s ease;
    text-decoration: none;
}

.site-footer .social-icons .social-btn:hover {
    transform: scale(1.1);
}

/* सोशल मीडिया के स्पेसिफिक कलर्स */
.site-footer .social-icons .instagram { background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%); }
.site-footer .social-icons .facebook { background-color: #3b5998; }
.site-footer .social-icons .telegram { background-color: #0088cc; }


/* --- Custom Golden Theme Card Utilities --- */

/* इमेज की तरह टेक्स्ट में कीवर्ड्स को ब्राइट गोल्डन कलर देने के लिए */
.highlight-gold {
    color: #ffaa00 !important;
    font-weight: 700;
}

/* कार्ड का रिस्पॉन्सिव बिहेवियर और इनर स्पेसिंग */
.custom-promo-card {
    transition: box-shadow 0.4s ease, border-color 0.4s ease;
    border-color: #ffcc00;
    box-shadow: 0 0 35px rgba(255, 170, 0, 0.4) !important;
}


/* ==========================================================================
   Image Container Master Styles (No Login Form)
   ========================================================================== */

/* 1. डीप टील और ब्लैक रेडियल बैकग्राउंड (हूबहू आपकी इमेज जैसा) */
.image-master-container {
  
    display: flex;
    align-items: center;
}

/* 2. इमेज रैपर पर होवर करने पर हल्का सा और प्रीमियम नियॉन ग्लो इफ़ेक्ट */
.promo-image-wrapper {
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.promo-image-wrapper:hover {
    border-color: #ffcc00;
    transform: scale(1.01); /* माउस ले जाने पर हल्का सा ३डी इम्पैक्ट */
    box-shadow: 0 0 40px rgba(255, 170, 0, 0.4) !important;
}

/* ==========================================================================
   Contact Page Custom Dark & Gold Theme Styles
   ========================================================================== */

/* संपर्क माध्यमों के मुख्य डिब्बे (Cards) */
.contact-card {
    background-color: #0b0c10 !important;
    border: 1px solid #1a1a1a;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-card:hover {
    transform: translateY(-5px);
    border-color: #ffaa00 !important;
    box-shadow: 0 10px 20px rgba(255, 170, 0, 0.15);
}

/* लिंक्स और नंबर की स्टाइल */
.contact-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
}

.contact-link:hover {
    color: #ffaa00;
}

.underline-num {
    text-decoration: underline;
    color: #ffaa00;
}

/* सोशल मीडिया ग्रिड आइटम्स का होवर इफ़ेक्ट */
.social-grid-item {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid #222;
    font-size: 0.85rem;
    transition: all 0.2s ease;
}

.social-grid-item:hover {
    background-color: rgba(255, 170, 0, 0.05);
    border-color: #ffaa00;
}

/* कस्टम बुलेट लिस्ट (गोल्डन डॉट्स) */
.custom-contact-list li {
    position: relative;
    padding-left: 22px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.custom-contact-list li::before {
    content: "•";
    color: #ffaa00;
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -4px;
}

/* Bootstrap 5 के लिए ग्रिड का कस्टम 5-कॉलम फिक्स (बड़ी स्क्रीन के लिए) */
@media (min-width: 1200px) {
    .social-links-grid .col-lg-2\.4 {
        flex: 0 0 20%;
        max-width: 20%;
    }
}


/* ==========================================================================
   Responsible Gaming Page Custom Styles
   ========================================================================== */

/* 1 से 5 रूल्स वाले कार्ड्स */
.gaming-rule-card {
    background-color: #0b0c10 !important;
    border: 1px solid #1a1a1a;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.gaming-rule-card:hover {
    transform: translateY(-4px);
    border-color: #ffaa00 !important;
    box-shadow: 0 10px 20px rgba(255, 170, 0, 0.12);
}

/* कस्टम बुलेट लिस्ट्स बेस स्ट्रक्चर */
.custom-gaming-list li {
    position: relative;
    padding-left: 22px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.custom-gaming-list li::before {
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -4px;
}

/* 'Do Not' के लिए रेड बुलेट पॉइंट्स */
.list-danger-dots li::before {
    content: "•";
    color: #dc3545;
}

/* 'Do Please' के लिए ग्रीन बुलेट पॉइंट्स */
.list-success-dots li::before {
    content: "•";
    color: #28a745;
}

/* ==========================================================================
   Custom Comparison Table Styles
   ========================================================================== */

/* रो पर होवर करने पर हल्का सा बैकग्राउंड हाइलाइट इफेक्ट */
.custom-table-wrapper table tbody tr {
    transition: background-color 0.2s ease;
}

.custom-table-wrapper table tbody tr:hover {
    background-color: rgba(255, 170, 0, 0.02) !important;
}

/* टेबल के भीतरी सेल्स की बॉर्डर कस्टमाइजेशन */
.custom-table-wrapper .table-bordered > :not(caption) > * > * {
    border-width: 1px !important;
    border-color: #1a1a1a !important; /* डीप डार्क बॉर्डर्स */
}

/* मोबाइल स्क्रीन्स पर स्क्रॉल बार को सुंदर और डार्क रखने के लिए */
.table-responsive::-webkit-scrollbar {
    height: 6px;
}
.table-responsive::-webkit-scrollbar-track {
    background: #050505;
}
.table-responsive::-webkit-scrollbar-thumb {
    background: #222;
    border-radius: 3px;
}
.table-responsive::-webkit-scrollbar-thumb:hover {
    background: #ffaa00;
}


.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto; /* यह राइट साइड छिपे कंटेंट को स्क्रॉल करने देगा */
    -webkit-overflow-scrolling: touch; /* इससे मोबाइल पर स्क्रॉलिंग स्मूथ (मक्खन जैसी) हो जाएगी */
}

.blog-banner img{
    width:100%;
    height:500px;
    object-fit:cover;
    border-radius:15px;
}

.blog-content{
    background:#111;
    border:1px solid rgba(255,215,0,.15);
    border-radius:15px;
    padding:35px;
}

.blog-content h1{
    font-size:42px;
    font-weight:700;
    margin-bottom:20px;
}

.blog-content p{
    color:#d6d6d6;
    line-height:2;
    font-size:17px;
}

.blog-meta{
    display:flex;
    gap:25px;
    margin-bottom:20px;
    color:#d4af37;
    font-size:15px;
}

.category{
    display:inline-block;
    background:#d4af37;
    color:#000;
    padding:6px 15px;
    border-radius:30px;
    font-size:13px;
    font-weight:600;
    margin-bottom:15px;
}

.sidebar-card{
    background:#111;
    border:1px solid rgba(255,215,0,.15);
    border-radius:15px;
    overflow:hidden;
    margin-bottom:25px;
}

.sidebar-title{
    background:#d4af37;
    color:#000;
    font-weight:bold;
    padding:15px;
}

.recent-item{
    display:flex;
    gap:15px;
    padding:15px;
    border-bottom:1px solid #222;
}

.recent-item:last-child{
    border:none;
}

.recent-item img{
    width:90px;
    height:70px;
    object-fit:cover;
    border-radius:8px;
}

.recent-item h6{
    color:#fff;
    margin:0;
    font-size:15px;
    line-height:22px;
}

.recent-item a{
    text-decoration:none;
}

.share-btn{
    width:45px;
    height:45px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#222;
    color:#fff;
    margin-right:10px;
    transition:.3s;
}

.share-btn:hover{
    background:#d4af37;
    color:#000;
}

.whatsapp-box{
    background:#111;
    border:1px solid rgba(255,215,0,.15);
    padding:25px;
    border-radius:15px;
    text-align:center;
    margin-top:30px;
}

.btn-gold{
    background:#d4af37;
    color:#000;
    font-weight:bold;
    border-radius:50px;
    padding:14px 35px;
    text-decoration:none;
}

.btn-gold:hover{
    background:#f1c95b;
    color:#000;
}

.prev-next{
    margin-top:50px;
    border-top:1px solid #222;
    padding-top:25px;
}

.prev-next a{
    color:#d4af37;
    text-decoration:none;
    font-weight:bold;
}


/* प्रत्येक कार्ड का मुख्य आवरण */
.exchange-card {
    background-color: transparent;
    border: none;
}

/* इमेज कंटेनर बॉक्स (ऊंचाई को हमेशा फिक्स और सुव्यवस्थित रखने के लिए) */
.card-image-box {
    border-radius: 6px;
    height: 280px; /* आप अपनी इमेजेस की ऊंचाई के हिसाब से इसे बदल सकते हैं */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid #1a1a1a;
}

.card-image-box img {
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* होवर करने पर इमेज के ज़ूम होने का इफ़ेक्ट */
.exchange-card:hover .card-image-box img {
    transform: scale(1.03);
}

/* "GET ID NOW" गोल्डन बटन की विशिष्ट स्टाइल */
.exchange-card .btn-get-id {
    background-color: #ffcc00 !important;
    color: #000000 !important;
    font-size: 0.95rem;
    font-weight: 700;
    border-radius: 4px;
    border: none !important;
    letter-spacing: 0.5px;
    margin-top: 15px !important;
    width: 65%; /* इमेज के अनुसार बटन को थोड़ा छोटा और बीच में रखने के लिए */
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 4px 10px rgba(255, 170, 0, 0.2);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* बटन पर माउस ले जाने पर लाइट गोल्डन और पल्सिंग इफ़ेक्ट */
.exchange-card .btn-get-id:hover {
    background-color: #ffcc00 !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(255, 170, 0, 0.4);
}

.exchange-card .btn-get-id:active {
    transform: translateY(1px);
}

/* FAQ चिल्ड्रन बॉक्स की स्टाइल */
.faq-item {
    position: relative;
    width: 100%;
}

.faq-answer-box {
    background-color: rgba(11, 12, 16, 0.4);
    border: 1.5px solid #ffaa00;
    box-shadow: 0 0 15px rgba(255, 170, 0, 0.2);
    color: #e0e0e0;
    font-size: 0.9rem;
    line-height: 1.6;
    border-radius: 12px;
}

@media (min-width: 768px) {
    .rounded-pill-custom {
        border-radius: 50px !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}