/*=========================================
PEPSPICY RESPONSIVE.CSS
==========================================*/

/**************
Large Desktop
**************/

@media(max-width:1400px){

.container{
    width:92%;
}

.hero h1{
    font-size:58px;
}

}

/**************
Laptop
**************/

@media(max-width:1200px){

.hero-grid,
.about-grid,
.product-grid,
.contact-grid{

    grid-template-columns:1fr;
    gap:60px;

}

.hero{

    text-align:center;

}

.hero p{

    margin:auto auto 35px;

}

.hero-buttons{

    justify-content:center;

}

.hero-features{

    justify-content:center;
    flex-wrap:wrap;

}

.about-image{

    order:-1;

}

.product-gallery{

    order:-1;

}

.benefit-grid,
.why-grid,
.stats-grid{

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

}

.review-grid{

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

}

.ingredient-grid{

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

}

.footer-grid{

    grid-template-columns:1fr 1fr;

}

}


/******************
Tablet
******************/

@media(max-width:992px){

header .container{

    padding:15px 0;

}

nav{

    display:none;

}

.logo img{

    height:60px;

}

.buy-btn{

    padding:12px 25px;

}

.hero{

    padding-top:140px;

}

.hero h1{

    font-size:48px;

}

.hero p{

    font-size:17px;

}

.section-title h2{

    font-size:36px;

}

.hero-features{

    gap:20px;

}

.hero-features div{

    width:140px;

}

.gallery{

    flex-wrap:wrap;

}

.contact-grid{

    gap:40px;

}

.newsletter-box{

    padding:40px;

}

.newsletter input{

    width:100%;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.social-icons{

    justify-content:center;

}

}


/******************
Mobile
******************/

@media(max-width:768px){

section{

    padding:70px 0;

}

.hero{

    padding-top:130px;

}

.hero h1{

    font-size:38px;
    line-height:1.2;

}

.section-title{

    margin-bottom:45px;

}

.section-title h2{

    font-size:30px;

}

.hero-buttons{

    display:flex;
    flex-direction:column;
    gap:15px;

}

.secondary-btn{

    margin-left:0;

}

.primary-btn,
.secondary-btn{

    width:100%;
    text-align:center;

}

.hero-features{

    flex-direction:column;
    align-items:center;

}

.hero-features div{

    width:220px;

}

.product-card{

    padding:25px;

}

.product-details{

    text-align:center;

}

.buy-buttons{

    display:flex;
    flex-direction:column;
    gap:15px;

}

.buy-buttons a{

    width:100%;

}

.benefit-grid,
.review-grid,
.why-grid,
.stats-grid,
.ingredient-grid{

    grid-template-columns:1fr;

}

.feature-box{

    text-align:center;

}

.newsletter form{

    flex-direction:column;

}

.newsletter button{

    width:100%;

}

.contact-form{

    padding:25px;

}

.whatsapp-float{

    width:58px;
    height:58px;
    font-size:26px;

}

.scroll-top{

    width:50px;
    height:50px;

}

}


/******************
Small Mobile
******************/

@media(max-width:576px){

.container{

    width:94%;

}

.hero{

    padding-top:120px;

}

.hero h1{

    font-size:32px;

}

.hero p{

    font-size:15px;

}

.section-title h2{

    font-size:28px;

}

.logo img{

    height:50px;

}

.buy-btn{

    display:none;

}

.badge{

    font-size:13px;

}

.price{

    font-size:38px;

}

.review-card,
.feature-box,
.benefit-card,
.contact-card,
.ingredient-card,
.why-card{

    padding:25px;

}

.newsletter-box{

    padding:25px;

}

.newsletter-box h2{

    font-size:28px;

}

.newsletter-box p{

    font-size:15px;

}

.footer-logo{

    width:140px;

}

.copyright{

    font-size:13px;

}

}


/******************
Very Small Devices
******************/

@media(max-width:400px){

.hero h1{

    font-size:28px;

}

.section-title h2{

    font-size:24px;

}

.primary-btn,
.secondary-btn,
.buy-large{

    padding:15px 20px;
    font-size:15px;

}

.contact-form input,
.contact-form textarea{

    font-size:15px;

}

}


/******************
Landscape Phones
******************/

@media (max-height:500px) and (orientation:landscape){

.hero{

    padding-top:100px;

}

.hero-grid{

    gap:30px;

}

.hero h1{

    font-size:34px;

}

}