body {
  font-family: 'Poppins', sans-serif;
}

/* Navbar stil */
.navbar {
  background-color: #ffffff;
}

.navbar-brand {
  font-weight: bold;
}

.navbar-nav .nav-link {
  font-size: 1.1rem;
  font-weight: 600;
  color: rgb(0, 0, 212);
}

.navbar-nav .nav-link:hover {
  color: #b42929;
}

.address-text {
  font-size: 1.6rem; /* Larger text size for desktop */
  font-weight: 900; /* Bold text */
  color: black; /* Address text color */
  text-transform: uppercase; /* Uppercase to make it stand out */
}


/* Kayan yazı için stil */
.sliding-text-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #b42929; /* Arka plan rengi */
  padding: 10px 0;
  text-align: center;
  margin-bottom: 20px;
  border-radius: 15px;
}

.sliding-text {
  display: inline-block;
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  white-space: nowrap;
  animation: slide 10s linear infinite; /* 10 saniyede bir kayar */
}

/* Hakkımızda kısmı */
#about {
  background-color: #f8f9fa;
}

#about h2 {
  font-size: 2.5rem; /* Büyük ekranlarda boyut normal */
}

#about p {
  font-size: 1.1rem;
}

/* Promosyonlar kısmı */
#promotions .card {
  transition: transform 0.2s ease;
}

#promotions .card:hover {
  transform: scale(1.05);
}

.col-md-3:hover{
  transform: scale(1.05);
}

/* Footer */
footer {
  background-color: #333;
  color: white;
  padding: 20px 0;
}

@keyframes slide {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
/* ---- Responsive Mobil Cihazlar İçin ---- */
@media (max-width: 768px) {
  /* Navbar yazı büyüklüğü ve logo */
  .navbar-brand img {
    width: 120px; /* Logo mobilde daha küçük */
    height: 80px;
  }

  /* Navbar'daki bağlantıların yazı boyutu */
  .navbar-nav .nav-link {
    font-size: 1rem; /* Mobilde yazı boyutu küçüldü */
  }

  /* Adres yazısı mobilde küçülsün ve logo ile haritanın altına gelsin */
  .address-text {
    font-size: 1rem; /* Mobilde daha küçük adres yazısı */
    font-weight: 500; /* Yazı kalınlığı mobilde biraz azaltıldı */
    margin-top: 10px;
  }

  /* Logonun ve haritanın yan yana görünmesini sağlayalım */
  .navbar-brand-container {
    display: flex; /* Logo ve harita resmini yan yana göster */
    justify-content: flex-start; /* Mobilde logoyu ve haritayı solda hizala */
    align-items: center;
  }

  /* Logonun yanında harita mobilde görünsün */
  .navbar-brand {
    margin-right: 15px; /* Logo ile harita arasında boşluk */
  }

  .sliding-text {
    font-size: 1.2rem; /* Mobilde yazı boyutu biraz daha küçük */
  }

  /* Hakkımızda kısmı başlık ve yazı boyutları */
  #about h2 {
    font-size: 2rem; /* Mobilde daha küçük */
  }

  #about p {
    font-size: 0.9rem; /* Yazı daha küçük */
  }

  /* Slider'daki resim mobilde daha iyi ölçeklensin */
  .carousel-inner img {
    height: auto; /* Yüksekliği otomatik ayarlanır */
    max-height: 300px; /* Resmin maksimum yüksekliği sınırlanır */
  }

  /* Promosyon Kartları mobilde tam genişlik alsın */
  #promotions .col-md-4 {
    width: 100%; /* Kartlar mobilde tam genişlikte */
    margin-bottom: 20px; /* Kartlar arası boşluk mobilde artırıldı */
  }

  .col-md-3 img {
    height: auto; /* Yüksekliği otomatik ayarlanır */
    object-fit: cover; /* Resmin tamamı görünür, taşmaz */
    width: 100%; /* Genişlik mobilde tam genişlikte olsun */
    margin-bottom: 20px; /* Kartlar arası boşluk mobilde artırıldı */
  }

  /* Footer mobilde küçülsün */
  footer {
    padding: 15px 0;
  }
}