/*
 Theme Name:   QBen Child
 Description:  QBen Child Theme
 Author:       ForgeBIT
 Author URI:   https://bootscore.me
 Template:     bootscore
 Version:      6.0.0
 Requires at least: 5.0
 Tested up to: 6.6
 Requires PHP: 7.4
 License: MIT License
 License URI: https://github.com/bootscore/bootscore-child/blob/main/LICENSE
 Text Domain:  bootscore
*/

/* 
All style editing is done via /assets/scss/_bootscore_custom.scss
*/

/* 
// FONT 
*/
* {
  font-family: "Satoshi", sans-serif;
}
a {
  color: var(--color-white);
  text-decoration: none;
}
a.green {
  color: var(--color-green);
}

/* TYPEOGRAPGY */
h1 {
  font-size: 48px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
p {
  font-size: 16px;
  font-style: normal;
  color: var(--color-dark-grey);
  font-weight: 400;
  line-height: 160%; /* 25.6px */
  margin-bottom: 16px;
}

/* 
// VARIABLES
*/
:root {
  --color-grey: #e7e7e7;
  --color-dark-grey: #686868;
  --color-light-grey: #f3f3f3;
  --color-white: #f8f8f8;
  --color-pure-white: #fff;
  --color-black: #1f1f1f;
  --color-green: #3a5542;
  --color-light-green: #639271;
  --color-blue: #3a4855;
  --color-light-blue: #4f6273;
  --border-grey: rgba(248, 248, 248, 0.25);
  --border-menu-grey: #f7f7f71a;
  --default-radius: 16px;
}

/* 
// SPACING 
*/
.my-16 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.my-32 {
  margin-top: 32px;
  margin-bottom: 32px;
}
.my-48 {
  margin-top: 48px;
  margin-bottom: 48px;
}
.my-64 {
  margin-top: 64px;
  margin-bottom: 64px;
}
.mt-48 {
  margin-top: 48px;
}
.mt-22 {
  margin-top: 22px;
}
.mt-11 {
  margin-top: 11px;
}

/* BODY */
body {
  background-color: var(--color-grey);
}
.col-lg.green {
  background-color: var(--color-green);
}

/* 
// CONTAINER SETTINGS
*/
@media (min-width: 576px) {
  .container,
  .container-sm {
    max-width: 1440px;
  }
}
@media (min-width: 768px) {
  .container,
  .container-sm,
  .container-md {
    max-width: 1440px;
  }
}
@media (min-width: 992px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl,
  .container-xxl {
    max-width: 1440px;
  }
}
@media (max-width: 767px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (min-width: 768px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    padding-left: 25px;
    padding-right: 25px;
  }
}
@media (min-width: 992px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    padding-left: 40px;
    padding-right: 40px;
  }
}
@media (min-width: 1200px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    padding-left: 60px;
    padding-right: 60px;
  }
}
@media (min-width: 1300px) {
  .container,
  .container-sm,
  .container-md,
  .container-lg,
  .container-xl {
    padding-left: 80px;
    padding-right: 80px;
  }
}
.row {
  margin-right: 0;
  margin-left: 0;
}
.row > * {
  padding-left: 0;
  padding-right: 0;
}

/* 
// BUTTONS
*/
.btn-animate {
  display: inline-flex;
  gap: 2px;
  text-decoration: none;
  border-radius: 1000px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  padding: 15px 23px;
  width: auto;
  transition: 0.3s cubic-bezier(0.9, 0, 0.2, 1) !important;
}
.btn-animate.green {
  background-color: var(--color-green);
  color: var(--color-white);
  border: 1px solid var(--color-green);
}
.btn-animate.white {
  background-color: var(--color-green);
  color: var(--color-white);
  border: 1px solid var(--color-white);
}
.btn-animate.transparent {
  background-color: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white);
}
.btn-animate .char {
  overflow: hidden !important;
  color: transparent !important;
}
.btn-animate .char:after,
.btn-animate.btn-brochure.white .char:after {
  visibility: visible !important;
  color: var(--color-white) !important;
  transition: transform 0.3s cubic-bezier(0.9, 0, 0.2, 1) !important;
}
.btn-animate .char:before,
.btn-animate.btn-brochure.white .char:before {
  visibility: visible !important;
  color: var(--color-green) !important;
  transition: transform 0.3s cubic-bezier(0.9, 0, 0.2, 1) !important;
}
.btn-animate.btn-brochure .char:after {
  color: var(--color-black) !important;
}
.btn-animate.btn-brochure .char:before {
  color: var(--color-white) !important;
}
.btn-animate.open-button .char:before,
.btn-animate.open-button .char:after,
.btn-animate.open-button.btn-brochure.white .char:before,
.btn-animate.open-button.btn-brochure.white .char:after {
  color: var(--color-white) !important;
}
.btn-animate.btn-brochure.open-button .char:before,
.btn-animate.btn-brochure.open-button .char:after {
  color: var(--color-black) !important;
}
.btn-animate .char:before {
  transform: translateY(-100%) !important;
}
.btn-animate:hover .char:before {
  transform: translateY(0%) !important;
}
.btn-animate:hover .char:after {
  transform: translateY(100%) !important;
}
.btn-animate span.word {
  display: inline-block !important;
  transform: translateY(2px) !important;
}
.btn-animate.hamburger-toggle span.word {
  display: flex !important;
  transform: translateY(1px) !important;
}
.btn-animate:hover {
  background-color: var(--color-white) !important;
  border-color: var(--color-green) !important;
}
#gform_1 .btn-animate:hover {
  background-color: var(--color-white) !important;
  border-color: var(--color-green) !important;
}
.popupBtn {
  cursor: pointer;
}

/* 
// HOVER BACKGROUND
*/
.hover-background {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 7.5%,
    rgb(0 0 0 / 70%) 100%
  );
  transition: 0.5s;
  z-index: 0;
}

/* 
// HEADER 
*/
.main-header {
  display: flex;
  background-color: var(--color-black);
  width: 100%;
  padding: 24px 32px;
  border-radius: 16px;
  justify-content: flex-start;
  flex-direction: column;
}
.navbar {
  --bs-navbar-padding-y: 11px;
}
.navbar-brand {
  display: flex;
  margin-right: 44px;
}
.main-header .fixed-row {
  display: flex;
  flex-grow: 1;
}
.main-header .expandable-row {
  display: none;
  flex-grow: 1;
}
.main-header .expandable-row.active {
  display: flex;
  flex-grow: 1;
}
.nav-link {
  color: #f7f7f7;
  text-align: center;
  font-family: Satoshi;
  font-size: 15px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%; /* 24px */
}
.main-header .nav-link:hover,
.main-header .nav-link:focus,
.main-header .nav-link.active {
  color: var(--color-light-green);
}
.header-contact a.btn-animate {
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  padding: 15px 23px;
}
.dekstop-navbar #bootscore-navbar {
  align-items: center;
}
.header-actions {
  flex-grow: 1;
  justify-content: flex-end;
}
.header-end-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
}
#nav-main .nav-toggler {
  margin-left: 24px !important;
  padding: 0;
  border: none;
  --bs-btn-hover-bg: none !important;
  --bs-btn-active-bg: none !important;
}
/* MENU ICON ANIMATE */
.nav-toggler svg path {
  transition: 0.3s ease;
}
.nav-toggler.active svg #Vector_2 {
  transform: translateY(8px);
}
.nav-toggler.active svg #Vector_3 {
  transform: translateY(-8px);
}

/* EXPAND MENU */
#nav-main.expanded {
  max-height: 100vh; /* Expand to full viewport height */
  overflow-y: auto; /* Enable vertical scrolling if needed */
  transition: max-height 0.3s ease-out; /* Smooth expansion */
  padding-bottom: 40px;
}
body.disabled-overflow {
  overflow: hidden;
}
.expand-menu {
  margin-top: 16px;
}
.expand-menu .nav-link {
  text-align: left;
  color: var(--color-white);
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
  border-bottom: 1px solid var(--border-menu-grey);
  padding: 16px 0;
}
.expand-menu li:first-of-type .nav-link {
  padding-top: 24px !important;
  margin-top: 8px;
  border-top: 1px solid var(--border-menu-grey);
}
.expand-menu .nav-link:hover,
.expand-menu .nav-link:focus {
  color: var(--color-white);
}
.expand-menu a.btn-animate {
  width: 100%;
  margin-top: 24px;
  justify-content: center;
}
#nav-main {
  max-height: auto; /* Initially collapsed */
  transition: max-height 0.3s ease-out; /* Smooth expansion transition */
}
.navbar-nav .dropdown-menu {
  background-color: var(--color-black);
  box-shadow: none !important;
  border: 0;
  padding: 0;
}
.mobile-menu-categories {
  display: grid;
  gap: 24px;
  padding-left: 16px;
  color: var(--color-white);
  list-style: unset;
  padding-top: 24px;
  padding-bottom: 24px;
}
.expand-menu .dropdown-item {
  padding: 0;
}
.mobile-menu-categories > a.dropdown-item,
.category-item > a.dropdown-item {
  display: none;
}
.mobile-menu-categories svg path,
.mobile-menu-categories svg rect {
  stroke: var(--color-white);
}
.mobile-menu-categories .category-item .category-link {
  display: flex;
  gap: 16px;
  align-items: center;
}
.mobile-menu-categories .category-name {
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 1.04px;
  text-transform: uppercase;
}
.expand-menu a.see-more {
  display: block;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-decoration: underline;
  text-underline-offset: 5px;
  padding-left: 16px;
  margin-bottom: 24px;
}
.dropdown-toggle {
  position: relative;
}
.dropdown-toggle::before {
  position: absolute;
  right: 0;
  content: url("https://ben.1o1o.com.hr/wp-content/uploads/2024/09/CaretDown.svg");
  display: inline-block;
  margin-left: 8px;
  transition: transform 0.3s ease;
}
.dropdown-toggle::after {
  display: none;
}
.dropdown-toggle.show::before {
  transform: rotate(180deg);
}
@media (min-width: 1200px) {
  .dropdown-toggle::before {
    display: none;
  }
  .expandable-row {
    display: none !important;
  }
}
@media (min-width: 992px) {
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 12px;
    padding-left: 12px;
  }
}
@media (max-width: 768px) {
  .main-header {
    padding: 24px;
  }
}
.navbar-nav .mega-menu .nav-link.active,  
.main-header .mega-menu .nav-link:focus {
  color: var(--color-white);
}
.navbar-nav .mega-menu .nav-link.active {
  color: var(--color-light-green);
}

.desktop-dropdown {
  display: none;
}

.mega-menu span.mega-arrow {
  display: none;
}


/* DESKTOP PRODUCTS MENU */
@media(min-width: 1200px) {
  .mega-menu span.mega-arrow {
    display: block;
    position: relative;
    transition: all .5s;
    transform: translateY(-1px);
    line-height: normal;
  }
  .mega-menu .nav-link.active span {
    top: 1px;
    transform: translateY(-1px) rotate(180deg);
  }
  .mega-menu a {
    display: flex;
    gap: 8px;
  }
  .mobile-dropdown {
    display: none;
  }
  .main-header {
    position: relative;
  }
  .main-header .desktop-dropdown {
    position: absolute;
    left: 0;
    top: 112px;
    background-color: var(--color-pure-white);
    border: 1px solid var(--color-grey);
    border-radius: 16px;
    padding: 32px;
    padding-bottom: 0;
    width: 100%;
    overflow: hidden;
    transition: all 0.3s ease-in-out;
  }
  @media (max-height: 700px) {
    .main-header .desktop-dropdown {
        max-height: 520px;
        overflow-y: scroll; /* Always show vertical scrollbar */
    }
    /* WebKit browsers (Chrome, Safari) scrollbar styles */
    .main-header .desktop-dropdown::-webkit-scrollbar {
        width: 8px; /* Set the scrollbar width */
        display: block; /* Ensure the scrollbar is visible */
    }

    .main-header .desktop-dropdown::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2); /* Style the scrollbar thumb */
        border-radius: 16px; /* Round corners for a smoother look */
    }

    .main-header .desktop-dropdown::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0.05); /* Style the scrollbar track */
        border-radius: 16px;
    }
}

  .mega-products-wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 33px;
    padding-top: 32px;
    padding-bottom: 32px;
    border-top: 1px solid #EDEEED;
  }
  .mega-product-card {
    position: relative;
  }
  .mega-image-wrapper {
    position: relative;
    border-radius: var(--default-radius);
    overflow: hidden;
  }
  .mega-product-card .product-info {
    margin-top: 16px;
  }
  .mega-product-card .referentna-oznaka {
    color: #808080;
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 1.04px;
    margin-bottom: 8px;
  }
  .mega-product-card .product-title {
    color: var(--color-black);
    font-size: 13px;
    font-weight: 700;
    line-height: 160%; /* 20.8px */
    letter-spacing: 1.04px;
    text-transform: uppercase;
  }
  .mega-product-card .product-hover-image {
    position: absolute;
    left: 0;
    top: 0;
    object-fit: cover;
    opacity: 0;
    height: 100%;
    width: 100%;
    transition: .5s;
  }
  .mega-product-card:hover .product-hover-image {
    opacity: 1;
    transform: scale(1.05);
  }
  .mega-kategorija-swiper .swiper-slide a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .mega-kategorija-swiper {
    padding-bottom: 32px;
  }
  .mega-kategorija-swiper .kategorija-item:hover  {
    background-color: var(--color-green)!important;
  }
  .mega-kategorija-swiper .kategorija-item:hover .ikona  {
    filter: brightness(0) invert(1)!important;
  }
  .mega-kategorija-swiper .kategorija-item:hover .kategorija-name  {
    color: var(--color-white);
  }
  #mega-products-container .see-all-products {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 32px;
  }
}
@media(max-width: 1199px) {
  .desktop-dropdown {
    display: none;
  }
}

