/* menu */
.image-menu {
    display: flex;
    height: 100vh;
    overflow: hidden;
}
.menu-item {
    flex: 1;
    position: relative;
    background-size: cover;
    background-position: center;
    /* filter: grayscale(100%); */
    transition: all 0.6s ease;
    transform-origin: center center;
    display: flex;
    align-items: flex-end;
}
.menu-item a{
    text-decoration: none
}
.menu-item.active,
.menu-item:hover {
    flex: 3;
}
.menu-item.active .menu-image,
.menu-item:hover .menu-image {
    filter: grayscale(0%);
    transform: scale(1.08);
}
.menu-item-bg{
    flex: 1;
    position: relative;
    background-size: cover;
    background-position: center;
}
.menu-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    transition:
        transform .8s ease,
        filter .6s ease;
}
.menu-item::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
    transition: .4s;
}
.menu-item.active::before,
.menu-item:hover::before {
    background: rgba(0,0,0,.15);
}
.content {
    position: relative;
    z-index: 2;
    color: white;
    padding: 40px;
}
/* za mobilni menu */
@media (max-width: 768px) {
    .image-menu {
        flex-direction: column;
        height: 100vh;
    }
    .menu-item {
        flex: 1;
        min-height: 0;
    }
    .menu-item.active,
    .menu-item:hover {
        flex: 3;
    }
    .content {
        padding: 20px;
    }
    .content h2 {
        font-size: 1.5rem;
    }
    .content p {
        font-size: 0.9rem;
    }
    .site-logo {
    position: fixed;
    top: 20px;
    left: 50%;
    z-index: 9999;
    height: 30px;
    } 
    .site-logo img {
        width: auto;
        display: block;
    }
}
/* logo */ 
.site-logo {
    position: fixed;
    top: 30px;
    left: 30px;
    z-index: 9999;
} 
.site-logo img {
    height: 70px;
    width: auto;
    display: block;
}
/* Selektor jezika na pocetnoj str */
.site-logo {display:flex;align-items:center;justify-content:space-between;right:30px;gap:24px;max-width:calc(100% - 60px);height:auto;}
.home-languages {display:flex; align-items:center;gap:10px;flex-shrink:0;padding:6px 12px;background:rgba(255,255,255,.96);border:1px solid #dfe3e9;border-radius:4px;font-family:Arial,Helvetica,sans-serif;box-shadow:0 2px 12px #00000010;}
.home-language {display:flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:0 2px;border:0;background:transparent;color:#5a6371;font-size:12px;font-weight:700;cursor:pointer;}
.home-language.active,.home-language:hover {color:#183bdc;}
.home-language:focus-visible {outline:2px solid #183bdc;outline-offset:3px;}
.home-language-divider {width:1px;height:16px;background:#dfe3e9;}
.home-flag {display:block;width:20px;height:13px;border-radius:1px;box-shadow:0 0 0 1px #00000015;}
.home-flag-sr {background:linear-gradient(#c6363c 0 33.3%,#233d81 33.3% 66.6%,#fff 66.6%);}
@media(max-width:768px) {
  .site-logo {top:16px;left:16px;right:16px;max-width:none;gap:12px;}
  .site-logo img {width:clamp(120px,48vw,280px);height:auto;min-width:0;}
  .home-languages {gap:6px;padding:2px 8px;}
  .home-language {gap:4px;font-size:11px;min-height:40px;}
  .home-flag {width:18px;height:12px;}
}

/* Prostor za svih sedam djelatnosti na mobilnim ekranima. */
@media (max-width: 768px) {
    .image-menu {
        height: auto;
        min-height: 100svh;
    }
    .menu-item,
    .menu-item.active,
    .menu-item:hover {
        flex: 0 0 auto;
        min-height: 220px;
        overflow: hidden;
    }
    .menu-item:first-child {
        min-height: 300px;
    }
}
/* Novo formatiranje teksta; izvorne animacije iznad ostaju iste. */
body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.content {
    position: relative;
    z-index: 2;
    color: white;
    padding: 30px clamp(16px, 1.6vw, 30px);
}
/* Naslov i opis čine kompaktnu cjelinu. */
.content > span {
    display: block;
    margin-bottom: 8px;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.content h2 {
    margin: 0;
    font-size: clamp(18px, 1.5vw, 26px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.035em;
    overflow-wrap: anywhere;
    text-wrap: wrap;
}
.content p {
    margin: 7px 0 0;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .85);
    font-size: clamp(13px, 1vw, 15px);
    font-weight: 500;
    line-height: 1.5;
    text-wrap: wrap;
}
/* Usklađena tipografija na mobilnom prikazu. */
@media (max-width: 768px) {
    .content {
        padding: 26px 24px;
    }
    .content h2 {
        font-size: clamp(24px, 6vw, 30px);
    }
    .content > span {
        font-size: 11px;
        margin-bottom: 6px;
    }
    .content p {
        font-size: 14px;
        margin-top: 6px;
    }
}

/* Blaga sjenka poboljšava čitljivost logotipa preko fotografija. */
.site-logo > img {
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .65));
}

/* Desktop početna stranica zauzima tačno jedan ekran. */
@media (min-width: 769px) {
    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .image-menu {
        width: 100%;
        height: 100vh;
        height: 100dvh;
    }
}
.apis-author-credit {
    display: block;
    margin-top: 6px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.5;
}
.apis-author-credit a {
    display: inline;
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.apis-author-credit a:hover {
    opacity: .75;
}
.apis-author-credit a:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.apis-home-footer {
    position: fixed;
    right: 24px;
    bottom: 8px;
    z-index: 5;
    color: #fff;
    text-shadow: 0 1px 4px #000;
}
.apis-home-footer .apis-author-credit {
    margin: 0;
}
@media (max-width: 768px) {
    .apis-home-footer {
        position: static;
        padding: 14px 24px;
        background: #172d38;
        text-align: right;
    }
}

.apis-home-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: center;
}
.apis-home-footer .apis-copyright-line {
    display: block;
    margin: 0;
    font-size: clamp(8px, 2.2vw, 11px);
    line-height: 1.5;
    white-space: nowrap;
}
.apis-home-footer .apis-author-credit {
    display: inline;
    margin: 0;
    font-size: inherit;
}

.apis-home-footer {
    left: 0;
    right: 0;
    pointer-events: none;
}
.apis-home-footer a {
    pointer-events: auto;
}