body {
    width: 100%;    
    height: 100%;    
    letter-spacing: 0.2px;  
	padding-top:46px;
	background:white;
	font-family: "Nunito", sans-serif;
}



  
		#demo {
			position: relative;
			width: 100%;
			height: 400px;
		}

		/* Stil za pozicioniranje opisa */
		.carousel-caption-custom {
			position: absolute;
			top: 30%;
			left: 0;
			width: 50%;
			height: 100px; /* Prekriva cijelu visinu slike */
			background-color: rgba(125, 0, 125, 0.6); /* Transparentna pozadina */
			padding: 10px;
			text-align: left;
			*display: flex;
			justify-content: left; /* Horizontalno centriranje */
			align-items: center; /* Vertikalno centriranje */
			flex-direction: column; /* Naslovi jedan ispod drugog */
			z-index: 10; /* Osiguraj da je caption iznad slike */
		}

			/* Dodaj stil za naslov */
			.naslov_1 {
				overflow: hidden;
				border-right: .11em solid white;
				white-space: nowrap;
				font-family: 'Special Elite', monospace;
				font-size: 28px;
			    font-weight: 100;
				width: 0;
				color: #fff;
				animation: typing 3s steps(40, end) forwards;
				animation-delay: 0.8s;
			}

			.naslov_2 {
				overflow: hidden;
				border-right: .11em solid white;
				white-space: nowrap;
				font-family: 'Special Elite', monospace;				
				font-size: 22px;
				font-weight: 100;
				width: 0;
				color: #fff;
				animation: typing 3s steps(40, end) forwards;
				animation-delay: 4s;
			}

			@keyframes typing {
				from {
					width: 0
				}
				to {
					width: 100%
				}
			}

		/* Postavi visinu slike u carousel na 400px */
		.carousel-item img {
			max-height: 400px;
			object-fit: cover;
			width: 100%;
			z-index: 1; /* Slika iza captiona */
		}

		
		/* Responzivni stilovi za manje ekrane */
		@media screen and (max-width: 800px) {
			#demo {
				position: relative;
				width: 100%;
				height: 250px;
			}
			
			/* Naslovi prekrivaju cijelu sliku i tekst je centriran */
			.carousel-caption-custom {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(30, 30, 30, 0.6);
				padding: 10px;
				font-size: 20px;
				font-weight: bold;
				text-align: center;
				display: flex;
				justify-content: center; /* Horizontalno centriranje */
				align-items: center; /* Vertikalno centriranje */
				flex-direction: column; /* Tekstovi jedan ispod drugog */
				z-index: 10; /* Osiguraj da je caption iznad slike */				
			}

		}


									
	.section_naslov{
		font-family: Montserrat;
		font-weight:100; 
		letter-spacing: 0.2px; 
		color:#aaa; 
		line-height:1.5;		
	}
						
	
	hr {
		border-top: 1px solid #ddd;
		margin:10px 0;
		color:#ddd;
		background:#eee;
	}
	
	
	
			#naslov{
				font-family: Montserrat;	
				font-size:40px;
				text-align:center;
				font-weight:100;
				margin-bottom:20px ; 
			}	
			
				@media screen and (max-width: 800px) {
				  #naslov {
					width: 100%;
					font-size:30px;			
					margin-bottom:20px;
				  }
				}

	
	
					/* kartica index */	

					.card_index {	
					  position: relative;
					  width:98%;
					  border-radius:8px;
					  margin:6% 2%;					  
					  text-align: center;
					  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); 
					  opacity:1; 
					  transition: 1s;
					}
					
					.card_naslov {
					  position: absolute;
					  color: #fff;
					  left:5%;
					  bottom:-15px;
					  background: rgba(2, 60, 101, 0.8); 
					  text-align: left;
					  width: 90%;
					  height:80px;
					  min-height:60px;  
					  padding: 5px 10px;
					  box-shadow:10px 10px 20px #ccc;				  
					  transition: 1s;
					  text-align:center !important;							  
					}
					
					.card_naslov_p{	
					  text-align:center !important;	
					  font-size:15px !important;
					  letter-spacing: 1.5px;
					  font-weight:200 !important;	
					  color:#fff !important;	
					}				
					
					.card_body{	
					  height:80px;
					  min-height:80px;
					}


					.card_index:hover {	
					  opacity:0.8;
					  box-shadow: 0 0 0 rgba(0, 0, 0, 0.5); 					  
						  .card_naslov { 
							position: absolute; 
							bottom:0; 
							background:rgba(0, 133, 200, 0.8); 
							box-shadow:0 0 0 #ccc;
							width: 78%;
							left:11%;
						  }
					}

					@media screen and (max-width: 800px) {
					  .card_index{
						width: 96%;
						margin:0 2% 20px 2%;
					  }
					}

					.respon_50{
					  float:left;
					  width:46%;
					  margin:10px 1%;
					}	

					@media screen and (max-width: 800px) {
					  .respon_50 {
						width: 94%; 
					  }
					}

							/* section o_nama */
								.o-nama-container {
								  padding: 50px;
								  background-color: #34cdc6;
								  text-align: center;
								}

								.o-nama-container h2 {
								  font-size: 2.5rem;
								  margin-bottom: 20px;
								}

								.o-nama-container p {
								  font-size: 1.1rem;
								  line-height: 1.6;
								  color: #333;
								  max-width: 800px;
								  margin: 0 auto 40px auto;
								}

								.cards-container {
								  display: flex;
								  justify-content: space-around;
								  flex-wrap: wrap;
								}

								.card {
								  background-color: white;
								  border-radius: 10px;
								  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
								  width: 30%;
								  padding: 20px;
								  margin: 15px;
								  transition: transform 0.3s ease;
								}

								.card:hover {
								  transform: translateY(-10px);
								}

								.card img {
								  width: 100%;
								  border-radius: 10px 10px 0 0;
								}

								.card h3 {
								  margin-top: 15px;
								  font-size: 2.5rem;
								  color: #333;
								  font-family: Poiret One!important;
								}
								
								.card h4 {
								  margin-top: 15px;
								  font-size: 1.5rem;
								  color: #999;
								  font-family: Poiret One!important;	  
								}	
								
								

								.card p {
								  color: #555;
								}

								@media (max-width: 768px) {
								  .card {
									width: 100%;
								  }
								}

								/* Animacija prilikom skrolanja */
								.o-nama-container {
								  opacity: 0;
								  transform: translateY(50px);
								  transition: all 1.5s ease-out;
								}

								.o-nama-container.animate {
								  opacity: 1;
								  transform: translateY(0);
								}
								
								
								
									  /* Sekcija cijene */
									  #section_cijene {
										margin: 0;
										padding: 0;
									  }

									  .carousel-cijene-container {
										display: flex;
										justify-content: center;
										align-items: center;
										position: relative;
										width: 100%;
										height: 430px;
										perspective: 1400px;
										margin: 0 auto;
										overflow: visible; /* Omogućava prikaz lijeve i desne krajnje kartice */
									  }

									  .card-cijene {
										position: absolute;
										width: 280px;
										height: 380px;
										padding: 0;
										background-color: #fff;
										border-radius: 15px;
										box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
										text-align: center;
										transition: transform 0.5s ease, opacity 0.5s ease;
										opacity: 0.7;
										cursor: pointer;
										transform-origin: center;
										z-index: 0;
									  }

									  .active-cijena {
										transform: translateX(0) scale(1.2);
										opacity: 1;
										z-index: 3;
									  }

									  .prev-cijena {
										transform: translateX(-70%) scale(1);
										z-index: 2;
									  }

									  .prev2-cijena {
										transform: translateX(-140%) scale(0.9);
										z-index: 1;
									  }

									  .next-cijena {
										transform: translateX(70%) scale(1);
										z-index: 2;
									  }

									  .next2-cijena {
										transform: translateX(140%) scale(0.9);
										z-index: 1;
									  }
									  
											  
									  
									  .card-cijene img {
										 height:150px;
										 width:100%;
										 object-fit: cover;
										 border-top-left-radius:15px;
										 border-top-right-radius:15px;
									  }
									  
									.proiz_naslov{
										height:80px; 
									  }
									  .proiz_podnaslov{
										height:70px;  
									  }
									  .proiz_naslov h4 {
										font-family: Poiret One;
										font-size: 18px;
										color: #113366;	
									  }
									  
									  .proiz_podnaslov h5 {
										font-size: 14px;
										color: #002255;	
									  }									  

									  .card-cijene ul {
										list-style: none;
										padding: 20;
									  }

									  .card-cijene ul li {
										margin: 2px 0;
										font-size:14px;
									  }

									  .card-cijene .btn-select{
										padding: 5px 20px;
										background-color: #0085c8;
										color: white;
										border: none;
										border-radius: 10px;
										cursor: pointer;
									  }
									  
									  .btn-select a{
										  text-decoration:none;
										  color:white;
									  }  

									  /* Mobilna verzija */
									  @media screen and (max-width: 768px) {

										.carousel-cijene-container {
										  display: block;
										  width: 100%;
										  height: auto;
										  perspective: none;
										}

										.card-cijene {
										  position: relative;
										  width: 80%;
										  min-height:400px;
										  margin: 50px auto;
										  opacity: 1;
										  transform: none;
										  z-index: 1;
										}

										.active-cijena, .prev-cijena, .prev2-cijena, .next-cijena, .next2-cijena {
										  transform: none;
										  z-index: 1;
										}
									  }								
					
	
	
			#clanak{
				width:100%; 
				color:#666;
				font-family: Montserrat;
				z-index:-1;
			}
			
			#clanak span {
				font-size:16px;		
			}
			
			
			#clanak h4 {
				font-family: Montserrat;
				color:#888;
			}	

			#clanak p {
				font-family: Montserrat;
				font-size:16px;	
				color:#666;
			}			
			
				@media screen and (max-width: 800px) {
					  #clanak {
						width: 96%; 
						margin:0 auto;
					  }
					}

			
			
		/*	Članak glavna slika članka */
	
			.container_cl {
				position: relative;
				margin: 0 auto;  
			}
			
			.container_naslov {
				text-decoration: none;		
				color:#666;
				font-size:14pt;
				margin:0;
				padding:10px;
				font-weight:300;    
				vertical-align: middle;	
				background-color: #f9f6fe; 
			}			

			.container_cl img{
				width:100%;
			}
			
			.container_cl .content_cl {
			  position: absolute;
			  top:0;
			  background: rgb(0, 0, 0); /* Fallback color */
			  background: rgba(0, 10, 10, 0.5); /* Black background with 0.5 opacity */
			  color: #ddd;
			  width: 100%;
			  font-size:18px;
			  padding: 10px 3%;
			}
			
			.container_cl .content_cl h1, h2, h3,h4,h5{
				color:#eee;
			}				

				.container_cl .content_cl h1{
					font-size:28px;
					color:#fff;
					font-weight:100;
				}

					@media screen and (max-width: 1100px) {
					  .container_cl .content_cl h1{
					   font-size:4vw;
						margin-top:0;
					  }
					}						

							.sadrzaj{
								padding:10px 10px 100px 10px;
								position:relative;

							}
					
								.sadrzaj table {
								  border-collapse: collapse;
								  width: 100%;
								}

								.sadrzaj td, .sadrzaj th {
								  border: 1px solid #999;
								  padding:10px;
								}

								.sadrzaj tr:hover {background-color: #ddd;}

								.sadrzaj th {
								  padding-top: 12px;
								  padding-bottom: 12px;
								  text-align: left;
								  background-color: #4CAF50;
								  color: white;
								}
								
								.rezervacija_top{
									position:absolute;
									top:360px;
									right:20px;
								}								
								
								.rezervacija_bottom{
									position:absolute;
									bottom:90px;
									left:0;	
									width:100%;									
								}
								
								.rezervacija_bottom2{
									position:absolute;
									bottom:20px;
									right:20px;
									padding:10px 40px;
								}								
								
									@media screen and (max-width: 800px) {
										.rezervacija_bottom2{
											position:absolute;
											bottom:10px;
											right:10px;
											font-size:18px;
											font-weight:800;
											padding:5px 20px;
										}
									}						
								

					
	.footer {
		font-family: Montserrat;			
		width: 100%;	
		background: #fff; 
		color: #777;
		*text-align: center;
		font-size: 12px;  
		padding:20px;
		box-shadow: 0 -6px 10px #eee;	
		margin-top:30px;
	}

	.footer h2{
		font-family: Montserrat;
		font-size: 17px; 
		line-height: 1.55;
		margin:2px;
		color:#777;		
	}

	.footer h4{
		font-family: Montserrat;
		font-size:15px;
		line-height: 1.55;		
		margin:2px;
		color:#777;		
	}	
	
	.footer h4 a{
		font-family: Montserrat;
		font-size:16px;	
		margin:2px;
		color:#777;
		text-decoration: none;				
	}
	
	.footer h4 a:hover{
		font-family: Montserrat;
		color:red;
		font-weight:800;
		text-decoration: none;		
	}