body {
  font-family: 'Poppins', sans-serif;
  background-color: #203b37;
  color: #ffffff;
  margin: 0;
}

.navbar {
  background-color: #203b37 !important;
}

.hero {
  height: 100vh;
  background-image: url('images/hero.jpg');
  background-size: cover;
  background-position: center;
  position: relative;
  color: white;
  /* Karanlık filtre kaldırıldı */
}

.hero::before {
  display: none; /* Siyah karartma kaldırıldı */
}

.hero .container {
  position: relative;
  z-index: 2;
}

footer {
  background-color: #203b37;
  color: #cccccc;
}

/* Gereksiz açık renk arka plan kaldırıldı */
.bg-light {
  background-color: #203b37 !important;
}
.hero p.lead {
  font-size: 1.6rem;
  font-style: italic;
  color: #c18d52; /* Açık yeşil ton – doğayı temsil eder */
}
.hero h1 {
  color: #eee8b2; /* Beyaz renk */
  font-size: 5em; /* Başlık boyutunu büyütmek için */
  font-weight: bold; /* Kalın yaparak vurgulu hale getirebilirsin */
}

h1, h2, h3 {
  font-family: 'Raleway', sans-serif;
}

h1, h2, h3 {
  font-size: 2.5rem; /* Genel başlık boyutunu büyütüyoruz */
}

.animate-img {
  transform: scale(0.8);
  opacity: 0;
  animation: growIn 1s ease-out forwards;
}

@keyframes growIn {
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.full-gallery {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-color: #203b37;
}

.gallery-img {
  width: 45%;
  min-width: 300px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  opacity: 0;
  transform: scale(0.8);
  transition: all 1.5s ease-out;
}

.gallery-img.in-view {
  opacity: 1;
  transform: scale(1);
}
.service-card:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
}

/* Hizmet kartları için ikon boyutunu daha da büyüt */

.service-card {
  background-color: #5a8f76; /* Kart arka planı rengi */
  color: #eee8b2; /* Yazı rengi */
  border: none; /* Kenarlık yok */
  transition: transform 0.3s ease, background-color 0.3s ease; /* Hover efekti */
}

.service-card:hover {
  transform: translateY(-5px); /* Hover efektinde kart yükselir */
  background-color: #4a7c65; /* Hover sırasında arka planın biraz daha koyulaşması */
}

/* Hizmet başlıkları için yazı rengini güncelle */
.service-card .card-title {
  color: #eee8b2; /* Başlık yazı rengi */
}

/* Hizmet açıklamaları için yazı rengini güncelle */
.service-card .card-text {
  color: #eee8b2; /* Açıklama yazı rengi */
}

/* Hizmet kartlarının ikon renklerini de ayarlayalım */
.service-card i {
  color: #eee8b2; /* İkon rengi */
}
/* Hizmetler başlığı rengini değiştirme */
#hizmetler h2 {
  color: #eee8b2; /* Hizmetler başlığının rengi */
}

/* Hizmetler altındaki açıklama yazısının rengini değiştirme */
#hizmetler p {
  color: #eee8b2; /* Alt yazı renginin değiştirilmesi */
}
.hero p.lead {
  color: #eee8b2; /* Yazının rengini #eee8b2 olarak değiştirdik */
}
#hakkimizda {
  background-color: #203b37; /* Arka plan rengini belirleyebilirsiniz */
  color: #eee8b2; /* Yazı rengi */
}

#hakkimizda img {
  border-radius: 10px; /* Fotoğraf köşelerini yuvarlatmak için */
}

/* Hakkımızda bölümündeki içerik */
#hakkimizda .container {
  display: flex;
  flex-wrap: wrap; /* Küçük ekranlar için öğelerin alt satıra geçmesini sağlarız */
  justify-content: center; /* İçeriği yatayda ortalar */
  align-items: center; /* İçeriği dikeyde ortalar */
  gap: 30px; /* Fotoğraf ve yazı arasındaki boşluk */
}

/* Fotoğraf kısmı */
#hakkimizda .container img {
  max-width: 100%; /* Resmin genişliği konteynere göre ayarlanır */
  height: auto; /* Yükseklik oranı korunur */
  border-radius: 10px; /* Kenarları yuvarlatır */
}

/* Yazı bölümünün stilini ayarlıyoruz */
#hakkimizda .container .text {
  color: #eee8b2; /* Yazı rengi */
  display: flex;  /* Flexbox ile yatay ve dikey ortalamayı yapacağız */
  flex-direction: column; /* Yazıyı dikey olarak hizalayacağız */
  justify-content: center; /* Yazıyı dikeyde ortalar */
  align-items: center; /* Yazıyı yatayda ortalar */
  max-width: 600px; /* Yazının genişliğini sınırlıyoruz */
  text-align: center; /* Metni ortalar */
  margin-top: 20px;
}

/* Başlık stilini düzenliyoruz */
#hakkimizda h2 {
  font-size: 3.0rem; /* Başlık boyutunu büyütmek için */
  font-weight: bold; /* Başlığı kalın yapmak için */
  margin-bottom: 20px;
}

