@charset "utf-8";
html, body{font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 1.47059; font-weight: 400; background-color: #ffffff; color: var(--black); font-style: normal;background-image: url('../img/oluk-bg.svg');background-repeat: repeat-y;background-size: 100%;}
.headerBehind{height: 44px;}
:root {--main: #7ea3bb; --black: #1f203e; --white: #f2f3f3;}
*:focus {outline: none;}
h1,h2,h3,h4,h5,h6{font-family: 'Dosis', sans-serif;}
h1{font-size:inherit; line-height:inherit; font-weight:inherit; margin:inherit; padding:inherit;}
h1.categoryTitle{font-size: 28px; color: var(--main); font-weight: bold; margin-bottom: 10px;}
h2{font-size:inherit; line-height:inherit; font-weight:inherit; margin:inherit;}
h2,.h1{font-size: 26px;text-align: center;text-transform: uppercase;font-weight: bold;position: relative;text-align: left;font-size: 35px;font-weight: 400;margin-bottom: 20px;}
h2::after,.h1::after{content: "";width: 100px;max-width: 50%;height: 4px;border-radius: 2px;background: #F3D26A;display: block;}
a{text-decoration:none; color:inherit; outline:none;}
p{margin:0 0 20px 0;}
input:focus {outline:none;}
body.doNotScroll{overflow:hidden; height:100vh;}
.transition2s{transition:all 0.2s linear 0s; -webkit-transition:all 0.2s linear 0s; -moz-transition:all 0.2s linear 0s; -o-transition:all 0.2s linear 0s; -ms-transition:all 0.2s linear 0s;}
.transition3s{transition:all 0.3s linear 0s; -webkit-transition:all 0.3s linear 0s; -moz-transition:all 0.3s linear 0s; -o-transition:all 0.3s linear 0s; -ms-transition:all 0.3s linear 0s;}
.nonMobile{display: block;}
.mobile {display:none;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 3.5px rgba(0, 0, 0, 0.3);border-radius: 2.8px;}
::-webkit-scrollbar-thumb {background: rgba(0, 0, 0, 0.4);border-radius: 1.4px;}
::-webkit-scrollbar {height: 2.8px;width: 5.6px;}
.flexHolder{display: flex;align-items: center;justify-content: space-between;}
.reverse{flex-direction: row-reverse;}
.no-scroll{overflow: hidden;}
@keyframes lineAppear {from {transform: scaleX(0);transform-origin: 0% 50%;}to {transform: scaleX(1);transform-origin: 0% 50%;}}

header{position: sticky;top: 0;z-index: 999999;transition: .8s all;background: white;box-shadow: 1px 12px 18px -5px rgba(0, 0, 0, 0.2);}
header.hidden{transform: translateY(-100%);}
header img {width: 240px;}
.blackLine {height: 40px;background: #000;}
header .menu_wrapper {display: flex;align-items: center;justify-content: space-between;padding: 20px 0;}
header .menu_wrapper .menu_holder {padding: 0;margin: 0 auto;list-style: none;display: flex;align-items: center;justify-content: space-between;gap: 20px;font-size: 16px;color: #000;text-transform: uppercase;font-weight: 500;font-family: 'Dosis', sans-serif;}
header .menu_wrapper .menu_holder > li > a > i{padding-right: 5px;}
header .menu_wrapper .menu_holder > li {display: inline-block;position: relative;}
.menu_holder > li:hover::after {content: '';position: absolute;width: 100%;height: 2px;background-color: #F3D26A;bottom: 0;left: 0;animation: lineAppear 0.3s forwards;}
header .menu_wrapper .menu_holder .subMenu {display: none;position: absolute;padding: 0;margin: 0;list-style: none;background: #fff;padding: 30px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);z-index: 999;min-width: 250px;}
header .menu_wrapper .menu_holder .subMenu li:not(:last-of-type){margin-bottom: 20px;}
header .menu_wrapper .menu_holder .subMenu li:hover a {border-bottom: 2px solid #F3D26A;}

.mainBanner {display: flex;flex-wrap: wrap;position: relative;overflow: hidden;}
.mainBanner::after {content: "";position: absolute;background-image: url(../img/OverlayDARK.svg);background-repeat: no-repeat;height: 100%;background-size: contain;width: 100%;top: 50%;transform: translateY(-50%);left: -12%;opacity: 0.3;}
.mainBanner img {width: 90%;height: 87vh;object-fit: cover;}
.mainBanner p {transform: translateY(-50%) rotate(270deg);font-size: 146px;position: absolute;right: -19px;bottom: 50%;color: #e5e5e5;right: -110px;font-weight: 100;line-height: 0;}

#about{padding: 60px 0;}
#about .flexHolder{gap: 30px;}
#about .flexHolder .text, #about .flexHolder .image {width: 50%;}
#about .flexHolder .image img{border-radius: 5px;}

#highlight {padding: 75px 0;background-image: url(../img/ZutaPozadinaL.svg);background-size: 100%;background-position: 100% 7%;text-align: center;}
#highlight p {font-size: 24px;margin-bottom: 60px;}
#highlight a {display: inline-block;background: #000;color: #fff;text-transform: uppercase;font-size: 14px;border-radius: 50px;padding: 20px 40px;}

#about1{padding: 60px 0;background-color: #f9f9f9;}
#about1 .flexHolder{gap: 30px;}
#about1 .flexHolder .text, #about1 .flexHolder .image {width: 50%;}
#about1 .flexHolder .image img{border-radius: 5px;}

#about2{padding: 60px 0;}
#about2 .flexHolder{gap: 30px;}
#about2 .flexHolder .text, #about2 .flexHolder .image {width: 50%;}
#about2 .flexHolder .image img{border-radius: 5px;}

#about3{padding: 60px 0;background-color: #f9f9f9;}
#about3 .flexHolder{gap: 30px;}
#about3 .flexHolder .text, #about3 .flexHolder .image {width: 50%;}
#about3 .flexHolder .image img{border-radius: 5px;}

#about4{padding: 60px 0;}
#about4 .flexHolder{gap: 30px;align-items: baseline;flex-wrap: wrap;}
#about4 .flexHolder .text,#about4 .flexHolder .text2{width: calc(50% - 30px);}
#about4 .flexHolder .sertifikati{margin: 0 auto;max-width: 500px;}

.pageContent{margin-bottom: 100px;}
.pageContent .image-text {display: flex;gap: 30px;margin-bottom: 30px;}
.pageContent .image-text .image {width: 50%;}
.pageContent .image-text .image img {border-radius: 5px;}
.pageContent .image-text .text {width: 50%;display: flex;flex-flow: column;}
.pageContent .image-text .text .iconsHolder {display: flex;justify-content: space-between;margin-top: auto;}
.pageContent .image-text .text .iconsHolder .icon {display: flex;align-items: center;flex-flow: column;gap: 10px;}
.pageContent .image-text .text .iconsHolder .icon img{width: 80px;}
.pageContent .image-text .text .iconsHolder .icon p {text-transform: uppercase;text-align: center;}
.pageContent table{width: 100%;}
.pageContent table th,.pageContent table td{padding: 10px;line-height: 1.4rem;border-bottom: 2px solid #eee;}

.galleryOnPage {display: flex;flex-wrap: wrap;gap: 20px;}
.galleryOnPage .item {width: calc(calc(100% - 40px) / 3);}
.galleryOnPage .item img {height: 100%;object-fit: cover;}

#contactForm {width: 100%;margin: 0 0 70px 0;float: left;}
#contactForm input, #contactForm textarea {border: 1px solid #000;color: #a0a0a0;font-size: 14px;line-height: 30px;margin: 0 0 15px 0;outline: 0;padding: 10px;resize: none;width: 100%;background: #fff}
#contactForm button {color: #fff;background: #000;border: none;line-height: 20px;font-size: 14px;padding: 10px 50px;width: 100%;text-transform: uppercase;font-weight: 400;}
#contactForm button .fas {margin: 0 10px 0 0;}
#mail_fail,#mail_success,#mail_success_footer,#mail_fail_footer {display: none;padding: 15px 0;margin: 20px 0 0 0;float: right;font-size: 13px;line-height: 12px;border-radius: 4px;width: 100%;text-align: center;}
#mail_success,#mail_success_footer {color: #044406;background-color: #B7FBB9}
#mail_fail, #mail_fail_footer {color: #D8000C;background-color: #FFBABA}

#er404 .textHolder {display: flex;align-items: center;flex-flow: column;margin-top: 90px;}
#er404 .textHolder h1 {margin: 0;font-size: 30px;}
#er404 .textHolder h2 {margin: 0 0 20px 0;font-size: 20px;}
#er404 .textHolder p{text-align: center;}

.tabsHolder{margin-top: 100px;}
.tab {display: none;}
.tab.active {display: block;}
/* Style for the tabs (you can customize) */
.tab-header {cursor: pointer;padding: 15px 50px;min-width: 170px;background-color: #000000;display: inline-block;margin-bottom: 50px;text-align: center;color: white;border-radius: 70px;text-transform: uppercase;transition: .3s all ease-in-out;}
.tab-header.active {background-color: #d13d3c;}

.drva {display: flex;flex-flow: wrap;gap:30px 15px;margin-bottom: 45px;}
.drva .drvo {width: calc(calc(100% - 75px)/6);display: flex;flex-flow: column;align-items: center;gap: 15px;}
.drva .drvo picture img {width: 150px;border-radius: 50%;border: 2px solid #fff;transition: .4s all ease-in-out;}
.drva .drvo picture img:hover {border: 2px solid #F3D26A;scale: 1.8;}

footer .galleryHolder {display: flex;flex-wrap: wrap;gap: 10px;padding: 0 40px 10px 40px;}
footer .galleryHolder img{width: calc(calc(100% - 50px)/6);}
footer .signature {height: 50px;background: #000;display: flex;color: #fff;}