/*
Theme Name:   DermaPlus
Theme URI:    https://www.bozooart.com
Author:       BozooArt
Author URI:   https://www.bozooart.com
Version:      1.0.0
*/
:root {
    --green1: #a6ce39;
    --green2: #62bb46;
    --green3: #007534;
    --light-green: #D9EFD3;
    --gray: #666;
    --steel: #527282;
    --light-gray: #F2F2F7;
    --anim: all ease 0.5s;
    --slow: all ease 0.7s;
    --sign: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%3C!--%20Generator%3A%20Adobe%20Illustrator%2026.1.0%2C%20SVG%20Export%20Plug-In%20.%20SVG%20Version%3A%206.00%20Build%200)%20%20--%3E%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2064%2064%22%20style%3D%22enable-background%3Anew%200%200%2064%2064%3B%22%20xml%3Aspace%3D%22preserve%22%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E.st0%7Bfill%3A%2362BB46%3B%7D.st1%7Bfill%3A%23A6CE39%3B%7D.st2%7Bfill%3A%23007534%3B%7D%3C%2Fstyle%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M32%2C32l1.2%2C1.2L32%2C34.7c-5.7%2C7-5.7%2C17.1%2C0%2C24.1V64l-1.3-1.3c-4.4-4.4-6.6-10.2-6.6-16c0-5.8%2C2.2-11.6%2C6.6-16L32%2C32L32%2C32z%22%2F%3E%3Cpath%20class%3D%22st0%22%20d%3D%22M32%2C32l1.2%2C1.2l1.5-1.2c7-5.7%2C17.1-5.7%2C24.1%2C0H64l-1.3-1.3c-4.4-4.4-10.2-6.6-16-6.6c-5.8%2C0-11.6%2C2.2-16%2C6.6L32%2C32L32%2C32z%22%2F%3E%3Cpath%20class%3D%22st1%22%20d%3D%22M32%2C32l-1.2%2C1.2l1.2%2C1.5c5.7%2C7%2C5.7%2C17.1%2C0%2C24.1V64l1.3-1.3c4.4-4.4%2C6.6-10.2%2C6.6-16c0-5.8-2.2-11.6-6.6-16L32%2C32L32%2C32z%22%2F%3E%3Cpath%20class%3D%22st1%22%20d%3D%22M32%2C32l1.2-1.2l1.5%2C1.2c7%2C5.7%2C17.1%2C5.7%2C24.1%2C0H64l-1.3%2C1.3c-4.4%2C4.4-10.2%2C6.6-16%2C6.6c-5.8%2C0-11.6-2.2-16-6.6L32%2C32L32%2C32z%22%2F%3E%3Cpath%20class%3D%22st2%22%20d%3D%22M32%2C32l-1.2-1.2l1.2-1.5c5.7-7%2C5.7-17.1%2C0-24.1V0l1.3%2C1.3c4.4%2C4.4%2C6.6%2C10.2%2C6.6%2C16c0%2C5.8-2.2%2C11.6-6.6%2C16L32%2C32z%22%2F%3E%3Cpath%20class%3D%22st2%22%20d%3D%22M32%2C32l-1.2-1.2L29.3%2C32c-7%2C5.7-17.1%2C5.7-24.1%2C0H0l1.3%2C1.3c4.4%2C4.4%2C10.2%2C6.6%2C16%2C6.6c5.8%2C0%2C11.6-2.2%2C16-6.6L32%2C32L32%2C32z%22%2F%3E%3Cpath%20class%3D%22st1%22%20d%3D%22M27.7%2C17.7L27.7%2C17.7c0-8.6-1-10.9-1-10.9c-1.7%2C3.3-2.6%2C6.9-2.6%2C10.5c0%2C2.9%2C0.5%2C5.8%2C1.6%2C8.5c-2.7-1.1-5.6-1.6-8.5-1.6c-3.6%2C0-7.2%2C0.9-10.5%2C2.6c0%2C0%2C2.4%2C1%2C10.9%2C1c0%2C0%2C0%2C0%2C0%2C0c3.2%2C0.1%2C6.4%2C1%2C9.3%2C2.7c1.3-1%2C2.4-2.1%2C3.4-3.4C28.7%2C24.1%2C27.8%2C20.9%2C27.7%2C17.7L27.7%2C17.7z%22%2F%3E%3C%2Fsvg%3E');
    --chev: url("data:image/svg+xml,%3Csvg%20fill%3D%22%23dbb7b3%22%20height%3D%22512%22%20viewBox%3D%220%200%2024%2024%22%20width%3D%22512%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22fi_8912173%22%3E%3Cpath%20clip-rule%3D%22evenodd%22%20d%3D%22m8.29289%205.29289c.39053-.39052%201.02369-.39052%201.41422%200l5.99999%206.00001c.3905.3905.3905%201.0237%200%201.4142l-5.99999%206c-.39053.3905-1.02369.3905-1.41422%200-.39052-.3905-.39052-1.0237%200-1.4142l5.29291-5.2929-5.29291-5.29289c-.39052-.39053-.39052-1.02369%200-1.41422z%22%20fill%3D%22rgb(0%2C0%2C0)%22%20fill-rule%3D%22evenodd%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E");
    --check: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTciIGhlaWdodD0iMTciIHZpZXdCb3g9IjAgMCAxNyAxNyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzExNV8xNDA0KSI+CjxwYXRoIGQ9Ik03LjI2Mjg0IDE1LjM2ODdDNy4xMDc3MSAxNS41NDkgNi44Mzk0IDE1LjU2MjcgNi42NjY2MSAxNS4zOTkyTDAuMTM0Njg3IDkuMjE2OTdDLTAuMDM4MTA0OCA5LjA1MzQ1IC0wLjA0NTYxNzUgOC43NzgzMSAwLjExNzgwNyA4LjYwNTUxTDIuMTk4OTEgNi40MDY0NUMyLjM2MjQ0IDYuMjMzNjYgMi42Mzc1OCA2LjIyNjE0IDIuODEwMzcgNi4zODk1N0w2LjM3ODUgOS43NjY0N0M2LjU1MTI5IDkuOTI5OTkgNi44MTk2IDkuOTE2MjMgNi45NzQ3MyA5LjczNTkzTDEzLjk0NTYgMS42MzYzOUMxNC4xMDA3IDEuNDU2MDkgMTQuMzc1MyAxLjQzNTUgMTQuNTU1NSAxLjU5MDczTDE2Ljg1MDEgMy41NjU2OEMxNy4wMzA0IDMuNzIwODIgMTcuMDUxIDMuOTk1MzcgMTYuODk1NyA0LjE3NTY3TDcuMjYyODQgMTUuMzY4N1oiIGZpbGw9ImJsYWNrIi8+CjwvZz4KPGRlZnM+CjxjbGlwUGF0aCBpZD0iY2xpcDBfMTE1XzE0MDQiPgo8cmVjdCB3aWR0aD0iMTciIGhlaWdodD0iMTciIGZpbGw9IndoaXRlIi8+CjwvY2xpcFBhdGg+CjwvZGVmcz4KPC9zdmc+Cg==");
    --white-arrow: url("data:image/svg+xml,%3Csvg fill='%23fff' version='1.1' height='19'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M506.134,241.843c-0.006-0.006-0.011-0.013-0.018-0.019l-104.504-104c-7.829-7.791-20.492-7.762-28.285,0.068 c-7.792,7.829-7.762,20.492,0.067,28.284L443.558,236H20c-11.046,0-20,8.954-20,20c0,11.046,8.954,20,20,20h423.557 l-70.162,69.824c-7.829,7.792-7.859,20.455-0.067,28.284c7.793,7.831,20.457,7.858,28.285,0.068l104.504-104 c0.006-0.006,0.011-0.013,0.018-0.019C513.968,262.339,513.943,249.635,506.134,241.843z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
    --gray-arrow: url("data:image/svg+xml,%3Csvg fill='%23ccc' version='1.1' height='19'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 512 512' style='enable-background:new 0 0 512 512;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M506.134,241.843c-0.006-0.006-0.011-0.013-0.018-0.019l-104.504-104c-7.829-7.791-20.492-7.762-28.285,0.068 c-7.792,7.829-7.762,20.492,0.067,28.284L443.558,236H20c-11.046,0-20,8.954-20,20c0,11.046,8.954,20,20,20h423.557 l-70.162,69.824c-7.829,7.792-7.859,20.455-0.067,28.284c7.793,7.831,20.457,7.858,28.285,0.068l104.504-104 c0.006-0.006,0.011-0.013,0.018-0.019C513.968,262.339,513.943,249.635,506.134,241.843z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E");
    --white-check: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjIwIiB3aWR0aD0iMjAiIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGQ9Ik0xMCAwQzQuNDg2MjIgMCAwIDQuNDg2MjIgMCAxMEMwIDE1LjUxMzggNC40ODYyMiAyMCAxMCAyMEMxNS41MTM4IDIwIDIwIDE1LjUxMzggMjAgMTBDMjAgNC40ODYyMiAxNS41MTM4IDAgMTAgMFpNMTUuNTg5IDcuMzY4NDJMOS4xOTggMTMuNzA5M0M4LjgyMjA2IDE0LjA4NTIgOC4yMjA1NSAxNC4xMTAzIDcuODE5NTUgMTMuNzM0M0w0LjQzNjA5IDEwLjY1MTZDNC4wMzUwOSAxMC4yNzU3IDQuMDEwMDMgOS42NDkxMiA0LjM2MDkgOS4yNDgxMkM0LjczNjg0IDguODQ3MTIgNS4zNjM0MSA4LjgyMjA2IDUuNzY0NDEgOS4xOThMOC40NDYxMiAxMS42NTQxTDE0LjE2MDQgNS45Mzk4NUMxNC41NjE0IDUuNTM4ODUgMTUuMTg4IDUuNTM4ODUgMTUuNTg5IDUuOTM5ODVDMTUuOTkgNi4zNDA4NSAxNS45OSA2Ljk2NzQyIDE1LjU4OSA3LjM2ODQyWiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cik7");
    --green-circle-arrow: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjU5IiB3aWR0aD0iNTkiIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCA1OSA1OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxjaXJjbGUgY3g9IjI5LjUiIGN5PSIyOS41IiBmaWxsPSIjNjFCQjQ2IiByPSIyOS41Ii8+Cgk8cGF0aCBkPSJNMjIuNTEyIDIzLjM5NTdWMjQuNzkxNEgzMy44MzRMMjcuNDA4IDMwLjcyMzFMMjEgMzYuNjM4MkwyMi4wNjIgMzcuNjE4NUwyMy4xMjQgMzguNTk4OEwyOS41NSAzMi42NjcxTDM1Ljk3NiAyNi43MzU0VjM3LjIwMzFIMzlWMjJIMjIuNTEyVjIzLjM5NTdaIiBmaWxsPSJ3aGl0ZSIgZmlsbFJ1bGU9ImV2ZW5vZGQiLz4KPC9zdmc+");
    --white-circle-arrow: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjMyIiB3aWR0aD0iMzIiIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAzMiAzMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxjaXJjbGUgY3g9IjE2IiBjeT0iMTYiIGZpbGw9IndoaXRlIiByPSIxNiIvPgoJPGcgY2xpcFBhdGg9InVybCgjY2xpcDBfMjY5XzIzNykiPgoJCTxwYXRoIGQ9Ik0xMS44NCAxMS44NFYxMi42OEgxOC4xM0wxNC41NiAxNi4yNUwxMSAxOS44MUwxMS41OSAyMC40TDEyLjE4IDIwLjk5TDE1Ljc1IDE3LjQyTDE5LjMyIDEzLjg1VjIwLjE1SDIxVjExSDExLjg0VjExLjg0WiIgZmlsbD0iIzYxQkI0NiIgZmlsbFJ1bGU9ImV2ZW5vZGQiLz4KCTwvZz4KCTxkZWZzPgoJCTxjbGlwUGF0aCBpZD0iY2xpcDBfMjY5XzIzNyI+CgkJCTxyZWN0IGhlaWdodD0iMTAiIHdpZHRoPSIxMCIgZmlsbD0id2hpdGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDExIDExKSIvPgoJCTwvY2xpcFBhdGg+Cgk8L2RlZnM+Cjwvc3ZnPg==");
    --white-chevron: url("data:image/svg+xml,%3Csvg id='fi_2989988' fill='%23fff' viewBox='0 0 6.3499999 6.3500002' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cg id='layer1' transform='translate(0 -290.65)'%3E%3Cpath id='path9429' d='m2.2580394 291.96502a.26460982.26460982 0 0 0 -.1741496.46871l1.6190225 1.38699-1.6190225 1.38648a.26460982.26460982 0 1 0 .3436483.40049l1.8536335-1.58595a.26460982.26460982 0 0 0 0-.40256l-1.8536335-1.5875a.26460982.26460982 0 0 0 -.1694987-.0667z' font-variant-ligatures='normal' font-variant-position='normal' font-variant-caps='normal' font-variant-numeric='normal' font-variant-alternates='normal' font-feature-settings='normal' text-indent='0' text-align='start' text-decoration-line='none' text-decoration-style='solid' text-decoration-color='rgb(0,0,0)' text-transform='none' text-orientation='mixed' white-space='normal' shape-padding='0' isolation='auto' mix-blend-mode='normal' solid-color='rgb(0,0,0)' solid-opacity='1' vector-effect='none'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

/* Resetiranje osnovnih stilova */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #000;
    margin: 0;
    padding: 0;
    background: #fff;
    overflow-x: hidden;
}

/* Stilovi za naslove */
h1, h2, h3, h4, h5, h6 {
    margin: 0px;
    font-weight: 400;
    font-family: 'Poppins', sans-serif;
}

h1 {
    font-size: 3.5em;
    font-weight: 500;
    color: var(--navy)
}

h2 {
    font-size: 2em;
    line-height: 1.1em
}

h3 {
    font-size: 1.75em;
}

h4 {
    font-size: 1.5em;
}

h5 {
    font-size: 1.25em;
}

h6 {
    font-size: 1em;
}

a {
    text-decoration: none;
    transition: var(--anim);
    color: #000;
}

ul {
    margin: 0;
    padding: 0;
    list-style-type: none
}

/* Stilovi za slike */
img {
    max-width: 100%;
    height: auto;
}

body hr, .elementor hr {
    background: var(--rosy) !important;
    height: 1px;
    border: none;
    margin: 2em auto !important;
    width: 50%;
}

/* Stilovi za zaglavlje */
#main {
    background: #fff;
}

