/* =========================
   HERO SECTION STYLES START
   ========================= */
#hero_old {
  font-family: "Emberly", serif;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  font-size: clamp(
    2.5rem,
    13vw,
    8rem
  ); /* Responsive font size: min 2.5rem, scales with 8vw, max 8rem */
  line-height: 0.8;
  padding-top: 20px;
}

#hero {
position: relative;
  background-image: url("../images/baseImage.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 600px;
  border-radius: 15px;
  transition: background-size 0.5s ease, background-position 0.5s ease;
}

.topHeading {
  color: #422a11;
}

#hero_ img {
  width: 100%;
  height: auto;
  max-width: 1000px;
  min-width: 300px;
  border-radius: 0 !important;
  /* move image up so top of the image is shifted inside the hero container */
  transform: translateY(-200px);
  -webkit-transform: translateY(-200px);
}

/* .hero-container {
    position: absolute;

} */

.hero-container img {   
  height: 100px;
}

.topLeft {
  /* background-color: coral; */
  position: absolute;
  top: 10px;
  left: 20px;
}

.bottomRight {
  /* background-color: darkgoldenrod; */
  position: absolute;
  bottom: 5px;
  right: 20px;
  /* right: 0; */
  /* transform: translateY(200px) translateX(25px);
    -webkit-transform: translateY(200px) translateX(25px); */
}

.bottomRight .text {
  /* background-color: rgb(255, 0, 208); */
  font-weight: 100;
  color: white;
  width: 350px;
  margin-left: auto;
  text-align: right;
  transform: translateY(-10px);
  font-size: 140%;
  line-height: 100%;
  
}






/* ***************************************************************************
Responsive for width less than 500 
   ************************************************************************** */

@media (max-width: 600px) {
  /* =========================
   HERO SECTION STYLES START
   ========================= */
     /* #hero {
    --bg-size: 140%;
    --bg-position: center -120px;
  } */
.hero-container img {   
  height: 55px;
}


.bottomRight .text {
  /* background-color: rgb(255, 0, 208); */
  color: white;
  width: 150px;
  margin-left: auto;
  text-align: right;
  transform: translateY(-10px);
  font-size: 100%;
  line-height: 100%;
  font-weight: 300;
}


}