* {
  margin:0;
  padding:0;
}
  
@font-face {
  font-family:'font';
  src:url('../font/SpaceGrotesk-VariableFont_wght.ttf');
  /* src:url('../font/Lato/Lato-Light.ttf'); */
  /* src:url('../font/Prata/Prata-Regular.ttf'); */
  /* src:url('../font/Vidaloka/Vidaloka-Regular.ttf'); */
  /* src:url('../font/Oswald/Oswald-VariableFont_wght.ttf'); */
  /* src:url('../font/Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf'); */
  /* src:url('../font/EBGaramond-VariableFont_wght.ttf'); */
  src:url('../font/helvetica-255/Helvetica.ttf') format('truetype');
  src:url('../font/SrbijaSans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Definisanje fonta Helvetica za ceo sajt */
@font-face {
  font-family: 'HelveticaCustom';
  src: url('../fonts/Helvetica.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Definisanje fonta GFSDidot samo za h1 */
@font-face {
  font-family: 'Didot';
  src: url('../font/GFS_Didot/GFSDidot-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1980,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7776rem + 0.0181vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9255rem + 0.0602vw, 1rem);
  --step-0: clamp(1.125rem, 1.1009rem + 0.1205vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.309rem + 0.2048vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5558rem + 0.3211vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.8481rem + 0.4794vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.1942rem + 0.693vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.6036rem + 0.9786vw, 3.8147rem);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #191a1c; /*#231F20*/
  /* background: radial-gradient(#e66465, #9198e5);
  background: radial-gradient(#9198e5, #191a1c); */
  font-family: 'font';
}
      
.wrapper {
  margin:0 auto;
  width: 1080px;
}

.wrapper-nav {
  margin:0 auto;
  /* width: 1100px; iskljuceno*/ 
  /* margin-left: 30px; */
}

header.sticky .wrapper-nav {
  margin:0 auto;
  /* width: 1100px; */
  /* margin-left: 90px; */
}

.uppercase {
  text-transform: uppercase;
}

header {
  position: fixed;
  z-index: 50000;
  top: 0;
  left: 0;
  width: 100%;
  height: 85px;
  /* height: auto; */
  display: flex;
  background-color: #191a1c;
  box-sizing:border-box;
  justify-content: space-between;
  align-items: center;
  transition: 0 6s;
  padding: 70px 30px 70px 30px;
  /* padding: 70px 30px 70px 0; */

}

header.sticky {
  background-color: #f9ca36;
  padding: 20px 30px 20px 30px;
}

/*header:hover{
    background-image: radial-gradient(circle, #41a4ff, #00c1ff, #00d9f7, #68eee8, #aaffdd);
    }*/      
  
header img {
  height: auto;
  width: 121px;
  vertical-align:middle;
  margin-right:10px;
  overflow: hidden;
}

header.sticky IMG {
  width: 60px;
}
    
    /*header.logo img:hover{
        background-image: url("../slike/folder.jpg");
      }*/       
    
    header p.logo {
      color: #28498b;
      float:left;
      font-size:33px;
      font-weight: 600;
    }
    header span {
      color: #555;
    }
        
    header p {
      color: #fff;
    }
    header p.logo:hover{
      color: #191a1c;
    }
    header span:hover{
      color: white;
    }


    header.sticky .kontakt-telefon {
      display: none;
    }

    .kontakt-telefon {
      width: 250px;          /* fiksna širina vidljivog dela */
      width: 100%;
      overflow: hidden;      /* sakriva tekst koji izlazi van */
      /* border: 1px solid #ccc; */
      padding: 5px 10px;
      background: #f9f9f9;
      background: #ffcf01;
      height: fit-content;
      margin-top: 25px;
      /* margin-left: -20px; */
      margin-bottom: 10px;
    }

.ct-button {
  width: 100%;
  display: inline-block;
  white-space: nowrap;   /* sprečava prelom teksta */
  text-decoration: none;
  color: #000;
  /* color: #fff; */
  font-weight: bold;
  font-family: Arial, sans-serif;
}

.scrolling-text {
  display: inline-block;
  padding-left: 100%;    /* start pozicija van vidljivog dela */
  animation: scroll-left 10s linear infinite; /* trajanje i ponavljanje */
}

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






    
.side {
  box-sizing: border-box;
  position: fixed;
  right: 300px;
  right: 30%;
  /* top: 10px; */
  z-index: 1499;

  right: 200px;
  right: 1%;
  top: 65px;
  top: 105px;
  top: 127px;
  top: 65px;
  top: 100px;
  /* top: 26px;
  right: 30%; */
  z-index: 10499;
  }

.languageDropdown {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  margin-left: auto;
  margin: 0 auto;
  position: relative;
  top: 15px;
  left: 280px;
  z-index: 5000;
}

.languageDropdown:hover {
  color: #F80;
}

.header_userAndCartSection {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
  gap: 15px;
  min-width: 374px;
  position: relative;
  top: -60px;
}


.change-lang-or-platform_container__1knLi {
  width: 80px;
  position: relative;
}

change-lang-or-platform_container__1knLi > button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  gap: 5px;
}

.change-lang-or-platform_container__1knLi a, .change-lang-or-platform_container__1knLi button {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  /* color: #222; */
  color: #fff;
}

.change-lang-or-platform_container__1knLi > button > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 5px;
}
.change-lang-or-platform_isOpen__9i7_o {
  display: flex !important;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  gap: 1px;
}
.change-lang-or-platform_container__1knLi > ul {
  display: none;
  width: 100%;
  min-width: 80px;
  position: absolute;
  background-color: #fff;
  z-index: 9999;
  box-shadow: 0 2px 4px rgba(0,0,0,.16);
  -webkit-box-shadow: 0 2px 4px rgba(0,0,0,.16);
  -moz-box-shadow: 0 2px 4px rgba(0,0,0,.16);
}
.change-lang-or-platform_container__1knLi > ul li {
  width: 100%;
  height: 100%;
}
li, menu, ol, ul {
  list-style: none;
}

change-lang-or-platform_container__1knLi > ul li a, .change-lang-or-platform_container__1knLi > ul li button {
  width: 100%;
  height: 100%;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: 10px;
}

.change-lang-or-platform_container__1knLi > ul li a img, .change-lang-or-platform_container__1knLi > ul li button img {
  object-fit: scale-down;
}

/* .languageDropdown img {
  max-width: 100%;
} */


/* CSS: Stilizacija kontenjera za izbor jezika */
.language-switcher {
  position: relative;
  display: inline-block;
  display: flex;
  display: inline-flex;
  align-items: center;
  font-family: Arial, sans-serif;
  font-size: 14px;
  cursor: pointer;
}

.language-switcher #current-language {
  background: #fff;
  border: 1px solid #ccc;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  /* gap: 8px; */
  border-radius: 4px;
  /* user-select: none; */
}

.language-switcher #current-language img {
  width: 20px;
  height: 14px;
  width: 33px;
  height: 22px;
}

.language-switcher #current-language img.flag-icon, .language-switcher svg {
  width: 20px;
  height: 14px;
  border-radius: 2px;
  /* border: 1px solid #ccc; */
  width: 33px;
  height: 22px;
}

.language-switcher #language-options {
  position: absolute;
  top: 100%;
  left: 0;
  left: -192px;
  left: -220%;
  left: -265px;
  /* left: -235px; */
  /* left: -170px; */
  background: #fff;
  border: 1px solid #ccc;
  margin: 4px 0 0 0;
  padding: 0;
  list-style: none;
  display: none;
  min-width: 280px;
  max-width: 380px;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  /* overflow-y: auto; */
  z-index: 1000;
  width: 95vw;
}

.language-switcher #language-options li {
  display: flex;
  padding: 3.7px 16px;
  padding: 8px 16px;
  margin: 5px;
  align-items: center;
  gap: 8px; /* razmak između SVG i teksta */
  color: black;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
  font-size: 14px;
  /* width: 100%; */
  box-sizing: border-box;   /* da padding ne iskriva širinu */
}

.language-switcher #language-options li:hover {
  background-color: #f0f0f0;
  background-color: #0C4076;
  color: white;
}

/* Stilizacija za flag ikonice u dropdownu */
.language-switcher #language-options li img, #language-options li img.flag-icon,
#language-options li svg {
  /* width: 20px;
  height: 14px;
  width: 24px;
  height: 16px;
  width: 28px;
  height: 18px; */
  width: 33px;
  height: auto;
  /* height: 20px; */
  flex-shrink: 0; /* sprečava skupljanje SVG */
  vertical-align: middle;
  border-radius: 2px;      /* lagano zaobljenje */
  margin-right: 8px;
}





#language-options li a {
  display: flex;             /* za poravnavanje zastave i teksta */
  align-items: center;
  gap: 8px;                 /* razmak između zastave i teksta */
  /* padding: 7px 16px;        unutrašnji razmaci za udoban klik */
  color: black;             /* boja teksta linka */
  text-decoration: none;    /* uklanja podvlačenje */
  font-size: 14px;
  white-space: nowrap;      /* sprečava lomljenje teksta */
  width: 100%;              /* zauzima celu širinu stavke */
  box-sizing: border-box;   /* da padding ne iskriva širinu */
}

#language-options li:hover,
#language-options li:focus {
  /* background-color: #555;   tamnija pozadina pri hoveru/fokusu */
  outline: none;            /* ukloni plavi outline na fokus (po potrebi) */
  /* color: #fff;              bela boja teksta na hover */
}

/* Stilizacija zastave unutar linka */
/* #language-options li .flag-icon {
  width: 22px;
  height: 14px;
  flex-shrink: 0;
  vertical-align: middle;
} */

/* --- Tvoja postojeća pravila ostaju netaknuta --- */

/* Dodajemo stilove za prikaz skraćenica pored zastava na listi jezika */
#language-options li .lang-short {
  font-family: monospace;      /* jasno i ujednačeno */
  font-weight: bold;
  color: #0C4076;              /* tamnoplava boja, može se prilagoditi */
  background: #d5e3ff;         /* vrlo svetla pozadina */
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 10px;
  font-size: 14px;
  display: inline-block;
  min-width: 25px;
  text-align: center;
  flex-shrink: 0;
}


/* Omogućavamo skrol u meniju da ne raste preko visine */
#language-options {
  max-height: 250px;           /* maksimalna visina padajućeg menija */
  overflow-y: auto;            /* vertikalni skrol ako ima previse stavki */
  scrollbar-width: thin;
  scrollbar-color: #0C4076 #eee; /* boje scrollbar trake */
}

/* Prilagođeni webkit scrollbar za Chrome, Safari */
#language-options::-webkit-scrollbar {
  width: 8px;
  background-color: #eee;
}

#language-options::-webkit-scrollbar-thumb {
  background-color: #0C4076;
  border-radius: 20px;
  border: 2px solid #eee;
}


/* Lepši efekat hovera na elementima liste */
#language-options li:hover,
#language-options li:focus,
#language-options li a:hover,
#language-options li a:focus {
  background-color: #0C4076;   /* tamnoplava pozadina */
  color: #fff;                 /* bela boja teksta */
  outline: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}




/* Za .current-language-btn da lepo vizuelno istakne izabrani jezik */
.language-switcher #current-language {
  background-color: #f0f0f0;
  border: 1px solid #bbb;
  padding: 6px 7px;
  border-radius: 8px;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  /* gap: 10px; */
  font-weight: 600;
  color: #0C4076;
  box-shadow: 0 2px 6px rgb(12 64 118 / 0.3);
  transition: background-color 0.3s ease;
}

.language-switcher #current-language:hover {
  background-color: #d5e3ff;
}

/* Stilizacija zastava u dugmetu */
.language-switcher #current-language img {
  width: 26px;
  height: 18px;
  width: 33px;
  height: 22px;
  width: 33px;
  height: auto;
  border-radius: 4px;
  border: 1px solid #ccc;
}

