/* Custom CSS */
.hero-section {
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: #fff;
    padding: 60px 0;
    text-align: center;
    height: 300px;
}

.hero-title {
    font-size: 2.5rem;
    margin-bottom: 30px;
    font-weight: 700;
    color: #fff;
}

.search-box-container {
    max-width: 600px;
    margin: 0 auto;
    position: relative;
}

.search-box-container input[type="text"] {
    width: 100%;
    padding: 15px 50px 15px 20px;
    border-radius: 5px;
    border: none;
    font-size: 1rem;
}

.search-box-container button {
    position: absolute;
    right: 5px;
    top: 5px;
    bottom: 5px;
    background: #d63031;
    border: none;
    color: #fff;
    padding: 0 20px;
    border-radius: 4px;
    cursor: pointer;
}

@media  (max-width: 768px) {
    .hero-section {
    height: 350px;
}
    
}
/* =========================================
   CATEGORY GRID (Image + Icon Support)
   ========================================= */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 20px;
}

.category-card {
    background: #fff;
    padding: 15px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.category-card:hover {
    transform: translateY(-5px);
}

/* --- ICON BOX (Wrapper for Image or Icon) --- */
.icon-box {
    height: 60px; /* Fixed Height */
    width: 60px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Agar Image hai */
.category-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

/* Agar FontAwesome Icon hai */
.icon-box i {
    font-size: 32px; /* Desktop Size */
    color: var(--primary-color); /* Theme color use karega */
}

/* Title */
.category-card h3 {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--text-color);
    margin: 0;
}

/* =========================================
   🌑 DARK MODE FIX FOR CATEGORY CARDS
   ========================================= */

/* Card Background & Border Dark Mode Mein */
[data-theme="dark"] .category-card {
    background-color: #2d3436 !important; /* Sidebar Widget wala Dark Color */
    border: 1px solid #4b6584 !important; /* Dark Border */
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;
}

/* Title Color Fix */
[data-theme="dark"] .category-card h3 {
    color: #ffffff !important; /* Text White */
}

/* Icon Color (Optional - agar change karna ho) */
[data-theme="dark"] .icon-box i {
    color: var(--primary-color) !important; /* Primary Color hi rahega */
}

/* Hover Effect Dark Mode Mein */
[data-theme="dark"] .category-card:hover {
    background-color: #353b48 !important; /* Hover karne par thoda light dark */
    border-color: var(--primary-color) !important; /* Green Border */
    transform: translateY(-5px);
}

/* =========================================
   MOBILE RESPONSIVE (4 Columns)
   ========================================= */
@media (max-width: 768px) {
    .category-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 8px !important; 
        padding: 0 5px;
    }

    .category-card {
        padding: 10px 4px !important;
        border-radius: 6px;
        min-height: 80px;
    }

    /* Mobile Sizes */
    .icon-box {
        height: 35px !important;
        width: 35px !important;
        margin-bottom: 5px !important;
    }
    
    /* Icon Text Size ko bhi chhota karna padega */
    .icon-box i {
        font-size: 18px !important; 
    }

    .category-card h3 {
        font-size: 10px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 100%;
        display: block;
    }
}

/* =========================================
   CATEGORY CARD HOVER EFFECT (Border + Lift)
   ========================================= */

.category-card {
    background: #fff;
    padding: 15px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    
    /* FIX: Pehle se 1px ki jagah rok kar rakhein (Invisible Border) */
    /* Taaki hover karne par card hile nahi */
    border: 1px solid transparent; 
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    
    /* Smooth Animation for Border and Lift */
    transition: all 0.3s ease-in-out;
}
/* --- HOVER STATE --- */
.category-card:hover {
    /* 1. Card thoda upar uthega */
    transform: translateY(-5px);
    
    /* 2. Primary Color ka Border dikhega */
    border-color: var(--primary-color); 
    
    /* Optional: Agar chahte ho shadow bhi thodi green ho jaye */
    box-shadow: 0 8px 20px rgba(0, 184, 148, 0.15); 
}

/* =========================================
   SOCIAL CHANNEL BUTTONS (Brand Colors)
   ========================================= */

.social-channels {
    margin: 20px 0;
}

