@font-face {font-family: square; 	src: url(/fontovi/square.ttf);	font-display: swap;}	
@font-face {font-family: Righteous; 	src: url(/fontovi/Righteous-Regular.ttf);	font-display: swap;}	  
@font-face {font-family: Figtree; 	src: url(/fontovi/Figtree-VariableFont_wght.ttf );	font-display: swap;}

/* Fonts */
:root {
  --default-font: "Figtree",  system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --nav-font: "Figtree",  sans-serif;
  --zlatna:rgb(212, 167, 98);
}


html{scroll-behavior: smooth; 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;}
*, *:before, *:after {
	-webkit-box-sizing: inherit;
	-moz-box-sizing: inherit;
	box-sizing: inherit;
}

.text-žuti, .text-yellow{color:yellow}
.square, .Square{font-family: 'square',sans-serif !important;}
.Figtree, .figtree, .body-font, .font-body {font-family: 'Figtree',sans-serif !important;}
.bg-white{background-color: white;}
.object-fit-cover{object-fit:cover}
.object-fit-contain{object-fit:contain}
.object-position-center{object-position:center}

a:visited, a:hover, a:active, a:link{color:yellow}
a:hover p{color:yellow !important; }
.bg-dark{background-color: #000000 !important;}
.bg-žuti, .bg-yellow{background-color: yellow !important;}
.border-žuti, .border-yellow{border-color:yellow !important}
.cliped-top{clip-path: polygon(0 0, 100% 2rem, 100% 100%, 0% 100%);}
.cliped-bottom{clip-path:polygon(0px 0px, 100% 0px, 100% 100%, 0px calc(100% - 2rem))}
.cliped-bottom.cliped-top{clip-path:polygon(0px 0px, 100% 2rem, 100% 100%, 0px calc(100% - 2rem))}
p{margin-bottom:.8rem;}
.zoom-in{transition:.1s;  }
.zoom-in:hover{transform:scale(1.01);}
button, button, .btn-close{opacity: 1;}
button:hover .carousel-control-prev-icon, 
button:hover .carousel-control-next-icon,
.btn-close:hover{filter:brightness(0) saturate(100%) invert(91%) sepia(87%) saturate(957%) hue-rotate(354deg) brightness(104%) contrast(108%);}

/*** Spinner and HERO Start ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .8s ease-out, visibility 0s linear .5s;
    z-index: 999;
 }

 #spinner.show {
     transition: opacity .8s ease-out, visibility 0s linear .0s;
     visibility: visible;
     opacity: 1;
 }


/*proizvodi*/
.proizvod{height:auto; margin-top:-80px; padding-top:40px;} 
@media (min-width:992px) {
   .proizvod{height:300px; } 
}
/*** Spinner End ***/


.back-to-top {
    position: fixed;
    right: 30px;
    bottom: 30px;
    z-index: 99;
}
body{ font-family: 'Figtree', sans-serif !important; background-color: black;  }


h2, h3, .h2, .h3 {
    font-weight: 400 !important;
    font-family: 'Square', cursive !important;
}

h4, h5, h6, .h4, .h5, .h6 {
    font-weight: bold !important;
    font-family: 'Square', sans-serif !important;
}

.my-6 {
    margin-top: 6rem;
    margin-bottom: 6rem;
}

.py-6 {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.wow,
.animated {
    animation-duration: 2s !important;
}


/*** Button Start ***/
.btn.btn-primary {
    border: 0;
}

.btn.btn-primary:hover {
    background: var(--bs-dark) !important;
    color: var(--bs-primary) !important;
}

.btn {
    font-weight: bold;
    transition: .5s;
}

.btn-square {
    width: 32px;
    height: 32px;
}

.btn-sm-square {
    width: 38px;
    height: 38px;
}

.btn-md-square {
    width: 44px;
    height: 44px;
}

.btn-lg-square {
    width: 56px;
    height: 56px;
}

.btn-square,
.btn-sm-square,
.btn-md-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}
/*** Button End ***/


/*** Navbar Start ***/
.nav-bar {
    background: var(--bs-light);
    border-bottom: 1px solid var(--zlatna);
    box-shadow:0 0 .5em #0003;
}
/*header*/

header{
	position: fixed; top:0; left: 0;
	height:4em; width:100vw; 
	z-index:999;
	background-color: rgba(0,0,0,0);}
	#header_logo{
		position: fixed;
		bottom:-.2vh;
		left: 0;
		width:18em;
        max-width: 100vw;
        max-height:20vh;
        object-fit: contain;
        object-position: bottom left;
		height:auto;
		}
	/*@media only screen and (max-width: 576px) {
		#header_logo{width:100vw;
					height:30vw;}
	}*/						
	#header_menu_bg{
		position: fixed; 
		top:0; right:0;
		width:15em;
		height:5.548em;
		display: block;
		background-image: url(/assets/img/header/logo-trokut.svg);
		background-size: cover;
		background-position: top left;
		background-repeat: no-repeat;
		transform: rotate(180deg);
	}		
	#header_menu{
			position: fixed; 
			top:0; right:0;
			width:4em;
			height: 4em;
			display: flex;
			}
		.nav_crta{
			display: block;
			background-color: white; 
			height:8%; width: 100%;
			margin:20% auto;
			clear: both;
			transition: .5s;
			}
		.nav_crta:first-of-type{transform-origin:top left;}
		.nav_crta:last-of-type{transform-origin:bottom left;}