/* Mala dorada za sam SVG globus pored dugmeta */
.language-icon {
  flex-shrink: 0;
  vertical-align: middle;
  /* margin-right: 8px; */
  fill: #0C4076;

  width: 24px;           /* širinom oglasi kao na sajtu */
  height: 24px;          /* kvadratna dimenzija za lepo poravnanje */
  margin-right: 8px;
  object-fit: contain;   /* sprečava deformacije */
  display: inline-block;
  border-radius: 400px;
}

.zastava_un_omotac {
  width: 30px;            /* željena širina */
  height: 30px;           /* jednaka visina da bude kvadrat */
  border-radius: 50%;     /* da omogući kružni oblik */
  overflow: hidden;       /* da "odseca" delove van kružnice */
  display: inline-block;  /* da se ponaša kao inline element */
  vertical-align: middle;
  margin-right: 8px;
}

.zastava_un_omotac img.language-icon {
  height: 100%;           /* prilagođava visinu wrapperu */
  width: auto;            /* širina se prilagođava proporcijama */
  display: block;         /* uklanja donji prostor ispod slike */
  margin-left: 50%;       /* centriranje horizontalno */
  transform: translateX(-50%);
}









.navbar {
  display: flex;
  position: relative;
  /* justify-content: space-between; */
  align-items: center;
  background-color: #191a1c;
  color: white;
  width: 116%;
}
header.sticky .navbar {
  background-color: #f9ca36;
}

    .brand-title {
      font-size: 1.5rem;
    }
    
    .navbar-links {
      height: 100%;
    }
    
    .navbar-links ul {
      display: flex;
      margin: 0;
      padding: 0;
    }
    
    .navbar-links li {
      list-style: none;
      font-size: 22px;
      /* font-weight: bold; */
      position: relative;
      font-size: var(--step-0);
      font-size: 18px;
    }
    
    .navbar-links ul li a.active {
      color: #fff;
      color: #f9ca36;
    }
    header.sticky .navbar-links ul li a.active {
      color: #fff;
    }


    .navbar-links ul li a.kontaktn1 {
      /* color: #fff; */
      /* background-color: #0357ff;
      background-color: #ff0000;
      background-color: #E10F19; */
      color: #E10F19;
      border: 5px #E10F19 solid;
      color: #191a1c;
      border: 5px #191a1c solid;
      /* color: #CBBD93; */
      border: 5px #766E61 solid;
      /* color: #fff; */
      /* border-radius: 2px; */
      padding: 10px 25px;
      /* margin-left: 20px; */
      /* background: linear-gradient(270deg, #fa6d86, #f9ca36); */
      background-image: linear-gradient(270deg, #fa6d86, #f9ca36);
      -webkit-background-clip: text;
      color: transparent;
      color: #fff;
      color: #191a1c;
    }
        
    .navbar-links ul li a.kontaktn1:hover {
      /* -webkit-text-stroke: 0.4px #03153a; */
      background-image: linear-gradient(270deg, #fa6d86, #f9ca36);
      -webkit-background-clip: border-box;
      color: #fff;
      border-radius: 2px;
    }

    footer nav ul li a.kontaktn1 {
      background-image: linear-gradient(270deg, #fa6d86, #f9ca36);
      /* -webkit-background-clip: text; */
      color: transparent;
      /* background-color: #000; */
      color: #fff;
      padding: 5%;
    }

    footer nav ul li a.kontaktn1:hover {
      color: #ff0084;
      color: #fffdf8;
      /* -webkit-text-stroke: 1px #fa6d86; */
      background-image: none;
    }

    .navbar-links li a {
        display: block;
        text-decoration: none;
        text-align: center;
        color: #191a1c;
        color: white;
        padding: 0.7rem;
    }

    .navbar-links li:hover a {
      color: #000;
    }

    header.sticky .navbar-links li a {
      color: #191a1c;
    }
     
      
    .navbar-links li a:hover {
        color: #ffdd70;
    }
    header.sticky .navbar-links li a:hover {
      color: #fff;
  }
        
  /* .arrow {
    color: var(--secondary--color-2);
  }

  .w-icon-dropdown-toggle::before {
    content: "▼";
    font-variant: normal;
    text-transform: none;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    font-family: webflow-icons !important;
  } */

  /* content: ""; */



  ul li ul.dropdown li {
    display: block;
    opacity: 100%;
  }
  ul li ul.dropdown li:hover {
    opacity: 100%;
  }
  ul li ul.dropdown {  
    width: 200%;
    background: #ffdd70;
    position: absolute;
    z-index: 999;
    display: none; 
  }

  ul li ul.prvi-dropdown {  
    width: 125%;
    background: #ffdd70;
    position: absolute;
    z-index: 999;
    display: none; 
  }


  ul li:hover ul.dropdown {
    display: block;
  }
  ul li ul.dropdown a {
    font-size: small;
    text-align: center;
  }
  ul li ul.dropdown a:hover {
    background: #231F20;
    border-radius: 0%;
  }



  #voyage{
    color: #fff;
    margin-left: 5px;
    margin-right: 5px;
  }
    
  .active, .navbar-links li:hover {
    border-bottom: white 2px solid;
  }
    

  svg.kucica {
    align-self: start;
    /* display: inline; */
    position: relative;
    top: 3px;
    /* right: 1px; */
    transform: scale(1.3);
    /* fill: #f9ca36; */
    /* background-color: #00c1ff; */
  }

  .active, .navbar-links li:hover svg.kucica {
    fill: #f9ca36;
  }

  header.sticky svg.kucica {
    fill: #231F20;
    fill: #191a1c;
  }
  header.sticky .active, .navbar-links li:hover svg.kucica {
    fill: #fff;
  }

    .toggle-button {
      position: absolute;
      top: .75rem;
      /* right: 1rem; */
      right: 14vw;
      display: none;
      flex-direction: column;
      justify-content: space-between;
      width: 30px;
      height: 21px;
    }
    
    .toggle-button .bar {
      height: 3px;
      width: 100%;
      background-color: white;
      border-radius: 10px;
    }

main {
  overflow:hidden;
  position: relative;
  padding-top: 150px;
  padding-bottom: 4vw;  
}

main div p {
  font-size: 14px;
  font-size: 1em;
  margin-bottom:10px;
}

main div a {
  text-decoration:none;
  color:#B4B4B4;
  padding:5px;
  background-color:#fff;
  display:inline-block;
}

main div a:hover {
  color:#fff;
  background-color:#B4B4B4;
  border-radius: 10px;
}



.animacija {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  /* background-color: #ff008c;
  background-color: #000; */
  z-index: -99;
  position: absolute;
  top: 35vw;
  right: -10%;
  animation: 4s move 1s infinite alternate ease-in-out;
  /* rotate: 45deg; */
}

.animacija img {
  width: 160%;
  border-radius: 7%;
}
.druga img {
  width: 120%;
  border-radius: 7%;
}

.druga {
  width: 100px;
  height: 100px;
  border-radius: 5px;
  /* background-color: #00c1ff;
  background-color: #f9ca36; */
  z-index: -100;
  position: absolute;
  top: 4%;
  left: -10%;
  animation: 4s druga 1s infinite alternate ease-in-out;
  /* rotate: 45deg; */
}

@keyframes move {
  0% {
    top: 35vw;
    right: -10%;
  }
  50% {
    top: 35vw;
    right: 90%;
  }

  100% {
    top: 4%;
    right: 90%;
  }
}

@keyframes druga {
  0% {
    top: 4%;
    left: -10%;
  }

  50% {
    top: 4%;
    left: 90%;
  }

  100% {
    top: 35vw;
    left: 90%;
  }
}

.a-tekst-pvg {
  width: 450%;
  height: auto;
  columns: 1;
  /* background-color: #ff008c;
  background-color: #000; */
  color: white;
  /* z-index: -99; */
  position: absolute;
  top: 2%;
  /* right: -2400px; */
  right: -490%;
  /* overflow: hidden; */
  animation: 8s pvg-tekst 0.5s infinite ease-in-out;
  /* rotate: 45deg; */
  /* -webkit-text-stroke: 20px rgba(0, 0, 0, 0.06); */
}

.a-tekst-pvg p {
  font-size: 15em;
  font-size: 250px;
  /* font-size: 28vw; */
  font-weight: bold;
}

@keyframes pvg-tekst {
  0% {
    top: 2%;
    right: -490%;
  }

  /* 50% {
    top: 2%;
    right: 100%;
  } */

  100% {
    top: 2%;
    right: 150%;
  }
}



  #vektor {
    position: absolute;
    top: 11%;
    left: 13%;
  }

  .curved svg {
    display: block;
    position: absolute;
  }
  .upper {
    background: #0edb85;

  }  
  .donja-kriva {
    background: #f9ca36;
    z-index: -1;
  }  



  h1 {
    text-align: center;
    margin: 30px 0 15px 15px; 
    margin: 15px;
    color: #f9ca36;  
    /* font-size: 2em; */
    /* font-size: var(--step-2); */
    font-size: var(--step-3);
    }

  h2 {
    text-align: center;
    margin-top: 60px;
    color: #f9ca36;
    margin: 30px 0 15px 15px;
    font-size: var(--step-1);
    }

  h3{
    color: #f9ca36;
    margin: 15px 0;
    border-left: 3px rgb(249,202,54) solid;
    padding-left: 10px;
    font-size: var(--step-0);
    }

    h1#h1-naslovna {
      font-size: var(--step-5);
      font-family: 'Didot', serif;
    }

    .udarni-tekst {
      height: fit-content;
      min-height: 200px;
      /* padding: 20px; */
      margin: 30px;
    }


  /* mapa */

  #map-div > svg:nth-child(1) > g:nth-child(1) > path:nth-child(93) {
    fill: rgb(138, 175, 255);
    visibility: visible;
    fill-opacity: 1;
    cursor: pointer;
    transition: fill 0.2s ease-in-out;
  }



