html {
    scroll-padding-top: 6rem;
  }

body {

}

@media (min-width: 1024px)
#hero { background-attachement: fixed;}

#hero {
    width: 100%;
    height: 75vh;
    background: url(../img/bg.jpg) top left;
    background-size: cover;
    position: relative;
}

.topbar {
    background-color: #F3A11E;

}

.text-color-yel {
  color: #F3A11E !important;

}






.hover-scale, .hover-scale:hover {
    transition: transform .2s ease-in;
}
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .4rem;
    box-shadow: 0 20px 27px 0 rgb(0 0 0 / 5%);
}
.card-body {
    flex: 1 1 auto;
    min-height: 1px;
    padding: 1.25rem;
}



/* display this row with flex and use wrap (= respect columns' widths) */

.row-flex {
    display: flex;
    flex-wrap: wrap;
  }
  
  
  /* vertical spacing between columns */
  
  [class*="col-"] {
    margin-bottom: 30px;
  }
  
  .content {
    height: 100%;
    padding: 20px 20px 10px;
    color: #fff;
  }
  
  
  /* Demo backgrounds and styling*/
  
  .colour-1 {
    background: #B9DCBC;
    color: #000;
  }
  
  .colour-2 {
    background: #B1D9C1;
    color: #000;
  }
  
  .colour-3 {
    background: #89BFA4;
    color: #000;
  }
  
  .colour-4 {
    background: #82204A;
  }
  
  .colour-5 {
    background: #558C8C;
  }
  
  .colour-6 {
    background: #917C78;
  }
  

  
  .content h3 {
    margin-top: 0px;
    font-weight: 300;
  }