.hero.hero-landing {
  margin-top: 165px;
  height: 600px;
  overflow: hidden;
  width: 100%;
  position: relative;
}

.hero.hero-landing .track {
  height: 100%;
  transition: 0.7s ease-in-out 0.3s;
}

.hero.hero-landing .slider {
  height: 100%;
  width: 3935px;
  position: absolute;
  left: 45%;
  transform: translate(-45%);
}

.hero.hero-landing .slide {
  height: 100%;
  position: relative;
  background-size: cover;
  width: 50%;
  float: left;
}

.hero.hero-landing .slide.slide-medical {
  background-image: url("../imgs/hero-landing/desktop_medical_gradient.jpg");
  clip-path: url(#wave);
}

.hero.hero-landing.activated.medical .slide.slide-medical {
  background-image: url("../imgs/hero-landing/desktop_medical.jpg");
}

.hero.hero-landing .slide.slide-packaging {
  background-image: url("../imgs/hero-landing/desktop_packaging_gradient.jpg");
  clip-path: url(#wave2);
  margin-left: -115px;
}

.hero.hero-landing.activated.packaging .slide.slide-packaging {
  background-image: url("../imgs/hero-landing/desktop_packaging.jpg");
}

.hero.hero-landing .content-layer {
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
}
.hero.hero-landing .content-layer > .row {
  height: 100%;
}

.hero.hero-landing .content-layer > .row > .col-6 {
  height: 100%;
  position: relative;
  transition: width 0.3s ease-in-out 0.3s;
}

.hero.hero-landing .content-layer > .row > .col-12 {
  position: relative;
}

.hero.hero-landing.activated .side {
  width: 10%;
}

.hero.hero-landing.activated .side.focused {
  width: 90%;
}

.hero.hero-landing .hero-content {
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 420px;
  color: #fff;
}

.hero.hero-landing .side .hero-content-unfocused {
  opacity: 1;
  transition: opacity 0.2s ease-in-out 1s;
}

.hero.hero-landing.activated .side .hero-content-unfocused {
  opacity: 0;
  transition: opacity 0.2s ease-in-out 0s;
}

.hero.hero-landing .side .hero-content-focused {
  opacity: 0;
  transition: opacity 0.2s ease-in-out 0s;
}

.hero.hero-landing .side.focused .hero-content-focused {
  opacity: 1;
  transition: opacity 0.2s ease-in-out 1s;
}

.hero.hero-landing.packaging .side.focused .hero-content-focused {
  width: 850px;
  max-width: none;
}

.hero.hero-landing .heading {
  font-weight: 800 !important;
}

.hero.hero-landing .description {
  margin-bottom: 20px;
}

.hero.hero-landing .btn-link {
  text-decoration: none !important;
  color: #ffffff;
}

.hero.hero-landing .hero-content-unfocused .heading {
  font-size: 48px;
  line-height: 44px;
}

.hero.hero-landing .hero-content-focused .heading {
  font-size: 64px;
  line-height: 60px;
}

.hero.hero-landing.hero-landing-tablet {
  margin-top: 70px;
  
  background-image: url("../imgs/hero-landing/tablet.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #09397d;
}

.hero.hero-landing.hero-landing-mobile {
  margin-top: 70px;
  
  background-image: url("../imgs/hero-landing/mobile.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #09397d;
}