/*Media queries*/

@media (max-width:1300px){
    .program-grid{
      grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    }
}  
@media (max-width: 1085px){

    .the-nav-bar a{
  padding: 0 0.8rem;

    }  
}
@media (max-width:1064px){
 
  body{
  padding-top: 75px;
}
 html{
        font-size: 75%;
    }

  .the-nav-bar a{
  font-size: 1.2rem;
 }
  .the-header-container{
        height: 6.5rem;
    }
     
  
}

@media(max-width:1000px){
  .the-footer-container{
  padding: 2rem 4rem;
  }
   
}



@media (max-width:991px){

    .the-header-container{
        position: fixed;
        padding: 1.5rem 2rem;
    }
    section{
        padding: 2rem;
    }
}


@media (max-width: 860px){

     .dwd-info{
          order: 1;
    }
    .dwd-image{
      order: 2;
    }
 
}
@media (max-width: 768px){
    #menu-btn{
        display: block;
        font-size: 2rem;
        color: #000;
        position: absolute;
        left: 2rem;
        top: 2rem;
        padding: 0.3rem 0.5rem;
         border-radius: 0.2rem; 
         cursor: pointer;
        
    }
    #menu-btn:hover{
         border: 1px solid var(--primary-blue);
        color: #fff;
        background-color: var(--accent-purple);


    }
    .the-header-container{
        height: 6.5rem;
        position: fixed;
    }
    .the-logo{
        position: absolute;
        left: 50%;
        bottom: 5%;
        transform: translateX(-50%);
    }
    .donate-btn{
        position: absolute;
        right: 2rem;
    }
    .the-nav-bar {
        position: absolute;
        top: 100%; 
        left:-100%;  /*makes the nav bae disappear and its activated bt a JS code toggleNav*/
         background:#333; 
        width: 20rem;        
        height: calc(100vh - 9.5rem);
        border-radius: 0.5rem;

        transition: left 0.5s ease;

    }
    .the-nav-bar.active{
        left:0;
    }

     .the-nav-bar a{
        color: #fff;
        display: block;
        margin: 1rem;
        padding: 0.5rem 0.8rem;
        font-size: 1.5rem;
        background: #000;
        border-radius: 0.6rem;
     }
     .home-page{
        background-position: right;
        justify-content: center;
        text-align: center;
     }
     

}

@media (max-width : 580px){

    .home-page{
    background-position: center bottom; /* shifts focus towards the top */
  }
  .home-page-two{
     background-position: center bottom; 
     

  }
   .footer-two{
        display: block; 
    }
    .the-footer-container{
        display: none;
    }
}

@media (max-width : 510px){

    body{
    padding-top: 60px;
    }

    .home-page{
    background-position: center bottom; 
    }

    html{
        font-size: 60%;
    }
    .the-header-container{
        position: fixed;
        left: 0; right: 0; height: 6.5rem;
    }
}