/* Common Styles (Desktop/Default) */
.channel-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-radius: 6px;
    margin-bottom: 15px;
    
    /* Base Settings */
    background: var(--card-bg, #fff); /* Fallback to white if var not set */
    border: 1px solid transparent;
    color: var(--text-color, #333);
    
    /* Smooth Animation */
    transition: all 0.3s ease-in-out;
    position: relative;
    text-decoration: none;
    box-sizing: border-box; /* Ensures padding doesn't increase width */
}

.join-btn {
    color: #fff;
    padding: 6px 18px;
    border-radius: 4px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    white-space: nowrap; /* Desktop par bhi text na toote */
}

/* --- WHATSAPP STYLING --- */
.whatsapp-box {
    background-color: #e0f7fa !important;
    border-color: #26a69a !important;
}
.whatsapp-box:hover {
    background-color: #ffffff !important;
    border-color: #25D366 !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.25);
}
.whatsapp-box .join-btn { background: #25D366; }
.whatsapp-box:hover .join-btn { background: #1ebc57; }


/* --- TELEGRAM STYLING --- */
.telegram-box {
    background-color: #e3f2fd !important;
    border-color: #29b6f6 !important;
}
.telegram-box:hover {
    background-color: #ffffff !important;
    border-color: #0088cc !important;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 136, 204, 0.25);
}
.telegram-box .join-btn { background: #0088cc; }
.telegram-box:hover .join-btn { background: #0077b5; }


/* =========================================
   📱 MOBILE RESPONSIVE FIX (Strict 1-Line Layout)
   ========================================= */

@media (max-width: 768px) {
    
    /* 1. Main Container Fix */
    .channel-btn {
        display: flex !important;
        flex-direction: row !important; /* Hamesha Side-by-Side */
        flex-wrap: nowrap !important;   /* Wrap karna mana hai */
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 12px !important;  /* Compact Padding */
        gap: 10px !important;           /* Text aur Button ke beech gap */
        width: 100% !important;
        min-height: 48px !important;    /* Button height maintain karega */
    }

    /* 2. Text/Icon Area (Left Side) */
    /* Target common tags inside the box to force single line */
    .channel-btn strong,
    .channel-btn span,
    .channel-btn p,
    .channel-btn i,
    .channel-btn h3 {
        font-size: 13px !important;     /* Readable Size */
        margin: 0 !important;
        line-height: 1.3 !important;
        
        /* 🔥 Force 1 Line Logic */
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important; /* Text lamba hua to '...' dikhega */
        
        flex-shrink: 1 !important;      /* Jagah kam hone par text shrink hoga */
        min-width: 0 !important;        /* Flexbox overflow fix */
        text-align: left !important;
    }

    /* Icon Specific Fix */
    .channel-btn i {
        font-size: 18px !important;
        margin-right: 8px !important;
        flex-shrink: 0 !important;      /* Icon kabhi nahi dabega */
        display: inline-block !important;
        vertical-align: middle !important;
    }

    /* 3. Button Fix (Right Side) */
    .join-btn {
        font-size: 11px !important;     /* Compact Size */
        padding: 6px 14px !important;
        width: auto !important;         /* Jitna text utna chouda */
        min-width: auto !important;
        
        /* 🔥 Strict Rules to Prevent Breaking */
        white-space: nowrap !important; /* "Join Now" 1 line me rahega */
        flex-shrink: 0 !important;      /* Button kabhi nahi dabega/pichkega */
        display: inline-block !important;
        margin-left: auto !important;   /* Right side push karega */
    }
}


/* =========================================
   🌑 DARK MODE SUPPORT
   ========================================= */

[data-theme="dark"] .channel-btn strong,
[data-theme="dark"] .channel-btn i,
[data-theme="dark"] .channel-btn span {
    color: #ffffff !important;
}

[data-theme="dark"] .whatsapp-box {
    background-color: #1b4d3e !important;
    border-color: #25D366 !important;
}
[data-theme="dark"] .whatsapp-box:hover {
    background-color: #2d3436 !important;
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}

[data-theme="dark"] .telegram-box {
    background-color: #163e5c !important;
    border-color: #0088cc !important;
}
[data-theme="dark"] .telegram-box:hover {
    background-color: #2d3436 !important;
    box-shadow: 0 5px 15px rgba(0, 136, 204, 0.4);
}
/* Footer Styles */
.footer-main {
    padding: 60px 0;
    color: #fff;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.footer-column .widget-title {
    font-size: 1.2rem;
    margin-bottom: 20px;
    font-weight: 600;
    text-transform: uppercase;
    color: #fff;
}

.footer-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu-list li {
    margin-bottom: 10px;
}

.footer-menu-list a {
    color: #ddd;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-menu-list a:hover {
    color: #fff;
}

/* Social Icons */
.footer-socials {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    background: rgba(255,255,255,0.1);
    transition: all 0.3s;
    text-decoration: none;
}

.social-icon:hover {
    background: var(--primary-color, #00b894);
    transform: translateY(-3px);
}

.footer-socials.style-outline .social-icon {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.2);
}

.footer-socials.style-outline .social-icon:hover {
    border-color: var(--primary-color, #00b894);
    background: var(--primary-color, #00b894);
}

/* Copyright */
.site-info {
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.05);
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }
    
    .footer-main {
        padding: 40px 0;
    }
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 35px;
    }
    
}

/* Footer Accordion Styles */
@media (max-width: 768px) {
    .footer-column.is-accordion .footer-menu-list {
        display: none;
        margin-top: 10px;
    }
    
    .footer-column.is-accordion.active .footer-menu-list {
        display: block;
        animation: fadeIn 0.3s ease;
    }
    
    .footer-column.is-accordion .widget-title {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }
}


/* Footer Redistribution Logic */
.footer-grid {
    display: grid;
    gap: 30px;
}
.footer-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.footer-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.footer-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.footer-grid.cols-1 { grid-template-columns: 1fr; }

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .footer-grid.cols-4, .footer-grid.cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 768px) {
    .footer-grid.cols-4, .footer-grid.cols-3, .footer-grid.cols-2 {
        grid-template-columns: 1fr;
    }
}


/* =========================================
   BOTTOM INFO BOXES (Full Width Fix)
   ========================================= */

/* 1. Main Outer Section */
.bottom-info-section {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 50px;
    /* Background color optional, agar puri patti color karni ho */
}

/* 2. Inner Wrapper (Layout Control) */
.mt-bottom-container {
    width: 100%;
    max-width: 1200px; /* Desktop par jyada failne se rokega */
    margin: 0 auto;    /* Desktop par center karega */
    padding: 0 15px;   /* Desktop par side se thoda sa gap */
    display: flex;
    flex-direction: column;
    gap: 30px;         /* Boxes ke beech ka gap */
    box-sizing: border-box;
}

/* 3. The Info Box Design */
.mt-info-box {
    width: 100%;
    background: #fff;
    border-radius: 8px; /* Corners round */
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Header (Title) */
.mt-info-header {
    background-color: var(--primary-color);
    padding: 15px;
    text-align: center;
}

.mt-info-header h3 {
    color: #ffffff;
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Body (Content) */
.mt-info-body {
    background-color: #ffffff;
    padding: 20px;
    text-align: center;
    border: 2px solid var(--primary-color);
    border-top: none; 
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.mt-info-body p {
    margin: 0;
    font-size: 15px;
    color: #2d3436;
    line-height: 1.6;
}

/* --- DARK MODE FIXES --- */
[data-theme="dark"] .mt-info-header { background-color: var(--primary-color); }
[data-theme="dark"] .mt-info-header h3 { color: #ffffff !important; }
[data-theme="dark"] .mt-info-body { 
    background-color: var(--card-bg); 
    border-color: var(--primary-color); 
}
[data-theme="dark"] .mt-info-body p { color: #dfe6e9 !important; }



/* =========================================
   ADVERTISEMENT STYLING (Responsive Fix)
   ========================================= */

/* 1. Main Ad Container Wrapper */
.mt-ad-container {
    display: flex;           /* Flexbox for perfect centering */
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
    flex-direction: column;  /* Stack Label and Ad */
    width: 100%;
    max-width: 100%;
    margin: 25px auto;       /* Spacing top/bottom */
    clear: both;
    box-sizing: border-box;
}

/* 2. Header Ad Strip */
.mt-header-ad {
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 15px 0;
    background: #f4f6f8; /* Light BG to highlight ad area */
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

/* 3. In-Content Ad Wrapper */
.mt-content-ad {
    margin: 30px 0;
    padding: 10px;
    /* overflow: hidden;  <-- REMOVED: Ye ads ko kat raha tha */
    background: transparent;
}

/* 4. Ad Label (Sponsored / Advertisement) */
.ad-label {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 10px;
    color: #adb5bd;
    text-transform: uppercase;
    margin-bottom: 8px;
    letter-spacing: 1.5px;
    font-weight: 600;
}

/* 5. THE FIX: Image, Iframe, Google Ads Handling */
.mt-ad-container img {
    max-width: 100%;
    height: auto; /* Images ke liye auto height sahi hai */
    display: block;
}

.mt-ad-container iframe, 
.mt-ad-container ins,
.mt-ad-container video,
.mt-ad-container object {
    max-width: 100%;
    /* height: auto; <-- REMOVED: Iframe ki height fix honi chahiye */
    display: block;
    margin: 0 auto;
}

/* --- DEVICE WISE ADJUSTMENTS --- */

/* Mobile (Small Screens) */
@media (max-width: 480px) {
    .mt-header-ad {
        padding: 5px 0; /* Mobile me kam padding */
        margin-bottom: 15px;
    }
    
    .mt-content-ad {
        margin: 20px 0; /* Content ke bich gap thoda kam */
        padding: 5px; /* Side padding kam taaki 300px ad fit ho */
    }

    /* Agar 300x250 ad mobile se bada ho raha hai, to scroll na aye */
    .mt-ad-container {
        overflow-x: hidden; 
    }
}


/* =========================================
   STICKY FOOTER AD (Mobile Fixed)
   ========================================= */
.mt-sticky-footer-ad {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1); /* Better Shadow */
    z-index: 99999; /* Sabse upar */
    text-align: center;
    padding: 5px 0;
    
    /* Flex Center */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px; /* Minimum height taaki ad chipke na */
}

.mt-close-ad {
    position: absolute;
    top: -35px; /* Button thoda aur upar */
    right: 5px;
    background: #ff4757; /* Red Color for Close */
    color: #fff;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 18px;
    line-height: 30px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.mt-sticky-inner {
    width: 100%;
    display: flex;
    justify-content: center;
}

.mt-sticky-inner img, 
.mt-sticky-inner iframe {
    max-width: 100%;
    max-height: 100px; /* Limit increased from 50px to 100px for bigger banners */
    height: auto;
}

/* =========================================
   SIDE RAIL ADS (Centered in Empty Space)
   ========================================= */

.mt-side-ad-rail {
    position: fixed;
    top: 50%; 
    transform: translateY(-50%); /* Vertical Center */
    z-index: 1000;
    
    /* Flexbox to center the ad content inside the rail */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Width logic: Available space ka use karega */
    width: calc((100vw - 1240px) / 2); /* (Screen Width - Content Width) / 2 sides */
    max-width: 350px; /* Ad isse jyada chauda na ho */
    height: auto;
    pointer-events: none; /* Container click block na kare, sirf ad click ho */
}

/* LEFT SIDE RAIL */
.mt-side-left {
    left: 0;
    /* Container ko left edge se start karo */
    
    /* Ad ko container ke andar center karo */
    justify-content: center; 
}

/* RIGHT SIDE RAIL */
.mt-side-right {
    right: 0;
    /* Container ko right edge se start karo */
    
    /* Ad ko container ke andar center karo */
    justify-content: center;
}

/* Actual Ad Content (Image/Iframe) inside the rail */
.mt-side-ad-rail > * {
    pointer-events: auto; /* Ad click ho sake */
    max-width: 100%; /* Agar jagah kam ho to ad chota ho jaye */
}

/* --- RESPONSIVE --- */

/* Sirf Tab dikhao jab side me kam se kam 160px jagah ho */
/* 1240px (Content) + 320px (2x160px Ads) = 1560px minimum width needed */
@media (max-width: 1560px) {
    .mt-side-ad-rail {
        display: none !important; /* Jagah kam hai, ad hide kar do taaki content na dhake */
    }
}


/* =========================================
   🚨 ULTIMATE MOBILE LAYOUT FIX (Final)
   Fixes: Right Scroll Gap, Inspect Mode Glitch, Overflow
   ========================================= */

/* 1. FORCE STOP HORIZONTAL SCROLL */
html, body {
    overflow-x: hidden !important;
    position: relative;
    width: 100%;
    margin: 0;
}

#page, .site {
    overflow-x: hidden !important; /* Wrapper ko bhi lock karo */
    width: 100%;
}

/* 2. QUICK LINKS BAR FIX (Mobile Overrides) */
/* Jo -12px margin issue kar raha tha, use remove kar rahe hain */
@media (max-width: 767px) {
    .quick-links-bar {
        /* Negative margin ko safe limit me lao ya hata do */
        margin-left: 0 !important; 
        margin-right: 0 !important;
        margin-top: -20px !important; /* Thoda upar khiskayenge bas */
        
        width: 100% !important;
        box-sizing: border-box !important;
        
        /* Grid Gap ko thoda kam karo taaki overflow na ho */
        gap: 10px !important; 
        padding: 10px !important;
    }

    .quick-link-btn {
        font-size: 13px !important; /* Text thoda chota taaki fit aaye */
        min-height: 50px !important;
        padding: 5px !important;
    }
}

/* 3. HEADER BRANDING FIX (Overflow Cause) */
/* Kabhi kabhi lambe title mobile width tod dete hain */
@media (max-width: 480px) {
    .site-branding h1 {
        font-size: 16px !important; /* Font size safe limit */
        white-space: normal !important; /* Text ko tutne do (Wrap) */
        line-height: 1.2;
    }
    
    .site-branding {
        flex-shrink: 1; /* Logo/Title ko shrink hone do */
        min-width: 0;   /* Flexbox overflow fix */
    }
}

/* 4. CONTAINER PADDING RESET */
/* Ensure container padding doesn't push width > 100% */
@media (max-width: 991px) {
    .container, 
    .mt-single-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Row reset */
    .row, .mt-layout-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
}

/* 5. ADS OVERFLOW FIX */
/* Google Ads kabhi kabhi 100% se bade ho jate hain */
.mt-ad-container, 
.mt-ad-container iframe, 
.mt-ad-container ins {
    max-width: 100% !important;
    overflow: hidden !important;
}