*, *::before, *::after { box-sizing: border-box;   margin: 0;    padding: 0; }
html { font-size: 100%; -webkit-text-size-adjust: 100%;  }
body {width: 100%; min-height: 100vh; background: #fff; color: #231D1D; margin: 0; padding: 0;  font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
-webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-rendering: optimizeLegibility;   font-synthesis-weight: none; font-synthesis-style: none;}
a {  color: inherit; text-decoration: none; cursor: pointer; }
button, input, textarea, select { font: inherit; }
img, video { display:block; max-inline-size:100%; block-size:auto; }

img, svg, canvas { display: block; max-width: 100%; height: auto; }


@font-face {
  font-family: "Nunito";
  src: url("/fontovi/nunito-v26-cyrillic_cyrillic-ext_latin_latin-ext-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 200;
  src: url('/fontovi/roboto-v47-cyrillic_latin_latin-ext_math_symbols-200.woff2') format('woff2'); 
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;  unicode-range: U+0020-007E, U+0400-045F, U+2010-205E;
}
 @font-face {
 font-display: swap; 
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200;
  src: url('/fontovi/nunito-v26-cyrillic_cyrillic-ext_latin_latin-ext-200.woff2') format('woff2'); 
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;  unicode-range: U+0020-007E, U+0400-045F, U+2010-205E;
}
@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  src: url('/fontovi/nunito-v26-cyrillic_cyrillic-ext_latin_latin-ext-900.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;  unicode-range: U+0020-007E, U+0400-045F, U+2010-205E;
}
@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  src: url('/fontovi/nunito-v26-cyrillic_cyrillic-ext_latin_latin-ext-regular.woff2') format('woff2');
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;  unicode-range: U+0020-007E, U+0400-045F, U+2010-205E;
}
 @font-face {
 font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 300;
  src: url('/fontovi/nunito-v26-cyrillic_cyrillic-ext_latin_latin-ext-300.woff2') format('woff2'); 
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;  unicode-range: U+0020-007E, U+0400-045F, U+2010-205E;
}
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/fontovi/roboto-v47-cyrillic_latin_latin-ext_math_symbols-regular.woff2') format('woff2'); 
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;  unicode-range: U+0020-007E, U+0400-045F, U+2010-205E;
}
@font-face {
  font-display: swap;
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  src: url('/fontovi/nunito-v26-cyrillic_cyrillic-ext_latin_latin-ext-500.woff2') format('woff2'); 
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;  unicode-range: U+0020-007E, U+0400-045F, U+2010-205E;
}
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('/fontovi/roboto-v47-cyrillic_latin_latin-ext_math_symbols-700.woff2') format('woff2'); 
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;  unicode-range: U+0020-007E, U+0400-045F, U+2010-205E;
}
@font-face {
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('/fontovi/roboto-v47-cyrillic_latin_latin-ext_math_symbols-300.woff2') format('woff2'); 
  size-adjust: 100%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;  unicode-range: U+0020-007E, U+0400-045F, U+2010-205E;
}

.visually-hidden {  position: absolute;  width: 1px; height: 1px;  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;}

#preloader {position: fixed;  top: 0; left: 0;   width: 100vw; height: 100vh;overflow:hidden; background: #FFD37D;   display: flex;   justify-content: center;   align-items: center;
  z-index: 9999;   transition: opacity 0.6s ease, visibility 0.6s ease;}
#preloader.hidden {   opacity: 0;   visibility: hidden; }

.preloader .json {width: 60%; height:auto; aspect-ratio: 1/1; display: block;}

#stranicaSadrzaj { width: 100%;min-height: 90vh; height:auto;margin: 0 auto; padding: 0; box-sizing: border-box; display: flex; flex-direction: column;contain: layout paint;}
#ducanContainer, #igraonicaContainer {min-height: 50vh;}  #citaonicaContainer {min-height: 30vh;}

header { position: fixed; inset-block-start: 0; inset-inline-start: 0; inline-size:100%; block-size:4.5rem; z-index:10;padding:0 1rem; background:#F6F0E5; }

.meniKutija { display:flex;flex-direction: row;justify-content:space-between; align-items: center;width: 100%; margin:0; padding: 1rem 0; height: 4.5rem; margin: 0; box-sizing: border-box; }

.accordion {height: 2.5rem; width: 2.5rem; cursor: pointer; background-color: #EC5212; color: white; border: none; outline: none; border-radius: 8px;font-weight:700; 
will-change: transform;letter-spacing: 0.02em;  font-size: 1rem; line-height: 1;  display: flex; align-items: center; justify-content: center; order: 1;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) }

.pIndex { position: relative;  display: flex;  align-items: center;  justify-content: center;  width: 2.5rem;  aspect-ratio: 1/1;  border-radius: 8px;
overflow: hidden;  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) flex-shrink: 0;} 
.pIndex img { position: absolute; inset: 0; width: 100%;  height:  100%; object-fit: contain;}
.pIndex img:first-of-type {  z-index: 1;}.pIndex img:last-of-type { z-index: 3;}
.MenikutijaTrener {  position: absolute; inset: 0;  width: 100%; height: 100%; background: #FFD37D; z-index: 2;
  transform: scaleY(0.3); transform-origin: top; animation: rasteMenikutija 1.3s ease-in-out infinite alternate;  will-change: transform;}