.container {
    width: 1300px;
    margin: 0 auto;
    position: relative;
    padding: 0 30px;
}
.servies-section .container,
.blog .container { width: 1600px;  }

/*header*/
.home #header {
    background: #fff;
}

#header {
    padding: 0 3%;
    height: 100px;
    display: flex;
    width: 100%;
    align-items: center;
    transition: var(--anim);
}

.header-wrapper {
    display: grid;
    grid-template-columns: 30% 40% 30%;
    align-items: center;
    width: 100%
}

.site-branding {
    display: flex;
    align-items: center;
}

.site-branding img {
    width: 250px;
    display: block;
}

#primary-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    align-items: center;
    margin-top: 3px
}

#primary-menu li {
    display: inline;
    font-weight: 500
}

#primary-menu li a {
    margin-right: 60px;
    position: relative;
    text-transform: uppercase;
}

#primary-menu li a:hover, #primary-menu .current-post-ancestor a, #primary-menu li.current-menu-item a, .single-djelatnost .menu-item-3926 a, .single-tim .menu-item-4030 a, .single-tim .menu-item-4021 a {
    color: var(--green3);
}

.single-djelatnost #primary-menu li.menu-item-3926 a::after, .single-tim #primary-menu li.menu-item-4030 a::after, .single-tim #primary-menu li.menu-item-4021 a::after {
    width: 100%;
}

.single-tim .breadcrumbs {
    display: none
}

.single-tim .page-title .position {
    margin-bottom: 0
}

#primary-menu li:last-child a {
    margin: 0;
}

#primary-menu li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: var(--green3);
    transition: var(--anim);
}

#primary-menu .current-post-ancestor a, #primary-menu li a:hover::after {
    width: 100%;
}

#primary-menu .current-post-ancestor a, #primary-menu li.current-menu-item a::after {
    width: 100%;
}

#primary-menu .sub-menu {
    display: none
}

#site-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav-order {
    display: flex;
    justify-content: end;
    align-items: center;
}

/* footer */
#footer {
    background: var(--green2) url('img/footer-bg.png') center no-repeat;
    color: #fff;
    padding: 100px 5% 50px;
    justify-content: center;
    min-height: 500px;
}

#footer .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 80px;
   max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.footer-item h4 {
    text-transform: uppercase;
    font: 1.4rem 'Poppins', sans-serif;
    font-weight: 700;
    letter-spacing: .1em;
    margin-bottom: 25px;
    border-bottom: 2px solid rgba(256 256 256 / .2); 
    padding-bottom: 5px; 
}



#footer li {
    text-align: left;
    font-weight: normal; font-weight: 500;
    margin-bottom: 5px; ; font-size: 1.06rem;
}

#footer li a {
    color: #fff
    
}

#footer li a:hover {
    color: #000;
}

#footer .social a:hover svg {
    fill: #000
}

.footer-bottom {
    background: #fff;
}

.footer-logo {
    justify-content: center;
    align-items: center;
}

.footer-logo img {
    margin-bottom: 5px
}

.footer-logo li a {
    color: #fff;
}

.footer-logo ul {
    margin-left: 100px;
}

.footer-logo .badges {
    margin-top: 20px;
    margin-left: 100px;
}

.footer-logo .badges img {
    width: 70px; transition: var(--anim);
    height: 70px; border-radius: 50%;
}

