body {
	      background: #fff;
	    }
	    .header-bar {
	      background-color: #18239e;
	      height: 50px;
	      width: 100%;
	    }
	    .search-bar {
	      margin: 30px 0;
	    }
	    .search-bar input {
	      border: 1px solid #18239e;
	      color: #18239e;
	    }
	    .title{color:#fff;text-align:center;}  
		  
		  
		  
		  
		  
		  
		  
		  
		  
		  .card-box {
  background-color: #f5f5f5;
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: contain;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s;
}
.card-box:hover {
  transform: scale(1.05);
}
/* make carousel controls always visible */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.6); /* dark background */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-size: 60%, 60%;
}

/* raise above content */
.carousel-control-prev,
.carousel-control-next {
  z-index: 20;
  opacity: 1; /* на всякий случай */
}

/* fix if controls are cut off */
.carousel {
  overflow: visible !important;
}







.modal-content {
  border-radius: 8px;
  background-color: #fff;
}

.modal-body img {
  transition: transform 0.3s ease;
}

.modal-body img:hover {
  transform: scale(1.03);
}

@media (max-width: 768px) {
  .modal-dialog {
    max-width: 95%;
  }
  .modal-body {
    flex-direction: column;
  }
}