/* Paragraf metni boyutunu ve aralığını artırıyoruz */
#hakkimizda p {
  font-size: 1.4rem; /* Paragraf metni boyutu */
  line-height: 1.6; /* Paragraf aralığını artırmak için */
}



.card {
  background-color: #96cdb0; /* Kart arka plan rengi */
  color: #eee8b2; /* Yazı rengi */
  display: flex;
  flex-direction: column;
  height: 100%; /* Kartların tam yüksekliğe sahip olmasını sağlarız */
  padding: 20px; /* İç padding */
  border-radius: 10px; /* Köşe yuvarlama */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Hafif gölgeleme */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Hoverda geçiş efekti */
}

.card:hover {
  transform: translateY(-10px); /* Hoverda kart biraz yukarıya kayacak */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Hoverda gölgeyi arttırma */
}

#iletisim {
  background-color: #f8f9fa; /* Açık gri arka plan */
  color: #333; /* Yazı rengi */
}

#iletisim .container {
  max-width: 800px; /* İçeriğin genişliğini sınırlayalım */
}

form .form-group label {
  font-size: 1.1rem; /* Etiket font boyutunu biraz büyütelim */
  font-weight: bold;
}

form .form-control {
  border-radius: 5px; /* Alanların köşelerini yuvarlayalım */
  padding: 10px; /* İç boşlukları biraz arttıralım */
  font-size: 1rem; /* Yazı font boyutu */
  border: 1px solid #ddd; /* Kenarlık rengi */
}

form .form-control:focus {
  border-color: #5a8f76; /* Focus olunca border rengini değiştiriyoruz */
  box-shadow: 0 0 5px rgba(90, 143, 118, 0.5); /* Hafif gölge efekti */
}

form button {
  background-color: #5a8f76; /* Buton rengi */
  color: white; /* Yazı rengi */
  font-size: 1.2rem; /* Buton yazı boyutu */
  padding: 15px; /* Butonun iç paddingi */
  border: none; /* Kenarlık kaldır */
  border-radius: 5px; /* Buton köşelerini yuvarla */
  transition: background-color 0.3s ease;
}

form button:hover {
  background-color: #4a7a64; /* Hoverda renk değişikliği */
}


/* Form input kutularının görünümü */
.custom-input {
  background-color: #29463f;
  border: 1px solid #5a8f76;
  color: #eee8b2;
  border-radius: 8px;
  padding: 10px 15px;
  transition: all 0.3s ease;
}

.custom-input:hover {
  border-color: #96cdb0;
  background-color: #32584f;
}

.custom-input:focus {
  border-color: #96cdb0;
  box-shadow: 0 0 10px rgba(150, 205, 176, 0.4);
  background-color: #32584f;
  color: #fff;
}


/* Form kutusu genel stil */
.contact-form {
  background-color: #2b4e47;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Buton görünümü */
.contact-form button {
  font-weight: bold;
  border-radius: 8px;
  padding: 10px;
  background-color: #5a8f76;
  border: none;
  transition: background-color 0.3s ease;
}

.contact-form button:hover {
  background-color: #4a7c65;
}



#email:hover {
  background-color: #3c6e60;
  border-color: #b2e0cc;
  color: #ffffff;
  box-shadow: 0 0 8px rgba(150, 205, 176, 0.5);
  transition: all 0.3s ease;
}
#iletisim-formu {
  background-color: #2a4f45; /* koyu yeşil arka plan */
  padding: 40px;
  border-radius: 15px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
  max-width: 700px;
  margin: 0 auto;
  color: #eee8b2; /* yazı rengi */
}
.footer {
  background-color: #203b37;
  color: #eee8b2;
  padding: 40px 0;
  font-family: 'Poppins', sans-serif;
}

.footer h5 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

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

.footer ul li {
  margin-bottom: 8px;
}

.footer i {
  transition: transform 0.3s ease, color 0.3s ease;
}

.footer i:hover {
  transform: scale(1.2);
  color: #fff;
}

@media (max-width: 768px) {
  .footer .text-md-end {
    text-align: center !important;
  }
}
/* Navbar menü linkleri */
.navbar-nav .nav-item .nav-link {
  position: relative; /* Konumlandırmayı başlatıyoruz */
  padding: 8px 20px; /* Linklerin içine biraz boşluk ekliyoruz */
  border-radius: 20px; /* Ovalimsi köşe oluşturuyoruz */
  color: #eee8b2; /* Yazı rengini #eee8b2 yapıyoruz */
  border: 2px solid #081b1b; /* İnce bir çerçeve ekliyoruz */
  transition: all 0.3s ease; /* Hover efekti için geçiş efekti */
}

/* Navbar linklerine hover efekti ekliyoruz */
.navbar-nav .nav-item .nav-link:hover {
  background-color: #081b1b; /* Hoverda arka plan rengini değiştireceğiz */
  color: #eee8b2; /* Yazı rengini hoverda da aynı bırakıyoruz */
  border-color: #081b1b; /* Çerçevenin rengini de aynı yapıyoruz */
}