.footer-logo .badges img:first-child {
    margin-right: 30px
}
.footer-logo .badges img:hover { opacity: .9; margin-bottom: 5px; box-shadow: 0px 0px 5px rgba(0 0 0) }
.footer-item {
    margin-top: 30px;
}

.footer-bottom {
    color: var(--gray);
    font-size: .81rem;
    padding: 25px 50px;
    font-weight: 300;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.footer-bottom span {
    margin: 0 10px;
}

.footer-bottom a {
    color: var(--gray);
    border-bottom: 1px solid transparent;
}

.footer-bottom a:hover {
    border-bottom: 1px solid #000 ;
    color: #000
}

.footer-bottom span:last-of-type {
    display: none
}

.footer-bottom .webhero {
    margin-left: auto;
}

#footer .social {
    margin-top: 10px;
}

#footer .social svg {
    fill: #fff;
    height: 60px;
    width: 30px; 
    margin-right: 30px; 
    transition: var(--anim)
}
#footer .social a:hover svg { fill: var(--green3) }

.footer-menu li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: var(--rosy);
    transition: var(--anim)
}

.mobile-menu {
    display: none;
}

.mobile-nav {
    opacity: 0;
    display: none;
}

.burger-container {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 50px;
    cursor: pointer;
    z-index: 10000 !important;
    transform: rotate(0deg);
    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.burger-container #burger {
    width: 40px;
    height: 8px;
    position: relative;
    display: block;
    margin: -4px auto 0;
    top: 50%;
}

.burger-container #burger .bar {
    width: 100%;
    height: 3px;
    display: block;
    position: relative;
    background: #000;
    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
}

.burger-container #burger .bar.topBar {
    transform: translateY(0px) rotate(0deg);
}

.burger-container #burger .bar.btmBar {
    transform: translateY(6px) rotate(0deg);
}

.mobile-menu.active {
    height: 100%;
    transition: all 0.3s ease-in, background 0.5s ease-in;
    transition-delay: 0.25s;
}

.mobile-menu.active .burger-container {
    transform: rotate(90deg);
}

.mobile-menu.active .burger-container #burger .bar {
    transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition-delay: 0.2s;
}

.mobile-menu.active .burger-container #burger .bar.topBar {
    transform: translateY(4px) rotate(45deg);
}

.mobile-menu.active .burger-container #burger .bar.btmBar {
    transform: translateY(2px) rotate(-45deg);
}

body.home::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 600px;
    background: linear-gradient(to bottom, #D5EDCD, #FEFFFE);
    z-index: -1;
}

.hero {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    height: calc(100vh - 110px);
    background: var(--green2);
}

.hero .hero-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 10%;
    background: url('img/logo-bg.png') no-repeat center;
    background-size: 85%;
    border-right: 1px solid var(--green1);
    min-height: 800px;
}

.hero .hero-box-inner {
}

.hero .hero-grid .img {
    background: url('img/lena-kotrulja-hero-2.jpg') no-repeat center -70px;
    background-size: cover;
}

.hero .hero-box h1 {
    font-size: 2.8em;
    font-weight: 500;
    text-align: center;
    color: #fff;
    text-shadow: 0px 1px 0 var(--green3)
}

.hero .entry-title {
    margin-bottom: 50px
}

.entry-title {
    color: var(--green2)
}

.entry-title strong {
    color: var(--green3);
    display: block
}

.entry-title span {
    color: var(--green3);
}

.hero .badges {
    text-align: center;
}

.hero .badges img {
    width: 80px;
    margin: 10px 20px;
    border-radius: 50%
}

.hero .badges img:hover {
    box-shadow: 0 0 10px rgba(0 0 0 / .3)
}

.hero .entry-text {
    width: 90%;
    margin: 0 auto;
    text-align: center;
    font-size: .9rem;
    color: #fff;
    font-size: 1em
}

.hero .entry-title span {
    display: block;
}

.featured-bar {
    background: linear-gradient(90deg, #007534 0%, #61bb45 50%, #a6ce39);
    width: 100%;
    z-index: 100;
    box-shadow: 0 -3px 3px rgba(0 0 0 / .3)
}

.featured-bar .container {
    display: flex;
    flex-wrap: wrap;
}

.featured-bar .quick-links {
    flex: 1;
    display: flex;
}

.featured-bar .quick-links a {
    flex: 1;
    padding: 20px 20px 20px 40px;
}

.featured-bar .quick-links a:nth-child(2) {
    border-left: 1px solid var(--green3);
    border-right: 1px solid var(--green3)
}



.featured-bar .fl {
    display: flex;
    align-items: center;
    text-decoration: none;
    gap: 20px;
}

.featured-bar .fl .icon {
    background: #fff;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    box-shadow: inset 0 2px 2px rgba(0 0 0 / .5)
}

.featured-bar .fl .icon img {
    width: 40px;
}

.featured-bar .title {
    text-transform: uppercase;
}

.featured-bar .title strong {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: .05rem
}

.featured-bar .description {
    font-size: 1rem;
    display: block;
    color: var(--green3);
    transition: var(--anim)
}

.featured-bar a:first-child .description {
    color: var(--green2)
}

.featured-bar .quick-links a:hover {
    background: var(--green3)
}

.featured-bar .quick-links a:hover .description {
    color: #fff;
    margin-left: 10px;
    position: relative;
}

section {
    padding: 75px 0 150px
}

.team {
    background: var(--light-gray); 
    background-size: cover;
    min-height: 750px;
    width: 100%
}

.section-title {
    text-align: center;
    padding: 20px 0;
}

.section-title .subtitle {
    text-transform: uppercase;
    position: relative;
    font-weight: 700;
    font: 1rem 'Poppins', sans-serif;
}

.section-title .subtitle:before {
    content: '';
    width: 40px;
    height: 40px;
    background: url('img/sign.svg');
    background-size: cover !important;
    display: inline-block;
    margin-right: 20px;
    position: relative;
    top: 10px;
}

.section-title h2 {
    margin: 30px 0;
    font-size: 2.812rem
}

.section-title .description {
}

.offer-item {
    display: flex;
    flex-direction: column;
    height: 100%
}

.offer-item a {
    background: #fff;
    border-radius: 10px;
    padding: 20px 50px 50px 50px;
    display: flex;
    flex-direction: column;
    flex: 1;

}

.offer-item a:hover {
    background: var(--light-green);
}

.offer-item .offer-icon {
    width: 45px;
    height: 45px;
    position: absolute;
    margin: 20px 0px auto 0;
    right: 40px; 
    opacity: .5; 
    transition: var(--anim)
}
.offer-item a:hover .offer-icon { opacity: 1; right: 50px }

.offer-item h3 {
    margin: 0;
    line-height: 1.3em;
    margin: 10px 60px 10px 0px;
    color: #000;
    font-size: 1.7rem;
    height: 70px;
    display: flex;
    align-items: center;
    transition: var(--anim);
    color: var(--green2);
    padding: 20px 0; 
}
.offer-item a:hover h3 { color: #000;  }
.offer-item .entry-lead {
    color: #000;
    font-size: 1.2rem;
    border-top: 1px solid rgba(0 0 0 / .2);
    padding-top: 20px;
}

.offer-slider {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 30px
}

.latest-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 120px;
}

.archive-posts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 120px;
}

.latest-post-item img {
    border-radius: 30px;
}

