/* Temel stil ayarları */
.wrapper {
  width: 80%;
  margin: 0 auto;
  overflow: hidden;
}
#services li:hover {
  color: #986667; /* Hover durumunda yazı rengi */
}
#services li:active {
  color: #986667; /* Aktif durumdaki yazı rengi */
}
.section {
  padding: 20px;
  margin: 20px 0;
  cursor: pointer;
}
#projects {
  width: 56%;
  float: right;
}
#services {
  width: 25%;
  float: left;
  margin-top: 4%;
}

.section h2 {
  color: #333;
  margin-bottom: 10px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
  font-weight: bolder !important;
  line-height: 1.2 !important;
  font-size: 152% !important;
}
.section h3 {
  margin-bottom: 0.5rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif  !important;
  font-weight: bolder !important;
  line-height: 1.2 !important;
  font-size: 1.3rem !important;
}

.section p {
  line-height: 2;
  color: #686868;
  position: relative;
  padding-left: 29px;
  font-size: 1.1rem;
  margin-bottom: 3rem;
  margin-top: 6%;
}

.section p::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px; /* Çizginin genişliği */
  background-color: #b44e4e; /* Çizginin rengi */
}

.section ul {
  list-style-type: none;
  padding: 0;
}

.section li {
  padding: 15px 0;
  font-size: 0.98rem;
  /* list-style-type: none; /* Varsayılan madde işaretlerini kaldırır */
  position: relative;

}
.tickLi::before {
  content: '\2713'; /* Unicode tik işareti karakteri (✔) */
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: #986667; /* Tik işaretinin rengi */
  font-size: 20px; /* Tik işaretinin boyutu */
}
.tickLi{
 padding-left: 25px !important; 

}
.section img {
  width: 100%;
  height: auto;
  margin: 20px 0;
}

.clearfix {
  clear: both;
}

/* Responsive tasarım için medya sorguları */

/* Ekran genişliği 1024px ve daha küçük olduğunda */
@media (max-width: 1024px) {
  #projects, #services {
    width: 100%;
    float: none;
    margin: 10px 0;
  }

  .section {
    padding: 15px;
  }

  .section p {
    padding-left: 20px;
  }

  .section p::before {
    width: 3px;
  }
}

/* Ekran genişliği 768px ve daha küçük olduğunda */
@media (max-width: 768px) {
  .wrapper {
    width: 100%;
  }

  #projects, #services {
    width: 100%;
  }

  .section p {
    padding-left: 18px;
  }

  .section p::before {
    width: 2px;
  }

  .section img {
    margin: 15px 0;
  }
}

/* Ekran genişliği 480px ve daha küçük olduğunda */
@media (max-width: 480px) {
  .wrapper {
    width: 100%;
  }

  #projects, #services {
    width: 100%;
    float: none;
    margin: 0;
  }

  .section {
    padding: 10px;
  }

  .section p {
    padding-left: 15px;
  }

  .section p::before {
    width: 2px;
  }

  .section img {
    margin: 10px 0;
  }

  .section h2 {
    font-size: 1.3rem;
  }

  .section h3 {
    font-size: 1rem;
  }

  .tickLi::before {
    font-size: 16px;
  }
}