.hero {
  height: 100vh;
  width: 100%;
  background: url("../images/home/home-bg.jpg") center/cover no-repeat;
  position: relative;
}

.overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(88,10,22,0.65), rgba(88,10,22,0.92)),
    rgba(88, 10, 22, 0.72);
}

.hero-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 40px 0px;
}

.title-row h1 {
  font-size: 45px;
  font-weight: 500;
  letter-spacing: 3px;
}

.leaf {
  width: 100px;
}

.arches {
  display: flex;
  align-items: flex-end;
  margin-bottom: 50px;
  position: relative;
}

.arch {
  position: relative;
  width: 300px;
  border-radius: 140px 140px 0 0;
  overflow: hidden;
  margin: 0 -40px;
  transition: all 0.3s ease;
}

.arch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 140px 140px 0 0;
  border: 1.5px solid rgb(255, 255, 255);
  z-index: 2;
  pointer-events: none;
}

.arch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arch.active {
  height: 470px;
  z-index: 5;
  opacity: 1;
  margin-bottom: 0;
}

.arch.fade {
  width: 250px;
  height: 400px;
  z-index: 4;
  filter: blur(1.4px);
  margin-bottom: 18px;
}

.arch.blur-left,
.arch.blur-right {
  width: 240px;
  height: 360px;
  opacity: 0.40;
  margin-bottom: 34px;
  filter: blur(1.6px);
}

.subtitle {
  text-align: center;
  font-size: 15px;
  line-height: 1.9;
  letter-spacing: 0.7px;
}

.arch {
  transition: 
    opacity 0.35s ease,
    transform 0.35s ease,
    filter 0.35s ease;
}

.arches:hover .arch {
  opacity: 0.35;
  filter: blur(1px);
  z-index: 1;
}

.arches .arch:hover {
  opacity: 1 !important;
  filter: blur(0);
  transform: translateY(0px) scale(1.03);
  z-index: 20;
}

.arches:hover .arch.active:not(:hover) {
  opacity: 0.35;
  filter: blur(1px);
}

@media (max-width: 768px) {

  .hero {
    height: 95vh;
  }

  .hero-inner {
    padding-top: 20px;
  }

  .title-row {
    gap: 2px;
  }
  
  .leaf{
    width: 70px;
  }

  .title-row h1 {
    font-size: 32px;
    letter-spacing: 2px;
  }

  .arches {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    margin-bottom: 40px;
  }

  .arch {
    width: 190px;
    margin: 0 -35px;
    border-radius: 120px 120px 0 0;
  }

  .arch img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .arch.active {
    width: 150px;
    height: 270px;
    z-index: 5;
    opacity: 1;
    filter: none;
    margin-bottom: 0;
  }

  .arch.fade {
    width: 130px;
    height: 245px;
    opacity: 0.55;
    filter: blur(1.2px);
    z-index: 4;
    margin-bottom: 18px;
  }

  .arch.blur-left,
  .arch.blur-right {
    width: 130px;
    height: 225px;
    opacity: 0.35;
    filter: blur(1.5px);
    z-index: 3;
    margin-bottom: 30px;
  }

  .subtitle {
    font-size: 13.5px;
    line-height: 1.8;
    letter-spacing: 0.4px;
    padding: 0 18px;
  }
}