/* ==========================
   TABLET
========================== */

@media (max-width:992px){

    h1{
        font-size:42px;
    }

    h2{
        font-size:32px;
    }

    h3{
        font-size:22px;
    }

    p{
        font-size:17px;
    }

    .grid1{
        gap:40px;
    }

    .grid2{
        gap:30px;
    }

    .sticky-footer{

        padding:15px 25px;

    }

    .right{

        gap:20px;

    }

    .btn-buy{

        padding:16px 30px;
        font-size:17px;

    }

    .new{

        font-size:26px;

    }

}


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

@media (max-width:768px){

    body{

        padding-bottom:170px;

    }

    header .container{

        flex-direction:column;
        gap:15px;
        text-align:center;

    }

    h1{

        font-size:34px;
        text-align:center;

    }

    h2{

        font-size:28px;
        text-align:center;

    }

    h3{

        font-size:22px;

    }

    p{

        font-size:16px;

    }

    .grid1,
    .grid2{

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

    }

    .btn{

        display:block;
        width:100%;
        text-align:center;

    }

    .social-proof img{

        border-radius:10px;

    }

    /* Sticky Footer */

    .sticky-footer{

        flex-direction:column;
        align-items:flex-start;
        gap:18px;

        padding:18px;

    }

    .left{

        width:100%;

        display: none;

    }

    .right{

        width:100%;

        justify-content:space-between;
        align-items:center;

    }

    .title{

        font-size:20px;

    }

    .subtitle{

        font-size:14px;

    }

    .benefit{

        font-size:13px;

    }

    .price{

        align-items:flex-start;

    }

    .new{

        font-size:28px;

    }

    .old{

        font-size:15px;

    }

    .btn-buy{

        padding:16px 28px;
        font-size:16px;

    }

}


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

@media (max-width:480px){

    body{

        padding-bottom:210px;

    }

    .container{

        width:92%;

    }

    h1{

        font-size:28px;

    }

    h2{

        font-size:24px;

    }

    p{

        font-size:15px;

    }

    .title{

        font-size:18px;

    }

    .subtitle{

        font-size:13px;

    }

    .benefit{

        font-size:12px;

    }

    .right{

        flex-direction:column;
        align-items:stretch;
        gap:15px;

    }

    .price{

        align-items:flex-start;

    }

    .new{

        font-size:24px;

    }

    .btn-buy{

        width:100%;
        text-align:center;

        padding:16px 20px;

    }

}