/* ==========================================
   Large Tablets (1200px)
========================================== */

@media (max-width:1200px){

.hero{
    gap:40px;
}

.hero h1{
    font-size:3rem;
}

.hero-image img{
    width:360px;
}

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

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

}

/* ==========================================
   Tablets (992px)
========================================== */

@media (max-width:992px){

.hero{

    flex-direction:column-reverse;

    text-align:center;

    padding-top:140px;

}

.hero-image{

    margin-bottom:30px;

}

.hero-image img{

    width:320px;

}

.features{

    grid-template-columns:1fr;

}

.price-box{

    justify-content:center;

}

.buy-btn{

    width:100%;

}

.cards{

    grid-template-columns:1fr 1fr;

}

.trust{

    grid-template-columns:1fr 1fr;

}

.compare table{

    font-size:15px;

}

nav{

    padding:15px 0;

}

.logo{

    font-size:22px;

}

}

/* ==========================================
   Mobile (768px)
========================================== */

@media (max-width:768px){

.hero{

    min-height:auto;

    padding-top:120px;

    padding-bottom:80px;

}

.hero h1{

    font-size:2.2rem;

}

.hero p{

    font-size:15px;

}

.hero-image img{

    width:260px;

}

.badge{

    font-size:13px;

}

.new{

    font-size:36px;

}

.old{

    font-size:18px;

}

#timer{

    width:100%;

    justify-content:center;

    font-size:18px;

}

.buy-btn{

    width:100%;

    padding:18px;

}

.cards{

    grid-template-columns:1fr;

}

.trust{

    grid-template-columns:1fr;

}

.compare{

    overflow:auto;

}

.compare table{

    min-width:600px;

}

.faq h2{

    font-size:30px;

}

.cta{

    padding:50px 25px;

}

.cta h2{

    font-size:30px;

}

.final-price{

    font-size:42px;

}

.cta a{

    width:100%;

    padding:18px;

}

footer{

    font-size:14px;

}

}

/* ==========================================
   Small Mobile (480px)
========================================== */

@media (max-width:480px){

body{

    font-size:14px;

}

.logo{

    font-size:18px;

}

.nav-btn{

    padding:10px 18px;

    font-size:14px;

}

.hero{

    width:92%;

}

.hero h1{

    font-size:1.8rem;

}

.hero-image img{

    width:220px;

}

.features div{

    padding:14px;

    font-size:14px;

}

.card{

    padding:25px;

}

.card h2{

    font-size:22px;

}

.compare h2{

    font-size:28px;

}

.faq-item button{

    font-size:16px;

    padding:18px;

}

.faq-item div{

    font-size:14px;

}

.progress{

    height:3px;

}

}

/* ==========================================
   Ultra Small (360px)
========================================== */

@media (max-width:360px){

.hero h1{

    font-size:1.6rem;

}

.hero-image img{

    width:180px;

}

.new{

    font-size:30px;

}

.buy-btn{

    font-size:16px;

}

.logo{

    font-size:16px;

}

}