*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Montserrat',sans-serif}

.site-header{position:absolute;top:0;left:0;width:100%;z-index:1001}
.top-row{
    display:flex;
    justify-content:flex-end;
    padding:10px 24px;
}

.top-bar{
    display:flex;
    align-items:center;
    gap:24px;
    padding:8px 16px;
    background:rgba(0,0,0,.45);
    backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.08);
    border-radius:6px;
}

.top-bar a{
    display:flex;
    align-items:center;
    gap:8px;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:500;
    transition:.3s ease;
}

.top-bar a:hover{
    color:#C8A24A;
}

.top-icon{
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#C8A24A;
    flex-shrink:0;
    transition:.3s ease;
}

.top-icon svg{
    width:16px;
    height:16px;
    display:block;
    stroke:currentColor;
}

.top-bar a:hover .top-icon{
    color:#fff;
}
.header-main{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 24px;
    background:transparent;
}
.header-main .logo img{height:48px;display:block}

nav ul{
    display:flex;
    gap:20px;
    list-style:none;
    margin:0;
    padding:0;
}

nav a{
    position:relative;
    display:block;
    padding:8px 0;
    color:#fff;
    text-decoration:none;
    font-weight:400;
    transition:color .3s ease, font-weight .3s ease;
}

/* Aktivna stranica */
nav a.active{
    font-weight:700;
}

/* Crtica ispod linka */
nav a::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:2px;
    background:#C8A24A;

    transform:scaleX(0);
    transform-origin:left;
    transition:transform .3s ease;
}

/* Hover efekat */
nav a:hover::after{
    transform:scaleX(1);
}

/* Aktivna stranica - crtica ostaje prikazana */
nav a.active::after{
    transform:scaleX(1);
}

/* Promjena boje teksta na hover */
nav a:hover{
    color:#C8A24A;
}

/* Aktivna stranica */
nav a.active{
    color:#fff;
}

@media (max-width: 768px){

.site-header{
        overflow:visible;
    }

    .header-main{
        display:block;
        padding:15px;
    }

    .logo{
        display:flex;
        justify-content:center;
        margin-bottom:15px;
    }

    nav{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none; /* Firefox */
    }

    nav::-webkit-scrollbar{
        display:none; /* Chrome */
    }

    nav ul{
        display:flex;
        flex-wrap:nowrap;
        gap:30px;
        width:max-content;
        padding-bottom:4px;
    }

    nav li{
        flex-shrink:0;
    }

    nav a{
        white-space:nowrap;
        font-size:15px;
        padding:8px 0;
    }
}