/* LANGUAGE SWITCHER */
.trp-language-switcher {
  width: auto;
  height: auto;
  display: flex;
}
.trp-language-switcher a {
  padding: 0 !important;
  color: var(--color-black) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 160% !important; /* 20.8px */
  transition: 0.2s;
}
.trp-ls-shortcode-language a:not(.trp-ls-disabled-language):hover {
  padding: 0 0 0 3px !important;
  background-color: rgb(58 85 65 / 25%) !important;
}
.trp-ls-shortcode-language,
.trp-language-switcher .trp-ls-shortcode-current-language {
  width: 63px !important;
  padding: 4px 12px !important;
  border-radius: 100px !important;
  border: none !important;
}
.trp-ls-shortcode-language {
  border-radius: 14px !important;
}
.trp-language-switcher .trp-ls-shortcode-current-language {
  background-position: 75% 55%;
  background-size: 10px;
}

/* GRAVITY FORM */
.contact-form .gform_fields {
  row-gap: 24px !important;
  column-gap: 24px !important;
}
.contact-form .gfield_label {
  color: var(--color-black) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  margin-bottom: 16px !important;
}
.contact-form select,
.contact-form textarea,
.contact-form input[type="text"],
.contact-form input[type="password"],
.contact-form input[type="tel"],
.contact-form input[type="email"] {
  height: 54px !important;
  border: 1px solid var(--color-grey) !important;
  padding: 15px 23px !important;
  font-size: 12px !important;
  line-height: normal !important;
  color: var(--color-black) !important;
  background-color: var(--color-light-grey) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: normal !important;
}
.contact-form .btn-animate {
  color: var(--color-white);
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  padding: 15px 23px !important;
  border-radius: 1000px !important;
  border: 1px solid var(--color-green) !important;
  background: var(--color-green) !important;
  gap: 2px !important;
}
.contact-form .btn-animate:hover {
  border: 1px solid var(--color-green) !important;
  background: var(--color-white) !important;
}
.contact-form input[type="checkbox"] {
  border-color: var(--color-green) !important;
}
.contact-form input[type="checkbox"]:checked {
  background: var(--color-green) !important;
  border-color: var(--color-green) !important;
  font-size: 10px !important;
}
.contact-form input[type="checkbox"]:checked::before {
  color: var(--color-white) !important;
}
.contact-form #field_2_8 {
  margin-top: 16px !important;
}
.contact-form #field_2_9 {
  margin-top: -8px !important;
  margin-bottom: 16px !important;
}
.contact-form .gfield_consent_label {
  position: relative !important;
  top: -1px !important;
  color: var(--color-black) !important;
  font-size: 16px !important;
  line-height: normal !important;
}
.contact-form .gfield_consent_label a {
  font-weight: 500;
}
.contact-form .form-tabs .gfield_radio {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}
.contact-form .form-tabs .gfield_radio .gfield-choice-input {
  position: absolute;
  opacity: 0;
}
.contact-form .form-tabs .gfield_radio label {
  margin-left: 0 !important;
  color: var(--color-black);
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  padding: 15px 23px !important;
  border-radius: 100px !important;
  background-color: var(--color-grey);
  border: 1px solid var(--color-pure-white) !important;
  cursor: pointer !important;
}
.contact-form .form-tabs .gfield_radio input[type="radio"]:checked + label {
  border-color: var(--color-pure-white) !important;
  background-color: var(--color-green) !important;
  color: var(--color-white) !important;
}

/* 
// FOOTER
*/
footer {
  color: var(--color-white);
  background-color: var(--color-green);
  border-radius: 24px 24px 0 0;
  padding-top: 48px;
  padding-bottom: 48px;
  margin-top: 100px;
}
footer p {
  color: var(--color-white);
}
footer .col {
  padding: 0;
}
footer h3 {
  color: #f8f8f8;
  font-family: Satoshi;
  font-size: 40px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  max-width: 480px;
  margin-bottom: 20px;
}
.footer-1 {
  display: flex;
  flex-direction: column;
  align-items: start;
}
.footer-2 {
  display: flex;
  flex-direction: column;
  align-items: end;
  max-width: 420px;
  text-align: right;
  color: var(--color-white);
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%; /* 25.6px */
}
.footer-2 p {
  margin-bottom: 18px;
}
.footer-social-icons {
  display: inline-flex;
  gap: 14px;
  margin-bottom: 32px;
}
.social-icon {
  display: inline-flex;
}
.btn-brochure {
  display: flex;
  padding: 15px 23px;
  justify-content: center;
  align-items: flex-start;
  gap: 2px;
  text-decoration: none;
  color: var(--color-black);
  border-radius: 1000px;
  border: 1px solid var(--color-white);
  background: var(--color-white);
  transition: 0.3s cubic-bezier(0.9, 0, 0.2, 1) !important;
}
.btn-brochure:hover {
  background: var(--color-green) !important;
  border: 1px solid var(--color-white) !important;
}
.btn-brochure.white {
  background-color: var(--color-green);
  color: var(--color-white);
  border: 1px solid var(--color-white);
}
.btn-brochure.white:hover {
  background-color: var(--color-white) !important;
  border-color: var(--color-green) !important;
}
.btn-brochure svg {
  margin-right: 6px;
}
.btn-brochure:hover svg path {
  fill: var(--color-white);
}
.btn-brochure.white svg path {
  fill: var(--color-white);
}
.btn-brochure.white:hover svg path {
  fill: var(--color-green) !important;
}
.footer-rows {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
#footer-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  row-gap: 16px;
  column-gap: 58px;
}
#footer-menu li a {
  padding: 0;
  text-align: left;
}
#footer-menu li a:hover,
#footer-menu li a:focus,
#footer-menu li a.active,
.bottom-1 a:hover,
.bottom-1 a:focus,
.bottom-1 a:active {
  color: var(--color-pure-white);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.footer-rows .row:nth-child(2) {
  margin-top: 16px;
}
.footer-rows .row:nth-child(2) .footer-2 {
  max-width: 494px;
}
.footer-newsletter {
  width: 100%;
}
.footer-logo {
  padding: 20px 6px;
}

/* NEWSLETTER FORM */
.newsletter-form {
  display: flex !important;
  text-align: left !important;
  gap: 8px !important;
}
.newsletter-form .gform_body {
  flex-grow: 1;
}
.newsletter-form .gform_footer {
  width: 112px !important;
  margin-top: 0 !important;
}
.newsletter-form .gform_footer .btn-animate {
  width: 100% !important;
}
.footer-newsletter .join-text {
  text-align: left;
  margin-bottom: -10px;
}
.footer-newsletter .consent-text {
  text-align: left;
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
  line-height: 160%; /* 20.8px */
  margin-top: 8px;
}
input[type="email"] {
  height: 58px !important;
  padding: 16px !important;
  border-radius: 16px !important;
  background: var(--color-grey) !important;
  color: var(--color-dark-grey) !important;
  font-weight: 400 !important;
  line-height: 160% !important; /* 25.6px */
}
body .gform_wrapper ::placeholder,
body .gform_wrapper ::-webkit-input-placeholder,
body .gform_wrapper input[placeholder] {
  color: var(--color-dark-grey) !important;
}
.footer-newsletter .btn-animate {
  border-radius: 16px !important;
  background-color: var(--color-green) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-white) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 100% !important;
  gap: 2px !important;
}

/* BOTTOM BAR */
.bottom-bar {
  color: var(--color-white);
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
}
.bottom-bar {
  padding-top: 32px;
  border-top: 1px solid var(--border-grey);
}
.bottom-bar p {
  margin-bottom: 0;
}
.bottom-bar .bottom-1 {
  display: flex;
  gap: 32px;
  align-items: center;
}
.bottom-bar .bottom-2 {
  text-align: right;
}

/* 
// GENERAL 
*/
.card {
  background-color: var(--color-white);
  padding: 32px;
  border: 0;
  border-radius: var(--default-radius);
}
.card-body {
  padding: 0;
}
.card__green {
  background-color: var(--color-green);
}
.row__cards {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 16px;
}
.row__cards__white {
  background-color: var(--color-white);
  border-radius: 16px;
}
@media (max-width: 991px) {
  .row__cards-lg {
    grid-auto-flow: row;
  }
}
@media (max-width: 767px) {
  .row__cards-md {
    display: grid!important;
    grid-auto-flow: row;
  }
}

/* 
// HOMEPAGE
*/

/* HERO - Section 1 */
.section-1 .row__cards {
  min-height: 610px;
}
.card__hero__left {
  background-color: var(--color-green);
  color: var(--color-white);
  justify-content: space-between;
  background-image: url("https://ben.1o1o.com.hr/wp-content/uploads/2024/09/hero-bg-lines.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.card__hero__left .card__left__second {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card__hero__left p {
  color: var(--color-white);
}
.hero-buttons {
  display: flex;
  justify-items: flex-start;
  gap: 24px;
  margin-top: 16px;
}
.section-info {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  padding-left: 18px;
}
.section-info__white {
  color: var(--color-white);
}
.section-info__dark {
  color: var(--color-black);
}
.section-info::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--color-white);
  border-radius: 50%;
  top: 5px;
  left: 0;
}
.section-info__dark::before {
  background: var(--color-black);
}

.card__hero__right {
  overflow: hidden;
}
.hero-video {
  height: 100%;
}
.hero-video video {
  object-fit: cover;
}

/* Section 2 */
.animated-counter {
  color: var(--color-green);
  font-size: 48px;
  font-weight: 400;
  line-height: normal;
}
.counter-heading h3 {
  color: var(--color-black);
  font-size: 19px;
  font-weight: 500;
  line-height: normal;
  margin-top: 4px;
  margin-bottom: 24px;
}
.counter-text p {
  color: var(--color-dark-grey);
}

/* Section 3 */
.section-3 .row__cards {
  display: flex;
}
.section-3 .card__foundation:first-of-type {
  flex-basis: 10%;
}
.full-white-section .row {
  background-color: var(--color-white);
  border-radius: var(--default-radius);
  gap: 0;
}
.card__foundation {
  padding: 48px 32px;
  display: grid;
  justify-content: center;
}
.card__foundation .card__left__second p {
  color: var(--color-black);
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
}
.card__foundation .card__left__second p b {
  color: var(--color-green);
  font-weight: 700;
}
.card__foundation .card__left__first {
  display: flex;
  justify-self: start;
}
.card__foundation a {
  margin-top: 16px;
}
.card__foundation img {
  border-radius: var(--default-radius);
  height: 475px;
  object-fit: cover;
}

/* Section 3.5 */
.home-about-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 84px;
}
.home-about-section a {
  margin-top: -145px;
  border-color: var(--color-pure-white);
}

/* Section 4 */
.section-4 .kategorija-swiper .swiper-slide a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.section-4 .kategorija-swiper .swiper-slide:hover {
  background-color: var(--color-green)!important;
}
.section-4 .kategorija-item:hover .ikona {
  filter: brightness(0) invert(1)!important;
}
.section-4 .kategorija-item:hover .kategorija-name {
  color: var(--color-white)!important;
}

/* Section 5 */
.products-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 3fr;
  gap: 16px;
  padding: 0;
}
.product-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  height: 525px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 8%,
    rgb(0 0 0 / 60%) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--default-radius);
  overflow: hidden;
  padding: 32px;
  padding-right: 80px;
}
/* .product-card:hover {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 7.5%, #000 100%);
} */
.product-card:hover .hover-background {
  opacity: 1;
}
.proizvod-tags {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: flex;
  gap: 16px;
}
.product-featured-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.product-card .product-featured-image {
  transition: 0.5s;
}
.product-card:hover .product-featured-image {
  transform: scale(1.05);
}
.product-card .product-name {
  color: var(--color-white);
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
  padding-top: 8px;
  text-decoration: none;
  transition: 0.2s;
  z-index: 2;
}
.product-card:hover .product-name {
  text-decoration: underline;
  text-underline-offset: 7px;
}
.product-card .referentna-oznaka {
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.04px;
  z-index: 2;
}
.product-icon {
  position: absolute;
  bottom: 0;
  right: 0;
}
.product-card .see-more-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  opacity: 0;
  transition: 0.5s;
}
.product-card:hover .see-more-icon {
  opacity: 1;
}