@keyframes rasteMenikutija {  from { transform: scaleY(0.3); }  to   { transform: scaleY(0.75); }}
.pLatinica { display: flex; align-items: center; justify-content: center; background-color: #EC5212; color:#fff;   width: 2.5rem; height: 2.5rem;  font-size: 0.9rem;
padding: 0; border-radius: 8px; overflow: hidden;font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
font-weight:700; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)}
.panel { display: flex; flex-direction: column;  background:#F6F0E5; margin:0; padding:0;  position: absolute; top: 100%; left: 0; width: 100%; 
z-index: 99; transform: scaleY(0); transform-origin: top; opacity: 0; pointer-events: none; will-change: transform, opacity; transition: transform 0.15s ease-out, 
opacity 0.15s ease-out;}
.panel.open { transform: scaleY(1); opacity: 1; pointer-events: auto; }
.panel-content { display: flex; flex-direction: column; padding:0 0 0 1rem}
.pDucan, .pCitaonica, .pIgraonica, .pTrener { display: flex; align-items: center; justify-content: center; height: 2.5rem; width: fit-content; font-size: 1rem;
will-change: transform;border-radius: 8px; color: white; font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;font-weight:700; 
letter-spacing: 0.02em; margin:0 0 1rem 0 ; padding: 1.25rem 1.5rem ; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) }
.pDucan { background-color: #EC5212; } .pCitaonica { background-color: #77C6B3; } .pIgraonica { background-color: #3658D3;}
.pTrener { background-color: #FFD37D;} 

.bread { list-style: none;  display: flex;  flex-wrap: wrap;  gap: 0.5rem; font-family: 'Roboto', Arial, sans-serif;  width: 100%; padding:1.25rem 1rem; font-weight:200; font-size: 0.9rem; letter-spacing: 0.09rem; }
.bread li {  display: flex;  align-items: center;   } .bread li + li::before { content: "\2605";  color: #FFD37D;  margin: 0 0.75rem;}
.bread a:hover {  text-decoration: underline;  text-decoration-color: #EC5212; text-decoration-thickness: 2px;text-underline-offset: 8px;}


main { padding-top:4.5rem; min-height: 90vh; }

.kutijaPocetak { width:100%; height:auto; display:flex; flex-direction: column; }
.trener { height:35vh;  background:#F6F0E5;  display:flex; align-items:flex-end; justify-content:center; }
.trener .json {height: 70%;   display: block; aspect-ratio: 1/1; display: block;}
.kutijaTekst {  height:45vh;display:flex; flex-direction: column; justify-content: space-evenly; padding:0 1rem; font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif; }
.naslovPocetak {  font-size:2.1em;font-weight:900;letter-spacing:.045em;line-height:1.2 }
.tekstPocetak { font-size:1.2em;font-weight:400;letter-spacing:.06em;line-height:1.55}

.kutija {display: flex; flex-direction: column;width: 100%; height: auto;box-sizing: border-box;  margin: 0;padding:4rem 1rem; background:#F6F0E5; overflow: hidden;} 

.kutijaIgraonica { display: flex; flex-wrap: wrap; width: 100%; height:auto;min-height:60vh;gap: 1.5rem; position: relative; flex-direction:column; 
padding:0 ;background-color:#F6F0E5;}
.posterIgraonica { display: block; overflow: hidden; height:auto; width: 100%;  background-color: white; padding: 0.5rem; margin: 0; border-radius:10px; will-change: transform;
box-sizing: border-box; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)}

.sveIgraonica { display: flex; flex-direction: row; width: 100%; background-color: white;  }

.sveFotkaIgraonica { position: relative; display: block; width: 18vw; height:auto; aspect-ratio: 1/1; overflow:hidden ;  border-radius:10px;background-color: white}
.tekstIgraonica {font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight:500;  display: inline-flex; align-items: center;  gap: 1rem; padding: 0 0 0 1rem; margin: 0; 
line-height: 1; letter-spacing: 0.035em; font-size: 1.2rem;}
.play { height: 1rem;  width: 1rem; }




.naslovIndexKutija, .naslovIndexkutijaDucan, .naslovIndexKutijaCitaonica {width: auto; margin:0; padding: 0 ; display: inline-flex;align-items: center; gap: 2rem;overflow: hidden; 
color:#3658D3; box-sizing: border-box;}
.naslovIndexKutijaCitaonica {color:#77C6B3;padding: 0 1rem;}
.naslovIndexkutijaDucan {color:#ec5212;padding: 0 1rem;}

.naslovIndex {font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;font-size:2.55rem;font-weight:900; line-height:1;letter-spacing:.045em;}
.strelica { overflow:hidden;font-size: 3.2rem; line-height: 1;  font-weight:900; padding: 0; }

.tekstIndex, .tekstIndexIgraonica, .tekstIndexCitaonica { font-size:1.3rem; letter-spacing:0.07rem; line-height:1.75; padding: 0 1rem; margin: 1.5rem 0 0.5rem 0 ;}
.tekstIndexIgraonica {padding: 0 ; margin: 1.5rem 0 1.75rem 0 ;}
.tekstIndexCitaonica {padding: 0 ; margin: 1.5rem 1rem 1.75rem 1rem;}

.kutijaZuta {display: block; width: 100%;min-height:40vh; height:auto; box-sizing: border-box;  margin: 0; padding:4rem 0; background-color: #FFD37D;overflow: hidden;} 
.scroll-gallery {box-sizing: border-box;  width: 100%; margin: 0;  padding: 0; background-color: #FFD37D;}
.gallery-track { -ms-overflow-style: none; scrollbar-width: none; } .gallery-track::-webkit-scrollbar { display: none; }
.gallery-track{display:flex;gap:0; padding:0 ; background-color: #FFD37D;overflow-x:scroll;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scroll-behavior:smooth}
.slide{flex:0 0 auto; width:100% ;height:auto;min-height:350px;padding:0 ;margin:0; scroll-snap-align:start;display:flex;align-items:center;
justify-content:center;will-change: transform;overflow:hidden;border-radius:12px;; padding: 1rem;}
.posterDucan{display: block;width:100%;min-height:350px;height:auto;background-color: white; border-radius:12px;padding:1em;box-sizing:border-box;margin: 0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)}
.fotkaDucan{ display:block; width:100% ; height:auto; aspect-ratio:16/9; margin:0; padding:0;border-radius:12px; }
.naslovDucan{display: flex;justify-content: flex-start;  align-items: center; font-family: 'Roboto', Arial, sans-serif; width:100%;min-height:100px;height:auto;line-height: 1;
color:#383030;font-weight:400; font-size:1.8rem;padding: 2rem 0 ;letter-spacing:.028rem;background-color: white;}
.tekstDucan{display: flex;justify-content: center;  align-items: center;font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;letter-spacing:.03em;
width:100%;min-height:50px;height:auto;line-height: 1;font-size:1.5rem;padding:  2rem 0; text-align:center;border-radius:10px;background-color: #ec5212;color:white;font-weight: 900;}
.pagination-dots{ display:flex; justify-content:center; align-items:flex-end;width:100% ;height:3rem; margin: 1rem 0 0 0; gap:1em; position:relative;  z-index:2;}
.pagination-dots .dot{  width:2em; height:2rem; border-radius:50%; background:#fff; border: 0.5rem solid #FFD37D; flex-shrink: 0;  }
.pagination-dots .dot.active{  background: #ec5212;border: 0.5rem solid #ec5212; }


.kutijaBez {display: block; width: 100%;min-height:60vh; height:auto; box-sizing: border-box;  margin: 0; padding:4rem 0; background-color:#F6F0E5;overflow: hidden;} 
.kutijaCitaonica {box-sizing: border-box;width: 100%;margin: 0;padding: 0;overflow-x: auto; -webkit-overflow-scrolling: touch;scroll-behavior: smooth;}
.CitaonicaTrack { -ms-overflow-style: none; scrollbar-width: none; display:flex;gap:2rem;width: max-content;  padding:0 1rem; background-color: #F6F0E5;  scroll-snap-type: x mandatory;}
.posterCitaonica {height:auto;width:80vw;background-color: white; border-radius:12px;padding:1em;margin:0.5rem 0;box-sizing:border-box; position: relative;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) }
.tekstCitaonica{min-height:1em;margin:1.25em 0 1em 0; font-family: 'Roboto', Arial, sans-serif; padding:0;font-size:1em;letter-spacing:.05em;font-weight:700;line-height:1}
.naslovCitaonica{min-height:1.5em;white-space:normal;font-family: 'Roboto', Arial, sans-serif; word-wrap:break-word;word-break:break-word;font-size:1.3em;margin:0;
color:#231d1d; letter-spacing:.028em;padding:0 0 .75em 0;line-height:1.5;flex-shrink:0;font-weight:300}
.obavestenje{position:absolute;min-height:1em;top:1.5em;left:1.5em;padding:.5em .95em;font-family: 'Roboto', Arial, sans-serif; z-index: 10; opacity: 1; pointer-events: none; 
border-radius:8px;z-index:2;color:#fff;font-size:0.85em;font-weight:700;letter-spacing:.06em;line-height:1}

.kutijaCitaonica::-webkit-scrollbar {  height: 10px;}
.kutijaCitaonica::-webkit-scrollbar-track {  background: transparent;  border-radius: 10px;}
.kutijaCitaonica::-webkit-scrollbar-thumb {  background-color: transparent;   border-radius: 10px;  border: 2px solid transparent; }
.kutijaCitaonica::-webkit-scrollbar-thumb:hover  {  background-color: transparent; }
.kutijaCitaonica {  scrollbar-color: #77C6B3 transparent;  }

.scroll-gallery::-webkit-scrollbar {  height: 10px;}
.scroll-gallery::-webkit-scrollbar-track {  background: transparent;  border-radius: 10px;}
.scroll-gallery::-webkit-scrollbar-thumb {  background-color: transparent;   border-radius: 10px;  border: 2px solid transparent; }
.scroll-gallery::-webkit-scrollbar-thumb:hover  {  background-color: transparent; }
.scroll-gallery {  scrollbar-color: #ec5212 transparent;  }

table { width: 100%; border-collapse: collapse; ;overflow: hidden;}
 tr {display: flex; width: 100%; padding: 2.5em 1rem;align-items: center  }
 .linijaPonuda {  background-color: #FFBABA }
 .linijaPonuda1 {  background-color: #77c6b3; }
 .linijaPonuda2 {  background-color: #70A2E1;  }
 .linijaPonuda1:hover, .linijaPonuda2:hover { background-color: #F6F0E5; transition: 0.3s;}
 
 th, td { font-family: "Nunito", "Segoe UI", Arial, system-ui, sans-serif; line-height: 1.3; letter-spacing: 0.02em;  height: auto;  display: flex;  align-items: center;
 box-sizing: border-box;  }
 th:first-child, td:first-child {  width: 45%;  justify-content: flex-start;  font-size: 1.5em; font-weight: 600;  }
 th:nth-child(2), td:nth-child(2) {  width: 30%; justify-content: center; align-items: center; text-align: center; font-weight: 400; font-size: 1.13em;  padding: 0;letter-spacing: 0.05em; }
 th:last-child, td:last-child { flex: 1; justify-content: flex-end; }
  .dugmePonuda {  display: flex;   border-radius: 10px;  color: white;   background-color: #ec5212;  align-items: center;font-family: "Nunito", "Segoe UI", Arial, system-ui, sans-serif;  
  border: none;  cursor: pointer;  margin:0 0 0 0.75em; padding:1.25em ; font-size: .9em; border-radius: 8px; font-weight: 700;letter-spacing: 0.045em;}
  
  .kutijaKraj{overflow:hidden;width:100%;margin:0;height:auto;box-sizing:border-box;display:flex;flex-direction:column;background-color:white; gap:2rem;
padding: 4rem 1rem; min-height: 70vh;}
.polovina{overflow:hidden;width:100%;display:flex;flex-direction:column;box-sizing:border-box;padding:0;justify-content:center;align-items:center;border-radius:12px;}
.red {display: grid;aspect-ratio: 1 / 1;width: 100%;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;gap: 0;overflow: hidden;padding: 0;}
.kvadrat {  display: flex;  justify-content: center;  align-items: center;  width: 100%;  height: 100%;}
.poruciIndex {font-family:Nunito,sans-serif;display:inline-block;font-size:1.3em;font-weight:800;color:#ec5212;background-color:#FFD37D;padding:.7em 1.75em .8em;
text-align:center;border-radius:10px;margin: 2rem 0;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)}
 .naslovKraj {font-size: 1.8rem; letter-spacing: 0.05rem; font-weight: 700; padding: 0  ;line-height: 1.4; padding: 0;}
.tekstKraj { font-weight: 300; font-size:1.2em;font-weight:300;letter-spacing:.07em;line-height:1.8;padding: 1.5rem 0 0 0; margin: 0; } 
  
  
.zaglavljeKutija {width:100%;height:auto; padding: 4rem 1rem 1rem 1rem;background-color:#FFD37D;overflow: hidden; box-sizing: border-box; }
.zaglavljePrviRed {display: flex;  flex-direction:column; justify-content: flex-start; width:100%;align-items: stretch; gap:0;padding: 0;overflow: hidden;}
.zaglavljeDrugiRed {display: flex;  flex-direction:row; justify-content: flex-start; width:100%;align-items: stretch; gap:0;padding: 0;overflow: hidden;}
.zaglavljeTekst {display: flex;  flex-direction:column;  justify-content: flex-start; align-items: flex-start; flex: 0 0 100%;}
.zaglavljeKontakt { flex: 1;  display: flex;justify-content: center; align-items: center;  background-color: #EC5212;  color: #F6F0E5;padding: 1.75rem 0; margin: 1.75rem 0;
font-weight: 900;  font-size: 1.4rem;  border-radius: 12px;  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)  }

.naslovFooter {font-size: 1.8rem; letter-spacing: 0.05rem; font-weight: 700; padding: 0  ;line-height: 1; padding: 0; }
.tekstFooter  { font-weight: 300; font-size:1.2em;letter-spacing:.07em;line-height:1.7;padding: 1rem 0 0 0; margin: 0; }

.longLogo {flex: 0 0 55%; display: flex;justify-content: flex-start; align-items: center;    } 
.ikonaLongLogo { height: auto;width: 100%;}
.zaglavljeIkone { display: flex;  flex-direction:row;justify-content: flex-end; align-items: flex-start; flex: 1;  }
.ikona { height:10vw; width: 10vw; margin:0 0 0 3vw}



.kutijaTekstBez {overflow:hidden;width:100%;height:auto;box-sizing:border-box;display:flex;flex-direction:column;padding: 4rem 1rem 1rem 1rem;background:#F6F0E5;min-height:30vh}
.kutijaTekstBela {overflow:hidden;width:100%;height:auto;box-sizing:border-box;display:flex;flex-direction:column;padding: 4rem 1rem 1rem 1rem; min-height: 30vh}


.kutijaTekstUvod {overflow:hidden;width:100%;height:auto;box-sizing:border-box;display:flex;flex-direction:column;padding: 0 1rem 3rem 1rem; min-height: 30vh}
.naslovUvodDucan, .naslovUvodIgraonica, .naslovUvodCitaonica {overflow:hidden;width:100%;height:auto;font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif; 
font-size:2.15rem;font-weight:900;padding:0.25rem 0 1.75rem 0 ;line-height:1.3;letter-spacing:.05em;}
.naslovUvodDucan {color: #EC5212;}
.naslovUvodIgraonica {color: #3658D3;}
.naslovUvodCitaonica {color: #77C6B3;}
.tekstUvod { overflow:hidden;width:100%;height:auto;font-size:1.2rem; letter-spacing:0.075rem; line-height:1.9; padding:  0 ;font-weight: 300;}

.tekstUvod ul {list-style: none;  padding: 0.5em 0 0.5em 0.25em;}
.tekstUvod li { display: flex;  align-items: flex-start; line-height:1.7;padding: 0 0 0.5em 0;}
.tekstUvod li::before {  content: "★";  color: #FFD37D;  font-size: 1em; line-height:2; margin: -0.1em 0.5rem 0 0; }





.kutijaBezTekst {overflow:hidden;width:100%;height:auto;box-sizing:border-box;display:flex;flex-direction:column;padding: 4rem 0 4rem 1rem; background:#F6F0E5;min-height: 60vh}
.naslovBez {overflow:hidden;width:100%;height:auto;font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;padding:0 1rem 1.5rem 0 ; font-size:1.7rem;font-weight:700; line-height:1.45;
letter-spacing:.05em;}
.naslovZuta {overflow:hidden;width:100%;height:auto;font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;padding:0 1rem 1.5rem 1rem ; font-size:1.7rem;font-weight:700; line-height:1.45;
letter-spacing:.05em;}
.tekstBez { overflow:hidden;width:100%;height:auto;font-size:1.2rem; letter-spacing:0.075rem; line-height:1.85; padding:0 1rem 2.5rem 0 ;font-weight: 300;}
.tekstZuta { overflow:hidden;width:100%;height:auto;font-size:1.2rem; letter-spacing:0.075rem; line-height:1.85; padding:0 1rem 1rem 1rem ;font-weight: 300;}


.kutijaBezTekstIgraonica {overflow:hidden;width:100%;height:auto;box-sizing:border-box;display:flex;flex-direction:column;padding: 4rem 1rem; background:#F6F0E5;min-height: 60vh}
.naslovBezIgraonica {overflow:hidden;width:100%;height:auto;font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;padding:0 0 1.5rem 0 ; font-size:1.7rem;font-weight:700; line-height:1.45;
letter-spacing:.05em;}
.tekstBezIgraonica { overflow:hidden;width:100%;height:auto;font-size:1.2rem; letter-spacing:0.075rem; line-height:1.85; padding:0 0 2.5rem 0 ;font-weight: 300;}








.kutijaNaPola {  display: flex;  flex-direction: column;  gap: 0;  width: 100%; height: auto; min-height: 100vh; padding: 0 1rem; box-sizing:border-box; overflow:hidden;   contain: none !important; /* uklanja izolaciju koja odlaže render */
  will-change: transform, opacity;
  backface-visibility: hidden;}
.levaStranaIgraonica { aspect-ratio:1/1; height: 100%;width: auto; border-radius: 12px;  overflow: hidden;   }
.levaStranaIgraonica img { height: 100%; width: auto;  object-fit: contain;  display: block;}
.desnaStrana {flex: 1;  display: flex;  flex-direction: column; justify-content: space-between; font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: #3658D3;  }

.nazivIgrice {height: auto;font-size:1.9rem; line-height: 1.8;letter-spacing:0.025em;  padding: 0; margin: 0;  font-weight: 900;}
.poruciIgraonica {height: auto; width: 40vw; font-size: 1.8rem; margin:0; padding: 0.6em 1.2em 0.7em 1.2em; letter-spacing:0.055em;border-radius: 12px;
 font-weight: 900;  background-color: #3658D3;color:white; border: none;  cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)}
 
.poruciIgraonica:hover {background-color:  #FFD37D ;color: #3658D3; transform:translateY(-5px);box-shadow:0 6px 18px rgba(0,0,0,.2);transition:.3s}
.colorUvod { width: 100%;  background-color: #FFD37D ; height: auto;  border-radius: 12px;  padding:1.25em 1.75em;  font-size:1.2rem;  letter-spacing:0.075rem; line-height:1.85; font-weight: 300;}

.uvodLista ul {list-style: none;  padding: 0.75em 0 0.75em 0.5em;}
.uvodLista li { display: flex;  align-items: flex-start; line-height:1.9;}
.uvodLista li::before {  content: "★";  color:#3658D3;  font-size: 1.1em; line-height:2; margin: -0.1em 1rem 0 0; }





.kutijaTab { min-height: 20vh; background-color: white; padding: 2rem 0 3rem 0}

.tab { display: flex;  flex-direction: row;  align-items: center;  justify-content: flex-start;  margin: 0;  padding: 0 ;  height: auto;
 overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch;}
.tab::-webkit-scrollbar { height: 0.15rem; }
.tab::-webkit-scrollbar-thumb {  background:#3658D3; border-radius: 4px;}
.tab::-webkit-scrollbar-track {  background: transparent;}
.tab button { flex: 0 0 auto; font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif; white-space: nowrap; font-weight: 700;  text-align: center;
  border: none;  border-radius: 10px;  background-color: white;  color: #3658D3; padding: 1rem 1.75rem; margin: 0 1rem .75rem 1rem; background:#F6F0E5;
  font-size: 1.1rem;  letter-spacing: 0.07rem;  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  will-change: background-color, color;  transition: background-color 0.25s ease, color 0.25s ease;}

.tab button.active { background-color: #3658D3; color: white;} .tab button:hover { background-color:  #FFD37D ; color: #3658D3;}
.tabcontent { margin:0; }
.tabcontent[hidden] { display: none; }

.tabNaslov2 { font-size: 1.6rem;letter-spacing: 0.05rem; line-height: 1.2; padding:1.5rem 0 1rem 0 ; font-weight: 700;}
.tabNaslov3 { font-size: 1.4rem;letter-spacing: 0.035rem; line-height: 1.3; margin: 0 0 0.75rem 0 ; font-weight: 500;}
.igraonicaTekst { overflow:hidden;width:100%;height:auto;font-size:1.2rem; letter-spacing:0.075rem; line-height:1.8; padding:0 1rem ;font-weight: 300;}

.Lista ul {list-style: none;  padding: 1em 0 1em 0.5em;}
.Lista li { display: flex;  align-items: flex-start; line-height:1.8; padding: 0.25em 0 ;}
.Lista li::before {  content: "★";  color: #FFD37D;   font-size: 1.1em; line-height:1.9; margin: -0.1em 1rem 0 0; }



.podnaslov { font-size: 1.4rem;letter-spacing: 0.035rem; line-height: 1.3; margin:1.5rem 0 1.25rem 0 ; font-weight: 500;}

.podnaslovUvod { font-size: 1.4rem;letter-spacing: 0.035rem; line-height: 1.3; margin:0 0 1.25rem 0 ; font-weight: 500;}








.noviLink {font-weight: 700;  color: #3658D3;} .noviLink:hover { color: #EC5212} 

@media (min-width: 900px)  { 
.loader .json {width: 70%; height:auto; aspect-ratio: 1/1; display: block;}
header { block-size:6.5rem; padding:0 4vw;  }  #ducanContainer, #citaonicaContainer, #igraonicaContainer {min-height: 40vh;} 

.meniKutija {  height: 6.5rem;justify-content: space-between; }    
.pIndex {    width: 3.5rem;    height: 3.5rem;    min-width: 3.5rem;    min-height: 3.5rem;  }
.pLatinica, .accordion { width: 3.5rem; height: 3.5rem;  border-radius: 10px;letter-spacing: 0.055em;font-size: 1.65rem;}
.MenikutijaTrener {  height: 3.5rem;  }
.pLatinica {  font-size: 1.4rem;}
.pDucan, .pCitaonica, .pIgraonica, .pTrener { height: 3.5rem; width: fit-content; font-size: 1.5rem; letter-spacing: 0.055rem;border-radius: 10px; margin: 0  ; padding: 1.5rem ;  overflow: hidden;  }
.accordion {  display: none;  }
.pDucan:hover, .pCitaonica:hover, .pIgraonica:hover, .pTrener:hover, .pLatinica:hover { transition: 0.3s; } 
.panel {position: static;  transform: none; opacity: 1;  pointer-events: auto;  flex-direction: row;  background: none;}
.panel-content { display: flex; flex-direction: row; align-items: center; gap: 2rem; margin:  0; padding:0 } 
main { padding-top:6.5rem; }
.bread { list-style: none;  display: flex;  flex-wrap: wrap;  gap: 0.5rem;  padding:3vw 4vw;  font-size: 1.4rem; letter-spacing: 0.11rem; }
.bread li + li::before { margin: 0 0.75rem;}

.kutijaPocetak { width:100%; height:85vh; display:flex; flex-direction: column; }
.trener { flex: 0 0 72%; background:#F6F0E5;  display:flex; align-items:flex-end; justify-content:center; }
.trener .json {height: 80%;   display: block;}
.kutijaTekst {flex: 1;flex-direction: row; justify-content: space-between; align-items: center;padding:0 4vw; }
.naslovPocetak { flex: 0 0 50%; font-size:3.4em;font-weight:900;letter-spacing:.045em;line-height:1 }
.tekstPocetak {  flex: 0 0 50%; font-size:1.75em;font-weight:300;letter-spacing:.06em;line-height:1.55}

.kutija {display: block; width: 100%; height:auto;box-sizing: border-box;  margin: 0; padding: 7vw 4vw ; background-color: #F6F0E5;overflow: hidden;} 
.kutijaZuta {display: block; width: 100%; height:auto;box-sizing: border-box;  margin: 0; padding: 7vw 0 7vw 4vw; background-color: #FFD37D;overflow: hidden;} 
.kutijaBez {display: block; width: 100%; height:auto;box-sizing: border-box;  margin: 0; padding: 7vw 0 7vw 4vw; background-color: #F6F0E5;overflow: hidden;} 

.naslovIndexKutija, .naslovIndexkutijaDucan, .naslovIndexKutijaCitaonica {width: auto; margin:0; padding:2em 4vw; display: inline-flex;align-items: center; color:#fff; gap: 6vw;overflow: hidden;border-radius: 12px;
box-sizing: border-box;background-color: rgba(255, 255, 255, 0.2);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)}

.naslovIndexKutijaCitaonica{ background-color:#77C6B3; } 
.naslovIndexKutija{ background-color:#3658D3;} 
.naslovIndexkutijaDucan{ background-color:#ec5212;} 

.naslovIndexKutijaCitaonica:hover{ background-color:#FDFAF5; color:#77C6B3;  transform:translateY(-7px);box-shadow:0 6px 18px rgba(0,0,0,.2);transition:.5s}
.naslovIndexKutija:hover{ background-color:#FDFAF5; color:#3658D3; transform:translateY(-7px);box-shadow:0 6px 18px rgba(0,0,0,.2);transition:.5s}
.naslovIndexkutijaDucan:hover{ background-color:#FDFAF5; color:#ec5212;  transform:translateY(-7px);box-shadow:0 6px 18px rgba(0,0,0,.2);transition:.5s}

.naslovIndex {font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;  font-size:3.5rem;font-weight:900; line-height:1;letter-spacing:.045em;}
.strelica{ overflow:hidden;font-size: 5rem; line-height: 1;  font-weight:900;  }

.tekstIndex, .tekstIndexIgraonica, .tekstIndexCitaonica{ font-size:1.8rem; letter-spacing:0.099rem; line-height:1.9; padding: 0; margin: 3.5rem 0 3.25rem 0 ;}

.kutijaIgraonica {gap: 2vw; width: 100%; flex-direction:row;justify-content:space-between; height:auto;min-height:24vw;background-color: #F6F0E5;padding:0; }
.posterIgraonica {  width: 48%;height:auto; padding: 1rem; margin:0 ; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)}
.sveFotkaIgraonica {  width: 6vw;  border-radius:10px;}

.tekstIgraonica {font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif; font-weight:500; display: inline-flex; align-items: center;  gap: 2rem; padding: 0 0 0 2rem; margin: 0; 
line-height: 1; letter-spacing: 0.035em; font-size: 1.8rem;}
.play { height: 1.75rem;  width: 1.75rem;  }


.scroll-gallery, .kutijaCitaonica {box-sizing: border-box;width: 100%;margin: 0;padding: 0;overflow-x: auto; -webkit-overflow-scrolling: touch;scroll-behavior: smooth;}

.gallery-track, .CitaonicaTrack { -ms-overflow-style: none; scrollbar-width: none; } 
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track, .CitaonicaTrack{display:flex;gap:4vw;width: max-content;  padding:0 3vw 0 0; background-color: #FFD37D;  scroll-snap-type: x mandatory;}
.CitaonicaTrack {background-color: #F6F0E5;}
.slide {width:auto;height:auto;padding:0; display: flex;justify-content: center;  align-items: center;padding:.75em;}

.posterDucan {height:auto;width:29vw;background-color: white; border-radius:12px;padding:1.5em;margin:0;box-sizing:border-box; position: relative;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) }
.posterCitaonica {height:auto;width:29vw;background-color: white; border-radius:12px;padding:1.5em;margin:0.75rem;box-sizing:border-box; position: relative;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) }

.posterCitaonica:hover, .posterDucan:hover, .posterIgraonica:hover { transform:translateY(-7px);transition:.3s } 



.fotkaDucan{ display:block; width:100% ; height:auto; aspect-ratio:16/9; margin:0; padding:0;border-radius:10px; }
.naslovDucan{width:100%;height:7vw; font-size:2.25rem;letter-spacing:.028rem;padding:0;}
.tekstDucan{width:100%; letter-spacing:.05em;font-size:1.6rem;border-radius:10px; height:8vh;}
.tekstDucan:hover {background-color: #FFD37D;color: #ec5212; transform:translateY(-5px);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);transition:.3s}

.pagination-dots, .pagination-dots .dot, .pagination-dots .dot.active{ display:none;}
.tekstCitaonica{min-height:1em;margin:1.75em 0 1.25em 0; font-family: 'Roboto', Arial, sans-serif; padding:0;font-size:1.2em;letter-spacing:.05em;font-weight:700;line-height:1}
.naslovCitaonica{min-height:1.5em;white-space:normal;font-family: 'Roboto', Arial, sans-serif; word-wrap:break-word;word-break:break-word;font-size:2em;margin:0;
color:#231d1d; letter-spacing:.028em;padding:0 0 0.75em 0;line-height:1.5;flex-shrink:0;font-weight:300}
.obavestenje{position:absolute;min-height:1em;top:2em;left:2em;padding:.5em .95em;font-family: 'Roboto', Arial, sans-serif; z-index: 10;    opacity: 1;    pointer-events: none; 
border-radius:8px;z-index:2;color:#fff;font-size:1em;font-weight:700;letter-spacing:.06em;line-height:1}

table { width: 100%; border-collapse: collapse;}
 tr {display: flex; width: 100%; padding: 2.75em 4vw;align-items: center  }
 .linijaPonuda {  background-color: #FFBABA }
 .linijaPonuda1 {  background-color: #77c6b3; }
 .linijaPonuda2 {  background-color: #70A2E1;  }
 
 th, td { font-family: "Nunito", "Segoe UI", Arial, system-ui, sans-serif; line-height: 1; letter-spacing: 0.04em;  height: auto;  display: flex;  align-items: center;
 box-sizing: border-box;  }
 th:first-child, td:first-child {  width: 60%;  justify-content: flex-start;  font-size: 2.9em;  font-weight: 600;  }
 th:nth-child(2), td:nth-child(2) {  width: 20%; justify-content: center;   font-size:  2.7em; font-weight: 400; }
 th:last-child, td:last-child { flex: 1; justify-content: flex-end; }
.dugmePonuda {  display: flex;   border-radius: 10px;  color: white;   background-color: #ec5212;   padding: 0.75em 1.25em ; align-items: center;
font-family: "Nunito", "Segoe UI", Arial, system-ui, sans-serif; font-size: 1.7em; line-height: 1;  font-weight: 700;  letter-spacing: 0.02em; border: none;  cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)}
.dugmePonuda:hover {  color: #ec5212;   background-color: #FDFAF5;  transform:translateY(-7px);box-shadow:0 6px 18px rgba(0,0,0,.2);transition:.5s}

.zaglavljeKutija {width:100%;height:auto; padding: 7vw 4vw 0 4vw;background-color:#FFD37D;overflow: hidden; box-sizing: border-box; }
.zaglavljePrviRed  {display: flex;  flex-direction:row; justify-content: space-between; width:100%;align-items: stretch; gap:2rem;padding:0.5em 0;overflow: hidden;}
.zaglavljeDrugiRed {display: flex;  flex-direction:row; justify-content: space-between; width:100%;align-items: stretch; gap:2rem;padding: 3vw 0;overflow: hidden;}
.zaglavljeTekst {flex: 0 0 70%; display: flex;  flex-direction:column;  justify-content: flex-start; align-items: flex-start;font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;}

.zaglavljeKontakt { flex: 1;  display: flex;justify-content: center; align-items: center;  background-color: #EC5212;  color: #F6F0E5; padding: 0;margin: 0;
font-weight: 900;  font-size: 2.5rem;  border-radius: 12px;  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)  }

.zaglavljeKontakt:hover { background-color:#FDFAF5; color:#ec5212;  transform:translateY(-7px);transition:.5s}
.longLogo {flex: 0 0 77%; display: flex;justify-content: flex-start; align-items: center;    } 
.ikonaLongLogo { height: 3vw; width: auto;}
.zaglavljeIkone { display: flex;  flex-direction:row;justify-content: space-between; align-items: center; flex: 1;  }
.ikona { height: 5vw; width: 5vw;margin:0;}

.naslovFooter { font-size: 2.5rem; letter-spacing: 0.038rem;  font-weight: 700; padding: 0  ;line-height: 2; }
.tekstFooter  { font-weight: 300; font-size:1.8rem; letter-spacing:0.07rem;padding: 0; margin: 0; line-height: 1.8;}

.kutijaKraj{overflow:hidden;width:100%;margin:0;height:auto;box-sizing:border-box;display:flex;flex-direction:row;gap:0;padding: 7vw 4vw; min-height: 10vh;}
.polovina {width: 50%;aspect-ratio: 1 / 1;display: flex;flex-direction: column;justify-content: center;align-items: center;border-radius: 12px;box-sizing: border-box;overflow: hidden; padding: 0;}
.red {display: grid;aspect-ratio: 1 / 1;width: 100%;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;gap: 0;overflow: hidden;padding: 0;}
.kvadrat {  display: flex;  justify-content: center;  align-items: center;  width: 100%;  height: 100%;}

.poruciIndex {font-family:Nunito,sans-serif;display:inline-block;font-size:1.6em;font-weight:700;color:#ec5212;background-color:#FFD37D;padding: 0.75em 1.25em ;letter-spacing:0.02rem;width:auto;
text-align:center;border-radius:10px;margin:0;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)}
.poruciIndex:hover{ background-color:#ec5212; color:#FDFAF5;  transform:translateY(-7px);box-shadow:0 6px 18px rgba(0,0,0,.2);transition:.5s}

.naslovKraj {font-size: 2.8rem; letter-spacing: 0.05rem; font-weight: 700; padding: 0  ;line-height: 1; padding: 0 4vw 0 0;}
.tekstKraj { font-weight: 300; font-size:1.75em;font-weight:300;letter-spacing:.07em;line-height:1.75;padding: 3.5vw 2.5vw 7vw 0; margin: 0; }







.kutijaTekstBez {overflow:hidden;width:100%;height:auto;box-sizing:border-box;display:flex;flex-direction:column;padding: 7vw 4vw 3vw 4vw; background:#F6F0E5;min-height: 25vh}
.kutijaTekstBela {overflow:hidden;width:100%;height:auto;box-sizing:border-box;display:flex;flex-direction:column;padding: 7vw 4vw 3vw 4vw; min-height: 25vh}

.kutijaTekstUvod {overflow:hidden;width:100%;height:auto;box-sizing:border-box;display:flex;flex-direction:column;padding: 0 4vw 7vw 4vw; min-height: 5vh}
.naslovUvodDucan, .naslovUvodIgraonica, .naslovUvodCitaonica {overflow:hidden;width:100%;height:auto;font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;  font-size:4.2rem;font-weight:900;padding:0 0 3vw 0 ;
line-height:1.1;letter-spacing:.04em;}
.naslovUvodDucan {color: #EC5212;}
.naslovUvodIgraonica {color: #3658D3;}
.naslovUvodCitaonica {color: #77C6B3;}
.tekstUvod { overflow:hidden;width:100%;height:auto;font-size:1.8rem; letter-spacing:0.07rem; line-height:1.9; padding: 0 ;font-weight: 300;}

.tekstUvod ul {list-style: none;  padding: 0.75em 0 0.75em 0.5em;}
.tekstUvod li { display: flex;  align-items: flex-start; line-height:1.9;}
.tekstUvod li::before {  content: "★";  color: #FFD37D;  font-size: 1.1em; line-height:2; margin: -0.1em 1rem 0 0; }


.kutijaBezTekst {overflow:hidden;width:100%;height:auto;box-sizing:border-box;display:flex;flex-direction:column;padding: 7vw 0 7vw 4vw; background:#F6F0E5;min-height: 60vh}
.naslovBez, .naslovZuta {overflow:hidden;width:100%;height:auto;font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;padding:0 4vw 3vw 0 ; font-size:3.2rem;font-weight:700; line-height:1.45;
letter-spacing:.05em;}
.tekstBez { overflow:hidden;width:100%;height:auto;font-size:1.8rem; letter-spacing:0.07rem; line-height:1.9; padding:0 4vw 5vw 0 ;font-weight: 300;}
.tekstZuta { overflow:hidden;width:100%;height:auto;font-size:1.8rem; letter-spacing:0.07rem; line-height:1.9; padding:0 4vw 5vw 0 ;font-weight: 300;}


.kutijaBezTekstIgraonica {overflow:hidden;width:100%;height:auto;box-sizing:border-box;display:flex;flex-direction:column;padding: 7vw 4vw; background:#F6F0E5;min-height: 60vh}
.naslovBezIgraonica {overflow:hidden;width:100%;height:auto;font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif;padding:0 0 3vw 0 ; font-size:3.2rem;font-weight:700; line-height:1.45;
letter-spacing:.05em;}
.tekstBezIgraonica { overflow:hidden;width:100%;height:auto;font-size:1.8rem; letter-spacing:0.07rem; line-height:1.9; padding:0 0 4vw 0 ;font-weight: 300;}




.kutijaNaPola {  display: flex;  flex-direction: row;  gap: 3vw;  width: 100%;  height: 67vh;min-height: 67vh; padding: 0 4vw 0 4vw; box-sizing:border-box; align-items: stretch;  overflow:hidden; }
.levaStranaIgraonica { aspect-ratio:1/1; height: 100%;width: auto; border-radius: 12px;  overflow: hidden;   }
.levaStranaIgraonica img { height: 100%; width: auto;  object-fit: contain;  display: block;}
.desnaStrana {flex: 1;  display: flex;  flex-direction: column; justify-content: space-between; font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif; color: #3658D3;  }

.nazivIgrice {aspect-ratio: auto;height: auto;font-size:3rem; line-height: 1;letter-spacing:0.05em;  padding: 0; margin: 0;  font-weight: 900;}
.poruciIgraonica { aspect-ratio: auto; height: auto; width: 13vw; font-size: 2.25rem; margin:0; padding: 0.8em 1.2em 0.9em 1.2em; letter-spacing:0.055em;border-radius: 12px; margin:0 0 1.25em 0;
 font-weight: 900;  background-color: #3658D3;color:white; border: none;  cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)}
 
.poruciIgraonica:hover {background-color:  #FFD37D ;color: #3658D3; transform:translateY(-5px);box-shadow:0 6px 18px rgba(0,0,0,.2);transition:.3s}
.colorUvod { width: 100%;  background-color: #FFD37D ; height: auto;  font-size:1.8rem; letter-spacing:0.07rem; line-height:1.9;border-radius: 12px;  padding:1.25em 1.5em;  }

.uvodLista ul {list-style: none;  padding: 0.75em 0 0.75em 0.5em;}
.uvodLista li { display: flex;  align-items: flex-start; line-height:1.9;}
.uvodLista li::before {  content: "★";  color:#3658D3;  font-size: 1.1em; line-height:2; margin: -0.1em 1rem 0 0; }





.kutijaTab { min-height: 20vh; background-color: white; padding: 4vw 0 7vw 4vw;}

.tab { display: flex;  flex-direction: row;  align-items: center;  justify-content: flex-start;  margin: 0;  padding: 0 ;  height: auto;
 overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; -webkit-overflow-scrolling: touch;}
.tab::-webkit-scrollbar { height: 0.15rem; }
.tab::-webkit-scrollbar-thumb {  background:#3658D3; border-radius: 4px;}
.tab::-webkit-scrollbar-track {  background: transparent;}
.tab button { flex: 0 0 auto; font-family: "Nunito", "Segoe UI", "Helvetica Neue", Arial, sans-serif; white-space: nowrap; font-weight: 700;  text-align: center;
  border: none;  border-radius: 10px;  background-color: white;  color: #3658D3; padding: 1rem 1.75rem; margin: 0 2rem 0.5rem 0; background:#F6F0E5;
  font-size: 1.6rem;  letter-spacing: 0.07rem;  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  will-change: background-color, color;  transition: background-color 0.25s ease, color 0.25s ease;}

.tab button.active { background-color: #3658D3; color: white;} .tab button:hover { background-color:  #FFD37D ; color: #3658D3;}
.tabcontent { margin:0; }
.tabcontent[hidden] { display: none; }

.tabNaslov2 { font-size: 2.2rem;letter-spacing: 0.05rem; line-height: 1.2; margin:1rem 0 ; font-weight: 700;}
.tabNaslov3 { font-size: 2rem;letter-spacing: 0.035rem; line-height: 1.2; margin: 0 0 1rem 0 ; font-weight: 500;}
.igraonicaTekst { overflow:hidden;width:100%;height:auto;font-size:1.8rem; letter-spacing:0.07rem; line-height:1.9; padding:0 4vw 0 0 ;font-weight: 300;}

.Lista ul {list-style: none;  padding: 0.75em 0 0.75em 0.5em;}
.Lista li { display: flex;  align-items: flex-start; line-height:1.8; padding: 0.25em 0 ;}
.Lista li::before {  content: "★";  color: #FFD37D;   font-size: 1.1em; line-height:1.9; margin: -0.1em 1rem 0 0; }

.podnaslov { font-size: 2rem;letter-spacing: 0.035rem; line-height: 1.2; margin:1.5rem 0 1.25rem 0 ; font-weight: 500;}

.podnaslovUvod { font-size: 2rem;letter-spacing: 0.035rem; line-height: 1.2; margin:0 0 1.25rem 0 ; font-weight: 500;}






}