/* ------------------------------------
   RESPONSIVE DESIGN FOR MOBILE & TABLETS
   Max-width: 768px
------------------------------------ */

@media (max-width: 768px) {

    /* Global */
    .container {
        width: 94%;
    }

    /* Header */
    header {
        flex-direction: column;
        gap: 14px;
        text-align: center;
    }

    nav a {
        margin: 0 10px;
        display: inline-block;
    }

    /* HERO SECTION */
    .hero {
        padding: 25px;
        flex-direction: column;
        text-align: center;
    }

    .hero h1 {
        font-size: 26px;
    }

    .hero button {
        width: 100%;
        margin-top: 8px;
    }

    .tip-box {
        width: 100%;
    }


    /* CATEGORY BOXES */
    .categories {
        grid-template-columns: 1fr;
    }

    /* POSTS GRID */
    .posts-grid {
        grid-template-columns: 1fr;
    }

    .post img {
        height: 200px;
    }

    /* FEATURED SECTIONS */
    .featured {
        flex-direction: column;
    }

    .featured-box {
        width: 100%;
    }

    /* NEWSLETTER BOX */
    .newsletter input {
        width: 100%;
        margin-bottom: 12px;
    }

    .newsletter button {
        width: 100%;
    }

    /* Blog Post Page */
    .post-box {
        padding: 20px;
    }

    .post-title {
        font-size: 26px;
        line-height: 1.3;
    }

    .hero-img {
        height: auto;
    }

    /* Footer */
    footer {
        font-size: 14px;
    }
}



/* ------------------------------------
   VERY SMALL DEVICES
   Max-width: 480px
------------------------------------ */

@media (max-width: 480px) {

    /* Hero Title */
    .hero h1 {
        font-size: 22px;
    }

    nav a {
        font-size: 14px;
    }

    .post-title {
        font-size: 22px;
    }

    .tip-box {
        font-size: 15px;
    }

    .cat h3 {
        font-size: 18px;
    }

    .f-card {
        font-size: 15px;
    }
}