/******************************************************
/// header, footer, intro
******************************************************/
.header, .footer, main { 
		opacity:0; transition:opacity 1s ease-in-out; transition:all 1700ms linear; 
		-webkit-animation:0.2s ease 0s normal forwards 1 fadein; animation:0.2s ease 0s normal forwards 1 fadein;}

header.visible, main.visible, footer.visible { opacity:1; }

.header.fade-in, .main.fade-in, .footer.fade-in { 
		opacity:1; -webkit-animation:0.3s ease 0s normal forwards 1 fadein; animation:0.3s ease 0s normal forwards 1 fadein; }

@keyframes fadein {
    0% { opacity:0; }
    66% { opacity:0; }
    100% { opacity:1; }
}
@-webkit-keyframes fadein{
   0% { opacity:0; }
   66% { opacity:0; }
   100% { opacity:1; }
}

footer {
	background-color:var(--raisin-black-3); 
	background-image:linear-gradient(to right, rgba(50,100,150,0.1) 1px, transparent 1px), linear-gradient(to bottom, rgba(50, 100, 150, 0.1) 1px, transparent 1px); 
	background-size:0.5rem 0.5rem; 
	background-position:0.25rem 0.25rem; 
	opacity:1; animation:fadeOutPreloader 1s ease forwards; 
	animation-delay:5.5s;
	z-index:9999;
}

footer .ncage-number { margin: 20px 0 0 0; }
footer .ncage-number .ncage { color: var(--platinum); font-size: 14px; line-height: var(--tg-body-line-height); }
footer .ncage-number .ncage span { font-size: 13px; font-weight: 800; display: inline-block; border-radius: 8px; padding: 3px 6px; color: var(--tg-theme-primary); background-color:var(--raisin-black-1); }

@media(max-width: 575px) {
    footer .ncage-number .ncage { text-align: center; }
}


.main-content { display: block; padding: 0; background: var(--raisin-black-1); height: auto; }
#main-content { opacity:1;}
#main-content.active { 
		opacity:1; -webkit-animation:0.5s ease 0s normal forwards 1 fadein; 
		animation:0.5s ease 0s normal forwards 1 fadein; }

#preloader { position:fixed; top:0; left:0; width:100vw; height:100vh; z-index:9999;}

