.hero{
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #8f1717d2, transparent);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  padding: 20px;
  color: white;
}


.hero-small-title{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 30px;
}

.hero-small-title span{
  width: 80px;
  height: 4px;
  background: #861515;
}

.hero-small-title p{
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: bold;
}

.hero-small-title img{
  width: 22px;
}


.hero-title{
  font-size: 48px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 25px;
  font-family: var(--font-inter);
}

.hero-title span{
  color: #c52a2a;
  border-bottom: 6px solid #c52a2a;
  padding-bottom: 5px;
}


.hero-text{
  max-width: 650px;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 40px;
  color: #eaeaea;
  font-family: var(--font-inter);
}

.hero-button{
  background: #B43333;
  padding: 18px 40px;
  border-radius: 10px;
  font-size: 18px;
  font-weight: 400;
  color: white;
  text-decoration: none;
  transition: 0.3s;
  font-family: var(--font-geometric415);
}

.hero-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(197,42,42,0.4);
}

@media (max-width:1024px){

.hero-title{
  font-size:56px;
}

}

@media (max-width:768px){

.hero-title{
  font-size:42px;
}

.hero-text{
  font-size:16px;
}

.hero-button{
  padding:16px 32px;
  font-size:16px;
}

.hero-small-title span{
  width:50px;
}

}

@media (max-width:480px){

.hero-title{
  font-size:34px;
}

.hero-text{
  font-size:15px;
}

}