.hero{
    text-align: center;
    margin-top: 70px;
    margin-bottom: 2rem;
    h1{
        font-size: var(--h4);
        margin-bottom: 1rem;
        font-family: 'Display', Times, serif;
    }
  }
  .hero_img_container {
    max-width: 50%;
    width: 30%;
    float: right;
    display: flex;
    flex-direction: column;
    min-width: 20%;
   
  }
  .hero_img_container img {
    width: 100%;
    /* margin-bottom: 1rem; */
  }
  .list h2{
    text-align: left;
  }
  .list li a{
  font-size: var(--h6);
  }
  .list ul li {
    margin: 0.5rem 0;
  }

.sections {
  text-align: center;
  padding-top: min(50px, 5vh);
  padding-bottom: min(50px, 5vh);
  margin: 0 5%;
  /* font-family: 'Text', Times, serif; */
  ul,li{list-style: disc;}
  ul,li {
    /* padding-left: 1.5rem; */
    text-align: left;
    margin: 0 auto;
    max-width: 800px;
    list-style-position: inside;
  }
  a{
      color: #007bff;
      text-decoration: none;
      &:hover {
          text-decoration: underline;
      }
    }
}
.sections li{
  font-size: var(--h6) ;
  margin: 1rem 0;
}
.sections h2{
  font-size: var(--h4);
  margin: 1rem 0;
  font-family: 'Display', Times, serif;
  background-image: linear-gradient(90deg, red, blue, purple);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
}
.sections h3{
  font-size: var(--h5);
  margin: 1rem 0;
  /* margin: 0 1rem; */

}
#iletisim_bilgileri a {
  color: black;
  font-size: var(--h6);
  text-decoration: none;
  &:hover {
      text-decoration: underline;
  }
}
/* TABLE */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
}

.responsive-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 400px; /* Küçük ekranlarda yatay kaydırma için */
}

.responsive-table th,
.responsive-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border: 1px solid #ddd;
}

.responsive-table thead {
  background-color: #f8f8f8;
}

@media (max-width: 600px) {
  .responsive-table th,
  .responsive-table td {
    padding: 0.5rem;
    font-size: 0.9rem;
  }
}