.hero{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background-size:cover;
    background-position:center;
    position:relative;
    background-image: url('Images/index-head-img-2.jpg');
}
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(119, 119, 119, 0.123));
    z-index:1;
}
.hero-content{position:relative;z-index:2;color:#fff;text-align:center;padding:10px;padding-bottom:40px; max-width:1400px}
.hero-btn{display:inline-block;padding:12px 34px;border:2px solid #ffffff;color:#ffffff;text-decoration:none;font-weight:700;letter-spacing:2px;border-radius:4px;background:transparent}
.hero-btn:hover{background:#c9a13b;color:#fff}

.hero-content h1 {
    color:  #c9a13b;
    font-size: clamp(35px, 5vw, 55px);
    font-weight: 700;
    font-family: 'Montserrat';
    margin-bottom:8px;
}

.hero-content p {
    font-size: clamp(20px, 2vw, 20px);
    font-weight: 700;
    font-family: Arial, sans-serif;
    padding-bottom: 20px;

}

/* Cards grid */
.cards-grid{padding:20px 20px 60px;background:transparent;margin-top:-200px;position:relative;z-index:1000}
.cards-grid .container{max-width:1150px;margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{background:#fff;border-radius:6px;box-shadow:0 18px 30px rgba(0,0,0,0.45), 0 8px 16px rgba(0,0,0,0.28);border:1px solid rgba(0,0,0,0.06);overflow:hidden;display:flex;flex-direction:column;margin-bottom:0}
.card img{width:100%;height:300px;object-fit:cover;display:block}
.card-body{padding:24px}
.card-body > *{margin:0 0 18px 0}
.card-body > *:last-child{margin-bottom:0}
.card-cat{display:block;color:#c9a13b;font-size:12px;font-weight:700;letter-spacing:1px;margin:0 0 18px 0}
.card h3{margin:0 0 18px 0;font-size:20px;color:#333}
.card p{margin:0 0 18px 0;color:#666;font-size:14px;line-height:1.6}
.card-link{color:#777;font-weight:700;text-decoration:none;font-size:13px;display:inline-block;margin:0}

/* removed per-card overlap: only the whole grid is pulled up now */
/* per-card overlap removed — grid is shifted instead */

@media (max-width:900px){
    .cards-grid .container{grid-template-columns:1fr}
    .card.overlap{transform:none}
    .top-row{padding:6px 12px}
    .header-main{padding:10px 12px}
}

/* CTA below cards */
.cards-cta{text-align:center;margin:28px 0 40px}
.btn-secondary{display:inline-block;padding:12px 34px;border:2px solid #c9a13b;color:#c9a13b;text-decoration:none;font-weight:700;letter-spacing:2px;border-radius:4px;background:transparent}
.btn-secondary:hover{background:#c9a13b;color:#fff}

/* About section */
.about-section{padding:60px 20px;border-top:1px solid #eee;background:#fff}
.about-container{max-width:1150px;margin:0 auto;display:flex;gap:40px;align-items:center}
.about-text{flex:1;display:flex;flex-direction:column;gap:22px}
.about-text .small-cat{display:block;color:#c9a13b;font-weight:700;letter-spacing:2px;margin-bottom:10px}
.about-text h2{font-size:36px;margin:0;color:#444;line-height:1.05}
.about-decor{display:flex;gap:14px;margin:12px 0 0 0}
.about-decor span{width:24px;height:2px;background:#c9a13b;display:block;transform:skewX(25deg);border-radius:2px}
.about-text p{color:#666;line-height:1.8;margin-top:18px}
.about-media{width:420px;position:relative;height:340px}
.about-media .about-back{position:absolute;top:8px;right:8px;width:300px;height:300px;object-fit:cover;z-index:1;border-radius:2px}
.about-media .frame{position:absolute;width:320px;height:320px;top:14px;left:-14px;z-index:2;border:10px solid transparent;box-sizing:border-box}
.about-media .frame.gold{top:28px;left:-18px;border-color:#c9a13b;z-index:2}
.about-media .about-front{position:absolute;bottom:-48px;left:24px;width:320px;height:320px;object-fit:cover;z-index:3;display:block;box-shadow:0 10px 30px rgba(0,0,0,0.22)}

@media (max-width:900px){
    .about-container{flex-direction:column}
    .about-media{width:80%;}
}


/* =========================================================
   BOTTOM HERO - PARTNERI + KONTAKT
========================================================= */

.bottom-hero {
    position: relative;
    width: 100%;
    min-height: 675px;

    background-image: url("Images/index-bottom-bg.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    z-index: 2;
    overflow: visible;

    display: flex;
    align-items: center;
}


/* =========================================================
   GLAVNI SADRŽAJ
========================================================= */

.bottom-hero-inner {
    width: 100%;
    max-width: 1150px;

    margin: 0 auto;

    display: flex;
    justify-content: flex-end;
}


/* =========================================================
   INFO BLOK
========================================================= */

.bottom-info {
    width: 50%;
    max-width: 600px;

    padding-left: 70px;

    border-left: 2px solid rgba(80, 80, 80, 0.45);

    box-sizing: border-box;
}


/* =========================================================
   PARTNERI
========================================================= */

.bottom-cat {
    display: block;

    margin-bottom: 28px;

    color: #d09f00;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;
}


/* =========================================================
   NASLOV
========================================================= */

.bottom-info h2 {
    margin: 0;

    color: #666;

    font-size: 36px;
    font-weight: 500;
    line-height: 1.2;
}


/* =========================================================
   ZLATNA DEKORACIJA
========================================================= */

.bottom-decoration {
    display: flex;
    gap: 5px;

    margin: 35px 0;
}

.bottom-decoration span {
    display: block;

    width: 18px;
    height: 2px;

    background: #d09f00;

    transform: skewX(-35deg);

    transition: width 0.3s ease;
}


/* Efekat kada se pređe preko cijelog bloka */

.bottom-info:hover .bottom-decoration span:first-child {
    width: 25px;
}

.bottom-info:hover .bottom-decoration span:last-child {
    width: 15px;
}


/* =========================================================
   OPIS
========================================================= */

.bottom-info p {
    max-width: 600px;

    margin: 0;

    color: #777;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.4;
}


/* =========================================================
   DETALJNIJE LINK
========================================================= */

.bottom-details {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 60px;

    color: #555;

    font-size: 13px;
    font-weight: 600;

    letter-spacing: 4px;

    text-decoration: none;

    transition: color 0.3s ease;
}


/* Donja linija */

.bottom-details::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -8px;

    width: 0;
    height: 1px;

    background: #d09f00;

    transition: width 0.35s ease;
}


/* Strelica */

.details-arrow {
    display: inline-block;

    font-size: 18px;
    letter-spacing: 0;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}


/* Hover efekat */

.bottom-details:hover {
    color: #d09f00;
}

.bottom-details:hover::after {
    width: 100%;
}

.bottom-details:hover .details-arrow {
    transform: translateX(8px);
    color: #d09f00;
}


/* =========================================================
   DONJA ZLATNA KONTAKT TRAKA
========================================================= */

.bottom-contact {
    position: absolute;
    left: 50%;
    bottom: -60px;

    transform: translateX(-50%);

    z-index: 9999;

    width: calc(100% - 280px);
    max-width: 1370px;

    min-height: 120px;

    padding: 25px 30px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: linear-gradient(
        100deg,
        #b88600 0%,
        #d4a500 45%,
        #f5c63d 100%
    );

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   TEKST U KONTAKT TRACI
========================================================= */

.bottom-contact-text {
    display: flex;
    flex-direction: column;

    gap: 8px;

    color: #fff;
}

.bottom-contact-text strong {
    margin: 0;

    color: #fff;

    font-size: 20px;
    font-weight: 700;
}

.bottom-contact-text span {
    color: #fff;

    font-size: 18px;
    font-weight: 400;
}


/* =========================================================
   KONTAKT DUGME
========================================================= */

.bottom-contact-btn {
    position: relative;

    width: 260px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    color: #fff;

    border: 2px solid #fff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 4px;

    text-decoration: none;

    overflow: hidden;

    transition:
        color 0.3s ease,
        background 0.3s ease;
}


/* Animirani background */

.bottom-contact-btn::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 0;
    height: 100%;

    background: #fff;

    transition: width 0.35s ease;

    z-index: 0;
}


/* Tekst i strelica iznad backgrounda */

.bottom-contact-btn span {
    position: relative;
    z-index: 1;
}


/* Strelica */

.contact-arrow {
    font-size: 18px;

    letter-spacing: 0;

    transition: transform 0.3s ease;
}


/* Hover */

.bottom-contact-btn:hover {
    color: #b88600;
}

.bottom-contact-btn:hover::before {
    width: 100%;
}

.bottom-contact-btn:hover .contact-arrow {
    transform: translateX(7px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .bottom-hero-inner {
        padding: 0 40px;
    }

    .bottom-info {
        width: 55%;
        padding-left: 50px;
    }

    .bottom-contact {
        width: calc(100% - 80px);
    }

}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width: 768px) {

    .bottom-hero {
        min-height: 900px;

        padding: 60px 25px 180px;

        align-items: flex-start;
    }

    .bottom-hero-inner {
        padding: 0;
    }

    .bottom-info {
        width: 100%;
        max-width: 100%;

        padding-left: 25px;
    }

    .bottom-info h2 {
        font-size: 30px;
    }

    .bottom-info p {
        font-size: 15px;
    }

    .bottom-details {
        margin-top: 40px;
    }

    .bottom-contact {
        width: calc(100% - 30px);

        padding: 22px;

        flex-direction: column;
        align-items: stretch;

        gap: 20px;
    }

    .bottom-contact-btn {
        width: 100%;
    }

}


/* =========================================================
   MALI MOBILNI
========================================================= */

@media (max-width: 480px) {

    .bottom-hero {
        min-height: 950px;
    }

    .bottom-info {
        padding-left: 20px;
    }

    .bottom-info h2 {
        font-size: 28px;
    }

    .bottom-contact-text strong {
        font-size: 17px;
    }

    .bottom-contact-text span {
        font-size: 16px;
    }

}

/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    position: relative;

    width: 100%;
    min-height: 670px;

    background-image: url("Images/footer-img.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    color: #fff;

    overflow: visible;
}


/* =========================================================
   TAMNI OVERLAY
========================================================= */

.footer-overlay {
    position: relative;

    inset: 0;

    background: rgba(18, 48, 62, 0.48);

    z-index: 1;
}


/* =========================================================
   GLAVNI KONTEJNER
========================================================= */

.footer-container {
    position: relative;

    z-index: 2;

    max-width: 1370px;

    min-height: 600px;

    margin: 0 auto;

    padding: 70px 40px 80px;

    box-sizing: border-box;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}


/* =========================================================
   LIJEVA STRANA
========================================================= */

.footer-left {
    width: 55%;
}


/* =========================================================
   LOGO
========================================================= */

.footer-logo {
    display: inline-block;

    margin-bottom: 45px;

    transition: opacity 0.3s ease;

    padding-top: 30px;
}

.footer-logo:hover {
    opacity: 0.8;
}

.footer-logo img {
    display: block;

    width: 290px;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   NAZIV FIRME
========================================================= */

.footer-title {
    margin: 0;

    color: #fff;

    font-size: 22px;
    font-weight: 700;

    line-height: 1.3;
}


/* =========================================================
   ZLATNA DEKORACIJA
========================================================= */

.footer-decoration {
    display: flex;

    gap: 6px;

    margin-top: 40px;
    margin-bottom: 45px;
}

.footer-decoration span {
    display: block;

    width: 20px;
    height: 2px;

    background: #f2bd18;

    transform: skewX(-35deg);

    transition: all 0.3s ease;
}


/* Hover efekat */

.footer-left:hover .footer-decoration span:nth-child(1) {
    width: 27px;
}

.footer-left:hover .footer-decoration span:nth-child(2) {
    width: 20px;
}

.footer-left:hover .footer-decoration span:nth-child(3) {
    width: 14px;
}


/* =========================================================
   KONTAKT INFORMACIJE
========================================================= */

.footer-contact {
    display: flex;

    flex-direction: column;

    gap: 20px;
}


/* =========================================================
   KONTAKT LINK
========================================================= */

.footer-contact-item {
    display: flex;

    align-items: center;

    gap: 20px;

    width: fit-content;

    color: #fff;

    font-size: 16px;

    line-height: 1.4;

    text-decoration: none;

    transition: color 0.3s ease;
}


/* =========================================================
   IKONA
========================================================= */

.footer-icon {
    width: 20px;

    color: #f2bd18;

    font-size: 23px;

    font-weight: 400;

    text-align: center;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}


/* Hover kontakt */

.footer-contact-item:hover {
    color: #f2bd18;
}

.footer-contact-item:hover .footer-icon {
    transform: translateX(5px);

    color: #fff;
}


/* =========================================================
   DESNA STRANA
========================================================= */

.footer-right {
    width: 40%;

    min-height: 450px;

    display: flex;

    align-items: flex-end;

    justify-content: flex-end;
}


/* =========================================================
   SAVANA LOGO
========================================================= */

.footer-savana-logo {
    width: 230px;

    max-width: 100%;

    height: auto;

    margin-bottom: 30px;

    opacity: 0.95;

    transition:
        transform 0.3s ease,
        opacity 0.3s ease;
}

.footer-savana-logo:hover {
    transform: translateY(-5px);

    opacity: 1;
}


/* =========================================================
   DONJA LINIJA
========================================================= */

.footer-bottom {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 3;

    width: 100%;

    border-top: 1px solid rgba(255, 255, 255, 0.18);
}


/* =========================================================
   COPYRIGHT KONTEJNER
========================================================= */

.footer-bottom-inner {
    max-width: 1370px;

    margin: 0 auto;

    padding: 20px 40px;

    box-sizing: border-box;
}


/* =========================================================
   COPYRIGHT TEKST
========================================================= */

.footer-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.9);

    font-size: 14px;

    line-height: 1.5;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .site-footer {
        min-height: 750px;
    }

    .footer-container {
        padding: 60px 30px 100px;
    }

    .footer-left {
        width: 60%;
    }

    .footer-right {
        width: 35%;
    }

    .footer-savana-logo {
        width: 180px;
    }

}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width: 700px) {

    .site-footer {
        min-height: auto;
    }

    .footer-container {
        min-height: auto;

        padding: 60px 25px 120px;

        flex-direction: column;

        gap: 60px;
    }


    .footer-left {
        width: 100%;
    }


    .footer-logo img {
        width: 240px;
    }


    .footer-title {
        font-size: 20px;
    }


    .footer-right {
        width: 100%;

        min-height: auto;

        justify-content: flex-start;

        align-items: flex-start;
    }


    .footer-savana-logo {
        width: 180px;

        margin: 0;
    }


    .footer-bottom-inner {
        padding: 18px 25px;
    }


    .footer-bottom p {
        font-size: 12px;
    }

}


/* =========================================================
   MALI MOBILNI
========================================================= */

@media (max-width: 480px) {

    .footer-container {
        padding-left: 20px;
        padding-right: 20px;
    }


    .footer-logo img {
        width: 210px;
    }


    .footer-title {
        font-size: 18px;
    }


    .footer-contact-item {
        font-size: 14px;

        gap: 15px;
    }


    .footer-icon {
        font-size: 20px;
    }

}

/* about stranica */

.hero-about{
    min-height:40vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;

    background-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.70) 0%,
            rgba(0,0,0,0.45) 25%,
            rgba(0,0,0,0.15) 55%,
            rgba(0,0,0,0) 100%
        ),
        url('Images/header img/o_nama-head-img.jpg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-content-about{
    position:relative;
    z-index:2;
    color:#fff;
    text-align:center;
    padding:10px;
    max-width:1400px;
}

.hero-content-about h1{
    color:#c9a13b;
    margin:0;
    font-size:48px;
    font-weight:700;
}

@media (max-width: 768px) {

    .hero-content-about {
        transform: translateY(80px);
    }

}

/* About Video Section */
.about-section-video{
    padding:80px 20px;
    background:#f8f8f8;
    padding-bottom: 130px;
}

.about-video-container{
    max-width:1150px;
    margin:0 auto;
}

/* Naslovni dio */
.about-video-heading{
    text-align:center;
    max-width:750px;
    margin:0 auto 45px;
}

.about-video-heading .small-cat{
    display:block;
    color:#c9a13b;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:10px;
}

.about-video-heading h2{
    font-size:36px;
    margin:0;
    color:#444;
    line-height:1.1;
}

.about-video-heading p{
    color:#666;
    line-height:1.8;
    margin:20px auto 0;
    max-width:650px;
}

/* Dekoracija */
.about-video-decor{
    display:flex;
    justify-content:center;
    gap:14px;
    margin:18px 0 0;
}

.about-video-decor span{
    width:24px;
    height:2px;
    background:#c9a13b;
    display:block;
    transform:skewX(25deg);
    border-radius:2px;
}

/* Video */
.about-video-media{
    position:relative;
    max-width:950px;
    margin:0 auto;
    padding:20px;
}

.about-video-frame{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    border:10px solid #c9a13b;
    z-index:1;
}

.about-video-wrapper{
    position:relative;
    z-index:2;
    width:100%;
    aspect-ratio:16 / 9;
    background:#000;
    box-shadow:0 10px 30px rgba(0,0,0,0.22);
}

.about-video-wrapper iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:block;
    border:0;
}


/* Mobile */
@media (max-width:900px){

    .about-section-video{
        padding:60px 15px;
        padding-bottom: 130px;
    }

    .about-video-heading h2{
        font-size:30px;
    }

    .about-video-heading p{
        font-size:15px;
    }

    .about-video-media{
        padding:12px;
    }

    .about-video-frame{
        border-width:6px;
    }
}


/* =========================================================
   DONJA ZLATNA KONTAKT TRAKA FOOTER (v2)
========================================================= */

.bottom-contact-footer {
    position: absolute;
    left: 50%;
    top: -60px;

    transform: translateX(-50%);

    z-index: 9999;

    width: calc(100% - 280px);
    max-width: 1370px;

    min-height: 120px;

    padding: 25px 30px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;

    background: linear-gradient(
        100deg,
        #b88600 0%,
        #d4a500 45%,
        #f5c63d 100%
    );

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}

@media (max-width: 768px) {
    .bottom-contact-footer {
        top: -100px;
    }
}

/* =========================================================
   TEKST U KONTAKT TRACI
========================================================= */

.bottom-contact-text-footer {
    display: flex;
    flex-direction: column;

    gap: 8px;

    color: #fff;
}

.bottom-contact-text-footer strong {
    margin: 0;

    color: #fff;

    font-size: 20px;
    font-weight: 700;
}

.bottom-contact-text-footer span {
    color: #fff;

    font-size: 18px;
    font-weight: 400;
}


/* =========================================================
   KONTAKT DUGME
========================================================= */

.bottom-contact-btn-footer {
    position: relative;

    width: 260px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 12px;

    color: #fff;

    border: 2px solid #fff;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 4px;

    text-decoration: none;

    overflow: hidden;

    transition:
        color 0.3s ease,
        background 0.3s ease;
}


/* Animirani background */

.bottom-contact-btn-footer::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;

    width: 0;
    height: 100%;

    background: #fff;

    transition: width 0.35s ease;

    z-index: 0;
}


/* Tekst i strelica iznad backgrounda */

.bottom-contact-btn-footer span {
    position: relative;
    z-index: 1;
}


/* Strelica */

.contact-arrow-footer {
    font-size: 18px;

    letter-spacing: 0;

    transition: transform 0.3s ease;
}


/* Hover */

.bottom-contact-btn-footer:hover {
    color: #b88600;
}

.bottom-contact-btn-footer:hover::before {
    width: 100%;
}

.bottom-contact-btn-footer:hover .contact-arrow {
    transform: translateX(7px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .bottom-contact-footer {
        width: calc(100% - 80px);
    }

}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width: 768px) {

   

  
    .bottom-contact-footer {
        width: calc(100% - 30px);

        padding: 22px;

        flex-direction: column;
        align-items: stretch;

        gap: 20px;
    }

    .bottom-contact-btn-footer {
        width: 100%;
    }

}


/* =========================================================
   MALI MOBILNI
========================================================= */

@media (max-width: 480px) {


    .bottom-contact-text-footer strong {
        font-size: 17px;
    }

    .bottom-contact-text-footer span {
        font-size: 16px;
    }

}

/* HERO usluge */


.hero-services{
    min-height:40vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;

    background-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.70) 0%,
            rgba(0,0,0,0.45) 25%,
            rgba(0,0,0,0.15) 55%,
            rgba(0,0,0,0) 100%
        ),
        url('Images/header img/o_nama-head-img.jpg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-content-services{
    position:relative;
    z-index:2;
    color:#fff;
    text-align:center;
    padding:10px;
    max-width:1400px;
}

.hero-content-services h1{
    color:#c9a13b;
    margin:0;
    font-size:48px;
    font-weight:700;
}

@media (max-width: 768px) {

    .hero-content-services {
        transform: translateY(80px);
    }

}

/* =========================================================
   SERVICES SECTION
========================================================= */

.services-section {
    padding: 70px 25px 100px;
    background: #fff;
}


/* =========================================================
   SERVICE ROW
========================================================= */

.service-row {
    max-width: 1150px;
    margin: 0 auto 120px;

    display: flex;
    align-items: center;

    gap: 80px;
}


/* Svaki drugi red obrnut */

.service-row-reverse {
    flex-direction: row-reverse;
}


/* =========================================================
   IMAGE
========================================================= */

.service-image {
    position: relative;

    width: 520px;
    height: 420px;

    flex-shrink: 0;
}


/* =========================================================
   GLAVNA SLIKA
========================================================= */

.service-image img {
    position: absolute;

    top: 0;
    left: 0;

    width: 420px;
    height: 420px;

    object-fit: cover;

    z-index: 3;

    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
}


/* =========================================================
   ZLATNI OKVIR
========================================================= */

.service-gold-frame {
    position: absolute;

    top: 43px;
    left: 48px;

    width: 420px;
    height: 420px;

    border: 10px solid #c9a13b;

    z-index: 1;
}


/* =========================================================
   IKONA
========================================================= */

.service-icon {
    position: absolute;

    top: 90px;
    left: 390px;

    width: 135px;
    height: 135px;

    background: #fff;

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 5;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}


/* Ikona */

.service-icon svg {
    width: 80px;
    height: 80px;
    color: #c9a13b;
}


/* =========================================================
   REVERSE RED
========================================================= */

.service-row-reverse .service-icon {
    left: -55px;
}


/* =========================================================
   TEKST
========================================================= */

.service-content {
    flex: 1;

    padding-top: 0;
}


.service-content h2 {
    margin: 0 0 35px;

    color: #666;

    font-size: 36px;
    font-weight: 700;

    line-height: 1.1;
}


.service-content p {
    margin: 0 0 18px;

    color: #777;

    font-size: 16px;

    line-height: 1.55;
}



/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .service-row,
    .service-row-reverse {

        flex-direction: column;

        gap: 60px;

        align-items: center;

        margin-bottom: 100px;
    }


    .service-content {
        width: 100%;
        max-width: 800px;
    }

}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width: 600px) {

    .services-section {
        padding: 50px 20px 80px;
    }


    .service-image {
        width: 100%;
        height: 330px;
    }


    .service-image img {
        width: 300px;
        height: 300px;
    }


    .service-gold-frame {
        width: 300px;
        height: 300px;

        top: 30px;
        left: 25px;
    }


    .service-icon,
    .service-row-reverse .service-icon {

        width: 90px;
        height: 90px;

        top: 70px;
        left: auto;
        right: 0;
    }


    .service-icon span {
        font-size: 32px;
    }


    .service-content h2 {
        font-size: 30px;
    }


    .service-content p {
        font-size: 15px;
    }

}


/* top bar mobilni centriraj */

@media (max-width: 768px) {
    .top-row {
        display: flex;
        justify-content: center;
    }

    .top-bar {
        justify-content: center;
    }
}


/* Reference PAGE */

.hero-references{
    min-height:40vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;

    background-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.70) 0%,
            rgba(0,0,0,0.45) 25%,
            rgba(0,0,0,0.15) 55%,
            rgba(0,0,0,0) 100%
        ),
        url('Images/header img/reference-head-img.jpg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-content-references{
    position:relative;
    z-index:2;
    color:#fff;
    text-align:center;
    padding:10px;
    max-width:1400px;
}

.hero-content-references h1{
    color:#c9a13b;
    margin:0;
    font-size:48px;
    font-weight:700;
}

@media (max-width: 768px) {

    .hero-content-references {
        transform: translateY(80px);
    }

}

/* =========================================================
   REFERENCE / CARDS GRID
========================================================= */

/* =========================================================
   REFERENCE SEKCIJA
========================================================= */

.references-section {
    padding: 20px 20px 120px ;
    background: transparent;


    position: relative;
    z-index: 1000;

    background-image:
        
        url('Images/video-img.jpg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

}

/* =========================================================
   REFERENCE GRID
   2 KARTICE U REDU
========================================================= */

.references-container {
    max-width: 1150px;
    margin: 0 auto;

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
}


/* =========================================================
   REFERENCE CARD
========================================================= */

.reference-card {
    background: #fff;

    border-radius: 6px;

    box-shadow:
        0 18px 30px rgba(0, 0, 0, 0.45),
        0 8px 16px rgba(0, 0, 0, 0.28);

    border: 1px solid rgba(0, 0, 0, 0.06);

    overflow: hidden;

    display: flex;
    flex-direction: column;

    margin: 0;
}


/* =========================================================
   SLIKA
========================================================= */

.reference-card > img {
    width: 100%;
    height: 300px;

    object-fit: cover;

    display: block;
}


/* =========================================================
   SADRŽAJ
========================================================= */

.reference-card-body {
    padding: 24px;
}


/* =========================================================
   REFERENCE
========================================================= */

.reference-card-cat {
    display: block;

    color: #c9a13b;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;

    margin: 0 0 18px 0;
}


/* =========================================================
   NASLOV
========================================================= */

.reference-card-body h3 {
    margin: 0 0 18px 0;

    font-size: 20px;

    color: #333;
}


/* =========================================================
   OPIS
========================================================= */

.reference-card-body p {
    margin: 0 0 18px 0;

    color: #666;

    font-size: 14px;

    line-height: 1.6;
}


/* =========================================================
   DETALJNIJE
========================================================= */

.reference-card-link {
    color: #777;

    font-weight: 700;

    text-decoration: none;

    font-size: 13px;

    display: inline-block;

    margin: 0;

    transition: color 0.3s ease;
}

.reference-card-link:hover {
    color: #c9a13b;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .references-section {
        padding: 20px 15px 150px;

        
    }

    .references-container {
        grid-template-columns: repeat(2, 1fr);

        gap: 20px;
    }

    .reference-card > img {
        height: 250px;
    }

    .reference-card-body {
        padding: 20px;
    }

}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width: 650px) {

    .references-section {
        padding: 20px 15px 180px;

        
    }

    .references-container {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .reference-card > img {
        height: 260px;
    }

    .reference-card-body {
        padding: 22px;
    }

}


/* =========================================================
   MALI MOBILNI
========================================================= */

@media (max-width: 480px) {

    .references-section {
        padding-left: 12px;
        padding-right: 12px;

        
    }

    .references-container {
        gap: 20px;
    }

    .reference-card > img {
        height: 220px;
    }

    .reference-card-body {
        padding: 20px;
    }

    .reference-card-cat {
        font-size: 11px;
    }

    .reference-card-body h3 {
        font-size: 18px;
    }

    .reference-card-body p {
        font-size: 14px;
    }

}




/* Partners PAGE */

.hero-partners{
    min-height:40vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;

    background-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.70) 0%,
            rgba(0,0,0,0.45) 25%,
            rgba(0,0,0,0.15) 55%,
            rgba(0,0,0,0) 100%
        ),
        url('Images/header img/partneri-head-img.jpg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-content-partners{
    position:relative;
    z-index:2;
    color:#fff;
    text-align:center;
    padding:10px;
    max-width:1400px;
}

.hero-content-partners h1{
    color:#c9a13b;
    margin:0;
    font-size:48px;
    font-weight:700;
}

@media (max-width: 768px) {

    .hero-content-partners {
        transform: translateY(80px);
    }

}



/* =========================================================
   PARTNER SEKCIJA
========================================================= */

.partner-section {
    padding: 80px 20px 100px;
    background: #fff;
}

.partner-container {
    max-width: 1150px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 80px;
}


/* =========================================================
   LIJEVA STRANA - TEKST
========================================================= */

.partner-text {
    flex: 1;
    min-width: 0;

    display: flex;
    flex-direction: column;
}


.partner-small-cat {
    display: block;

    color: #c9a13b;

    font-size: 34px;
    font-weight: 700;

    line-height: 1.1;

    margin-bottom: 42px;
}


/* =========================================================
   DEKORACIJA ///
========================================================= */

.partner-decor {
    display: flex;

    gap: 7px;

    margin-bottom: 70px;
}


.partner-decor span {
    display: block;

    width: 8px;
    height: 2px;

    background: #c9a13b;

    transform: skewX(-25deg);
}


/* =========================================================
   NASLOV
========================================================= */

.partner-text h2 {
    margin: 0 0 45px;

    color: #666;

    font-size: 36px;
    font-weight: 700;

    line-height: 1.1;
}


/* =========================================================
   PARAGRAFI
========================================================= */

.partner-text p {
    margin: 0 0 28px;

    color: #777;

    font-size: 16px;
    font-weight: 400;

    line-height: 1.45;
}


/* =========================================================
   LINK
========================================================= */

.partner-link-text {
    margin-top: 8px !important;
}


.partner-link-text a {
    color: #666;

    font-weight: 700;

    text-decoration: none;
}


.partner-link-text a:hover {
    color: #c9a13b;
}


/* =========================================================
   DESNA STRANA - SLIKA + OKVIR
========================================================= */

.partner-media {
    width: 470px;
    height: 430px;

    position: relative;

    flex-shrink: 0;
}


/* =========================================================
   ZLATNI OKVIR
========================================================= */

.partner-frame {
    position: absolute;

    width: 390px;
    height: 390px;

    top: 50px;
    left: 0;

    border: 20px solid #c9a13b;

    box-sizing: border-box;

    z-index: 1;
}


/* =========================================================
   SLIKA PREKO OKVIRA
========================================================= */

.partner-image {
    position: absolute;

    width: 390px;
    height: 390px;

    top: 0;
    left: 50px;

    object-fit: cover;

    display: block;

    z-index: 2;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1000px) {

    .partner-container {
        gap: 40px;
    }

    .partner-media {
        width: 420px;
    }

    .partner-frame {
        width: 350px;
        height: 350px;
    }

    .partner-image {
        width: 350px;
        height: 350px;

        left: 40px;
    }

}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width: 768px) {

    .partner-section {
        padding: 60px 20px 80px;
    }

    .partner-container {
        flex-direction: column;

        gap: 60px;

        align-items: stretch;
    }


    .partner-small-cat {
        font-size: 28px;

        margin-bottom: 35px;
    }


    .partner-decor {
        margin-bottom: 45px;
    }


    .partner-text h2 {
        font-size: 32px;

        margin-bottom: 30px;
    }


    .partner-text p {
        font-size: 15px;

        line-height: 1.6;
    }


    .partner-media {
        width: 100%;
        max-width: 470px;

        height: 390px;

        margin: 0 auto;
    }


    .partner-frame {
        width: calc(100% - 50px);
        height: calc(100% - 50px);

        top: 50px;
        left: 0;

        border-width: 15px;
    }


    .partner-image {
        width: calc(100% - 50px);
        height: calc(100% - 50px);

        top: 0;
        left: 50px;
    }

}


/* =========================================================
   MALI MOBILNI
========================================================= */

@media (max-width: 480px) {

    .partner-section {
        padding-left: 15px;
        padding-right: 15px;
    }


    .partner-small-cat {
        font-size: 25px;
    }


    .partner-text h2 {
        font-size: 28px;
    }


    .partner-media {
        height: 320px;
    }


    .partner-frame {
        width: calc(100% - 35px);
        height: calc(100% - 35px);

        top: 35px;

        border-width: 12px;
    }


    .partner-image {
        width: calc(100% - 35px);
        height: calc(100% - 35px);

        left: 35px;
    }

}



/* =========================================================
   GALERIJA
========================================================= */

.gallery-section {
    padding: 60px 20px 150px;
    background: #fff;
}

.gallery-container {
    max-width: 1150px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: repeat(4, 1fr);

    gap: 20px;
}


/* =========================================================
   SLIKA
========================================================= */

.gallery-item {
    position: relative;
    width: 100%;
    height: 220px;

    overflow: hidden;
    cursor: pointer;

    background: #fff;
}

.gallery-item img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.4s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* =========================================================
   LIGHTBOX
========================================================= */

.gallery-lightbox {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.92);

    display: none;

    align-items: center;
    justify-content: center;

    z-index: 999999;
}


/* Aktivna galerija */

.gallery-lightbox.active {
    display: flex;
}


/* Velika slika */

.gallery-lightbox-image {
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}


/* =========================================================
   ZATVARANJE
========================================================= */

.gallery-close {
    position: absolute;

    top: 25px;
    right: 35px;

    width: 50px;
    height: 50px;

    border: none;

    background: transparent;

    color: #fff;

    font-size: 42px;
    line-height: 1;

    cursor: pointer;

    z-index: 10;

    transition: color 0.3s ease;
}

.gallery-close:hover {
    color: #c9a13b;
}


/* =========================================================
   PRETHODNA / SLJEDEĆA
========================================================= */

.gallery-prev,
.gallery-next {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 55px;
    height: 55px;

    border: none;

    background: rgba(255, 255, 255, 0.1);

    color: #fff;

    font-size: 30px;

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.gallery-prev {
    left: 30px;
}

.gallery-next {
    right: 30px;
}

.gallery-prev:hover,
.gallery-next:hover {
    background: #c9a13b;
    color: #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .gallery-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item {
        height: 250px;
    }

}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width: 600px) {

    .gallery-section {
        padding: 40px 15px 150px;
    }

    .gallery-container {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .gallery-item {
        height: 280px;
    }

    .gallery-lightbox-image {
        max-width: 90%;
        max-height: 75vh;
    }

    .gallery-prev {
        left: 10px;
    }

    .gallery-next {
        right: 10px;
    }

    .gallery-prev,
    .gallery-next {
        width: 45px;
        height: 45px;

        font-size: 24px;
    }

    .gallery-close {
        top: 15px;
        right: 15px;

        font-size: 36px;
    }

}



/* Conact page */

.hero-contact{
    min-height:40vh;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;

    background-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,0.70) 0%,
            rgba(0,0,0,0.45) 25%,
            rgba(0,0,0,0.15) 55%,
            rgba(0,0,0,0) 100%
        ),
        url('Images/header img/kontakt-head-img.jpg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-content-contact{
    position:relative;
    z-index:2;
    color:#fff;
    text-align:center;
    padding:10px;
    max-width:1400px;
}

.hero-content-contact h1{
    color:#c9a13b;
    margin:0;
    font-size:48px;
    font-weight:700;
}

@media (max-width: 768px) {

    .hero-content-contact {
        transform: translateY(80px);
    }

}


/* =========================================================
   CONTACT SECTION
========================================================= */

.contact-section {
    padding: 90px 20px;

    background-image: url('Images/kontakt-bg-img.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    border-top: 1px solid #eee;
}

.contact-container {
    max-width: 1150px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 80px;

    align-items: start;
}


/* =========================================================
   LIJEVA STRANA
========================================================= */

.contact-info {
    padding-top: 10px;
}

.contact-cat {
    display: block;

    color: #c9a13b;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 14px;
}

.contact-title {
    margin: 0;

    color: #444;

    font-size: 38px;
    font-weight: 700;

    line-height: 1.1;
}


/* =========================================================
   DEKORACIJA
========================================================= */

.contact-decoration {
    display: flex;

    gap: 14px;

    margin: 22px 0 25px;
}

.contact-decoration span {
    display: block;

    width: 24px;
    height: 2px;

    background: #c9a13b;

    transform: skewX(25deg);

    border-radius: 2px;
}


/* =========================================================
   OPIS
========================================================= */

.contact-description {
    margin: 0 0 35px;

    color: #666;

    font-size: 15px;

    line-height: 1.8;

    max-width: 520px;
}


/* =========================================================
   KONTAKT INFORMACIJE
========================================================= */

.contact-details {
    display: flex;

    flex-direction: column;

    gap: 20px;
}

.contact-detail-item {
    display: flex;

    align-items: center;

    gap: 16px;

    color: #555;

    font-size: 15px;

    text-decoration: none;

    transition: color 0.3s ease;
}

.contact-detail-item:hover {
    color: #c9a13b;
}


/* Ikone */

.contact-detail-icon {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #c9a13b;

    color: #c9a13b;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.contact-detail-icon svg {
    width: 20px;
    height: 20px;
}

.contact-detail-item:hover .contact-detail-icon {
    background: #c9a13b;
    color: #fff;
}


/* =========================================================
   DESNA STRANA - FORMA
========================================================= */

.contact-form-wrapper {
    background: #fff;

    padding: 35px;

    border: 1px solid #eee;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.08);
}

.contact-form {
    width: 100%;
}


/* Red sa dva inputa */

.contact-form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 20px;
}


/* Grupa */

.contact-form-group {
    display: flex;

    flex-direction: column;

    gap: 8px;

    margin-bottom: 20px;
}


/* Label */

.contact-form-group label {
    color: #444;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;
}


/* Input i textarea */

.contact-form-group input,
.contact-form-group textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 14px 16px;

    border: 1px solid #ddd;

    background: #fafafa;

    color: #333;

    font-family: inherit;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}

.contact-form-group textarea {
    resize: vertical;

    min-height: 140px;
}


/* Placeholder */

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
    color: #999;
}


/* Focus */

.contact-form-group input:focus,
.contact-form-group textarea:focus {
    border-color: #c9a13b;

    background: #fff;

    box-shadow: 0 0 0 2px rgba(201, 161, 59, 0.10);
}


/* =========================================================
   DUGME
========================================================= */

.contact-submit {
    position: relative;

    width: 220px;
    height: 52px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    border: 2px solid #c9a13b;

    background: #c9a13b;

    color: #fff;

    font-family: inherit;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    cursor: pointer;

    overflow: hidden;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.contact-submit span {
    font-size: 20px;

    line-height: 1;

    transition: transform 0.3s ease;
}

.contact-submit:hover {
    background: #fff;

    color: #c9a13b;
}

.contact-submit:hover span {
    transform: translateX(6px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .contact-container {
        grid-template-columns: 1fr;

        gap: 50px;
    }

    .contact-info {
        max-width: 650px;
    }

}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width: 600px) {

    .contact-section {
        padding: 60px 15px;
    }

    .contact-title {
        font-size: 32px;
    }

    .contact-form-wrapper {
        padding: 25px 20px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .contact-submit {
        width: 100%;
    }

    .contact-detail-item {
        align-items: flex-start;
    }

}


/* =========================================================
   CONTACT MAP
========================================================= */

.contact-map-section {
    width: 100%;

    padding: 80px 20px 0;

    background: #fff;
}


/* Naslov iznad mape */

.contact-map-title {
    max-width: 1150px;

    margin: 0 auto 35px;

    text-align: center;
}

.contact-map-title span {
    display: block;

    color: #c9a13b;

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 12px;
}

.contact-map-title h2 {
    margin: 0;

    color: #444;

    font-size: 36px;

    line-height: 1.1;
}


/* Mapa */

.contact-map {
    width: 100%;

    height: 500px;

    overflow: hidden;

    box-shadow:
        0 -5px 25px rgba(0, 0, 0, 0.08);
}

.contact-map iframe {
    display: block;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width: 600px) {

    .contact-map-section {
        padding: 60px 15px 0;
    }

    .contact-map-title h2 {
        font-size: 30px;
    }

    .contact-map {
        height: 400px;
    }

}

/* =========================================================
   STELLAR HOMES - GLAVNA SEKCIJA
========================================================= */

.stellar-page {
    padding: 70px 20px 100px;
    background: #fff;
}

.stellar-container {
    max-width: 1150px;
    margin: 0 auto;
}


/* =========================================================
   NASLOV
========================================================= */

.stellar-header {
    text-align: center;
    margin-bottom: 45px;
}

.stellar-cat {
    display: block;
    color: #c9a13b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 18px;
}

.stellar-decor {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 22px;
}

.stellar-decor span {
    width: 25px;
    height: 2px;
    background: #c9a13b;
    display: block;
    transform: skewX(25deg);
    border-radius: 2px;
}

.stellar-header h1 {
    margin: 0;
    color: #333;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 700;
}


/* =========================================================
   GLAVNA SLIKA
========================================================= */

.stellar-main-image {
    width: 100%;
    margin-bottom: 55px;
    overflow: hidden;
}

.stellar-main-image img {
    display: block;
    width: 100%;
    height: 560px;
    object-fit: cover;
}


/* =========================================================
   TEKST
========================================================= */

.stellar-content {
    max-width: 1000px;
    margin: 0 auto;
}

.stellar-content p {
    margin: 0 0 28px;
    color: #666;
    font-size: 16px;
    line-height: 1.9;
}

.stellar-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   PODACI UP12 / UP13
========================================================= */

.stellar-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 65px;
    margin-bottom: 80px;
}

.stellar-info-box {
    padding: 35px;
    background: #f8f8f8;
    border-top: 4px solid #c9a13b;
}

.stellar-info-box h2 {
    margin: 0;
    color: #333;
    font-size: 28px;
}

.stellar-info-line {
    width: 45px;
    height: 2px;
    background: #c9a13b;
    margin: 20px 0 25px;
}

.stellar-stat {
    display: flex;
    justify-content: space-between;
    gap: 25px;
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
}

.stellar-stat:last-child {
    border-bottom: 0;
}

.stellar-stat strong {
    color: #444;
    font-size: 14px;
}

.stellar-stat span {
    color: #666;
    font-size: 14px;
    text-align: right;
    line-height: 1.5;
}


/* =========================================================
   GALERIJA
========================================================= */

.stellar-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.stellar-gallery-item {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    cursor: pointer;
    background: #eee;
}

.stellar-gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.stellar-gallery-item:hover img {
    transform: scale(1.06);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.stellar-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.94);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.stellar-lightbox.active {
    opacity: 1;
    visibility: visible;
}

.stellar-lightbox-image {
    max-width: 85%;
    max-height: 85vh;
    object-fit: contain;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}

.stellar-lightbox-close,
.stellar-lightbox-prev,
.stellar-lightbox-next {
    position: absolute;
    border: 0;
    background: transparent;
    color: #fff;
    cursor: pointer;
    z-index: 2;
}

.stellar-lightbox-close {
    top: 25px;
    right: 35px;
    font-size: 42px;
    line-height: 1;
}

.stellar-lightbox-prev,
.stellar-lightbox-next {
    top: 50%;
    transform: translateY(-50%);
    font-size: 45px;
    padding: 20px;
}

.stellar-lightbox-prev {
    left: 25px;
}

.stellar-lightbox-next {
    right: 25px;
}

.stellar-lightbox-close:hover,
.stellar-lightbox-prev:hover,
.stellar-lightbox-next:hover {
    color: #c9a13b;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .stellar-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .stellar-main-image img {
        height: 450px;
    }

}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width: 600px) {

    .stellar-page {
        padding: 50px 15px 150px;
    }

    .stellar-header h1 {
        font-size: 32px;
    }

    .stellar-main-image {
        margin-bottom: 35px;
    }

    .stellar-main-image img {
        height: 300px;
    }

    .stellar-content p {
        font-size: 15px;
        line-height: 1.8;
    }

    .stellar-info {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 45px;
        margin-bottom: 55px;
    }

    .stellar-info-box {
        padding: 25px 20px;
    }

    .stellar-stat {
        flex-direction: column;
        gap: 5px;
    }

    .stellar-stat span {
        text-align: left;
    }

    .stellar-gallery {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .stellar-gallery-item {
        aspect-ratio: 16 / 10;
    }

    .stellar-lightbox-image {
        max-width: 92%;
        max-height: 75vh;
    }

    .stellar-lightbox-prev,
    .stellar-lightbox-next {
        font-size: 30px;
        padding: 10px;
    }

    .stellar-lightbox-prev {
        left: 5px;
    }

    .stellar-lightbox-next {
        right: 5px;
    }

}

/* =========================================================
   HOTEL ZETA - GLAVNA SEKCIJA
========================================================= */

.zeta-project-section {
    padding: 80px 20px 100px;
    background: #fff;
}

.zeta-project-container {
    max-width: 1150px;
    margin: 0 auto;
}


/* =========================================================
   NASLOV
========================================================= */

.zeta-project-heading {
    text-align: center;
    margin-bottom: 50px;
}

.zeta-project-cat {
    display: block;
    color: #c9a13b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 18px;
}

.zeta-project-heading h1 {
    margin: 20px 0 0;
    color: #333;
    font-size: 42px;
    line-height: 1.2;
}

.zeta-project-decor {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}

.zeta-project-decor span {
    width: 24px;
    height: 2px;
    background: #c9a13b;
    display: block;
    transform: skewX(25deg);
    border-radius: 2px;
}


/* =========================================================
   GLAVNA SLIKA
========================================================= */

.zeta-project-main-image {
    width: 100%;
    margin-bottom: 55px;
    overflow: hidden;
}

.zeta-project-main-image img {
    width: 100%;
    height: auto;
    max-height: 650px;
    object-fit: cover;
    display: block;
}


/* =========================================================
   TEKST PROJEKTA
========================================================= */

.zeta-project-text {
    max-width: 1000px;
    margin: 0 auto 70px;
}

.zeta-project-text p {
    margin: 0 0 25px;
    color: #666;
    font-size: 16px;
    line-height: 1.9;
}

.zeta-project-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   GALERIJA
========================================================= */

.zeta-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 60px;
}

.zeta-gallery-item {
    display: block;
    overflow: hidden;
    background: #eee;
    aspect-ratio: 16 / 10;
    cursor: pointer;
}

.zeta-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.zeta-gallery-item:hover img {
    transform: scale(1.05);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.zeta-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.94);

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;

    transition: opacity 0.3s ease;

    z-index: 999999;
}