.intro-container {  
		position:relative; width:100vw; height:100vh; 
		display:flex; align-items:center; justify-content:center; 
		overflow:hidden; background-color:#434241; 
		background-size: 	0.5rem 0.5rem; background-position:0.25rem 0.25rem; 
		opacity:1; animation:fadeOutPreloader 3s ease forwards; 
		animation-delay:7.5s; z-index:9999;
		
		/* Gradient - zeleni ton */
		background: linear-gradient(315deg, #0d0a0b 0%, #004942 74%);
		background: radial-gradient(circle at 50% 25%, #004942, #02111c);
}
.intro-container::after { content:""; position:absolute; top:0; left:0; width:100%; 
	height:100%; pointer-events:none; z-index:0; background:	
	repeating-conic-gradient(#0003 0%, #fff0 .00033%, #fff0 .00066%,  #fff0 .00099%),
	repeating-conic-gradient(#fff2 0%, #fff0 .0005%, #fff0 .0015%, #fff0 .019%);
	filter:blur(1px);
}
.intro-svg-wrapper { position:relative; z-index:2; overflow:hidden; z-index:999999; transition:transform 0.3s ease;}
.intro-svg-wrapper:hover { transform:scale(1.05); }
.intro-svg-wrapper svg { width:230px; height:auto; display:block; -webkit-filter:drop-shadow(1px 5px 6px rgba(0,0,0,0.65));}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.pulsing-element { display: inline-block;  animation: pulse 2s infinite ease-in-out; }
@keyframes animate-fill {
  from { fill-opacity: 0; stroke-opacity: 1; }
  to   { fill-opacity: 1; stroke-opacity: 0; }
}

.svg-elem-1 {-webkit-animation:animate-svg-stroke-1 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0s both, animate-fill 1s ease 2.5s both; animation:animate-svg-stroke-1 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0s both, animate-fill 1s ease 2.5s both;}
.svg-elem-2 {-webkit-animation:animate-svg-stroke-2 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.12s both, animate-fill 1s ease 2.5s both; animation:animate-svg-stroke-2 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.12s both, animate-fill 1s ease 2.5s both;}
.svg-elem-3 {-webkit-animation:animate-svg-stroke-3 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.24s both, animate-fill 1s ease 2.5s both; animation:animate-svg-stroke-3 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.24s both, animate-fill 1s ease 2.5s both;}
.svg-elem-4 {-webkit-animation:animate-svg-stroke-4 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.36s both, animate-fill 1s ease 2.5s both; animation:animate-svg-stroke-4 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.36s both, animate-fill 1s ease 2.5s both;}
.svg-elem-5 {-webkit-animation:animate-svg-stroke-5 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.48s both, animate-fill 1s ease 2.5s both; animation:animate-svg-stroke-5 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.48s both, animate-fill 1s ease 2.5s both;}
.svg-elem-6 {-webkit-animation:animate-svg-stroke-6 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s both, animate-fill 1s ease 2.5s both; animation:animate-svg-stroke-6 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.6s both, animate-fill 1s ease 2.5s both;}
.svg-elem-7 {-webkit-animation:animate-svg-stroke-7 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.72s both, animate-fill 1s ease 2.5s both; animation:animate-svg-stroke-7 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.72s both, animate-fill 1s ease 2.5s both;}
.svg-elem-8 {-webkit-animation:animate-svg-stroke-8 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.84s both, animate-fill 1s ease 2.5s both; animation:animate-svg-stroke-8 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.84s both, animate-fill 1s ease 2.5s both;}
.svg-elem-9 {-webkit-animation:animate-svg-stroke-9 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.96s both, animate-fill 1s ease 2.5s both; animation:animate-svg-stroke-9 1.4s cubic-bezier(0.175,0.885,0.32,1.275) 0.96s both, animate-fill 1s ease 2.5s both;}

#scene {position:fixed; top:50%; left:50%; width:1200px; height:600px; overflow:hidden; margin-top:300px; margin-left:-600px; background-color:black; box-shadow:0 0 0 2px white inset; z-index:9998; display:none;}
#curtain { width:100%; height:100%; position:relative;}
#curtain .init span {
 	 font-family: var(--tg-heading-font-family); width: 100%; height: 100%; display: block; position: absolute;
    text-align: center; margin: 0px auto; color: var(--light-gray); top: 50%; left: 50%; transform: translate(-50%, 50%);  z-index: 999999;
    font-size:25px; opacity:1; -webkit-animation:3.3s ease 0s normal forwards 1 fadein; animation:0.3s ease 0s normal forwards 1 fadein;
}
#curtain .top, #curtain .bottom {position:absolute; left:0; width:100%; height:50%; filter:brightness(180%);}
#curtain .top {top:0; transform-origin:bottom center; background-color:var(--raisin-black-3); box-shadow:0 6px 10px hsla(0,0%,0%,0.5); padding-block:20px;}
#curtain .top::before, #curtain .top::after {content:''; position:absolute; width:580px; height:50px; background-color:var(--raisin-black-3); bottom:-50px; box-shadow:0 3px 7px hsla(0,0%,0%,0.5);}
#curtain .top::before {left:0; clip-path:var(--polygon-2);}
#curtain .top::after {right:0; clip-path:var(--polygon-3);}
#curtain .bottom {bottom:0; transform-origin:top center; width:100%; height:50px; background-color:var(--light-gray);}
#curtain .bottom::after {content:''; position:absolute; left:482px; top:-49px; width:calc(100% - 965px); height:50px; background-color:var(--light-gray); clip-path:polygon(89% 0,100% 100%,100% 100%,0% 100%,0% 100%,11% 0%); z-index:99;}
#scene.expand {width:100%; left:0; top:50%; margin-left:0; background-color:rgb(32,32,32); box-shadow:none; animation:expand-scene-verticaly 1.5s ease-in-out forwards;}
#curtain.open .top {animation:curtain-opening 2s ease-in-out, top-curtain-opening 4s ease-in-out; animation-fill-mode:forwards;}
#curtain.open .bottom {animation:curtain-opening 2s ease-in-out, bottom-curtain-opening 4s ease-in-out; animation-fill-mode:forwards;}

@keyframes fadein {
0% {opacity:0;}
66% {opacity:0;}
100% {opacity:1;}
}

@keyframes fadeOutPreloader {
from {opacity:1;}
to {opacity:0;}
}

@keyframes animate-fill {
from {fill-opacity:0; stroke-opacity:1;}
to {fill-opacity:1; stroke-opacity:0;}
}

@keyframes animate-svg-stroke-1 {
0% {stroke-dashoffset:405.1px; stroke-dasharray:405.1px;}
100% {stroke-dashoffset:0; stroke-dasharray:405.1px;}
}
@keyframes animate-svg-stroke-2 {
0% {stroke-dashoffset:178.78px; stroke-dasharray:178.78px;}
100% {stroke-dashoffset:0; stroke-dasharray:178.78px;}
}
@keyframes animate-svg-stroke-3 {
0% {stroke-dashoffset:178.78px; stroke-dasharray:178.78px;}
100% {stroke-dashoffset:0; stroke-dasharray:178.78px;}
}
@keyframes animate-svg-stroke-4 {
0% {stroke-dashoffset:304.42px; stroke-dasharray:304.42px;}
100% {stroke-dashoffset:0; stroke-dasharray:304.42px;}
}
@keyframes animate-svg-stroke-5 {
0% {stroke-dashoffset:304.41px; stroke-dasharray:304.41px;}
100% {stroke-dashoffset:0; stroke-dasharray:304.41px;}
}
@keyframes animate-svg-stroke-6 {
0% {stroke-dashoffset:170.73px; stroke-dasharray:170.73px;}
100% {stroke-dashoffset:0; stroke-dasharray:170.73px;}
}
@keyframes animate-svg-stroke-7 {
0% {stroke-dashoffset:170.78px; stroke-dasharray:170.78px;}
100% {stroke-dashoffset:0; stroke-dasharray:170.78px;}
}
@keyframes animate-svg-stroke-8 {
0% {stroke-dashoffset:1701.3px; stroke-dasharray:1701.3px;}
100% {stroke-dashoffset:0; stroke-dasharray:1701.3px;}
}
@keyframes animate-svg-stroke-9 {
0% {stroke-dashoffset:547.2px; stroke-dasharray:547.2px;}
100% {stroke-dashoffset:0; stroke-dasharray:547.2px;}
}
@keyframes expand-scene-verticaly {
from {top:50%; height:600px; margin-top:-300px;}
to {top:0; height:100%; margin-top:0;}
}
@keyframes top-curtain-opening {
from {transform:translateY(0);}
to {transform:translateY(-100%); top:165px;}
}
@keyframes bottom-curtain-opening {
from {transform:translateY(0);}
to {transform:translateY(0%);}
}

.has-scrollbar::-webkit-scrollbar { height: 12px; }
.has-scrollbar::-webkit-scrollbar-button { width: 40px; }
.section-title { position: relative; text-align: center; margin-bottom: 30px; }
   
.section-cta { 
	 position: relative;
    text-align: center; margin: 0 auto 80px auto; color: var(--white); font-size: 15px;
    line-height: 27px; max-width: 650px; font-weight: 600; font-family: 'Unbounded'; border-top: 4px solid;
    border-left: 4px solid; border-bottom: 4px solid; border-image-slice: 1;
    border-image-source: linear-gradient(90deg, var(color-panel-link), transparent);
    padding: 25px; }


.header {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  padding-block: 20px;
  z-index: 99999;

  background-color: transparent;

  background-image:
    url("left-bg.png"),
    url("right-bg.png"),
    url("main-bg.jpg");

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat;

  background-position:
    left center,
    right center,
    center;

  background-size:
    contain,
    contain,
    cover;

  box-shadow: 0 6px 10px hsla(0, 0%, 0%, 0.5);
}


.blur-header::after { content: ''; position: absolute; width: 100%; height: 100%; background-color: hsla(23, 12%, 4%, .2); backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px); top: 0; left: 0; z-index: -1; }
.header-actions { display: none; }
.nav-open-btn { color: var(--white); font-size: 40px; padding: 5px; }
.navbar { position: fixed; top: 0; right: -300px; width: 100%; max-width: 300px; background: var(--raisin-black-2); height: 100%; box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.5); visibility: hidden; z-index: 2;  transition: var(--transition-2); }
.navbar.active { right: 0; visibility: visible; transition: var(--transition-3); }
.navbar-top { display: flex; justify-content: space-between; align-items: center; padding: 25px 10px; }
.navbar-top img { margin: 0auto; }

.nav-close-btn { color: var(--light-gray); font-size: 25px; padding: 10px; transform: translateX(15px); }
.navbar-list { border-top: 1px solid hsla(0, 0%, 100%, 0.1); margin-bottom: 30px; }
.navbar-link { color: var(--white); font-size: 15px; padding: 10px 25px; border-bottom: 1px solid hsla(0, 0%, 100%, 0.1); font-weight: var(--fw-500); transition: .15s ease-in-out; }
.navbar-link:is(:hover, :focus) { color: var(--light-gray); }
.nav-social-list { display: flex; justify-content: center; align-items: center; gap: 15px; }
.navbar-list li { position: relative; }
.navbar-list .dropdown { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease; opacity: 0; visibility: hidden; background: var(--raisin-black-2); padding: 0; position: absolute; top: 100%; left: 0; min-width: 200px; z-index: 10; box-shadow: 0 4px 8px rgba(0,0,0,0.3); }

	/* separator u izborniku */
	.tgmenu__navbar-wrap > ul > li .sub-menu hr { border-bottom: 1px solid var(--light-gray); margin: 10px 0; }
	
	/* modificiramo stil zadnjeg elementa */
	.modified-number {background-color: var(--platinum);border-radius:5px;font-size: 16px;display:inline-block;float: right;margin-right: 10px;padding: 0px 6px;color: var(--tg-theme-secondary);font-weight: var(--tg-fw-bold);}
	.tgmenu__navbar-wrap > ul > li .sub-menu > li a.text-muted .modified-number{ --bs-text-opacity: 0.5; background-color: var(--tg-theme-secondary) !important; color: var(--platinum) !important; font-size: 10px; margin-top:5px; }



/* Hover dropdown open (desktop) */
@media (min-width: 1024px) {
  .navbar-list li:hover > .dropdown { max-height: 500px; opacity: 1; visibility: visible; }
}

.dropdown-link { position: relative; z-index: 1; overflow: hidden; }
.dropdown-link:hover { transform: skew(0deg); background: var(--raisin-black-2); color: var(--light-gray); }
.dropdown-link::after { content: ''; position: absolute; inset: 0; transform: skew(15deg); background: var(--raisin-black-2); border-bottom: 3px solid var(--light-gray); z-index: -1; opacity: 0; transition: opacity 0.3s ease, background 0.3s ease, border-color 0.3s ease; }
.dropdown-link:hover::after { opacity: 1; background: var(--light-gray); border-color: var(--light-gray); }
/* Mobile open state */
.dropdown.open { position: relative; max-height: 500px; opacity: 1 !important; visibility: visible !important; }
/* Arrow icon */
.dropdown-arrow { display: inline-block; margin-left: 6px; transition: transform 0.3s ease; }
/* Rotate arrow when open */
.has-dropdown.open .dropdown-arrow { transform: rotate(180deg); }

.social-link { color: var(--light-gray); font-size: 18px; }

.hero { 
	margin-top: 0px; position:relative; display: flex; justify-content: center; align-items: center;
	background-image: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #fff), color-stop(100%, #010203));
	background-image: -webkit-radial-gradient(#374566, #010203);
	background-image: -moz-radial-gradient(#374566, #010203);
	background-image: -o-radial-gradient(#374566, #010203);
	background-image: radial-gradient(#666666, #000000);
	text-align: center; z-index:9; 
}

.news-ticker { margin: 0px 0 150px 0; overflow: hidden; white-space: nowrap; width: 100%; padding: 0; border-top: 1px solid #555; border-bottom: 0px solid transparent; position: relative; z-index:9999; }
.news-ticker .label { white-space: nowrap; background: var(--tg-theme-secondary); font-family: var(--tg-body-font-family); color: var(--platinum); font-size: 1.3rem; letter-spacing: 2px; font-weight: 800; display: flex; align-items: center; padding: 8px 20px 8px 50px; position: relative; display: inline-block; z-index:99999; }
.news-ticker .label::after { content: ""; position: absolute; top: 16px; right: -18px; border: 10px solid transparent; border-left-color: var(--tg-theme-secondary); }
.ticker-track { display: inline-block; white-space: nowrap; animation: scroll-left 60s linear infinite; }
.news-ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-item { display: inline-block; margin-right: 40px; margin: 0; position: relative; top: -3px; }
.ticker-item a { color: var(--tg-body-color); text-decoration: none; font-size: 14px; }
.ticker-item a span { position: relative; top: -3px; color: var(--tg-body-color); text-decoration: none; font-size: 11px; background: var(--raisin-black-3); border-radius: 5px; padding: 5px 6px; margin: 0 5px 0 15px; }

@keyframes scroll-left {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.section-wrapper { background: linear-gradient(to bottom, #cccccc 9%, #474747 3%, #b8b8b8 20%, #b8b8b8 27%, #d9d9d9 40%, #3e3e3e 78%);  }
.section-wrapper.crew { background: hsl(0deg 0% 11.37%);  }
.crew-shadow .sloganWrap,
.crew-shadow .sloganWrap::after { background: hsl(0deg 0% 11.37%);  }


.about { padding: 120px 0;  position:relative; display: flex; justify-content: center; align-items: center; }
.about-banner { margin-bottom: 10px; }
.about-img { width: 100%; }
.character { display: none; }
.about-content { background: var(--raisin-black-1); color: var(--white); padding: 40px 20px; border-radius: 4px;  box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.2); }
.about-subtitle { color: var(--light-gray); font-family: var(--tg-other-font-family); font-size: var(--fs-8); font-weight: var(--fw-500); text-transform: uppercase; margin-bottom: 15px; }
.about-title { font-family: var(--tg-other-font-family); font-size: var(--fs-2); line-height: 1.2; text-transform: uppercase; margin-bottom: 20px; }
.about-title strong { color: var(--light-gray); }
.about-text{ color: var(--light-gray); font-size: var(--fs-9);  line-height: 1.8; letter-spacing: 0.5px; } 
.about-text { margin-bottom: 20px; text-align: justify; }
.about-bottom-text { display: flex; justify-content: flex-start; align-items: flex-start; gap: 0px; } 
.about-bottom-text ion-icon { color: var(--light-gray); font-size: 25px; --ionicon-stroke-width: 45px; }

.tournament { padding: var(--section-padding) 0; color: var(--white); text-align: center; }
.tournament .btn-primary { width: max-content; margin-inline: auto; }
.tournament-content { margin-bottom: 50px; }
.tournament-subtitle { color: var(--light-gray); font-family: var(--tg-other-font-family); font-weight: var(--fw-500); text-transform: uppercase; margin-bottom: 10px; }
.tournament-title { margin-bottom: 20px; }
.tournament-text { color: var(--light-gray); font-size: var(--fs-9); line-height: 1.8; margin-bottom: 30px; }
.tournament-prize { margin-bottom: 50px; }
.tournament-prize data { background: var(--light-gray); color: var(--raisin-black-1); font-family: var(--tg-other-font-family); font-size: var(--fs-4); padding: 8px 42px; border-radius: 50px; cursor: pointer; }
.tournament-prize img { margin-inline: auto; }
.tournament-prize-title { font-size: var(--fs-3); margin-bottom: 20px; }
.tournament-winners { background: var(--raisin-black-3); padding: 40px 30px; border-radius: 4px; box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.2); }
.tournament-winners-title { font-size: var(--fs-3); margin-bottom: 25px; }
.tournament-winners-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 20px; }
.winner-card .card-banner { max-width: 90px; margin-inline: auto; margin-bottom: 15px; }
.winner-card img { width: 100%; }
.winner-card .card-title { background: var(--light-gray); width: max-content; margin-inline: auto; font-size: var(--fs-10); text-transform: uppercase; padding: 6px 10px; border-radius: 4px; }

/*Gallery*/
.gallery { padding: var(--section-padding) 0; }
.gallery-list { display: flex; justify-content: flex-start; align-items: center; gap: 15px; margin: -15px; overflow-x: auto; padding-bottom: 15px; scroll-snap-type: inline mandatory; padding-inline: 15px; }
.gallery-list li { min-width: 95%; scroll-snap-align: center; } .gallery-list img { width: 100%; border-radius: 4px; box-shadow: 0 2px 4px hsla(0, 0%, 0%, 0.2); }

/*Team*/

.team { padding: var(--section-padding) 0; } .team .btn-primary { margin-inline: auto; }
.team-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px; margin-bottom: 70px; } .team-list li { max-width: 40%; }
.team-member { position: relative; border-radius: 50%; border: 3px solid var(--raisin-black-3); transition: var(--transition-1); } .team-member:is(:hover, :focus) { border-color: var(--light-gray); } .team-member img { width: 100%; }
.team-member:is(:hover, :focus) ion-icon { opacity: 1; }




.sub_slider .list .item { width: 100%; height: 100%; background-size: cover; background-position: top center; position: relative; inset: 0 0 0 0; opacity: 1; transition: 3.3s; }


.share, .card-time-wrapper { position: absolute;color: var(--light-gray);}
.share { top: 31%;right: 16%;font-size: 40px;border: 2px solid var(--onyx);width: 60px;height: 60px;display: grid;place-items: center;border-radius: 50%;transition: var(--transition-1);box-shadow: 0 0 1px 1px hsl(0deg 0% 100% / 28%);}

.share:is(:hover, :focus ) { border-color: var(--light-gray); }
.card-time-wrapper {top: 2%;right: 5%;font-family: var(--tg-other-font-family);font-size: var(--fs-7);font-weight: var(--fw-500);text-transform: uppercase;display: flex;justify-content: center;align-items: center;gap: 5px;}



/*Media queries*/
@media(min-width: 420px) {
    :root { --fs-1: 70px; }
	 .dropdown-link:hover { color: var(--raisin-black-3);
}

@media(min-width: 575px) {
    :root { --fs-1: 90px; --fs-2: 45px; }
    .container { max-width: 540px; margin-inline: auto; }
    .about-banner { position: relative; max-width: 410px; margin-inline: auto; z-index: 1; }
    .character-2 { display: block; position: absolute; top: 120px; left: 160px; max-width: 150px; z-index: -1; }
    .about-content { padding: 60px 40px 0 40px; }
    .tournament-text { max-width: 500px; margin-inline: auto; }
    .gallery .container { max-width: unset; }
    .gallery-list li { max-width: 80%; }
}


.sloganWrap {bottom: 0;top: 0px;position: relative;left: 0;width: 100%;z-index: 99;padding-bottom:0;margin-top:0; background-color: hsl(0deg 0% 11.37%);}
.slogan {
        font-family: var(--tg-body-font-family);
        font-weight: 800; color: hsl(0deg 0% 72.94%); position: absolute; text-align: center; z-index: 9999999; left: 50%; line-height: 55px; transform: translateX(-50%); font-size: 45px; top: 100px;
        text-shadow: 0 3px hsla(0, 0%, 0%, 0.4); }


.sloganWrap::after {
        content: '';
        position: absolute;
        left: 475px;
        top: -48px;
        width: calc(100% - 951px);
        height: 50px;
        background-color: hsl(0deg 0% 11.37%);
        clip-path: polygon(89% 0, 100% 100%, 100% 100%, 0% 100%, 0% 100%, 11% 0%);
        z-index: 99;
}

@media (max-width: 768px) {
  .sloganWrap::before { display: none; }
}


@media (max-width: 1160px) {
  .sloganWrap::before { display: none; }
}


@media(min-width: 768px) {
    :root { --fs-1: 115px; --fs-2: 36px; }
    .container { max-width: 700px; }
    .has-scrollbar::-webkit-scrollbar-button { width: 150px; }
  

/*
  .header::before, .header::after { content: ''; position: absolute; width: 580px; height: 50px;  background-color: var(--raisin-black-1); bottom: -50px; box-shadow: 0 3px 7px hsla(0, 0%, 0%, 0.5); }
	.header::before { left: 0; clip-path: var(--polygon-2); }
	.header::after { right: 0; clip-path: var(--polygon-3); }
   */
	
	/* poligon ispod headera */
   .tg-header__area::before, .tg-header__area::after { content: ''; position: absolute; width: 580px; height: 50px;  background-color: var(--raisin-black-1); bottom: -50px; box-shadow: 0 3px 7px hsla(0, 0%, 0%, 0.5); }
	.tg-header__area::before { left: 0; clip-path: var(--polygon-2); }
	.tg-header__area::after { right: 0; clip-path: var(--polygon-3); }
	


.ego_bg_1 { background: #fff; }

.about-area-1 { background-color: hsl(0 0% 100% / 1);
    background-image: -webkit-gradient(radial, 50% 50%, 0, 70% 70%, 100, color-stop(0%, #fff), color-stop(100%, #010203));
    background-image: -webkit-radial-gradient(#374566, #010203);
    background-image: -moz-radial-gradient(#374566, #010203);
    background-image: -o-radial-gradient(#374566, #010203);
    background-image: radial-gradient(#666666, #000000); }
	 
.about-area-1 h2.title {
    color: var(--tg-theme-primary);
    font-family: var(--tg-body-font-family);
	 text-transform: uppercase;
}
.about-area-1  .sub-title {
    color: var(--tg-theme-secondary);
    font-family: var(--tg-heading-font-family);
}

.about-grid-card .box-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--tg-theme-primary);
    margin-top: -0.15em;
	 text-transform: uppercase;
}
.about-area-1 p {
    font-size: 17px;
    font-weight: 700;
    color: var(--platinum);
}	
.about-grid-card p.box-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--platinum);
}		  
	.header-actions { display: flex; justify-content: center; align-items: center; }
	.btn-sign-in {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        color: var(--light-gray);
        font-family: var(--tg-other-font-family);
        font-size: var(--fs-11);
        font-weight: var(--fw-500);
        text-transform: uppercase;
        letter-spacing: 1px;
        padding: 5px;
        border: 0;
        margin-left: 15px;
			transition: var(--transition-1);
}

.btn-sign-in:is(:hover, :focus) { color: var(--light-gray); }
.btn-sign-in .icon-box { 
	font-size: 18px; background: var(--raisin-black-2); padding: 3px 12px; margin-right: 0; border-radius: 5px;
}
.btn-sign-in span { padding: 10px; }





.header-actions a img {
  max-width:35px; height:35px; margin: -3px 5px 0 10px; background: var(--raisin-black-3);
  padding: 5px;
    border: 0;
	 border-radius: 50%; 
        box-shadow: 0 0 4px hsla(0, 0%, 0%, 0.6);
	 
}
.header-actions a img:hover {
    -webkit-animation: pop 0.3s 2;
    animation: pop 0.3s 2;
}
@-webkit-keyframes pop {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.1, 1.1);
    }
    100% {
        transform: scale(1, 1);
    }
}
@keyframes pop {
    0% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1.1, 1.1);
    }
    100% {
        transform: scale(1, 1);
    }
}










	.about-banner { max-width: 430px; }
    .character { display: block; position: absolute; z-index: -1; }
    .character-1 { width: 130px; top: 110px; left: -120px; }
    .character-2 { left: 200px; }
    .character-3 { top: 0; right: -112px; }
    .gallery-list { padding-bottom: 30px; } 
	 .gallery-list li { min-width: 70%; }
    .grid-modeli-list { grid-template-columns: 1fr 1fr; }



.mt-50 { margin-top: 50px }
.mt-100 { margin-top: 100px }
.mt-150 { margin-top: 150px }

@media(min-width: 1024px) {
    :root { --section-padding: 100px; }

    .container { max-width: 1000px; }
    .has-scrollbar::-webkit-scrollbar-button { width: 200px; }
   
   .header { padding-block: 0; }
		.header .site-branding {margin-right: 25px;}
		.header .site-title { display: flex; flex-direction: column; align-items: center; }
   .header .branding { position: relative; display: block; right: -40px; }
	.header .branding svg { position: relative; filter: grayscale(0); -webkit-filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5)); }
		
		.header .site-branding picture,
		.header .site-branding img { display: block;
  height: 125px; width: auto; transition: transform 0.3s ease; }
.header .site-branding picture:hover svg,
.header .site-branding picture:hover img { transform: scale(1.05); }
   
	.header .site-name { text-align: left; color: #fff; font-size: 14px; 	
line-height:18px; 	
font-weight: 800; 	
text-transform: uppercase; 	
margin-top: 7px; 	
margin-left: 5px; }
   
	.nav-open-btn { display: none; }
	
    .navbar {
        position: static;
        opacity: 1;
        visibility: visible;
        background: none;
        max-width: unset;
        width: max-content;
        height: auto;
        box-shadow: none;
        margin-left: 0px;
    }
/*  .navbar-top, .nav-social-list { display: none; } */
    .navbar-list { margin-bottom: 0; display: flex; justify-content: flex-end; 
	align-items: center; }
    .navbar-link {
        position: relative;
        color: var(--platinum);
        padding-block: 34px;
        border: none;
        font-family: var(--tg-other-font-family);
        text-transform: uppercase;
        letter-spacing: 1px;
        z-index: 1;
    }
        .navbar-link::after {
            content: '';
            position: absolute;
            inset: 0;
            transform: skew(10deg);
            border-bottom: 5px solid transparent;
            z-index: -1;
            transition: var(--transition-1);
        }
        .navbar-link:focus { outline: none; }
        .navbar-link:is(:hover, :focus )::after { background: var(--raisin-black-1); border-color: var(--light-gray); }



  .overlay {display: none;}

    .about { padding-top: 200px; }
    .about-content { max-width: 500px; margin-inline: auto; }
    .about-content.right {  margin-inline: auto; }
 
 .tournament {
        --fs-2: 30px;
        --fs-3: 30px;
        --fs-6: 16px; text-align: left; }
		
	.tournament .container { display: flex; justify-content: space-between; align-items: center; }
	.tournament .btn-primary { margin-inline: 0; }
    .tournament-content, .tournament-prize { margin-bottom: 0; }
	.tournament-content { max-width: 310px; }
    .tournament-prize, .tournament-winners { text-align: center; }
    .tournament-winners { padding: 45px 40px; }

    .gallery-list { gap: 30px; padding-inline: 30px; }
    .gallery-list li { min-width: 50%; }

    .card-time-wrapper { top: 4%; right: 8%; }

 

}


@media(min-width: 1200px) {
    :root { --fs-1: 150px; }

    .container { max-width: 1200px; }
	.container.wide { max-width: 1200px; }
    .navbar-link {padding-block: 16px;}
	.navbar-link:is(:hover, :focus) {/* padding-block: 34px; */}
	.has-dropdown .navbar-link:is(:hover, :focus )::after { padding-block: 0; }
       
   






    .about { background-size: 55%; background-position: 90% center; }
    .about .container { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; /* gap: 100px;*/ padding-right: 110px; }
    .about-banner { margin-inline: 0; margin-bottom: 0; }
    .character-2 { left: 155px; top: 70px; }
    .about-content { max-width: 600px; margin-inline: 0; }

    .team-list { gap: 20px; }

    
    .card-time-wrapper { top: 18.2%;right: 18%; }


}



/* Ego_swipper_360
.section-360-swiper { width:100%; max-width: 1200px; background-color: transparent; overflow: hidden; padding: 0; z-index: 99999; }
.swiper { width: 100%; height: 100vh; }
.swiper-slide { display: flex; justify-content: center; align-items: center; }
.canvas-360-wrapper { width: 100%; max-width: 1200px; aspect-ratio: 16/9; position: relative; z-index: 1; background: transparent; }
.canvas-360-wrapper canvas { width: 100%; height: 100%; display: block; }

.swiper-360-a {  }
.swiper-360-b { }

.cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 5; background: transparent;  }
.loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid #333; border-radius: 50%; animation: spin 1s linear infinite; }
.loader-text span { font-size: 12px; font-size: 12px; line-height: 20px; font-weight: 400; background: var(--raisin-black-3); color: var(--light-gray); letter-spacing: 1px; display: inline-block; padding: 3px 30px 3px 6px; font-weight: 800; }
.loader-text span:nth-child(2) { color: #ffffff; background: var(--red); font-weight: 900; font-size: 0.9rem; letter-spacing: 0px; text-transform: uppercase; position: absolute; top: 28px; left: 58px; transform: rotate(25deg); padding: 2px 3px 0px 3px; border-radius: 4px; border: 1px solid #eee; } 
.swiper-button-next, .swiper-button-prev { color: #000; width: 48px; height: 48px; }

@keyframes spin {
	0% { transform: translate(-50%, -50%) rotate(0deg); }
	100% { transform: translate(-50%, -50%) rotate(360deg); }
}
  */
  
.bgCover { background-size: cover; background-position: center center; background-repeat: no-repeat; }
.bgContain { background-size: contain; background-position: center center; background-repeat: no-repeat; }
.objFit { object-fit: contain; object-position: center; }
	
  
/* Staticni sadrzaji */
.sadrzajiWrap { margin-top: 90px; padding: var(--section-padding) 0; height: 100vh; background-color: var(--light-gray); background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%); }

/* Ego_impressum */
.ego_impressum { position: relative; width: 100%; height: 100vh; overflow: hidden; z-index: 999; }
.impressumWrapp { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); max-width: 650px; width: 100%; font-weight: 400; text-align: center; text-transform: uppercase; color: #fff; animation: credits 60s linear infinite; transition: margin-top 0.6s ease-in-out; }
.impress_wrapper {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}
/*
.impressumWrapp::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
*/
.impressumWrapp:hover { animation-play-state: paused; }

.paused { animation-play-state: paused !important; }
.hidden { display: none !important; }
.tema { margin-bottom: 0; font-size: 50px; font-weight: 800; padding: 100px 0 50px; }
.tema_logo {margin: 0; padding: 10px 0; }
.tema_logo img { max-width: 320px; }
.funkcija { margin-top: 50px; font-size: 20px; line-height: 32px; font-style: italic; }
.osoba { margin: 5px 0; font-size: 35px; line-height: 50px;font-weight: 800; }
.titula { margin-bottom: 5px; font-size: 14px; line-height: 25px; font-weight: 400; }
.proizvodac { margin: 5px 0; font-size: 35px; line-height: 50px; font-weight: 800; }
.vlasnik { margin: 5px; font-size: 35px; line-height: 50px; font-weight: 800; padding: 30px 0; }
.godina { margin: 30px 0; font-size: 50px; line-height: 70px; font-weight: 800; padding: 100px 0; }

@keyframes credits {
	0% { top: 100%; }
	100% { top: -500%; }
}

#credits {
  transition: max-height 0.5s ease-out;
  overflow: hidden;
}

.additional-info {
  transition: opacity 0.5s ease-out;
}

.additional-info.hidden {
  opacity: 0;
  pointer-events: none; /* Prevent interaction when hidden */
}

#credits.hidden {
  max-height: 0;
  padding: 0;
}

.player { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); border-radius: 10px; padding: 10px 15px; display: flex; flex-direction: column; align-items: center; width: 320px; z-index: 1000; }
.player-controls { display: flex; justify-content: center; margin-bottom: 10px; }
.player-controls button { background: #333; border: none;color: #fff; padding: 8px 12px; margin: 0 5px; border-radius: 5px; cursor: pointer; font-size: 18px; transition: background 0.3s; outline: none; }
.player-controls button:hover { background: #555; }
.progress-container { width: 100%; background: #555; height: 8px; border-radius: 4px; overflow: hidden; }
.progress-bar { width: 0%; height: 100%; background: #0f0; transition: width 0.1s ease; }

/* Sakrij Header i footer */

.header-tools { position: absolute; top: 0; right: 0;background: transparent; cursor: pointer; z-index: 999999; }


.trigger-btn { 
            position: fixed;
            top: 0;
            right: 20px;
            font-size: 22px;
            color: var(--platinum);
            outline: none;
            box-shadow: none;
            border: 0;
            cursor: pointer;
            background-color: var(--raisin-black-1);
            z-index: 9999999;
            padding: 0.5em 0.4em 0 0.4em;
border-radius: 0 0 5px 5px;
 }
.trigger-btn i { -webkit-transition: opacity 0.3s ease;  transition: 0.5s ease-in-out; }

.trigger-btn:hover { color: var(--tg-theme-primary); }

.trigger-btn:before {
  content: attr(aria-label);
  display: block;
  position: absolute;
  left: 50%;
  top: 65%;
  transform: scale(0) translateX(calc(-100% - 0.5rem)) translateY(-50%);
  z-index: 10;
  white-space: wrap;
  background-color: transparent;
  padding: 0.4em 1em 0 1em;
  font-size: 0.5rem;
  line-height: 12px;
  text-transform: uppercase;
  font-weight: 800;
  height: 33px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.25s ease;
background-color: rgba(255,255,255,0.1); 
 }
  
.trigger-btn:hover:before {transform: scale(1) translateX(calc(-35% - 0.5rem)) translateY(50%);opacity: 1;}


@media(min-width: 1600px) {
   .container { max-width: 1400px; }
	.container.wide { max-width: 1596px; }
}





/*
.thumbnail { cursor: pointer; position: absolute; bottom: -44px;  z-index:999; display: flex; width: 262px; height: 70px; padding: 0; text-align: center; box-sizing: border-box; overflow: auto; left: 50%; transform: translateX(-50%); }
.thumbnail::-webkit-scrollbar { width: 0; }
.thumbnail .item { width: 38px; height: 38px; filter: brightness(0.5); transition: 0.5s; flex-shrink: 0; }
.thumbnail .item img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.thumbnail .item.active { filter: brightness(1.5); }
.thumbnail .item .content { position: absolute; inset: 15px 9px 5px 23px;
 text-align: center; font-size: 24px; line-height: 30px; 
background-color: #eee2; border: 2px dashed #fff; height: 22px; 
border-radius: 50%; color: #fff; width: 22px; }

 inset: 0 0 0 0; opacity: 0; transition: 1.3s;

 */




/*-------------------------------------------------------------*
  features section
*--------------------------------------------------------------*/
.feature-box{position:relative; padding:10px 40px 30px 20px; margin:50px 0px 0px; overflow:hidden;}
.feature-box:before{background:var(--main-color); position:absolute; left:0px; top:0; bottom:0; width:2px; content:""; display:block; z-index:9; }
.feature-icon{margin-bottom:15px; height: 220px; width: 220px; position: relative; display:flex; align-items:center;   }
.feature-icon:before, .feature-icon:after{border:1px solid #c7c7c7; height:220px; width:220px; content:""; display: block; -webkit-border-radius:50%; border-radius:50%; position:absolute; top:5px; left:-40px;   }
.feature-icon:after{top: -5px; left: -25px;}
.feature-icon img{ max-height:150px; max-width:150px; width:100%; height:100%;}
.features-row{padding-bottom:100px; }