/*
Theme Name: Maasai Environmental
Theme URI: https://example.com
Author: Maasai
Description: Editorial corporate one-page theme inspired by an environmental engineering layout.
Version: 1.1.0
Text Domain: maasai
*/

:root { 
    --ink:#173b32; 
    --porr:#173b32; 
    --yellow:#f6d33b; 
    --cream:#f3f1eb; 
    --line:rgba(21,21,21,.2); 
    --pww-primary: #45cf63;        /* plava (ikonice / naslovi kartica) */
	--pww-primary-dark: #4b978c;
	--pww-ink: #45cf63;            /* tamni tekst / aktivni tab */
	--pww-muted: #6b7280;          /* sekundarni tekst */
	--pww-bg: #ffffff;             /* pozadina panela */
	--pww-surface: #ffffff;        /* kartice */
	--pww-border: #e2e5ea;
	--pww-radius: 6px;
	--pww-tekst: #312f2f; 

}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); font-family:"Barlow", sans-serif; font-size:16px; line-height:1.45; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }

/* ========================================
   HEADER
   Hamburger / search / brand live here.
   NOTE: .put-menu-toggle and .search-toggle are positioned in
   assets/css/sliding-menu.css (position:absolute, NOT fixed, so
   they scroll away with the header instead of staying "sticky").
   ======================================== */
