@import url('https://fonts.googleapis.com/css2?family=Sora:wght@100;200;300;400;500;600;700;800&display=swap');

#heroFeatures{
  display: flex;
  background-color: #15152C;
  max-height: 725px;
  color: #FFFFFF;
  font-family: 'Sora', sans-serif;
  background-image: url('https://48966590.fs1.hubspotusercontent-na1.net/hubfs/48966590/herobg.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  padding-top: 48px;
  border-radius: 24px;
  margin-bottom: 150px;
  padding-bottom: 54px;

}

#firstColumn {
  width: 55%;
  padding-left: 48px

}

#secondColumn {
  width: 45%;
  display: flex;
  justify-content: end
}

.btn-hero-container{
  display: flex;
  justify-content: center
}

#heroTitleFeature{
  font-size: 80px;
  font-weight: 700;
  line-height: 1.15
}

.heroDescription{
  font-size: 24px 
}

.btn-hero {
  background-color: #4F46E5;
  color: #ffffff;
  border: 2px solid #4F46E5;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 20px;
  min-width: 120px;
  cursor: pointer;
  text-decoration: none
}

.btn-hero:hover {
  background-color: #ffffff;
  color: black;
  border-color: #ffffff;
  font-weight: 700;
  text-decoration: none
}

.text-gradient {
  background: linear-gradient(90deg, #564DF7 0%, #49EFDB 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}


.cropped-image {
  overflow: hidden
}

.mobile-image {
  display: none 
}


@media (max-width: 1160px) and (min-width: 800px) {
  #firstColumn {
    width: 55%;
    padding-left: 32px
  }
  
  #heroTitleFeature{
    font-size: 60px;
    font-weight: 700;
    line-height: 1.2
  }
  
  .heroDescription{
    font-size: 18px 
  }
}

@media screen and (max-width: 939px) {
  #heroFeatures{
    flex-direction: column;
    padding: 24px;
    margin-bottom: 50px

  }
  
  #firstColumn, #secondColumn {
    width: 100%;
    justify-content: center
  }
  
  #firstColumn {
   padding-left: 0px;
   margin-bottom: 48px
  }
  
  #heroTitleFeature{
    font-size: 32px;
    margin-bottom: 8px;
  }
  
  .heroDescription{
    font-size: 16px 
  }
  
  .btn-hero {
    font-size: 16px 
  }

  
  .mobile-image {
    display: block;
    width: auto;
    max-height: 240px
  }
  .cropped-image {
    display: none 
  }
}
}
  
}