/* Extra Large Desktop: 1400px and above */
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

/* Normal desktop :1200px - 1399px */
@media (min-width: 1200px) and (max-width: 1399px) {
    .container { max-width: 1140px; }
    body { font-size: 15px; }
}

/* Large Tablet/Small Desktop: 992px - 1199px */
@media (min-width: 992px) and (max-width: 1199px) {
    .container { max-width: 960px; }
    body { font-size: 15px; }
    .trending-area .trending-main .trending-bottom .col-lg-4 { margin-bottom: 15px; }
    .trending-area .trending-main .trand-right-single { margin-bottom: 15px; }
}

/* Tablet: 768px - 991px */
@media (min-width: 768px) and (max-width: 991px) {
    .container { max-width: 720px; }
    body { font-size: 14px; }
    
    .header-top { padding: 8px 0; }
    .header-top .header-info-left ul li { margin-right: 30px; font-size: 11px; }
    .header-mid .logo img { width: 80%; }
    .header-mid .header-banner { display: none; }
    .main-header .main-menu ul li a { padding: 15px 10px; font-size: 12px; }
    
    .trending-top .trend-top-cap h2 { font-size: 22px; }
    .trending-bottom .col-lg-4 { margin-bottom: 20px; }
    .trending-bottom .col-lg-4:last-child { margin-bottom: 0; }
    .trand-right-single { margin-bottom: 15px; }
    
    .whats-news-area .col-lg-8 { margin-bottom: 30px; }
    .weekly-news-area .weekly-wrapper .weekly-single { margin-left: 8px; margin-right: 8px; }
    .single-what-news { margin-bottom: 50px; }
}

/* Medium Mobile: 480px - 767px */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .container { width: 100%; max-width: 540px; padding: 0 15px; }
    body { font-size: 14px; }
    
    .header-area { box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    .header-top { display: none !important; }
    .header-mid { display: none !important; }
    .header-bottom { border-top: 0; }
    .sticky-logo { display: block !important; height: auto; padding: 10px 0; }
    .header-right-btn { display: none !important; }
    .main-menu { display: none !important; }
    .slicknav_menu { display: block; }
    
    .trending-tittle { padding-top: 15px; padding-bottom: 15px; }
    .trending-tittle strong { min-width: auto; padding: 8px 15px; font-size: 12px; }
    .trending-area .trending-main .trending-top .trend-top-img .trend-top-cap h2 { font-size: 18px; }
    
    .trending-bottom .col-lg-4 { 
        width: 100%; 
        margin-bottom: 15px; 
    }
    .trending-bottom .col-lg-4:last-child { margin-bottom: 0; }
    
    .trending-area .trending-main .col-lg-8 { margin-bottom: 20px; }
    .trending-area .trending-main .col-lg-4 { 
        width: 100%; 
    }
    .trand-right-single { 
        margin-bottom: 12px; 
        padding-bottom: 12px; 
        flex-direction: column;
    }
    .trand-right-img { margin-bottom: 10px; }
    .trand-right-img img { height: auto; }
    
    .whats-news-area .col-lg-8 { margin-bottom: 30px; }
    .whats-news-area .col-lg-4 { width: 100%; }
    .single-what-news { margin-bottom: 30px; }
    .single-what-news .what-cap { bottom: -55px; }
    
    .weekly-news-area .weekly-single { margin-left: 5px; margin-right: 5px; }
    .weekly-news-area .weekly-single .weekly-caption h4 a { font-size: 14px; }
    
    .nav-item.nav-link { padding: 8px 12px !important; font-size: 12px; }
    
    .footer-area .col-xl-5, 
    .footer-area .col-xl-3 { margin-bottom: 20px; }
}

/* Small Mobile: 320px - 479px */
@media (max-width: 479px) {
    .container { width: 100%; max-width: 100%; padding: 0 10px; }
    body { font-size: 13px; }
    
    .header-area { box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
    .header-top { display: none !important; }
    .header-mid { display: none !important; }
    .header-bottom { border-top: 0; }
    .sticky-logo { display: block !important; padding: 8px 0; }
    .sticky-logo h3 { font-size: 16px; }
    .header-right-btn { display: none !important; }
    .main-menu { display: none !important; }
    .slicknav_menu { display: block; }
    
    h1, h2, h3, h4, h5, h6 { font-size: 16px; }
    
    .trending-tittle { padding-top: 12px; padding-bottom: 12px; }
    .trending-tittle strong { min-width: auto; padding: 6px 12px; font-size: 11px; }
    .trending-tittle .ticker { width: 100%; }
    
    .trending-top { margin-bottom: 15px; }
    .trending-top .trend-top-img .trend-top-cap { bottom: -2px; left: 5px; }
    .trending-top .trend-top-cap h2 { font-size: 14px; }
    
    .trending-bottom { margin-bottom: 15px; }
    .trending-bottom .col-lg-4 { 
        width: 100%; 
        margin-bottom: 12px; 
    }
    
    .trending-area .trending-main .col-lg-8 { margin-bottom: 15px; }
    .trending-area .trending-main .col-lg-4 { width: 100%; }
    
    .trand-right-single { 
        margin-bottom: 10px; 
        padding-bottom: 10px; 
        flex-direction: column;
    }
    .trand-right-img { 
        margin-bottom: 8px; 
        margin-right: 0;
    }
    .trand-right-img img { height: 150px; object-fit: cover; }
    .trand-right-cap h4 { font-size: 14px; }
    
    .whats-news-area { padding-top: 30px; padding-bottom: 15px; }
    .whats-news-area .col-lg-8 { margin-bottom: 20px; }
    .whats-news-area .col-lg-4 { width: 100%; }
    
    .section-tittle h3 { font-size: 18px; }
    
    .single-what-news { margin-bottom: 20px; }
    .single-what-news .what-cap { 
        bottom: -45px; 
        width: 90%;
        padding: 15px 10px 8px 0;
    }
    .single-what-news .what-cap h4 { font-size: 14px; }
    .single-what-news .what-cap span { font-size: 10px; }
    
    .weekly-news-area { padding-top: 30px; }
    .weekly-wrapper { padding-bottom: 30px; }
    .weekly-single { margin-left: 3px; margin-right: 3px; }
    .weekly-single .weekly-caption { padding: 15px; }
    .weekly-single .weekly-caption h4 a { font-size: 13px; }
    
    .nav-tabs { flex-direction: column; }
    .nav-item { display: block; }
    .nav-item.nav-link { padding: 10px 15px !important; font-size: 12px; }
    
    .follow-us { justify-content: flex-start; }
    .follow-count span { font-size: 14px; }
    .follow-count p { font-size: 11px; }
    
    .footer-area .col-xl-5, 
    .footer-area .col-xl-3 { margin-bottom: 15px; width: 100%; }
    .footer-area .footer-tittle h4 { font-size: 18px; }
    .footer-area .footer-tittle ul li { margin-bottom: 10px; font-size: 13px; }
    
    /* Image responsiveness */
    img { max-width: 100%; height: auto; display: block; }
}