.zeta-lightbox.active {
    opacity: 1;
    visibility: visible;
}


/* Slika */

.zeta-lightbox-image {
    max-width: 88%;
    max-height: 88vh;
    width: auto;
    height: auto;

    object-fit: contain;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}


/* Zatvaranje */

.zeta-lightbox-close {
    position: absolute;

    top: 25px;
    right: 35px;

    width: 50px;
    height: 50px;

    border: none;
    background: transparent;

    color: #fff;

    font-size: 42px;
    line-height: 1;

    cursor: pointer;

    z-index: 10;
}


/* Lijeva/desna strelica */

.zeta-lightbox-prev,
.zeta-lightbox-next {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 55px;
    height: 70px;

    border: none;

    background: rgba(201, 161, 59, 0.9);

    color: #fff;

    font-size: 28px;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: background 0.3s ease;
}

.zeta-lightbox-prev:hover,
.zeta-lightbox-next:hover {
    background: #c9a13b;
}

.zeta-lightbox-prev {
    left: 30px;
}

.zeta-lightbox-next {
    right: 30px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .zeta-project-heading h1 {
        font-size: 36px;
    }

    .zeta-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width: 600px) {

    .zeta-project-section {
        padding: 60px 15px 100px;
    }

    .zeta-project-heading {
        margin-bottom: 35px;
    }

    .zeta-project-heading h1 {
        font-size: 30px;
    }

    .zeta-project-text p {
        font-size: 15px;
        line-height: 1.8;
    }

    .zeta-gallery {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .zeta-gallery-item {
        aspect-ratio: 16 / 10;
    }

    .zeta-lightbox-image {
        max-width: 94%;
        max-height: 80vh;
    }

    .zeta-lightbox-prev,
    .zeta-lightbox-next {
        width: 42px;
        height: 55px;
        font-size: 22px;
    }

    .zeta-lightbox-prev {
        left: 10px;
    }

    .zeta-lightbox-next {
        right: 10px;
    }

    .zeta-lightbox-close {
        top: 15px;
        right: 15px;
        font-size: 36px;
    }

}



/* =========================================================
   BELUX RESIDENCE - PROJECT SECTION
========================================================= */

.project-detail-section {
    padding: 80px 20px 100px;
    background: #fff;
}

.project-detail-container {
    max-width: 1150px;
    margin: 0 auto;
}


/* =========================================================
   KATEGORIJA
========================================================= */

.project-detail-cat {
    display: block;

    color: #c9a13b;

    font-size: 13px;
    font-weight: 700;

    letter-spacing: 2px;

    margin-bottom: 14px;
}


/* =========================================================
   ZLATNA DEKORACIJA
========================================================= */

.project-detail-decor {
    display: flex;

    gap: 12px;

    margin-bottom: 18px;
}

.project-detail-decor span {
    display: block;

    width: 25px;
    height: 2px;

    background: #c9a13b;

    transform: skewX(25deg);

    border-radius: 2px;
}


/* =========================================================
   NASLOV
========================================================= */

.project-detail-title {
    margin: 0 0 35px;

    color: #333;

    font-size: 42px;
    font-weight: 700;

    line-height: 1.1;
}


/* =========================================================
   GLAVNA SLIKA
========================================================= */

.project-detail-main-image {
    width: 100%;

    margin-bottom: 50px;

    overflow: hidden;

    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.18);
}