.site-header {position: absolute; z-index:20; left:20px; right:20px; top:0; color:#fff; padding:0 82px; height:105px; display:flex; align-items:center; }
.main-nav { display:flex; justify-content:space-between; align-items:center; width:100%; font-size:14px; text-transform:uppercase; font-weight:700; letter-spacing:.02em; }
.nav-side { display:flex; gap:35px; align-items:center; }
.brand { position:absolute; left:50%; top:10px; transform:translateX(-50%); width:auto; text-align:center; font-size:18px; line-height:.92; letter-spacing:-.04em; color:#fff; }
.brand span { display:block; }
.brand strong { display:block; font-size:32px; letter-spacing:-.09em; }
.brand img { max-height:73px; width:auto; }

.footer-company__logo img {
    max-height: 73px;
}

.site-main {
    position: relative;
    top: 120px;
}

/* ========================================
   HERO
   ======================================== */
.hero { min-height:100svh; position:relative; color:#fff; background:#222; }
.hero .swiper,.hero .swiper-wrapper,.hero .swiper-slide { height:100svh; }
.hero img { height:100%; width:100%; object-fit:cover; }
.hero::after { position:absolute; inset:0; content:""; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.5),transparent 65%),linear-gradient(0deg,rgba(0,0,0,.25),transparent 40%); }

/* .hero-copy-track carries the positioning state (normal/pinned/released);
   its inner .container gives the SAME left edge as every other section's
   .container, so the hero title lines up with "For a future worth living…" */
.hero-copy-track { position:absolute; left:0; right:0; bottom:18vh; z-index:12; }
.hero-copy { overflow:hidden; transition:color .35s ease; }
.hero-copy h1 { margin:0; font-size:clamp(48px,7.4vw,132px); font-weight:400; line-height:.78; letter-spacing:-.075em; transition:font-size .35s ease; }
.hero-copy h1 strong,.hero-word { display:block; }
.hero-word { font-weight:400; transform:translateY(115%); opacity:0; animation:heading-reveal .35s .25s cubic-bezier(.25,1,.5,1) forwards; }
.hero-word + .hero-word { font-weight:800; animation-delay:.38s; }

/* Docked state: text has scrolled up to meet the intro headline —
   shrink it and switch to ink so it reads against the white section */
.hero-copy-track.is-docked .hero-copy { color:var(--ink); mix-blend-mode:multiply; }
.hero-copy-track.is-docked .hero-copy h1 { font-size:clamp(34px,3.7vw,66px); }

.hero-pagination { z-index:3!important; left:auto!important; right:5vw!important; bottom:7vh!important; width:auto!important; }
.hero-pagination .swiper-pagination-bullet { height:3px; width:42px; border-radius:0; opacity:1; background:#fff; }
.hero-pagination .swiper-pagination-bullet-active { background:var(--yellow); }

/* Scroll hint — centered horizontally */
.scroll-hint { z-index:3; position:absolute; left:50%; bottom:4.4vh; transform:translateX(-50%); width:44px; height:44px; border:1px solid #fff; border-radius:50%; display:grid; place-items:center; animation:bob 1.6s infinite; }
.scroll-hint::after { content:"\2193"; font-size:22px; }
@keyframes bob{50%{transform:translateY(7px)}}

.intro { padding:120px 0 90px; }
.eyebrow { text-transform:uppercase; font-size:13px; font-weight:700; letter-spacing:.08em; }
.headline { line-height:.9; letter-spacing:-.06em; font-size:clamp(42px,5.2vw,82px); }
.intro p { max-width:620px; font-size:clamp(19px,1.65vw,27px); line-height:1.25; }
.intro p+p { margin-top:1.25em; }

.section { padding:90px 0; }
.card-grid { padding:110px 0 160px; min-height:900px; }
.work-card { border:0; background:transparent; border-radius:0; overflow:visible; }
.work-card figure { height:525px; overflow:hidden; position:relative; margin:0; border-radius:20px 0; }
.work-card img { height:100%; width:100%; object-fit:cover; transition:transform .6s ease; }
.work-card:hover img { transform:scale(1.06); }
.tag { position:absolute; bottom:0; left:0; padding:9px 14px; background:var(--yellow); font-size:12px; font-weight:700; }
.work-card h3 { padding-top:18px; font-size:25px; font-weight:bold; }

.statement { background:var(--cream); padding:112px 0; position:relative; overflow:hidden; border-top-right-radius:45px; border-bottom-left-radius:45px; }
.statement::after { content:"M"; position:absolute; right:-.08em; bottom:-.55em; font-size:40vw; font-weight:800; color:#e9e7df; line-height:1; z-index:0; }
.statement .container { position:relative; z-index:1; }
.statement p { font-size:20px; max-width:510px; }
.outline-button { --bs-btn-hover-bg:var(--ink); padding:11px 18px; display:inline-block; border:1px solid currentColor; text-transform:uppercase; font-size:12px; font-weight:bold; background-image:linear-gradient(to right,var(--bs-btn-hover-bg) 0,var(--bs-btn-hover-bg) 100%); background-position:bottom; background-repeat:no-repeat; background-size:100% 0; transition:color .4s cubic-bezier(.19,1,.22,1),background-size .4s cubic-bezier(.19,1,.22,1),border-color .4s cubic-bezier(.19,1,.22,1),box-shadow .4s cubic-bezier(.19,1,.22,1); }
.outline-button:hover { color:#fff; background-size:100% 100%; }

/* ========================================
   PROJECTS BANNER — curtains driven continuously by scroll
   position via the --reveal custom property (see theme.js
   initBannerScrub). 0 = closed/white, 1 = fully open. Works in
   both scroll directions, unlike a one-shot IntersectionObserver.
   ======================================== */
.image-banner { --reveal:0; position:relative; min-height:650px; display:flex; align-items:center; background:#222 center/cover; overflow:hidden; border-top-right-radius:45px; }
.image-banner::before,.image-banner::after { content:""; position:absolute; z-index:3; top:0; bottom:0; width:calc((50% - 42px) * (1 - var(--reveal))); background:#fff; }
.image-banner::before { left:0; }
.image-banner::after { right:0; }

@media (min-width: 992px) {
	.image-banner {
		padding: 150px 0;
	}
}

.banner-box { position:relative; z-index:4;  padding:55px 55px; background-color: rgba(0, 0, 0, 0.7); color:#fff; border-top-right-radius:45px; border-bottom-left-radius:45px; }
.banner-box h2 { color:var(--yellow); font-size:50px; letter-spacing:-.07em; line-height:.82; }
.banner-box p { font-size:18px; }
.banner-box .outline-button { --bs-btn-hover-bg:var(--yellow); }
.banner-box .outline-button:hover { color:var(--ink); }


.footer-bottom { margin-top:65px; padding-top:20px; border-top:1px solid rgba(255,255,255,.3); font-size:12px; }

.reveal { opacity:0; transform:scale(.5); transition:opacity .6s ease,transform .6s cubic-bezier(.34,1.56,.64,1); }
.reveal.visible { opacity:1; transform:none; }
.intro .reveal,.statement .reveal { transform:translateY(30px); transition:opacity .3s ease-in,transform .3s ease-out; }
.intro .reveal.visible,.statement .reveal.visible { transform:none; }
.reveal-up { transform:translateY(90px)!important; transition:opacity .3s ease-in,transform .3s ease-out!important; }
.reveal-up.visible { transform:none!important; }
@keyframes heading-reveal{to{transform:translateY(0);opacity:1}}

@media (max-width:991px) {
  .site-header { padding:0 76px; }
  .nav-side a { display:none; }
  .work-card figure { height:420px; }
  .image-banner { min-height:560px; }
  .image-banner::before,.image-banner::after { width:calc((50% - 20px) * (1 - var(--reveal))); }
  .card-grid{min-height:0}
}
@media (max-width:575px) {
  .site-header{height:75px;padding:0 68px}
  .hero-copy-track{bottom:17vh}
  .hero-copy h1{font-size:55px}
  .intro{padding:75px 0 60px}
  .section{padding:60px 0}
  .card-grid{padding:60px 0}
  .work-card figure{height:470px;border-top-right-radius:15px;border-bottom-left-radius:15px}
  .statement{padding:75px 0;border-top-right-radius:30px;border-bottom-left-radius:30px}
  .image-banner{min-height:520px;border-top-right-radius:30px}
  .banner-box{padding:34px 27px;border-top-right-radius:30px;border-bottom-left-radius:30px}
  .banner-box h2{font-size:39px}
  .site-footer{padding-top:65px}
  .site-footer h2{font-size:29px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1560px !important; }
}

/* =========================================================
   PWW - 20 GODINA POSLOVANJA
   ========================================================= */

.pww-about {
	position: relative;
	padding: 9rem 0;
	overflow: hidden;
}


/* Glavni red */
.pww-about__row {
	position: relative;
}


/* =========================================================
   LEVA STRANA
   ========================================================= */

.pww-about__left {
	position: relative;
	z-index: 2;
	padding-top: 2rem;
	padding-bottom: 2rem;
}


/* Mali subtitle */
.pww-about__label {
	display: inline-flex;
	align-items: center;
	margin-bottom: 1.8rem;
	padding: 0.55rem 0;

	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;

	
	color: var(#173b32);

	border-radius: 50px;
}


/* Naslov */
.pww-about__title {
	margin: 0;
	padding: 0;

	font-size: clamp(4rem, 6.5vw, 7rem);
	font-weight: 300;
	line-height: 0.92;
	letter-spacing: -0.055em;

	color: var(#173b32);
}


/* "20 godina" podebljano */
.pww-about__title strong {
	display: block;
	font-weight: 800;
}


/* "poslovanja." */
.pww-about__title span {
	display: block;
	font-weight: 300;
}


/* Mala dekorativna linija */
.pww-about__line {
	width: 90px;
	height: 4px;
	margin-top: 2.5rem;

	background: var(--pww-accent, #dfeee6);
	border-radius: 10px;
}


/* =========================================================
   DESNA STRANA - KARTICA
   ========================================================= */

.pww-about__right {
	position: relative;
	z-index: 1;
}


/*
 * Svetla pozadina koja se vizuelno preklapa
 * sa levom stranom.
 */
.pww-about__content {
	position: relative;

	margin-left: -4rem;
	padding: 4.5rem 4rem 4.5rem 6rem;

	background: #f3f5f3;

	border-radius: 0rem 3rem 0rem 5rem;
}


/*
 * Dekorativni element u gornjem desnom uglu
 */
.pww-about__content::before {
	content: "";

	position: absolute;
	top: -18px;
	right: 35px;

	width: 55px;
	height: 55px;

	border-top: 3px solid var(--pww-accent, #dfeee6);
	border-right: 3px solid var(--pww-accent, #dfeee6);

	border-radius: 0 15px 0 0;
}


/* Tekst */
.pww-about__content p {
	max-width: 680px;

	margin: 0 0 1.7rem;

	font-size: 1.125rem;
	line-height: 1.85;
	color: var(#173b32);
}


/* Poslednji paragraf nema marginu */
.pww-about__content p:last-child {
	margin-bottom: 0;
}


/* =========================================================
   BLAGO PREKLAPANJE
   ========================================================= */

/*
 * Leva strana vizuelno ulazi preko kartice.
 * Ovo daje efekat sličan referentnoj slici.
 */
.pww-about__left::after {
	content: "";

	position: absolute;

	top: 15%;
	right: -20px;

	width: 40px;
	height: 70%;

	

	z-index: 3;

	border-radius: 0 20px 20px 0;
}


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

@media (max-width: 991.98px) {

	.pww-about {
		padding: 7rem 0;
	}

	.pww-about__left {
		padding-bottom: 3rem;
	}

	.pww-about__title {
		font-size: clamp(4rem, 10vw, 6rem);
	}

	.pww-about__content {
		margin-left: 0;
		padding: 3.5rem;
	}

	.pww-about__left::after {
		display: none;
	}

}


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

@media (max-width: 575.98px) {

	.pww-about {
		padding: 5rem 0;
	}

	.pww-about__left {
		padding-top: 0;
		padding-bottom: 2.5rem;
	}

	.pww-about__label {
		margin-bottom: 1.4rem;

		font-size: 0.7rem;
	}

	.pww-about__title {
		font-size: clamp(3.4rem, 16vw, 5rem);
		line-height: 0.95;
	}

	.pww-about__line {
		width: 60px;
		height: 3px;
		margin-top: 1.8rem;
	}

	.pww-about__content {
		padding: 2rem 1.5rem;

		border-radius: 1.25rem;
	}

	.pww-about__content::before {
		top: -10px;
		right: 20px;

		width: 35px;
		height: 35px;
	}

	.pww-about__content p {
		font-size: 0.95rem;
		line-height: 1.75;
		margin-bottom: 1.4rem;
	}

}

/* =========================================================
   PWW — NAŠE ČLANICE
   ========================================================= */

.members-section {
    position: relative;
    background: #ff7b49;
    padding: 105px 0 115px;
    border-bottom-right-radius: 50px;
    overflow: hidden;
}

.members-layout {
    width: 100%;
}

/* =========================================================
   OPŠTI REDOVI
   ========================================================= */

.members-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 35px;
    width: 100%;
    margin-bottom: 45px;
    align-items: start;
}

/* =========================================================
   PRVI RED — TEKST + GLAVNA SLIKA
   ========================================================= */

.members-row-hero {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 70px;
    margin-bottom: 45px;
}

.members-intro {
    align-self: center;
}

.members-intro h2 {
    margin: 0 0 24px;
    font-size: clamp(46px, 4vw, 64px);
    line-height: .95;
    font-weight: 600;
    letter-spacing: -0.045em;
    color: #123f34;
}

.members-intro p {
    margin: 0;
    max-width: 430px;
    font-size: 20px;
    line-height: 1.55;
    color: #31594c;
}

.member-main {
    width: 100%;
}

.member-main .member-image {
    aspect-ratio: 1.55 / 1;
}

/* =========================================================
   DRUGI I ČETVRTI RED
   ========================================================= */

.members-row-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* =========================================================
   TREĆI RED — SAMO 2 SLIKE
   ========================================================= */

.members-row-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: calc(66.6667% - 8px);
}

/* =========================================================
   KARTICE
   ========================================================= */

.member-card {
    min-width: 0;
    margin: 0;
}

.member-link {
    display: block;
    width: 100%;
    text-decoration: none;
}

/* =========================================================
   SLIKE
   ========================================================= */

.member-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1.38 / 1;
    margin: 0;
    overflow: hidden;
    background: #dce8e1;
    border-radius: 0 22px 22px 22px;
}

.member-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s cubic-bezier(.2,.65,.2,1);
}

.member-link:hover .member-image img {
    transform: scale(1.045);
}

/* =========================================================
   NAZIV PREKO SLIKE
   ========================================================= */

.member-name {
    position: absolute;
    right: 20px;
    bottom: 20px;
    max-width: calc(100% - 40px);
    padding: 11px 17px 12px;
    background: #f6d33b;
    color: #080000;
    font-size: 17px;
    line-height: 1.15;
    font-weight: 600;
    border-radius: 0px 10px 0px 10px;
    z-index: 2;
    transition: .3s ease;
}

.member-link:hover .member-name {
    background: #0c3329;
    color: #ffffff;
    transform: translateY(-2px);
}

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

@media (max-width: 991.98px) {

    .members-section {
        padding: 80px 0 90px;
    }

    .members-row {
        gap: 25px;
        margin-bottom: 25px;
    }

    .members-row-hero {
        column-gap: 35px;
        margin-bottom: 30px;
    }

    .members-intro h2 {
        font-size: 50px;
    }

    .members-intro p {
        font-size: 18px;
    }

    .members-row-two {
        width: calc(66.6667% - 6px);
    }

}

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

@media (max-width: 767.98px) {

    .members-section {
        padding: 65px 0 75px;
        border-bottom-right-radius: 35px;
    }

    /* Prvo tekst pa slika */
    .members-row-hero {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .members-intro {
        order: 1;
    }

    .member-main {
        order: 2;
    }

    .members-row {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 25px;
        margin-bottom: 25px;
    }

    .members-row-hero {
        display: grid;
    }

    .members-row-two {
        width: 100%;
    }

    .members-intro h2 {
        margin-bottom: 18px;
        font-size: 40px;
    }

    .members-intro p {
        font-size: 17px;
        line-height: 1.5;
    }

    .member-main .member-image {
        aspect-ratio: 1.5 / 1;
    }

    .member-image {
        aspect-ratio: 1.25 / 1;
        border-radius: 0 16px 16px 16px;
    }

    .member-name {
        right: 12px;
        bottom: 12px;
        max-width: calc(100% - 24px);
        padding: 9px 12px 10px;
        font-size: 14px;
    }

}

/* =========================================================
   MALI TELEFON
   ========================================================= */

@media (max-width: 480px) {

    .members-row,
    .members-row-two,
    .members-row-three {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .member-image,
    .member-main .member-image {
        aspect-ratio: 1.5 / 1;
    }

}

/* =========================================
   BROJKE
========================================= */

.pww-numbers {
	background: #f5f5f1;
}

.pww-numbers__title {
	font-size: 2.8rem;
	font-weight: 400;
	line-height: 1.2;
	color: #111;
	margin: 0;
}


/* =========================================
   NUMBER BOX
========================================= */

.pww-number-box {
	position: relative;
	min-height: 240px;
	background: #fff;
	padding: 1.5rem 1.5rem 1.75rem;
border-radius: 0 0 50px 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.pww-number-box--border {
	border: 2px solid #42c967;
}

.pww-number-box__number {
	font-size: 2.5rem;
	line-height: 1;
	font-weight: 700;
	color: #42c967;
}

.pww-number-box__text {
	font-size: 1.125rem;
	line-height: 1.45;
	font-style: italic;
	color: #171717;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 991.98px) {

	.pww-timeline {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.pww-timeline__item {
		padding-bottom: 1.5rem;
	}

	.pww-timeline__title {
		font-size: 1.1rem;
		margin-bottom: 1rem;
	}

	/*
	 * Na mobilnom linija ide preko cele stavke.
	 */
	.pww-timeline__line {
		margin-bottom: 1rem;
	}

	.pww-timeline__text {
		max-width: none;
	}

	.pww-numbers__title {
		font-size: 2rem;
	}

	.pww-number-box {
		min-height: 200px;
	}

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 575.98px) {

	.pww-home-bottom__image img {
		min-height: 220px;
		object-fit: cover;
	}

	.pww-numbers__title {
		font-size: 1.8rem;
	}

	.pww-number-box__number {
		font-size: 2.2rem;
	}

}

/* =========================================================
   NASE CLANICE
========================================================= */

.pww-members-section {
	background: #ff7b49;
	width: 100%;
	overflow: hidden;
	padding: 55px 0 95px;
}


/* =========================================================
   HEADER
========================================================= */

.pww-members-header {
	display: flex;
	align-items: center;
	justify-content: space-between;

	min-height: 145px;
	padding: 0 0 45px;
}

.pww-members-header__title {
	font-size: 50px;
	line-height: 1;
	font-weight: 400;
	color: #173b32;
}

.pww-members-header__logo {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.pww-members-header__logo img {
	display: block;
	width: auto;
	max-width: 145px;
	max-height: 100px;
	object-fit: contain;
}


/* =========================================================
   BORDERS
========================================================= */

.pww-members-border {
	width: 100%;
	height: 4px;
	background: #000;
}

.pww-members-border--top {
	margin-bottom: 0;
}

.pww-members-border--bottom {
	margin-top: 45px;
}


/* =========================================================
   SLIDER
========================================================= */

.pww-members-slider {
	position: relative;

	display: flex;
	align-items: center;

	width: 100%;

	padding: 55px 0 45px;
}


/* =========================================================
   VIEWPORT
========================================================= */

.pww-members-viewport {
	width: calc(100% - 250px);

	margin: 0 auto;

	overflow: hidden;
}


/* =========================================================
   TRACK
========================================================= */

.pww-members-track {
	display: flex;
	flex-wrap: nowrap;

	width: 100%;

	transform: translateX(0);

	transition: transform 0.5s ease;
	will-change: transform;
}


/* =========================================================
   MEMBER
========================================================= */

.pww-member {
	flex: 0 0 33.333333%;
	width: 33.333333%;

	padding: 0 15px;
	box-sizing: border-box;
}

.pww-member__link {
	display: block;

	color: #000;
	text-decoration: none;
}

.pww-member__title {
	margin: 0 0 25px;

	text-align: center;

	font-size: 27px;
	line-height: 1.1;
	font-weight: 500;

	color: #000;
}


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

.pww-member__image {
	position: relative;

	width: 100%;
	aspect-ratio: 1 / 0.72;

	overflow: hidden;
border-radius: 0 30px;
	background: #000;
}

.pww-member__image img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition: transform 0.45s ease;
}

.pww-member__link:hover .pww-member__image img {
	transform: scale(1.03);
}


/* FALLBACK */

.pww-member__image-placeholder {
	width: 90%;
	height: 100%;

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

	background: #ddd;

	color: #000;

	font-size: 20px;
	text-align: center;
	padding: 20px;
}


/* =========================================================
   ARROWS
========================================================= */

.pww-members-arrow {
	position: absolute;
	top: 50%;
	z-index: 10;

	transform: translateY(-50%);

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

	width: 150px;
	height: 150px;

	padding: 0;

	border: 0;
	outline: 0;

	background: transparent;

	cursor: pointer;
}

.pww-members-arrow svg {
	display: block;

	width: 100%;
	height: 100%;

	fill: #000;
}

.pww-members-arrow--prev {
	left: -5px;
}

.pww-members-arrow--next {
	right: -5px;
}


/* Hover */

.pww-members-arrow {
	transition: opacity 0.2s ease;
}

.pww-members-arrow:hover {
	opacity: 0.65;
}

.pww-members-arrow:disabled {
	opacity: 0.2;
	cursor: default;
}


/* =========================================================
   EMPTY
========================================================= */

.pww-members-empty {
	width: 100%;

	padding: 50px 0;

	text-align: center;

	font-size: 20px;
}


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

@media (max-width: 991.98px) {

	.pww-members-section {
		padding-top: 40px;
	}

	.pww-members-header {
		min-height: 110px;
		padding-bottom: 30px;
	}

	.pww-members-header__title {
		font-size: 40px;
	}

	.pww-members-header__logo img {
		max-width: 110px;
		max-height: 75px;
	}

	.pww-members-slider {
		padding-top: 40px;
		padding-bottom: 35px;
	}

	.pww-members-viewport {
		width: calc(100% - 160px);
	}

	.pww-members-arrow {
		width: 100px;
		height: 100px;
	}

	.pww-member {
		padding-left: 10px;
		padding-right: 10px;
	}

	.pww-member__title {
		font-size: 22px;
		margin-bottom: 18px;
	}

	.pww-members-border--bottom {
		margin-top: 30px;
	}

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

	.pww-members-section {
		padding-top: 30px;
	}

	.pww-members-header {
		min-height: auto;

		padding-bottom: 25px;
	}

	.pww-members-header__title {
		font-size: 32px;
	}

	.pww-members-header__logo img {
		max-width: 85px;
		max-height: 60px;
	}

	.pww-members-border {
		height: 3px;
	}


	/* SLIDER */

	.pww-members-slider {
		padding: 30px 0 25px;
	}


	.pww-members-viewport {
		width: calc(100% - 80px);
	}


	/* NA MOBILNOM JE JEDNA ČLANICA */

	.pww-member {
		flex: 0 0 100%;
		width: 100%;

		padding: 0;
	}


	.pww-member__title {
		margin-bottom: 18px;

		font-size: 24px;
		line-height: 1.15;
	}


	.pww-member__image {
		aspect-ratio: 1 / 0.75;
	}


	/* STRELICE */

	.pww-members-arrow {
		width: 55px;
		height: 55px;
	}

	.pww-members-arrow--prev {
		left: -5px;
	}

	.pww-members-arrow--next {
		right: -5px;
	}


	.pww-members-border--bottom {
		margin-top: 25px;
	}

}

/* =========================================
   NUMBER BOX
========================================= */

.pww-number-box {
	position: relative;
	min-height: 240px;
	background: #fff;
	padding: 1.5rem 1.5rem 1.75rem;
border-radius: 0 0 50px 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.pww-number-box--border {
	border: 2px solid #42c967;
}

.pww-number-box__number {
	font-size: 2.5rem;
	line-height: 1;
	font-weight: 700;
	color: #42c967;
}

.pww-number-box__text {
	font-size: 1.125rem;
	line-height: 1.45;
	font-style: italic;
	color: #171717;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 991.98px) {

	.pww-timeline {
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.pww-timeline__item {
		padding-bottom: 1.5rem;
	}

	.pww-timeline__title {
		font-size: 1.1rem;
		margin-bottom: 1rem;
	}

	/*
	 * Na mobilnom linija ide preko cele stavke.
	 */
	.pww-timeline__line {
		margin-bottom: 1rem;
	}

	.pww-timeline__text {
		max-width: none;
	}

	.pww-numbers__title {
		font-size: 2rem;
	}

	.pww-number-box {
		min-height: 200px;
	}

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 575.98px) {

	.pww-home-bottom__image img {
		min-height: 220px;
		object-fit: cover;
	}

	.pww-numbers__title {
		font-size: 1.8rem;
	}

	.pww-number-box__number {
		font-size: 2.2rem;
	}

}

.services-section {
    position: relative;
    background: #eaf3ee;
    padding: 105px 0 115px;
    border-bottom-right-radius: 50px;
    overflow: hidden;
}


/* GLAVNI LAYOUT */

.services-layout {
    display: grid;
    grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.7fr);
    gap: 75px;
    align-items: stretch;
}


/* NASLOV */

.services-heading {
    display: flex;
    align-items: stretch;
}

.services-heading h2 {
    width: 100%;
    margin: 0;
    padding: 45px 40px;

    display: flex;
    align-items: center;

    background: #000;
    color: #56af2f;

    border-radius: 0 30px;

    font-size: clamp(48px, 4vw, 68px);
    line-height: .95;
    font-weight: 600;
    letter-spacing: -0.045em;
}


/* GRID USLUGA */

.services-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}


/* BOX */

.service-box {
    position: relative;

    min-height: 245px;
    padding: 34px 32px 32px;

    background: rgba(245, 245, 241, 0.7);

    border-radius: 0 30px;

    transition:
        background-color .3s ease,
        transform .3s ease;
}


/* HOVER */

.service-box:hover {
    background: rgba(245, 245, 241, 0.8);
    transform: translateY(-3px);
}


/* BROJ */

.service-number {
    display: block;

    margin-bottom: 35px;

    font-size: 12px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .08em;

    color: #000;
}


/* SADRŽAJ */

.service-content {
    max-width: 390px;
}


/* NASLOV USLUGE */

.service-content h3 {
    margin: 0 0 17px;

    font-size: 25px;
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -0.025em;

    color: #000;
}


/* OPIS */

.service-content p {
    margin: 0;

    font-size: 1.125rem;
    line-height: 1.5;

    color: #000;
}


/* DONJA LINIJA / HOVER */

.service-box::after {
    content: "";

    position: absolute;
    left: 32px;
    bottom: 20px;

    width: 0;
    height: 1px;

    background: #000;

    transition: width .35s ease;
}

.service-box:hover::after {
    width: 45px;
}


/* TABLET */

@media (max-width: 991.98px) {

    .services-section {
        padding: 80px 0 90px;
    }

    .services-layout {
        grid-template-columns: minmax(200px, .7fr) minmax(0, 1.8fr);
        gap: 40px;
    }

    .services-heading h2 {
        padding: 35px 30px;
        font-size: 50px;
    }

    .service-box {
        min-height: 230px;
        padding: 28px 25px;
    }

    .service-content h3 {
        font-size: 22px;
    }
}


/* MOBILNI */

@media (max-width: 767.98px) {

    .services-section {
        padding: 65px 0 75px;
        border-bottom-right-radius: 35px;
    }

    .services-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .services-heading {
        display: block;
    }

    .services-heading h2 {
        min-height: 180px;
        padding: 35px 30px;

        font-size: 40px;
    }

    .services-list {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-box {
        min-height: auto;
        padding: 28px 24px 32px;
    }

    .service-number {
        margin-bottom: 25px;
    }

    .service-content h3 {
        font-size: 22px;
        line-height: 1.1;
    }

    .service-content p {
        font-size: 1.125rem;
    }

    .service-box::after {
        left: 24px;
    }
}

/* ---------- HEADER ORGANIZACIONE JEDINICE ---------- */

.pww-oj-header {
	background: var(--pww-surface);
	border-bottom: 1px solid var(--pww-border);
	padding: 3rem 0;
	text-align: center;
}

.pww-oj-header__logo {
	display: inline-block;
	margin-bottom: .75rem;
}

.pww-oj-header__logo img {
	max-height: 70px;
	width: auto;
}

.pww-oj-header__logo-text {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--pww-ink);
}

.pww-oj-header__title {
	font-size: 1.5rem;
	font-weight: 700;
	margin: 0;
	color: var(--pww-primary-dark);
}

/* ---------- MENI OJ ---------- */

.pww-oj-nav {
	background: var(--pww-surface);
	border-bottom: 1px solid var(--pww-border);
	padding: .25rem 0;
}

.pww-oj-nav__list {
	gap: .25rem;
}

.pww-oj-nav .nav-link {
	font-weight: 600;
	font-size: .9rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--pww-muted);
	padding: .65rem 1rem;
	border-radius: var(--pww-radius);
}

.pww-oj-nav .nav-link:hover {
	color: var(--pww-ink);
	background: var(--pww-bg);
}

.pww-oj-nav .nav-link.active {
	color: #fff;
	background: var(--pww-ink);
}

/* ---------- SADRZAJ ---------- */

.pww-oj-content {
	background: var(--pww-bg);
}

/* O nama */
.pww-about__media {
	margin-bottom: 1.5rem;
}

.pww-about__media img {
	max-width: 100%;
	height: auto;
	border-radius: var(--pww-radius);
}

.pww-about__text {
	color: #2a2f36;
}

.pww-standardi img {
	max-width: 220px;
	height: auto;
}

.pww-about__media img {
    border-radius: 50px 0;
	margin-bottom: 20px;
}

/* ---------- DOKUMENTI / FILTER / KARTICE ---------- */

.pww-docs {
	position: relative;
}

.pww-docs__filter {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
	margin-bottom: 2rem;
}

.pww-year-btn {
	border: none;
	background: transparent;
	color: var(--pww-muted);
	font-weight: 700;
	font-size: .9rem;
	padding: .5rem 1rem;
	border-radius: var(--pww-radius);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}

.pww-year-btn:hover {
	background: #e3e6ea;
	color: var(--pww-ink);
}

.pww-year-btn.active {
	background: var(--pww-ink);
	color: #fff;
}

/* Document Card */
.pww-doc-card {
	display: flex;
	flex-direction: column;
	background: var(--pww-surface);
	border: 1px solid var(--pww-border);
	border-radius: var(--pww-radius);
	height: 100%;
	color: inherit;
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
}

.pww-doc-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(31, 35, 40, .12);
	color: inherit;
}

.pww-doc-card--disabled {
	opacity: .7;
	cursor: default;
}

.pww-doc-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2.5rem 1rem;
	font-size: 3.25rem;
	color: var(--pww-primary);
	background: var(--pww-surface);
}

.pww-doc-card__body {
	padding: 1rem 1.25rem 1.25rem;
	background: #f4f5f8;
	border-top: 1px solid var(--pww-border);
	flex-grow: 1;
}

.pww-doc-card__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--pww-primary-dark);
	margin: 0 0 .5rem;
	line-height: 1.35;
}

.pww-doc-card__date {
	font-size: .85rem;
	color: var(--pww-muted);
	margin: 0;
}

/* Loading */
.pww-docs__loading {
	display: flex;
	justify-content: center;
	padding: 2rem 0;
	color: var(--pww-primary);
}

.pww-docs__empty {
	text-align: center;
	color: var(--pww-muted);
	padding: 3rem 0;
}

/* Paginacija */
.pww-pagination {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
}

.pww-pagination .page-link {
	color: var(--pww-ink);
	border-color: var(--pww-border);
}

.pww-pagination .page-item.active .page-link {
	background: var(--pww-ink);
	border-color: var(--pww-ink);
	color: #fff;
}

/* ---------- KONTAKT ---------- */

.pww-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pww-contact__list li {
	display: flex;
	flex-direction: column;
	padding: 1rem 0;
	border-bottom: 1px solid var(--pww-border);
}

.pww-contact__label {
	font-weight: 700;
	color: var(--pww-ink);
	margin-bottom: .25rem;
}

.pww-contact__value {
	color: var(--pww-muted);
}

.pww-contact__map {
	position: relative;
	width: 100%;
	min-height: 320px;
	height: 100%;
	border-radius: var(--pww-radius);
	overflow: hidden;
	border: 1px solid var(--pww-border);
}

.pww-contact__map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.pww-map__svg svg {
	display: block;
	width: 100%;
	height: auto;
}

.pww-map__svg svg path {
	fill: #ffffff !important;
	stroke: #000000 !important;
	stroke-width: 1.2;
	transition: fill 0.2s ease;
}

.pww-map__svg svg path.pww-region {
	fill: #56af2f !important;
	cursor: pointer;
}

.pww-map__svg svg path.pww-region:hover {
	fill: #173b32 !important;
}
.pww-map {
	position: relative;
	width: 100%;
	max-width: 620px;
	margin-left: auto;
}

.pww-map__tooltip {
	position: absolute;
	z-index: 50;
	display: none;
	pointer-events: none;

	padding: 10px 14px;

	background: #173b32;
	color: #fff;

	border-radius: 5px;

	transform: translate(-50%, calc(-100% - 12px));

	white-space: nowrap;
}

.pww-map__tooltip.is-visible {
	display: block;
}

.pww-map__tooltip-city {
	display: block;
	font-size: 15px;
	font-weight: 700;
}

.pww-map__tooltip-region {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	opacity: 0.75;
}

/* =========================================================
   PWW BUTTON
   ========================================================= */

.pww-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 190px;
	height: 50px;
	padding: 0 28px;

	border: 1px solid #56af2f;
	border-radius: 10px 0;

	background: transparent;
	color: #56af2f;

	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;

	overflow: hidden;
	cursor: pointer;

	transition: color 0.35s ease;
}


/*
 * Pozadina koja klizi sa leve na desnu stranu
 */
.pww-button::before {
	content: "";
	position: absolute;
	z-index: -1;

	top: 0;
	left: 0;

	width: 0;
	height: 100%;

	background: #56af2f;

	transition: width 0.35s ease;
}


/*
 * Hover
 */
.pww-button:hover,
.pww-button:focus {
	color: #ffffff;
	text-decoration: none;
}


/*
 * Animacija popunjavanja
 */
.pww-button:hover::before,
.pww-button:focus::before {
	width: 100%;
}


/*
 * Tekst mora biti iznad animirane pozadine
 */
.pww-button {
	z-index: 0;
}

.pww-button::before {
	z-index: -1;
}


/*
 * Fokus tastature
 */
.pww-button:focus-visible {
	outline: 2px solid #56af2f;
	outline-offset: 3px;
}

.pww-about__content {
	max-width: 560px;
}

.pww-about__content .pww-button {
	margin-top: 10px;
	margin-left: 50%;
	transform: translateX(-50%);
}

/* =========================================================
   PWW KONTAKT - GUTENBERG / PHP TEMPLATE
   ========================================================= */

.pww-contact-page {
	--pww-contact-green: var(--pww-ink, #123f35);
	--pww-contact-soft: #f1f5f3;
	--pww-contact-line: #dce8e2;
	--pww-contact-accent: #dceee7;

}


/* =========================================================
   HERO
   ========================================================= */

.pww-contact-hero {
	position: relative;

	padding: 5rem 0 7rem;

	background: #ffffff;
}

.pww-contact-hero__columns {
	

	margin: 0 auto !important;

	align-items: center;
}

.pww-contact-hero__content {
	position: relative;
	z-index: 2;

	padding: 3rem 2rem 3rem 0;
}

.pww-contact-eyebrow {
	display: flex;
	align-items: center;

	margin: 0 0 1.7rem;

	font-size: 0.72rem;
	font-weight: 700;

	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.pww-contact-eyebrow::after {
	content: "";

	display: inline-block;

	width: 50px;
	height: 2px;

	margin-left: 1rem;

	background: var(--pww-contact-accent);
}

.pww-contact-title {
	margin: 0 !important;

	font-size: clamp(4rem, 7vw, 7.8rem) !important;
	font-weight: 300 !important;

	line-height: 0.88 !important;
	letter-spacing: -0.065em !important;

	color: var(--pww-contact-green);
}

.pww-contact-title strong {
	font-weight: 800;
}

.pww-contact-lead {
	max-width: 520px;

	margin: 2.7rem 0 0;

	font-size: 1.05rem;
	line-height: 1.8;
}


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

.pww-contact-hero__image-column {
	position: relative;

	padding: 0 !important;
}

.pww-contact-hero__image-column::before {
	content: "";

	position: absolute;

	top: -2rem;
	right: -2rem;

	width: 72%;
	height: 90%;

	background: var(--pww-contact-soft);

	border-radius: 2rem 2rem 0 2rem;
}

.pww-contact-hero__image {
	position: relative;
	z-index: 2;

	margin: 0 !important;

	overflow: hidden;

	border-radius: 0 2rem 2rem 2rem;
}

.pww-contact-hero__image img {
	display: block;

	width: 100% !important;
	height: 500px !important;

	object-fit: cover;
}

.pww-contact-hero__image-placeholder {
	width: 100%;
	height: 500px;

	background: var(--pww-contact-soft);
}


/* =========================================================
   UVOD
   ========================================================= */

.pww-contact-intro-section {
	padding: 8rem 0 7rem;

	background: var(--pww-contact-soft);
}

.pww-contact-intro-columns {
	max-width: 1100px;

	margin: 0 auto !important;

	align-items: start;
}

.pww-contact-section-label,
.pww-members-label {
	margin: 0 0 1rem;

	font-size: 0.7rem;
	font-weight: 700;

	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.pww-contact-section-title {
	margin: 0 !important;

	font-size: clamp(2.8rem, 4.5vw, 5rem) !important;
	font-weight: 700 !important;

	line-height: 0.95 !important;
	letter-spacing: -0.05em !important;
}

.pww-contact-intro-text {
	max-width: 720px;
}

.pww-contact-intro-text p {
	margin: 0 0 1.3rem;

	font-size: 1.08rem;
	line-height: 1.85;
}


/* =========================================================
   ČLANICE
   ========================================================= */

.pww-members-section {
	padding: 8rem 0 10rem;
}

.pww-members-label {
	margin-bottom: 1.2rem;
}

.pww-members-title {
	margin: 0 0 4rem !important;

	font-size: clamp(2rem, 5vw, 3.5rem) !important;
	font-weight: 700 !important;

	line-height: 0.9 !important;
	letter-spacing: -0.055em !important;
}


/* =========================================================
   KARTICA ČLANICE
   ========================================================= */

.pww-member-card {
	max-width: 1100px;

	margin: 0 auto 1.6rem !important;
	padding: 0 !important;

	background: #ffffff;

	border: 1px solid var(--pww-contact-line);

	border-radius: 1.5rem 0;

	overflow: hidden;

	box-shadow: 0 10px 35px rgba(18, 63, 53, 0.045);

	transition:
		transform 0.3s ease,
		box-shadow 0.3s ease;
}

.pww-member-card:hover {
	transform: translateY(-3px);

	box-shadow: 0 18px 45px rgba(18, 63, 53, 0.09);
}

.pww-member-card__columns {
	margin: 0 !important;
}


/* =========================================================
   SLIKA ČLANICE
   ========================================================= */

.pww-member-image-column {
	padding: 0 !important;
}

.pww-member-image-link {
	display: block;

	width: 100%;
	height: 100%;
}

.pww-member-image {
	height: 180px;

	margin: 0 !important;

	overflow: hidden;
}

.pww-member-image img {
	display: block;

	width: 100% !important;
	height: 180px !important;

	object-fit: cover;

	transition: transform 0.5s ease;
}

.pww-member-card:hover .pww-member-image img {
	transform: scale(1.035);
}

.pww-member-image--empty {
	display: flex;

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

	background: var(--pww-contact-soft);
}

.pww-member-image--empty span {
	padding: 1rem;

	text-align: center;

	font-size: 0.8rem;
	font-weight: 600;
}


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

.pww-member-info {
	padding: 2rem 2.5rem !important;
}

.pww-member-type {
	margin: 0 0 0.55rem;

	font-size: 0.62rem;
	font-weight: 700;

	letter-spacing: 0.1em;
	text-transform: uppercase;

	opacity: 0.6;
}

.pww-member-info h3 {
	margin: 0 !important;

	font-size: 1.35rem !important;
	font-weight: 700 !important;

	line-height: 1.1 !important;
}

.pww-member-info h3 a {
	color: var(--pww-contact-green);
	text-decoration: none;
}

.pww-member-info h3 a:hover {
	text-decoration: underline;
}

.pww-member-address {
	margin: 0.65rem 0 0 !important;

	font-size: 0.82rem;

	line-height: 1.5;

	opacity: 0.65;
}


/* =========================================================
   KONTAKT PODACI
   ========================================================= */

.pww-member-contact {
	padding: 2rem 2rem 2rem 1rem !important;
}

.pww-member-contact p {
	margin: 0.45rem 0 !important;
}

.pww-member-contact a {
	display: flex;

	align-items: center;

	gap: 0.7rem;

	font-size: 0.82rem;
	font-weight: 600;


	text-decoration: none;

	word-break: break-word;
}

.pww-member-contact a:hover {
	text-decoration: underline;
}

.pww-contact-icon {
	display: inline-flex;

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

	flex: 0 0 auto;

	width: 25px;
	height: 25px;

	font-size: 0.72rem;

	border: 1px solid var(--pww-contact-line);

	border-radius: 50%;
}


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

@media (max-width: 991px) {

	.pww-contact-hero {
		padding: 4rem 0 6rem;
	}

	.pww-contact-hero__content {
		padding-right: 1rem;
	}

	.pww-contact-title {
		font-size: clamp(3.8rem, 9vw, 6rem) !important;
	}

	.pww-contact-hero__image img,
	.pww-contact-hero__image-placeholder {
		height: 420px !important;
	}

	.pww-contact-intro-section {
		padding: 6rem 0;
	}

	.pww-members-section {
		padding: 6rem 0 8rem;
	}

	.pww-member-info {
		padding: 1.5rem !important;
	}

	.pww-member-contact {
		padding: 1.5rem !important;
	}

}


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

@media (max-width: 767px) {

	.pww-contact-hero {
		padding: 3rem 0 5rem;
	}

	.pww-contact-hero__columns {
		display: flex !important;

		flex-direction: column;
	}

	.pww-contact-hero__content {
		width: 100% !important;

		padding: 0 0 3rem;
	}

	.pww-contact-title {
		font-size: clamp(3.5rem, 16vw, 5rem) !important;
	}

	.pww-contact-lead {
		font-size: 0.95rem;
		line-height: 1.75;
	}

	.pww-contact-hero__image-column {
		width: 100% !important;
	}

	.pww-contact-hero__image-column::before {
		top: -1rem;
		right: -1rem;
	}

	.pww-contact-hero__image img,
	.pww-contact-hero__image-placeholder {
		height: 300px !important;
	}

	.pww-contact-intro-section {
		padding: 5rem 0;
	}

	.pww-contact-intro-columns {
		display: flex !important;

		flex-direction: column;
	}

	.pww-contact-section-title {
		margin-bottom: 2rem !important;

		font-size: 3.2rem !important;
	}

	.pww-contact-intro-text p {
		font-size: 0.95rem;
	}

	.pww-members-section {
		padding: 5rem 0 6rem;
	}

	.pww-members-title {
		margin-bottom: 3rem !important;

		font-size: 3.2rem !important;
	}

	.pww-member-card {
		margin-bottom: 1.4rem !important;
	}

	.pww-member-card__columns {
		display: flex !important;

		flex-direction: column;
	}

	.pww-member-image-column,
	.pww-member-info,
	.pww-member-contact {
		width: 100% !important;
	}

	.pww-member-image {
		height: 230px;
	}

	.pww-member-image img {
		height: 230px !important;
	}

	.pww-member-info {
		padding: 1.5rem 1.5rem 0.7rem !important;
	}

	.pww-member-contact {
		padding: 0.5rem 1.5rem 1.5rem !important;
	}

	.pww-member-contact p {
		margin: 0.55rem 0 !important;
	}

}


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

@media (max-width: 400px) {

	.pww-contact-title {
		font-size: 3.3rem !important;
	}

	.pww-contact-section-title,
	.pww-members-title {
		font-size: 2.8rem !important;
	}

	.pww-contact-hero__image img,
	.pww-contact-hero__image-placeholder {
		height: 250px !important;
	}

}

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

.site-footer {
	background: #173b32;
	color: #fff;
}


/* =========================================================
   GLAVNI DEO
========================================================= */

.pww-footer-main {
	background: #173b32;
}


/* =========================================================
   LEVA KOLONA
========================================================= */

.pww-footer-left {
	padding: 3.5rem 3rem 3.5rem 0;
	border-right: 1px solid rgba(255, 255, 255, 0.12);
	min-height: 100%;
}


/* LOGO */

.footer-company__logo img {
	max-width: 190px;
	height: auto;
	display: block;
}

.footer-company__logo a {
	display: inline-block;
}


/* OPIS */

.footer-company__description {
	max-width: 390px;
	margin-bottom: 3rem;
}

.footer-company__description p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.8;
	color: rgba(255, 255, 255, 0.72);
}


/* =========================================================
   DOSTUPNOST
========================================================= */

.pww-footer-availability {
	margin-bottom: 3rem;
}

.pww-footer-availability h4,
.pww-footer-social h4 {
	margin: 0 0 0.8rem;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
}

.pww-footer-availability p {
	margin: 0;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.72);
}


/* =========================================================
   SOCIAL
========================================================= */

.pww-footer-social__links {
	display: flex;
	gap: 0.6rem;
}

.pww-footer-social__links a {
	width: 36px;
	height: 36px;

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

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

	color: #fff;
	text-decoration: none;

	font-size: 0.9rem;
	font-weight: 600;

	transition: all 0.25s ease;
}

.pww-footer-social__links a:hover {
	background: #fff;
	color: #173b32;
}


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

.pww-footer-right {
	border-left: 0;
}


/* =========================================================
   GORNJE KOLONE
========================================================= */

.pww-footer-top {
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}


/* Svaka od tri kolone */

.pww-footer-column {
	padding: 3.5rem 2.5rem;
	min-height: 365px;
}


/* Vertikalne linije između kolona */

.pww-footer-top > div:not(:last-child) .pww-footer-column {
	border-right: 1px solid rgba(255, 255, 255, 0.12);
}


/* =========================================================
   NASLOVI
========================================================= */

.site-footer .footer-title {
	margin: 0 0 2.2rem;

	font-size: 1.15rem;
	line-height: 1.2;

	font-weight: 500;

	color: #fff;
}


/* =========================================================
   LINKOVI
========================================================= */

.site-footer .footer-links ul {
	display: flex;
	flex-direction: column;
	gap: 1.35rem;
}

.site-footer .footer-links a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;

	font-size: 0.95rem;
	line-height: 1.5;

	transition: color 0.25s ease;
}

.site-footer .footer-links a:hover {
	color: #fff;
}


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

.footer-contact__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;

	margin-bottom: 1.35rem;
}

.footer-contact__icon {
	flex: 0 0 22px;

	width: 22px;

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

	color: rgba(255, 255, 255, 0.8);
	font-size: 1rem;
}

.footer-contact__content {
	font-size: 0.95rem;
	line-height: 1.6;
}

.footer-contact__content a {
	color: rgba(255, 255, 255, 0.72);
	text-decoration: none;

	transition: color 0.25s ease;
}

.footer-contact__content a:hover {
	color: #fff;
}


/* =========================================================
   DONJA DESNA CELIJA
   UMESTO NEWSLETTERA
========================================================= */

.pww-footer-contact-button {
	min-height: 150px;

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

	padding: 2.5rem;

}


/* Dugme koristi postojeću pww-button klasu */

.pww-footer-contact-button .pww-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	text-decoration: none;
}


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

.pww-footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 1.7rem 0;
}

.pww-footer-bottom span,
.pww-footer-bottom a {
	color: rgba(255, 255, 255, 0.68);
	font-size: 0.9rem;
	text-decoration: none;
}

.pww-footer-bottom a {
	transition: color 0.25s ease;
}

.pww-footer-bottom a:hover {
	color: #fff;
}


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

@media (max-width: 991.98px) {

	.pww-footer-left {
		padding: 3rem 0;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.pww-footer-column {
		padding: 3rem 1.5rem;
		min-height: auto;
	}

	.pww-footer-top > div:not(:last-child) .pww-footer-column {
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	}

	.pww-footer-contact-button {
		min-height: 130px;
		padding: 2rem 1.5rem;
	}

}


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

@media (max-width: 767.98px) {

	.pww-footer-left {
		padding: 2.5rem 0;
	}

	.footer-company__description {
		max-width: 100%;
		margin-bottom: 2.5rem;
	}

	.pww-footer-availability {
		margin-bottom: 2.5rem;
	}

	.pww-footer-column {
		padding: 2.5rem 0;
	}

	.site-footer .footer-title {
		margin-bottom: 1.5rem;
	}

	.pww-footer-contact-button {
		min-height: 110px;
		padding: 2rem 0;
		justify-content: flex-start;
	}

	.pww-footer-bottom {
		padding: 1.5rem 0;
	}

	.pww-footer-bottom .text-md-end {
		text-align: left !important;
	}

}