/*
====================================
KARTEL62 Apple Store
Responsive CSS
====================================
*/


/*
========================
TABLET
( max-width 1024px )
========================
*/


@media(max-width:1024px){


.header{

    padding:25px 5%;

}



.header nav{

    gap:20px;

}



.hero{

    padding:120px 5% 70px;

}



.hero-text h1{

    font-size:55px;

}



.feature{

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

    padding:60px 5%;

}



.product-grid{

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

}



.products{

    padding:80px 5%;

}



}




/*
========================
MOBILE
( max-width 768px )
========================
*/


@media(max-width:768px){



body{

    overflow-x:hidden;

}



/*
HEADER
*/


.header{

    position:relative;

    background:#000;

    flex-direction:column;

    gap:20px;

    padding:20px;

}



.logo{

    text-align:center;

}



.header nav{

    width:100%;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

}



.header nav a{

    font-size:14px;

}



.btn-header{

    display:none;

}





/*
HERO
*/


.hero{

    flex-direction:column;

    text-align:center;

    padding:60px 20px;

}



.hero-text{

    width:100%;

}



.hero-text h1{

    font-size:42px;

    letter-spacing:-1px;

}



.hero-text p{

    font-size:16px;

}



.hero-button{

    justify-content:center;

    flex-direction:column;

    align-items:center;

}



.hero-button a{

    width:220px;

}



.hero-image{

    width:90%;

    margin-top:40px;

}





/*
FEATURE
*/


.feature{

    grid-template-columns:1fr;

    padding:50px 20px;

}



.feature-box{

    padding:30px;

}




/*
PRODUCT
*/


.products{

    padding:60px 20px;

}



.section-title h2{

    font-size:35px;

}



.product-grid{

    grid-template-columns:1fr;

}



.card{

    padding:25px;

}



.card img{

    height:230px;

}





/*
ABOUT
*/


.about-home{

    padding:60px 20px;

}



.about-home h2{

    font-size:35px;

}





/*
REVIEW
*/


.review{

    padding:60px 20px;

}



.review h2{

    font-size:35px;

}




.review-box{

    padding:25px;

}





/*
FAQ
*/


.faq{

    padding:60px 20px;

}



.faq h2{

    font-size:35px;

}





/*
FOOTER
*/


footer{

    padding:40px 20px;

}


}




/*
========================
SMALL PHONE
(max-width 480px)
========================
*/


@media(max-width:480px){



.hero-text h1{

    font-size:35px;

}



.hero-text p{

    font-size:15px;

}



.logo{

    font-size:22px;

}



.header nav{

    gap:10px;

}



.header nav a{

    font-size:13px;

}



.card h3{

    font-size:22px;

}



.card strong{

    font-size:20px;

}



}

@media(max-width:768px){


.detail-product{

grid-template-columns:1fr;

padding:80px 20px;

text-align:center;

}


.detail-info h1{

font-size:38px;

}



.spec-grid{

grid-template-columns:1fr;

}


}

@media(max-width:768px){


.rating-summary{

padding:80px 20px 40px;

}



.rating-number{

font-size:50px;

}



.stars{

font-size:28px;

}



.review-list{

padding:40px 20px;

}


}

@media(max-width:768px){


.faq-page{

padding:80px 20px;

}



.faq-page h2{

font-size:35px;

}



.faq-question{

font-size:15px;

padding:20px;

}


}

@media(max-width:768px){


.contact-section{

grid-template-columns:1fr;

padding:80px 20px;

}



.contact-box,
.contact-form{

padding:25px;

}



.order-banner{

padding:60px 20px;

}



.order-banner h2{

font-size:32px;

}


}

@media(max-width:768px){


.promo-section{

padding:60px 20px;

}



.promo-grid{

grid-template-columns:1fr;

}



.promo-card{

padding:30px;

}



}

@media(max-width:768px){


.about-detail{

padding:70px 20px;

}



.about-detail h2{

font-size:35px;

}



.vision-section{

grid-template-columns:1fr;

padding:50px 20px;

}



.vision-box{

padding:30px;

}


}

@media(max-width:768px){


.tracking-section{

padding:80px 20px;

}



.tracking-box{

padding:30px;

}



.tracking-box h2{

font-size:32px;

}



.tracking-input{

flex-direction:column;

}



.tracking-input button{

width:100%;

}



.order-status{

padding:60px 20px;

}



.order-status h2{

font-size:35px;

}



.timeline-item{

gap:15px;

padding:20px 10px;

}


}