.project-detail-main-image img {
    display: block;

    width: 100%;
    height: auto;

    max-height: 650px;

    object-fit: cover;
}


/* =========================================================
   TEKST
========================================================= */

.project-detail-content {
    max-width: 1000px;

    margin: 0 auto 70px;
}

.project-detail-content p {
    margin: 0 0 24px;

    color: #666;

    font-size: 16px;

    line-height: 1.85;
}


/* =========================================================
   PODACI O PROJEKTU
========================================================= */

.project-detail-specs {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;

    margin: 40px 0;
}

.project-spec {
    padding: 24px;

    background: #f8f8f8;

    border-left: 4px solid #c9a13b;

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.project-spec strong {
    color: #333;

    font-size: 14px;

    font-weight: 700;
}

.project-spec span {
    color: #c9a13b;

    font-size: 20px;

    font-weight: 700;
}


/* =========================================================
   BROŠURA
========================================================= */

.project-brochure {
    margin-top: 35px !important;
}

.project-brochure a {
    color: #c9a13b;

    font-weight: 700;

    text-decoration: none;

    border-bottom: 1px solid #c9a13b;

    transition: all 0.3s ease;
}

.project-brochure a:hover {
    color: #333;

    border-color: #333;
}


/* =========================================================
   GALERIJA
========================================================= */

.stellar-gallery {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;

    margin-top: 60px;
}

.stellar-gallery-item {
    display: block;

    position: relative;

    overflow: hidden;

    aspect-ratio: 16 / 10;

    cursor: pointer;

    background: #eee;
}

.stellar-gallery-item img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;
}

