.hero-section {

  position: relative;
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 30px;
  
}

.hero-bg-img {
  position: absolute;
  inset: 0;
  background-position: 65%;
  background-repeat: no-repeat;
  background-size: cover;
  transition: opacity 1.5s ease;
}

.bg1 {
  background-image: linear-gradient(#97454b6b), url('../assets/muste-hero-img0.jpg');
  opacity: 1;
}

.bg2 {
  opacity: 0;
}

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

.hero-section h2,
.hero-section p,
.hero-section-button-container, 
.hero-section-arrow-container {
  opacity: 0;
}

.hero-section-arrow-container {
  margin-top: 80px;
}


.hero-section.active h2 {
  animation: fadeUp 0.8s ease forwards;
}

.hero-section.active p {
  animation: fadeUp 0.8s ease 0.35s forwards;
}

.hero-section.active .hero-section-button-container {
  animation: fadeUp 0.8s ease 0.7s forwards;
}

.hero-section.active .hero-section-arrow-container {
  animation: fadeUp 0.8s ease 1s forwards, bounce 2s infinite 1s;
}

.hero-section h2,
.hero-section p {
    color: #fff;
}

.hero-section h2 {
    font-size: 1.5rem;
    margin-top: 230px;
}


.typewriter {
  display: inline-block;
  border-right: 2px solid #fff;
  white-space: nowrap;
  padding-right: 3px;
  animation:
    typing 2s steps(30) forwards,
    blink 1s infinite;
}

@keyframes typing {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes blink {
  0%,100% {
    border-color: transparent;
  }

  50% {
    border-color: #fff;
  }
}

.hero-section p {
  margin-top: 15px;
  font-size: 1em;
}

.hero-section-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  margin-top: 50px;
}

.hero-section-button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 70px;
  width: 170px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 1em;
  color: #fff;
  font-weight: bold;
}


.products {
  background-color: var(--main-color);
  border: 2px solid var(--main-color);
}

.contact {
  background-color: transparent;
  border: 2px solid #fff;
}

.hidden {
  display: none;
}

@keyframes bounce {
  0%, 100% {
    transform: translate(0%, 0);
  }

  50% {
    transform: translate(0%, 20px);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-height: 1000px) {

  .hero-section-bottom {
    height: 400px;
  }

  .hero-section-button-container {
    gap: 50px;
  }

  .hero-section-button {
    width: 220px;
    height: 90px;
    font-size: 1.5em;
  }

  .hero-section-arrow-container {
    margin-top: 60px;
  }

  .hero-section-arrow-container svg {
    width: 70px;
    height: 70px;
  }
}



/* When the height of the screen is less than 835px */
@media ((max-height: 835px)) {

  .hero-section {
    height: auto; 
  }

  .hero-section h2 {
    margin-top: 280px;
  }
}

/*When the width of the screen is greater than or equal to 768px (tablet size)*/
@media (min-width: 768px) {
  
  .hero-section h2 {
    font-size: 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 290px;
  }

  .typewriter {
    display: flex;
    justify-content: end;
  }

  .hero-section p {
    font-size: 1.3em;
    padding: 0 120px;
  }

  .hero-section-arrow-container {
    margin-top: 80px;
  }
}

/*When the width of the screen is greater than or equal to 1024px (desktop size)*/
@media (min-width: 1024px) {
  
  
  .hero-section h2 {
    font-size: 2.5rem;
    margin-top: 320px;
  }

  .hero-section p {
    font-size: 1.4em;
  }

  .hero-section-button {
    font-size: 1.5em;
  }

  .hero-section-button-container {
    justify-content: center;
    flex-direction: row;
    gap: 60px;
  }

  .hero-section-button {
    width: 220px;
    height: 90px;
    font-size: 1.4rem;
  }

  .products {
    position: relative;
    overflow: hidden;
     transition: 
      color 0.3s ease,
      border-color 0.5s ease;
  }

  .products::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--main-color-hover);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s ease;
    z-index: 0;
  }

  .products:hover::before {
    transform: scaleX(1);
  }

  .products span {
    position: relative;
    z-index: 1;
  }

  .products:hover {
    border-color: var(--main-color-hover);
  }

  
  .contact {
    position: relative;
    overflow: hidden;
    transition: color 0.3s ease;
  }

  .contact::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s ease;
    z-index: 0;
  }

  .contact:hover::before {
    transform: scaleX(1);
  }

  .contact span {
    position: relative;
    z-index: 1;
  }

  .contact:hover {
    color: var(--main-color);
  }

  .hero-section-arrow-container svg {
    width: 70px;
    height: 70px;
  }

  .hero-section p {
    margin-top: 10px;
  }
}

/*When the width of the screen is greater than or equal to 1440px (desktop size)*/
@media (min-width: 1440px) {

  .hero-bg-img {
      background-position: center;

  }

  .hero-section h2 {
    font-size: 3rem;
    margin-top: 470px;
  }
}