@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
/* https://www.youtube.com/watch?v=XhGN_Np1obg*/
:root{
    --main-black-color:#000;
    --main-color: #1769a2;
    --main-extra-dark: #575756;
    --main-dark:#70706f;
    --main-grey: #57575a;
    --main-light: #ffffff;
    --main-yellow:#f2b300;
    --main-yellow-dark:#cc9900;
    --text-dark: #3d3d3c;
    --text-black: #000;
    --text-light: #ffffff;
    --text-yellow: #f2b300;
    
}

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    list-style-type:none ;
    text-decoration: none;
    font-family: "Raleway" , sans-serif;

}



  #hero {
  z-index: -1;
  width: 100%;    
  height: calc(100vh - (200px)) !important;
  overflow: hidden;
  position: relative;
 
  }

  #hero .carousel, #hero .carousel-inner, #hero .carousel-item, #hero .carousel-item::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  }

  #hero .carousel-item {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  }

  #hero .carousel-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  top: 70px;
  left: 50px;
  right: 50px;
  }

  #hero .container {
  text-align: center;
  }

  #hero h2 {
  color: #fff;
  margin-bottom: 20px;
  font-size: 48px;
  font-weight: 700;
  text-shadow: 0px 0px 4px rgba(0,0,0,0.7), 0px 0px 4px rgba(0,0,0,0.7);
  }

  #hero p {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
  margin: 0 auto 30px auto;
  color: #fff;
  font-size:22px;
  text-shadow: 0px 0px 4px rgba(0,0,0,0.7), 0px 0px 4px rgba(0,0,0,0.7);
  }

  #hero .carousel-inner .carousel-item {
  transition-property: opacity;
  background-position: center center;
  }

  #hero .carousel-inner .carousel-item,
  #hero .carousel-inner .active.carousel-item-left,
  #hero .carousel-inner .active.carousel-item-right {
  opacity: 0;
  }

  #hero .carousel-inner .active,
  #hero .carousel-inner .carousel-item-next.carousel-item-left,
  #hero .carousel-inner .carousel-item-prev.carousel-item-right {
  opacity: 1;
  transition: 0.5s;
  }

  #hero .carousel-inner .carousel-item-next,
  #hero .carousel-inner .carousel-item-prev,
  #hero .carousel-inner .active.carousel-item-left,
  #hero .carousel-inner .active.carousel-item-right {
  left: 0;
  transform: translate3d(0, 0, 0);
  }



    .btn-vm {

      display: inline-block;
      background: #F1B300 !important;
      color: #333 !important;
      padding: 6px 20px 7px;
      transition: 0.3s;
      font-size: 14px;
      border-radius: 4px;
      margin-top: -3px;
      font-weight: bolder;
    }

    .btn-vm:hover {

      display: inline-block;
      background: #f1b3009c !important;

    }