/* ============================================================ */
/* ========== COMPLETE RESPONSIVE FIXES ========== */
/* ============================================================ */

/* ============================================================ */
/* ========== 1. PAGINATION - RESPONSIVE FIX ========== */
/* ============================================================ */

@media only screen and (max-width: 768px) {
    
    .paginate {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 8px 4px !important;
        margin: 10px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        min-height: 40px !important;
    }
    
    .paginate a,
    .paginate span {
        padding: 5px 10px !important;
        font-size: 12px !important;
        min-width: 28px !important;
        border-radius: 4px !important;
        margin: 0 1px !important;
        display: inline-block !important;
        box-sizing: border-box !important;
        white-space: nowrap !important;
        border: 1px solid #add5df !important;
        background: #eaf4f7 !important;
        color: #000 !important;
        text-decoration: none !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
    }
    
    .paginate .current {
        font-weight: 700 !important;
        color: #fff !important;
        border-color: #39abc9 !important;
        background-color: #3496b0 !important;
    }
    
    .paginate .disabled {
        border-color: #bbb !important;
        color: #bbb !important;
        background: #f5f5f5 !important;
        cursor: not-allowed !important;
        opacity: 0.6 !important;
    }
    
    .paginate a:not(.prev):not(.next),
    .paginate span:not(.current):not(.disabled):not(.dots) {
        display: none !important;
    }
    
    .paginate .dots {
        display: none !important;
    }
    
    .paginate a.prev,
    .paginate a.next,
    .paginate .disabled.prev,
    .paginate .disabled.next {
        display: inline-block !important;
    }
    
    .paginate .current {
        display: inline-block !important;
        padding: 5px 10px !important;
        font-size: 12px !important;
        min-width: 28px !important;
    }
}

@media only screen and (max-width: 480px) {
    .paginate {
        gap: 3px !important;
        padding: 6px 2px !important;
        margin: 8px 0 !important;
        min-height: 35px !important;
    }
    
    .paginate a,
    .paginate span,
    .paginate a.prev,
    .paginate a.next,
    .paginate .disabled.prev,
    .paginate .disabled.next,
    .paginate .current {
        padding: 4px 7px !important;
        font-size: 11px !important;
        min-width: 24px !important;
        border-radius: 3px !important;
    }
}

@media only screen and (max-width: 360px) {
    .paginate {
        gap: 2px !important;
        padding: 4px 2px !important;
        margin: 5px 0 !important;
        min-height: 30px !important;
    }
    
    .paginate a,
    .paginate span,
    .paginate a.prev,
    .paginate a.next,
    .paginate .disabled.prev,
    .paginate .disabled.next,
    .paginate .current {
        padding: 3px 5px !important;
        font-size: 10px !important;
        min-width: 20px !important;
        border-radius: 3px !important;
    }
}