/*index.html mani*/

    #dobrodoslica {
      margin-left: 20%;
      margin: 0 auto;
      /* text-transform: uppercase; */
      font-weight: normal;
    }

    #naslov{
      text-align: center;
      margin-top: 30px;
      margin: 15px;
      color: #f9ca36;
      font-weight: normal;
    }

  #uvodniopis {
    width: 100%;
      height: fit-content;
      margin-top: 2vw;
      margin-bottom: 2vw;
  }

  .prva-kartica {
    width: 100%;
    height: fit-content;  
  }

  .prva-kartica img {
    width: 100%;
    height: 100%;
  }

  #klub {
    margin: 0 auto;
    width: fit-content;
    height: 450px;
    margin-bottom: 2vw;
    position: relative;
  }

  #baner-home {
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; */
    width: 100%;
    height: 270px;
    top: 60%;
    background-position: center;
    position: absolute;
  }

  #baner-home p {
    position: absolute;
    /* top: -20%;
    left: 50%;
    transform: translate(-50%, -50%); */
    top: 20%;
    left: 14%;
    /* left: 25%; */
    /* transform: translate(-50%, -50%); */
    color: white;
    font-size: 300%;
    font-weight: bold;
    /* -webkit-text-stroke: 3px white; */
    -webkit-text-stroke: 1px #03153a;
    /* background-color: rgba(0, 0, 0, 0.2); */
    /* padding: 1%; */
    border-radius: 10px;
    text-align: center;
  } 

  #pecat {
    position: absolute;
    top: 72%;
    right: -2%;
    z-index: 1000;
    /* transform: rotate(20deg) scale(1.05); */
    transform: rotate(20deg) scale(0.95);
  }

  #navodnici {
    position: absolute;
    width: 63%;
    width: 55%;
    top: -10%;
    top: -89px;
    right: -5%;
    z-index: 1000;
    /* transform: rotate(20deg) scale(1.05); */
    /* transform: rotate(20deg) scale(0.95); */
  }
  #navodnici img {
    width: 100%;
  }

  .made-in {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1000;
    /* transform: rotate(20deg) scale(1.05); */
    transform: rotate(20deg) scale(0.37);
  }

  #made-in-germany {
    top: 2%;
    transform: rotate(20deg) scale(0.7);
  }

  #made-in-serbia {
    /* top: -2%; */
    transform: rotate(20deg) scale(0.4);
  }

  .prva-kartica p {
    margin-top: 20px;
    /* color: #f9ca36; */
  }




  .kartica__prikazani-tekst {
    display: -webkit-box;
    /* -webkit-line-clamp: 10; */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  


  #cek, .nastavak-teksta {
    display: none;
    transition: 0.5s linear;
  }

  label.vise {
    display: inline-block;
    color: #eee7cf;
    color: #f96036;
    color: #f9ca36;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
    /* margin: 10px 20px; */
  }

  label.vise-pvg {
    display: inline-block;
    color: #eee7cf;
    color: #f96036;
    color: #f9ca36;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
    /* margin: 10px 20px; */
    padding: 5px 100px 20px 0;
  }
  #cek:checked ~ label.vise-pvg {
    visibility: hidden;
  }
  #cek:checked ~ label.vise-pvg::after {
    content: 'Smanji';
    display: block;
    visibility: visible;
    padding: none;
  }


  #cek:checked ~ .nastavak-teksta {
    display: block;
  }

  #cek:checked ~ label.vise {
    visibility: hidden;
  }

  #cek:checked ~ label.vise::after {
    content: 'Smanji';
    display: block;
    visibility: visible;
    padding: none;
  }


  #o-firmi {
    color: white;
    width: 65%;
    align-items: center;
    margin: auto;
    margin-top: 5%;
    max-width: 80ch;
  }

  #o-nama{
      color: #f9ca36;
      /* padding-left: 10px; */
      margin-top: 30px;
      font-size: 30px;
      font-weight: bold;
      margin: auto;
      /* font-size: var(--step-4); */
  }

  #o-firmi p{
    /* color: #f9ca36;
    color: white; */
    max-width: 80ch;
    font-size: 1.2em;
    margin-bottom: 20px;
    font-size: var(--step-0);
  }

  #o-firmi p:nth-child(4) {
    margin-bottom: 0;
  }
  



  iframe{
    width: 100%;
  }

  #video{
    width: 100%;
    margin: 0 auto;
  }

  /* Pozadina za svajper prevlakač recenzija zadovoljnih klijenata i partnera */
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  /* background: linear-gradient(#ECEFFE, #CED6FB); */
}

/* .container h2  */
.naslov-recenzija {
  justify-content: center;
  display: flex;
  margin-bottom: 5%;
}

.card-wrapper {
  max-width: 1100px;
  margin: 0 auto 35px;
  padding: 20px 10px;
  overflow: hidden;
}


.card-list .card-item {
  list-style: none;
  margin: 35px auto;
}

.card-list .card-item .card-link {
  /* width: 400px; */
  user-select: none;
  display: block;
  background-color: #f0f0f0;
  padding: 18px;
  border-radius: 12px;
  text-decoration: none;
  border: 2px solid transparent;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.06);
  transition: 0.2s ease;
}

.card-list .card-item .card-link:active {
  cursor: grabbing;
}

.card-list .card-item .card-link:hover {
  border-color: rgb(175, 173, 173);
}


.card-list .card-link .card-image {
  width: 100%;
  /* aspect-ratio: 16 / 9;
  object-fit: cover;*/
  border-radius: 10px; 
  box-shadow: 100px #000;
}

.card-list .card-link {
  width: 90%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}

.card-list .card-link .badge {
  color: #cf7425;
  background: #DDE4FF;
  margin: 16px 0 18px;
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 500;
  width: fit-content;
  border-radius: 50px;
}

/* .card-list .card-link .card-title {

} */

.card-list .card-link .card-button {
  height: 35px;
  width: 35px;
  color: #f9ca36;
  border-radius: 50%;
  margin: 30px 0 5px;
  background: none;
  cursor: pointer;
  border: 2px solid #f9ca36;
  transform: rotate(-45deg);
  transition: 0.4s ease;
}

.card-list .card-link:hover .card-button {
  color: #fff;
  background: #f9ca36;
  /* border: 2px solid #f9ca36; */
}

/* .swiper {
  width: 600px;
  height: 300px;
} */

.card-wrapper .swiper-pagination {
  top: 2%;
}

.swiper-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic, .swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
  top: 5%;
}


.card-wrapper .swiper-pagination-bullet {
 
  height: 13px;
  width: 13px;
  opacity: 0.5;
  /* background: #f9ca36;
  border: 10px #000; */
}

.card-wrapper .swiper-pagination-bullet-active {
  opacity: 1;
}

.card-wrapper .swiper-slide-button {
  color: #28498b;
  margin-top: -35px;
}

.tekst {
  color: #000;
}

.card-list .card-link:hover p.potpis {
  font-weight:bold;
  text-decoration:underline;
}

.imperial {
  /* border: 2px #00c1ff; */
  box-shadow: 0 0 10px 1px #000;
  border-radius: 10px;
}

@media screen and (max-width: 768px) {
  .card-wrapper {
    margin: 0 10px 25px;
  }

  .card-wrapper .swiper-slide-button {
    display: none;
  }
}

  

  

  article.reference {
    margin: 5% 0;
    position: relative;
    height: 1280px;
  }

  article.reference h2 {
    text-align: center;
    margin: 2%;
  }
/* 
  article.reference .ref-1 {
    width: 50%;
    margin: 0 auto;
  } */

  /* article.reference .ref-1 img {
    width: 100%;
  } */


  article.reference p {
    color: #fff;
    color: #f9ca36;
    color: #191a1c;
    padding: 3% 0;
    margin: 0 auto;
    max-width: 60ch;
    font-size: 1em;
    /* font-size: var(--step-1); */
  }

  article.recenzije {
    margin: 5%;
    /* position: relative; */
    margin: 0 auto;
    position: relative;
    height: fit-content;
    animation-play-state: paused;
  }

.prozor {
  /* margin: 5%; */
  width: 24%;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 15px;
  padding: 1%;
  margin: 0 auto;
  left: 28%;
  display: inline-block;
  overflow: hidden;
  position: absolute;
  opacity: 0;
  animation: kutije 182s infinite ease-in-out;
}


.prozor:hover, .prozor:hover.ref-1{
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  -o-animation-play-state: paused;
  animation-play-state: paused;
}

.prozor img {
  width: 100%;
  height: auto;
}
.prozor p {
  text-align: center;
}

/* .ref-1 img {
  width: 39%;
  margin-left: 25%;
} */

.ref-1 {
  animation-delay: 0s;
}
.ref-2 {
  animation-delay: 26s;
}
.ref-3 {
  animation-delay: 52s;
}
.ref-4 {
  animation-delay: 78s;
}
.ref-5 {
  animation-delay: 104s;
}
.ref-6 {
  animation-delay: 130s;
}
.ref-7 {
  animation-delay: 156s;
}

@keyframes kutije {
  0% { opacity: 0; transform: translate(0,0) scale(0.7);}
  10% { opacity: 1; transform: translate(200px,0) scale(1);}
  40%, 100% { opacity: 0; transform: translate(400px,0) scale(0.7);}
}




  #wrapper-g {
    width: 1200px;
    margin: 0 auto;
    color: #fff;
    /* margin-left: -5%; */
  }

  #tekst_iznad_galerije_kontakta {
    margin: 20px;
  }

  #lokacija{
    margin: 0 auto; 
    overflow: hidden;
  }

  #lokacija p{
    text-align: center;
    margin-bottom: 0;
  }
      
  #galerija {
    margin: 0 auto;
    display: flex;
  }
  /*#galerija img:hover{
    transform: scale(1.6);
  }*/
  
  #levi {
      width: 450px;
      padding-right: 2%;
      } 
  /* #levi img {
      width: 100%;
      height: auto;
      }  */
  #levi iframe {
    width: 100%;
    height: 450px;
  }

  #desni {
    width: 50%;
    height: auto;
    box-sizing: border-box;
  }

  #desni img {
    vertical-align: middle;
  }   

  #desni img:nth-child(1){
    /* width: 47%; */
    width: 100%;
    height: auto;
    /* margin-bottom: 5%;
    margin-right: 3%; */
  }
  #desni img:nth-child(2){
    width: 47%;
    width: 100%;
    height: auto;
    /* margin-bottom: 5%; */
  }
  #desni img:nth-child(3){
    width: 47%;
    width: 100%;
    height: auto;
    /* margin-bottom: 5%;
    margin-right: 3%; */
  }
  #desni img:nth-child(4){
    width: 47%;
    width: 100%;
    height: auto;
    /* margin-bottom: 5%; */
  }

    /*#galerija div#levi{
      display: block;
      width: 100%;
      padding: 0;
    }
    div#galerija{
      display: block;
      margin: 0 2%;
    }
    #galerija div#desni{
      display: block;
      width: 100%;
    }
    div#desni img:nth-child(2){
      margin-right: 4%;
      
    }*/

  #pp{
    /*font-size: x-large;*/
    font-weight: bold;
    text-align: center;
    color: #f9ca36;
    margin: 5px 10%;  
  }




  .image{
    /* padding: 7px; */
    width: calc(100% / 3);
    width: 100%;
    height: 100%;
    display: inline;
  }
  /* .image span{
    display: flex;
    width: 100%;
    overflow: hidden;
  } */
  /* .image img{
    width: 100%;
    vertical-align: middle;
    transition: all 0.3s ease;
    height: 100px;
  } */
  .image:hover img{
    transform: scale(1.1);
  }


  .gk {
    width: 47%;
    height: auto;
    display: inline-block;
    margin-bottom: 3%;
    margin-right: 2%;
  }

  .preview-box{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #fff;
  max-width: 700px;
  max-width: 90vw;          /* maksimalna širina prema viewport-u */
  max-height: 90vh;         /* maksimalna visina prema viewport-u */
  width: auto;
  /* max-height: 700px; */
  height: auto;
  z-index: 55555;
  opacity: 0;
  pointer-events: none;
  border-radius: 3px;
  padding: 0 5px 5px 5px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
  overflow: hidden;         /* sprečava prelijevanje */
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  }
  .preview-box.show{
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.3s ease;
  }
  .preview-box .details{
    display: flex;
    align-items: center;
    padding: 12px 15px 12px 10px;
    justify-content: space-between;
  }
  .preview-box .details .title{
    display: flex;
    font-size: 18px;
    font-weight: 400;
  }
  .details .title p{
    margin: 0 5px;
  }
  .details .title p.current-img{
    font-weight: 500;
  }
  .details .icon{
    color: #007bff;
    font-size: 20px;
    cursor: pointer;
  }
  .preview-box .image-box{
    position: relative;
    flex-grow: 1;
    display: flex;
    align-items: center;      /* vertikalno centriranje */
    justify-content: center;  /* horizontalno centriranje */
    max-height: calc(90vh - 60px); /* ostavi mesta za detalje */
    overflow: hidden;
    width: 100%;
    height: 40vw;
  }

  .preview-box .image-box img {
  max-width: 100%;
  max-height: 100%;     /* da slika ne pređe kontejner */
  width: auto;
  height: auto;
  
  object-fit: contain;
  border-radius: 0 0 3px 3px;
  display: block;
  margin: 0 auto;
}


  /* .image-box .slide{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 30px;
    cursor: pointer;
    user-select: none;
    padding: 10px;
    background: rgba(255,255,255,0.7);
    border-radius: 4px;
    transition: background 0.3s ease;
    z-index: 10;
    /* height: 50px;
    width: 60px; 
    line-height: 50px;
    text-align: center;
  } */

  .preview-box .slide {
    display: none !important;  /* podrazumevano skrivene */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    user-select: none;
    padding: 10px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    transition: background 0.3s ease;
    z-index: 10;
    pointer-events: none; /* dok je skriveno, ne pusta klikove */
  }

  .preview-box:hover .slide {
    display: block !important; /* prikaz na hover nad celim prozorom */
    pointer-events: auto; /* omogućavamo klik */
  }

  .slide.prev{
    left: 10px;
  }
  .slide.next{
    right: 10px;
  }
  
  .preview-box .slide:hover {
    background: rgba(249, 202, 54, 0.9);
    color: #191a1c;
  }

  /* Osnovni stil naslova */
  .image-title {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-family: 'Georgia', serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #f9ca36;            /* Npr. zlatna boja kao na ostatku sajta */
    background-color: rgba(25, 26, 28, 0.8); /* Tamna poluprovidna pozadina */
    background-color: #f9ca36;
    /* background: transparent; */
    color: #191a1c;
    padding: 8px 15px;
    padding: 0;
    /* border: none; */
    border-radius: 8px;
    max-width: 90%;
    margin: 15px auto 10px 20px;
    text-align: center;
    box-shadow: 0 0 5px rgba(249, 202, 54, 0.7);
    box-shadow: none;
    letter-spacing: 0.05em;
    line-height: 1.4;
    max-width: 90%;
    user-select: none;          /* Sprečava selektovanje naslova */
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  /* Efekat prilikom hovera naslova (opciono) */
  .image-title:hover {
    background-color: #f9ca36;
    color: #191a1c;
    cursor: default;
    background: transparent;
  }

  /* Početna (default) pozicija slike */
  .preview-box img {
    transition: transform 0.4s ease, opacity 0.4s ease; 
    will-change: transform, opacity;
  }

  /* Animacija za prevlačenje slike ulevo (izlazi prevlačenjem ulevo) */
  .slide-out-left {
    transform: translateX(-100%);
    opacity: 0;
  }

  /* Animacija za prevlačenje slike udesno (izlazi prevlačenjem udesno) */
  .slide-out-right {
    transform: translateX(100%);
    opacity: 0;
  }

  /* Animacija za pojavljivanje slike sa leve strane */
  .slide-in-left {
    transform: translateX(100%);
    opacity: 0;
    animation: slideInFromRight 0.4s forwards;
  }

  /* Animacija za pojavljivanje slike sa desne strane */
  .slide-in-right {
    transform: translateX(-100%);
    opacity: 0;
    animation: slideInFromLeft 0.4s forwards;
  }

  /* Keyframes za ulaz slike sa desne strane */
  @keyframes slideInFromRight {
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  /* Keyframes za ulaz slike sa leve strane */
  @keyframes slideInFromLeft {
    to {
      transform: translateX(0);
      opacity: 1;
    }
  }


  .shadow{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 2;
    display: none;
    background: rgba(0,0,0,0.45);
  }




  #kontakt-forma {
    /* display: flex; */
    justify-content: space-evenly;
    /* gap: 20px; */
  }

  fieldset {
    padding: 15px;
  }

  legend {
    color: #fff;
    padding: 10px;
  }

  #kontakt-forma h3{
    color: #fff;
    margin: 15px 0;
    border-left: none;
    /* padding-left: 10px; */
    }

  #kontakt-forma p {
    color: gray;
  }
  #kontakt-forma label{
    color: #fff;
  }

  .kontakt-unos {
    border: none;
    outline: none;
    margin: 0.7%;
    padding: 5px;
    font-weight: 500;
    /* border-radius: 50px; */
  }

  .kontakt-unos:focus {
    border: 2px solid #ff994f;
  }

  #kontakt-forma button {
    display: flex;
    align-items: center;
    padding: 15px 30px;
    font-size: 16px;
    color: #fff;
    gap: 10px;
    border: none;
    border-radius: 50px;
    /* background: linear-gradient(270deg, #ff994f, #fa6d86); */
    background: linear-gradient(270deg, #fa6d86, #f9ca36);
    cursor: pointer;
    font-size: var(--step--1);
  }

  #kontakt-forma button img {
    height: 15px;
  }