.archive-posts-grid h2  { font-size: 1.5rem; line-height: 1.4em; margin-top: 15px;padding-bottom: 5px;  border-bottom: 1px solid var(--light-gray); margin-bottom: 5px;    }
.archive-posts-grid h2 a { color: var(--green2);  }
.archive-posts-grid h2 a:hover { color: #000; }

.latest-post-item h3 {
    margin: 10px 0 0;
    line-height: 1.1em;
    margin-bottom: 10px;
    
    display: flex;
    align-items: end;
    border-bottom: 1px solid var(--light-green);
    padding-bottom: 10px;
}
.home .latest-post-item img { margin-bottom: 10px;  }
.home .latest-post-item h3 { min-height: 63px; }
.home .latest-post-item  .entry-leader { font-size: 1.1rem }


.latest-post-item h3 a {
    color: var(--green2);
}

.latest-post-item h3 a:hover {
    color: #000;
}

.latest-posts-grid .latest-post-item .latest-post-thumbnail img {
    transition: transform 0.3s ease-in-out;
}

.latest-posts-grid .latest-post-item .latest-post-thumbnail:hover img {
    transform: scale(1.05);
}

.cta {
    background: url(img/cta-bg.jpg) no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 100px 0
}

.cta h3 {
    text-align: center; font-weight: 700; 
    margin-bottom: 30px;
    font-size: 2.5rem
}

.cta .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.cta .entry-lead {
    margin-bottom: 30px;
    font-size: 1.5rem;
    width: 70%;
    text-align: center;
}

.btn {
    background: var(--green2);
    padding: 12px 60px 12px 30px;
    border-radius: 50px;
    margin-right: 50px;
    position: relative;
    text-align: center;
    font-size: 1.15rem;
    color: #fff;
    font-weight: 300;
}
.entry-text .btn { color: #fff !important; font-weight: 300 !important;   }
.entry-text .btn:after { top: 9px; right: 9px;  }
.btn:after {
    display: block;
    content: '';
    width: 30px;
    height: 30px;
    background: var(--white-circle-arrow) no-repeat;
    background-size: 30px;
    position: absolute;
    right: 15px;
    top: 12px;
    transition: var(--anim)
}

.btn:hover {
    background: var(--green3)
}

.btn:hover:after {
    transform: rotate(45deg) !important;
}

.btn.white {
    width: 350px;
    background: #fff;
    padding: 20px 60px 20px 30px;
    margin-top: 30px;
    text-transform: uppercase;
    color: #000;
    position: relative;
}

.btn.white:after {
    background: var(--green-circle-arrow) no-repeat;
    width: 40px;
    height: 40px;
    background-size: 40px;
    top: 15px;
    right: 20px;
}

.btn.white:hover {
    background: var(--green2);
    color: #fff
}

.testimonial-wrapper {
    display: grid;
    grid-template-columns: 35% 55%;
    position: relative;
    gap: 8%
}

.testimonial-wrapper .media {
    position: relative
}

.testimonial-wrapper .media img {
    border-radius: 30px;
}

.testimonial-wrapper .stars img {
    border-radius: 0px;
    margin-right: 25px
}

.testimonial-wrapper .media a {
    color: #fff;
    transition: var(--anim);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px
}

.testimonial-wrapper .media a:hover {
    border-bottom: 1px solid #fff;
}

.rating {
    background: var(--green2);
    border-radius: 30px;
    padding: 20px;
    color: #fff;
    position: absolute;
    bottom: 60px;
    left: 60px;
    font-weight: 300;
    border: 5px solid #fff;
    box-shadow: 0 5px 5px rgba(0 0 0 / .2);
    right: -40px
}

.rating .score {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba( 256 256 256 / .3);
    padding-bottom: 10px
}

.rating .score strong {
    font-size: 3rem;
    margin-right: 30px;
    font-weight: 700
}
.rating .score span { line-height: 1.3em;  }
.page-title {
    background: linear-gradient(to right, var(--green3), var(--green1)); 
    background-size: cover;
    padding: 25px 0;
    text-align: center;
     background-repeat: no-repeat
}

.page-title h1 {
    color: var(--green2);
    font-weight: 500;
    line-height: 1.4;
    color: #fff;
    font-size: 2.5rem;
    margin-bottom: 10px
}

.page-title.hero h1 {
    font-size: 4rem; font-weight: 700; color: #222
}

.page-title.hero {
    position: relative;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    min-height: 500px;
    background-size: cover;
    background-position: center -55px;
}

.page-title.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.page-template-services .page-title.hero { background-position: center -50px; background-repeat: no-repeat;   }
.page-title.hero * {
    position: relative;
    z-index: 2;
}

.page-title .position {
    font-size: 1.25rem;
    margin: 10px 0 20px;
    color: #fff;
}

.page-title.hero h1 {
    color: var(--green3);
}

.page-template-services .page-title.hero h1 {
    color: var(--green3);
    font-size: 4rem;
    font-weight: 700
}

.djelatnost-template-service-main .page-title.hero {
}

.entry-content {
    margin: 60px auto 100px
}

.entry-content .excerpt { margin: 50px 0 50px; font-size: 1.25rem; font-weight: 700; border-left: 5px solid var(--green2); padding-left: 30px;  }
.entry-content.stardust { margin: 60px 0 100px }
.entry-content.blog-post h2 { font-size: 1.75rem !important; color: var(--steel) !important; margin: 60px 0 10px !important;  }
.entry-content.blog-post h2 strong { font-weight: 500 }
.entry-content.wide { width: 100% }

.entry-content .entry-text {
    font-size: 1.125rem; position: relative;
    line-height: 1.6;
    margin-bottom: 30px;
}

.entry-content .entry-text h1, .entry-content .entry-text h2, .entry-content .entry-text h3, .entry-content .entry-text h4, .entry-content .entry-text h5, .entry-content .entry-text h6 {
    font-weight: bold;
    color: #222;
    margin: 20px 0 10px;
    line-height: 1.4;
}

.entry-content .entry-text h2 {
    margin-top: 60px;
    font-size: 2.2rem;
    border-bottom: 1px solid rgba(0 0 0 / .1);
    color: var(--green2);
    margin-bottom: 15px;
    padding-bottom: 10px;
    font-weight: 500
}

.entry-content .entry-text h3 {
    margin-top: 40px;
    font-size: 1.8rem;
    color: var(--steel);
    font-weight: 500
}

.entry-content .entry-text h2:first-child {
    margin: 0 0 15px;
}

.entry-content .entry-text h3:first-child {
    margin: 0;
}

.entry-content .entry-text p {
    margin: 0 0 30px;
}

.entry-content .entry-text p + ul {
    margin-top: -20px;
}

.entry-content .entry-text ul {
    list-style-type: disc;
}

.entry-content .entry-text ul, .entry-content .entry-text ol {
    margin: 0 0 15px 20px;
    padding: 0;
}

.entry-content .entry-text ul li, .entry-content .entry-text ol li {
    margin: 5px 0;
}

.wp-caption { width: 100% !important }
.entry-content .entry-text img {
    max-width: 100% !important;
    height: auto;
    display: block;
    margin: 15px 0;
}

.entry-content .entry-text img.size-custom-thumb {  }

.wp-caption-text { font-size: .9rem }

.entry-content .entry-text blockquote {
    font-style: italic;
    color: #555;
    margin: 20px 0;
    padding-left: 15px;
    border-left: 3px solid #ccc;
}

.entry-content .entry-text a {
    color: var(--green2);
    text-decoration: none;
    font-weight: 700
}

.entry-content .entry-text a:hover {
    border-bottom: 1px solid var(--green3);
    color: var(--green3)
}

.cjenik {
    margin: 0 auto 30px;
    width: 100%;
    font: 1rem 'DM Sans', sans-serif;
    text-align: center;
    line-height: 1.6em;
    border-collapse: collapse;
    border-bottom: 1px solid #f2f2f2;
    font-weight: 400;
}

.cjenik tr:first-child {
    text-transform: uppercase;
    border-bottom: 3px solid #ccc;
    font-weight: 500;
}

.cjenik tr:first-child td {
    padding: 15px 15px;
    background: #fff;
    border: none
}

.cjenik td:first-child {
    text-align: left;
}

.cjenik td {
    padding: 12px 15px;
}

.cjenik tr:nth-child(even) {
}

.cjenik tr:nth-child(odd) {
    background: rgba(0,0,0,.03)
}

.cjenik em {
    margin-left: 40px;
    font-style: normal;
}

.cjenik strong {
    font-weight: 600;
}

.cjenik td {
    width: auto !important;
    border: 1px solid rgba(0,0,0,.05);
}

.cjenik td:nth-child(2), .cjenik td:nth-child(3) {
    font-weight: 500;
}

.cjenik td:nth-child(2) small, .cjenik td:nth-child(3) small {
    font-weight: normal;
}

.cjenik ul {
    margin-left: 20px;
}

td[colspan]:not([colspan="1"]) {
    background: var(--light-green);
    color: #000;
    padding: 12px 15px
}

.form-wrapper, .contact-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    align-items: start;
    color: var(--steel);
    margin-bottom: 60px;
}

.contact-info .first-part {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-info .map {
    display: flex;
    justify-content: center;
    align-items: center;
}

.form-wrapper .photo {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
}

.form-wrapper .photo img {
    display: block;
}

.contact-info dt:before {
    display: block;
    background: var(--light-green) url('img/icons/pointer.svg') no-repeat center;
    content: '';
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-bottom: 10px;
}

.info-item.phone dt:before {
    background: var(--light-green) url('img/icons/phone.svg') no-repeat center;
}

.info-item.email dt:before {
    background: var(--light-green) url('img/icons/mail.svg') no-repeat center;
}

.info-item.phone dt:before {
    background: var(--light-green) url('img/icons/phone.svg') no-repeat center;
}

.contact-info dt {
    color: var(--green3);
    margin-bottom: 10px;
    font-size: 1.25rem;
}

.contact-info dd {
    color: var(--steel)
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 20px;
}

.services .grid-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 120px calc(10% / 2);
    display: grid
}

.services .cat-title {
    border-bottom: 1px solid var(--light-green);
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.services .grid-list  h2 { font-weight: 700;  }

.services .cat-title h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 5px;
}

.services .cat-title h2 a {
    color: var(--green2)
}

.services .cat-title h2 a:hover {
    color: #000
}

.services .entry-lead {
    font-size: 1.4rem;
    color: var(--steel);
    margin-bottom: 5px;
}

.djelatnost-template .subpages-list .service-item-box .entry-lead {
    margin: 15px 0;
    border-bottom: 1px solid var(--light-gray);
    padding-bottom: 15px;
    font-size: 1.15rem
}

.page-template-services .cat-title:before {
    content: ''; right: 0;
    display: inline-block;
    width: 60px;
    height: 60px;
    position: absolute;
    opacity: .7
}

.page-template-services .cat-title {
    position: relative;
}

.page-template-services .cat-title.dermatologija-i-venerologija:before, .page-template-services .cat-title.dermatology-and-venereology:before {
    background: url('img/icons/dermatologija.svg') no-repeat center;
    background-size: contain
}

.page-template-services .cat-title.pedijatrija:before, .page-template-services .cat-title.pediatry:before {
    background: url('img/icons/pedijatrija.svg') no-repeat center;
    background-size: contain
}

.page-template-services .cat-title.interna-medicina:before, .page-template-services .cat-title.internal-medicine:before {
    background: url('img/icons/interna.svg') no-repeat center;
    background-size: contain
}

.page-template-services .cat-title.nutricionisticko-savjetovanje:before, .page-template-services .cat-title.nutritionist-counseling:before {
    background: url('img/icons/nutricionizam.svg') no-repeat center;
    background-size: contain
}

.page-template-services .cat-title.genetski-testovi:before, .page-template-services .cat-title.genetic-tests:before {
    background: url('img/icons/gen.svg') no-repeat center;
    background-size: contain
}

.page-template-services .cat-title.skola-atopije:before, .page-template-services .cat-title.atopy-school:before {
    background: url('img/icons/skola.svg') no-repeat center;
    background-size: contain
}

.page-template-services .cat-title.savjetovaliste-o-spolno-prenosivim-bolestima:before {
    background: url('img/icons/sex.svg') no-repeat center;
    background-size: contain
}

.first-item {
    margin-bottom: 100px;
}

.first-item .subsubpages-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(10% / 2);
}