@media only screen and (max-width: 768px) {
    .most-download-page .paginate,
    .most-view-page .paginate,
    .most-like-page .paginate {
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    
    .most-download-page .paginate a,
    .most-download-page .paginate span,
    .most-view-page .paginate a,
    .most-view-page .paginate span,
    .most-like-page .paginate a,
    .most-like-page .paginate span {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media only screen and (max-width: 480px) {
    .page-info {
        font-size: 11px !important;
        text-align: center !important;
        padding: 3px 0 !important;
    }
}

@media only screen and (max-width: 360px) {
    .page-info {
        font-size: 10px !important;
        padding: 2px 0 !important;
    }
}

/* ============================================================ */
/* ========== 2. H1 & TITLE FIX - RESPONSIVE ========== */
/* ============================================================ */

@media only screen and (max-width: 768px) {
    .most-download-page h1, 
    .most-view-page h1, 
    .most-like-page h1 {
        float: left !important;
        font-size: 15px !important;
        margin-top: 10px !important;
        text-align: center !important;
        letter-spacing: 0.5px !important;
    }

    .title-image1 {
        margin: 10px 2px 6px 15px !important;
    }
}

@media only screen and (max-width: 480px) {
    .most-download-page h1, 
    .most-view-page h1, 
    .most-like-page h1 {
        font-size: 15px !important;
    }

    .title-image1 {
        margin: 8px 2px 4px 12px !important;
    }
}

@media only screen and (max-width: 360px) {
    .most-download-page h1, 
    .most-view-page h1, 
    .most-like-page h1 {
        font-size: 15px !important;
        margin-top: 5px !important;
        margin-bottom: 5px !important;
        letter-spacing: 0 !important;
    }

    .title-image1 {
        margin: 5px 2px 3px 10px !important;
    }
}

/* ============================================================ */
/* ========== 3. SIDEBAR - RESPONSIVE ========== */
/* ============================================================ */

@media only screen and (max-width: 835px) {
    #sidebar_left,
    #left_container {
        display: none !important;
    }
    
    .side_boxleft_title,
    .side_box_left,
    #sidebar_left ul,
    #sidebar_left li,
    #sidebar_left a {
        display: none !important;
    }
}

@media only screen and (min-width: 835px) and (max-width: 1000px) {
    #left_container {
        display: none !important;
    }
    
    #sidebar_left {
        display: none !important;
    }
    

    #mid_container .con {
        float: none !important;
        margin: 0 auto !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 15px !important;
    }

    
    #right_container { 
        width: 170px;
        float: right !important;
    }
    
    ul.wallpapers li.wall,
    .most-view-page ul.wallpapers li.wall,
    .most-like-page ul.wallpapers li.wall {
        width: 46%;
    }
    
    #right_container #sidebar_left,
    #right_container .side_boxleft_title,
    #right_container .side_box_left,
    #right_container ul {
        display: none !important;
    }
}

/* ============================================================ */
/* ========== 4. WALLPAPERS GRID - RESPONSIVE ========== */
/* ============================================================ */

@media only screen and (max-width: 1000px) {
    ul.wallpapers li.wall,
    .most-view-page ul.wallpapers li.wall,
    .most-like-page ul.wallpapers li.wall {
        width: 45% !important;
    }
}

@media only screen and (max-width: 835px) {
    ul.wallpapers li.wall,
    .most-view-page ul.wallpapers li.wall,
    .most-like-page ul.wallpapers li.wall {
        width: 46% !important;
    }
}

@media only screen and (max-width: 768px) {
    
    .most-view-page ul.wallpapers li.wall,
    .most-like-page ul.wallpapers li.wall {
        width: 100% !important;
    }
    
    #mid_container {
        width: 100% !important;
    }
    
    ul.wallpapers {
        width: auto !important;
    }
}

/* ============================================================ */
/* ========== 5. CONTAINER - RESPONSIVE ========== */
/* ============================================================ */

@media only screen and (max-width: 1000px) {
    .container {
        width: 820px;
        margin: 0 auto;
    }
}

@media only screen and (max-width: 835px) {
    .container {
        width: 640px;
    }
}

@media only screen and (max-width: 768px) {
    .container {
        width: 540px;
    }
}

@media only screen and (max-width: 580px) {
    .container {
        width: 420px;
    }
}

@media only screen and (max-width: 480px) {
    .container {
        width: 320px;
    }
}

/* ============================================================ */
/* ========== 6. IMAGES - RESPONSIVE ========== */
/* ============================================================ */

@media only screen and (max-width: 480px) {
    .logo,
    .logoo {
        width: 100% !important;
    }
    
    .fg {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    .logo img {
        max-width: 100% !important;
    }
    
    .g_ad {
        margin-left: -1px !important;
    }
    
    .thumbbg {
        margin-left: 0 !important;
    }
    
    .most-view-page .thumbbg,
    .most-like-page .thumbbg {
        margin-left: 0 !important;
    }
    
    .wallpaper-thumb {
        margin-left: 24px !important;
    }
    
    .img-page .thumbbg,
    .most-download-page .thumbbg,
    .most-view-page .thumbbg,
    .most-view .thumbbg,
    .most-like-page .thumbbg,
    .pic-page .thumbbg,
    .post-page .con {
        margin-left: 0px !important;
    }
}

/* ============================================================ */
/* ========== 7. ADS - RESPONSIVE ========== */
/* ============================================================ */

@media only screen and (max-width: 1000px) {
    .ads12 {
        display: none !important;
    }
}

@media only screen and (max-width: 835px) {
    .g_ad {
        width: 97% !important;
        height: auto !important;
    }
}

@media only screen and (max-width: 480px) {
    .g_ad {
        margin-left: -1px !important;
    }
}

/* ============================================================ */
/* ========== 8. FOOTER - RESPONSIVE ========== */
/* ============================================================ */

@media only screen and (max-width: 480px) {
    #footer {
        background-size: cover !important;
        min-height: 120px !important;
    }
    
    #footer a {
        font-size: 12px !important;
        color: #333 !important;
    }
    
    #footer p {
        font-size: 12px !important;
    }
}

