@media only screen and (min-width: 360px) and (max-width: 640px) {

    .header {
        display: none;
    }

    /* Base styles for header */
    .header1 {
        display: flex;
        flex-direction: column;
    }

    .top-bar1 {
        display: flex;
        justify-content: space-between;
        padding: 10px;
        background-color: #f1f1f1;
    }

    .top-bar-left1,
    .top-bar-right1 {
        display: flex;
        align-items: center;
    }

    .top-bar-right1 a {
        margin-left: 10px;
    }

    .navbar1 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        background-color: #333;
        color: #fff;
    }

    .navbar1 .logo1 a {
        color: #fff;
        text-decoration: none;
        font-size: 24px;
    }

    .navbar1 .nav-menu1 {
        display: flex;
        justify-content: space-around;
        flex: 1;
    }

    .navbar1 .nav-menu1 a {
        color: #fff;
        text-decoration: none;
        padding: 10px;
    }

    .navbar1 .nav-menu1 i {
        margin-left: 5px;
    }

    /* Mobile styles */
    .nav-toggle1 {
        display: none;
    }

    .hamburger-menu1 {
        background: none;
        border: none;
        color: #fff;
        font-size: 24px;
        cursor: pointer;
    }

    /* Mobile navigation menu */
    .nav-menu1.active {
        display: flex;
    }

    .nav-toggle1 {
        display: block;
    }

    .nav-right1 {
        display: none;
    }

    /* -----------------------container------------------ */

    .main-post1 {
        margin-right: 0;
        width: 100%;
    }

    .main-post1 h1:hover {
        color: white;
        transform: none;
    }

    .main-post1 img {
        height: 250px;
    }

    .content-overlay {
        padding: 15px;
    }

    .category-tag {
        font-size: 12px;
        padding: 4px 8px;
    }

    .main-post1 h1 {
        font-size: 18px;
        margin: 5px 0;
    }

    .post-meta1 {
        font-size: 12px;
    }

    /* ------------sidebar------------- */

    .sidebar-item {
        padding: 10px;
        margin-bottom: 15px;
    }

    .sidebar-item h2 {
        font-size: 16px;
        margin-bottom: 3px;
    }

    .post-meta span i {
        margin-left: 4px;
        transform: scale(1.1);
    }

    .sidebar-item:hover {
        background-color: #555050;
        transform: none;
    }

    /* ----------grid container----------- */

    .grid-container {
        flex-direction: column;
        align-items: center;
    }

    .grid-item {
        flex: none;
        width: 100%;
        margin-right: 0;
        margin-bottom: 15px;
    }

    /* Extra small screens */

    .grid-item h3 {
        font-size: 14px;
    }

    .grid-item {
        padding: 10px;
    }

    /* ---------------top news--------------- */

    .top-news-section {
        padding: 15px;
    }

    .top-news-section h2 {
        font-size: 24px;
    }

    .news-slider {
        padding: 10px 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .news-card {
        width: calc(50% - 10px);
        margin-bottom: 15px;
        margin-right: 0;
        box-sizing: border-box;
    }

    .news-card h3 {
        font-size: 16px;
        height: auto;
    }

    .category-tag {
        font-size: 12px;
        padding: 4px 8px;
    }

    .news-date {
        font-size: 10px;
    }

    .read-more {
        font-size: 12px;
    }

    .slider-controls button {
        padding: 8px 16px;
        font-size: 14px;
    }

    .slider-controls button:hover {
        display: none;
    }

    /* Extra small screens */

    .top-news-section {
        padding: 10px;
    }

    .top-news-section h2 {
        font-size: 20px;
    }

    .news-slider {
        padding: 10px 0;
        flex-direction: column;
    }

    .news-card {
        width: 100%;
        margin-bottom: 15px;
    }

    .news-card h3 {
        font-size: 14px;
        height: auto;
    }

    .category-tag {
        font-size: 10px;
        padding: 3px 6px;
    }

    .news-date {
        font-size: 8px;
    }

    .read-more {
        font-size: 10px;
    }

    .slider-controls button {
        display: none;
    }

    /* --------------------whatsnew---- */

    .container {
        padding: 15px;
    }

    .main-section {
        margin-right: 0;
        flex-basis: 100%;
    }

    .main-section h2 {
        font-size: 20px;
    }

    .main-post {
        margin-bottom: 20px;
    }

    .main-post video {
        opacity: 0.7;
    }

    .post-overlay {
        bottom: 15px;
        left: 15px;
    }

    .category-tag {
        font-size: 12px;
        padding: 4px 8px;
    }

    .main-post h1 {
        font-size: 20px;
    }

    .post-meta {
        font-size: 12px;
    }

    /* Extra small screens */

    .container {
        padding: 10px;
    }

    .main-section h2 {
        font-size: 18px;
    }

    .main-post {
        margin-bottom: 15px;
    }

    .main-post video {
        opacity: 0.8;
    }

    .post-overlay {
        bottom: 10px;
        left: 10px;
    }

    .category-tag {
        font-size: 10px;
        padding: 3px 6px;
    }

    .main-post h1 {
        font-size: 18px;
    }

    .post-meta {
        font-size: 10px;
    }

    /* ---------------------------------------secondary----------- */

    .secondary-posts {
        gap: 15px;
    }

    .secondary-post {
        flex: 1 1 calc(50% - 15px);
    }

    .secondary-post h3 {
        font-size: 14px;
    }

    /* Extra small screens */

    .secondary-posts {
        gap: 10px;
    }

    .secondary-post {
        flex: 1 1 100%;
        padding: 10px;
    }

    .secondary-post h3 {
        font-size: 12px;
    }

    /* -----------side bar till ad section */

    .sidebar {
        flex: 1 1 100%;
        margin-bottom: 20px;
    }

    .get-in-touch h2,
    .dont-miss h2 {
        font-size: 16px;
    }

    .social-stats {
        flex-direction: column;
    }

    .social-stats .stat {
        width: 100%;
        margin-bottom: 10px;
    }

    .miss-item {
        flex-direction: column;
        align-items: flex-start;
        padding: 8px;
    }

    .miss-item img {
        width: 50px;
        height: 50px;
        margin-bottom: 8px;
    }

    .miss-item h3 {
        font-size: 12px;
    }

    .view-more a {
        font-size: 12px;
    }

    .ad-overlay {
        bottom: 10px;
        left: 10px;
    }

    .ad-overlay h3 {
        font-size: 18px;
    }

    .ad-overlay span {
        font-size: 14px;
    }

    .ad-btn {
        padding: 8px 16px;
        font-size: 14px;
    }

    /* Extra small screens */

    .sidebar {
        display: none;
    }

    .get-in-touch h2,
    .dont-miss h2 {
        font-size: 14px;
        justify-content: center;
    }

    .social-stats {
        gap: 10px;
    }

    .miss-item {
        padding: 6px;
    }

    .miss-item img {
        width: 40px;
        height: 40px;
    }

    .miss-item h3 {
        font-size: 10px;
    }

    .view-more a {
        font-size: 10px;
    }

    .ad-overlay h3 {
        font-size: 16px;
    }

    .ad-overlay span {
        font-size: 12px;
    }

    .ad-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    /* -------------------Ad section to footer--- */

    .advertisement {
        flex-direction: column;
    }

    .advertisement img {
        width: 100%;
        height: auto;
        margin-bottom: 10px;
    }

    .add1-content1 {
        padding: 15px; 
        flex-direction: column; 
    }

    .add1-post-container {
        flex-direction: column; 
        gap: 15px; 
    }

    .add1-post {
        width: 100%; 
        max-width: 300px; 
        margin: 0 auto; 
    }

    /* .add1-post:hover {
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4); 
    } */

    .add1-post-info {
        padding: 8px; 
    }

    .add1-category {
        font-size: 12px; 
        padding: 4px;
    }

    .add1-post-meta {
        font-size: 10px; 
        margin-top: 4px; 
    }
/* ---------------
 */
    .footer {
        padding: 10px;
        text-align: center;
    }

    .footer .footer-content {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .footer .footer-content a {
        margin: 5px 0;
        font-size: 14px;
    }

    /* Extra small screens */

    .footer {
        padding: 8px;
    }

    .footer .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .footer .footer-content a {
        font-size: 12px;
    }
}