/* Section 6 */
.reference-text h3 {
  color: var(--color-black);
  font-weight: 400;
  font-size: 28px;
  line-height: normal;
  margin-bottom: 32px;
}
.reference-logotipi {
  max-width: 930px;
}
.reference-logotipi img {
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
.reference-button {
  display: flex;
  margin-top: 70px;
  align-self: end;
}
/* Section 7 */
.section-7 .row {
  display: flex;
  gap: 53px;
}
.col.card__solutions:first-of-type {
  display: flex;
  flex-direction: column;
  max-width: 380px;
  padding: 0;
}
.col.card__solutions:last-of-type {
  display: flex;
  padding: 0;
}
.col.card__solutions:first-of-type h3 {
  color: var(--color-black);
  font-size: 40px;
  font-weight: 400;
  line-height: normal;
  margin-top: 32px;
  margin-bottom: 16px;
}
.col.card__solutions:first-of-type p {
  margin-bottom: 32px;
}
.col.card__solutions:last-of-type {
  display: grid;
  padding: 0;
}
.rjesenje-swiper {
  width: 100%;
  height: auto;
  padding-bottom: 67px;
}
.rjesenje-card,
.reference-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  height: 525px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 8%,
    rgb(0 0 0 / 60%) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--default-radius);
  color: var(--color-white);
  overflow: hidden;
  padding: 32px;
  padding-right: 80px;
}
/* .rjesenje-card:hover {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 7.5%, #000 100%);
} */
.rjesenje-card:hover .hover-background,
.reference-card:hover .hover-background {
  opacity: 1;
}
.rjesenje-featured-image,
.reference-featured-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.rjesenje-card .rjesenje-featured-image,
.reference-card .reference-featured-image {
  transition: 0.5s;
}
.rjesenje-card:hover .rjesenje-featured-image,
.reference-card:hover .reference-featured-image {
  transform: scale(1.05);
}
.rjesenje-card .location,
.reference-card .location {
  position: relative;
  display: flex;
  flex-grow: 1;
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  z-index: 2;
}
.rjesenje-card .rjesenje-name,
.reference-card .reference-name {
  color: var(--color-white);
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
  padding-top: 8px;
  text-decoration: none;
  transition: 0.2s;
  z-index: 2;
}
.rjesenje-card:hover .rjesenje-name,
.reference-card:hover .reference-name {
  text-decoration: underline;
  text-underline-offset: 7px;
}
.rjesenje-card .see-more-icon,
.reference-card .see-more-icon {
  position: absolute;
  bottom: -2px;
  right: -2px;
  opacity: 0;
  transition: 0.5s;
}
.rjesenje-card:hover .see-more-icon,
.reference-card:hover .see-more-icon  {
  opacity: 1;
}
.rjesenje-swiper .swiper-button-prev:after,
.rjesenje-swiper .swiper-button-next:after,
.swiper.gallery-swiper .swiper-button-prev:after,
.swiper.gallery-swiper .swiper-button-next:after,
.swiper.mySwiper2 .swiper-button-prev:after,
.swiper.mySwiper2 .swiper-button-next:after {
  display: none;
}
.remaining-icons {
  display: flex;
  background-color: var(--color-white);
  color: var(--color-green);
  width: 40px;
  height: 40px;
  font-size: 13px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: 1.04px;
  border-radius: 100px;
  justify-content: center;
  align-items: center;
}
.swiper-button-next {
  width: 42px;
  top: auto;
  left: 60px;
  bottom: 0;
}
.swiper-button-prev {
  width: 42px;
  top: auto;
  left: 0;
  bottom: 0;
}

/* Section 8 */
.section-8 .row {
  background-color: var(--color-white);
  border-radius: var(--default-radius);
  gap: 50px;
}
.section-8 .card {
  padding: 56px 32px;
}
.section-8 .card__left {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-start;
  justify-content: center;
  gap: 15px;
}
.card__distribution h3 {
  color: var(--color-black);
  font-size: 40px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0;
}
.section-8 img {
  max-height: 300px;
  width: 100%;
  object-fit: cover;
  border-radius: var(--default-radius);
}
/* Section 9 */
.posts-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 3fr;
  gap: 16px;
  padding: 0;
}
.post-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  height: 525px;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0) 8%,
    rgb(0 0 0 / 60%) 100%
  );
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--default-radius);
  overflow: hidden;
  padding: 32px;
}
/* .post-card:hover {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 7.5%, #000 100%);
} */
.post-card:hover .hover-background {
  opacity: 1;
}
.post-card-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}
.post-card .post-card-image {
  transition: 0.5s;
}
.post-card:hover .post-card-image {
  transform: scale(1.05);
}
.post-card .post-title {
  color: var(--color-white);
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
  padding-top: 8px;
  text-decoration: none;
  transition: 0.2s;
  z-index: 2;
}
.post-card:hover .post-title {
  text-decoration: underline;
  text-underline-offset: 7px;
}
.section-9 .row__cards:last-of-type {
  display: flex;
  justify-content: flex-end;
  padding-top: 32px;
}
/* Section 10 */
.section-10 {
  margin-top: 58px;
}
.section-10 .row {
  background-color: var(--color-blue);
  border-radius: var(--default-radius);
  overflow: hidden;
}
.card__grey {
  background-color: var(--color-blue);
  justify-content: center;
  padding: 0 0 0 58px;
  height: 400px;
}
.card__grey:last-of-type {
  padding: 32px 58px;
}
.section-10 .card__right p {
  max-width: 340px;
}
.card__grey h3 {
  color: var(--color-white);
  font-size: 33px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 16px;
}
.card__grey p {
  color: var(--color-white);
  margin-bottom: 32px;
}
.section-10 .card__left {
  display: flex;
  padding: 0;
}

/*
.home-slider ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.home-slider ul li {
    display: flex;
    flex-shrink: 0;
    margin: 23px;
}
.home-slider ul img {
    border-radius: 16px;
    height: 318px!important;
    width: 240px!important;
    object-fit: cover;
}
@keyframes home-slider {
    0%    {transform: translateY(0); opacity: 1;}
    2%    {opacity: 1;}
    95%   {opacity: 1;}
    98%   {opacity: 1;}
    100%  {transform: translateY(-50%); opacity: 1;}
  }
.home-slider.slow ul{
    animation-direction: reverse !important;
}
.home-slider.fast ul {
    animation: home-slider 5s linear infinite reverse;
}
.home-slider.slow ul {
    animation: home-slider 5s linear infinite;
}
*/

/* Home slider v2 */
.home-slider {
  position: absolute;
  top: 0;
  visibility: visible;
}
.home-slider.fast {
  left: 40px;
}
.home-slider.slow {
  right: 0;
}
.home-slider ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.home-slider ul li {
  display: flex;
  flex-shrink: 0;
  margin: 23px;
}
.home-slider ul img {
  border-radius: 10px;
  width: 100%;
}
.home-slider .home-slider-img {
  max-width: 234px;
  height: 282px;
  object-fit: cover;
}
@keyframes home-slider {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  2% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  98% {
    opacity: 1;
  }
  100% {
    transform: translateY(-50%);
    opacity: 1;
  }
}
.home-slider ul {
  animation: home-slider 25s linear infinite;
}
.home-slider.slow ul {
  animation-direction: reverse !important;
}
@media (max-width: 1360px) {
  .home-slider.fast {
    left: 20px;
  }
  .home-slider.slow {
    right: -40px;
  }
}
@media (max-width: 1150px) {
  .home-slider.fast {
    left: -15px;
  }
  .section-10 .row {
    display: flex;
  }
  .section-10 .card__grey:first-of-type {
    padding: 32px 25px 32px 50px;
    flex-basis: 20%;
  }
}

/***********************************/
/*       PROIZVODI - ARHIVA        */
/***********************************/
.row__archive-hero {
  background-color: var(--color-blue);
  color: var(--color-white);
  justify-content: space-between;
  background-image: url("/wp-content/uploads/2024/09/header-lines.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 65%;
  border-radius: 16px;
  gap: 32px;
  padding: 48px 32px;
}
.row__archive-hero .card {
  background: transparent;
  color: var(--color-white);
  border: 0;
}
.inside-hero-second {
  align-items: center;
  gap: 24px;
}
.row__archive-hero h1 {
  font-size: 40px;
  font-weight: 400;
  line-height: normal;
}
.row__archive-hero p {
  color: var(--color-white);
  font-weight: 500;
  max-width: 600px;
}

/***********************************/
/*           KONTAKT               */
/***********************************/
.inside-hero-second .card__right {
  display: flex;
  justify-content: flex-end;
}
.inside-hero-second .card__right p {
  max-width: 530px;
}
.contact-section-2 .row__cards {
  display: flex;
}
.contact-section-2 .card__right {
  max-width: 391px;
  gap: 24px;
  height: auto;
  align-self: flex-start;
}
.contact-section-2 .map-section {
  border-radius: 16px !important;
  overflow: hidden;
  height: 192px;
}
.contact-section-2 .info-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 228px;
}
.contact-section-2 .info-section.wh {
  max-width: 250px;
}
.contact-section-2 h4 {
  color: var(--color-white);
  font-size: 19px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 0;
}
.contact-section-2 p {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0;
}

/***********************************/
/*           MEDIA KIT             */
/***********************************/
.content-media hr {
  margin-bottom: 0;
}
.media-section-2 {
  margin-top: 40px;
  margin-bottom: 40px;
}
.content-media h3 {
  color: #1f1f1f;
  font-size: 33px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0;
}

/* SECTION 2 */
.media-section-2 hr,
.media-section-4 hr {
  margin-bottom: 32px;
}
.row__heading {
  margin-bottom: 16px;
  gap: 16px;
}
.features {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 24px;
}
.featured-images,
.featured-documents {
  display: flex;
  padding: 4px 12px;
  align-items: center;
  gap: 4px;
  border-radius: 100px;
  border: 1px solid #edeeed;
  background: var(--color-grey);
}
.media-grid {
  display: grid;
  margin-top: 56px;
  gap: 40px;
}
.media-grid-logo-colors {
  grid-template-columns: repeat(3, 1fr);
}
.color-item {
  display: flex;
  padding: 32px;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 24px;
  border-radius: 16px;
  background: var(--color-grey);
}
.color-item h5 {
  color: var(--color-black);
  text-align: center;
  font-size: 19px;
  font-weight: 500;
  line-height: 160%;
  margin-bottom: 0;
}
.color-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.color-buttons a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 500;
  line-height: 160%;
}
.color-item img.logo-color {
  max-height: 100px;
}
.color-item img.logo-color.no-bg {
  max-height: 118px;
}

/* SECTION 3 */
.media-grid-web-colors {
  grid-template-columns: repeat(4, 1fr);
}
.media-grid-web-colors .color-item {
  gap: 0;
}
.color-item.web-black {
  background-color: var(--color-black);
}
.color-item.web-white {
  background-color: var(--color-white);
  border: 1px solid var(--color-grey);
}
.color-item.web-green {
  background-color: var(--color-green);
}
.color-item.web-blue {
  background-color: var(--color-blue);
}
.media-grid-web-colors p {
  color: var(--color-white);
}
.media-grid-web-colors .web-white p {
  color: var(--color-black);
}
.media-grid-web-colors .color-type {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  align-self: stretch;
}
.media-grid-web-colors p {
  text-align: center;
  font-size: 19px;
  font-weight: 500;
  line-height: 160%;
  margin-bottom: 0;
}
.media-grid-web-colors hr {
  border-top: 1px solid rgba(248, 248, 248, 0.4);
  width: 100%;
  margin: 24px 0 !important;
}
.media-grid-web-colors .web-white hr {
  border-top: 1px solid rgba(31, 31, 31, 0.4);
}
/* SECTION 4 */
.media-section-4 {
  margin-top: 40px;
}
/* SECTION 5 */
.media-grid-documents {
  display: flex;
  gap: 24px;
}
.document-image {
  height: 200px;
  width: 200px;
}
.media-grid-documents .document-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.media-grid-documents .document-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 200px;
}
.media-grid-documents .document-name {
  color: var(--color-black);
  font-size: 16px;
  font-weight: 500;
  line-height: 160%;
}
.pswp__img {
  padding: 10px;
  box-sizing: border-box;
  background-color: var(--color-black);
}