.stellar-gallery-item:hover img {
    transform: scale(1.06);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.stellar-lightbox {
    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.94);

    display: flex;

    align-items: center;
    justify-content: center;

    opacity: 0;

    visibility: hidden;

    z-index: 999999;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.stellar-lightbox.active {
    opacity: 1;

    visibility: visible;
}


/* =========================================================
   LIGHTBOX SLIKA
========================================================= */

.stellar-lightbox-content {
    width: calc(100% - 180px);

    height: calc(100% - 100px);

    display: flex;

    align-items: center;
    justify-content: center;
}

.stellar-lightbox-content img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;
}


/* =========================================================
   CLOSE
========================================================= */

.stellar-lightbox-close {
    position: absolute;

    top: 25px;
    right: 35px;

    width: 50px;
    height: 50px;

    border: none;

    background: transparent;

    color: #fff;

    font-size: 42px;

    line-height: 1;

    cursor: pointer;

    z-index: 10;
}


/* =========================================================
   PREV / NEXT
========================================================= */

.stellar-lightbox-prev,
.stellar-lightbox-next {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 55px;
    height: 70px;

    border: none;

    background: rgba(255, 255, 255, 0.08);

    color: #fff;

    font-size: 35px;

    cursor: pointer;

    transition: background 0.3s ease;
}

