.hero-section-bar {
  position: relative;
  min-height: 267px;
  overflow-x: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 1rem;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../img/steel-bar/46094.jpeg);
  background-position: center;
}
.hero-section-bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6); /* Adjust the transparency as needed */
}
.hero-section-bar h1 {
  font-size: 2rem;
  color: white;
  margin-bottom: 1rem;
}
.hero-section-bar p {
  font-size: 1.125rem;
  color: #ff7800;
}
.metal-title {
  color: #ff7800;
  font-family: "Arial", Sans-serif;
  font-size: 50px;
  font-weight: 600;
  line-height: 1.1em;
  padding-left: 2%;
}
.holder-bars {
  border-block: 1.2px solid #ff7800;
  padding-block: 2rem;
  margin-block: 2rem;
  margin-inline: 2%;
}
.steel-padding{
    padding: 10px;
    min-height: 400px;
}
.metal-style {
    position: relative;
    height: 100%;
    /* width: 100%; */
    background-size: cover;
    background-position: center;
}
.metal-style:hover::before{
    background-color: rgba(255, 120, 0, 0.3); /* Adjust the transparency as needed */
}
.metal-style::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 120, 0, 0.0); /* Adjust the transparency as needed */
    transition: 1s;
  }

  .steel-1{ 
    background-image: url(../img/steel-bar/steel-bar-1.jpg);
  }
  .steel-2{
    background-image: url(../img/steel-bar/steel-bar-2.jpg);
  }
  .steel-3{
    background-image: url(../img/steel-bar/steel-bar-3.jpg);
  }
  .steel-4{
    background-image: url(../img/steel-bar/steel-bar-4.jpg);
  }

@media (min-width: 767px) {
  .hero-section-bar {
    min-height: 445px;
  }

  .hero-section-bar h1 {
    font-size: 3rem;
  }
}
@media (max-width: 1030px) {
  .hero-section-bar {
    background-position: unset;
  }
}