/* ============================================
                LARGE LAPTOPS
============================================ */

@media(max-width:1400px){

.hero h1{

font-size:64px;

}

.hero-wrapper{

gap:50px;

}

.container{

width:94%;

}

}

/* ============================================
                TABLETS
============================================ */

@media(max-width:1100px){

.hero-wrapper{

grid-template-columns:1fr;

text-align:center;

}

.hero-left{

order:2;

}

.hero-right{

order:1;

display:flex;

justify-content:center;

}

.hero-right img{

max-width:650px;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

justify-content:center;

}

.store-showcase .container{

grid-template-columns:1fr;

gap:50px;

}

.stats-grid{

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

}

.product-grid{

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

}

.contact-grid{

grid-template-columns:1fr;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

gap:50px;

}

.footer-social{

justify-content:center;

}

}

/* ============================================
                MOBILE
============================================ */

@media(max-width:800px){

.nav-links{

display:none;

}

.menu-btn{

display:block;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:48px;

}

.hero-description{

font-size:18px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.primary-btn,

.secondary-btn{

width:100%;

max-width:320px;

text-align:center;

}

.product-grid{

grid-template-columns:1fr;

}

.category-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr;

}

.stats-grid{

grid-template-columns:1fr;

}

.review-card{

flex-direction:column;

text-align:center;

}

.banner-content{

flex-direction:column;

text-align:center;

}

.store-buttons{

justify-content:center;

}

}

/* ============================================
            SMALL PHONES
============================================ */

@media(max-width:500px){

.hero h1{

font-size:36px;

}

.hero-description{

font-size:16px;

}

section{

padding:80px 0;

}

section h2{

font-size:34px;

}

.category-card{

padding:35px 20px;

}

.product-card img{

height:220px;

}

.store-image img{

border-radius:18px;

}

.footer-grid h2{

font-size:28px;

}

.floating-buttons{

right:15px;

bottom:15px;

}

.floating-buttons a{

width:52px;

height:52px;

font-size:22px;

}

}