/* ============================================================ */
/* ========== 9. SEARCH FORM - RESPONSIVE ========== */
/* ============================================================ */

@media only screen and (max-width: 768px) {
    .m5 form input[type=text] {
        width: 80% !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .m5 form button {
        width: auto !important;
        margin-left: 0 !important;
    }
}

@media only screen and (max-width: 480px) {
    .m5 form input[type=text] {
        width: 100% !important;
        margin-bottom: 5px !important;
    }
    
    .m5 form button {
        width: 100% !important;
    }
}

/* ============================================================ */
/* ========== 10. RIGHT CONTAINER - RESPONSIVE ========== */
/* ============================================================ */

@media only screen and (max-width: 1000px) {
    #right_container {
        width: 180px !important;
    }
}

@media only screen and (max-width: 580px) {
    #right_container {
        box-shadow: 0 0 3px silver !important;
        clear: both !important;
        float: none !important;
        margin: -5px auto !important;
    }
}

/* ============================================================ */
/* ========== 11. MENU - RESPONSIVE ========== */
/* ============================================================ */

@media only screen and (max-width: 835px) {
    #menu1 a {
        padding: 12px 15px !important;
    }
}

/* ============================================================ */
/* ========== 12. MISC - RESPONSIVE ========== */
/* ============================================================ */

@media only screen and (max-width: 1000px) {
    .paginate {
        clear: both !important;
    }
    
    ul.wallpapers {
        margin-left: 10px !important;
    }
}

@media only screen and (max-width: 835px) {
    .advertising,
    .content_background {
        width: 100% !important;
        height: auto !important;
    }
}

@media only screen and (max-width: 768px) {
    .main-logo {
        max-width: 290px !important;
    }
}

@media only screen and (max-width: 580px) {
    .m1 {
        max-width: 100% !important;
    }
    
    #mid_container {
        margin-bottom: 10px !important;
        width: 100% !important;
    }
}

@media only screen and (max-width: 480px) {
    .conaine {
        margin-right: 0 !important;
        margin-top: 5px !important;
    }
    
    .desc {
        margin-left: 7px !important;
        font-size: 13px !important;
    }
    
    .showOnMon {
        display: block !important;
    }
    
    .hide-mobile {
        display: none !important;
    }
    
    .most-download-page ul.wallpapers,
    .most-view-page ul.wallpapers,
    .most-like-page ul.wallpapers {
        margin-left: 0px !important;
        margin-top: 10px !important;
    }
}

/* ============================================================ */
/* ========== 13. 1024px FIX ========== */
/* ============================================================ */

@media only screen and (max-width: 1024px) {
    .img-page .con,
    .most-download-page .con,
    .most-view-page .con,
    .most-view .con,
    .most-like-page .con,
    .pic-page .con {
        width: 100% !important;
        margin-left: 0 !important;
        float: none !important;
    }
}

/* ============================================================ */
/* ========== 14. 836px TO 1000px - WALLPAPERS GRID FIX ========== */
/* ============================================================ */

@media only screen and (min-width: 836px) and (max-width: 1000px) {
    ul.wallpapers {
        float: none !important;
        clear: both !important;
    }
}

/* ============================================================ */
/* ========== 15. 580px TO 1000px - H1 FLOAT NONE ========== */
/* ============================================================ */

@media only screen and (min-width: 580px) and (max-width: 1000px) {
    #mid_container h1 {
        float: none !important;
        clear: both !important;
        display: block !important;
        
        text-align: center !important;
    }
}

