@charset "utf-8";
/* CSS Document */
/* SADRŽAJ
1. DIZAJN POČETNE STRANE
1.1. Stilovi navigacije
1.2. Stil za slajdove/slike u headeru
1.3. Stilovi za kartice sa uslugama
1.4. Stilovi za sivi odeljak na početnoj strani
1.5. Stilovi za footer
2. DIZAJN OSTALIH STRANICA 
2.1. Stil za odvajanje sadržaja od ivica
2.2. Stil za naslov na stranici
2.3. Stil za slike na stranici
2.4. Stil za linkove na stranici 
2.5. Stilovi za kontakt formu*/
/* 1. DIZAJN POČETNE STRANE */
body{
	padding-top: 4.5rem;
	}
/* 1.1. Stilovi navigacije */
.nav-bg{
	background: f8f9fa; /*url(../images/snow-bg.png);*/
}
.navigation-link{	
	color: rgba(0,0,0,.5);
	font-weight: bold;
	text-decoration: none;
	display: block;
    padding: .5rem;
}
.navigation-link:hover{
	color: #a9000b;
	text-decoration: none;
	font-weight: bold;
	display: block;
    padding: .5rem;
	transition: 0.5s;
	}
.navigation-link-active{	
	color: #a9000b;
	text-decoration: none;
	font-weight: bold;
	display: block;
    padding: .5rem;
}
.navigation-link-active:hover{
	color: #a9000b;
	text-decoration: none;
	font-weight: bold;
	display: block;
    padding: .5rem;
	transition: 0.5s;
	}