/***********************************/
/*             BLOG                */
/***********************************/
@media(min-width: 768px){
  .blog-loop-item a {
      cursor: url('/wp-content/uploads/2024/10/blog-cursor.svg') 50 50, auto !important;
  }
}
.blog-loop-item {
  position: relative;
}
.blog-loop-item a.stretched-link {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
.blog-section-1 {
  margin-top: 10px;
}
.blog-section-2 {
  margin-top: 24px;
}
.blog-loop-item .card .row {
  gap: 40px;
}
.blog-loop-item {
  gap: 16px;
}
.blog-loop-item:not(.blog-loop-item:last-of-type) {
  margin-bottom: 16px;
}
.blog-loop-item .featured-image {
  max-width: 200px;
  border-radius: var(--default-radius);
  overflow: hidden;
}
.blog-loop-item .featured-image img {
  height: 200px;
  object-fit: cover;
  border-radius: var(--default-radius);
  transition: 0.5s;
}
.blog-loop-item:hover .featured-image img {
  transform: scale(1.1);
}
.blog-inside-left {
  max-width: 130px;
}
.blog-inside-left .card-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.blog-inside-right .card-body {
  display: flex;
  justify-content: flex-end;
}
.blog-loop-item .blog-post-title {
  color: var(--color-black);
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
  max-width: 560px;
  margin-bottom: 0;
}
.blog-section-1 .inside-hero-second {
  flex-direction: column;
}
.blog-section-1 .inside-hero-second .card__right {
  justify-content: flex-start;
}
.category-section {
  display: flex;
}
.category-badge {
  display: flex;
  padding: 8px 16px;
  justify-content: center;
  border-radius: 1000px;
  background: var(--color-grey);
  margin-bottom: 0;
  pointer-events: none;
}
.category-badge a {
  background-color: transparent !important;
  color: var(--color-black) !important;
  font-size: 13px;
  font-weight: 500;
  line-height: normal;
  padding: 0;
}
.post-meta {
  color: var(--color-black);
  font-size: 13px;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  margin-bottom: 0;
  padding-left: 8px;
}
.entry-footer {
  margin-top: 64px;
}
.pagination {
  margin-bottom: 0 !important;
  gap: 16px;
  justify-content: center;
}
.page-link {
  display: flex;
  padding: 9px 15px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #f2f2f2;
  min-width: 40px;
  min-height: 38px;
  color: #808080;
  font-size: 13px;
  font-weight: 700;
  box-shadow: none !important;
  cursor: pointer;
}
.page-link:hover,
.page-link:focus,
.page-link.active,
.active > .page-link {
  color: var(--color-white);
  background-color: var(--color-green);
  border-color: var(--color-green);
}
.page-link[aria-label="Previous Page"],
.page-link[aria-label="Next Page"],
.page-link[aria-label="First Page"],
.page-link[aria-label="Last Page"] {
  position: relative;
  top: -1px;
  background-color: transparent;
  font-size: 26px;
  line-height: 13px;
  border: none;
}
.page-link[aria-label="Previous Page"]:hover,
.page-link[aria-label="Previous Page"]:focus,
.page-link[aria-label="Next Page"]:hover,
.page-link[aria-label="Next Page"]:focus,
.page-link[aria-label="First Page"]:hover,
.page-link[aria-label="First Page"]:focus,
.page-link[aria-label="Last Page"]:hover,
.page-link[aria-label="Last Page"]:focus {
  color: var(--color-green);
}
.page-link[aria-label="First Page"] {
  padding-right: 0;
}
.page-link[aria-label="Last Page"] {
  padding-left: 0;
}
.page-link.hidden {
  visibility: hidden; /* Hides the element but retains its layout */
}
.category-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.category-button.btn-animate {
  background: transparent;
  border: 1px solid var(--color-white);
}
.category-button.btn-animate .char:before {
  color: var(--color-blue) !important;
}
.category-button.btn-animate.active {
  color: var(--color-blue) !important;
  background: var(--color-white);
  border: 1px solid var(--color-white);
}
.category-button.btn-animate.active .char:after {
  color: var(--color-blue) !important;
}

/***********************************/
/*         SINGLE POST             */
/***********************************/
.single-post .card__green,
.contact-section-2 .card__green,
.single-rjesenje-section-2 .card__green {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 160px; /* Offset from the top */
}
.card__green.lines {
  background-image: url("/wp-content/uploads/2024/09/lines-rotated-1.png");
  background-repeat: no-repeat;
  background-position: 32% 39%;
  background-size: 210%;
}
.single-post-section-2 {
  margin-top: 32px;
}
.single-post-section-2 .row__cards,
.single-rjesenje-section-2 .row__cards {
  display: flex;
  gap: 32px;
}
.single-post-section-2 .card__right,
.single-rjesenje-section-2 .card__right {
  max-width: 470px;
  min-height: 639px;
  gap: 8px;
  height: auto;
  align-self: flex-start;
  overflow: hidden;
}
.single-post-section-1 .section-info,
.single-karijera-section-1 .section-info {
  padding-left: 0;
}
.single-post-section-1 .col-md.card__left {
  flex-basis: 35%;
}
.single-post-section-1 .section-info a,
.single-karijera-section-1 .section-info a {
  display: flex;
  gap: 8px;
  align-items: center;
}
.single-post-section-1 .section-info:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.single-post-section-1 .section-info::before,
.single-karijera-section-1 .section-info::before {
  display: none;
}
.single-post-section-1 .inside-hero-second .card__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  align-self: flex-end;
  gap: 16px;
}
.single-post-section-1 .social-share {
  display: flex;
  gap: 8px;
}
.single-post .post-thumbnail img,
.single-post .wp-block-image img {
  width: 100% !important;
  max-height: 400px;
  object-fit: cover !important;
  border-radius: var(--default-radius) !important;
  margin-bottom: 24px !important;
}
.single-post .entry-content h2,
.single-rjesenje .entry-content h2,
.single-rjesenje .entry-content h3 {
  color: var(--color-black);
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 16px;
}
.single-post figure {
  margin-bottom: 0;
}
.single-post-section-3 {
  margin-top: 50px;
}
.posts-loop-section h2 {
  color: black;
  font-size: 40px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 16px;
}
.card__green .intro-text p {
  color: var(--color-white);
  font-size: 13px;
  font-weight: 500;
  line-height: 160%; /* 20.8px */
  margin-bottom: 0;
}
.card__green .heading-text h3 {
  color: var(--color-pure-white);
  font-size: 23px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 24px;
}
.card__green .single-green-bg {
  position: absolute;
  bottom: -18.6%;
  right: -30%;
  z-index: -1;
}

/***********************************/
/*        KARIJERA ARHIVA          */
/***********************************/
.karijera-section-1 .row__archive-hero {
  background-color: var(--color-green);
  flex-direction: row;
  gap: 64px;
}
.archive-hero-image {
  display: flex;
  flex-basis: 6%;
}
.archive-hero-image img {
  border-radius: var(--default-radius);
  -webkit-filter: brightness(80%);
  filter: brightness(80%);
  object-fit: cover;
}
.karijera-section-1 .card__left {
  flex-basis: 13%;
}
.karijera-section-1 .card__left a {
  margin-top: 16px;
}
.col.card__left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.archive-hero-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.archive-hero-main h2 {
  color: var(--color-pure-white);
  font-size: 48px;
  font-weight: 400;
  line-height: normal;
}
.archive-hero-main p {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  max-width: 430px;
}
.archive-hero-main .btn-brochure {
  margin-top: 16px;
}
.karijera-section-2 {
  margin-top: 48px;
  margin-bottom: 48px;
}
.karijera-section-4 {
  margin-top: 48px;
}
.karijera-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.karijera-item {
  display: flex;
  justify-content: space-between;
  padding: 32px;
  gap: 56px;
  background: var(--color-white);
  border-radius: var(--default-radius);
  align-items: center;
}
.karijera-item .left-column {
  flex-basis: auto;
}
.karijera-item .right-column {
  flex-basis: 40%;
  display: flex;
  gap: 80px;
  align-items: center;
}
.info-kategorije {
  display: flex;
  gap: 80px;
  align-items: center;
}
.karijera-item .right-column div {
  text-align: left;
  min-width: 113px;
}
.karijera-item .right-column div:last-of-type {
  min-width: 142px;
}
.karijera-item h2 {
  color: var(--color-black);
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0;
}
.karijera-item p {
  color: #808080;
  font-size: 13px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  letter-spacing: 1.04px;
  margin-bottom: 0;
}
#pozicije { 
  scroll-margin-top: 120px; 
}