.first-item .cat-title {
    border-bottom: 1px solid var(--light-green);
    padding-bottom: 10px;
    margin-bottom: 30px;
}

.first-item .cat-title h2 a:hover {
    color: #000;
}

.first-item .service-item-box li.subitem-box::before {
    display: none
}

.first-item .service-item-box li {
    padding-left: 0
}

.first-item .service-item-box li h3 {
    font-size: 1.25rem;
    font-weight: 500;
    color: #000;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--light-green);
    padding-bottom: 5px
}

.first-item .service-item-box li li {
    padding-left: 35px;
}

.grid-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.contact-grid .info-item {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    min-height: 230px;
}

.contact-info .section-title {
    padding: 0
}

.form-wrapper img {
    border-radius: 30px
}

.services .item-box {
    padding-top: 50px;
    justify-content: start;
    align-items: start
}

.item-box a {
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    padding: 40px 30px 0;
    min-height: 250px;
    min-height: 300px;
    color: var(--steel);
    position: relative; 
}

.item-box h2 {
    font: 1.5rem 'Roboto', sans-serif;
    font-weight: 900;
    margin: 0 0 10px 0;
    color: var(--green2);
    border-bottom: 1px solid var(--light-gray);
    padding: 0 40px 10px 0; 
}

.item-box h2:before {
    display: block;
    background: url('img/sign.svg') no-repeat center;
    background-size: 25px;
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 50%;
    margin-bottom: 10px;
    position: absolute; right: 30px 
}

.services .item-box h2:before {
    display: none
}

.item-box>a:hover {
    background: var(--light-green);
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
}

.item-box ul {
    margin: 20px 0;
}

.item-box p {
    display: inline
}

.service-item-box li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 10px;
    font-size: 1.125rem;
}

.service-item-box li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 18px;
    height: 18px;
    background: var(--sign) no-repeat;
    background-size: contain;
    transition: var(--anim)
}

.service-item-box li:hover::before {
    transform: rotate(180deg);
}

.service-item-box li a {
    text-decoration: none;
    position: relative;
    transition: color 0.3s ease;
}

.service-item-box li a:hover {
    color: var(--green3);
}

.service-item-box li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background-color: var(--green3);
    transition: var(--anim);
}

.service-item-box li a:hover::after {
    width: 100%;
}

.entry-text.entry-lead {
    font-size: 1.5rem;
    margin-bottom: 50px;
    color: var(--steel)
}

.stardust .entry-text.entry-lead,
.djelatnost-template .entry-text.entry-lead {
    color: #000;
    width: 75%;
    border-bottom: 1px solid var(--light-gray)
}

.entry-content.col2 {
    display: grid;
    grid-template-columns: 75% 25%;
}

.entry-content.narrow-content { width: 75% !important } 

.content-area {
    padding-right: 120px;
}

.sidebar-menu {
    background: var(--light-green);
    padding: 40px;
    border-radius: 30px;
    margin-bottom: 30px;
}

.sidebar h3 {
    font-size: 1.25rem;
    color: var(--green3);
    margin-bottom: 20px;
    font-weight: 700;
}

.sidebar li {
    padding: 10px 15px 10px 0;
    border-bottom: 1px solid #fff;
    position: relative;
    font-weight: 500;
    font-size: 1.125rem;
    line-height: 1.4
}
.sidebar li br { display: none }
.sidebar li:last-child {
    border: none
}

.sidebar li a {
    color: var(--green3)
}

.sidebar li.active a, .sidebar li a:hover {
    color: #000;
}


.sidebar li:after {
    content: '';
    display: block;
    background: url('img/icons/green-arrow.svg') no-repeat;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 1px;
    top: 18px;
    background-size: 10px;
    transition: all .5s ease;

}

.sidebar li.active:after,
.sidebar li:hover:after {
    transform: rotate(45deg);
        filter: saturate(0) contrast(0); 
}

.help {
    background: var(--green2);
    border-radius: 30px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.help .icon {
    margin-bottom: 30px;
}

.help h3 {
    font-size: 1.5rem;
    color: #fff;
}

.help .entry-text {
    text-align: center;
}

.help .btn {
    width: 100%;
    padding: 12px 0;
    margin: 0 auto
}
.help .btn.white:after { top: 6px; right: 6px; }

.help .btn:hover {
    background: var(--green3)
}

.team-category {
    margin-bottom: 150px;
    text-align: center;
}

.team-category h2 {
    margin-bottom: 10px;
    display: inline-block;
    padding: 5px 10px;
}

.team-category .section-title {
    margin-bottom: 30px;
    padding: 0
}

.section-title h2 {
    font-size: 2.7rem;
}

.servies-section .entry-title span:before  {
    content: ''; display: block; 
    width: 45px;
    height: 45px;
    background: url('img/sign.svg');
    background-size: cover !important;
    display: inline-block;
    margin-right: 20px;
    position: relative;
    top: 10px;
}

.page-template-inc .section-title h2 {
    color: var(--green2);
}

.page-template-inc .team-content .section-title h2 {
    font-weight: 700
}

.section-title .description {
    font-size: 1.35rem;
}

.section-title .entry-lead {
    font-size: 1.15rem
}

.iso .badges {
    gap: 30px;
    display: flex;
    justify-content: center;
}

.team-posts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 280px));
    gap: 20px;
    justify-content: center;
    align-items: start;
    padding: 20px;
}

.team-post {
    width: 300px;
    border-radius: 8px;
    overflow: hidden;
    text-align: center;
    padding: 15px;
    border-radius: 30px;
}

.team-post:hover {
    background: var(--light-green);
}

.team-post-image {
    margin-bottom: 15px;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
}

.team-post-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    transition: var(--slow);
    /* Dodaje glatku tranziciju za zoom efekt */
}

.team-post-image:hover img {
    transform: scale(1.05);
}

.team-post h3 {
    font-size: 20px;
    font-weight: 500;
        color: var(--green2);
    transition: color 0.3s ease;
}

.team-post h3 a {
    color: var(--green2);
}

.team-post:hover h3 a, .team-post h3:hover {
    color: var(--green3);
}

.team-post .job-title {
    font-weight: 700;
}

.team-post p {
    color: var(--steel);
    line-height: 1.6;
}

.member-page {
    display: grid;
    grid-template-columns: 30% 65%;
    gap: 5%;
}



.member-area h2 {
    font-size: 1.5rem;
    color: #000;
}

.member-area .active h2 {
    color: var(--green3)
}

.member-area .member-block:first-child h2 {
    margin-top: 0
}

.member-area ul {
    margin: 20px 20px 20px;
}

.member-area li {
    list-style-type: disc;
    margin-bottom: 10px;
    font-size: 1.125rem;
}
.tim {
    overflow: hidden;
    display: block;
    position: relative;
}

.member-image {
    position: relative; /* Potrebno za overlay efekt */
    overflow: hidden; /* Sprječava prelazak elemenata izvan okvira */
    display: inline-block; /* Prilagođava kontejner veličini slike */
}

.img {
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease; 
}

.member-image {
    border-radius: 30px;
}
.member-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
 
}

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

.member-image:hover::before {
    opacity: 1; 
}