/*</index.html main*/
     


/*PAVIGIM.html main*/
  .pvg-wrapper {
    margin:0 auto;
    width: 960px;
    height: fit-content;
  }    

  .prva-kartica-pvg img {
    width: 100%;
    height: auto;
  }

  #pvg-logo {
    margin-top: 20px;
  }

  #pvg-plan-kluba {
    margin-top: 50px;
    /* height: 550px; */
    position: relative;
    z-index: -1010;
  }

  h1#pvgh1 {
    text-align: left;
    margin: 30px 0 15px 0;
    color: #f9ca36;
    font-size: 3em;
    font-size: var(--step-5);
    font-family: 'MojFont', sans-serif;
  }

  h2#pvgh2 {
    text-align: left;
    color: #fff;
    margin-left: 0;
    font-size: 2em;
    font-size: var(--step-2);
  }

  #pavigym-opis {
    margin: 0 auto;
    margin-top: 20px;
    width: 50%;
    /* font-size: 16px; */
    color: #fff;
  }

  #pavigym-opis p {
    max-width: 80ch;
    font-size: 1em;
    margin-bottom: 1em;
    /* text-indent: 1.5em; */
  }

  #kartice-pvg {
  /*margin: 0 auto;*/
    width: 100%;
  /* flex-wrap: wrap;*/
    margin-top: 70px;
    color: #fff;
  }   

  .kartica-pvg {
    /*margin: 0 auto;*/
    box-shadow: rgba(255, 251, 0, 0.4) -5px 5px, rgba(249, 202, 54, 0.3) -10px 10px, rgba(249, 202, 54, 0.2) -15px 15px, rgba(249, 202, 54, 0.1) -20px 20px, rgba(249, 202, 54, 0.05) -25px 25px;
    display: block;
    width: 30%;
    margin-left: 35%;
    margin-right: 15%;
    margin-bottom: 100px;
    height: fit-content;
    overflow: hidden;
    padding: 1%;
    z-index: 1200;
    background-color: rgba(0, 0, 0, 0.5);
  }

  /*.kartica-pvg :nth-child(5){
    margin: 0 auto;
    display: block;
    width: 500px;
    margin-bottom: 100px;
    height: 700px;
  }*/

  /*.kartica-pvg:hover{
    transform: scale(1.2);
  }/*/


  /* .kartica-pvg:hover {
    background-color: #0da9ba;
    z-index: 2000;
  } */

/* #back-pvg10:hover .kartica-pvg{
  background-color: #0da9ba;
  color: #0da9ba;
} */

/* #back-pvg10:hover #pvg10 {
  background-color: #0da9ba;
} */


  .kartica-pvg img {
    width: 50%;
    height: auto;
    margin-bottom: 20px;
  }

  .kartica-pvg img:hover{
    transform: scale(1.1);
    transition-duration: 0.7s;
  }

  .kartica-pvg p, .kartica-pvg h2 {
    margin: 5px;
    text-align: left;
    font-size: large;
    font-size: 1.2em;
  }

  .kartica-pvg h3 {
    color: #fff;
    border: none;
    /* border-color: #fff; */
    /* padding: 0; */
  }

  .kartica-pvg a {
    /* background-color: #00c1ff; */
    background-color: #36c7f9;
	  background-color: #3665f9;
	  background-color: #f93665;
    background-color: #d3ddf0;
    background-color: #c1c1c1;
    background-color: #f9ca36;
    background-color: #191a1c;
    float: left;
    padding: 5px 20px;
    color: white;
    border-radius: 10px;
    margin: 15px;
    margin-left: 10px;
    margin-bottom: 5px;
    width: max-content;
  }

  .kartica-pvg a:hover {
    background-color: #3665f9;
  }


#back-pvg10 {
  background-image: url("../slike/Frame-2-PaviGym/10_PAVIGYM_COMFORTGYM_MATS/comfortgym_46895674314_o.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* width: 100%; */
  /* height: 400px; */
  background-position: center;
  /* position: relative; */
  z-index: -1010;
  /* opacity: 50%; */
  overflow: visible;
}

#back-pvg1 {
  background-image: url("../slike/Frame-2-PaviGym/1_PAVIGYM_EXTREME_7mm/imagen-extreme.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* width: 100%; */
  /* height: 400px; */
  background-position: center;
  /* position: relative; */
  z-index: -1010;
  /* opacity: 50%; */
}

#back-pvg2 {
  background-image: url("../slike/Frame-2-PaviGym/2_PAVIGYM_EXTREME_S&S_22mm/imagen-functional.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* width: 100%; */
  /* height: 400px; */
  background-position: center;
  z-index: -1010;
  /* opacity: 50%; */
}

#back-pvg3 {
  background-image: url("../slike/Frame-2-PaviGym/3_PAVIGYM_ENDURANCE_7mm/imagen-functional.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* width: 100%; */
  /* height: 400px; */
  background-position: center;
  z-index: -1010;
  /* opacity: 50%; */
}

#back-pvg4 {
  background-image: url("../slike/Frame-2-PaviGym/4_PAVIGYM_ENDURANCE_S&S_22mm/endurance-ss-imagen.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* width: 100%; */
  /* height: 400px; */
  background-position: center;
  z-index: -1010;
  /* opacity: 50%; */
}

#back-pvg5 {
  background-image: url("../slike/Frame-2-PaviGym/5_PAVIGYM_MOTION_12mm/imagen-motion.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* width: 100%; */
  /* height: 400px; */
  background-position: center;
  z-index: -1010;
  /* opacity: 50%; */
}
#back-pvg6 {
  background-image: url("../slike/Frame-2-PaviGym/6_PAVIGYM_PERFORMANCE+_5mm/imagen-functional-1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* width: 100%; */
  /* height: 400px; */
  background-position: center;
  z-index: -1010;
  /* opacity: 50%; */
}
#back-pvg7 {
  background-image: url("../slike/Frame-2-PaviGym/7_PAVIGYM_TURF/orto-med-sport---physio_49880190646_o.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* width: 100%; */
  /* height: 400px; */
  background-position: center;
  z-index: -1010;
  /* opacity: 50%; */
}
#back-pvg8 {
  background-image: url("../slike/Frame-2-PaviGym/8_PAVIGYM_TRAFFIC/imagen-traffic.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* width: 100%; */
  /* height: 400px; */
  background-position: center;
  z-index: -1010;
  /* opacity: 50%; */
}
#back-pvg11 {
  background-image: url("../slike/Frame-2-PaviGym/11_PAVIGYM_FUNCTIONAL/51206804668_c72ae4cef7_o.jpg");
  /* background-image: url("../slike/Frame-2-PaviGym/11_PAVIGYM_FUNCTIONAL/51206599996_090427651c_o.jpg"); */
  background-image: url("../slike/Frame-2-PaviGym/11_PAVIGYM_FUNCTIONAL/51206805163_de32c15902_o.jpg");
  
  background-repeat: no-repeat;
  background-size: cover;
  /* width: 100%; */
  /* height: 400px; */
  background-position: center;
  z-index: -1010;
  /* opacity: 50%; */
}
#back-pvg12 {
  background-image: url("../slike/Frame-2-PaviGym/12_PAVIGYM_WEIGHTLIFTING_22mm/Weightlifting-imagen.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* width: 100%; */
  /* height: 400px; */
  background-position: center;
  z-index: -1010;
  /* opacity: 50%; */
}
#back-pvg13 {
  background-image: url("../slike/Frame-2-PaviGym/13_PAVIGYM_SOLID_PRO/53043016306_337dddfdc3_o.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* width: 100%; */
  /* height: 400px; */
  background-position: center;
  z-index: -1010;
  /* opacity: 50%; */
}
#back-pvg9 {
  background-image: url("../slike/Frame-2-PaviGym/9_PAVIGYM_ACOUSTIC/49704681098_bd31e6c413_o.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  /* width: 100%; */
  /* height: 400px; */
  background-position: center;
  z-index: -1010;
  /* opacity: 50%; */
}
#back-pvg14 {
  background-image: url("../slike/Frame-2-PaviGym/BigJag/54008158103_954319e41c_o.jpg");
  /* background-image: url("../slike/Frame-2-PaviGym/BigJag/wildsilence.png"); */
  background-repeat: no-repeat;
  background-size: cover;
  /* width: 100%; */
  /* height: 400px; */
  background-position: center;
  z-index: -1010;
  /* opacity: 50%; */
}
#pvg14 {
  background-image: url("../slike/Frame-2-PaviGym/BigJag/wildsilence.png");
  background-repeat: no-repeat;
  background-size: 100%;
  /* background-size: cover; */
  /* width: 100%; */
  /* height: 400px; */
  background-position: bottom;
  z-index: -1010;
  /* opacity: 50%; */
}