/***********************************/
/*        KARIJERA SINGLE          */
/***********************************/
.single-karijera-section-2 {
  margin-top: 12px;
}
.single-karijera-section-2 .row {
  gap: 16px;
}
.single-karijera-section-2 .job-info {
  flex-basis: 13.5%;
}
.job-info h3 {
  color: var(--color-black);
  font-size: 19px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 0;
}
.job-info p,
.job-info ul,
.job-info li {
  color: var(--color-black);
  font-size: 16px;
  font-weight: 500;
  line-height: 160%;
  margin-bottom: 0;
}
.job-info ul {
  padding-left: 24px;
}
.job-feature {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.job-feature:not(.job-feature:last-of-type) {
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.job-feature:not(.job-feature:first-of-type) {
  padding-top: 32px;
}
.single-karijera-section-2 .form-section {
  height: auto !important;
  align-self: flex-start;
}

/* FORM */
.gform_fileupload_rules {
  display: none !important;
}
input[type="file"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #9b9b9b !important;
  height: 60px !important;
}
input[type="file"]:before {
  content: "Odaberi...";
  display: inline-block;
  border-radius: 4px;
  padding: 15px 23px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.5;
  margin: 0;
  overflow: visible;
  color: #ffffff !important;
  font-size: 16px;
  font-weight: 500;
  box-sizing: border-box;
  max-width: 100%;
  background-color: var(--color-green) !important;
  margin-right: 10px;
  border: solid 1px #e7e7e7 !important;
  cursor: pointer;
}
.translatepress-en_GB input[type="file"]:before {
  content: "Upload..." !important;
}
input[type="file"]::-webkit-file-upload-button {
  visibility: hidden;
  display: none;
}
.file-upload .gfield_description {
  color: #9b9b9b !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: normal !important;
}

/***********************************/
/*             O NAMA              */
/***********************************/
.onama-section-3 .row,
.onama-section-4 .row {
  display: flex;
  min-height: 610px;
}
.content-card {
  padding-right: 64px;
  border: 1px solid var(--color-grey);
}
.content-card.content-card__green {
  background: var(--color-green);
}
.content-card.content-card__blue {
  background: var(--color-light-blue);
}
.section-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section-content img {
  max-width: 40px;
}
.section-content h3 {
  color: var(--color-pure-white);
  font-size: 33px;
  font-weight: 400;
  line-height: normal;
}
.section-content p {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
}
.full-image-column {
  display: flex;
  border-radius: var(--default-radius);
  overflow: hidden;
  flex: 24.5%;
}
.full-image-column img {
  object-fit: cover;
}

/***********************************/
/*          PROIZVODNJA            */
/***********************************/
.row__process-hero {
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.8) 100%
    ),
    url("https://ben.1o1o.com.hr/wp-content/uploads/2024/09/process-hero.jpg");
  background-size: cover!important;
  background-position: center!important;
  background-repeat: no-repeat;
  min-height: 600px;
  padding: 68px 55px;
}
.process-hero-content {
  display: flex;
  flex-direction: column;
  max-width: 575px;
  gap: 16px;
}
.row__process-hero h1 {
  color: var(--color-grey);
  font-size: 48px;
  font-weight: 400;
  line-height: normal;
  margin-top: 16px;
  margin-bottom: 0;
}
.row__process-hero p {
  color: var(--color-grey);
  font-size: 16px;
  font-weight: 500;
  line-height: 160%;
}
.row__sustain {
  gap: 37px;
  min-height: 830px;
}
.row__sustain .col__left,
.row__sustain .col__right {
  display: flex;
}
.row__sustain .col__left {
  flex-direction: column;
  justify-content: space-between;
}
.row__sustain .col__right {
  flex-basis: 13%;
  overflow: hidden;
  border-radius: var(--default-radius);
}
.row__sustain .col__right img {
  object-fit: cover;
}
.sustain-text-section .row__left-first {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.row__sustain img {
  border-radius: var(--default-radius);
}
.sustain-text-section h3 {
  color: var(--color-black);
  font-size: 40px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 0;
}
.sustain-text-section .row__left-first p:not(.section-info) {
  color: var(--color-dark-grey);
  font-size: 16px;
  font-weight: 500;
  line-height: 160%;
  margin-bottom: 0;
}
.row__sustain .row__left-second img {
  max-height: 420px;
  width: 100%;
  object-fit: cover;
}
.materials-row {
  gap: 53px;
}
.materials-row h3 {
  margin-top: 16px;
}
.process-section-3 .sustain-text-section {
  max-width: 375px;
}
.materijali-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 16px;
}
.materijal-item {
  background-size: cover !important;
  background-position: center !important;
  border-radius: var(--default-radius);
  min-height: 120px;
  display: flex;
  height: 120px;
  padding: 32px;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
}
.materijal-item .naziv {
  color: var(--color-pure-white);
  font-size: 19px;
  font-weight: 400;
  line-height: normal;
}
.process-section-4 .row__process-hero {
  background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.5) 0%,
      rgba(0, 0, 0, 0.8) 100%
    ),
    url("https://ben.1o1o.com.hr/wp-content/uploads/2024/09/objava4.jpeg");
}
.process-section-4 .process-hero-content {
  max-width: 468px;
}
.process-section-5 .row__sustain {
  gap: 56px;
  min-height: auto;
}
.process-section-5 .row__sustain .col__right {
  align-items: flex-end;
}
.process-section-5 h3 {
  margin-top: 16px;
}
ul.koraci-list {
  list-style: none;
  padding-left: 0;
  margin-top: 14px;
  margin-bottom: 0;
}
.korak-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  cursor: pointer;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  border-bottom: 1px solid rgba(31, 31, 31, 0.10);
  transition: .5s;
}
.korak-item:first-of-type {
  border-top: 1px solid rgba(31, 31, 31, 0.10);
}
.koraci-image {
  max-width: 100%;
  display: none;
}
.korak-item.active {
  color: var(--color-grey);
  border-bottom: 1px solid rgba(31, 31, 31, 0.10);
  background: #3A5542;
}
.korak-item.active svg path {
  stroke: #DBE6DE;
}
.three-feature-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.process-feature {
  background-position: center!important;
  background-size: cover!important;
  padding: 32px; 
  border-radius: var(--default-radius);
  text-align: center; 
  display: flex;
  justify-content: center; 
  align-items: center; 
  height: 500px; 
}
.process-feature p {
  color: var(--color-grey);
  text-align: center;
  font-size: 19px;
  font-weight: 500;
  line-height: normal;
  margin: 0;
}
.process-feature:first-of-type p {
  max-width: 280px;
}
.process-image {
  display: flex;
}
/* Hide mobile version on desktop */
.desktop-version {
  display: block;
}
.tablet-version {
  display: none;
}
.process-section-7 .card__foundation-video {
  display: flex;
  height: auto;
  max-height: 500px;
}
.process-section-7 .hero-video {
  min-height: auto;
  border-radius: var(--default-radius);
  overflow: hidden;
}
.process-section-7 .hero-video video {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

/***********************************/
/*       POSTANI PARTNER           */
/***********************************/
.partner-hero-content {
  display: flex;
  padding-top: 130px;
  padding-bottom: 120px;
  align-items: center;
  text-align: center;
  gap: 32px;
  flex-direction: column;
}
.partner-hero-content p {
  color: var(--color-black);
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 160%;
  max-width: 530px;
  margin-bottom: 0;
}
.partner-image-row img {
  max-height: 600px;
  object-fit: cover;
  border-radius: var(--default-radius);
}
.razine-partnerstva-row {
  gap: 64px;
}
.partnerstvo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.partnerstvo-item {
  position: relative;
  display: flex;
  height: 500px;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  overflow: hidden;
}
.partnerstvo-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/wp-content/uploads/2024/09/postani-partner-bg.png');
  background-size: cover; 
  background-position: center; 
  opacity: 1;
  z-index: 0; 
}
.partnerstvo-item-2::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url('/wp-content/uploads/2024/09/postani-premier-partner-bg.png');
  background-size: 50%;
  background-position: bottom right;
  background-repeat: no-repeat;
  opacity: 1;
  z-index: 0;
}
.partnerstvo-item-1 {
  background-color: var(--color-green);
}
.partnerstvo-item-2 {
  background-color: var(--color-blue);
}
.partnerstvo-item h3 {
  color: var(--color-pure-white);
  font-size: 33px;
  font-weight: 400;
  line-height: normal;
  margin-top: 0;
}
.partnerstvo-item p,
.partnerstvo-item li {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
}
.partnerstvo-item ul {
  margin-top: 32px;  
}
.razine-partnerstva-row .col__left {
  max-width: 371px;
}
.partnerstvo-item .btn-brochure {
  width: 100%;
}
.partnerstvo-item .btn-brochure,
.partnerstvo-content {
  z-index: 2;
}
.partnerstvo-item-2 .btn-brochure:hover {
  background-color: var(--color-blue)!important;
}
.partners-animated-section {
  gap: 16px;
}
.partners-animated-section .sustain-text-section {
  padding-top: 48px;
  padding-bottom: 127px;
  align-self: flex-start;
}
.partners-animated-section .sustain-text-section p {
  max-width: 525px;
}
.partners-animated-section .col__right {
  max-width: 525px;
}
.partners-animated-section .sustain-text-section,
.partner-section-6 .sustain-text-section {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 160px; /* Offset from the top */
}
.partners-animated-section .kako-postati-partner {
  display: grid;
  gap: 20px;
}
.kako-postati-partner-item {
  display: flex;
  padding: 32px;
  min-height: 350px;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  border-radius: var(--default-radius);
  border: 1px solid var(--color-grey);
  background: var(--color-green);
}
.kako-postati-partner-item h3 {
  color: var(--color-pure-white);
  font-size: 33px;
  font-weight: 400;
  line-height: normal;
  margin: 0;
}
.kako-postati-partner-item p {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
  margin: 0;
}
.kako-postati-partner-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kako-postati-partner {
  position: relative;
}
.kako-postati-partner-item {
  position: relative;
  z-index: 1; 
}
.kako-postati-partner-item.sticky {
  position: sticky;
  top: 160px; 
  z-index: 10;
}
/* Optional: Add some transition effect for smoothness */
.kako-postati-partner-item.sticky .kako-postati-partner-content {
  transition: all 0.3s ease-in-out;
}
/* .kako-postati-partner-item.sticky .kako-postati-partner-content {
  transition: opacity 0.3s ease, transform 0.3s ease;
  transform: translateY(10px);
  opacity: 1;
}
.kako-postati-partner-item .kako-postati-partner-content {
  opacity: 0;
  transform: translateY(50px);
} */
.partner-section-5 {
  margin-top: -16px;
}
.partner-section-5 .row__cards {
  min-height: 610px;
}
.partner-section-5 .content-card {
  justify-content: space-between;
}
.partner-section-5 h3,
.partner-section-5 p {
  margin-bottom: 0;
}
.partnerstvo-item ul,
.partner-section-5 ul {
  margin-top: 32px;
  display: grid;
  gap: 16px;
  padding-left: 0;
  color: var(--color-white);
  font-size: 16px;
  font-weight: 400;
  line-height: 160%;
}
.partnerstvo-item li,
.partner-section-5 li {
  list-style: none; /* Removes default list bullets */
  padding-left: 30px; /* Adjusts spacing to account for the background image */
  background-image: url('/wp-content/uploads/2024/09/li-check.svg');
  background-repeat: no-repeat;
  background-position: 0 40%; /* Position the image at the start of the li element and vertically center it */
  background-size: 20px 20px; /* Adjust the size of the SVG, change the value as needed */
}
.partnerstvo-item li.missing {
  background-image: url('/wp-content/uploads/2024/10/missing-item.svg');
  opacity: .5;
}
.partner-section-6 .row__cards {
  display: flex;
}
.card__blue {
  background-image: url(https://ben.1o1o.com.hr/wp-content/uploads/2024/09/postani-partner-forma-bg.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.card__blue {
  display: flex;
  max-width: 520px;
  padding: 48px 32px;
  align-self: flex-start;
  gap: 32px;
  background-color: var(--color-blue);
}
.card__blue.sustain-text-section h3 {
  margin-top: 16px;
  color: var(--color-pure-white);
}
.card__blue.sustain-text-section p {
  color: var(--color-white)!important;
}
#partnerstvo { 
  scroll-margin-top: 150px; 
}

/***********************************/
/*         ARHIVA REFERENCI        */
/***********************************/
.referenca-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 20px;
}
.referenca-item {
  position: relative;
  padding: 32px;
  color: white;
  height: 750px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-radius: var(--default-radius);
  transition: all .5s;
}
.referenca-item .referenca-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9;
}
.referenca-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--default-radius);
}
.referenca-item-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: .5s;
}
.referenca-item-bg {
  -webkit-filter: brightness(80%);
  filter: brightness(80%);
}
.referenca-item:hover .referenca-item-bg {
  transform: scale(1.05);
}
.referenca-item.full-width {
  grid-column: span 2;
}
/* .referenca-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
} */
.referenca-content {
  position: relative;
  z-index: 2;
  width: 100%;
}
.referenca-content {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  bottom: 100px; /* Offset from the top */
}
.referenca-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 24px 32px;
  align-items: center;
  border-radius: 16px;
  background: #F8F8F8;
}
.referenca-row p {
  color: var(--color-black);
  text-align: center;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 1.04px;
  text-transform: uppercase;
  margin-bottom: 0;
}
.referenca-left-column {
  display: flex;
  align-items: center;
}
.referenca-icon img {
  max-width: 50px;
  margin-right: 15px;
  margin-top: -8px;
}
.referenca-title h2 {
  margin: 0;
}
.referenca-right-column {
  text-align: right;
  margin-left: 24px;
  padding-left: 24px;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}
.referenca-lokacija {
  font-size: 16px;
}
.filter-expand {
  display: flex;
  padding: 32px;
  align-items: flex-start;
  border-radius: 16px;
  background: var(--color-green);
}
.filter-content {
  display: flex;
  width: 100%;
  justify-content: space-between;
  cursor: pointer;
}
.filter-content img {
  transition: .5s;
}
.filter-content.active img {
  transform: rotate(180deg);
}
.filters-display {
  margin-top: 16px;
  border-top: 1px solid rgba(248, 248, 248, 0.10);
  display: none;
}

/***********************************/
/*        SINGLE REFERENCA         */
/***********************************/
.row__reference-hero {
  background-color: var(--color-green);
}
.row__reference-hero h1 {
  color: var(--color-pure-white);
  font-size: 33px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 16px;
} 
.row__reference-hero p {
  color: var(--color-white);
  max-width: 765px;
} 
.referenca-info {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-direction: column;
}
.znacajka-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
}
.swiper-slider-section {
  position: relative;
}
.swiper-slider-section .swiper-button-prev:after,
.swiper-slider-section .swiper-button-next:after {
  display: none;
}
.swiper-slider-section .swiper-button-prev,
.swiper-slider-section .swiper-button-next {
  opacity: 0;
  transition: .5s all;
}
.row__reference-ostalo:hover .swiper-button-prev,
.row__reference-ostalo:hover .swiper-button-next {
  opacity: 1;
}
.swiper-slider-section .swiper-button-prev {
  width: 72px;
  height: 72px;
  top: auto;
  left: -36px;
  bottom: 45%;
}
.swiper-slider-section .swiper-button-next {
  width: 72px;
  height: 72px;
  top: auto;
  left: auto;
  right: 28px;
  bottom: 45%;
}
.row__reference-ostalo:hover .swiper-slider-section .swiper-button-next.swiper-button-disabled, 
.row__reference-ostalo:hover .swiper-slider-section .swiper-button-prev.swiper-button-disabled {
  opacity: .35;
}
.swiper-slider-section .swiper-button-prev:hover,
.swiper-slider-section .swiper-button-next:hover {
  transform: scale(1.05);
}
.swiper-button-next, 
.swiper-button-prev {
  user-select: none;
}

/* SCROLL GALLERY */
.single-reference-section-2 {
  margin-top: 24px;
  overflow-x: auto;
  cursor: grab;
  -webkit-overflow-scrolling: touch; /* Enables smooth scrolling on touch devices */
  white-space: nowrap; /* Ensures all items are inline for horizontal scrolling */
}
.single-reference-section-2:active {
  cursor: grabbing;
}
.single-reference-section-2::-webkit-scrollbar {
  display: none;
}
.reference-gallery-list {
  display: inline-flex; /* Display flex but keep it inline for horizontal scrolling */
  justify-content: flex-start; /* Align items to start */
  gap: 16px;
  padding: 0;
}
.reference-gallery-list .gallery-item {
  flex-shrink: 0; /* Prevent shrinking of items */
}
.reference-gallery-list .gallery-item {
  height: 500px;       /* Fixed height */
  width: auto;         /* Width adjusts automatically based on aspect ratio */
  border-radius: var(--default-radius); /* Maintain your border radius */
  object-fit: cover;   /* Ensures the image covers the area without distortion */
  user-select: none;   /* Prevents text/image selection */
  outline: none;       /* Removes blue outline on click */
  -webkit-user-drag: none; /* Disables drag action on images in WebKit browsers */
}

.single-reference-section-3 {
  margin-top: 64px;
}
.row__reference-ostalo h2 {
  color: var(--color-black);
  font-size: 40px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 24px;
}

.reference-single-swiper .swiper-slide,
.rjesenje-single-swiper .swiper-slide {
	width: 30.5%!important;
}


/***********************************/
/*         ARHIVA RJEŠENJA         */
/***********************************/
.row__rjesenja {
  gap: 24px;
}
.rjesenja-section-2 .col__left {
  max-width: 455px;
}
.rjesenje-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 columns by default */
  gap: 16px;
}
.rjesenje-grid-item.full-width {
  grid-column: span 2; /* Full-width item */
}
.rjesenje-grid-item.half-width {
  grid-column: span 1; /* Half-width item */
}
.znacajka-icons.rjesenja {
  display: none;
  z-index: 2;
  gap: 16px;
  margin-top: 16px;
  margin-bottom: 0;
}
.row__rjesenja .filter-expand {
  position: -webkit-sticky; /* For Safari */
  position: sticky;
  top: 160px; /* Offset from the top */
}