.member-name {
    text-align: center;
}

.member-name h4 {
    font-size: 1.25rem;
    margin-bottom: 5px; 
}

.member-block {
    margin-bottom: 10px;
    overflow: hidden;
}

.member-area .accordion-content {
    display: none;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 15px;
    font-size: 1.125rem;
}

.member-area .member-block.active .accordion-content {
    display: block;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--light-gray);
    cursor: pointer;
    position: relative;
    transition: var(--anim);
    padding: 30px 20px;
    border-radius: 10px;
    box-shadow: inset 0 -1px 0 rgba(0 0 0 / .2)
}

.accordion-header:hover {
    background-color: #e1e1e1;
}

.member-block.active .accordion-header {
    background-color: var(--light-green);
    padding: 30px 20px
}

.chevron {
    position: absolute;
    right: 40px;
    display: inline-block;
    width: 15px;
    height: 15px;
    border-right: 4px solid #333;
    border-bottom: 4px solid #333;
    transform: rotate(-45deg);
    transition: var(--anim)
}
.accordion-item.active .chevron { border-color: #fff;  }

.member-block.active .chevron, .accordion-item.active .chevron {
    transform: rotate(45deg);
}

.accordion-item {
    margin-bottom: 15px
}
.accordion-item .accordion-header  { font-size: 1.5rem }

.accordion-content { padding-top: 30px;  }

.accordion-item .accordion-content {
    display: none
}

.accordion-item.active .accordion-header {
    background: var(--green2);
    color: #fff;
}

@media (max-width: 768px) {
    .team-posts {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .team-category h2 {
        font-size: 20px;
    }
}

.footer-badge img {
    width: 50px;
    height: 50px;
}

.footer-badge img:first-child {
    margin-right: 30px
}

.team {
    margin: 0;
    padding: 0;
    display: flex;
}

.team .team-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%
}

.team .team-grid .img {
    display: flex;
    background: url('img/lena-kotrulja.jpg');
}

.team .section-title .subtitle:before {
    background: url('img/sign.svg');
}



.team .section-title {
    padding: 0;
    text-align: left
}

.team .section-title h2 {
    margin-bottom: 40px
}

.team .team-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-size: 1.25rem;
    padding: 0 10%;
}

.team .team-content ul {
    margin-top: 40px;
}

.team .team-content li {
    margin-bottom: 15px;
    display: flex;
    position: relative
}
.team .team-content li:last-child { margin-bottom: 0 }

.team .team-content li:before {
    content: '';
    display: inline-block;
    width: 22px;
    position: relative;
    top: 7px;
    height: 22px;
    background: var(--white-circle-arrow) no-repeat 0;
    background-size: contain;
    transition: var(--anim);
    margin-right: 25px;
    flex-shrink: 0;
}

.team .team-content li:hover:before {
    transform: rotate(45deg)
}


.team .team-content li a:hover {
    color: var(--green2);
    padding-left: 3px
}

.hero-grid {
    display: grid;
    grid-template-columns: 40% 60%;
    padding: 0;
    width: 100%;
    order: revert;
    height: 100%;
    overflow: hidden
}

.wpml-switcher {
    position: relative;
    display: inline-block;
}

.current-lang {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.wpml-switcher img {
    width: 24px;
    height: 24px;
    margin-right: 10px;
}

.wpml-switcher span {
    text-transform: uppercase;
    font-weight: 700;
}

.current-lang svg {
    margin-left: 10px;
    fill: #000
}

.current-lang:hover svg {
    fill: var(--green3);
}

.current-lang:hover span {
    color: var(--green3)
}

.language-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: -10px;
    border-radius: 4px;
    margin-top: 0px;
    z-index: 1000;
    width: 100px;
    padding: 0
}

.language-dropdown li {
    list-style: none;
    padding: 0;
    border-top: 3px solid #fff
}

.language-dropdown li a {
    display: flex;
    align-items: center;
    text-decoration: none;
    background: rgba(0 0 0 / .07);
    padding: 5px 10px;
}

.language-dropdown li a:hover {
    background: #fff;
}

.wpml-switcher:hover .language-dropdown {
    display: block;
}

.frm_style_formidable-style.with_frm_style .frm_submit button, .frm_style_formidable-style.with_frm_style .frm_submit button:hover {
    all: unset;
}

.with_frm_style .btn {
    cursor: pointer !important;
}

.with_frm_style .btn button:hover {
    background: none !important
}

.with_frm_style input[type=text], .with_frm_style input[type=email], .with_frm_style input[type=tel], .with_frm_style input[type=search], .with_frm_style textarea {
    border-radius: 0;
    padding: 15px 20px;
}

.with_frm_style .btn {
    width: 300px;
}

.contact-form {
    padding: 0 50px;
}

.breadcrumbs { font-size: 1rem; color: #000;   }
.breadcrumbs .breadcrumb_last {
    color: #fff
}

.breadcrumbs span {
    color: var(--green1);
    position: relative
}

.breadcrumbs span a {
    color: #fff;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
     transition: none
}
.breadcrumbs a:hover {  color: #000 }
.breadcrumbs a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 2px;
    background-color: #000;
    transition: var(--anim);
}

.breadcrumbs a:hover::after {
    width: 100%;
   
}

.page-title.hero .breadcrumbs span, .page-title.hero .breadcrumbs a {
    color: #000;
}

.testimonials-section {
    background: var(--light-gray);
}

.testimonial-slider:before {
    display: block;
    content: '';
    width: 80px;
    height: 80px;
    background: url(img/icons/quote_1.svg) no-repeat;
    margin-bottom: 30px;
    opacity: .2
}

.testimonial-slider {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.testimonial-slider quote {
    font-size: 1.125rem;
    margin-bottom: 20px;
    display: block;
}

.testimonial-slider .user {
    font-weight: 700;
}

.slick-arrows-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: absolute;
    bottom: 30%;
}

.slick-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border: none;
    color: var(--green2);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--anim);
}

.slick-prev {
    margin-right: 20px;
}

.slick-prev:before, .slick-next:before {
    opacity: 1 !important
}

.slick-prev:hover:before, .slick-next:hover:before {
    color: var(--green2) !important;
}

.slick-prev, .slick-next {
    position: static !important;
}

.awards-section {
    background: var(--light-gray);
}

.awards {
    display: grid;
    grid-template-columns: 45% 45%;
    gap: 10%;
    padding: 0;
    width: 100%;
    justify-content: center;
    align-items: center;
}

.award-part {
    text-align: center;
}

.awards p:first-child {
    margin-bottom: 20px
}

.iso {
    padding: 100px 0 0
}

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.gallery-item {
    overflow: hidden;
    border-radius: 5px;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

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

.values-section {
    position: relative;
    padding: 100px 0;
    background: linear-gradient(113.06deg, #86C95A 13.56%, #569F46 64.93%);
    color: var(--light-gray);
    overflow: hidden;
}

.values-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('img/footer-bg.png') no-repeat center / cover;
    filter: blur(5px);
}

.values .section-title .subtitle {
    text-align: left;
    font: 2rem 'Poppins', sans-serif;
    border-bottom: 1px solid rgba(256 256 256 / .2);
    padding-bottom: 20px;
    font-weight: 700
}

.values .section-title .subtitle:before {
    background: url('img/sign-w.svg')
}

.values {
    display: grid;
    grid-template-columns: 45% 45%;
    gap: 10%;
    font-size: 1.125rem
}

.values h3 {
    border-bottom: 1px solid #fff;
    padding: 20px 0;
    margin: 20px;
    color: #fff
}

.values p {
    margin-bottom: 20px;
}

.values p:last-child {
    margin: 0
}

.about-content {
    display: grid;
    grid-template-columns: 30% 65%;
    gap: 5%;
    padding: 100px 10%
}

.about-text {
    padding: 0 50px;
    font-size: 1.25rem
}

.about-text h2 {
    font-size: 1.5rem;
    margin-bottom: 30px;
    line-height: 1.4em;
    color: var(--green2)
}

.about-text a {
    color: var(--green2);
}

.about-text a:hover {
    color: #000;
    text-decoration: underline
}

.about-text p {
    margin-bottom: 20px;
}

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

.about-image img {
    border-radius: 30px;
}

.about-text .logo {
    width: 400px;
    margin-bottom: 20px;
}

.team-list {
    display: grid;
    padding: 0px 0 60px;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 30px;
    row-gap: 20px;
    justify-content: stretch;
}

.team-list .team-post {
    width: 100%
}

.slick-slider {
    overflow: hidden;
    width: 100%;
}

.slick-prev, .slick-next { width: 30px; height: 30px; margin-right: 60px !important;   }
.slick-prev:before, .slick-next:before { font-size: 50px !important; color: #ccc !important  }

.mobile-menu {
    display: none
}

.mobile-nav {
    opacity: 0;
    display: none
}

/* menu */
/* burger */
.burger-container {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 50px;
    cursor: pointer;
    z-index: 10000 !important;
    transform: rotate(0deg);
    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.burger-container #burger {
    width: 30px;
    height: 8px;
    position: relative;
    display: block;
    margin: -4px auto 0;
    top: 50%;
}

.burger-container #burger .bar {
    width: 100%;
    height: 3px;
    display: block;
    position: relative;
    background: #000;
    transition: all 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition-delay: 0s;
}

.burger-container #burger .bar.topBar {
    transform: translateY(0px) rotate(0deg);
}