#back-pvg15 {
  background-image: url("../slike/Frame-2-PaviGym/Konekt-Connect_PaviGym/INSTALLATION-CONNECT.jpg");
  /* background-image: url("../slike/Frame-2-PaviGym/BigJag/wildsilence.png"); */
  background-repeat: no-repeat;
  background-size: cover;
  /* width: 100%; */
  /* height: 400px; */
  background-position: center;
  z-index: -1010;
  /* opacity: 50%; */
}


.card-contents {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 1500ms;
}

.card-contents[aria-hidden="false"] {
  grid-template-rows: 1fr;
}

.card-contents > span {
  overflow: hidden;
}

/* .card-contents:hover {
  grid-template-rows: 1fr;
} */

.card__read-more {
  display: block;
  opacity: 0;
  height: 0;
  transition: all 0.5s;
  /* max-height: 100%; */
  /* max-height: 0; */
  overflow: clip;
  visibility: hidden;
  grid-template-rows: 0fr;
  transition: max-height 0.5s ease-out;
}

.card__read-more--open {
  display: block;
  opacity: 1;
  /* height: 47rem; */
  /* min-height: fit-content; */
  height: fit-content;
  /* height: 55rem; */
  /* overflow: hidden; */
  /* max-height: 100%; */
  grid-template-rows: 1fr;
  visibility: visible;
}

.card-contents.is-open .card__read-more {
  max-height: 100%;
}

.read-more-btn {
  width: max-content;
  display: block;
  color: var(--accent);
  color: #000;
  color: #f9ca36;
  background-color: rgba(0, 0, 0, 0.06);
  padding: 0.6rem;
  font-size: 1rem;
  position: relative;
  z-index: 1;
  transition: all 0.5s;
  cursor: pointer;
  border-radius: 3px;
}

read-more-btn[aria-expanded="true"] {
  height: auto;
  visibility: visible;
}

.read-more-btn:hover {
  background-color: #fff;
  background-color: #191a1c;
  box-shadow: 0 0 2rem rgba(0, 0, 0, 0.1);
  transform: translate(3px);
}




  /*.zvezda {
  display: flex;
  margin: 10px 0 10px 10px;
  }

  .zvezda img {
  width: 25px;
  height: auto;
  margin-bottom: auto
  }

  .zvezda img:hover {
    transform: scale(1.55);
    transition-duration: 0.15s;
    background-image: url("../slike/ico/Gold_Star.svg.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 25px;
    height: auto;
    background-position: center;
    position: relative;
  } */

/*</PAVIGIM.html main*/


/*STIL-FIT.html main*/

  body#stil-fit-body{
    background-color: #fff;
  } 

  main#stil-fit-main {
    overflow:hidden;
    padding-bottom: 70px;
    box-shadow: rgba(50, 50, 93, 0.1) 0px 30px 60px 12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
  }

  .sf-wrapper{
    margin:0 auto;
    width: 960px;
  }

  h1#sfh1 {
    text-align: center;
    margin-top: 60px;
    color: #bababa;
    margin: 30px 0 15px 15px;
    font: 3em sans-serif;
    font-weight: 800;
    -webkit-text-stroke: 1px #bababa;
    -webkit-text-stroke: 1.5px #000; 
    font-size: var(--step-5);
  }

  #sf-section-1 h2{
    text-align: center;
    font-size: 1.5em;
    font-size: var(--step-2);
  }

  #sf-fid {
    margin: 0 auto;
    width: 800px;
    text-align: center;
  }

  #sf-fid img{
    width: 50%;
  }

  /* .sf-logo {
    background-color: #e0dfdf;
    background-color: #fff;
  } */
  .sf-logo img {
    mix-blend-mode: darken;
  }


  #baner {
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
    background-image: url("../slike/Frame-3-STIL-FIT/csm_Kabelzug_Produktseite_a79a747d11.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 400px;
    background-position: center;
    position: relative;
    z-index: -1010;
  }

  #baner p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 77px;
    font-weight: bold;
    -webkit-text-stroke: 3px white;
    -webkit-text-stroke: 1px #03153a; 
  }

  /*#baner p:hover {
      color: #0058FF;
      color: #ff4bb7;
    } */


    #sf-citati {
      display: flex;
      margin-top: 8%;
      margin-bottom: 8%;
    }
    
    #sf-citati div {
      margin: 0 auto;
      width: 400px;
      height: auto;
    }
    
    #sf-citati h2 {
      color: #000;
    /*color: #41A4FF;*/
    }
    
    #sf-citati p {
      color: #AAAAAA;
      padding-top: 50px;
    }
  


    /* #cek, .nastavak-teksta {
      display: none;
      transition: 0.5s linear;
    }

    label.vise {
      display: inline-block;
      color: #AAA;
      text-decoration: underline;
      cursor: pointer;
      font-weight: bold;
    }
    #cek:checked ~ .nastavak-teksta {
      display: block;
    }

    #cek:checked ~ label.vise {
      visibility: hidden;
    }

    #cek:checked ~ label.vise::after {
      content: 'Smanji';
      display: block;
      visibility: visible;
    } */



    #sf-kartice {
      width: 100%;
      /* flex-wrap: wrap;*/
      margin-top: 70px;
    }   
      
    .sf-kartica {
      box-shadow: rgba(128, 128, 128, 0.4) -5px 5px, rgba(128, 128, 128, 0.3) -10px 10px, rgba(128, 128, 128, 0.2) -15px 15px, rgba(128, 128, 128, 0.1) -20px 20px, rgba(128, 128, 128, 0.05) -25px 25px;
      /*box-shadow: rgba(240, 46, 170, 0.4) -5px 5px, rgba(240, 46, 170, 0.3) -10px 10px, rgba(240, 46, 170, 0.2) -15px 15px, rgba(240, 46, 170, 0.1) -20px 20px, rgba(240, 46, 170, 0.05) -25px 25px;*/
      display: inline-block;
      width: 30%;
      margin-left: 8%;
      margin-right: 8%;
      margin-bottom: 50px;
      height: fit-content;
    }
      
    .sf-kartica img {
      width: 100%;
      height: auto;
    }
      
    .sf-kartica img:hover{
      transform: scale(1.3);
      transition-duration: 0.05s;
    }
    
    #functional img {
      width: 47%;
    }  

    #functional img:hover {
      transform: scale(2);
      transition-duration: 0.05s;
    }  

    #bajs img:hover {
      transform: scale(2);
      transition-duration: 0.05s;
    }  

    .sf-kartica:nth-child(5) {
      margin-left: 31%;
    }
      
    .sf-kartica p, h2 {
      margin: 5px;
      line-height: 1.4;
    }
      
    .sf-kartica a {
      float: right;
      margin: 5px 20px 5px 0;
    }
      
      /* .zvezda {
        display: flex;
        margin: 10px 0 10px 10px;
      }
      
      .zvezda img {
        width: 25px;
        height: auto;
        margin-bottom: auto
      }
      
      .zvezda img:hover {
        transform: scale(1.55);
        transition-duration: 0.15s;
        background-image: url("../slike/ico/Gold_Star.svg.png");
        background-repeat: no-repeat;
        background-size: cover;
        width: 25px;
        height: auto;
        background-position: center;
        position: relative;
      }       */
      
      article {
        width: 100%;
        text-align: center;
      }
      article img {
        width: 15%;
        vertical-align: middle;
        margin: 2% 2.8%;
      }

      article.sf-logo-da img {
        width: 15%;
        vertical-align: middle;
        margin: 2% 2.8%;
      }
      
      article h3 {
        margin: 45px 0 15px;
      }

      #exq {

        color: #000;
        font-size: 2em;
      }

/*</STIL-FIT.html main*/


/*GYM4ALL.html main*/

  .g4a-wrapper {
      margin:0 auto;
      width: 1080px;
  }     

  h1#g4a-h1 {
    margin: 28px;
  }


  #g4alogo {
      position: absolute;
      width: 20%;
      /* height: 20%; */
  }    

  .prva-kartica-g4a {
    width: 100%;
    height: fit-content;
    margin-bottom: 50px;
  }


  #baner-g4a {
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; */
    width: 100%;
    height: 270px;
    height: fit-content;
    top: -113px;
    /* top: 10%; */
    background-position: center;
    position: relative;
  }

  #baner-g4a p {
    position: absolute;
    /* top: -20%;
    left: 50%;
    transform: translate(-50%, -50%); */
    top: -42%;
    left: 1.5%;
    /* transform: translate(-50%, -50%); */
    color: white;
    font-size: 300%;
    font-weight: bold;
    /* -webkit-text-stroke: 3px white; */
    -webkit-text-stroke: 1px #03153a;
    /* background-color: rgba(0, 0, 0, 0.2); */
    /* padding: 1%; */
    border-radius: 10px;
    text-align: center;
  } 



  .g4a-opis {
    width: 60%;
    margin: 0 auto;
  }

  div#slogan {
    width: 96%;
    margin: 0 auto;
    margin-top: 50px;
    margin-bottom: 30px;
  }
  div#slogan p{
    border-left: 3px #f9ca36 solid;
  /*border-left: 3px rgb(72, 0, 75) solid;*/
    color: gray;
    padding-left: 10px;
    margin-top: 30px; 
  }

  .prva-kartica-g4a img {
    width: 562.5px;
    width: 746.5px;
    height: auto;  
  }

  #klub-g4a {
    margin: 0 auto;
    width: fit-content;
    height: fit-content;
    margin-bottom: 60px;
  }

  #reference-a4glogo {
    position: relative;
    margin: 0 auto;
    width: 70%;
    height: fit-content;
    margin-bottom: 40px;
    text-align: center;
    justify-content: center;
    align-items: center;    
    background-position: center;
  }

  #reference-a4glogo img {
    width: 70%;
  }

  .prva-kartica-g4a p{
    margin-top: 20px;
    color: #f9ca36;
    color: white;
  }



  #g4a-kartice {
    margin: 0 auto;
    width: 100%;
    /*height: 1400px;*/
    height: fit-content;
    /*flex-wrap: wrap;*/
    margin-top: 20px;
  }    


  .g4a-kartica{
    display: inline-block;
    width: 48%;
    margin-top: 30px;
    box-shadow: rgba(255, 251, 0, 0.4) -5px 5px, rgba(249, 202, 54, 0.3) -10px 10px, rgba(249, 202, 54, 0.2) -15px 15px, rgba(249, 202, 54, 0.1) -20px 20px, rgba(249, 202, 54, 0.05) -25px 25px;
  }

  .odvoji{
    margin-right: 3%;
  }

  .g4a-kartica img{
    width: auto;
    height: 100%;
    margin: auto;
  }

  .visina{
    height: 250px;
    width: 80%;
    margin: auto;
    margin-bottom: 20px;
  }    

  .g4a-kartica-rope img{
    height: 95%;
  }

  .g4a-kartica p{
    margin-left: 10%;
    margin-top: 10px;
    margin-bottom: 20px;
    border-left: 3px rgb(244, 244, 54) solid;
    /*border-left: 3px rgb(72, 0, 75) solid;*/
    color: #f9ca36;
    padding-left: 10px;
  }

  #ref-plan-kluba {
    width: 100%;
  }

  p.vise {
    color: #f9ca36;
    text-decoration: underline;
    cursor: pointer;
    font-weight: bold;
    padding: 0;
}