:root {
  --visina_botuna_headera: 33.3333333vh;
}    			
	header nav a{text-decoration: none; 
				font-family: square;  
				position: fixed;
				top:0;
				left:-50vw;
				height:var(--visina_botuna_headera);
				width: 50vw;
				cursor: pointer;
				display: flex; justify-content: center; 
				align-items: center; align-content: center;
				flex-wrap: wrap;
				text-transform: uppercase;
				background-size:auto 3em;
				background-repeat: no-repeat;
				background-position: center calc(50% - 1em);
				padding-top:3em;}	
	header nav a:nth-of-type(2n - 1){left:-50vw}
	header nav a:nth-of-type(2n){left:100vw}
	header nav a:nth-of-type(5),header nav a:nth-of-type(6){top:var(--visina_botuna_headera)}
	header nav a:nth-of-type(7),header nav a:nth-of-type(8){top:calc(2 * var(--visina_botuna_headera))}
	header nav a:hover{color:yellow; }
    header nav a.header_jezik{height:50vh !important;}
	#header_jezici{position: fixed;
					top:0.5em;
					right:5em;
					width:3em;
					height:3em;
					background-color: white;
					cursor: pointer;
					border: .6em solid black;
					background-size: cover;
					background-position: center;
					}	
	#header_jezici:hover{border:.5em solid black;}			


.navbar-light .navbar-nav .nav-link{color:#333; font-weight: normal !important; opacity:1}
.jezici{color: var(--zlatna) !important;}
.dropdown-menu{border-color: transparent; border-radius: 0;}
.dropdown-menu .nav-item{COLOR:rgb(51, 51, 51) !important}
.navbar .navbar-nav .nav-link {
    padding: 10px 12px;
    font-weight: 600;
    font-size: 17px;
    transition: .5s;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--bs-primary);
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    vertical-align: middle;
    margin-left: 8px;
}

@media (min-width: 1200px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        transition: .5s;
        opacity: 0;
    }
    
    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0deg);
        visibility: visible;
        opacity: 1;
    }
}

.dropdown .dropdown-menu a:hover {
    background: var(--bs-primary);
    color: var(--bs-white);
}
.dropdown .dropdown-menu a.active{color: var(--zlatna) !important;}
.dropdown .dropdown-menu a.active:hover{background: none !important;}

#searchModal .modal-content {
    background-color: rgba(255, 255, 255, .95);
}
/*** Navbar End ***/

/*** Pocetna Start ***/
.naslov{color: yellow; 
	font-size: 370%;
	font-family:square, arial;}

h1{width: 100%; 
	height: auto; 
	background-color: yellow;
	padding-right: 15rem;
	border-bottom: .15REM SOLID BLACK;
	color: black;
	background-image: url(/assets/img/header/header-kockice.svg);
	background-size:auto 110% ;
	background-repeat: repeat-x;
	background-position: left;
    font-family: 'Righteous','Square',sans-serif;}	
@media (max-width:570px) {
    h1{padding-right:10.75rem;}
}    
@media (max-width:450px) {
    h1{padding-right: 8rem;}
}    
#carouselHero img{height:calc(100vh - 2rem)}
@media (max-width:576px) {
    #carouselHero img{height:90vw !important}
}
/*** Pocetna End ***/

/*** Events Start ***/
.event .tab-class .nav-item a.active {
    background: var(--bs-primary) !important;
}
.lb-data .lb-number{display: none !important;}
.lb-data .lb-caption{font-weight: 200 !important; color:white !important; opacity: 1 !important;}
.event .event-img .event-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(212, 167, 98, 0.7);
    border-radius: 8px;
    transition: 0.5s;
    opacity: 0;
    z-index: 1;
}

.event .event-img:hover .event-overlay {
    opacity: 1;
}
/*** Events End ***/


/*** Vehicles start ***/

/*.zoom-in:hover{transform: scale(1.01);}*/

.service .service-item {
    position: relative;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}

.service-content::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    bottom: auto;
    background: var(--bs-primary);
    border-radius: 8px;
    transition: 1s;
}

.service-item:hover .service-content::after {
    height: 100%;
    opacity: 1;
}

.service-item .service-content-icon {
    position: relative;
    z-index: 2;
}

.service-item .service-content-icon i,
.service-item .service-content-icon p {
    transition: 1s;
}

.service-item:hover .service-content-icon i {
    color: var(--bs-dark) !important;
}

.service-item:hover .service-content-icon p {
    color: var(--bs-white);
}

.service-item:hover .service-content-icon a.btn-primary {
    background: var(--bs-white);
    color: var(--bs-dark);
}

.service-item .service-content-icon a.btn-primary {
    transition: 1s !important;
}
/*** Services End ***/


/*** Menu Start ***/
.menu .nav-item a.active {
    background: var(--bs-primary) !important;
}

