.hero-section {
  width: 100%;
  height: max-content;
  transition: all 0.2s ease-in-out;
  position: relative;
  background: linear-gradient(to right, rgba(var(--secondaryColorRgb), 0.65) 40%, rgba(var(--secondaryColorRgb), 0) 60%),
               url("/images/digitalSection/hero-image-background.webp");
  background-position: 0% -100%;
  background-size: cover;
  padding: 10vw;
  padding-bottom: 6vw;
  box-sizing: border-box;
}

.hero-info-container{
  width: 65%;
  height: max-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.hero-info-title {
  color: var(--tertiaryHeadingColor);
  font-family: var(--headingFont);
  font-weight: 900;
  font-size: var(--megaFontSize);
  width: 90%;
  margin: 0;
  margin-bottom: 1vw;
}

.hero-info-paragraph {
  color: var(--tertiaryHeadingColor);
  font-family: var(--headingFont);
  font-weight: 600;
  font-size: var(--subheadingFontSize);
  line-height: var(--headingFontSize);
  margin: 0;
}

.hero-action-container{
  width: max-content;
  height: max-content;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  margin-top: 2vw;
}

.hero-action-button-primary{
  border: 0;
  width: max-content;
  height: max-content;
  background-color: var(--tertiaryColor);
  color: var(--tertiaryHeadingColor);
  font-family: var(--headingFont);
  font-size: var(--subheadingFontSize);
  font-weight: 900;
  border-radius: 0.2vw;
  padding: 1vw 1.4vw;
  outline: none;
  margin-right: 2vw;
}

.hero-action-button-secondary{
  border: 0;
  width: max-content;
  height: max-content;
  background-color: transparent;
  color: var(--tertiaryHeadingColor);
  font-family: var(--headingFont);
  font-size: var(--paragraphFontSize);
  font-weight: 900;
  border-radius: 0.2vw;
  padding: 0.7vw 1.1vw;
  border: 0.25vw solid var(--tertiaryHeadingColor);
  outline: none;
  margin-right: 2vw;
}

.hero-logo-container{
  width: 25%;
  height: max-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: absolute;
  right: 10vw;
  top: 37.5vw;
  opacity: 0.75;
}

.hero-logo{
  width: 100%;
}


@keyframes fadeInBackground{
  0% {background-color: #000000ff;}
  5% {background-color: #000000ce;}
  10% {background-color: #00000033;}
  15% {background-color: #00000060;}
  20% {background-color: #00000000;}
  100% {background-color: #00000000;}
}

@media(max-width: 672px){
  .hero-section {
    width: 100%;
    height: 176vw;
    background-position: 50% 10vw;
    padding: 20vw 5vw;
    padding-bottom: 12vw;
    justify-content: flex-end;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: linear-gradient(to top, rgba(var(--secondaryColorRgb), 0.65) 40%, rgba(var(--secondaryColorRgb), 0) 80%),
                url("/images/digitalSection/hero-image-background.webp");
    background-position: 50% 5vw;
    background-size: cover;
  }
  
  .hero-info-container{
    width: 100%;
    height: max-content;
  }
  
  .hero-info-title {
    font-size: var(--superheadingFontSize);
    width: 90%;
    margin-bottom: 8vw;
  }
  
  .hero-info-paragraph {
    font-size: var(--subheadingFontSize);
    line-height: var(--headingFontSize);
    margin: 0;
  }
  
  .hero-action-container{
    width: max-content;
    height: max-content;
    margin-top: 8vw;
  }
  
  .hero-action-button-primary{
    width: max-content;
    height: max-content;
    font-size: var(--subheadingFontSize);
    border-radius: 0.4vw;
    padding: 3vw 3.8vw;
    margin-right: 4vw;
  }
  
  .hero-action-button-secondary{
    width: max-content;
    height: max-content;
    font-size: var(--paragraphFontSize);
    border-radius: 0.4vw;
    padding: 2.4vw 4.2vw;
    border: 0.5vw solid var(--tertiaryHeadingColor);
    margin-right: 4vw;
  }
  
  .hero-logo-container{
    width: 25%;
    height: max-content;
    right: 20vw;
    top: 75vw;
  }
}