.stellar-lightbox-prev:hover,
.stellar-lightbox-next:hover {
    background: rgba(201, 161, 59, 0.8);
}

.stellar-lightbox-prev {
    left: 25px;
}

.stellar-lightbox-next {
    right: 25px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .project-detail-section {
        padding: 60px 20px 80px;
    }

    .project-detail-title {
        font-size: 36px;
    }

    .project-detail-specs {
        grid-template-columns: 1fr;
    }

    .stellar-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width: 600px) {

    .project-detail-section {
        padding: 45px 15px 150px;
    }

    .project-detail-title {
        font-size: 30px;
        margin-bottom: 25px;
    }

    .project-detail-content p {
        font-size: 15px;
        line-height: 1.75;
    }

    .project-detail-main-image {
        margin-bottom: 35px;
    }

    .stellar-gallery {
        grid-template-columns: 1fr 1fr;

        gap: 10px;

        margin-top: 40px;
    }

    .stellar-gallery-item {
        aspect-ratio: 16 / 11;
    }

    .stellar-lightbox-content {
        width: calc(100% - 90px);

        height: calc(100% - 100px);
    }

    .stellar-lightbox-prev,
    .stellar-lightbox-next {
        width: 40px;
        height: 55px;

        font-size: 25px;
    }

    .stellar-lightbox-prev {
        left: 5px;
    }

    .stellar-lightbox-next {
        right: 5px;
    }

    .stellar-lightbox-close {
        top: 15px;
        right: 15px;

        font-size: 35px;
    }

}