.menu .menu-item .border-bottom {
    border-bottom-style: dashed !important;
}
/*** Menu End ***/


/*** Youtube Video start ***/
.video {
    position: relative;
    height: 100%;
    min-height: 400px;
    background: linear-gradient(rgba(254, 218, 154, 0.1), rgba(254, 218, 154, 0.1)), url(../img/fact.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
}

.video .btn-play {
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    box-sizing: content-box;
    display: block;
    width: 32px;
    height: 44px;
    border-radius: 50%;
    border: none;
    outline: none;
    padding: 18px 20px 18px 28px;
}

.video .btn-play:before {
    content: "";
    position: absolute;
    z-index: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 100px;
    height: 100px;
    background: var(--bs-primary);
    border-radius: 50%;
    animation: pulse-border 1500ms ease-out infinite;
}

.video .btn-play:after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: block;
    width: 100px;
    height: 100px;
    background: var(--bs-white);
    border-radius: 50%;
    transition: all 200ms;
}

.video .btn-play img {
    position: relative;
    z-index: 3;
    max-width: 100%;
    width: auto;
    height: auto;
}

.video .btn-play span {
    display: block;
    position: relative;
    z-index: 3;
    width: 0;
    height: 0;
    border-left: 32px solid var(--bs-dark);
    border-top: 22px solid transparent;
    border-bottom: 22px solid transparent;
}

@keyframes pulse-border {
    0% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
        opacity: 1;
    }

    100% {
        transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
        opacity: 0;
    }
}

#videoModal {
    z-index: 99999;
}

#videoModal .modal-dialog {
    position: relative;
    max-width: 800px;
    margin: 60px auto 0 auto;
}

#videoModal .modal-body {
    position: relative;
    padding: 0px;
}

#videoModal .close {
    position: absolute;
    width: 30px;
    height: 30px;
    right: 0px;
    top: -30px;
    z-index: 999;
    font-size: 30px;
    font-weight: normal;
    color: #FFFFFF;
    background: #000000;
    opacity: 1;
}
/*** Youtube Video End ***/


/*** Blog Start ***/
.blog-item {
    position: relative;
}

.blog-item img {
    transition: 0.5s;
}

.blog-item:hover img {
    transform: scale(1.3)
}

.blog-item .blog-content {
    position: relative;
    transform: translateY(-50%);
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}

.blog-item .blog-content a.btn h5 {
    transition: 0.5s;
}

.blog-item:hover .blog-content a.btn h5 {
    color: var(--bs-primary) !important;
}
/*** Blog End ***/


/*** Team Start ***/
.team-item {
    width: 100%;
    height: 100%;
    position: relative;
}

.team-item .team-icon {
    position: absolute;
    top: 0;
    right: 0;
}

.team-item .team-icon .share-link {
    opacity: 0;
    transition: 0.9s;
}

.team-item:hover .share-link {
    opacity: 1;
}

.team-item .team-content {
    transition: 0.9s;
}

.team-item:hover .team-content {
    background: var(--bs-primary) !important;
    color: var(--bs-dark) !important;
}

.team-item .team-content h4,
.team-item .team-content p {
    transition: 0.5s;
}

.team-item:hover .team-content h4 {
    color: var(--bs-dark) !important;
}

.team-item:hover .team-content p {
    color: var(--bs-white);
}
/*** Team End ***/


/*** testimonial Start ***/
.testimonial-item {
    border: 1px solid var(--bs-primary);
    padding: 20px 20px;
}

.testimonial-carousel .owl-item img {
    width: 100px;
    height: 100px;
}

.testimonial-carousel.owl-rtl .testimonial-item {
    direction: ltr !important;
}
/*** testimonial End ***/


/*** Contact start ***/
.contact-form {
    box-shadow: 0 0 45px rgba(0, 0, 0, .08);
}

/*** Contact End ***/


/*** Footer Start ***/
/*footer{border-top:1px solid var(--zlatna); box-shadow:0 0 .5em #0003;}
footer a.active{color:var(--zlatna) !important; pointer-events: none;}*/
footer a:hover,footer a:focus{color:yellow !important}
.footer .footer-item a.text-body:hover {
    color: yellow !important;
}
/*** Footer End ***/


/* For Webkit browsers (Chrome, Safari, Edge, Opera) */
.količina_za_košaricu{width:auto}
.količina_za_košaricu input[type="number"]::-webkit-outer-spin-button,
.količina_za_košaricu input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Remove default appearance */
    margin: 0; /* Remove margin that might remain */
}
.količina_za_košaricu input[type="number"] {
    -moz-appearance: textfield; /* Render as a normal text field */
}

.količina_za_košaricu input[type="number"]:focus-visible{border:none !important; outline: none !important;}

.modal-content{border:2px solid var(--zlatna);}

/*** testimonial Start ***/
.testimonial-item {
    border: 1px solid var(--bs-primary);
    padding: 20px 20px;
}

.testimonial-carousel .owl-item img {
    width: 100px;
    height: 100px;
}

.testimonial-carousel.owl-rtl .testimonial-item {
    direction: ltr !important;
}
/*** testimonial End ***/