/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
    .custom-menu{
        position: relative;
       
      }

      .hero-banner {
        height: 400px;
    }

    .display-4 {
        font-size: 3rem;
        font-weight: 500 !important;
        color: #37034a;
        
    }

    h2 {
        text-align: center;
        padding: 0px;
    }

    .site-header {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
      flex-wrap: wrap;
      padding: 0;
      position: absolute;
      -webkit-transition: -webkit-transform .4s ease-out;
      transition: -webkit-transform .4s ease-out;
      transition: transform .4s ease-out;
      transition: transform .4s ease-out,-webkit-transform .4s ease-out;
      width: 95%;
      z-index: 100;
  }


    
  }







/* Small devices (portrait tablets and large phones, 600px and up) */
/* @media only screen and (min-width: 600px) {...} */

/* Medium devices (landscape tablets, 768px and up) */
/* @media only screen and (min-width: 768px) {...} */

/* Large devices (laptops/desktops, 992px and up) */
/* @media only screen and (min-width: 992px) {...} */

/* Extra large devices (large laptops and desktops, 1200px and up) */
/* @media only screen and (min-width: 1200px) {...} */