/* =========================================================
   MALI MOBILNI
========================================================= */

@media (max-width: 400px) {

    .stellar-gallery {
        grid-template-columns: 1fr;
    }

}



/* =========================================================
   HOTEL RAMADA PODGORICA - GLAVNA SEKCIJA
========================================================= */

.ramada-page {
    padding: 80px 20px 100px;
    background: #fff;
    position: relative;
}

.ramada-container {
    width: 100%;
    max-width: 1150px;
    margin: 0 auto;
}


/* =========================================================
   NASLOV
========================================================= */

.ramada-header {
    text-align: center;
    margin-bottom: 45px;
}

.ramada-category {
    display: block;
    color: #c9a13b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.ramada-header h1 {
    margin: 20px 0 0;
    color: #333;
    font-size: 44px;
    line-height: 1.2;
    font-weight: 700;
}


/* =========================================================
   ZLATNA DEKORACIJA
========================================================= */

.ramada-decoration {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
}

.ramada-decoration span {
    display: block;
    width: 25px;
    height: 2px;
    background: #c9a13b;
    transform: skewX(25deg);
    border-radius: 2px;
}


/* =========================================================
   GLAVNA SLIKA
========================================================= */

.ramada-main-image {
    width: 100%;
    margin-bottom: 55px;
    overflow: hidden;
}

.ramada-main-image img {
    width: 100%;
    height: 560px;
    display: block;
    object-fit: cover;
}


/* =========================================================
   TEKST
========================================================= */

.ramada-text {
    max-width: 950px;
    margin: 0 auto 70px;
}

.ramada-text p {
    margin: 0 0 25px;
    color: #666;
    font-size: 16px;
    line-height: 1.9;
}

.ramada-text p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   GALERIJA
========================================================= */

