@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@100;200;300;400;500;600;700;800;900&display=swap');

:root {
  --main: #3C6954;
  --primary: #96A3B2;
  /* --secondary: #3D6853; */
  --red: #D92B6C;
  --text1: #676565;
  --text2: #808285;
  --black: #030405;
  --lightGrey: #F5F5F5;
}

body {
	font-family: 'Noto Sans Display', sans-serif;
  color: var(--black);
}

/* div { border: 1px solid red;} */

a {
  color: var(--main);
  text-decoration: none;
}
a:hover {
  color: var(--text2);
  transition: 0.3s;
}

.active a, .nav-link.active {
  color: var(--main) !important;
}

.title {
  font-size: 60px !important;
  font-weight: 200;
}

h2 {
  font-weight: 200;
}

.tekst {
  color: var(--text1);
  font-size: 0.9em;
  font-weight: 200;
  line-height: 26px;
  text-align: justify;
}

.navbar {
	border-bottom: 1px solid #bbb;
}


/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_navbar_shrink_scroll */

/* underline effect on menu */
.nav-item a { 
  color: var(--primary); 
  display: inline-block; 
  margin: 0; 
  /* text-transform:uppercase;  */
  text-decoration: none;
}
.link-anim a:hover { color: var(--main) !important; }
.link-anim a:after {
  display: block;
  content: '';
  border-bottom: solid 1px var(--main);  
  transform: scaleX(0);  
  transition: transform 250ms ease-in-out;
}
.link-anim-white a:after { border-bottom: solid 1px white !important;  }
.link-anim a:hover:after { transform: scaleX(1); }
.link-anim a.fromRight:after { transform-origin:100% 50%; }
.link-anim a.fromLeft:after {  transform-origin:  0% 50%; }

/* Menu */
.inputField {
  border: 0px none;
  border-bottom: solid 1px #ddd;
  border-radius: 0%;
  background-color:rgba(0,0,0,0) !important;
}
.inputField::placeholder {
  color: #aaa;
  font-size: 0.9em;
}

button {
  font-size: 0.9em !important;
  color: var(--main) !important;
  background-color:rgba(0,0,0,0) !important;
  border: 1px solid var(--main) !important;
  border-radius: 24px !important;
  padding: 12px !important;
}
button:hover {
  color: white !important;
  background-color:var(--main) !important;
  transition: 0.5s;
}


.menu-side {
  font-size: 0.9em;
  letter-spacing: 0.2em;
  font-weight: 600;
}


/* Product card */
.card {
  display: inline-flex; /* Use inline-flex to keep the parent inline-block */
  justify-content: center; /* Center the child horizontally */
  align-items: center; /
}
.card img {
  width: 100%;
  /* min-height: 200px; */ 
}
.card a {
  text-decoration: none;
  color: var(--black);
}
.card .naziv {
  font-size: 0.9em;
  font-weight: 500;
}
/* .card:hover .naziv {
  text-decoration: underline;
} */
.card .podnaslov {
  font-size: 0.8em;
  color: var(--text2);
}
.podnaslov-smaller-text {
  /* font-size: 0.6em !important; */
  transform: scale(0.8);
}
.novo {
  font-size: 0.8em;
  color: white !important;
  /* text-transform: uppercase; */
  font-weight: 400;
  background-color: var(--main);
  border-radius: 16px;
  margin-bottom: 4px;
  padding: 4px 16px 4px 16px;
  width: fit-content;
}
.uskoro {
  background-color: purple !important;
}

.zoom-hover:hover {
  transform: scale(1.1);
}
.zoom-hover {
  transition: transform .5s ;
}

.placeholderbox {
	background: linear-gradient(-45deg, #eee, #aaa, #fff, #ccc);
	background-size: 400% 400%;
	animation: gradient 15s ease infinite;
  border-radius: 10px;
}
@keyframes gradient {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}



/* Breadcrumb: Fix for inline arrow */
.breadcrumb-item + .breadcrumb-item::before {
  float: none;
}
.breadcrumb-item {
  font-size: 0.8em;
}



/* Product page */
.dot {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
}

.selected {
  border: 1px #ccc solid;
  border-radius: 3px;
}
.hidden {
  visibility:hidden;
}


/* VenoBox */
.vbox-close {
  background-color: #777;
  border-radius: 50%;
  padding: 12px 12px !important;
  margin: 16px 16px !important;
}

.vbox-overlay {
  height: 100% !important;
}