:root {
    --c-white: #FFFFFF;
    --c-second-white: #CFC8B8;
    --c-bg: #FFFFFF;
    --c-black:#212721;
    --c-accent: #3E8E31;

    --s4-black:rgba(33, 39, 33, 0.4);


    --p-padding: 10vw;
}


::-webkit-scrollbar {width: .35vw;}
::-webkit-scrollbar-track {background: var(--c-bg);}
::-webkit-scrollbar-thumb {background: var(--c-accent);border-radius: 0.35vw;}

::selection  {background-color: var(--s4-black);color: var(--c-white);}
.noselect, img {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}
input, select, .textarea {-webkit-appearance: none;-moz-appearance: none;appearance: none;}
a {text-decoration: none;cursor: pointer;color: var(--c-accent);}

.regular {
    font-family: "PT Sans", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.bold {
    font-family: "PT Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
}
body, html {
    width: 100%;margin: 0;padding: 0;
    color: var(--c-black);background-color: var(--c-bg);
    font-family: "PT Sans", sans-serif;
    font-weight: 400;font-style: normal;
}
h1, h2, h3, h4, h5, h6, p {line-height: 1;font-weight: normal;display:block;position:relative;margin: 0;padding: 0;}

.extra-title {font-size: 6em;}
h1, .s1 {font-size: 3em;}
h2, .s2 {font-size: 2.5em;}
h3, .s3 {font-size: 2em;}
h4, .s4 {font-size: 1.5em;}
h5, .s5, p {font-size: 1.25em;}
h6, .s6 {font-size: 1.15em;}

.white {color: var(--c-white);}
.gray {color: var(--c-gray);}
.bg, .black {color: var(--c-black);}
.gold {color: #deb318;}
.accent {color: var(--c-accent);}
.pointer {cursor: pointer;}
.inline {display:inline-block !important;vertical-align: middle;position:relative;}
.block {position:relative;display:block;}
.top-inline {display:inline-block;vertical-align: top;}
.bottom-inline {display:inline-block;vertical-align: bottom;}
.underline {text-decoration: underline;text-decoration-color: var(--c-red);}
.uppercase {text-transform: uppercase;}
.capitalize {text-transform: capitalize;}

.line-1 {line-height:1;}
.line-2 {line-height:1.25;}
.extra-line, .line-3 {line-height: 1.5 !important;}
.line-4 {line-height: 1.75;}
.line-5 {line-height: 2;}

.semi {opacity: 0.5;}

.no-whitespace {white-space: nowrap;}

.center {text-align: center;}
.right {text-align: right;}
.left {text-align: left;}

menu {
    position:fixed;margin:0;display:flex;z-index:900;top:0;left:0;align-items:center;
    width:100%;box-sizing: border-box;padding:1vh var(--p-padding);background-color: var(--c-white);
}
.logo-menu-wrap {display:flex;gap:1vh;align-items: center;}
.logo-menu {height:8vh;}
menu .right-side {margin-left:auto;}
menu .right-side p {display:inline-block;margin-left:2vh;padding:1vh;cursor:pointer;}
menu .right-side .button {padding: 1vh 2.5vh;border-radius:0.75em;}

.button, button {
    padding: 2vh 3vh;margin:0;display:inline-flex;gap:1.5vh;align-items: center;justify-content: center;
    position:relative;border-radius:1em;border: none;outline:none;cursor:pointer;
}
.accent-button {background-color: var(--c-accent);}
.button-icon {height:2.5vh;width:2.5vh;object-fit: contain;object-position: center;}
.filter-icon {filter:invert(1) contrast(1000%);}
.full-button {width:100%;box-sizing: border-box;}

header {
    position:relative;width:100%;height:90vh;
    display:flex;align-items: center;justify-content: center;
    border-bottom-left-radius: 2em;border-bottom-right-radius: 2em;
}
.header-bg {
    position:absolute;width:100%;height:100%;object-fit: cover;object-position: center;
    filter: brightness(80%);
    border-bottom-left-radius: 2em;border-bottom-right-radius: 2em;
}
.center-header {
    display:inline-flex;align-items: center;
    flex-direction: column;gap: 4vh;max-width: 50%;
}
.wrap-buttons {position:relative;}
.active-now {position:absolute;left:120%;top:50%;transform:translateY(-50%);white-space: nowrap;}
@keyframes pulse {
    50% {transform: scale(3);opacity:0;}
    100% {transform: scale(3);opacity:0;}
}
.active-now span {
    height:1vh;width:1vh;border-radius: 100%;background-color: var(--c-accent);margin-right:1vh;
}
.active-now span::before {
    height:1vh;width:1vh;border-radius: 100%;background-color: var(--c-accent);content: "";
    position:absolute;top:0;left:0;animation: pulse 1s ease-in-out infinite;
}

.bubble-above {
    padding: 1vh 2vh;border-radius:4vh;background-color: var(--c-black);margin-bottom:1.5vh;
}

section {
    position:relative;box-sizing: border-box;width:100%;padding: 7.5% var(--p-padding);
}
.centered-section {padding: 7.5% calc(var(--p-padding) * 2);}
.colored-section {background-color: var(--c-black);}
.second-white-section {background-color: var(--c-second-white);}
.accent-section {background-color: var(--c-accent);}
.less-section {width:100%;padding: 0 0;text-align:center;}
.split-explanation {display:grid;gap:10%;grid-template-columns: 45% 45%;}
.split-2 {margin-top:20vh;}

.wrap-less-section {
    width:calc(100% - var(--p-padding) - var(--p-padding));
    border-radius:2em;padding: 7.5%;display:inline-block;
    box-sizing: border-box;position:relative;
}
.wrap-content-inside {
    width:60vw;
    display:inline-block;
}

.sticky {position:sticky;top:15%;left:0;}
article {margin-top:6vh;}
.article-wrap {white-space:break-spaces;}

.image-wrap {width:100%;}
.image-explain {width:100%;border-radius: 2em;}

.wrap-brandings {
    padding:4vh 0;width:100%;overflow:hidden;display:block;white-space: nowrap;
}
.wrap-inside-brandings {
    display: flex;width:100%;white-space: nowrap;
}
.branding-inside {position:relative;margin-right:4vw;display:inline-block;}
.branding-inside img {height:6vh;filter:grayscale(1);}

@keyframes bankanim {
    from {transform:translateX(0);}
    to {transform:translateX(-100%);}
}
.wrap-bnk-o {position:relative;display:inline-flex;animation: bankanim 14s linear infinite;}



#kontakt {min-height:80vh;}
#less-2-in {padding: 5% 7.5%;}
.contact-bg-wrap {
    position:absolute;top:0;left:0;height:100%;z-index:1;
}
.contact-bg {height:100%;z-index:1;position:relative;}
.contact-bg-wrap::before {
    position:absolute;top:0;left:0;height:100%;width:100%;
    content:"";z-index:2;
    background: linear-gradient(to left, var(--c-black), var(--s4-black));
}



#reviews .split-explanation {align-items: center;}
.review-in {padding: 4vh;border: solid 1px var(--c-second-white);border-radius:1em;}
.review-in article {margin: 0 0 4vh 0;}

.review-dots {display:block;text-align: center;margin-top:2vh;}
.review-dots span {
    height:2vh;width:2vh;display: inline-block;margin: 0 1vh;background-color: var(--c-black);
    border-radius:100%;cursor:pointer;
}
.review-dots span.active-dot {background-color: var(--c-accent);}



details {display:block;margin-bottom:6vh;}
summary {
    padding: 2vh 0;display:block;cursor: pointer;position:relative;
}
.summary-plus {
    position:absolute;top:50%;right:1vh;display:block;
    background-color: var(--c-bg);font-size: 40px;
    transform: translateY(-50%);width:3.5vh;height:3.5vh;
}
summary .s2 {max-width: 85%;}
.summary-plus::before {
    content:"+";position:absolute;top: calc(1.75vh - 12px);left: 50%;
    line-height:1;font-size: 40px;transform: translateX(-50%);
    color: var(--c-black);
}
details .expanded {
    margin-top: 2vh;padding: 2vh;
}
details[open] .summary-plus::before {content: "-";}



/* Form */
.input-wrap {position:relative;}
input, textarea, select {
    all: unset;
    padding: 1vh 2vh;border-radius: 1em;background-color: var(--c-bg);
    color: var(--c-black);font-size: 18px;text-align: left;
    width:100%;box-sizing: border-box;border: solid 1px var(--c-bg);outline:none;
}
label {position: absolute;top:1vh;left:2vh;transition: all 0.25s ease-in-out;font-size:18px;}

input:not(:placeholder-shown) ~ label,
input:focus ~ label,
input:hover ~ label,
label:hover {left:0.25vh;top: -2vh;transform: scale(0.75);transform-origin: left;color: var(--c-white);}

.valid {border: solid 1px var(--c-accent);}

@keyframes shake {
    0% {transform: translateX(0);}
    25% {transform: translateX(-5%);}
    50% {transform: translateX(0);}
    75% {transform: translateX(5%);}
    100% {transform: translateX(0);}
}
.invalid {border: solid 1px #ff2727;animation: shake 0.2s ease-in-out;}

#kontakt form {
    display:grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 3vh 2vh;
    margin-bottom:4vh;
}
.phone, .dodatno, .wrap-submit, .jmbg, .wrap-birth, .mail, .radno 
{grid-column-start: 1;grid-column-end: 3;}


.wrap-birth {
    display:grid;grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2vh;
}



.response-message {
    position:fixed;bottom:-10vh;left:0;width:100%;padding:2vh;text-align:center;
    z-index:900;box-sizing: border-box;transition: bottom 0.3s ease-in-out;
}
.show-message {bottom:0 !important;}
.message-success {background-color: var(--c-accent);color:var(--c-white);}
.message-error {background-color: #d43f3f;color: var(--c-white);}

@media(max-width:1600px) {
    :root {
        --p-padding: 5vw;
    }
}
@media(max-width:980px) {
    :root {
        --p-padding: 5vw;
    }
    section {padding: 7.5% var(--p-padding);}

    .ph {display:none !important;}
    .extra-title {font-size: 3.5em;}
    h1, .s1 {font-size: 2.5em;}
    h2, .s2 {font-size: 2em;}
    h3, .s3 {font-size: 1.5em;}
    h4, .s4 {font-size: 1.25em;}
    h5, .s5, p {font-size: 1.15em;}
    h6, .s6 {font-size: 1em;}

    .logo-menu {height: 5vh;}

    header {height:auto;padding: 20% 0 10% 0;}
    .center-header {max-width:90%;}
    .active-now {display:none !important;}

    .split-explanation {grid-template-columns: 100%;gap:3vh;}
    #opis .im-side {display:none;}
    .split-2 {margin-top:10vh;}

    .wrap-less-section {width:100% !important;box-sizing: border-box;border-radius: 0;}
    .wrap-less-section {padding: 10% 7.5%;}
    .wrap-content-inside {width:100%;}

    .branding-inside img {height:4vh;}

    article {margin-top:4vh;}
}