.ramada-gallery {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.ramada-gallery-item {
    position: relative;
    display: block;
    width: 100%;
    height: 280px;
    overflow: hidden;
    cursor: pointer;
    background: #eee;
}

.ramada-gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.ramada-gallery-item:hover img {
    transform: scale(1.06);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.ramada-lightbox {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0, 0, 0, 0.94);

    opacity: 0;
    visibility: hidden;

    z-index: 999999;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.ramada-lightbox-visible {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   LIGHTBOX SLIKA
========================================================= */

.ramada-lightbox-content {
    width: calc(100% - 180px);
    height: calc(100% - 100px);

    display: flex;
    align-items: center;
    justify-content: center;
}

.ramada-lightbox-content img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    box-shadow:
        0 10px 40px
        rgba(0, 0, 0, 0.5);
}


/* =========================================================
   LIGHTBOX - ZATVORI
========================================================= */

.ramada-lightbox-close {
    position: absolute;

    top: 20px;
    right: 30px;

    width: 50px;
    height: 50px;

    padding: 0;

    border: none;
    background: transparent;

    color: #fff;

    font-size: 44px;
    font-weight: 300;
    line-height: 1;

    cursor: pointer;

    z-index: 10;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.ramada-lightbox-close:hover {
    color: #c9a13b;
    transform: rotate(90deg);
}


/* =========================================================
   LIGHTBOX - PRETHODNA
========================================================= */

.ramada-lightbox-prev {
    position: absolute;

    left: 25px;
    top: 50%;

    width: 55px;
    height: 70px;

    padding: 0;

    border: none;
    background: transparent;

    color: #fff;

    font-size: 45px;
    font-weight: 300;

    cursor: pointer;

    transform: translateY(-50%);

    z-index: 10;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.ramada-lightbox-prev:hover {
    color: #c9a13b;
    transform: translate(-5px, -50%);
}


/* =========================================================
   LIGHTBOX - SLJEDEĆA
========================================================= */

.ramada-lightbox-next {
    position: absolute;

    right: 25px;
    top: 50%;

    width: 55px;
    height: 70px;

    padding: 0;

    border: none;
    background: transparent;

    color: #fff;

    font-size: 45px;
    font-weight: 300;

    cursor: pointer;

    transform: translateY(-50%);

    z-index: 10;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.ramada-lightbox-next:hover {
    color: #c9a13b;
    transform: translate(5px, -50%);
}


/* =========================================================
   BLOKIRANJE SCROLLA KADA JE LIGHTBOX OTVOREN
========================================================= */

.ramada-no-scroll {
    overflow: hidden;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .ramada-page {
        padding: 60px 20px 80px;
    }


    .ramada-header h1 {
        font-size: 36px;
    }


    .ramada-main-image img {
        height: 450px;
    }


    .ramada-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width: 600px) {

    .ramada-page {
        padding: 45px 15px 60px;
    }


    .ramada-header {
        margin-bottom: 30px;
    }


    .ramada-category {
        font-size: 12px;
        letter-spacing: 2px;
    }


    .ramada-header h1 {
        font-size: 30px;
    }


    .ramada-main-image {
        margin-bottom: 35px;
    }


    .ramada-main-image img {
        height: 300px;
    }


    .ramada-text {
        margin-bottom: 45px;
    }


    .ramada-text p {
        font-size: 15px;
        line-height: 1.8;
    }


    /* Galerija */

    .ramada-gallery {
        grid-template-columns: 1fr;
        gap: 15px;
    }


    .ramada-gallery-item {
        height: 260px;
    }


    /* Lightbox */

    .ramada-lightbox-content {
        width: calc(100% - 70px);
        height: calc(100% - 120px);
    }


    .ramada-lightbox-prev {
        left: 5px;
        width: 35px;
        font-size: 32px;
    }


    .ramada-lightbox-next {
        right: 5px;
        width: 35px;
        font-size: 32px;
    }


    .ramada-lightbox-close {
        top: 10px;
        right: 15px;
        font-size: 36px;
    }

}


/* =========================================================
   EUROPOINT DETAIL PAGE
========================================================= */

.europoint-detail-section {
    padding: 70px 20px 100px;
    background: #fff;
}

.europoint-detail-container {
    max-width: 1150px;
    margin: 0 auto;
}


/* =========================================================
   NASLOV
========================================================= */

.europoint-detail-heading {
    text-align: center;
    margin-bottom: 45px;
}

.europoint-detail-category {
    display: block;
    color: #c9a13b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.europoint-detail-heading h1 {
    margin: 0;
    color: #333;
    font-size: 46px;
    line-height: 1.15;
    font-weight: 700;
}


/* =========================================================
   ZLATNA DEKORACIJA
========================================================= */

.europoint-detail-decor {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 22px 0 0;
}

.europoint-detail-decor span {
    display: block;
    width: 24px;
    height: 2px;
    background: #c9a13b;
    transform: skewX(25deg);
    border-radius: 2px;
}


/* =========================================================
   GLAVNA SLIKA
========================================================= */

.europoint-detail-main-image {
    width: 100%;
    margin-bottom: 45px;
    overflow: hidden;
}

.europoint-detail-main-image img {
    width: 100%;
    height: 560px;
    display: block;
    object-fit: cover;
}


/* =========================================================
   TEKST
========================================================= */

.europoint-detail-content {
    max-width: 950px;
    margin: 0 auto 65px;
}

.europoint-detail-content p {
    margin: 0 0 25px;
    color: #666;
    font-size: 16px;
    line-height: 1.9;
}

.europoint-detail-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   GALERIJA
========================================================= */

.europoint-detail-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.europoint-detail-gallery-item {
    display: block;
    position: relative;
    overflow: hidden;
    height: 280px;
    cursor: pointer;
    background: #eee;
}

.europoint-detail-gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.europoint-detail-gallery-item:hover img {
    transform: scale(1.06);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.europoint-detail-lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.94);

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;

    z-index: 999999;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.europoint-detail-lightbox.active {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   LIGHTBOX SLIKA
========================================================= */

.europoint-detail-lightbox-content {
    width: calc(100% - 180px);
    height: calc(100% - 100px);

    display: flex;
    align-items: center;
    justify-content: center;
}

.europoint-detail-lightbox-content img {
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}


/* =========================================================
   ZATVARANJE
========================================================= */

.europoint-detail-lightbox-close {
    position: absolute;

    top: 25px;
    right: 35px;

    width: 50px;
    height: 50px;

    border: none;
    background: transparent;

    color: #fff;

    font-size: 42px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    z-index: 10;

    transition: color 0.3s ease;
}

.europoint-detail-lightbox-close:hover {
    color: #c9a13b;
}


/* =========================================================
   PRETHODNA / SLJEDEĆA
========================================================= */

.europoint-detail-lightbox-prev,
.europoint-detail-lightbox-next {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 55px;
    height: 70px;

    border: none;

    background: rgba(255, 255, 255, 0.08);

    color: #fff;

    font-size: 30px;

    cursor: pointer;

    z-index: 10;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.europoint-detail-lightbox-prev {
    left: 25px;
}

.europoint-detail-lightbox-next {
    right: 25px;
}

.europoint-detail-lightbox-prev:hover,
.europoint-detail-lightbox-next:hover {
    background: #c9a13b;
    color: #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .europoint-detail-section {
        padding: 55px 20px 80px;
    }

    .europoint-detail-heading h1 {
        font-size: 38px;
    }

    .europoint-detail-main-image img {
        height: 450px;
    }

    .europoint-detail-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .europoint-detail-gallery-item {
        height: 260px;
    }

}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width: 600px) {

    .europoint-detail-section {
        padding: 45px 15px 65px;
    }

    .europoint-detail-heading {
        margin-bottom: 30px;
    }

    .europoint-detail-category {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .europoint-detail-heading h1 {
        font-size: 30px;
    }

    .europoint-detail-main-image {
        margin-bottom: 35px;
    }

    .europoint-detail-main-image img {
        height: 300px;
    }

    .europoint-detail-content {
        margin-bottom: 45px;
    }

    .europoint-detail-content p {
        font-size: 15px;
        line-height: 1.8;
    }

    .europoint-detail-gallery {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .europoint-detail-gallery-item {
        height: 260px;
    }


    /* LIGHTBOX MOBILNI */

    .europoint-detail-lightbox-content {
        width: calc(100% - 80px);
        height: calc(100% - 120px);
    }

    .europoint-detail-lightbox-prev,
    .europoint-detail-lightbox-next {
        width: 40px;
        height: 55px;
        font-size: 22px;
    }

    .europoint-detail-lightbox-prev {
        left: 8px;
    }

    .europoint-detail-lightbox-next {
        right: 8px;
    }

    .europoint-detail-lightbox-close {
        top: 15px;
        right: 15px;
        font-size: 36px;
    }

}

/* =========================================================
   MALL OF MONTENEGRO - DETAIL PAGE
========================================================= */

.mall-reference-detail {
    padding: 70px 20px 100px;
    background: #fff;
}

.mall-reference-container {
    max-width: 1150px;
    margin: 0 auto;
}


/* =========================================================
   NASLOV
========================================================= */

.mall-reference-heading {
    text-align: center;
    margin-bottom: 45px;
}

.mall-reference-category {
    display: block;
    color: #c9a13b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 3px;
    margin-bottom: 15px;
}

.mall-reference-heading h1 {
    margin: 0;
    color: #333;
    font-size: 46px;
    line-height: 1.15;
    font-weight: 700;
}


/* =========================================================
   ZLATNA DEKORACIJA
========================================================= */

.mall-reference-decor {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 22px 0 0;
}

.mall-reference-decor span {
    display: block;
    width: 24px;
    height: 2px;
    background: #c9a13b;
    transform: skewX(25deg);
    border-radius: 2px;
}


/* =========================================================
   GLAVNA SLIKA
========================================================= */

.mall-reference-main-image {
    width: 100%;
    margin-bottom: 45px;
    overflow: hidden;
}

.mall-reference-main-image img {
    width: 100%;
    height: 560px;
    display: block;
    object-fit: cover;
}


/* =========================================================
   TEKST
========================================================= */

.mall-reference-content {
    max-width: 950px;
    margin: 0 auto 65px;
}

.mall-reference-content p {
    margin: 0 0 25px;
    color: #666;
    font-size: 16px;
    line-height: 1.9;
}

.mall-reference-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   GALERIJA
========================================================= */

.mall-reference-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.mall-reference-gallery-item {
    display: block;
    position: relative;
    overflow: hidden;
    height: 280px;
    cursor: pointer;
    background: #eee;
}

.mall-reference-gallery-item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.45s ease;
}

.mall-reference-gallery-item:hover img {
    transform: scale(1.06);
}


/* =========================================================
   LIGHTBOX
========================================================= */

.mall-reference-lightbox {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.94);

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;

    z-index: 999999;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease;
}

.mall-reference-lightbox.active {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   LIGHTBOX SLIKA
========================================================= */

.mall-reference-lightbox-content {
    width: calc(100% - 180px);
    height: calc(100% - 100px);

    display: flex;
    align-items: center;
    justify-content: center;
}

.mall-reference-lightbox-content img {
    max-width: 100%;
    max-height: 100%;

    width: auto;
    height: auto;

    object-fit: contain;

    box-shadow:
        0 10px 40px
        rgba(0, 0, 0, 0.5);
}


/* =========================================================
   ZATVARANJE
========================================================= */

.mall-reference-lightbox-close {
    position: absolute;

    top: 25px;
    right: 35px;

    width: 50px;
    height: 50px;

    border: none;
    background: transparent;

    color: #fff;

    font-size: 42px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    z-index: 10;

    transition:
        color 0.3s ease;
}

.mall-reference-lightbox-close:hover {
    color: #c9a13b;
}


/* =========================================================
   PRETHODNA / SLJEDEĆA SLIKA
========================================================= */

.mall-reference-lightbox-prev,
.mall-reference-lightbox-next {
    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 55px;
    height: 70px;

    border: none;

    background:
        rgba(255, 255, 255, 0.08);

    color: #fff;

    font-size: 30px;

    cursor: pointer;

    z-index: 10;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.mall-reference-lightbox-prev {
    left: 25px;
}

.mall-reference-lightbox-next {
    right: 25px;
}

.mall-reference-lightbox-prev:hover,
.mall-reference-lightbox-next:hover {
    background: #c9a13b;
    color: #fff;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .mall-reference-detail {
        padding: 55px 20px 80px;
    }

    .mall-reference-heading h1 {
        font-size: 38px;
    }

    .mall-reference-main-image img {
        height: 450px;
    }

    .mall-reference-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .mall-reference-gallery-item {
        height: 260px;
    }

}


/* =========================================================
   MOBILNI
========================================================= */

@media (max-width: 600px) {

    .mall-reference-detail {
        padding: 45px 15px 65px;
    }

    .mall-reference-heading {
        margin-bottom: 30px;
    }

    .mall-reference-category {
        font-size: 12px;
        letter-spacing: 2px;
    }

    .mall-reference-heading h1 {
        font-size: 30px;
    }

    .mall-reference-main-image {
        margin-bottom: 35px;
    }

    .mall-reference-main-image img {
        height: 300px;
    }

    .mall-reference-content {
        margin-bottom: 45px;
    }

    .mall-reference-content p {
        font-size: 15px;
        line-height: 1.8;
    }

    .mall-reference-gallery {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .mall-reference-gallery-item {
        height: 260px;
    }


    /* LIGHTBOX MOBILNI */

    .mall-reference-lightbox-content {
        width: calc(100% - 80px);
        height: calc(100% - 120px);
    }

    .mall-reference-lightbox-prev,
    .mall-reference-lightbox-next {
        width: 40px;
        height: 55px;
        font-size: 22px;
    }

    .mall-reference-lightbox-prev {
        left: 8px;
    }

    .mall-reference-lightbox-next {
        right: 8px;
    }

    .mall-reference-lightbox-close {
        top: 15px;
        right: 15px;
        font-size: 36px;
    }

}