/*</GYM4ALL.html main*/



/*Fit-Med-Merni-ins.html main*/

  body#Med-merni-body{
    background-color: #fff;
    } 

  main#Med-merni-main {
      overflow:hidden;
      padding-bottom: 70px;
      box-shadow: rgba(50, 50, 93, 0.1) 0px 30px 60px 12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
      }

  #kartice-Med-merni {
    /*margin: 0 auto;*/
      width: 100%;
    /* flex-wrap: wrap;*/
      margin-top: 70px;
  }   
  
  .kartica-Med-merni {
    box-shadow: rgba(128, 128, 128, 0.4) -5px 5px, rgba(128, 128, 128, 0.3) -10px 10px, rgba(128, 128, 128, 0.2) -15px 15px, rgba(128, 128, 128, 0.1) -20px 20px, rgba(128, 128, 128, 0.05) -25px 25px;
    width: 30vw;
    display: block;
    height: fit-content;
    overflow: hidden;
    padding: 1%;
    margin: 5% auto;
  }
  
  /*.kartica-pvg :nth-child(5){
    margin: 0 auto;
    display: block;
    width: 500px;
    margin-bottom: 100px;
    height: 700px;
  }*/
  
  /*.kartica-pvg:hover{
    transform: scale(1.2);
  }/*/
  
  .kartica-Med-merni img {
    width: 70%;
    height: auto;
    margin-bottom: 20px;
  }
  
    #Med-merni4 img {
      width: 100%;
    }
    
  .kartica-Med-merni img:hover{
    transform: scale(1.1);
    transition-duration: 0.7s;
  }
  
  .kartica-Med-merni p, h2 {
    margin: 5px;
    }
  
  .kartica-Med-merni a {
    background-color: #00c1ff;
    background-color: #191a1c;
    float: left;
    padding: 5px 20px;
    color: white;
    border-radius: 10px;
    margin-left: 10px;
    margin-bottom: 20px;
    }
    .kartica-Med-merni a:hover {
      background-color: #36c7f9;
	    background-color: #3665f9;
	
    }
  
    
  .myPDF {
    /* width: 70%;
    height: 490px; */
    margin-bottom: 2%;
    /* height: calc(100% 100%); */
    position: relative;
    margin: 0 auto;
    width: 25vw;
    max-width: 100vw;
    max-height: 100vw;
    height: calc(25vw * (1.414/1));
  }


/*</Fit-Med-Merni-ins.html main*/

/*TotalWellness.html main*/

.prva-kartica-tw {
  width: 100%;
  height: fit-content;
  padding-bottom: 50px;
}

.prva-kartica-tw img {
  width: 562.5px;
  height: auto;  
}

.prva-kartica-tw p{
  margin-top: 20px;
  color: #000;
}
.prva-kartica-tw li {
  color: #000;
  line-height: 1.4em;
  /* margin-bottom: 1em; */
}

#tw-logo {
  width: 70%;
  margin: 0 auto;
}

#tw-logo img{
  width: 100%;
  margin: 0 auto;
}

#tw-glsl {
  width: 90%;
  margin: 0 auto;
}

#tw-glsl img{
  width: 100%;
  margin: 0 auto;
}

/*</TotalWellness.html main*/

/*REFERENCE.html main*/

.reference-ul li{
  color: #fff;
}

.reference-list-container {
    max-width: 700px;
    margin: 1em auto;
    /* font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; */
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
    padding: 1.2em 1.5em;
  }
  .reference-list-container h2 {
    text-align: center;
    color: #2a2a2a;
    margin-bottom: 1em;
  }
  .reference-ul {
    list-style: none;
    padding-left: 0;
  }
  .reference-ul li {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #ddd;
    font-size: 1rem;
    color: #333;
    transition: background-color 0.25s ease;
  }
  .reference-ul li:last-child {
    border-bottom: none;
  }
  .reference-ul li:hover {
    background-color: #e6f0ff;
  }
  .reference-ul li b {
    color: #0056b3;
  }
  .reference-ul li img {
    /* max-height: 24px;
    max-width: 40px;
    margin-right: 12px; */

    height: 48px;
    height: 100px;
    width: auto;
    margin-right: 16px;
    object-fit: contain;
    flex-shrink: 0;
  }

  .reference-ul li a{
    background: transparent;
  }

  .footer-text {
    margin-top: 15px;
    font-size: 0.9rem;
    color: #666;
    text-align: center;
  }
  .dugme-ponuda-cene {
    display: inline-block;
    text-decoration: none;
    color: white;
    background-color: #0056b3;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    margin: 1.2em auto 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .dugme-ponuda-cene:hover {
    background-color: #003f80;
  }

  .reference-list-container p {
    color: #2a2a2a;
  }

/*</REFERENCE.html main*/

.dugme-ponuda-cene {
	/* background-color: #00c1ff; */
	background-color: #36c7f9;
  background-color: #c1c1c1;
  background-color: #191a1c;
	float: left;
	padding: 5px 20px;
	color: white;
	border-radius: 10px;
	margin: 15px;
	margin-left: 10px;
	margin-bottom: 5px;
	width: max-content;
}

.dugme-ponuda-cene:hover {
  background-color: #f9ca36;
  color: #000;
}

.dugme-ponuda-cene-g4a {
	/* background-color: #00c1ff; */
	background-color: #36c7f9;
  background-color: #3665f9;
	background-color: #f93665;
  background-color: #d3ddf0;
  background-color: #c1c1c1;
  background-color: #f9ca36;
  background-color: #191a1c;
	float: left;
	padding: 5px 20px;
	color: white;
	border-radius: 10px;
	/* margin: 15px; */
	margin-left: 50px;
	margin-bottom: 5px;
	width: max-content;
}

.dugme-ponuda-cene-g4a:hover {
  background-color: #3665f9;
  background-color: #f93665;
  background-color: #ff003c;
  background-color: #f96936;
  background-color: #f9ca36;
  color: #000;
  /* color: #191a1c; */
}

  #topskrol {
    width: 30px;
    height: 30px;
    position: fixed;
    right: 3%;
    bottom: 10vh;
    z-index: 1000;
    background: white;
    opacity: 30%;
    padding: 0.7%;
    border-radius: 8%;
    box-shadow: rgba(128, 128, 128, 0.4) -5px 5px, rgba(128, 128, 128, 0.3) -10px 10px, rgba(128, 128, 128, 0.2) -15px 15px, rgba(128, 128, 128, 0.1) -20px 20px, rgba(128, 128, 128, 0.05) -25px 25px;
    rotate: 45deg;
    }

  #topskrol:hover{
    opacity: 100%;
    }
  #topskrol a{
    text-decoration: none;
    color: #231F20;
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    vertical-align:middle;
    }
  #topskrol a:hover{
    color: #f9ca36;
    }

  #vrati {
    rotate: -45deg;
    /* text-align: center;
    vertical-align: middle; */
    height: fit-content;
  }

.chat_chatContainer___3hXW {
	background-color: transparent;
	padding: 0;
	border: 0;
	outline: 0;
	pointer-events: none;
	margin: 0;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 60px;
	position: fixed;
	right: 18px;
  /* top: 270px; */
  /* top: 86vw; */
  top: 50%;
	/* bottom: 200px; */
	z-index: 2997;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
	gap: 6px;
}

.chat_chatContainer___3hXW > a {
	pointer-events: all;
	cursor: pointer;
	border: none;
	outline: none;
	background-color: transparent;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: row;
	gap: 20px;
}

.chat_chatContainer___3hXW > a > div {
	width: 54px;
	height: 54px;
	background-color: #fff;
	border-radius: 50%;
	box-shadow: 0 10px 10px 0 rgba(0,0,0,.2);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: row;
	gap: 5px;
	pointer-events: none;
}
  


footer {
    box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    clear:both;
    background-color: #f9ca36;
    color: #000;
    padding-top: 5px;
    height: 280px;
    box-sizing:border-box;
    padding: 2%;
    padding-bottom: 0;
    height: fit-content;
}

  footer div {
    margin: 0 auto;
  /*margin-top: 15px;
    width: 600px;*/
  }          

  .futer-oba {
    width: 1000px;
    width: fit-content;
    margin: 0 auto;
  }

  footer .logo-u-futeru {
    width: 13vw;
    max-width: 200px;
    height: auto;
    display: inline-block;
    margin: auto;
    /* margin-left: 10%; */
  }
  
  footer .logo-u-futeru img {
    width: 100%;
    height: auto;
    display: flex;
    margin: auto;
  }
  
  footer #futer-kontakt {
    display: inline-block;
    position: relative;
    margin: 0 auto;
  }  
  
  #Adresa {
    display: inline;
    width: 100%;
  }
  #Adresa p {
    width: 100%;
    display: flex;
    display: inline-block;
    align-items: center; /* vertikalno poravnanje */
    gap: 8px; /* razmak između ikone i teksta */
    margin: 0; /* ukloni margine ako treba */
  }
  #map-pin-marker-icon {
    width: 20px; /* prilagodi veličinu ikone */
    height: 20px;
    flex-shrink: 0; /* sprečava skupljanje ikone */
    vertical-align: middle !important;  /* poravnava sa sredinom teksta */
    margin: 0;
    padding-bottom: 5px;
  }
  #phone-call-icon {
    width: 20px; /* prilagodi veličinu ikone */
    height: 12px;
    flex-shrink: 0; /* sprečava skupljanje ikone */
    vertical-align: middle !important;  /* poravnava sa sredinom teksta */
    margin: 0;
    padding-bottom: 5px;
  }
  #mail-icon {
    width: 20px; /* prilagodi veličinu ikone */
    height: 12px;
    flex-shrink: 0; /* sprečava skupljanje ikone */
    vertical-align: middle !important;  /* poravnava sa sredinom teksta */
    margin: 0;
    padding-bottom: 5px;
  }
  #world-wide-web-icon {
    width: 38px; /* prilagodi veličinu ikone */
    height: 28px;
    flex-shrink: 0; /* sprečava skupljanje ikone */
    vertical-align: middle !important;  /* poravnava sa sredinom teksta */
    margin: 0;
    padding-bottom: 5px;
  }
  #viljuškar-icon {
    width: 37px; /* prilagodi veličinu ikone */
    height: 37px;
    flex-shrink: 0; /* sprečava skupljanje ikone */
    vertical-align: middle !important;  /* poravnava sa sredinom teksta */
    margin: 0;
    padding-bottom: 5px;
  }
  #maintenance-icon {
    width: 28px; /* prilagodi veličinu ikone */
    height: 28px;
    flex-shrink: 0; /* sprečava skupljanje ikone */
    vertical-align: middle !important;  /* poravnava sa sredinom teksta */
    margin: 0;
    padding-bottom: 5px;
  }


  footer p {
    text-align:center;
    font-size: 16px;
  }

  footer p a {
    text-decoration: none;
    color: #231F20;
    font-weight: bold;
  }

  footer a:hover{
    color: white;
  }

  footer img {
    vertical-align:middle;
    margin-left: 37%;
    margin-top: 2%;
  }
  
  #par a{
    color: #fff;
    font-size: 1.3em;
    font-style: normal;
    margin-top: 7px;
    opacity: 50%;
  }

  #par a:hover{
    opacity: 100%;
  }

  footer #risponsiv {
    margin-top: 0;
  }
  
  footer #risponsiv img{
    height: auto;
    width: 70px;
    vertical-align:middle;
    margin-right:10px;
    overflow: hidden;
  }

    
  footer .logo{
    display: inline-block;
  }

  footer nav{
    display: inline-block;
    margin-left: 50px;
    position: relative;
  }

  footer nav ul {
    display: flex;
    flex-wrap: nowrap;        /* Sprečava prelome u novi red */
    /* overflow-x: auto;         Pojaviće se horizontalni skrol ako nema mesta */
    padding: 0;
    margin: 0;
    list-style: none;
  }
  
  footer nav ul li{
    display: inline-block;
    margin-left: 10px;
    font-weight: bold;
    font-size: var(--step--1);
  }

  footer nav ul li a{
    text-decoration: none;
    color: #231F20;
  }

  footer nav ul li a:hover{
    opacity: 90%;
    color: white;
  }


  .autor {
    margin: 30px;
    margin-left: 0;
  }

  .autor a {
    margin: 5px;
  }


