:root{
  --bg-width: 75%;
  --bg-left: 15%;

  --fg-width: 18%;
  --fg-left: 78%;
  --fg-top: 50%;
}

body {
    margin: 0;
    padding: 0;
}

#navbar-container {
    margin: 0;
    padding: 0;
    height: 0;
}

/* Hero Homepage*/
.hero-container {
  position: relative;
  height: 750px;
  overflow: hidden;
}

.bgimage {
  position: absolute;

  top: -10%;
  left: 0;

  width: 100%;
  height: 120%;

  background-image: url('https://images.unsplash.com/photo-1438109491414-7198515b166b?q=80&fm=jpg&s=cbdabf7a79c087a0b060670a6d79726c');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;

  will-change: transform;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;

  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;

  color: white;
}

.hero-content h1,
.hero-content h5 {
  text-shadow: 2px 2px 8px rgba(0,0,0,.5);
}




/*-----Mouse Parralax-----*/




/*-----Scroll Parralax-----*/
.image-container {
  position: relative;

  /* Main controls */
  width: 98%;
  margin: 5px;

  /* Adjust overall placement */
  padding-top: 20px;
  padding-bottom: 20px;
  height: clamp(300px, 45vw, 500px);

  overflow:visible ;
}

/* Shared styling */
.parallax-bg,
.parallax-fg {
  will-change: transform;
  pointer-events: none;

  box-shadow: var(--bs-box-shadow);
  background-color: rgba(var(--bs-white-rgb), 1);
  border-radius: 30px;
  padding: 10px;
}

.parallax-bg {
  position: absolute;

  width: var(--bg-width);

  left: var(--bg-left);
  top: 50%;

  transform: translateY(-50%);
}

.parallax-fg {
  width: clamp(80px, 17vw, 200px);

  position: absolute;
  left: calc(
    var(--bg-left)
    + var(--bg-width)
    - 10%
  );
  top: var(--fg-top);

  transform: translateY(-50%);
  z-index: 2;
}

@media (max-width: 768px) {

  :root {
    --bg-width: 90%;
    --bg-left: 5%;

    --fg-top: 55%;
  }

  .parallax-fg {
    width: clamp(80px, 25vw, 170px);
    transform: translate(-50%, -50%);
  }
  

  .image-container {
    height: 320px;
  }
}