/*=========================================================
    PROJECT : Hope & Harmony Spectrum Inc.
    FILE    : responsive.css
    PURPOSE : Responsive Section
=========================================================*/
/*=========================================================
            RESPONSIVE TOP BAR
=========================================================*/

@media(max-width:768px){

    .top-bar{

        display:none;

    }

}
/*=========================================================
            RESPONSIVE HEADER
            FILE : responsive.css

    PURPOSE:
    Creates the mobile navigation layout.
    Displays the hamburger menu.
    Converts the navigation into a dropdown.
=========================================================*/

@media (max-width:991px){

    .navbar{

        position:relative;

    }

    /* Hide Desktop Navigation */

    .nav-menu{

        position:absolute;

        top:100%;
        left:0;

        width:100%;

        background:var(--white);

        display:flex;

        flex-direction:column;

        align-items:center;

        gap:20px;

        padding:30px 0;

        box-shadow:0 15px 30px rgba(0,0,0,.08);

        opacity:0;

        visibility:hidden;

        transform:translateY(-20px);

        transition:.35s ease;

        z-index:999;

    }

    /* Show Mobile Menu */

    .nav-menu.active{

        opacity:1;

        visibility:visible;

        transform:translateY(0);

    }

    /* Hamburger Button */

    .menu-toggle{

        display:flex;

        align-items:center;

        justify-content:center;

        width:50px;

        height:50px;

        border:none;

        background:none;

        cursor:pointer;

        font-size:1.7rem;

        color:var(--heading-color);

    }

}



/*=========================================================
                HERO RESPONSIVE
=========================================================*/

@media(max-width:991px){

<div class="gallery-image hero-banner-image">{

    grid-template-columns:1fr;
    text-align:center;

}

.hero-buttons{

    justify-content:center;

}

.hero-image{

    margin-top:40px;

}

.card-one{

    left:0;

}

.card-two{

    right:0;

}

}
/*=========================================================
                ABOUT RESPONSIVE
=========================================================*/

@media(max-width:991px){

.about-wrapper{

    grid-template-columns:1fr;

    text-align:center;

}

.about-features{

    justify-items:center;

}

.about-card{

    position:relative;

    left:0;

    bottom:0;

    margin:25px auto 0;

}

}
/*=========================================================
                STATISTICS RESPONSIVE
=========================================================*/

@media(max-width:991px){

.statistics-grid{

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

}

}

@media(max-width:576px){

.statistics-grid{

    grid-template-columns:1fr;

}

}
/*=========================================================
                SERVICES RESPONSIVE
=========================================================*/

@media(max-width:991px){

.services-grid{

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

}

}

@media(max-width:576px){

.services-grid{

    grid-template-columns:1fr;

}

}
/*=========================================================
                WHY US RESPONSIVE
=========================================================*/

@media(max-width:991px){

.why-wrapper{

    grid-template-columns:1fr;

}

.why-image{

    order:2;

}

.why-content{

    order:1;

    text-align:center;

}

.why-item{

    text-align:left;

}

}
/*=========================================================
                TEAM RESPONSIVE
=========================================================*/

@media(max-width:991px){

.team-grid{

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

}

}

@media(max-width:576px){

.team-grid{

    grid-template-columns:1fr;

}

.team-image img{

    width:160px;

    height:160px;

}

}
/*=========================================================
                GALLERY RESPONSIVE
=========================================================*/

@media(max-width:991px){

.gallery-grid{

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

}

.gallery-large{

    grid-column:span 2;

}

}

@media(max-width:576px){

.gallery-grid{

    grid-template-columns:1fr;

}

.gallery-large{

    grid-column:span 1;

}

}
/*=========================================================
                TESTIMONIALS RESPONSIVE
=========================================================*/

@media(max-width:768px){

.testimonial-card{

    padding:35px 25px;

}

.testimonial-text{

    font-size:1rem;

}

.testimonial-author{

    flex-direction:column;

}

}
.testimonial-card{

    position:relative;

    overflow:hidden;

}

.testimonial-card::before{

    content:"“";

    position:absolute;

    top:-30px;

    left:30px;

    font-size:10rem;

    color:rgba(39,93,169,.08);

    font-family:Georgia, serif;

    line-height:1;

}
/*=========================================================
                CTA RESPONSIVE
=========================================================*/

@media(max-width:768px){

.cta{

    padding:80px 0;

}

.cta-buttons{

    flex-direction:column;

    align-items:center;

}

.cta-buttons .btn{

    width:240px;

}

}
/*=========================================================
                FOOTER RESPONSIVE
=========================================================*/

@media(max-width:1200px){

.footer-grid{

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

}

}

@media(max-width:768px){

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-contact p{

    justify-content:center;

}

.footer-social{

    justify-content:center;

}

.footer-bottom{

    flex-direction:column;

    text-align:center;

}

.footer-bottom-links{

    justify-content:center;

    flex-wrap:wrap;

}

}
@media(max-width:991px){

.contact-wrapper{

    grid-template-columns:1fr;

}

}

@media(max-width:576px){

.form-row{

    grid-template-columns:1fr;

}

.contact-form{

    padding:25px;

}

.info-item{

    flex-direction:column;

    align-items:center;

    text-align:center;

}

}
/*=========================================================
            MOBILE MENU - PREVENT BODY SCROLL
            FILE : responsive.css

    PURPOSE:
    Prevents the webpage from scrolling when
    the mobile navigation menu is open.

    RELATED FILE:
    assets/js/main.js
=========================================================*/

body.menu-open{

    overflow:hidden;

}
/*=========================================================
            MOBILE MENU OVERLAY
            FILE : responsive.css

PURPOSE:
Creates a dark overlay behind the mobile menu.
=========================================================*/

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    opacity:0;

    visibility:hidden;

    transition:.35s ease;

    z-index:998;

}

/* Overlay Visible */

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}
/*=========================================================
                ABOUT PAGE
                OUR STORY
=========================================================*/

.story-grid{

    grid-template-columns:1fr;

    gap:40px;

}

.story-content{

    text-align:center;

}

.story-highlights{

    max-width:500px;

    margin:30px auto 0;

}

.story-highlights li{

    justify-content:center;

}

/*=========================================================
                ABOUT PAGE
                MISSION & VISION
=========================================================*/

.mission-grid{

    grid-template-columns:1fr;

}
.purpose-grid{

    grid-template-columns:1fr;

}
.values-grid{

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

}
@media (max-width:767px){

    /*---------------------------------------
        OUR VALUES
    ---------------------------------------*/

    .values-grid{

        grid-template-columns:1fr;

    }

}
.support-grid{

    grid-template-columns:1fr;

}