/* @media (max-width: 768px) {
  
} */

@media (max-width: 1080px) {

  header{
    height: 84px;
    height: auto;
    background-color: #f9ca36;
    padding: 20px 30px 20px 30px;
    padding: 10px 30px 10px 30px;
  }

  header.sticky {
    padding: 10px 30px 10px 30px;
  }
  
  /* header.sticky {
  height: auto;
  } */

  header img {
    width: 60px;
  }

  .kontakt-telefon {
  width: 250px;          /* fiksna širina vidljivog dela */
  width: 120%;
  overflow: hidden;      /* sakriva tekst koji izlazi van */
  border: 1px solid #ccc;
  padding: 5px 10px;
  background: #f9f9f9;
  height: fit-content;
  margin-top: 25px;
  margin-left: -30px;
  margin-bottom: 10px;
  margin: -20px -30px 10px -30px;
}

      .navbar {
        /* top: 150px; */
        flex-direction: column;
        align-items: flex-start; 
        height: fit-content;  
        z-index: 1500;
        background-color: #f9ca36;
      }

      .wrapper{
        width: 100%;
      }

      .wrapper-nav{
        width: 100%;
        /* margin: 0 auto; */
      }

      .sf-wrapper{
        width: 100%;
      }

      header p.logo{
        font-size: 20px;
      }

      #voyage{
        margin-left: 5px;
        margin-right: 5px;
      }
  
      /* .navbar-links  */
      .navbar-links ul li a.active {
        color: #fff;
      }

      .active {
        border-top: white 2px solid;
        border-bottom: white 2px solid;
      }

      .toggle-button {
        display: flex;
        right: 14vw;
        right: 12vw;
      }
  
      .navbar-links {
        display: none;
        width: 100%;
      }
  
      .navbar-links ul {
        width: 100%;
        flex-direction: column;
      }
  
      .navbar-links ul li {
        text-align: center;
      }
  
      .navbar-links ul li a {
        padding: .5rem 1rem;
        color: #000;
      }
  
      .navbar-links.active {
        display: flex;
      }

      .navbar-links ul li a.kontaktn1 {
        margin-left: 0;
        margin: 25px;
      }

      ul li ul.dropdown {  
        width: fit-content;
        /* background: #ffdd70;
        position: absolute;
        z-index: 999;
        display: none;  */
      }
      ul li:hover ul.dropdown {
        display: none;
      }

      
main {
  padding: 200px 0 ;
  padding: 150px 0 ;
  padding: 80px 0 ;
}

  /*index.html media*/

  #baner-g4a {
    width: 100%;
    /* width: 50%; */
    /* height: 270px; */
    top: 60%;
    background-position: center;
    /* position: absolute; */
  }

  #baner-g4a p {
    width: 100%;
    position: absolute;
    top: 20%;
    top: -80px;
    left: -10%;
    /* transform: translate(-50%, -50%); */
    color: white;
    font-size: 200%;
    font-weight: bold;
    /* -webkit-text-stroke: 3px white; */
    -webkit-text-stroke: 1px #03153a;
    /* background-color: rgba(0, 0, 0, 0.2); */
    /* padding: 1%; */
    border-radius: 10px;
    text-align: center;
    margin: 0;
  } 

  #baner-home {
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; */
    width: 100%;
    height: 270px;
    top: 60%;
    background-position: center;
    position: absolute;
  }

  #baner-home p {
    width: 100%;
    position: absolute;
    top: 20%;
    left: -10%;
    /* transform: translate(-50%, -50%); */
    color: white;
    font-size: 300%;
    font-weight: bold;
    /* -webkit-text-stroke: 3px white; */
    -webkit-text-stroke: 1px #03153a;
    /* background-color: rgba(0, 0, 0, 0.2); */
    /* padding: 1%; */
    border-radius: 10px;
    text-align: center;
    margin: 0;
  } 

  #pecat {
    width: 40%;
    position: absolute;
    top: 72%;
    right: -6%;
    z-index: 1000;
    /* transform: rotate(20deg) scale(1.05); */
    transform: rotate(20deg) scale(0.95);
  }

  #pecat img {
    width: 80%;
  }

  .made-in {
    top: 3.5%;
    right: 60%; 
  }

  /* .made-in img{
    transform: scale(0.7);
  } */

  .pvg-made-in {
    top: 1.15%;
    right: 0;
    left: 77%;
    transform: rotate(20deg) scale(0.9);
  }

  .sf-made-in {
    top: -84px;
    right: 0;
    left: 50%;
    transform: rotate(20deg) scale(0.28);
    z-index: -50;
  }

  .g4a-made-in {
    top: 2.1%;
    right: 70px;

    top: -84px;
    right: 0;
    left: 50%;
    transform: rotate(20deg) scale(0.28);
  }

  .fm-made-in {
    top: 1.4%;
    right: 0;
    left: 47%;
    transform: rotate(20deg) scale(0.28);
  }

  .tw-made-in {
    top: -84px;
    right: 0;
    left: 50%;
    transform: rotate(20deg) scale(0.28);
    z-index: -50;
  }



    div#uvodniopis{
      width: 96%;
      height: 550px;
      margin: 0 auto;
      margin-top: 50px;
      }

    div.prva-kartica {
      width: 100%;
      /* height: 600px; */
      }
    .prva-kartica p{
      /* text-align: justify; */
      width: 90%;
      margin: 0 auto;
      }

      div#klub {
        height: 100%;
        /* margin-top: 100px; */
        /* margin-bottom: 100px; */
        z-index: -1001;
      }  

      #o-firmi {
        height: fit-content;
        margin-top: 30px;
        width: 90%;
        margin-bottom: 28px;
        max-width: 80ch;
      }
      #o-firmi p {
        font-size: 1.2em;
      }
      p#o-nama {
        color: #f9ca36;
        padding-left: 10px;
        margin-top: 30px;
        padding-bottom: 10px;
        font-size: 2em;
        font-weight: bold;
        margin: auto;
      }
      
      label.vise {
        padding: 5px 100px 20px 20px;
        /* padding-top: 0; */
      }



    article.reference {
      width: 100%;
      /* margin: 10% 0; */
      margin: 0;
    }

    article.reference .ref-1 {
      width: 90%;
      margin: 0 auto;
    }

    /* article.recenzije {
      width: 100%;
      margin: auto;
    } */

    section.prozor {
      width: 90%;
      max-width: 330px;
      align-items: center;
      margin: 0 auto;
      padding: 2%;
      left: -185px;
    }
    
    section.prozor:hover {
      -webkit-animation-play-state: paused;
      -moz-animation-play-state: paused;
      -o-animation-play-state: paused;
      animation-play-state: paused;
    }

      #wrapper-g {
        width: 90%;
        margin: 0 auto;
      }
      #lokacija {
        width: 100%;
        margin: auto;
      }

      #galerija div#levi{
        display: block;
        width: 100%;
        padding: 0;
      }
      div#galerija{
        width: 100%;
        /* display: block; */
        /* margin: 0 2%; */
        flex-direction: column;
      }

      #galerija iframe {
        width: 100%;
        margin-bottom: 5%;
        height: 300px;
      }
      #galerija div#desni{
        /* display: block; */
        width: 100%;
      }

      /* div#desni img {
        display: block;
      }

      div#desni img:nth-child(1){
        width: 100%;
        margin-right: 0;
      }
      div#desni img:nth-child(2){
        width: 100%;
        margin-right: 0;
      }
      div#desni img:nth-child(3){
        width: 100%;
        margin-right: 0;
      }
      div#desni img:nth-child(4){
        width: 100%;
        margin-right: 0;
      } */
      
      label {
        display: block;
      }
      
      .kontakt-unos {
        width: 80vw;
      }
  
  /*</index.html media*/


  /*PAVIGIM.html media*/

.animacija-bez {
  display: none;
}

  .pvg-wrapper {
    margin:0 auto;
    width: 100%;
  }  

  img#pvg-logo {
    width: 100%;
    height: auto;
  }


  .a-tekst-pvg {
    width: 600%;
    height: auto;
    columns: 1;
    /* background-color: #ff008c;
    background-color: #000; */
    color: white;
    /* z-index: -99; */
    position: absolute;
    top: 2%;
    /* right: -2400px; */
    right: -600%;
    /* overflow: hidden; */
    animation: 8s pvg-tekst 0.5s infinite ease-in-out;
    /* rotate: 45deg; */
    /* -webkit-text-stroke: 20px rgba(0, 0, 0, 0.06); */
  }

  .a-tekst-pvg p {
    font-size: 15em;
    font-size: 28vw;
    font-weight: bold;
    
  }

  @keyframes pvg-tekst {
    0% {
      top: 2%;
      right: -600%;
    }
  
    /* 50% {
      top: 2%;
      right: 100%;
    } */
  
    100% {
      top: 2%;
      right: 150%;
    }
  }



  #pavigym-opis {
    width: 90%;
  }


    section#kartice-pvg{
      width: 90%;
      margin: 0 auto;
    }

    div.kartica{
      width: 100%;
      margin: 60px auto;
      /* box-shadow: rgba(48, 48, 45, 0.1) -5px 5px, rgba(42, 45, 44, 0.05) -10px 10px; */
    }

    div.kartica h2 {
      text-align: left;
    }

    div.kartica a {
      margin: 20px;
      margin-left: 10px;
    }


      /* div.kartica img:hover{
        transform: scale(1);
      }
      div.zvezda{
        margin-top: 30px;
      }
      div.kartica:nth-child(4){
        height: 570px;
      }
      div.kartica:nth-child(5){
        height: 700px;
      }
      div.kartica div.zvezda:nth-child(5){
        margin-top: 30px;
      } */

  /*</PAVIGIM.html media*/


  /*STIL-FIT.html media*/


    section#sf-section-1 {
      width: 100%;
    }

    div.sf-wrapper{
      margin:0 auto;
      width: 90%;
    }

    div#sf-fid {
      width: 100%;
    }




    section#prva {
      display: block;
      margin: 30px 0;
    }

    section#prva h2{
      font-size: 5vw; 
    }
    
    section#prva div{
      margin-left: 3%;
      margin-right: 3%;
      display: block;
      width: 94%;
    }
    section#prva p{
      padding: 10px;
    }

    #baner {
      /* width: 100%; */
      height: 70vw;
    }

    div#baner p{
      font-size: 10vw;
      top: 56%;
      text-align: center;
    }


    section#sf-citati {
      width: 80%;
      display: block;
      margin: 5% auto;
      
    }

    section#sf-citati div {
      width: 100%;
      margin: 5% auto;
    }

    #sf-citati p {
      padding-top: 20px;
      text-align: center;
    }
    #sf-citati p, h2{
      
      text-align: center;
    }

    section#sf-kartice {
      width: 95%;
      margin: 0 auto;
    }


    div.sf-kartica{
      width: 100%;
      /* display: block; */
      margin: 0 auto;
      margin-bottom: 70px;
      /* box-shadow: rgba(48, 48, 45, 0.1) -5px 5px, rgba(45, 45, 42, 0.05) -10px 10px; */
      padding: 3%;
    }

    .sf-kartica img {
      width: 100%;
      height: auto;
    }

    div.sf-kartica:hover{
      transform: scale(1);
    }
    div.sf-kartica img:hover{
      transform: scale(1);
    }

    div.sf-kartica:nth-child(5) {
      margin-left: auto;
    }

  /*</STIL-FIT.html media*/


  /*GYM4ALL.html media*/

  div.g4a-wrapper {
    width: 100%;
  }

  .prva-kartica-g4a img {
    width: 100%;  
  }

  #klub-g4a {
    margin-bottom: 40px;
    z-index: -3500;
    /* overflow: hidden; */
  }

  .g4a-opis {
    width: 90%;
    margin: 0 auto;
    display: block;
    overflow: hidden;
  }

  .g4a-opis p {
    font-size: larger;
  }

    div#slogan{
      width: 96%;
      margin: 0 auto;
      margin-top: 50px;
    }
    

    section#g4a-kartice{
      /* width: 80%; */
      /* height: 100%; */
      margin: 0 auto;
      overflow: hidden;

    }

    div.g4a-kartica{
      width: 100%;
      /* width: 90%; */
      margin: 5% auto;
      margin-bottom: 50px;
      display: block;
      padding: 10px 0;
      overflow: hidden;
    }

    div.odvoji{
      display: block;
    }

    div.g4a-kartica img {
      width: 100%;
      height: auto;
      margin: auto;
      
    }

    .visina{
      height: 250px;
      width: 90%;
      height: fit-content;
      margin: auto;
      margin-bottom: 20px;
    }  
    
  /*</GYM4ALL.html media*/    
  

