/* =====================================================
   MJP - Manu Janta Party
   Responsive Design
   Cloudflare Pages Ready
===================================================== */



/* ==========================================
   LARGE TABLETS / SMALL LAPTOPS
========================================== */

@media (max-width:1100px){


.container {

    width:92%;

}



.hero {

    padding:80px 0;

}



.hero h1 {

    font-size:45px;

}



.cards {

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

}



.gallery-grid {

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

}



.nav-menu {

    gap:18px;

}



}





/* ==========================================
   TABLETS
========================================== */


@media (max-width:900px){



header {

    position:relative;

}



.navbar {

    min-height:70px;

}



.logo {

    font-size:26px;

}



.nav-menu {


    position:absolute;

    top:70px;

    left:0;

    width:100%;

    background:white;

    display:none;

    flex-direction:column;

    padding:25px;

    box-shadow:
    0 10px 25px rgba(0,0,0,.12);

}



.nav-menu.active {

    display:flex;

}



.nav-menu a {

    padding:12px 0;

    width:100%;

}



.menu-toggle {

    display:block;

}



.hero {

    text-align:center;

}



.hero h1 {

    font-size:38px;

}



.hero p {

    font-size:17px;

}



.page-banner {

    padding:60px 0;

}



.page-banner h1 {

    font-size:35px;

}



.section {

    padding:50px 0;

}



.cards {

    grid-template-columns:1fr;

}



.footer-grid {

    grid-template-columns:1fr;

}



}







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


@media (max-width:600px){



.container {

    width:94%;

}



body {

    font-size:15px;

}



.logo {

    font-size:23px;

}



.logo span {

    font-size:11px;

}



.hero {

    padding:55px 0;

}



.hero h1 {

    font-size:30px;

}



.hero p {

    font-size:16px;

}



.page-banner h1 {

    font-size:30px;

}



.page-banner p {

    font-size:15px;

}



.section-title h2 {

    font-size:28px;

}



.card {

    padding:22px;

}



.btn {

    width:100%;

    text-align:center;

    margin-bottom:12px;

}



.breadcrumbs {

    font-size:13px;

    padding:12px 0;

}



.gallery-grid {

    grid-template-columns:1fr;

}



.form-control {

    padding:12px;

}



footer {

    padding:35px 0;

}



.footer-bottom {

    font-size:14px;

}



}





/* ==========================================
   EXTRA SMALL DEVICES
========================================== */


@media (max-width:380px){



.hero h1 {

    font-size:26px;

}



.logo {

    font-size:20px;

}



.page-banner h1 {

    font-size:26px;

}



}