.burger-container #burger .bar.btmBar {
    transform: translateY(6px) rotate(0deg);
}

.mobile-menu.menu-opened #burger .bar {
}

.mobile-menu.menu-opened {
    height: 100%;
    transition: all 0.3s ease-in, background 0.5s ease-in;
    transition-delay: 0.25s;
}

.mobile-menu.menu-opened .burger-container {
    transform: rotate(90deg);
}

.mobile-menu.menu-opened .burger-container #burger .bar {
    transition: all 0.4s cubic-bezier(0.4, 0.01, 0.165, 0.99);
    transition-delay: 0.2s;
}

.mobile-menu.menu-opened .burger-container #burger .bar.topBar {
    transform: translateY(4px) rotate(45deg);
}

.mobile-menu.menu-opened .burger-container #burger .bar.btmBar {
    transform: translateY(2px) rotate(-45deg);
}

.mobile-nav {
    all: unset;
    box-sizing: border-box;
}

.mobile-nav {
    position: fixed;
    display: none;
    margin-top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--green2);
    transition: var(--anim);
    z-index: 9999;
    flex-direction: column;
    padding: 30px 50px 0 30px;
    overflow-y: auto;
}

.mobile-nav.active {
    right: 0
}

.mobile-nav .close-button {
    font-size: 50px;
    color: #fff;
}

.mobile-nav li a {
    color: #fff;
    display: block;
    text-transform: none;
    font-size: 1.125rem;
    margin: 0;
}

.mobile-nav .submenu a {
    color: #fff;
}

.mobile-nav li a:hover {
    color: var(--orange);
}

.mobile-nav ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 0 0;
}

.mobile-nav ul li {
    position: relative;
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 1px solid rgba( 256 256 256 / .15);
}

.mobile-nav ul li:last-child {
    border: none
}

.mobile-nav ul li li {
    padding: 10px 0 10px 15px;
    ; margin: 0;
}

.mobile-nav ul li li a {
    font-size: 15px;
    line-height: normal;
    line-height: 1.4em;
    color: #fff;
}

.mobile-nav li li {
    border: none;
}

.mobile-nav ul li ul {
    display: none;
}

.mobile-nav ul li.menu-item-has-children::before {
    content: '';
    background: var(--white-chevron);
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 1000;
    right: 10px;
    transition: var(--half)
}

.mobile-nav ul li.menu-item-has-children.active::before {
    transform: rotate(90deg);
    background: var(--orange-chevron);
}

.mobile-nav ul li.menu-item-has-children.active>a:first-of-type {
    color: var(--orange);
}

.mobile-nav ul li.current-menu-item a {
    color: #fff;
}

.mobile-nav::-webkit-scrollbar {
    width: 5px;
}

.mobile-nav::-webkit-scrollbar-track {
    background: var(--green3);
}

.mobile-nav::-webkit-scrollbar-thumb {
    background: var(--green1);
    border-radius: 4px;
}

.mobile-nav::-webkit-scrollbar-thumb:hover {
    background: #fff;
}

.mobile-nav #searchform {
    all: unset;
    margin-top: 30px;
}

.mobile-nav #searchform input[type="text"] {
    width: 100%;
    background: inherit;
    border: 1px solid rgba(256 256 256 / .3);
    padding: 10px;
    width: 75%;
    margin-right: 15px;
    color: #fff;
}

.mobile-nav #searchform button {
    all: unset;
}

.mobile-nav #searchform button svg {
    fill: rgba(256 256 256 / .3);
    position: relative;
    top: 10px;
}

.mobile-nav #searchform button:hover {
    fill: var(--orange)
}

#header.boom {
    transform: translateY(-100px);
}

#header.sticky {
    margin-top: 0; top: 0;
    width: 100%;
    position: fixed;
    background: rgba(256, 256, 256, 0.97);
    box-shadow: 0 1px 22px rgba(0, 0, 0, 0.2);
    padding: 3px 5%;
    transform: translateY(0);
    z-index: 1000;
    height: 65px;
}

#header.sticky .main-logo {
    height: 50px
}

#header.sticky .short-logo {
    display: block
}

.animation {
    opacity: 0;
    filter: blur(3px);
    transform: translateY(200px);
    transition: all .7s ease-out;
}

.animation.fadeup {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

.related { margin: 50px 0 100px }

.delay-1 {
    transition: var(--slow);
    transition-delay: .1s;
}

.delay-2 {
    transition: var(--slow);
    transition-delay: .2s;
}

.delay-3 {
    transition: var(--slow);
    transition-delay: .3s;
}

.delay-4 {
    transition: var(--slow);
    transition-delay: .4s;
}

.delay-5 {
    transition: var(--slow);
    transition-delay: .5s;
}

.delay-6 {
    transition: var(--slow);
    transition-delay: .6s;
}

.delay-7 {
    transition: var(--slow);
    transition-delay: .7s;
}

.delay-8 {
    transition: var(--slow);
    transition-delay: .8s;
}

.delay-9 {
    transition: var(--slow);
    transition-delay: .9s;
}

.delay-late {
    transition: var(--slow);
    transition-delay: 1.5s;
}

.featured-bar.delay-5 {
    transition: all 1s ease;
}

.team-category.single-member .team-posts {
    display: block;
    padding: 0 160px;
}

.team-category.single-member .team-posts .special-layout:first-child {
    margin-bottom: 100px;
}

.special-layout {
    display: grid;
    grid-template-columns: 270px 1fr;
    width: 100%;
    gap: 60px;
}

.special-layout .right-part {
    text-align: left;
}

.special-layout h2 {
    font-size: 1.25rem;
    text-align: left;
    margin: 0 0 20px;
    padding-bottom: 20px;
    line-height: 1.6em;
    border-bottom: 1px solid var(--steel);
}

.special-layout:hover {
    background: none;
}

.special-layout img {
    width: 270px;
    height: auto;
    object-fit: cover;
}

.special-layout .right-part {
    padding-left: 0;
}

.special-layout p {
    margin-bottom: 15px;
}

.special-layout p:last-child {
    margin: 0;
}
.page-template-team .section-title[id] {
  scroll-margin-top: 200px;
}

/* Responsive  */
@media (max-width: 1350px) {
    .container {
        width: 100%;
    }

    .hero-grid {
        grid-template-columns: 50% 50%;
    }

    .hero .hero-box {
        padding: 100px 60px;
        min-height: auto
    }

    #header {
        padding: 30px;
    }

    #primary-menu li a {
        margin-right: 20px;
    }

    section {
        padding: 60px 0 90px;
    }

    .about-content {
        padding: 60px;
    }

    .about-text {
        padding: 0;
    }

    .hero {
        height: auto;
    }

    .hero .hero-box h1 {
        font-size: 2.5rem;
        line-height: 1.4;
    }

    .header-wrapper {
        grid-template-columns: 20% 60% 20%;
    }

    .header-wrapper .btn {
        font-size: 0.9rem;
        line-height: 1.2;
        width: 100%;
        padding: 12px 60px 12px 30px;
        margin-right: 10px;
    }

    .featured-bar {
        position: static;
    }

    .section-title h2 {
        font-size: 2.3rem;
    }

    .team-post {
        width: 100%;
    }

    #footer {
        padding: 50px 30px;
    }

    #footer .footer-grid {
        column-gap: 30px;
    }

    .team .team-grid .img {
        background-size: 140%;
        background-position: -100px center;
        ; background-repeat: no-repeat
    }

    .team-posts {
        gap: 5px
    }
}

