.project-detail-page{background:#fff}
.project-detail-hero{padding:110px 0 90px}
.project-detail-hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,.5fr);gap:90px;align-items:end}
.project-detail-kicker,.project-detail-label,.project-detail-duo article>span,.project-detail-result-inner>span{display:block;color:#64748b;font-size:12px;line-height:1.2;font-weight:800;letter-spacing:.1em}
.project-detail-title h1{margin:18px 0 0;color:#111;font-size:70px;line-height:.95;letter-spacing:-.05em;font-weight:500}
.project-detail-subtitle{max-width:820px;margin:28px 0 0;color:#64748b;font-size:20px;line-height:1.55}
.project-detail-meta{border-top:1px solid #e2e8f0}
.project-detail-meta-row{padding:18px 0;border-bottom:1px solid #e2e8f0}
.project-detail-meta-row>span{display:block;margin-bottom:6px;color:#94a3b8;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.project-detail-meta-row strong{color:#111;font-size:17px}
.project-service-list{display:flex;flex-wrap:wrap;gap:8px}
.project-service-list a{color:#111;text-decoration:none;border-bottom:1px solid #111}
.project-visit-link{display:inline-flex;align-items:center;gap:10px;margin-top:24px;color:#111;font-weight:400;text-decoration:none}
.project-detail-cover{padding-bottom:120px}
.project-detail-cover-inner{overflow:hidden;aspect-ratio:16/9;background:#eef3f7}
.project-detail-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.project-detail-section{padding:110px 0}
.project-detail-light{background:#f4f7fa}
.project-detail-section-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:70px}
.project-detail-content{max-width:950px;color:#334155;font-size:22px;line-height:1.7}
.project-detail-lead{color:#111;font-size:32px;line-height:1.45;letter-spacing:-.02em}
.project-detail-duo{padding:110px 0;background:#0f172a}
.project-detail-duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.14)}
.project-detail-duo article{min-height:420px;padding:48px;background:#0f172a}
.project-detail-duo article>span{color:#93c5fd}
.project-detail-duo article>div{margin-top:34px;color:#fff;font-size:27px;line-height:1.55}
.project-detail-result{padding:110px 0;background:#1da1ff}
.project-detail-result-inner{max-width:1200px}
.project-detail-result-inner>span{color:rgba(255,255,255,.75)}
.project-detail-result-inner>div{margin-top:26px;color:#fff;font-size:40px;line-height:1.35;letter-spacing:-.03em}
.project-detail-gallery{padding:120px 0}
.project-detail-gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.project-detail-gallery figure{margin:0;overflow:hidden;background:#eef3f7}
.project-detail-gallery figure.wide{grid-column:1/-1}
.project-detail-gallery img{display:block;width:100%;height:auto}
.project-detail-nav{padding:30px 0 120px}
.project-detail-nav-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.project-nav-card{min-height:170px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;color:#111;text-decoration:none;border:1px solid #dbe4ec;transition:.2s}
.project-nav-card.next{text-align:right}
.project-nav-card span{color:#64748b;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.project-nav-card strong{font-size:32px;line-height:1;letter-spacing:-.04em}
.project-nav-card:hover{background:#111827;color:#fff}
.project-nav-card:hover span{color:#cbd5e1}


/* =========================================================
   BLOG-DETAILS STYLE BODY
   ========================================================= */

.project-blog-body{
    padding:0 0 90px;
    background:#fff;
}

.project-blog-layout{
    display:grid;
    grid-template-columns:80px minmax(0,820px);
    gap:46px;
    justify-content:center;
    align-items:start;
}

.project-blog-side{
    position:sticky;
    top:120px;
    padding-top:8px;
}

.project-blog-side>span{
    display:block;
    color:#64748b;
    font-size:10px;
    line-height:1;
    font-weight:800;
    letter-spacing:.12em;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
}

.project-blog-side-line{
    width:1px;
    height:78px;
    margin:18px 0 0 5px;
    background:#d8e0e8;
}

.project-blog-article{
    width:100%;
    min-width:0;
}

.project-blog-quote{
    position:relative;
    margin:0 0 48px;
    padding:30px 34px 30px 68px;
    background:#111827;
    color:#fff;
}

.project-blog-quote-mark{
    position:absolute;
    left:22px;
    top:12px;
    color:#fff;
    font-size:56px;
    line-height:1;
}

.project-blog-quote p{
    margin:0;
    font-size:22px;
    line-height:1.38;
    letter-spacing:-.02em;
}

.project-blog-block{
    margin:0 0 44px;
}

.project-blog-block h2{
    margin:0 0 13px;
    color:#111;
    font-size:30px;
    line-height:1.05;
    letter-spacing:-.035em;
    font-weight:500;
}

.project-blog-text{
    color:#3d4b5c;
    font-size:16px;
    line-height:1.62;
}

.project-blog-image{
    margin:0 0 48px;
    overflow:hidden;
    background:#eef3f7;
}

.project-blog-image img{
    display:block;
    width:100%;
    height:auto;
}

.project-blog-services{
    border-top:1px solid #e1e7ed;
}

.project-blog-service-item{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:11px 0;
    border-bottom:1px solid #e1e7ed;
    color:#334155;
    font-size:14px;
    line-height:1.4;
}

.project-blog-service-item span{
    color:#1da1ff;
    font-weight:900;
}

.project-blog-service-item strong{
    font-weight:500;
}

.project-blog-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-top:22px;
}

.project-blog-tags span{
    padding:7px 11px;
    border:1px solid #dbe3ea;
    border-radius:99px;
    color:#334155;
    font-size:12px;
    font-weight:700;
}

.project-blog-result{
    margin:0 0 48px;
    padding:30px 34px;
    background:#1da1ff;
    color:#fff;
}

.project-blog-result>span{
    display:block;
    margin-bottom:10px;
    color:rgba(255,255,255,.78);
    font-size:10px;
    font-weight:800;
    letter-spacing:.1em;
}

.project-blog-result p{
    margin:0;
    font-size:19px;
    line-height:1.42;
    letter-spacing:-.015em;
}

.project-blog-gallery{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.project-blog-gallery figure{
    margin:0;
    background:#eef3f7;
}

.project-blog-gallery img{
    display:block;
    width:100%;
    height:auto;
}

@media(max-width:991px){
    .project-detail-hero-grid{grid-template-columns:1fr;gap:44px}
    .project-detail-title h1{font-size:52px}

    .project-blog-layout{
        grid-template-columns:1fr;
    }

    .project-blog-side{
        display:none;
    }
}

@media(max-width:767px){
    .project-detail-hero{padding:80px 0 60px}
    .project-detail-title h1{font-size:45px}
    .project-detail-subtitle{font-size:17px}
    .project-detail-cover{padding-bottom:72px}

    .project-blog-body{
        padding-bottom:60px;
    }

    .project-blog-quote{
        padding:24px 22px 24px 54px;
    }

    .project-blog-quote-mark{
        left:17px;
        font-size:44px;
    }

    .project-blog-quote p{
        font-size:19px;
		color:#fff;
		font-weight: 300 !important;
    }

    .project-blog-block h2{
        font-size:26px;
    }

    .project-blog-text{
        font-size:15px;
    }

    .project-blog-result{
        padding:24px 22px;
    }

    .project-blog-result p{
        font-size:19px;
		color:#fff;
    }

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

    .project-detail-nav-grid{grid-template-columns:1fr}
    .project-nav-card.next{text-align:left}
}


/* v9 - hero right column: only project link when URL exists */
.project-detail-meta{
    border-top:1px solid #e2e8f0;
    min-height:54px;
}

.project-visit-link-top{
    margin-top:18px;
}
/* TAMNE / PLAVE SEKCIJE */
.project-blog-quote,
.project-blog-quote p,
.project-blog-quote *,
.project-blog-result,
.project-blog-result p,
.project-blog-result * {
    color: #fff !important;
}

/* O PROJEKTU I OSTALI GLAVNI TEKSTUALNI BLOKOVI */
.project-blog-text {
    font-size: 19px;
    line-height: 1.32;
    color: #334155;
}

/* prvi glavni tekst može biti malo izraženiji */
.project-blog-block:first-of-type .project-blog-text {
    font-size: 19px;
    line-height: 1.32;
	font-weight: 300;
}

/* NASLOVI SEKCIJA */
.project-blog-block h2 {
    font-size: 34px;
    line-height: 1.08;
    margin-bottom: 18px;
}

/* quote */
.project-blog-quote p {
    font-size: 24px;
    line-height: 1.42;
    font-weight: 300 !important;
}

/* rezultat */
.project-blog-result p {
    font-size: 19px;
    line-height: 1.45;
	font-weight: 300;
}
/* UJEDNAČAVANJE VELIČINE TEKSTA U PROJECT DETAIL */

.project-blog-service-item{
    font-size:19px;
    line-height:1.3;
    padding:13px 0;
	
}

.project-blog-service-item strong{
    font-weight:300;
}

.project-blog-service-item span{
    font-size:15px;
    line-height:1.4;
    margin-top:1px;
}

/* glavni tekst sekcija */
.project-blog-text{
    font-size:19px;
    line-height:1.32;
	font-weight: 300;
}

/* naslovi */
.project-blog-block h2{
    font-size:34px;
    line-height:1.08;
    margin-bottom:18px;
	font-weight: 300;
}

/* =========================================================
   BLOG DETAIL CONTENT
   ========================================================= */

.blog-detail-page .blog-richtext{
    color:#334155;
    font-size:18px;
    line-height:1.8;
    font-weight:300;
}

.blog-detail-page .blog-richtext p{
    margin:0 0 22px;
    color:#334155;
    font-size:18px;
    line-height:1.8;
    font-weight:300;
}

.blog-detail-page .blog-richtext h2{
    margin:52px 0 20px;
    color:#111;
    font-size:42px;
    line-height:1.1;
    letter-spacing:-.03em;
    font-weight:300;
}

.blog-detail-page .blog-richtext h3{
    margin:36px 0 16px;
    color:#111;
    font-size:30px;
    line-height:1.2;
    letter-spacing:-.025em;
    font-weight:300;
}

.blog-detail-page .blog-richtext h4{
    margin:28px 0 14px;
    color:#111;
    font-size:24px;
    line-height:1.25;
    font-weight:400;
}

.blog-detail-page .blog-richtext strong{
    color:#111827;
    font-weight:600;
}


/* LISTE */

.blog-detail-page .blog-richtext ul{
    list-style:none;
    margin:20px 0 30px;
    padding:0;
}

.blog-detail-page .blog-richtext ul li{
    position:relative;
    margin:0 0 10px;
    padding-left:30px;

    color:#334155;
    font-size:18px;
    line-height:1.8;
    font-weight:300;
}

.blog-detail-page .blog-richtext ul li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;

    color:#1da1ff;
    font-size:18px;
    line-height:1.8;
    font-weight:700;
}

.blog-detail-page .blog-richtext ol{
    margin:20px 0 30px;
    padding-left:30px;
}

.blog-detail-page .blog-richtext ol li{
    margin-bottom:10px;
    color:#334155;
    font-size:18px;
    line-height:1.8;
    font-weight:300;
}

.blog-detail-page .blog-richtext ol li::marker{
    color:#1da1ff;
    font-weight:700;
}


/* LINKOVI */

.blog-detail-page .blog-richtext a{
    color:#1da1ff;
    text-decoration:none;
    border-bottom:1px solid rgba(29,161,255,.35);
    transition:.2s ease;
}

.blog-detail-page .blog-richtext a:hover{
    border-bottom-color:#1da1ff;
}


/* BLOCKQUOTE */

.blog-detail-page .blog-richtext blockquote{
    margin:32px 0;
    padding:20px 24px;
    border-left:4px solid #1da1ff;
    background:#f4f7fa;

    color:#475569;
    font-size:19px;
    line-height:1.7;
    font-weight:300;
}


/* SLIKE */

.blog-detail-page .blog-richtext img{
    display:block;
    max-width:100%;
    height:auto;
    margin:36px 0;
}


/* TABELA */

.blog-detail-page .blog-richtext table{
    width:100%;
    margin:30px 0;
    border-collapse:collapse;
}

.blog-detail-page .blog-richtext th,
.blog-detail-page .blog-richtext td{
    padding:14px 16px;
    border:1px solid #dfe6ec;
    text-align:left;
    vertical-align:top;
}

.blog-detail-page .blog-richtext th{
    background:#f4f7fa;
    color:#111827;
    font-weight:600;
}


/* MOBILE */

@media(max-width:767px){

    .blog-detail-page .blog-richtext,
    .blog-detail-page .blog-richtext p,
    .blog-detail-page .blog-richtext li{
        font-size:16px;
        line-height:1.7;
    }

    .blog-detail-page .blog-richtext h2{
        margin-top:40px;
        font-size:34px;
    }

    .blog-detail-page .blog-richtext h3{
        font-size:26px;
    }

    .blog-detail-page .blog-richtext h4{
        font-size:21px;
    }

    .blog-detail-page .blog-richtext ul li{
        padding-left:27px;
    }

    .blog-detail-page .blog-richtext ul li::before{
        font-size:16px;
        line-height:1.7;
    }
}
/* =========================================================
   BLOG TYPOGRAPHY = PROJECT TYPOGRAPHY
   ========================================================= */

.blog-detail-page .blog-richtext{
    color:#334155;
    font-size:17px;
    line-height:1.65;
    font-weight:300;
}

.blog-detail-page .blog-richtext p{
    margin:0 0 18px;
    color:#334155;
    font-size:17px;
    line-height:1.65;
    font-weight:300;
}

.blog-detail-page .blog-richtext h2{
    margin:42px 0 18px;
    color:#111;
    font-size:36px;
    line-height:1.12;
    letter-spacing:-.025em;
    font-weight:300;
}

.blog-detail-page .blog-richtext h3{
    margin:30px 0 14px;
    color:#111;
    font-size:28px;
    line-height:1.18;
    letter-spacing:-.02em;
    font-weight:300;
}

.blog-detail-page .blog-richtext strong{
    color:#111827;
    font-weight:600;
}

.blog-detail-page .blog-richtext ul{
    list-style:none;
    margin:16px 0 24px;
    padding:0;
}

.blog-detail-page .blog-richtext ul li{
    position:relative;
    margin:0 0 8px;
    padding-left:28px;
    color:#334155;
    font-size:17px;
    line-height:1.65;
    font-weight:300;
}

.blog-detail-page .blog-richtext ul li::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:#1da1ff;
    font-size:17px;
    line-height:1.65;
    font-weight:700;
}

.blog-detail-page .blog-richtext ol{
    margin:16px 0 24px;
    padding-left:28px;
}

.blog-detail-page .blog-richtext ol li{
    margin-bottom:8px;
    color:#334155;
    font-size:17px;
    line-height:1.65;
    font-weight:300;
}

.blog-detail-page .blog-richtext ol li::marker{
    color:#1da1ff;
    font-weight:700;
}

@media(max-width:767px){

    .blog-detail-page .blog-richtext,
    .blog-detail-page .blog-richtext p,
    .blog-detail-page .blog-richtext li{
        font-size:16px;
        line-height:1.6;
    }

    .blog-detail-page .blog-richtext h2{
        margin-top:34px;
        font-size:30px;
    }

    .blog-detail-page .blog-richtext h3{
        font-size:24px;
    }
}
/* =========================================================
   BLOG CONTENT - ISTA TIPOGRAFIJA KAO PROJECT DETAIL
   ========================================================= */

.project-blog-content{
    color:#173054;
    font-size:18px;
    line-height:1.55;
    font-weight:400;
}

.project-blog-paragraph{
    margin:0 0 24px;
    padding:0;

    color:inherit;
    font-family:inherit;
    font-size:inherit;
    line-height:inherit;
    font-weight:inherit;
}

.project-blog-content-title{
    margin:48px 0 22px;

    color:#111;
    font-family:inherit;
    font-size:44px;
    line-height:1.1;
    letter-spacing:-.035em;
    font-weight:300;
}

.project-blog-content-subtitle{
    margin:38px 0 18px;

    color:#111;
    font-family:inherit;
    font-size:32px;
    line-height:1.15;
    letter-spacing:-.025em;
    font-weight:300;
}

.project-blog-content-list{
    list-style:none;
    margin:10px 0 28px;
    padding:0;
}

.project-blog-content-list-item{
    position:relative;
    margin:0 0 10px;
    padding-left:28px;

    color:inherit;
    font-family:inherit;
    font-size:inherit;
    line-height:inherit;
    font-weight:inherit;
}

.project-blog-content-list-item::before{
    content:"✓";
    position:absolute;
    left:0;
    top:0;
    color:#1da1ff;
    font-weight:700;
}

.project-blog-content strong{
    font-weight:600;
    color:#111827;
}