.carousel_div{
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 35rem;
  width: 100%;
}
/* .hero-progress-bar{
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: #333;
  top: 3px;
  left: 0;
  z-index: 53;
  transform: translateY(-100%);
  white-space: nowrap;
  animation: moveSpan 5s linear infinite;
}
@keyframes moveSpan {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
} */
.hero-imge-contaner{
  display: flex;
  z-index: 50;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  bottom: 0;overflow: hidden;
  transition: transform 60s ease;
}

.hero-imge-contaner img {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%; /* Yüksekliği de %100 yaparak div'in yüksekliğini kapsamasını sağlıyoruz */
  object-fit: cover; /* Resmi div'e sığdırmak için kullanılır. Resmi kırpmadan genişletir veya küçültür */
}


.div-poligon1{
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  width: 45%;
  height: 100%;
  clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);
  background: #4f75bd;
  z-index: 3;
  padding:3rem;
}
.middle-poligon{
  position: absolute;
  width: 100%;
  left: 30%;
  height: 100%;
}
.owl-nav {
  display: none !important;
}
.div-poligon2{
  width: 20%;
  height: 100%;
  clip-path: polygon(45% 0, 100% 0, 100% 100%, 0% 100%);
  background: #4f75bd;
  z-index: 50;
}
/* .poligonFooter{
  position: absolute;
  top: calc(100% - 4rem);
  left: 0;
  width: 100%;
  height: 4rem;
  background-color: #fff;
  z-index: 53;
} */
.heroH1 {
  position: relative; /* Pozisyonu ayarlamak için gerekli */
  display: inline-block; /* Alt çizginin genişliğini sınırlandırmak için */
  margin-bottom: 20px; /* Başlık ile alt çizgi arasında boşluk */
  padding-bottom: 10px; /* Alt çizgi için boşluk */
  color: #fff;
  font-size: 3.5rem;
  font-weight:700;
  max-width: 90%;
  letter-spacing: -0.5px;

}

.heroH1::after {
  content: ''; /* Sonrasında boş içerik eklemek için */
  position: absolute; /* Mutlak pozisyon */
  left: 0;
  bottom: 0;
  width: 100%; /* Alt çizginin genişliği */
  height: 5px; /* Alt çizginin kalınlığı */
  background-color: #f0a500; /* Alt çizginin rengi */
  border-radius: 5px; /* Kenarları yuvarlama */
  transition: width 0.3s ease; /* Alt çizgi efekt geçişi */
}

.heroH1:hover::after {
  width: 120%; /* Hover üzerinde alt çizginin genişlemesi */
}

.div-poligon1 p{
  width: 75%;
  color: #ffffe1;
  font-size: 16px;
  /* position: relative; */
}
.container-hero-cart a:hover{
  background-color: #fff;
  text-decoration: none;
  color: #666666;
  font-size: 17px;
}

@media (max-width: 1000px) {
  .div-poligon2{
    display: none;
  }
  .div-poligon1{
    width: 60%;
  }
  .middle-poligon{
    height: 100%;
    width: 100%;
  }
}
@media (max-width: 800px) {
  .div-poligon1{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    display: flex;
    padding-left: 3rem;
    justify-content: center;
    align-items: start;
    height: 100%;
    width: 100%;
  }
  .middle-poligon{
    display: none;
  }
}
@media (max-width: 600px) {
  .heroH1{
      font-size: 3rem;
  }
  .div-poligon1 p{
      font-size: 14px;
  }
}
@media (max-width: 400px) {
  .heroH1{
      font-size: 2.5rem;
  }
}