/*Fit-Med-Merni-ins.html media*/

  section#kartice-Med-merni {
    width: 95%;
    margin: 0 auto;
  }


  div.kartica-Med-merni {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 70px;
    box-shadow: rgba(128, 128, 128, 0.4) -5px 5px, rgba(128, 128, 128, 0.3) -10px 10px, rgba(128, 128, 128, 0.2) -15px 15px, rgba(128, 128, 128, 0.1) -20px 20px, rgba(128, 128, 128, 0.05) -25px 25px;
    /* box-shadow: rgba(48, 48, 45, 0.1) -5px 5px, rgba(45, 45, 42, 0.05) -10px 10px; */
    padding: 3%;
  }

  iframe.myPDF {
    /* width: 120px;
    height: 200px; */
    
    /* height: calc(100% 100%); */
    position: relative;
    margin: 10px auto;
    margin-bottom: 3%;
    max-width: none;
    max-height: none;
    width: 50vw;
    height: calc(50vw * (1.414/1));
    display: block;
    
  }


/*</Fit-Med-Merni-ins.html media*/



      #footer{
          width: 100%;
          height: fit-content;
          overflow: hidden;
          }
        #footer div{
          width: 100%;
          height: fit-content;
        }
        #footer p{
          font-size: 13px;
        }

        footer .logo-u-futeru {
          width: 13vw;
          max-width: 200px;
          height: auto;
          display: block;
          margin: auto;
          /* margin-left: 10%; */
          margin-top: 10px;
          margin-left: 10px;
        }

        #footer .logo-u-futeru img {
          width: 100%;
          height: auto;
          /* display: flex; */
          /* margin: auto; */
          display: block;
          margin: 0;
        }

        #footer #futer-kontakt {
          width: 50%;
          float: right;
          display: block;
          right: 30px;
          margin: 10px;
          height: fit-content;
          position: relative;
        }

        #footer #social{
          display: block;
        }
        #slika-futer{
          margin: 0 auto;
        }
        #slika-futer{
          margin: 0;
        }


        #footer #risponsiv{
          width: 100%;
          position: absolute;
          top: 0%;
          right: 100%;
          margin-top: 37px;
        }
        #footer #risponsiv p {
          font-size: smaller;
        }

        #footer nav{
          /* top: -224px; */
          width: 35%;
          columns: 100px;
          margin-left: 28px;
          display: block;
          /* Po potrebi sakrijš širinu i margine koje kvare raspored */
          width: 100% !important;
          /* margin-left: 0 !important; */
        }

        #footer nav ul {
          display: flex;
          flex-direction: column;  /* vertikalni prikaz */
          flex-wrap: nowrap;
          width: 100%;             /* zauzima celu širinu */
          padding: 0;
          margin: 0;
          /* overflow-y: auto;        omogući skrol ako ima puno elemenata */
        }
  
        #footer nav ul li {
          /* margin-bottom: 5px; */
          /* padding: 5px 0; */
          display: block;          /* svaki link u svom redu */
          margin: 5px 0;
          width: 100%;
          text-align: center;      /* centrira tekst */
        }

        

        #footer .logo{
          width: 20px;
        }
        
        #div.autor {
          margin: 20px;
          position: absolute;
          /* float: left; */
          /* float: right; */
          margin-left: 0;
        }

}

@media (max-width: 768px) {

  .side {
    box-sizing: border-box;
    position: fixed;
    right: 200px;
    right: 1%;
    top: 65px;
    top: 105px;
    top: 127px;
    top: 65px;

    top: 16px;
    right: 21%;
    z-index: 10499;
  }

  .language-switcher #language-options {
    position: absolute;
    top: 100%;
    left: 0;
    left: -192px;
    left: -220%;
    left: -265px;
    left: -235px;
    left: -170px;
    background: #fff;
    border: 1px solid #ccc;
    margin: 4px 0 0 0;
    padding: 0;
    list-style: none;
    display: none;
    min-width: 280px;
    max-width: 380px;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    /* overflow-y: auto; */
    z-index: 1000;
    width: 95vw;
  }

  .udarni-tekst {
    height: fit-content;
    min-height: 200px;
    /* padding: 20px; */
    margin: 30px;
    /* position: relative;
    top: 14px; */
  }

  #dobrodoslica {
    margin: 0 auto;
    font-size: var(--step-0);
  }

  #baner-home {
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; */
    width: 100%;
    height: 270px;
    top: 60%;
    background-position: center;
    position: absolute;
  }

  #baner-home p {
    position: absolute;
    top: 14%;
    left: -9%;
    /* transform: translate(-50%, -50%); */
    color: white;
    font-size: 200%;
    font-weight: bold;
    /* -webkit-text-stroke: 3px white; */
    -webkit-text-stroke: 1px #03153a;
    /* background-color: rgba(0, 0, 0, 0.2); */
    /* padding: 1%; */
    border-radius: 10px;
    text-align: center;
  } 

  #pecat {
    width: 40%;
    position: absolute;
    top: 72%;
    right: -6%;
    z-index: 1000;
    /* transform: rotate(20deg) scale(1.05); */
    transform: rotate(20deg) scale(0.95);
  }
  
  span#lokal15 {
    /* line-break: normal; */
    display: block;
  }

  span.brojtel {
    /* line-break: normal; */
    display: block;
  }

  article.sf-logo-da img {
    width: 25%;
    vertical-align: middle;
    margin: 2% 2.8%;
  }


  
  .preview-box{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #fff;
  max-width: 1000px;
  width: auto;
  max-height: 700px;
  height: auto;
  z-index: 55555;
  opacity: 0;
  pointer-events: none;
  border-radius: 3px;
  padding: 0 5px 5px 5px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.2);
  }
  
  .preview-box .image-box{
    display: flex;
    width: 100%;
    width: auto;
    position: relative;
    height: auto;
    height: auto;
    min-width: 90vw;

  }

  /* Loader na @media (max-width: 768px) { */
  #pre-loader {
    background: #191a1c url('../slike/loader3.gif') no-repeat center center;
    background: #fff url('../slike/loader3.gif') no-repeat center center;
    background: #191a1c url('../slike/Dual\ Ball@1x-1.2s-200px-200px.gif') no-repeat center center;
    /* color: #f9ca36; */
    background-size: 28% !important;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100000;
  }

  .chat_chatContainer___3hXW {
    display: none;
  }

  #pre-loader img {
    width: 30% !important;
    position: relative;
    top: 16% !important;
    /* margin-top: 60px; */
  }

}

/* Responsiv prilagođavanje */
@media (max-width: 600px) {
  .image-title {
    font-size: 1rem;
    padding: 1px 8px;
    max-width: 95%;
  }
}

@media (max-width: 375px) {
   
  span#radno_vreme_dani {
    /* line-break: normal; */
    display: block;
  }

  div#baner p{
    font-size: 13vw;
    top: 56%;
    text-align: center;
  }

  #baner-home {
    /* box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; */
    width: 100%;
    height: 270px;
    top: 60%;
    background-position: center;
    position: absolute;
  }

  #baner-home p {
    position: absolute;
    /* display: flex; */
    top: 14%;
    left: -9%;
    left: 0;
    /* transform: translate(-50%, -50%); */
    color: white;
    font-size: 200%;
    font-weight: bold;
    /* -webkit-text-stroke: 3px white; */
    -webkit-text-stroke: 1px #03153a;
    /* background-color: rgba(0, 0, 0, 0.2); */
    /* padding: 1%; */
    border-radius: 10px;
    text-align: center;
    margin: 10px;
    width: 70%;
  } 

  #pecat {
    width: 40%;
    position: absolute;
    top: 72%;
    right: -6%;
    z-index: 1000;
    /* transform: rotate(20deg) scale(1.05); */
    transform: rotate(20deg) scale(0.95);
  }

  #pecat img {
    width: 80%;
  }


  /* #footer #risponsiv {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    right: 40% !important;
    width: 100% !important;
    margin: auto;
    margin-top: 10px !important;      
  } */


  .animacija {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    /* background-color: #ff008c;
    background-color: #000; */
    z-index: -99;
    position: absolute;
    top: 105vw;
    right: -30%;
    animation: 4s move 1s infinite alternate ease-in-out;
    /* rotate: 45deg; */
  }
  
  .animacija img {
    width: 160%;
    border-radius: 7%;
  }
  .druga img {
    width: 120%;
    border-radius: 7%;
  }
  
  .druga {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    /* background-color: #00c1ff;
    background-color: #f9ca36; */
    z-index: -100;
    position: absolute;
    top: 3%;
    left: -35%;
    animation: 4s druga 1s infinite alternate ease-in-out;
    /* rotate: 45deg; */
  }
  
  @keyframes move {
    0% {
      top: 105vw;
      right: -30%;
    }
    50% {
      top: 105vw;
      right: 120%;
    }
  
    100% {
      top: 3%;
      right: 70%;
    }
  }
  
  @keyframes druga {
    0% {
      top: 3%;
      left: -35%;
    }
  
    50% {
      top: 3%;
      left: 67%;
    }
  
    100% {
      top: 105vw;
      left: 67%;
    }
  }

}

  /* Loader */
  #pre-loader {
    background: #191a1c url('../slike/loader3.gif') no-repeat center center;
    background: #fff url('../slike/loader3.gif') no-repeat center center;
    background: #191a1c url('../slike/Dual\ Ball@1x-1.2s-200px-200px.gif') no-repeat center center;
    /* color: #f9ca36; */
    background-size: 10%;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 100000;
    text-align: center;
    justify-content: center;
    align-items: center;    
    background-position: center;

  }

  #pre-loader img {
    width: 15%;
    position: relative;
    top: 10%;
    /* margin-top: 60px; */
  }