/* ==========================================
   CROCHETCRAZE
   RESPONSIVE.CSS
========================================== */


/* ==========================================
LAPTOPS (1200px)
========================================== */

@media(max-width:1200px){

    .container{

        width:92%;

    }

}



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

@media(max-width:992px){

    h1{

        font-size:3.2rem;

    }

    h2{

        font-size:2.5rem;

    }

    .featured-card{

        grid-template-columns:1fr;

    }

    .collection-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .best-seller-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .features-grid{

        grid-template-columns:repeat(2,1fr);

    }

    .contact-grid{

        grid-template-columns:1fr;

    }

    .footer-content{

        grid-template-columns:1fr 1fr;

    }

}



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

@media(max-width:768px){

    section{

        padding:70px 0;

    }

    .navbar{

        position:relative;

    }

    .nav-links{

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:#FFF8F3;

        flex-direction:column;

        text-align:center;

        padding:30px 0;

        display:none;

        box-shadow:0 10px 20px rgba(0,0,0,.08);

    }

    .nav-links.active{

        display:flex;

    }

    .menu-btn{

        display:block;

    }

    .instagram-btn{

        display:none;

    }

    h1{

        font-size:2.6rem;

    }

    h2{

        font-size:2.2rem;

    }

    .hero{

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

    }

    .collection-grid{

        grid-template-columns:1fr;

    }

    .best-seller-grid{

        grid-template-columns:1fr;

    }

    .features-grid{

        grid-template-columns:1fr;

    }

    .footer-content{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-brand img{

        margin:auto auto 20px;

    }

    .footer-bottom{

        flex-direction:column;

        text-align:center;

    }

}



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

@media(max-width:576px){

    h1{

        font-size:2.2rem;

    }

    h2{

        font-size:1.9rem;

    }

    h3{

        font-size:1.4rem;

    }

    p{

        font-size:.95rem;

    }

    .hero{

        height:90vh;

    }

    .hero-content{

        width:92%;

    }

    .hero-buttons{

        flex-direction:column;

        gap:15px;

    }

    .primary-btn,

    .secondary-btn{

        width:100%;

        text-align:center;

    }

    .featured-buttons{

        flex-direction:column;

    }

    .featured-buttons a{

        width:100%;

        text-align:center;

    }

    .feature-box{

        padding:30px 20px;

    }

    .contact-card{

        padding:30px 20px;

    }

}



/* ==========================================
VERY SMALL DEVICES
========================================== */

@media(max-width:400px){

    .logo img{

        width:58px;

    }

    .menu-btn{

        font-size:1.7rem;

    }

    h1{

        font-size:2rem;

    }

    h2{

        font-size:1.7rem;

    }

    .section-title{

        margin-bottom:45px;

    }

    .collection-card img{

        height:260px;

    }

    .product-card img{

        height:240px;

    }

}