/***********************************/
/*      SINGLE RJEŠENJE            */
/***********************************/
.row__rjesenje-hero {
  display: flex;
  gap: 16px;
  min-height: 610px;
}
.row__rjesenje-hero .znacajka-icons {
  margin-bottom: 16px;
}
.row__rjesenje-hero .col__left {
  max-width: 525px;
  padding-right: 64px;
  display: flex;
  flex-direction: column;
}
.row__rjesenje-hero .col-lg.green .rjesenje-info {
  margin-top: auto;
}
.row__rjesenje-hero .col-lg.col__right {
  flex-basis: 20%;
  display: flex;
  justify-content: center;
  align-items: center; 
}
.col-lg.green .rjesenje-title {
  color: var(--color-pure-white);
  font-size: 33px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 16px;
}
.col-lg.green p {
  color: var(--color-white);
}
.row__rjesenje-hero .rjesenje-info {
  margin-top: auto;
}
.single-rjesenje-featured-image {
  width: 100%;
  border-radius: var(--default-radius);
  overflow: hidden;
}
.single-rjesenje-featured-image img {
  height: 100%;
  width: 100%;
  max-height: 610px;
  object-fit: cover;
}
.single-rjesenje-section-2 {
  margin-top: 40px;
}
.swiper.gallery-swiper {
  width: 100%;
  height: auto;
}
.swiper.gallery-swiper .swiper-slide {
  width: 58%!important;
  height: 610px;
  overflow: hidden;
  border-radius: var(--default-radius);
}
.swiper.gallery-swiper .gallery-image {
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.swiper.gallery-swiper .swiper-button-next {
  width: 70px;
  height: 70px;
  top: auto;
  left: auto;
  right: 60px;
  bottom: 46%;
  transition: .5s;
}
.swiper.gallery-swiper .swiper-button-prev {
  width: 70px;
  height: 70px;
  top: auto;
  left: 20px;
  bottom: 46%;
  transition: .5s;
}
.swiper.gallery-swiper .swiper-button-next.swiper-button-disabled, .swiper.gallery-swiper .swiper-button-prev.swiper-button-disabled {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

/******************************************/
/*      ARHIVA PROIZVOD - NASTAVAK        */
/******************************************/
.arhiva-proizvod-section-1 .inside-hero-second .card__right p {
  max-width: 600px;
}
.products-archive-wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* 6 columns */
  gap: 20px; /* Add space between items */
}
.products-archive-wrapper .product-card {
  background: #f7f7f7;
}
.products-archive-wrapper .product-featured-image {
  z-index: 0;
}
.products-archive-wrapper .product-card.large-item .product-featured-image {
  padding: 10px;
  object-fit: contain;
}
.products-archive-wrapper .product-card {
  position: relative; /* Make the product card a positioning context */
  overflow: hidden; /* Hide any overflowing content */
  height: 490px;
}
.products-archive-wrapper .product-hover-background,
.featured-products-wrapper .product-hover-background {
  position: absolute;
  object-fit: cover;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 1;
  transition: .5s;
}
.products-archive-wrapper .product-card:hover .product-hover-background,
.featured-products-wrapper .product-card:hover .product-hover-background {
  opacity: 1;
  transform: scale(1.05);
}
.products-archive-wrapper .hover-background,
.featured-products-wrapper .hover-background{
  z-index: 1;
}
.products-archive-wrapper .product-card:hover .product-name {
  color: var(--color-white);
}
.product-card.large-item {
  grid-column: span 3; /* Large items span 3 columns */
}
.product-card.small-item {
  grid-column: span 2; /* Small items span 2 columns */
}
.product-link-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10; /* Ensure the link is on top */
  display: block;
  text-indent: -9999px; /* Hide the link text but make the entire card clickable */
}
.products-archive-wrapper .product-card .product-name {
  color: var(--color-black);
  font-size: 18px;
  font-weight: 900;
  line-height: 160%;
  letter-spacing: 0.72px;
  text-transform: uppercase;
}
.products-archive-wrapper .product-card .see-more-icon {
  z-index: 2;
}
/* Optional: Adjust for responsiveness */
@media (max-width: 768px) {
  .products-archive-wrapper {
      grid-template-columns: 1fr; /* Make it a single column on small screens */
  }
  .product-card.large-item,
  .product-card.small-item {
      grid-column: span 1; /* On small screens, all items take full width */
  }
}
.kategorija-swiper .swiper-slide,
.mega-kategorija-swiper .swiper-slide {
  background-color: var(--color-white)!important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  flex: none;
  width: auto;
  padding: 24px 32px;
  border-radius: var(--default-radius);
  transition: 0.5s!important;
}
.kategorija-swiper .kategorija-name,
.mega-kategorija-swiper .kategorija-name {
  color: var(--color-black);
  font-size: 13px;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 1.04px;
  text-transform: uppercase;
}
.kategorija-swiper .swiper-slide:hover,
.mega-kategorija-swiper .swiper-slide:hover {
  cursor: pointer;
}
.kategorija-item.active {
  background-color: var(--color-green)!important; /* Change the background color when active */
}
.kategorija-item.active .kategorija-name {
  color: var(--color-white);
}
.kategorija-item {
  cursor: pointer; /* Make it look clickable */
}
.kategorija-item.active .ikona {
  filter: brightness(0) invert(1)!important;
}

/***********************************/
/*       SINGLE PROIZVOD           */
/***********************************/
.single-proizvod-info {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}
.single-proizvod-info .section-info {
  color: var(--color-black);
}
.single-proizvod-info .section-info {
  color: var(--color-black);
}
.single-proizvod-info .section-info::before {
  background: var(--color-black);
}
.single-proizvod-title {
  color: black;
  font-size: 33px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 16px;
}
.row__proizvod-hero {
  gap: 16px;
  min-height: 465px;
}
.hero-proizvod-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 16px;
}
.hero-proizvod-cta .btn-animate {
  width: 100%;
  justify-content: center;
  align-items: flex-start;
}
.hero-proizvod-cta .btn-brochure {
  background-color: var(--color-grey);
}
.row__proizvodi-ostalo h2 {
  color: var(--color-black);
  font-size: 40px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 16px;
}

/* PRODUCT GALLERY */
.single-proizvod-section-1 .col__left {
  width: 50%;
}
.single-proizvod-section-1 .gallery-section,
.single-proizvod-section-1 .gallery-section .swiper,
.single-proizvod-section-1 .gallery-section img {
  object-fit: cover;
  height: 100%;
  width: 100%;
  border-radius: var(--default-radius);
}
.single-proizvod-section-1 .gallery-section img {
  left: 0;
  right: 0;
  position: absolute;
}
.row__proizvod-hero_second {
  margin-top: 20px;
}
.row__proizvod-hero_second .swiper-slide {
  max-width: 100px;
  height: 100px;
}
.row__proizvod-hero_second img {
  height: 100%;
  width: 100%;
  border-radius: var(--default-radius);
  object-fit: cover;
}
.swiper.mySwiper2 .swiper-button-next {
  width: 70px;
  height: 70px;
  top: auto;
  left: auto;
  right: 28px;
  bottom: 45%;
  transition: .5s;
}
.swiper.mySwiper2 .swiper-button-prev {
  width: 70px;
  height: 70px;
  top: auto;
  left: 28px;
  bottom: 45%;
  transition: .5s;
}
.swiper.mySwiper2 .swiper-button-next:hover,
.swiper.mySwiper2 .swiper-button-prev:hover,
.gallery-swiper .swiper-button-next:hover,
.gallery-swiper .swiper-button-prev:hover {
  transform: scale(1.05);
}
.mySwiper2 .swiper-button-next.swiper-button-disabled, .mySwiper2 .swiper-button-prev.swiper-button-disabled {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}
.row__proizvod-hero_second .col__right {
  display: flex;
  align-self: flex-end;
  justify-content: flex-end;
  height: 50px;
}
.row__proizvod-hero_second .btn-animate svg {
  margin-right: 8px;
}
.row__proizvod-hero_second .btn-animate:hover svg path {
  fill: var(--color-green)!important;
}
.row__proizvod-hero_second .btn-animate {
  position: fixed;
  margin-bottom: -30px;
  z-index: 999;
}

