/* Media Queries */
@media (max-width:1599px){

  .mini-header{
  display: block;
  }
  .header .socials{
    display: none;
  }
   .header .navigation-bar a:hover{
    font-size: 1.3rem;
  }
}




@media (max-width:1280px){

    html{
    font-size: 75%;
  }
 .header .navigation-bar a{
    font-size: 1rem;
    margin: 0 1rem;
  }
  .header .navigation-bar a:hover{
  font-size: 1.2rem;
  
  }
 .form-section{
  height: 100vh;
  }
}



@media(max-width:1024px){
  .homeTwo{
  background-image: url(../images/embark_tab_ed.png);
  }

  .slider-wrapper .slider-item:nth-child(2){
      background-image: url(../images/mom_tusk_tab.png);

  }  
  .stories{
  background-image: url(../images/story_tab.jpeg);
  
  }

}




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



@media(max-width:950px){
  
   .blogs-grid {
    grid-auto-columns: calc(100% / 2); 
  }
}



@media (max-width:838px){
   .header .navigation-bar a{
    font-size: 1rem;
    margin: 0 0.5rem;
  }
  .header .navigation-bar a:hover{
  font-size: 1rem;
  }
  
  .storyOne .storyOne-image{
  order: 2;  
  }
  .storyOne .storyOne-info{
  order: 1;
  }
  .bull-fight-story .bull-image{
    order: 2;
  }
  .bull-fight-story .bull-info{
    order: 1;
  }
  
}




@media (max-width: 768px){

  .header{
    position: fixed;
   left: 0; right: 0; top: 0;
  }

    #menu-btn{
    display: block;
    font-size: 2rem;
    position: absolute;
    left: 2rem;
    top: 2rem;
    padding: 0.3rem 0.5rem;
    cursor: pointer;
  }
    #menu-btn:hover{
    color: var(--accent-color);  
    }
    .header img{
    
    position: absolute;
    left: 45%;
  }
  .header .log-in-btn{
    position: absolute;
    right: 2rem;
  }
  .header .navigation-bar{
    position: absolute;
    top: 100%;
    left: -100%; /*  makes the nav bae disappear and its activated bt a JS code toggleNav */
    width: 20rem;
    background-color:rgba(0, 0, 0, 0.9);
    height: calc(100vh - 9.5rem);
    border-radius: 0.5rem;

    transition: left 0.5s ease;
  }

  .header .navigation-bar.active{
  left: 0;
}
  .header .navigation-bar a{
    display: block;
    padding: 0.8rem 1rem;
    font-size: 1.2rem;
    background-color:rgba(0, 0, 0, 0.4);
    border-radius: 0.2rem;
    margin: 1rem 0.8rem;
    border: 1px solid var(--accent-color);
  }

  
  .header .navigation-bar a:hover{
    border: 1px solid var(--white);
    color: var(--accent-color);
      font-size: 1.2rem;
  }
    
  .stories .container{
    
      padding: 2rem ;
 }  
  .stories .container{
    display:block;
    padding-top: 20rem;
    margin: auto;

  }
  .stories .container .stories-info{
  max-width:  35rem;
  margin-bottom: 2rem;
  }
  .stories .stories-info .message{  
    font-size: 1.1rem;
  }
  .slider-wrapper .slider-item{
  background-position: 70% center;
  }
  .stories{
  background-image: url(../images/story_phone3.png);
    height: 75vh;
  } 
  
}



@media (max-width: 600px) {
  .blogs-grid {
     grid-auto-columns: 100%; /* 1 visible  */
  }
   .mini-header{
     display: none;
    }


}



@media (max-width : 580px){

   .footer-two{
        display: block; 
    }
    .the-footer-container{
        display: none;
    }
 .slider-wrapper .slider-item .slide-content{
  margin: 0 auto;
  }
 .stories{
    height: 60vh;
  }
  .slider-wrapper .slider-item{
   background-image: url(../images/bull_fight_phone.png);
  }
  .slider-wrapper .slider-item:nth-child(2){
      background-image: url(../images/mombasa_phone_edit.png);
      background-position: bottom;
  }

}




@media(max-width :510px){
  html{
          font-size: 70%;
      }
        .form-section .form-container .row{
    flex-direction: column;

    }
    .homeTwo{
    background-image: url(../images/embark_phone_ed.png);

  }

}