/*=========================================================
NexEra CMS
Responsive Framework
=========================================================*/

/*=========================
Large Desktop
=========================*/

@media(min-width:1400px) {

    .container {

        max-width: 1320px;

    }

}

/*=========================
Laptop
=========================*/

@media(max-width:1199px) {

    .section-padding {

        padding: 70px 0;

    }

    .hero-image {

        height: 80vh;

    }

    .carousel-caption h1 {

        font-size: 52px;

    }

    .section-title h2 {

        font-size: 38px;

    }

}

/*=========================
Tablet
=========================*/

@media(max-width:991px) {

    .section-padding {

        padding: 60px 0;

    }

    .container {

        max-width: 100%;

    }

    .hero-image {

        height: 70vh;

    }

    .carousel-caption {

        text-align: center;

        left: 5%;

        right: 5%;

    }

    .carousel-caption h1 {

        font-size: 40px;

    }

    .carousel-caption p {

        font-size: 16px;

        margin: auto;

    }

    .navbar-collapse {

        margin-top: 15px;

    }

    .about-image {

        margin-bottom: 30px;

    }

    .product-info {

        padding-left: 0;

        margin-top: 35px;

    }

    .footer-top {

        text-align: center;

    }

}

/*=========================
Mobile
=========================*/

@media(max-width:767px) {

    .section-padding {

        padding: 50px 0;

    }

    .hero-image {

        height: 60vh;

    }

    .carousel-caption {

        padding-bottom: 20px;

    }

    .carousel-caption h5 {

        font-size: 14px;

    }

    .carousel-caption h1 {

        font-size: 30px;

        line-height: 1.3;

    }

    .carousel-caption p {

        font-size: 15px;

    }

    .section-title {

        margin-bottom: 35px;

    }

    .section-title h2 {

        font-size: 30px;

    }

    .btn {

        width: 100%;

        margin-bottom: 12px;

    }

    .product-card .card-img-top {

        height: 220px;

    }

    .product-info h2 {

        font-size: 28px;

    }

    .gallery-image {

        height: 220px;

    }

}

/*=========================
Small Mobile
=========================*/

@media(max-width:575px) {

    .container {

        padding-left: 15px;

        padding-right: 15px;

    }

    .hero-image {

        height: 55vh;

    }

    .carousel-caption h1 {

        font-size: 24px;

    }

    .carousel-caption p {

        display: none;

    }

    .navbar-brand img {

        max-height: 42px;

    }

    .section-title h2 {

        font-size: 26px;

    }

    .product-card .card-body {

        padding: 18px;

    }

    .gallery-image {

        height: 200px;

    }

    .whatsapp-btn {

        width: 52px;

        height: 52px;

        font-size: 24px;

        right: 15px;

        bottom: 80px;

    }

    .back-to-top {

        width: 45px;

        height: 45px;

        right: 15px;

        bottom: 20px;

    }

}

/*=========================
Landscape Mobile
=========================*/

@media(max-height:500px) {

    .hero-image {

        height: 100vh;

    }

    .carousel-caption {

        top: 55%;

    }

}