/* ==========================================
   MOBILE.CSS
   Responsive Styles
========================================== */


/* ==========================================
   TABLETS (992px)
========================================== */

@media (max-width:992px){

    .container{

        width:min(92%,1200px);

    }

    .hero-grid,

    .featured-card,

    .featured-tool-card,

    .newsletter-container{

        gap:40px;

    }

}


/* ==========================================
   TABLETS & MOBILE (768px)
========================================== */

@media (max-width:768px){

    /* ========= GLOBAL ========= */

    section{

        padding:70px 0;

    }

    .section-header{

        margin-bottom:45px;

    }

    .section-header h2{

        font-size:2rem;

    }

    .section-header p{

        font-size:1rem;

    }

    /* ========= HERO ========= */

    .hero{

        padding:70px 0;

    }

    .hero-grid{

        grid-template-columns:1fr;

        gap:40px;

        text-align:center;

    }

    .hero-image{

        order:-1;

    }

    .hero-content h1{

        font-size:2.4rem;

    }

    .hero-content p{

        max-width:100%;

    }

    .hero-buttons{

        justify-content:center;

    }

    /* ========= FEATURED ARTICLE ========= */

    .featured-card{

        grid-template-columns:1fr;

    }

    .featured-content{

        padding:30px;

    }

    .featured-content h3{

        font-size:1.8rem;

    }

    /* ========= LATEST ARTICLES ========= */

    .article-grid{

        grid-template-columns:1fr;

    }

    /* ========= FEATURED TOOL ========= */

    .featured-tool-card{

        grid-template-columns:1fr;

    }

    .tool-content{

        padding:30px;

    }

    .tool-content h3{

        font-size:1.8rem;

    }

    .tool-buttons{

        justify-content:center;

    }

    /* ========= FREE BUDGET TOOLS ========= */

    .tool-grid{

        grid-template-columns:1fr;

    }

    /* ========= PRODUCT REVIEWS ========= */

    .review-grid{

        grid-template-columns:1fr;

    }

    /* ========= DIGITAL PRODUCTS ========= */

    .product-grid{

        grid-template-columns:1fr;

    }

    /* ========= FINANCIAL WISDOM ========= */

    .wisdom-card{

        padding:35px;

    }

    .wisdom-card blockquote{

        font-size:1.6rem;

    }

    /* ========= NEWSLETTER ========= */

    .newsletter-container{

        grid-template-columns:1fr;

    }

    .newsletter-benefits,

    .newsletter-form{

        padding:30px;

    }

    /* ========= FOOTER ========= */

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

        gap:35px;

    }

}


/* ==========================================
   MOBILE PHONES (576px)
========================================== */

@media (max-width:576px){

    section{

        padding:60px 0;

    }

    .hero-content h1{

        font-size:2rem;

    }

    .section-header h2{

        font-size:1.8rem;

    }

    .featured-content,

    .tool-content,

    .review-content,

    .product-content,

    .newsletter-benefits,

    .newsletter-form,

    .wisdom-card{

        padding:25px;

    }

    .featured-content h3,

    .tool-content h3{

        font-size:1.6rem;

    }

    .article-content h3,

    .review-content h3,

    .product-content h3,

    .tool-card h3{

        font-size:1.3rem;

    }

    .hero-buttons,

    .tool-buttons{

        flex-direction:column;

        align-items:center;

        gap:15px;

    }

    .btn-primary,

    .btn-secondary,

    .tool-button,

    .footer-button{

        width:100%;

        max-width:320px;

        text-align:center;

    }

    .article-card img,

    .review-card img,

    .product-card img{

        height:200px;

    }

}


/* ==========================================
   SMALL PHONES (400px)
========================================== */

@media (max-width:400px){

    .hero-content h1{

        font-size:1.8rem;

    }

    .section-header h2{

        font-size:1.6rem;

    }

    .hero-category,

    .section-tag,

    .tool-label,

    .verse-reference{

        font-size:.75rem;

        padding:6px 14px;

    }

    .featured-content,

    .tool-content,

    .article-content,

    .review-content,

    .product-content,

    .newsletter-benefits,

    .newsletter-form,

    .wisdom-card{

        padding:20px;

    }

    .wisdom-card blockquote{

        font-size:1.35rem;

    }

    .footer-bottom p{

        font-size:.85rem;

    }

}
@media (max-width:768px){

.logo img{

    height:42px;

}

}