body {
    overflow-y: hidden;
  }

  .container-fluid.main{
    position: relative; /* To make the navbar positions relative to this container */
    padding: 0;
  }
  
  .navbar-default {
    background-image: none;
    background-color: transparent; /* Make the menu become transparent */
    border-radius: 0px;
    border: 0;
    box-shadow: none;
    padding: 10px;
    position: absolute; /* Make the menu out of the document flow so it can placed anywhere without disturbing other widgets */
    top: 0;
    left: 0;
    right: 0;
    z-index: 10; /* If you delete this line, your menu link won't be clicked because it is behind the background. Applying this code bring the menu in front of the background */
  }
  
  .navbar-default .navbar-brand {
    font-family: Verdana;
    color: #ffffff;
    font-size: 20px;
  }
  
  .navbar-default .navbar-brand:hover,
  .navbar-default .navbar-brand:focus {
    color: #ffffff;
    background-color: transparent;
  }
  
  .navbar-default .navbar-nav > li > a {
    color: #ffffff;
  }
  
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus {
    color: #ffffff;
    background-color: transparent;
  }
  
  .navbar-default .navbar-toggle {
    border-color: transparent;
  }
  
  .navbar-default .navbar-toggle:hover {
    background-color: transparent;
  }
  
  .navbar-default .navbar-toggle:focus {
    background-color: transparent;
  }
  
  .navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
  }
  
  .carousel .background {
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    height: 100vh;
  }
  
  @media (max-width:991px) {
    .carousel .background {
      background-size: cover; /* To make the background image looks good */
    }
  }
  
  .carousel .background.a {
    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/background.png");
  }
  
  .carousel .background.b {
    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/background.png");
  }
  
  .carousel .background.c {
    background-image: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("../images/background.png");
  }
  
  .carousel-fade .carousel-inner .item {
    opacity: 0;
    transition: opacity 0.5s; /* The 0.5s describes the duration to make the opacity from 0 to 1 */
  }
  
  .carousel-fade .carousel-inner .active {
    opacity: 1;
  }
  
  /* CSS Hack to trigger GPU for smooth transition */
  @media all and (transform-3d),
  (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }
  }
  /* CSS Hack to trigger GPU for smooth transition */
  
  .covertext {
    position: absolute; /* To make the div to be place anywhere. It is out of the document flow */
    top: 90px; /* The distance between the div with the top of document */
    left: 0px; /* Make the div full width */
    right: 0px; /* Make the div full width */
    z-index: 9;
  }
  
  .title {
    font-family: Verdana;
    font-weight: 600;
    font-size: 60px;
    color: #ffffff;
    text-align: center;
    margin-bottom: 2em;
  }
  
  .subtitle {
    font-family: Verdana;
    font-size: 23px;
    color: #ffffff;
    text-align: center;
  }
  
  .explore {
    text-align: center;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .explore a:nth-child(1) {
    display: flex;
    justify-content: flex-end;
  }
  
  .explore .btn-lg,
  .explore .btn-lg:hover {
    height: 178px;
    border-radius: 22px !important;
    padding: 41px 25px;
    font-size: 22px;
    margin-right: 10px;
    background-image: none;
    background: rgb(255,255,255);
    background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(159,159,159,1) 100%);
    color: #ffffff;
    border:none;
  }

  .color-yellow,
  .color-yellow:hover {
    background: rgb(236,250,86) !important;
    background: linear-gradient(90deg, rgba(236,250,86,1) 0%, rgba(160,197,72,1) 100%) !important;
    color: #ffffff;
  }

  .explorebtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70%;
  }
  
  .btn,
  .btn:hover {
    border-radius: 22px !important;
    background-image: none;
    color: #ffffff;
    margin-bottom: 20px;
    box-shadow: none;
    outline: none;
  }
  
  .btn:focus,
  .btn:active:focus,
  .btn.active:focus,
  .btn.focus,
  .btn:active.focus,
  .btn.active.focus {
    color: #ffffff;
    outline: none;
  }

  .background-shadow {
    background-color:rgba(16, 25, 46,0.7);
    position:absolute;
    top:0;
    left:0;
    margin:0 auto;
    z-index:5;
    width:100%;
    height:100%;
  }

  .flot {
    float:none; 
    margin:0 auto;
  }

  .w-100 {
    width: 100%;
  }

  .w-60 {
    width: 60%;
  }

  .w-50 {
    width: 57%;
  }

  @media only screen and (max-width: 800px) {
    .explore {
      display: block;
      text-align: center;
    }

    .explore a {
      display:flex;
      justify-content: center !important;
    }

    .explore button {
      padding: 21px 40px !important;
      height: unset !important;
      width: 100% !important;
      border-radius: 22px !important;
      height: 152px !important;
      margin-right: 0px !important;
    }

    .explore a img {
      width: 74% !important;
    }

    .title img {
      width: 80% !important;
    }
  }

  @media only screen and (min-width: 3480px) {
    .explore .btn-lg {
      padding: 0px 140px !important;
      height: 400px !important;
      width: 100%;
      margin-right: 60px;
    }

    .w-50 {
      width: 85%;
    }

    .w-60 {
      width: 45% !important;
    }

    .covertext {
      position: absolute; 
      top: 385px;
    }

    .title {
      margin-bottom: 9em !important;
    }
  }

  @media only screen and (min-width: 4000px) {
    .covertext {
      position: absolute; 
      top: 450px;
    }
  }


  @media only screen and (max-width: 600px) {
    .carousel .background {
      background-position-x: -376px;
    }

    .covertext {
      top: 145px;
    }

    .explore a img {
      width: 75% !important;
    }
  }