/* ============================================================ */
/* ========== 16. 500px TO 768px - WALLPAPERS 2 COLUMNS ========== */
/* ============================================================ */

@media only screen and (min-width: 500px) and (max-width: 768px) {
    
    ul.wallpapers {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        float: none !important;
        clear: both !important;
    }
    
    ul.wallpapers li.wall {
        width: 46% !important;
        max-width: 46% !important;
        float: none !important;
        clear: none !important;
        display: inline-block !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================ */
/* ========== 17. MOBILE - 1 COLUMN (499px SE KAM) ========== */
/* ============================================================ */

@media only screen and (max-width: 499px) {
    
    ul.wallpapers li.wall {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
        margin: 0 auto 15px auto !important;
        display: block !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================ */
/* ========== 18. 580px SE KAM - WALLPAPERS CENTER ========== */
/* ============================================================ */

@media only screen and (max-width: 580px) {
    
    ul.wallpapers li.wall {
        float: none !important;
        clear: both !important;
        margin: 0 auto auto auto !important;
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 320px !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================ */
/* ========== 19. SMALL DEVICES - H1 FIX ========== */
/* ============================================================ */

@media only screen and (max-width: 579px) {
    #mid_container h1 {
        float: none !important;
        clear: both !important;
        display: block !important;
        text-align: center !important;
        margin-bottom: 7px;
        margin-left: auto !important;
    }
}

/* ============================================================ */
/* ========== 20. LOGO FIX - HOMEPAGE ========== */
/* ============================================================ */

/* TABLET + SMALL LAPTOP: 769px se 1000px */
@media only screen and (min-width: 769px) and (max-width: 1000px) {
    
    .m1 {
        text-align: center !important;
        width: 100% !important;
        padding: 5px 0 !important;
    }

    .logoo {
        float: none !important;
        text-align: center !important;
        width: 100% !important;
        padding: 5px 0 !important;
    }

    .logo {
        float: none !important;
        display: inline-block !important;
        padding: 8px 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    .logo img,
    .logo picture {
        display: block !important;
        margin: 0 auto !important;
        max-width: 290px !important;
        height: auto !important;
    }

    .fg {
        float: none !important;
        text-align: center !important;
        display: block !important;
        margin: 10px auto 0 !important;
        padding: 0 20px 15px 20px !important;
        font-size: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        line-height: 1.5 !important;
    }

    .m2 {
        margin-top: 0px !important;
    }
}

/* MOBILE: 768px और नीचे */
@media only screen and (max-width: 768px) {
    
    .m1 {
        text-align: center !important;
        width: 100% !important;
        padding: 5px 0 !important;
    }

    .logoo {
        float: none !important;
        text-align: center !important;
        width: 100% !important;
        padding: 5px 0 !important;
    }

    .logo {
        float: none !important;
        display: inline-block !important;
        padding: 5px 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    .logo img,
    .logo picture {
        display: block !important;
        margin: 0 auto !important;
        max-width: 290px !important;
        height: auto !important;
    }

    .fg {
        float: none !important;
        text-align: center !important;
        display: block !important;
        margin: 8px auto 0 !important;
        padding: 0 15px 10px 15px !important;
        font-size: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        line-height: 1.5 !important;
    }

    .m2 {
        margin-top: 0px !important;
    }
}

/* छोटे मोबाइल: 480px और नीचे */
@media only screen and (max-width: 480px) {
    
    .logo img,
    .logo picture {
        max-width: 290px !important;
    }

    .fg {
        font-size: 13px !important;
        padding: 0 10px 8px 10px !important;
    }

    .m2 {
        margin-top: 0px !important;
    }
}

/* बहुत छोटे मोबाइल: 360px और नीचे */
@media only screen and (max-width: 360px) {
    
    .logo img,
    .logo picture {
        max-width: 250px !important;
    }

    .fg {
        font-size: 12px !important;
        padding: 0 8px 6px 8px !important;
    }

    .m2 {
        margin-top: 0px !important;
    }
}

/* Desktop: 1001px and above */
@media only screen and (min-width: 1001px) {
    .pic-page .con {
        margin-left: 0 !important;
    }
}

@media only screen and (max-width: 1000px) {
    .pic-page .title-image1 {
        display: none !important;
    }
	.wallpaper-info {
        margin: 0 !important;
        clear: both !important;
    }
}

/* ============================================================ */
/* ========== .WALLPAPER-INFO - MARGIN 0 ON TABLET & BELOW ========== */
/* ============================================================ */

/* ============================================================ */
/* ========== 835px TO 1000px - CONTENT_BACKGROUND FLOAT NONE ========== */
/* ============================================================ */
/* ============================================================ */
/* ========== 835px TO 1000px - THUMBNAILS CENTER ========== */
/* ============================================================ */

@media only screen and (min-width: 835px) and (max-width: 1000px) {
    
    /* ===== CONTENT BACKGROUND - FLOAT NONE ===== */
    .content_background {
        float: none !important;
        clear: both !important;
        width: 100% !important;
    }
    
    /* ===== MID CONTAINER - FULL WIDTH ===== */
    #mid_container {
        width: 100% !important;
        float: none !important;
        clear: both !important;
    }
    
    /* ===== CON - CENTER ===== */
    #mid_container .con {
        float: none !important;
        margin: 0 auto !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 15px !important;
    }
    
    /* ===== WALLPAPERS GRID - CENTER ===== */
    #mid_container .con ul.wallpapers {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        float: none !important;
        clear: both !important;
        
        
        max-width: 100% !important;
    }
    
    /* ===== WALLPAPER ITEMS - 2 COLUMNS ===== */
    #mid_container .con ul.wallpapers li.wall {
        float: none !important;
        clear: none !important;
        text-align: center !important;
        margin: 0 auto 0px auto !important;
        width: 45% !important;
        max-width: 45% !important;
        display: inline-block !important;
        box-sizing: border-box !important;
    }
    
    /* ===== THUMBBG - OVERRIDE FLOAT:LEFT ===== */
    #mid_container .con .thumbbg {
        float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
    display: inline-block !important;
    }
    
    /* ===== THUMB - CENTER ===== */
    #mid_container .con .thumb {
        text-align: center !important;
    }
    
    /* ===== THUMB P - CENTER ===== */
    #mid_container .con .thumb p {
        text-align: center !important;
        font-size: 13px !important;
    }
    
    /* ===== THUMB IMG - CENTER ===== */
    #mid_container .con .thumb_img {
        display: block !important;
        margin: 0 auto !important;
        width: 270px !important;
        height: 169px !important;
        border-radius: 0 !important;
        float: none !important;
    }
    
    /* ===== HEADING - CENTER ===== */
    #mid_container .con h1 {
        float: none !important;
        clear: both !important;
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* ===== TITLE ICON - HIDE ===== */
    #mid_container .con .title-image1 {
        display: none !important;
    }
    
    /* ===== PAGINATION - CENTER ===== */
    #mid_container .con .paginate {
        text-align: center !important;
        float: none !important;
        clear: both !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        margin: 15px 0 !important;
        padding: 8px 0 !important;
        width: 100% !important;
    }
    
    #mid_container .con .paginate a,
    #mid_container .con .paginate span {
        margin: 0 3px !important;
        padding: 5px 10px !important;
        display: inline-block !important;
    }
    
    /* ===== DESCRIPTION - CENTER ===== */
    #mid_container .con .wallpaper-info {
        text-align: center !important;
        margin: 0 !important;
        float: none !important;
        clear: both !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 15px !important;
    }
    
    #mid_container .con .wallpaper-info p {
        text-align: center !important;
    }
}

/* ============================================================ */
/* ========== .WALLPAPER-INFO - DESKTOP & MOBILE MARGIN ========== */
/* ============================================================ */

/* Desktop: 1001px and above */
@media only screen and (min-width: 1001px) {
    .wallpaper-info {
        margin: 0px 10px 10px 10px !important;
        clear: both !important;
    }
}

/* Mobile & Tablet: 1000px and below */
@media only screen and (max-width: 1000px) {
    .wallpaper-info {
        margin: 0 15px !important;
        clear: both !important;
    }
}
@media only screen and (min-width: 1001px) {
    .content_background {
        float: none !important;
        clear: both !important;
        width: 100% !important;
    }
}