@media (max-width: 1024px) {
    .container {
        padding: 0 15px;
    }

    #site-navigation, .nav-order {
        display: none;
    }

    .header-wrapper {
        grid-template-columns: 50% 50%;
    }

    .header-wrapper .btn {
        font-size: 1.15rem;
        padding: 15px 60px 15px 30px;
        width: 300px;
    }

    .mobile-menu {
        display: block;
        text-align: right;
        top: 7px;
        right: 20px;
    }

    .mobile-nav {
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        background: var(--green2);
        transition: var(--anim);
        z-index: 10;
        padding: 80px 15px 0;
        overflow-y: auto;
        display: none;
        opacity: 0;
    }

    .mobile-nav.is-visible {
        opacity: 1;
        display: flex;
    }

    .entry-content {
        width: 100%;
    }

    #footer .footer-grid {
        grid-template-columns: 50% 50%;
    }

    #header {
        padding: 15px;
    }

    .hero .hero-box h1 {
        font-size: 2rem;
        margin-bottom: 10px;
    }

    .hero-grid {
        display: grid;
        grid-template-columns: 50% 50%;
    }

    .hero .entry-text {
        width: 100%;
    }

    .hero .hero-box {
        padding: 60px 15px;
        margin: 0;
    }

    .featured-bar .fl .icon {
        width: 50px;
        height: 50px;
        padding: 10px;
        margin-bottom: 5px;
    }

    .rating {
        position: static;
    }

    section {
        padding: 30px 0 60px;
    }

    .offer-slider {
        margin-top: 50px;
        gap: 60px 30px;
        grid-template-columns: repeat(2, 1fr);
    }

    .team {
        min-height: auto;
    }

    .team .team-grid {
        gap: 30px;
    }

    .team .team-content {
        font-size: 1rem;
    }

    .latest-posts-grid {
        gap: 30px;
        grid-template-columns: repeat(2, 1fr);
    }

    .cta h3 {
        font-size: 2.2rem;
    }

    .rating .score strong {
        display: block;
        font-size: 2rem;
        margin: 0;
        line-height: 1.2;
    }

    .rating .score span {
        margin-bottom: 10px;
        display: block;
    }

    .testimonial-wrapper .stars img {
        display: block;
    }

    .hero .img {
        position: relative;
        bottom: 0;
    }

    .hero .img img {
        display: block;
        width: 100%;
        height: auto;
    }

    .form-wrapper, .contact-info {
        display: block;
    }

    .contact-grid {
        margin-bottom: 30px;
    }

    .form-wrapper img {
        display: block;
        margin: 0 auto;
    }

    .featured-bar .quick-links a {
        padding: 20px;
    }

    .featured-bar .title strong {
        font-size: 1.125rem
    }

    .hero .entry-text {
        display: none
    }

    .hero .badges img {
        width: 50px;
    }
    .team-category.single-member .team-posts {
        padding-left: 50px;
    }

    .special-layout {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .team-post-image img {
        margin: 0 auto;
        border-radius: 30px;
    }
    .stardust .entry-text.entry-lead{ width: 100%  }
    .page-title.hero { background-size: cover; background-position: center 0   }
    .item-box h2 { font-size: 1.3rem; font-weight: 500 }
    .grid-list {display: grid; grid-template-columns: 1fr 1fr; }
    .item-box a { min-height: auto; padding: 40px 30px; }
    
    .content-area { padding-right: 60px; }
    .sidebar-menu,
    .help { padding: 30px;  }
    .sidebar h3 { text-align: center; line-height: 1.2em }
    .entry-content .entry-text { font-size: 1rem }

}

@media (max-width: 768px) {
    .cta h3 {
        font-size: 1.5rem;
        line-height: 1.2;
    }

    .btn.white {
        width: 100%;
        margin: 0 auto;
    }

    .footer-bottom span {
        display: block;
        margin: 30px 0;
    }

    .container {
        padding: 0px 15px;
    }

    .cta .entry-lead {
        width: 100%;
        font-size: 1rem
    }

    .footer-logo, .footer-logo li {
        text-align: center !important;
    }

    .footer-logo ul, .footer-logo .footer-badge {
        margin-left: 0;
    }

    .contact-form {
        padding: 0;
    }

    .cta {
        padding: 60px 0;
    }

    .latest-posts-grid {
    }

    .latest-posts-grid .latest-post-item:last-child {
        display: none
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .footer-bottom a {
        display: block;
    }

    .footer-bottom span {
        margin: 0px 0;
        visibility: hidden
    }

    .footer-bottom .webhero {
        margin-left: 0
    }

    .page-title h1 {
        font-size: 2.5rem
    }

    .member-page {
        display: block;
    }

    .main-content {
        padding: 30px 0
    }

    .member-page img {
        margin: 0 auto;
        display: block;
    }

    .member-name {
        padding: 15px 0 30px;
    }

    .member-area h2 {
        font-size: 1.5rem;
    }

    .team-list {
        grid-template-columns: repeat(3, 1fr);
        column-gap: 15px;
        row-gap: 15px;
    }

    .team-list .team-post {
        padding: 0
    }

    .member-area {
        line-height: 1.6em;
        font-size: .9rem
    }

    .member-area ul {
        margin: 20px 10px
    }

    .section-title h2 {
        font-size: 1.8rem
    }

    .about-content {
        padding: 30px 15px;
        display: block;
    }

    .director {
        margin-bottom: 60px;
    }

    .about-text {
        font-size: 1rem;
    }

    .awards {
        grid-template-columns: 100%;
        order: revert;
        display: flex;
        flex-direction: column;
    }

    .awards-section {
        padding-bottom: 60px
    }

    .gallery {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        /* Dve kolone s ravnomernom raspodelom prostora */
        gap: 15px;
    }

    .team .team-grid {
        display: block;
    }

    .team .team-grid img {
        width: 250px;
        text-align: center;
        margin: 0 auto;
    }

    .team .team-grid p {
        display: none
    }

    .team .team-content ul {
        margin: 0
    }

    .testimonial-wrapper {
        display: block;
    }

    .testimonial-wrapper .media img {
        display: block;
        margin: 0 auto 30px
    }

    .slick-arrows-container {
        position: static;
    }

    .testimonial-slider:before {
        margin: 30px 0
    }

    .values {
        display: block;
    }

    .values-section {
        padding: 30px 0
    }

    .featured-bar .quick-links {
        display: block;
    }

    .offer-slider {
        gap: 60px 15px;
    }

    .offer-item a {
        padding: 15px;
    }

    .hero-grid {
        display: block;
        padding: 0px
    }

    .hero .hero-box {
        padding: 15px;
    }

    .hero .hero-box h1 {
        font-size: 1.25rem
    }

    .hero-box .badges {
        display: none
    }

    .hero .img {
        height: 50vh;
    }

    .featured-bar .quick-links a {
        padding: 15px 30px;
        border-bottom: 1px solid var(--green3);
        display: block;
    }

    .team .team-content {
        padding: 30px 30px
    }

    .latest-post-item h3 {
        min-height: auto;
        font-size: 1.15rem;
        border-bottom: 0
    }

    .offer-item .offer-icon {
        margin: -50px 0 0
    }

    .offer-item h3 {
        height: auto;
        margin: 0 0 10px
    }

    section {
        padding: 30px 0
    }

    #footer li {
        margin-bottom: 2px
    }

    .footer-item h4 {
        margin-bottom: 5px
    }

    .footer-logo .badges {
        margin-left: 0
    }

    .footer-logo .badges img {
        width: 50px;
        height: 50px;
    }

    .featured-bar a:first-child .description {
        color: var(--green3)
    }

    .team .team-content li:before {
        top: 3px;
    }

    .latest-post-item img {
        border-radius: 15px;
    }
    .home #header {
        position: static;
        background: #fff;
    }

    .hero .hero-box h1 {
        font-size: 2rem
    }

    .hero {
        height: auto;
    }
    .page-template-team .section-title[id] {
      scroll-margin-top: 100px;
    }
    .entry-content.col2 { display: block;  }

    .entry-content {  margin: 30px auto 60px; }
    .content-area { padding-right: 0 }
    .entry-content .entry-text h2 { margin-top: 40px; font-size: 1.8rem }
    .entry-content .entry-text h3 { font-size: 1.5rem }
}

@media (max-width: 480px) {
    .contact-grid {
        display: block;
    }
    .grid-list { display: block;  }

    .contact-grid .info-item {
        margin-bottom: 15px;
        min-height: auto;
        padding: 25px
    }

    #footer .footer-grid {
        display: block;
    }

    .footer-logo, .footer-logo li {
        text-align: left !important;
    }

    .cjenik tr:first-child td {
        padding: 0
    }

    .cjenik {
        display: block;
        overflow-x: auto;
    }

    .cjenik td {
        padding: 10px 5px;
        font-size: .9rem;
        line-height: 1.4;
    }

    .accordion-header {
        padding: 20px;
        font-size: 1.2rem;
    }

    .page-title h1 {
        font-size: 2.2rem
    }

    .page-title {
        padding: 15px 0
    }

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

    .with_frm_style input, .frm_full > input:not([type='checkbox']):not([type='radio']):not([type='button']), .frm_full textarea {
        width: 90% !important
    }

    .with_frm_style .btn {
        width: 100%
    }

    .offer-slider {
        display: block;
    }

    .offer-item a {
        margin-bottom: 80px
    }

    .entry-leader {
        display: none
    }

    #footer {
        padding: 30px 15px;
    }

    .mobile-nav {
        padding-top: 100px;
    }
}

@media (max-width: 320px) {
    .with_frm_style .btn {
        width: 100%
    }
}


.entry-content .entry-text .price-list  { margin: 50px 0;  color: #000; border-top: 1px solid var(--light-gray); background: var(--light-gray); 
                                         padding: 60px 40px; border-radius: 10px;   }
.entry-content .entry-text .price-list h4 {  font-weight: 500; font-size: 1.2rem; margin-bottom: 20px; margin-top: 0; display: inline; margin-right: 20px;  }