/*=========================================================
FROST & BREW
Responsive Styles
Bootstrap 5
=========================================================*/


/*=========================================================
1400px
=========================================================*/

@media (max-width:1400px){

    .hero-section h1{

        font-size:54px;

    }

}


/*=========================================================
1200px
=========================================================*/

@media (max-width:1200px){

    .hero-section{

        min-height:80vh;

    }

    .hero-section h1{

        font-size:48px;

    }

    .section-title{

        font-size:38px;

    }

    .offer-banner h2{

        font-size:42px;

    }

}


/*=========================================================
992px
=========================================================*/

@media (max-width:992px){

    .navbar{

        padding:12px 0;

    }

    .navbar-nav{

        margin-top:20px;

    }

    .navbar-nav .nav-link{

        margin:10px 0;

    }

    .hero-section{

        text-align:center;

        padding:120px 0 70px;

    }

    .hero-section h1{

        font-size:42px;

    }

    .hero-section img{

        margin-top:50px;

    }

    .section-padding{

        padding:70px 0;

    }

    .section-heading{

        margin-bottom:50px;

    }

    .section-heading h2{

        font-size:36px;

    }

    .product-info{

        padding-left:0;

        margin-top:40px;

    }

    .menu-sidebar{

        position:relative;

        top:0;

        margin-bottom:30px;

    }

    .cart-summary{

        margin-top:30px;

    }

}


/*=========================================================
768px
=========================================================*/

@media (max-width:768px){

    .hero-section{

        min-height:auto;

    }

    .hero-section h1{

        font-size:34px;

        line-height:1.3;

    }

    .hero-section p{

        font-size:16px;

    }

    .btn{

        width:100%;

        margin-bottom:12px;

    }

    .product-card{

        margin-bottom:25px;

    }

    .offer-banner{

        text-align:center;

    }

    .offer-banner img{

        margin-top:40px;

    }

    .counter-box{

        margin-bottom:30px;

    }

    .testimonial-card{

        margin-bottom:25px;

    }

    .gallery-item{

        margin-bottom:15px;

    }

    .checkout-card{

        padding:25px;

    }

    footer{

        text-align:center;

    }

    footer .social-icons{

        justify-content:center;

    }

}


/*=========================================================
576px
=========================================================*/

@media (max-width:576px){

    .navbar-brand{

        font-size:24px;

    }

    .navbar-brand img{

        height:45px;

    }

    .hero-section{

        padding-top:100px;

    }

    .hero-section h1{

        font-size:30px;

    }

    .section-title{

        font-size:28px;

    }

    .section-heading h2{

        font-size:30px;

    }

    .card{

        border-radius:15px;

    }

    .product-price{

        font-size:24px;

    }

    .quantity-box{

        width:100%;

    }

    .auth-card{

        padding:30px 20px;

    }

    .dashboard-card{

        text-align:center;

    }

}


/*=========================================================
400px
=========================================================*/

@media (max-width:400px){

    .hero-section h1{

        font-size:26px;

    }

    .hero-section p{

        font-size:15px;

    }

    .section-title{

        font-size:24px;

    }

    .btn{

        font-size:14px;

        padding:10px 18px;

    }

    .product-title{

        font-size:18px;

    }

    .product-price{

        font-size:20px;

    }

    .cart-table img{

        width:60px;

    }

    .navbar-brand{

        font-size:20px;

    }

}


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

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

    .hero-section{

        min-height:auto;

        padding:120px 0 70px;

    }

}


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

@media (min-width:1600px){

    .container{

        max-width:1450px;

    }

}


/*=========================================================
Print
=========================================================*/

@media print{

    .navbar,

    footer,

    #backToTop,

    .btn,

    .newsletter-section{

        display:none !important;

    }

    body{

        background:#fff;

        color:#000;

    }

}