/* 1.2. Stil za slajdove/slike u headeru */
.full-screen {
  width: 100%; 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* 1.3. Stilovi za kartice sa uslugama */
.card:hover{
	box-shadow: 0 0 5px 5px rgb(64,64,64,0.5);
	transition: 0.5s;
	}
.card-space{
	width: 23rem;
	margin: 1% 0.5%;
	}
.card-img-top{
	opacity: 0.5;
}
.card-img-top:hover{
	opacity: 1;
	transition: 0.5s;
}
/* DODATAK ZA NOVU GODINU */
/*.card{
     background: url(../images/snow-bg-cards.png);
}*/
/* KRAJ DODATKA ZA NOVU GODINU */
.btn-cards {
    color: #fff;
    background-color: #353535;
    border-color: #000;
	font-size: 0.8rem;
	font-weight: bold;
	padding: 4% 10%;
}
.btn-cards:hover{
	color:#fff;
	background-color: #a9000b;
	text-decoration: none;
	font-weight: bold;
	transition: 0.5s;
	}
.card-title-link{	
	color: #212529;
}
.card-title-link:hover{
	color:#a9000b;
	text-decoration: none;
	transition: 0.5s;
	}
/* 1.4. Stilovi za sivi odeljak na početnoj strani */
.gray-panel{
	background-color: #cbcaca; 
	border-radius: 0.25rem;
	margin-bottom: 2%;
	}
.pik-card{
	margin: 1%;
	width: 22rem;	
	}
.pik-title a{
	color: #212529;
	}
.pik-title a:hover{
	color: #a9000b;
	text-decoration: none;
	transition: 0.5s;
	}
.pik-tekst{
	font-size: 0.7rem;
	}
.pik-img{
	width: 100%;
	margin: 2%;
	}
/* Stilovi za portfolio na početnoj strani */
.container_slika {
  position: relative;
  width: 50%;
  margin: 0 0 1% 0;
  padding: 0;
}

.slide_slika {
  display: block;
  width: 90%;
  height: auto;
}

.prelaz {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #322f2f;
  overflow: hidden;
  width: 90%;
  height: 0;
  transition: .5s ease;
  opacity: 0.9;
}

.container_slika:hover .prelaz {
  height: 100%;
}

.text_slika {
  white-space: nowrap; 
  color: white;
  font-size: 20px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
/* Funkcionalnost otkrivanja objekata */
.reveal{
  position: relative;
  transform: translateY(150px);
  opacity: 0;
  transition: 1s all ease;
}

.reveal.active{
  transform: translateY(0);
  opacity: 1;
}
.active.fade-bottom {
  animation: fade-bottom 1s ease-in;
}
.active.fade-left {
  animation: fade-left 1s ease-in;
}
.active.fade-right {
  animation: fade-right 1s ease-in;
}
@keyframes fade-bottom {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left {
  0% {
    transform: translateX(-100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes fade-right {
  0% {
    transform: translateX(100px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}
/* 1.5. Stilovi za footer */
.bg-footer{
	background-color: #2f2f2f;
	}
.footer-h2{
	color: #fff;
	text-transform: uppercase;
	font-size: 1rem;
	padding-top: 5%;}
.footer-ul{
	color: #fff;
	list-style-type: none;
	padding-inline-start: 0px;
	font-size: 0.8rem;
	}
.footer-li a{
	color: #fff;
	}
.footer-li a:hover{
	color: #a9000b;
	text-decoration: underline;
	transition: 0.3s;
	}
.text-footer{
	color:#fff;
	font-size: 0.7rem;
	margin-top: 1%;
	}
.social-icons:hover{
	opacity: 0.5;
	transition: 0.5s;
	}
/* Dugme za povratak na vrh stranice */
#dugme-vrh {
  display: none;
  position: fixed;
  bottom: 5%;
  right: 1%;
  z-index: 99;
  font-size: 1rem;
  border: none;
  outline: none;
  background-color: #a90000;
  color: white;
  cursor: pointer;
  padding: 1%;
  border-radius: 4px;
  transition: all .3s linear;
}
#dugme-vrh:hover {
  background-color: #2e2e2e;
}
/* 2. DIZAJN OSTALIH STRANICA */
/* 2.1. Stil za odvajanje sadržaja od ivica */
.page-content{
	padding: 0 5%;
	}
.col-lg-8{
	padding: 0;
}
/* 2.2. Stil za naslov na stranici */
h1{
	font-size: 2rem;
}
h2{
	font-size: 1.5rem;
}
.title-page{
	margin: 1% 0 2% 0;
    }
.title-page a{
	color: #212529;
	}
.title-page a:hover{
	color: #a9000b;
	text-decoration: none;
	transition: 0.5s;
	}
.subtitle-page{
	margin: 1% 0 2% 0;
	color: #a9000b;
	font-size: 18pt;
	text-transform: uppercase;
    }
/* 2.3. Stil za slike na stranici*/
.page-img{
	border-radius: 0.25rem;
	margin: 1%;
	}
.linkovane-slike{
	border-radius: 0.25rem;
	margin: 2%;
	border: 2px solid #a9000b;
	}
.linkovane-slike:hover{
	opacity: 0.5;
	transition: 0.5s;
	}
/* 2.4. Stil za linkove na stranici */
p a{
	color: #a9000b;
	text-decoration: none;
	font-weight: bold;
	
	}
p a:hover{
	color: #212529;
	text-decoration: none;
	transition: ease-in 0.3s;
	}
	
li a{
	color: #a9000b;
	text-decoration: none;
	
	}
li a:hover{
	color: #212529;
	text-decoration: underline;
	transition: 0.5s;
	}
.link-slika{
	margin: 1%;
}
/* 2.5 Stilovi za kontakt formu */
.obrazac{
	display: block;
	margin-bottom: 2%; 
	width: 100%;
	}

.alert-success{
  z-index: 1;
  background: #D4EDDA;
  font-size: 18px;
  padding: 20px 40px;
  right: 0;
  top: 10px;
  border-left: 8px solid #3AD66E;
  border-radius: 4px;
  margin-bottom: 2%;
}

.alert-error{
  z-index: 1;
  background: #FFF3CD;
  font-size: 18px;
  padding: 20px 40px;
  right: 0;
  top: 10px;
  border-left: 8px solid #FFA502;
  border-radius: 4px;
  margin-bottom: 2%;
}
.btn-obrazac{
    color: #fff;
    background-color: #353535;
    border-color: #000;
    font-size: 0.8rem;
    font-weight: bold;
    padding: 2% 5%;
}
.btn-obrazac-dodatak{
	padding: 1% 2%;
}
.btn-obrazac:hover{
	color:#fff;
	background-color: #a9000b;
	text-decoration: none;
	font-weight: bold;
	transition: 0.5s;
	}
.podnaslovi{ font-size: 1.5rem;}
.podnaslovi a{ font-size: 1.5rem; color: #212529; text-decoration: none; }
.podnaslovi a:hover{ font-size: 1.5rem; color: #a9000b; text-decoration: none; transition: 0.5s;}

/* PARALLAX SLIKA */
.parallax {
  /* The image used */
  background-image: url("../images/parallax/parallax.webp");
  /* Set a specific height */
  height: 500px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.parallax-content{
	height:2%;
}
.btn-parallax{
	margin-top: 2%;
}
.btn-parallax a{
	border: 2px solid #000;
    background-color: #e9cb1c;
    border-radius: 2rem;
    color: #fff;
    padding: 1% 3%;
    font-weight: bold;
    font-size: 1.4rem;
    text-decoration: none;
}
.btn-parallax a:hover{
	color: #000;
    background-color: #e9cb1c;
    border: 2px solid #000;
    box-shadow: 5px 5px 15px 5px #ccc;
    transition: ease-in 0.3s;
}
.text-parallax{
	text-align: center; 
	padding: 10%; 
	color: #000;
}
.naslov-parallax{
	font-weight: bold; 
	line-height: 3rem;
	font-size: 2rem;
}
/* Paneli za cenovnik */
.cenovnik{
	flex-wrap: unset;
	margin-bottom: 2%;
	}
.tbl_row{
    max-width: 1140px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
}
.tbl_col{
    flex: 1;
    background: #CCC;
    margin: 0 1rem;
    border-radius: 05px;
    text-align: center;
    padding: 2rem 0;
}
.tbl_col p{
    font-size: 22px;
}
.tbl_col h3{
    font-size: 2.5rem;
    margin: 20px 0 40px;
    font-weight: 500;
	color: #fff;
    background: #a9000b;
}
.tbl_col ul{
    text-align: center;
    margin-left: 0;
    list-style: none;
	padding-inline-start: 0;
	padding: 0 1%;
}
.tbl_col ul li{
    margin: 1.5rem 0;
}
.tbl_col ul li::before{
    content: "\27A4";
    margin-right: 10px;
    color: #a9000b;
    font-size: 16px;
    font-weight: 300;
}
.tbl_col button{
    width: 75%;
    border: none;
    padding: 14px 0px;
    background: transparent;
    color: #333;
    font-size: 15px;
    border: 1px solid #a9000b;
    border-radius: 05px;
    cursor: pointer;
    transition: all 0.3s;
}
.tbl_col button:hover{
    background: #a9000b;
    transition: 0.4s;
	color: #fff;
}
@media only screen and (max-width: 600px) {
	.page-img{	
	border-radius: 0.25rem;
	margin: 1%;
	width: 100%;
	}	
.link-slika {
    margin: 2% 0 1% 0;
}
.linkovane-slike{
	width: 100%;
	}
	#dugme-vrh {
  display: none;
  position: fixed;
  bottom: 5%;
  right: 1%;
  z-index: 99;
  font-size: 1rem;
  border: none;
  outline: none;
  background-color: #a90000;
  color: white;
  cursor: pointer;
  padding: 3%;
  margin-right: 1%;
  border-radius: 4px;
  transition: all .3s linear;
}
.container_slika {
  position: relative;
  width: 45%;
  margin: 1% 0 1% 5%;
  padding: 0;
}
.text_slika {
  white-space: nowrap; 
  color: white;
  font-size: 15px;
  position: absolute;
  overflow: hidden;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
footer{
	text-align: center;
}
}
@media(max-width: 768px){
	.cenovnik{
		flex-wrap: wrap;
        margin-bottom: 1%;
		}
    .tbl_row{
        flex-direction: column;
        gap: 2rem;
        padding: 1rem 0;
    }
    .tbl_col{
        width: 100%;
    }
}