*{
  margin:0;
  padding:0;
}

.md-hero{
  position:relative; 
}

.md-hero svg{
   position:absolute;
   top:0px;
   left:0px;
}

.hero-content h1{
  text-transform: uppercase;
  font-style: normal;
  font-weight: 900;
}

.hero-content h2{
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
}

.hero-content h3{
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
}

.hero-content h4{
  text-transform: uppercase;
  font-style: normal;
  font-weight: bold;
}

.hero-content h5{
  font-style: normal;
  font-weight: bold;
}

.hero-content p{
  font-style: normal;
  font-weight: normal;
}

.hero-content a {
  background: linear-gradient(90deg, #ffffff, #ffffff) !important; 
  color: #111222 !important; 
  padding: 10px 25px !important; 
  text-decoration: none !important; 
  font-weight: 600 !important; 
  border-radius: 5px !important; 
}

.hero-body{
/*   height: 200px;  
  padding:140px;*/
  width:100%;
}

.hero{
    background-size: cover!important;
    background-repeat: no-repeat!important;
    background-position: center!important;
    display: flex!important;
    justify-content: flex-end!important;
    height: 655px; 
}

.hero-content{
    display: flex;
    height: 100%;
    flex-wrap: wrap;
    align-content: flex-end;
    padding-right: 100px;
    padding-top:100px;
}

.hero-content h2 , .hero-content h1 , .hero-content p , .hero-content h3 , .hero-content h4 , .hero-content h5{
    width: 100%;
    margin: 5px 0px;
}

/*.hero-content a{
    background: #FF6B00;
    padding: 13px 32px;
    font-style: normal;
    border-radius: 4px;
    line-height: 17px;
    font-weight: bold;
    text-transform: uppercase;
    color: #FFFFFF;
    text-decoration: none;
    color: #FFFFFF;
    margin: 12px 0px;
    display:inline-block;
}*/

.hero-content a:hover{
  color:#111222 !important; 
}

.splide__arrows{
    display: none!important;
}


@media (min-width: 320px) and (max-width: 480px) {

  /* CSS */
  .md-hero svg{
    position:absolute;
    top:0px;
    left:0px;
  }

  .hero-body{
    padding:20px;   
  }

  .hero-content h1 {
    font-style: normal;
    font-weight: 900;
    color: #ffffff;
    font-size: 26px !important;
  }
  
  .hero-content p {
    color: #111222 !important;
    font-size:16px !important;
  }
  
  .hero-content span {
    color: #ffffff !important;
  }
  
  .hero{
    height: 655px; 
  }
}

@media  (min-width: 481px) and (max-width: 1024px){
  
   /* CSS */
  .md-hero svg{
    position:absolute;
    top:0px;
    left:0px;

  }
  
  .hero-body{
    padding:20px;   
  }

  .hero-content h1 {
    font-style: normal;
    font-weight: 900;
    color: #111222;
  }
  
  .hero-content p {
    font-style: normal;
    font-weight: 500;
    color: #fff;
  }
  
  .hero{
    height: 655px !important; 
  }