/* Defining variables */
:root {
    --primary-color: rgba(0, 255, 255, 1);
    --secondary-color: rgba(33, 37, 41, 1);
    --bg-dark-color: rgba(204, 255, 255, 1);
    --bg-light-color: rgba(0, 77, 77, 1);
}


nav.navbar {
  color: var(--primary-color);
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.85);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}


#background_image {
  background-repeat: no-repeat;
  color: white;
  padding-top: 5em;
  padding-bottom: 5em;
}


h1 {
  padding-top: 1em;
  padding-bottom: 0.7em;
}



.card-title, .text-muted {
  color: var(--secondary-color);
}


#cozumler, #neden_biz, #projeler, #iletisim {
  padding-top: 2.5em;
}


#footer {
  color: var(--primary-color);
  background: var(--secondary-color);
}


.btn-primary {
  color: var(--secondary-color);
  background: var(--primary-color);
  border-color: var(--primary-color);
}


.btn-primary:hover {
  color: var(--primary-color);
  background: var(--secondary-color);
  border-color: var(--primary-color);
}


.btn-outline-light {
  color: var(--primary-color);
  border-color: var(--primary-color);
}


#projeler img {
  transition: transform 0.3s ease;
  cursor: pointer;
}

#projeler img:hover {
  transform: scale(1.05);
}


#icon-box {
  width: 80px;
  height: 80px;
  background-color: var(--primary-color);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: 2.5rem;
  transition: all 0.3s ease;
}

#icon-box:hover {
  background-color: var(--secondary-color);
}


.carousel-caption {
    color: var(--primary-color);
}


.carousel-caption-shadow {
  border-radius:10px;
  box-shadow: inset 0 0 20rem rgba(0, 0, 0, 0.7)
}


#pageTopBtn {
    position: fixed; 
    bottom: 20px; 
    right: 20px;  
    display: none; 
    z-index: 1000; 
}