/* GOOGLE FONTS FOR PT-SANS */
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

/* CSS VARIABLES */
:root{
  --primary-color: #b90415;
  --primary-color-hover: #d3071b;
  --secondary-color: #103063;
  --secondary-color-hover: #143f85;
  --light-color: #f4f4f4;

}

/* SHOW CASE */
#showcase{
    margin: 0;
    padding: 0;
    background: url("../img/showcase2.jpg") no-repeat center/cover;
    width: 100%;
    height: 100vh;
    position: relative;
    overflow-y: hidden;
   
}

#showcase .container{
    margin-top: 25vh;
    /* THIS WILL BRING THE TEXT TO THE MIDDLE OF 25 VIEW PORT HEIGHT */
}

#showcase h1{
    font-size: 4rem;
    margin-bottom: 0;
}

#showcase h2{
    font-size: 2rem;
    
}

/* FOOTER */
footer .footer-cols{
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(4, 1fr);
  padding: 2rem;
  text-align: left;
  font-size: 14px;
  
}

footer .footer-cols ul{
  list-style-type: none;
  
}

footer .footer-cols a{
  text-decoration: none;
  color: aliceblue;
  
}

footer .footer-cols ul li:first-child{
  font-size: 1.2rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #444;
  margin-bottom: 1rem;
}

footer .footer-bottom{
  background: #333;
  position: absolute;
}



/* UTILITY CLASSES (WE'LL USE IT THROUGH OUT THE PROJECT */

.container{
    max-width: 1180px;
    text-align: center;
    margin: 0;
    padding: 0 3rem;
}

.lead{
  font-size: 1.3rem;
}

.text-center{
  text-align: center;
}





/* NAVIGATION*/
body {
    font-family: 'PT Sans Narrow', sans-serif;
    background-color: #252529;
    /* background-image: url("http://i.cubeupload.com/NjsJx8.png"); */
    margin: 0;
    color: #fff;
    line-height: 1.6;
  }
  
  h1 {
    font-size: 4em;
    font-family: 'PT Sans Narrow', sans-serif;
    line-height: 1.1;
    text-align: center;
    padding: 10px;
  }
  
  p {
    font-size: 1.2em;
    text-align: center;
    padding: 10px;
  }
  
  nav {
    height: 40px;
    width: 100%;
    background-color: #333;
    color: #eee;
    position: fixed;
  }
  nav ul {
    padding: 0;
    margin: 0;
  }
  nav li {
    display: inline;
    float: left;
  }
  nav a {
    display: inline-block;
    width: 100px;
    text-align: center;
    text-decoration: none;
    padding: 10px 0;
    color: #eee;
    text-decoration: none;
  }
  nav li:hover {
    background-color: #444;
  }
  nav a#openup {
    display: none;
  }


  .section{
      padding: 2rem 0;
      
  }

  .section h3{
    font-size: 2rem;
  }

  .section-head{
      margin: 0;
      font-size: 2.5rem;
  }

  section#entertainment{
    background: url(../img/entertainment.jpg) no-repeat center/cover;
    padding: 8rem 0;
    

  }  

  .gift-cards{
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }

  .gift-cards img{
    max-width: 100%;
    height: auto;
  }

  .text-secondary{
    text-decoration: none;
  }
  

  
  .btn{
    padding: 1rem;
    color: #fff;
    display: inline-block;
    text-decoration: none;
  }

  .btn-primary{
    background: var(--primary-color);
    
  }

  .btn-primary:hover{
    background: var(--primary-color-hover);
    
  }

  .btn-secondary{
    background: var(--secondary-color);
    
  }

  .btn-secondary:hover{
    background: var(--secondary-color-hover);
    
  }

  /* TEXT COLOR */

  .mb{
    margin-bottom: 1rem;
  }

  .mt{
    margin-top: 1rem;
  }

  .lead{
    font-size: 1.3rem;
  }

.bg-light{
  background: #ccc;
  color: #333;
}


#video img{
  width: 100%;
}






  
 

  /* MEDIA QUERY  */
  @media screen and (max-width: 580px) {
      .hide-on-small{
          display: none;
      }

    

      #showcase{
          height: 50vh;
      }

      #showcase .container{
        margin-top: 15vh;
    }

    #showcase h1{
        font-size: 2.5rem;
    }

    #showcase h2{
        font-size: 2.5rem;
    }
    /* h1 {
      font-size: 2.8em;
    }
   */



   /* IMAGE */
   img{width: 100%;}

   /* IMAGE */

    nav {
      height: auto;
      border-bottom: 0;
    }

   

    /* MICROSOFT BOTTON */
    .botton{
        width: 30%;
        height: 50px;
    }

    /* MICROSOFT BOTTON */


    nav ul {
      display: none;
      height: auto;
    }
    nav li {
      width: 100%;
      float: left;
      position: relative;
    }
    nav a {
      text-align: left;
      width: 100%;
      text-indent: 25px;
      background: #333;
      border-bottom: 1px solid #555;
    }
    nav a:hover {
      background: #444;
    }
    nav a#openup:after {
      content: "|||";
      transform: rotate(-90deg);
      -ms-transform: rotate(-90deg);
      /* IE 9 */
      -webkit-transform: rotate(-90deg);
      /* Safari and Chrome */
      width: 30px;
      height: 30px;
      display: inline-block;
      position: absolute;
      right: 5px;
      top: 20px;
    }
    nav a#openup {
      display: block;
      background-color: #333;
      width: 100%;
      position: relative;
    }
  }
  .cf:before, .cf:after {
    content: "";
    display: table;
  }
  
  .cf:after {
    clear: both;
  }
  
  .cf {
    zoom: 1;
  }


  /* GRID RESPONSIVENESS FOR GIFT CARDS */
  @media screen and (max-width: 780px) {
    .gift-cards{
      grid-template-columns: 1fr;
    }

  /* FOOTER RESPONSIVENESS */
    footer .footer-cols{
      display: none;
    }

  }

  /* SHOWCASE P TAG RESPONSIVENESS */

  @media screen and (max-width: 580px) {
    #showcase p.lead{
      display: none;
    }
  }

  @media all and (orientation:landscape){
    .section img{
       max-width: 100%;
    }
  }