/* Genel stil */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f5f5f5; /* Arka plan rengi */
}

header {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

header h1 {
  font-size: 20px; /* Başlık boyutunu artır */
  margin: 0;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  height: 40px;
  border-radius: 50%;
}

.logo h1 {
  font-size: 20px;
  font-weight: bold;
  margin-left: 10px;
}

.call-button {
  background-color: #ff5e00;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
}

/* Başlık stil */
.title-section {
  text-align: center;
  margin: 20px 0;
}

.title-section h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
}
.title-section h3 {
  font-size: 15 px;
  font-weight: bold;
  color: #333;
}

/* Resim çerçevesi */
.image-frame {
  display: flex;
  justify-content: center; /* Resmi yatayda ortalamak için */
  align-items: center; /* Resmi dikeyde ortalamak için */
  max-width: 100%; /* Çerçeve maksimum genişliği ekran genişliğine göre ayarlanacak */
  margin: 0 auto; /* Sayfa genişliğine göre merkezlemek için */
  border: 5px solid #000000; /* Çerçeve rengi ve kalınlığı */
  border-radius: 8px; /* Kenar yuvarlaklığı */
  padding: 1; /* İçeriye boşluk */
  box-sizing: border-box; /* Padding ve border'ı içeriye dahil eder */
}

/* Resim */
.image-frame img {
  max-width: 100%; /* Resmin maksimum genişliği %100 olacak */
  height: auto; /* Genişlik oranına göre yükseklik otomatik ayarlanacak */
  border-radius: 4px; /* Resmin köşelerine yuvarlaklık ekleme */
}




/* Mobil cihazlar için ekran genişliği ayarı */
@media only screen and (max-width: 600px) {
  .image-frame img {
    max-width: 100%; /* Resmin maksimum genişliği ekran genişliğine kadar olacak */
    height: auto; /* Genişlik oranına göre yüksekliği otomatik olarak ayarlamak için */
  }
}


/* Dükkanlar stil */
.shop-section {
  text-align: center;
  margin-bottom: 20px;
}

.shop {
  margin: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.shop h4 {
  margin: 0;
  padding: 0;
  font-size: 20px; /* Başlık boyutunu artır */
  font-weight: bold;
  color: #333;
}

.shop h4 a {
  color: #000000; /* Metin rengi */
  text-decoration: underline; /* Altını çiz */
  cursor: pointer; /* Fare imleci değiştir */
}

.shop h4 a:hover {
  color: #0056b3; /* Fare üstüne geldiğinde metin rengi */
}


.search-button {
  background-color: #06650a;
  color: #fff;
  border: none;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 10px;
}

/* Footer stil */
footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.contact-info h4 {
  margin: 0;
  padding: 0;
  font-size: 20px; /* Başlık boyutunu artır */
  font-weight: bold;
  color: #fff;
}

.contact-info a {

  color: #fff;
}

.contact-info p {
  margin: 5px 0;
  padding: 0;
  color: #fff;
}

/* Eklemeler */
main {
  padding: 20px; /* Ana içerik alanına boşluk ekle */
}

.service-card,
.customer-card {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Gölgelendirme */
}

.service-card h3,
.customer-card strong {
  font-size: 20px; /* Başlık boyutunu artır */
  font-weight: bold;
  color: #333;
}

.service-card p,
.customer-card p {
  font-size: 16px; /* Paragraf boyutunu artır */
  color: #555;
}

#services,
#customer-reviews {
  padding: 20px; /* Bölümlere boşluk ekle */
  background-color: #f9f9f9; /* Arka plan rengi */
  border-radius: 10px;
  margin-bottom: 20px;
}

#services h2,
#customer-reviews h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

/* Hizmet Verdiğimiz Bölgelerimiz bölümü */
#serving-areas {
  padding: 20px;
  background-color: #333;
  color: #fff;
  border-radius: 10px;
  margin-bottom: 20px;
}

#serving-areas h2 {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 20px;
}

#district-list {
  text-align: center;
}

#district-list h2 {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
}

#district-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#district-list ul li {
  margin-bottom: 10px;
}

#district-list ul li h6 a {
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  margin: 0;
  padding: 0;
}

#district-list ul li h3:hover {
  color: #ff5e00; /* Hover rengi */
}

.mobile-call-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #005e22;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
  color: white;
  text-decoration: none;
}

.mobile-call-bar:hover {
  background-color: #057842; /* Renk değişimi hover efekti için */
}

.mobile-call-bar i {
  margin-right: 20px;
}

.mobile-call-bar span {
  font-weight: bold;
}