/* SECTION 2 - Detalji/Opis */
.single-proizvod-section-2 {
  margin-top: 50px;
  background: var(--color-white);
  border-radius: 16px;
}
.single-proizvod-section-2 .opis-detalji {
  padding: 32px;
  padding-bottom: 48px;
  border-top: 1px solid rgba(31, 31, 31, 0.10);
}
.single-proizvod-section-2 .proizvod-tabs {
  padding: 32px;
  display: flex;
  gap: 16px;
}
.btn-animate.white.tab {
  background-color: var(--color-grey);
  color: var(--color-black);
  border: 1px solid var(--color-pure-white);
}
.btn-animate.white.tab.active {
  background-color: var(--color-green);
  color: var(--color-white);
  border: 1px solid var(--color-white);
}
.btn-animate.white.tab .char:after {
  color: var(--color-black) !important;
}
.btn-animate.white.tab.active .char:after {
  color: var(--color-white) !important;
}
.btn-animate.tab:hover {
  background-color: var(--color-green) !important;
  border-color: var(--color-green) !important;
  color: var(--color-white)!important;
}
.btn-animate.tab .char:before {
  color: var(--color-white) !important;
}
.detalji-section, .opis-section {
  display: none;
}
.single-proizvod-section-2 .specifikacije-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.single-proizvod-section-2 .specifikacije-row:last-of-type {
  padding-bottom: 0;
  border-bottom: none;
}
.single-proizvod-section-2 .specifikacije-left {
  color: black;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: 1.04px;
}
.single-proizvod-section-2 .specifikacije-right {
  color: var(--color-dark-grey);
  font-size: 16px;
  font-weight: 400;
  line-height: 160%; /* 25.6px */
}
.opis-section {
  max-width: 815px;
}
.opis-section h2,
.opis-section h3,
.opis-section h4 {
  color: var(--color-black);
  font-size: 33px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 16px;
}
.single-proizvod-section-3 .row {
  gap: 16px;
}
.single-proizvod-section-3 h2,
.single-proizvod-section-3 h3,
.single-proizvod-section-4 h3 {
  color: var(--color-black);
  font-size: 33px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 16px;
}
.single-proizvod-section-3 .materijali-grid {
  display: flex;
  flex-wrap: wrap;
  margin-top: 32px;
}
.single-proizvod-section-3 .materijal-item {
  width: 155px;
  height: 80px;
  min-height: 80px;
  padding: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.single-proizvod-section-3 .materijal-item .naziv {
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}
.single-proizvod-section-4 .text {
  max-width: 800px;
}
.tehnicki-nacrt-img {
  height: 345px;
  max-height: 345px;
  margin-top: 16px;
}
@media (max-width: 768px) {
.tehnicki-nacrt-img {
  height: auto;
  width: 345px;
}
}
.single-proizvod-section-4 .boje-grid {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.single-proizvod-section-4 .boje-grid div {
  display: flex;
  width: 200px;
  height: 100px;
  padding: 32px;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  font-size: 19px;
  font-weight: 400;
  line-height: normal;
  color: var(--color-white);
}
.single-proizvod-section-4 .boje-grid .ral-1018, 
.single-proizvod-section-4 .boje-grid .ral-9010,
.single-proizvod-section-4 .boje-grid .ral-7038 {
  color: var(--color-black);
}


/* .single-proizvod-section-4 {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  border-radius: var(--default-radius);
  padding-bottom: 100px;
} */
.product-virtual-hero-container {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  background: #F8F8F8;
  padding: 2rem;
  justify-content: center;
  align-items: center;
  width: 680px;
}
.cloudimage-360-view-360-icon {
  margin: auto auto -100px auto!important;
  /* background: url(https://scaleflex.cloudimg.io/v7/filerobot/js-cloudimage-360-view/360_view.svg) 50% 50% / contain no-repeat rgb(255 255 255 / 0%)!important; */
}

/* FEATURED PRODUCTS */
.products-archive-wrapper .product-card .referentna-oznaka,
.featured-products-wrapper .product-card .referentna-oznaka {
  opacity: 0;
  transition: .5s;
}
.products-archive-wrapper .product-card:hover .referentna-oznaka,
.featured-products-wrapper .product-card:hover .referentna-oznaka {
  opacity: 1;
}
.featured-products-wrapper .product-card {
  position: relative;
  overflow: hidden;
  height: 490px;
  background: #f7f7f7;
}
.featured-products-wrapper .product-card .product-name {
  color: var(--color-black);
  font-size: 18px;
  font-weight: 900;
  line-height: 160%;
  letter-spacing: 0.72px;
  text-transform: uppercase;
}
.featured-products-wrapper .product-card:hover .product-name {
  color: var(--color-white);
}
.featured-products-wrapper .product-featured-image {
  z-index: 0;
}

/***********************************/
/*         RESPONSIVE              */
/***********************************/
/*
// GENERAL
*/
@media (max-width: 991px) {
  h1 {
    font-size: 40px;
  }
  .card {
    padding: 32px 24px;
  }
}

/* 
// HOMEPAGE 
*/
/* SMALL DESKTOP */
@media (min-width: 992px) and (max-width: 1199px) {
.section-1 .row__cards {
    min-height: 550px;
  }
  .product-card {
    max-height: 460px;
  }
  .section-7 .row {
    gap: 15px;
  }
  .col.card__solutions:first-of-type {
    max-width: 295px;
  }
  .rjesenje-card {
    max-height: 460px;
  }
  .post-card {
    max-height: 460px;
  }
}

/* TABLET */
@media (max-width: 991px) {
  .section-1 .row__cards {
    min-height: 580px;
  }
  .hero-video {
    height: 100%;
    min-height: 500px;
  }
  .hero-buttons {
    display: grid;
    gap: 16px;
  }
  .section-2 .card {
    padding: 32px;
  }
  .section-3 .row__cards {
    display: grid;
  }
  .full-white-section .section-info {
    padding-bottom: 64px;
  }

  /* 
  // GRID TO SLIDER 
  */
  /* Products */
  .section-5 {
    overflow-x: auto;
  }
  .section-5::-webkit-scrollbar {
    display: none;
  }
  .products-wrapper {
    gap: 16px;
  }
  .products-wrapper .product-card {
    min-width: 56vw;
    min-height: 455px;
    height: 100%;
  }


  .product-card,
  .rjesenje-card,
  .post-card,
  .product-card {
    max-height: 455px;
    padding: 24px;
  }
  .section-7 .row {
    gap: 15px;
  }
  .col.card__solutions:first-of-type {
    max-width: 200px;
  }
  .section-8 .row {
    gap: 0px;
  }
  .card__distribution .card__inner {
    display: flex;
    flex-grow: 1;
  }
  .section-8 img {
    max-height: 100%;
  }
  .col.card.card__grey:first-of-type {
    padding: 0;
  }
  .card__grey:last-of-type {
    padding: 32px;
  }
  .home-slider ul li {
    margin: 14px;
  }
  footer h3 {
    max-width: 400px;
  }
  .bottom-bar .bottom-2 {
    text-align: right;
    max-width: 180px;
  }
  /* MOBILE SLIDER SECTION */
  .section-10 .row {
    position: relative;
    overflow: hidden;
  }
  .col.card.card__grey:first-of-type {
    position: absolute;
    z-index: 1;
  }
  .card__grey:last-of-type {
    text-align: center;
    text-align: -webkit-center;
    z-index: 2;
    background-color: rgba(31, 31, 31, 0.4);
  }
  .section-10 .card__right p {
    max-width: 280px;
    margin-bottom: 24px;
  }
  .home-slider.fast {
    left: auto;
  }
  .home-slider.slow {
    left: 300px;
  }
}

@media (max-width: 767px) {
  .section-1 .section-info {
    padding-bottom: 64px;
  }
  .card__foundation img {
    height: 380px;
  }
  .home-about-section {
    padding-bottom: 16px;
  }
  .home-about-section a {
    margin-top: -75px;
  }
  .kategorija-proizvoda-list {
    gap: 16px;
  }
  .kategorija-proizvoda-list .kategorija-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .products-wrapper .product-card {
    min-width: 86vw;
  }
  .section-6 .card {
    padding: 24px;
  }
  .reference-button {
    margin-top: 32px;
  }
  .section-7 .row {
    display: grid;
    gap: 52px;
  }
  .col.card__solutions:first-of-type {
    max-width: 100%;
  }
  .section-8 .card {
    padding: 24px;
  }
  .section-8 .card:last-of-type {
    padding-top: 8px;
  }

  /* Blog */
  .section-9 .row__cards {
    overflow-x: auto;
  }
  .section-9 .row__cards::-webkit-scrollbar {
    display: none;
  }
  .posts-wrapper {
    gap: 16px;
  }
  .posts-wrapper .post-card {
    min-width: 86vw;
    min-height: 455px;
    height: 100%;
  }

  /* Home slider section */
  .home-slider.fast {
    left: -110px;
  }
  .home-slider.slow {
    left: 190px;
  }

  /* Swiper mobile */
  .swiper-slide {
    width: 86vw;
  }

  /* Footer */
  footer {
    padding-top: 32px;
    padding-bottom: 32px;
  }
  .footer-rows {
    padding: 0 24px;
  }
  footer .row {
    display: grid;
    gap: 32px;
  }
  footer h3 {
    max-width: 100%;
  }
  .footer-2 {
    align-items: flex-start;
    max-width: 100%;
    text-align: left;
  }
  #footer-menu {
    grid-template-columns: 138px 1fr;
    column-gap: 50px;
  }
  .footer-rows .row:nth-child(2) .footer-2 {
    max-width: 100%;
  }
  .footer-logo {
    padding: 20px 0px 30px 0;
    width: 100%;
  }
  .newsletter-form {
    flex-direction: column !important;
  }
  .newsletter-form .gform_footer {
    width: 100% !important;
    margin-top: 0 !important;
  }
  .gform_footer .btn-animate {
    width: 100% !important;
    padding: 15px !important;
  }
  .bottom-bar {
    margin-top: -18px;
  }
  .bottom-bar .bottom-1 {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }
  .bottom-bar .bottom-2 {
    text-align: center;
    max-width: 100%;
  }
}

/* 
// KONTAKT 
*/
/* TABLET */
@media (min-width: 768px) and (max-width: 991px) {
  .contact-section-2 .card__left {
    flex-basis: 30%;
  }
  .contact-section-2 .card__right {
    max-width: 100%;
    flex-basis: 0%;
  }
}
/* MOBILE */
@media (max-width: 768px) {
  .contact-section-2 .card__right {
    max-width: 100%;
  }
  .inside-hero-second {
    row-gap: 16px;
  }
  .inside-hero-second .card__right {
    justify-content: flex-start;
  }
}

/* 
// MEDIA KIT 
*/
/* TABLET */
@media (max-width: 991px) {
  .media-grid {
    gap: 24px;
    grid-template-columns: repeat(2, 1fr);
  }
}
/* MOBILE */
@media (max-width: 768px) {
  .media-grid {
    column-gap: 16px;
    row-gap: 24px;
  }
  .media-grid-logo-colors,
  .media-grid-web-colors {
    grid-template-columns: repeat(1, 1fr);
  }
  .features {
    justify-content: flex-start;
  }
}
/* SMALL MOBILE */
@media (max-width: 500px) {
  .media-grid-documents .document-display {
    width: 130px;
  }
  .media-grid-documents .document-image {
    height: 130px;
    width: 130px;
  }
}

/* 
// BLOG
*/
/* TABLET */
@media (max-width: 991px) {
  .blog-loop-item .featured-image img {
    height: 100%;
  }
}
/* MOBILE */
@media (max-width: 768px) {
  .blog-loop-item .card .row {
    flex-direction: column;
  }
  .blog-loop-item .featured-image {
    max-width: 100%;
  }
  .blog-loop-item .featured-image img {
    height: 345px;
  }
  .blog-inside-right .card-body {
    justify-content: flex-start;
  }
  .blog-loop-item:not(.blog-loop-item:last-of-type) {
    margin-bottom: 40px;
  }
}

/* 
// SINGLE BLOG
*/
/* TABLET */
@media (max-width: 991px) {
  .single-post-section-1 .col-md.card__left {
    flex-basis: 100%;
  }
  .single-post-section-1 .inside-hero-second {
    margin-top: -16px;
  }
  .single-post-section-2 {
    margin-top: 16px;
  }
  .single-post-section-2 .row__cards {
    display: flex;
    gap: 16px;
  }
  .single-post-section-2 .card__right,
  .single-rjesenje-section-2 .card__right {
    max-width: 100%;
    flex-basis: 100%;
    min-height: 540px;
  }
  .single-post-section-2 .col__left {
    flex-basis: 28%;
  }
}
/* MOBILE */
@media (max-width: 768px) {
  .single-post-section-2 .row__cards {
    display: flex;
    gap: 32px;
    flex-direction: column;
  }
}

/* 
// ARHIVA KARIJERA
*/
/* SMALL DESKTOP */
@media (max-width: 1199px) {
  .karijera-item .right-column,
  .karijera-item .info-kategorije {
    gap: 24px;
  }
}
/* TABLET */
@media (max-width: 991px) {
  .karijera-section-1 .archive-hero-main {
    margin-top: 32px;
  }
  .karijera-section-1 .row__archive-hero {
    flex-direction: column;
    gap: 32px;
  }
  .archive-hero-image img {
    max-height: 400px;
    width: 100%;
  }
}
/* MOBILE */
@media (max-width: 768px) {
  .karijera-item {
    flex-direction: column;
    gap: 32px;
  }
  .karijera-item .right-column {
    flex-direction: column;
  }
  .karijera-item h2,
  .karijera-item .right-column div,
  .karijera-item .right-column div:last-of-type {
    text-align: center;
    min-width: auto;
  }
}

/* 
// SINGLE KARIJERA
*/
/* TABLET */
@media (max-width: 991px) {
  .row__cards {
    display: flex;
  }
  .single-karijera-section-2 .job-info {
    flex-basis: 100%;
  }
}


/* 
// O NAMA
*/
/* TABLET */
@media (max-width: 991px) {
  .onama-hero-image img {
    min-height: 430px;
    object-fit: cover;
    border-radius: var(--default-radius);
  }
  .onama-section-3 .row, .onama-section-4 .row {
    min-height: auto;
  }
  .content-card.content-card__green .section-content p:last-of-type,
  .content-card.content-card__blue .section-content p:last-of-type {
    margin-bottom: 0;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .onama-section-2 {
    margin-bottom: 64px;
  }
  .content-card.content-card__green {
    padding: 32px;
  }
  .half-image-row .full-image-column img {
    min-height: 365px;
  }
  .onama-section-4 .half-image-row {
    display: flex !important;
    flex-direction: column-reverse;
  }
  .onama-section-5 {
    margin-top: 64px;
    margin-bottom: 64px;
  }
  .onama-section-7 {
    margin-top: 64px;
  }
  .card__distribution h3 {
    color: var(--color-black);
  }
}

/* 
// PROIZVODNJA
*/
/* SMALL DESKTOP */
@media (max-width: 1200px) {
  .process-section-3 .sustain-text-section {
    max-width: 330px;
  }
}
/* TABLET */
@media (max-width: 991px) {
  .row__process-hero h1 {
    font-size: 40px;
  }
  .process-section-2 .row__left-second {
    display: none!important;
  }
  .process-section-2 .row__sustain {
    min-height: auto;
  }
  .process-section-2 .row__sustain .col__right {
    gap: 8px;
    flex-basis: 100%;
  }
  .process-section-2 .process-image {
    display: flex!important;
    min-width: 189px;
    min-height: 224px;
  }
  .process-section-2 .process-mobile-image {
    display: flex!important;
    max-height: 200px;
    align-self: flex-end;
  }
  .process-section-3 .sustain-text-section {
    max-width: 100%;
  }
  .materials-row {
    gap: 40px;
  }
  .process-feature {
    height: 300px;
  }
  .desktop-version {
    display: none;
}
.tablet-version {
    display: block;
}
ul.koraci-list-mobile {
  list-style: none;
  padding-left: 0;
  margin-top: 14px;
  margin-bottom: 0;
}
.korak-item-mobile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  cursor: pointer;
  color: var(--color-black);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  border-bottom: 1px solid rgba(31, 31, 31, 0.10);
  transition: .5s;
}
.korak-item-mobile .korak-text {
display: flex;
padding: 16px 16px 16px 24px;
justify-content: space-between;
align-items: center;
align-self: stretch;
transition: .5s;
}
.koraci-image-mobile {
  width: 100%;
  display: none; /* Will be shown with JS */
}
.koraci-img-mobile {
 margin-top: 8px;
  max-width: 100%;
  height: auto;
}
.korak-item-mobile.active .korak-text {
  color: var(--color-grey);
  background-color: #3A5542;
}
.korak-item-mobile.active svg path {
  stroke: #DBE6DE;
}
.korak-item-mobile:first-of-type {
  border-top: 1px solid rgba(31, 31, 31, 0.10);
}
.process-section-5 .row__sustain {
  gap: 0;
}
.process-section-5 {
 margin-bottom: 48px!important;
}
.process-section-6 {
  margin-top: 32px!important;
  margin-bottom: 64px!important;
}
}

/* MOBILE */
@media (max-width: 768px) {
  .process-section-2 .process-image {
    min-width: 189px;
    min-height: 224px;
  }
  .process-section-2 .process-mobile-image {
    max-height: 112px;
  }
  .materijali-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
  }
  .three-feature-section {
    grid-template-columns: repeat(1, 1fr);
  }
  .process-section-7 .hero-video {
    max-height: 480px;
  }
}
/* SMALL MOBILE */
@media (max-width: 500px) {
  .process-section-7 .hero-video {
    max-height: 380px;
  }
}


