/*
======================================================
 New Hope United Church of Christ
 Responsive Stylesheet

 Handles:
 - Tablets
 - Mobile Phones
 - Navigation
 - Layout Adjustments

======================================================
*/


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

@media(max-width:1100px){


    .nav-menu{

        gap:20px;

    }


    .nav-menu > li > a{

        font-size:.78rem;

    }


    .hero-content h1{

        font-size:3.5rem;

    }


    .mission-grid,
    .ministry-grid,
    .service-grid,
    .events-grid,
    .sermon-grid{

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

    }


    .gallery-grid{

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

    }


    .pastor-grid{

        grid-template-columns:
        350px 1fr;

        gap:40px;

    }


    .footer-grid{

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

    }


}



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

@media(max-width:900px){


    .top-bar .container{

        flex-direction:column;

        gap:10px;

    }



    .header-container{

        height:90px;

    }



    .logo img{

        width:85px;

    }



    /* MOBILE NAVIGATION */


    .mobile-menu-button{

        display:block;

    }



    #mainNav{

        position:absolute;

        top:90px;

        left:0;

        width:100%;

    }



    .nav-menu{

        position:fixed;

        top:0;

        right:-100%;

        width:300px;

        height:100vh;

        background:white;

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        padding:100px 35px;

        gap:20px;

        box-shadow:

        -5px 0 20px rgba(0,0,0,.15);

        transition:.4s;

        overflow-y:auto;

    }



    .nav-menu.active{

        right:0;

    }



    .nav-menu > li{

        width:100%;

    }



    .nav-menu > li > a{

        display:block;

        padding:10px 0;

    }



    .dropdown{

        position:static;

        width:100%;

        display:none;

        opacity:1;

        visibility:visible;

        transform:none;

        box-shadow:none;

        border:none;

    }



    .has-dropdown.active .dropdown{

        display:block;

    }



    .dropdown a{

        padding-left:20px;

    }



    #mobileOverlay{

        position:fixed;

        inset:0;

        background:

        rgba(0,0,0,.5);

        display:none;

        z-index:999;

    }



    #mobileOverlay.active{

        display:block;

    }




    .hero{

        height:75vh;

        min-height:550px;

    }



    .hero-content{

        text-align:center;

    }



    .hero-content h1{

        font-size:3rem;

    }



    .welcome-grid,
    .contact-grid{

        grid-template-columns:1fr;

    }



    .welcome-image{

        margin-bottom:30px;

    }



    .pastor-grid{

        grid-template-columns:1fr;

        text-align:center;

    }



    .pastor-image{

        max-width:400px;

        margin:auto;

    }



    .stats-grid{

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

    }



    .prayer-container,
    .footer-cta .container{

        flex-direction:column;

        text-align:center;

    }



}



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


@media(max-width:600px){



    h1{

        font-size:2.5rem;

    }



    h2{

        font-size:2rem;

    }



    h3{

        font-size:1.5rem;

    }



    .section-padding{

        padding:70px 0;

    }



    .top-left{

        text-align:center;

    }



    .top-left span{

        display:none;

    }



    .hero{

        height:85vh;

    }



    .hero-content h1{

        font-size:2.3rem;

    }



    .hero-content p{

        font-size:1rem;

    }



    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }



    .hero-buttons .btn{

        width:220px;

    }



    .mission-grid,
    .ministry-grid,
    .service-grid,
    .events-grid,
    .sermon-grid{

        grid-template-columns:1fr;

    }



    .gallery-grid{

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

        gap:10px;

    }



    .gallery-item{

        height:180px;

    }



    .stats-grid{

        grid-template-columns:1fr;

    }



    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }



    .footer-social{

        margin-top:20px;

    }



    .footer-bottom-content{

        flex-direction:column;

        text-align:center;

        gap:10px;

    }



    .contact-form,
    .contact-info{

        padding:25px;

    }



    .prayer-section{

        text-align:center;

    }



}



/*=====================================================
 SMALL PHONES
=====================================================*/


@media(max-width:380px){


    .nav-menu{

        width:270px;

    }


    .hero-content h1{

        font-size:2rem;

    }


    .gallery-grid{

        grid-template-columns:1fr;

    }


}