/* ==========================================
   RESPONSIVE
   Levy Martin
========================================== */


/* ==========================================
   1400px
========================================== */

@media (max-width:1400px){

    .hero-content h1{
        max-width:700px;
    }

    .featured{
        gap:70px;
    }

}


/* ==========================================
   1200px
========================================== */

@media (max-width:1200px){

    section{
        padding:100px 0;
    }

    .product-grid{
        grid-template-columns:repeat(2,1fr);
        gap:30px;
    }

    .journal-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .featured{
        gap:50px;
    }

    .footer-top{
        grid-template-columns:1fr 1fr;
        gap:50px;
    }

}


/* ==========================================
   992px
========================================== */

@media (max-width:992px){

    .nav-links,
    .nav-icons{
        display:none;
    }

    .menu-btn{
        display:flex;
    }

 

    .featured{

        grid-template-columns:1fr;

    }

    .featured .image{

        order:1;

    }

    .featured .content{

        order:2;

        text-align:center;

    }

    .newsletter-box{

        flex-direction:column;

        text-align:center;

    }

    .newsletter-form{

        min-width:100%;

        width:100%;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}


/* ==========================================
   768px
========================================== */

@media (max-width:768px){

    section{
        padding:80px 0;
    }

    .hero{
        height:90vh;
    }

    .about-hero-content{
        align-items:flex-start
    }

    

    .hero-content{
        align-items:center;
        text-align:center;
    }

    .about-hero-content h1{
        max-width:100%;
    }

    .hero-content h1{
        max-width:100%;
    }

    .product-grid{

        grid-template-columns:1fr;

    }

    .journal-grid{

        grid-template-columns:1fr;

    }

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;

    }

    .newsletter form{

        flex-direction:column;

    }

    .newsletter button{

        height:58px;

    }

    .footer-top{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-brand{

        display:flex;

        flex-direction:column;

        align-items:center;

    }

    .footer-social{

        justify-content:center;

    }

}


/* ==========================================
   576px
========================================== */

@media (max-width:576px){

    .navbar{

        height:75px;

    }

    .logo img{

        height:58px;
        width:auto;

    }

    h1{

        font-size:3rem;

    }

    h2{

        font-size:2.2rem;

    }

    .btn{

        width:100%;

        justify-content:center;

    }

    .featured{

        width:90%;

    }

    .section-heading{

        margin-bottom:45px;

    }

}


/* ==========================================
   480px
========================================== */

@media (max-width:480px){

    section{

        padding:70px 0;

    }

    .container{

        width:92%;

    }

    .hero{

        height:85vh;

    }

    .hero-content .subtitle{

        font-size:.75rem;

        letter-spacing:3px;

    }

    h1{

        font-size:2.4rem;

    }

    h2{

        font-size:2rem;

    }

    p{

        font-size:.95rem;

    }

    .about-hero-content .about-hero-subtitle{

        font-size:.75rem;

        letter-spacing:3px;

    }

    h1{

        font-size:2.4rem;

    }

    h2{

        font-size:2rem;

    }

    p{

        font-size:.95rem;

    }

    .newsletter-form{

        flex-direction:column;

    }

}


/* ==========================================
   360px
========================================== */

@media (max-width:360px){

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.7rem;

    }

    .btn{

        padding:16px 22px;

        font-size:.85rem;

    }

    .navbar{

        width:94%;

    }

}

@media (pointer: coarse){

    .cursor{

        display:none;

    }

}