/* 
// POSTANI PARTNER
*/
/* TABLET */
@media (max-width: 991px) {
  .razine-partnerstva-row.materials-row {
    gap: 64px;
  }
  .razine-partnerstva-row .col__left {
    max-width: 100%;
  }
  .partners-animated-section .sustain-text-section,
  .partner-section-6 .sustain-text-section {
    position: relative;
    top: 0;
    padding-bottom: 48px;
  }
  .partners-animated-section .col__right {
    max-width: 100%;
  }
  .kako-postati-partner-swiper {
    display: grid;
    overflow: hidden;
    padding-bottom: 66px;
  }
  .kako-postati-partner-swiper .swiper-slide {
    height: 100%;
    gap: 32px;
  }
  .kako-postati-partner-swiper .swiper-button-prev:after,
  .kako-postati-partner-swiper .swiper-button-next:after {
    display: none;
  }
  .content-card .btn-brochure {
    margin-top: 16px;
  }
  .partner-section-5 .full-image-column img {
    height: 350px;
    width: 100%;
  }
  .partner-section-6 .card__blue {
    max-width: 100%;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .partner-hero-content {
    padding-top: 45px;
    padding-bottom: 60px;
  }
  .partnerstvo-grid {
    grid-template-columns: auto;
  }
}


/* 
// ARHIVA REFERENCA
*/
/* SMALL DESKTOP */
@media (max-width: 1119px) {
}
/* TABLET */
@media (max-width: 991px) {
  .referenca-grid {
    grid-template-columns: repeat(1, 1fr);
    grid-gap: 20px;
  }
  .referenca-item {
    height: 500px;
  }
  .referenca-item.full-width {
    grid-column: span 1;
  }
}
/* MOBILE */
@media (max-width: 768px) {
  .referenca-row {
    flex-direction: column;
    gap: 8px;
  }
  .referenca-item {
    padding: 8px;
  }
  .referenca-row {
    flex-direction: column;
    padding: 16px;
    align-items: flex-start;
  }
  .referenca-right-column {
    margin-left: 0;
    padding-left: 34px;
    border-left: 0;
  }
  .referenca-icon img {
    margin-right: 8px;
    margin-top: -8px;
  }
}


/* 
// SINGLE REFERENCA
*/
/* SMALL DESKTOP */
@media (max-width: 1119px) {
  .reference-gallery-list .gallery-item {
    height: 400px;
  }
  .reference-single-swiper .reference-card {
    max-height: 455px;
    padding: 24px;
  }
}

/* TABLET */
@media (max-width: 991px) {
  .reference-gallery-list .gallery-item {
    height: 350px;
  }
  .swiper-slider-section .swiper-button-prev,
  .swiper-slider-section .swiper-button-next {
    display: none!important;
  }
}

/* MOBILE */
@media (max-width: 768px) {
  
}

/* 
// ARHIVA RJEŠENJA
*/
/* SMALL DESKTOP */
@media (max-width: 1119px) {
  .rjesenje-grid {
    grid-template-columns: repeat(1, 1fr);
  }
  .rjesenje-grid-item.full-width {
    grid-column: span 1;
  }
}
/* TABLET */
@media (max-width: 991px) {
  .rjesenje-grid {
    grid-gap: 40px;
  }
  .rjesenja-section-2 .col__left {
    max-width: 100%;
  }
}
/* MOBILE */
@media (max-width: 768px) {
}

/* 
// SINGLE RJEŠENJE
*/
/* SMALL DESKTOP */
@media (max-width: 1119px) {
  .row__rjesenje-hero {
    min-height: 500px;
  }
  .swiper.gallery-swiper .swiper-slide {
    width: 62% !important;
    height: 550px;
  }
  .rjesenje-single-swiper .swiper-slide,
  .reference-single-swiper .swiper-slide {
    width: 38%!important;
  }
}
/* TABLET */
@media (max-width: 991px) {
  .single-rjesenje-featured-image img {
    max-height: 700px;
  }
  .row__rjesenje-hero .col__left {
    max-width: 100%;
  }
  .row__rjesenje-hero .col-lg.col__right {
    flex-basis: 100%;
  }
  .swiper.gallery-swiper .swiper-slide {
    width: 80% !important;
    height: 500px;
  }
  .rjesenje-single-swiper .swiper-slide,
  .reference-single-swiper .swiper-slide {
    width: 45% !important;
  }
  .rjesenje-single-swiper {
    padding-bottom: 0;
  }
}
/* MOBILE */
@media (max-width: 768px) {
  .row__rjesenje-hero .col__left {
    padding-right: 32px;
  }
  .swiper.gallery-swiper .swiper-slide {
    width: 88% !important;
    height: 350px;
  }
  .swiper.gallery-swiper .swiper-button-next {
    width: 50px;
    height: 50px;
    right: 10px;
  }
  .swiper.gallery-swiper .swiper-button-prev {
    width: 50px;
    height: 50px;
    left: 10px;
  }
  .rjesenje-single-swiper .swiper-slide,
  .reference-single-swiper .swiper-slide {
    width: 65% !important;
  }
}
/* SMALL MOBILE */
@media (max-width: 500px) {
  .swiper.gallery-swiper .swiper-slide {
    width: 88% !important;
    height: 350px;
  }
  .rjesenje-single-swiper .swiper-slide,
  .reference-single-swiper .swiper-slide {
    width: 90% !important;
  }
}



/* 
// ARHIVA PROIZVODA
*/
/* SMALL DESKTOP */
@media (max-width: 1119px) {
}
/* TABLET */
@media (max-width: 991px) {
  .products-archive-wrapper {
    grid-template-columns: repeat(4, 1fr);
  }
  .product-card.large-item {
    grid-column: span 2;
  }
  .kategorija-swiper .swiper-slide, .mega-kategorija-swiper .swiper-slide {
    width: 42vw !important;
    flex-direction: row;
  }
}
/* MOBILE */
@media (max-width: 768px) {
  .products-archive-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
  .product-card.large-item,
  .product-card.small-item {
    grid-column: span 1;
  }
  .kategorija-swiper .swiper-slide, .mega-kategorija-swiper .swiper-slide {
    width: 42vw !important;
  }
}
/* SMALL MOBILE */
@media (max-width: 550px) {
  .kategorija-swiper .swiper-slide, .mega-kategorija-swiper .swiper-slide {
    width: 80vw !important;
  }
}

/* 
// SINGLE PROIZVOD
*/
/* SMALL DESKTOP */
@media (max-width: 1119px) {
}
/* TABLET */
@media (max-width: 991px) {
  .single-proizvod-section-1 .gallery-section .mySwiper {
    margin-top: 20px;
  }
  .single-proizvod-section-1 .gallery-section .swiper.mySwiper2 {
    height: 500px;
  }
  .single-proizvod-section-1 .gallery-section .mySwiper .swiper-slide {
    max-width: 80px;
    height: 80px;
  }
  .single-proizvod-section-1 .col__left {
    width: 100%;
  }
  .row__proizvod-hero_second .col__right a {
    display: none;
  }
  .row__proizvodi-ostalo {
    overflow-x: auto;
  }
  .row__proizvodi-ostalo::-webkit-scrollbar {
    display: none;
  }
  .single-proizvod-section-2 {
    margin-top: 0;
  }
  .single-proizvod-section-5 {
    margin-top: 16px;
  }
  .row__proizvod-hero_second {
    height: 0;
  }
}
/* MOBILE */
@media (max-width: 768px) {
  .single-proizvod-section-1 .gallery-section .swiper.mySwiper2 {
    height: 400px;
  }
  .swiper.mySwiper2 .swiper-button-next,
  .swiper.mySwiper2 .swiper-button-prev {
    display: none;
  }
  .single-proizvod-section-2 .proizvod-tabs {
    padding: 32px 16px;
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
  .proizvod-tabs a {
    flex-wrap: wrap;
    justify-content: center;
    padding: 14px 18px;
  }
  .single-proizvod-section-2 .specifikacije-left {
    min-width: 30%;
  }
  .single-proizvod-section-2 .specifikacije-right {
    text-align: right;
  }
}
/* SMALL MOBILE */
@media (max-width: 500px) {
  .single-proizvod-section-1 .gallery-section .mySwiper .swiper-slide {
    max-width: 50px;
    height: 50px;
  }
  .single-proizvod-section-1 .gallery-section .swiper.mySwiper2 {
    height: 270px;
  }
  .single-proizvod-section-2 .specifikacije-left {
    min-width: 100%;
  }
  .single-proizvod-section-2 .specifikacije-right {
    text-align: left;
  }
  .single-proizvod-section-2 .specifikacije-row {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }
}


/* FILTER */
.wpc-filter-chip:not(.wpc-chip-reset-all) {
  display: none;
}
.wpc-custom-selected-terms {
  display: none;
}
.wpc-filter-chips-list {
  padding: 0;
}
.wpc-filter-chips-list {
  display: none!important;
}
.wpc-filter-has-selected .wpc-filter-chips-list {
  display: block!important;
}
.wpc-filters-section {
  padding-top: 32px!important;
  margin: 0!important;
}
.wpc-filters-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 0!important;
  margin: 0!important;
}
.wpc-label-item {
  margin: 0!important;
}
.wpc-filter-title {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  margin-bottom: 16px!important;
}
.wpc-term-item label {
  border-radius: 1000px!important;
  margin: 0!important;
}
.wpc-filter-label-wrapper {
  display: flex!important;
  padding: 8px 16px!important;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  line-height: 0;
  border-radius: 1000px!important;
  border: 1px solid var(--color-white)!important;
}
.wpc-filter-label-wrapper a {
  color: var(--color-white); 
  font-size: 13px;
  font-weight: 500!important;;
  line-height: normal;
  margin-right: -5px;
}
.wpc-term-item input+label:hover a {
  color: var(--color-green)!important;
}
.wpc-filters-main-wrap input.wpc-label-input:checked+label {
  border: 0!important
}
.wpc-chip-reset-all {
  display: inline-flex;
  order: -1;
  margin: 0!important;
}
.wpc-chip-reset-all .wpc-filter-chip-name {
  display: flex;
  padding: 9px 16px 8px !important;
  justify-content: center;
  align-items: flex-start;
  gap: 0;
  line-height: normal!important;
  border-radius: 1000px;
  color: var(--color-white)!important;
  border: 1px solid var(--color-white)!important;
  background: var(--color-green);
  font-size: 13px!important;
  font-weight: 500!important
}
.wpc-chip-reset-all .wpc-filter-chip-name:hover {
  background-color: var(--color-white)!important;
  color: var(--color-green)!important;
}
body .wpc-filters-main-wrap .wpc-filters-labels li.wpc-term-item input:checked+label a {
  color: var(--color-green)!important;
}
.wpc-filter-chips-list a, body .wpc-filter-chips-list li.wpc-filter-chip a {
  padding: 0!important;
  border: 0!important;
}

/* Popup */
.popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.popup-content {
  position: relative;
  background-color: white;
  padding: 32px;
  max-width: 736px;
  margin: 100px auto;
  border-radius: var(--default-radius);
  max-height: 550px;
  overflow-y: auto;
}
.popup-section {
  display: flex;
  gap: 32px;
}
#closePopup {
  position: absolute;
  top: 10px;
  right: 20px;
  cursor: pointer;
  background: #E7E7E7;
  padding: 0px 6px;
  border-radius: 1000px;
}
.popup-content .col__left {
  position: relative;
  overflow: hidden;
  flex-basis: 105%;
  border-radius: var(--default-radius);
  min-height: 350px;
}
.popup-content .col__left img {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: cover;
  height: 100%;
  width: 100%;
}
.popup-content h2 {
  color: var(--black);
  font-size: 28px;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 8px;
}
.popup-content p {
  margin-bottom: 24px;
}
.popup-content .contact-form .gform_fields {
  row-gap: 16px !important;
  column-gap: 16px !important;
}
.popup-content .contact-form .gfield_label {
  margin-bottom: 8px !important;
}
.popup-content .contact-form .gfield_consent_label {
  margin-top: 2px!important;
  margin-left: 4px!important;
  font-size: 11px!important;
}
.popup-content input[type="checkbox"]{
  height: 16px!important;
  width: 16px!important;
}
.popup-content fieldset {
  display: flex!important;
}
.popup-content legend {
  position: absolute!important;
  display: none!important;
}
.popup-content .gform_footer {
  margin-top: 16px!important;
}
.popup-content .gform_footer {
  flex-direction: column;
  width: 100%;
}
.popup-content.delivered .col__right h2,
.popup-content.delivered .col__right p {
  display: none;
}
.popup-content .gform_validation_errors {
  margin-bottom: 0!important;
}
.popup-content .btn-animate {
  padding: 15px 24px !important;
}
/* Class to disable page scroll */
.no-scroll {
  overflow: hidden;
}

@media(max-width: 767px) {
  .popup-content {
      padding: 32px 24px;
      margin-left: 5px;
      margin-right: 5px;
      max-height: 95vh;
  }
  .popup-section {
      flex-direction: column;
      gap: 24px;
  } 
  #closePopup {
      top: 6px;
      right: 12px;
  }
  .popup-content .col__left {
      min-height: 140px;
  }
}