* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
   
  }
  @font-face {
    font-family: 'inter'; /*a name to be used later*/
    src: url('../fonts/Inter/static/Inter-Medium.ttf'); /*URL to font*/
}

.podnaslov{
    color:white !important;
}

@media (min-width:320px)  {

 /* smartphones, iPhone, portrait 480x320 phones */
main{
  background-color: #00000012;
}




.row{
  justify-content: center;
  
}
.vertical{
  display:grid;
  grid-template-rows:1fr 1fr 1fr;
  height: 90vh;
}

.vertical2{
  display:grid;
  grid-template-rows: 30% 50% 20%;
  height: 95vh;
}
section{

   padding: 100px 0;
}
.color{
  background-color:white;
}


  .section{
    color: white;
    position: relative;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items:start;
        align-content: center;
    height: 100vh;
  
  }

  .section1{
       padding: 0% !important;
  }
    
    .section1:after {
    content:'';
    background: rgb(0,0,0);
background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(255,255,255,1) 100%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position:bottom;
    
    position: absolute;
    top:0px;
    left: 0px;
    width:100%;
    height:100%;
    z-index:-1;
    
    
}

.section2{
  color:black;
}
section header{
  height: 100%;
  justify-content: center;
  display: flex;
  align-content: end;
 
}
.header{
  font-size: 24px;
  letter-spacing: -0.016em;
  line-height: 30px;

}



.main_h1{
margin-top: 20px;
  justify-content: center;
  text-align: center;
  color:white;
 }
 .main_h3{
  font-size: 1em;
  justify-content: center;
  text-align: center;
 }

 .trust-grid{
  grid-template-columns:1fr;
 }

 .buttonYellow{
  background-color: yellow;
  color: white;
 }
  .button-37:hover {
    box-shadow: rgba(0, 0, 0, .15) 0 3px 9px 0;
    transform: translateY(-2px);
  }

.imgOkovi{
  height: 80px;
 cursor: pointer;
  justify-content: space-evenly !important;
}
  
.okovi{

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
}
.blum{
  background-image: url(../img/blum/blum-okovi.jpg);
  background-size: contain;
  background-position-y: 8px;
}
/* GTV removed by request */
.hafele{
  background-image: url(../img/hafele/hafele-okov.jpg);
  background-size: contain;
  background-position-y: 8px;
}
.hettich{
  background-image: url(../img/hettich/hettich-okovi.jpg);
  background-size: contain;
}
.kessebohmer{
  background-image: url(../img/kessebohmer/kessebohmer.jpg);
  background-size: contain;
}


.dekoriImg{
 
  height: 80px;
  justify-content: space-evenly !important;
  background-color: white;
}

.dekori{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  cursor: pointer;
}

.fundermax{
  background-image: url(../img/fundermax/fundermax-univer\ \(1\).jpg);
  background-size: contain;

}
.Egger{
  background-image: url(../img/Egger/download.png);
  background-size: contain;
}
.Falco{
  background-image: url(../img/Falco/falco_logo_icon_170163.png);
  background-size: contain;
}
.Kastamonu{
    background-image: url(../img/Kastamonu/download.png);
    background-size: contain;
}
.Kronospan{
  background-image: url(../img/Kronospan/download\ \(1\).png);
  background-size: contain;
}
.Swisspan{
  background-image: url(../img/Swisspan/SwissPan_logo.jpg.750x320_q85_crop.jpg);
  background-size: contain;
}
.Corian{
  background-image: url(../img/brands/corian-logo.svg);
  background-size: contain;
}
.Kaindl{
  background-image: url(../img/brands/kaindl-logo.svg);
  background-size: contain;
}
.Cleaf{
  background-image: url(../img/brands/cleaf-logo.svg);
  background-size: contain;
}
.Velluto{
  background-image: url(../img/brands/velluto-logo.svg);
  background-size: contain;
}

.paragrafStyle{

  font-size: 20px;
  letter-spacing: -0.003em;
  line-height: 32px;
  word-break: break-word;
 
}




.hero-wrap{
  min-height: 90vh;
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.hero-content{
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem 1rem;
  text-align: center;
}

.hero-eyebrow{
  display:inline-block;
  font-size:0.86rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:#ffc107;
  background:rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:999px;
  padding:0.35rem 0.75rem;
  margin-bottom:1rem;
}

.hero-lead{
  color:#f2f2f2;
  font-size:1.1rem;
  line-height:1.65;
  margin: 1rem auto 0;
  max-width: 680px;
}

.hero-cta{
  display:flex;
  justify-content:center;
  gap:0.75rem;
  flex-wrap:wrap;
  margin-top:1.4rem;
}

.hero-points{
  margin:1.2rem 0 0;
  padding:0;
  list-style:none;
  display:flex;
  justify-content:center;
  gap:1rem;
  flex-wrap:wrap;
  color:#f8f8f8;
  font-weight:600;
}

.trust-strip{
  background:#fff;
  margin-top:-22px;
  position:relative;
  z-index:3;
}

.trust-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0.8rem;
  padding: 0 1rem 1.5rem;
}

.trust-card{
  background:#ffffff;
  border:1px solid #ececec;
  border-radius:14px;
  padding:0.9rem;
  display:grid;
  gap:0.3rem;
  box-shadow:0 6px 20px rgba(0,0,0,0.06);
  text-align:center;
}

.trust-card strong{font-size:1rem;color:#111;}
.trust-card span{font-size:0.9rem;color:#4f4f4f;}

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



footer{
  background-color: black;
}

.galerijaTekst{
text-align: center;
margin: 50px 0;
font-size: 22px;
color: red;
}
}
@media (min-width:481px)  { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */

  .trust-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  } /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */


  .main_h1{
    font-size: 2.5em;
   }
   .main_h3{
    font-size: 1.5em;
   }
  .imgOkovi{
    height: 100px;
  }

  .dekoriImg {
      height: 200px;
      background-color: white;
  }

  .blum{

    background-position-y: 15px;
  }
  /* GTV removed by request */
.hafele{
 
    background-position-y: 15px;
  }

}
@media (min-width:641px)  { 
  /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */

  .vertical{
    display:grid;
    grid-template-rows:3fr 5fr 1fr;
    height: 90vh;
  }
  .blum{

    background-position-y: 22px;
  }
  /* GTV removed by request */
.hafele{
 
    background-position-y: 22px;
  }


}
@media (min-width:961px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }


#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: black; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

/* FAQ always-open cards */
.faq-list {
  width: min(100%, 980px);
  margin: 0 auto;
  display: grid;
  gap: 0.95rem;
}

.faq-item {
  background: #ffffff;
  border: 1px solid #eceff3;
  border-left: 4px solid #ffc107;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  box-shadow: 0 8px 22px rgba(12, 18, 28, 0.06);
}

.faq-question {
  margin: 0 0 0.55rem;
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  color: #141414;
  text-align: left;
}

.faq-answer {
  color: #333;
  line-height: 1.72;
  text-align: left;
}

/* Brand/logo grids */
.dekoriImg,
.imgOkovi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
  gap: 0.9rem;
  align-items: stretch;
  height: auto !important;
  background: transparent;
  border: 0 !important;
  padding: 0;
}

.brand-tile {
  min-height: 128px;
  border: 1px solid #e8ebf0;
  border-radius: 14px;
  background-color: #fff;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0.65rem 0.5rem;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.brand-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.14);
  border-color: #ffc107;
}

.brand-label {
  display: inline-block;
  background: rgba(16, 17, 20, 0.8);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
}

.dekori,
.imgOkovi .okovi {
  background-position: center 42%;
  background-repeat: no-repeat;
  background-size: 74% auto;
}

/* Fine-tune newly added material logos so they align visually with existing tiles */
.brand-tile.Corian,
.brand-tile.Kaindl,
.brand-tile.Cleaf,
.brand-tile.Velluto {
  background-position: center 41%;
}

.brand-tile.Corian {
  background-size: 54% auto;
}

.brand-tile.Kaindl {
  background-size: 52% auto;
}

.brand-tile.Cleaf {
  background-size: 49% auto;
}

.brand-tile.Velluto {
  background-size: 53% auto;
}

.imgOkovi .brand-tile {
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
}

.imgOkovi .brand-photo {
  width: min(86%, 170px);
  height: 76px;
  object-fit: contain;
  margin: 0 auto;
}

/* Included article blocks with brand photos */
.imgSpax,
.imgblanco,
.imgfisher,
.imgInoxa {
  float: none !important;
  width: min(100%, 320px) !important;
  height: 170px !important;
  margin: 0 auto 1rem !important;
  border: 1px solid #e8ebf0;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08);
  background-color: #fff;
  background-size: 75% auto !important;
}

@media (max-width: 767px) {
  .faq-question,
  .faq-answer {
    text-align: left;
  }
}
/* Unified visual system across all pages (match homepage hero style) */
main {
  background: #ffffff;
}

main > section:not(.section1) {
  padding: clamp(56px, 8vw, 96px) 0;
}

main > section:not(.section1) .container {
  max-width: 1180px;
}

.section1 {
  min-height: calc(100vh - 64px);
}

.section1 .vertical,
.section1 .hero-wrap {
  min-height: inherit;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
}

.section1 .main_h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.18;
  margin-top: 0;
  max-width: 900px;
}

.section1 .paragrafStyle,
.section1 .hero-lead {
  max-width: 760px;
  margin: 0 auto;
  color: #f0f0f0;
  font-size: clamp(1rem, 1.45vw, 1.95rem);
  line-height: 1.55;
}

.main_h3 {
  font-size: clamp(1.45rem, 2.2vw, 2.15rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #151515;
  margin-bottom: 0.65rem;
}

.paragrafStyle {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.75;
  color: #333;
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.section1 .button-37,
.section1 .btn,
.hero-cta .btn {
  border-radius: 12px !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.72rem 1.05rem;
}

.button-37,
.btn-warning.button-37 {
  border-radius: 12px !important;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.72rem 1.05rem;
}

.color,
.okovi,
.projektovanje,
.materijal {
  background: #fff;
}

.color .container,
.okovi .container,
.projektovanje .container,
.materijal .container {
  border-radius: 16px;
}

@media (max-width: 767px) {
  .header {
    margin-bottom: 1.3rem !important;
  }

  .section1 .main_h1 {
    font-size: clamp(1.8rem, 9vw, 2.8rem);
  }

  .section1 .paragrafStyle,
  .section1 .hero-lead {
    font-size: 1.05rem;
    line-height: 1.6;
    text-align: center;
  }

  .paragrafStyle {
    text-align: center;
    line-height: 1.68;
  }
}



/* Global centering pass for all pages */
main > section .container {
  margin-left: auto;
  margin-right: auto;
}

main > section .row {
  justify-content: center;
}

main > section header,
main > section .header,
main > section h1,
main > section h2,
main > section h3,
main > section .main_h1,
main > section .main_h3 {
  text-align: center;
}

main > section .paragrafStyle {
  text-align: center;
}


/* Precise hero centering fix for all pages */
.section1 header,
.section1 .header {
  height: auto !important;
  display: block !important;
  align-content: initial !important;
}

.section1 .row {
  width: 100%;
  justify-content: center !important;
  text-align: center;
}

.section1 .main_h1,
.section1 .main_h3,
.section1 .paragrafStyle {
  margin-left: auto;
  margin-right: auto;
}

/* Final hero style lock (match provided reference) */
.section1 {
  position: relative;
  min-height: calc(100vh - 64px);
  overflow: hidden;
  background-color: #1f1f1f;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.section1::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.36) !important;
  z-index: 0 !important;
}

.section1 > * {
  position: relative;
  z-index: 1;
}

.section1,
.section1.rounded,
.section1.shadow-sm {
  margin-top: 0 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
}

.section1 .hero-eyebrow {
  font-size: clamp(0.72rem, 0.9vw, 0.86rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.28rem 0.62rem;
  margin-bottom: 0.82rem;
}

.section1 .main_h1 {
  max-width: 840px;
  font-size: clamp(1.55rem, 3.7vw, 2.9rem);
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
}

.section1 .hero-lead,
.section1 .paragrafStyle {
  max-width: 700px;
  font-size: clamp(0.92rem, 0.95vw, 1.1rem);
  line-height: 1.58;
  color: rgba(255, 255, 255, 0.94);
}

.section1 .hero-cta {
  margin-top: 1.15rem;
  gap: 0.75rem;
}

.section1 .hero-points {
  margin-top: 0.9rem;
  font-size: clamp(0.82rem, 0.85vw, 0.95rem);
  font-weight: 700;
}

@media (max-width: 767px) {
  .section1 .main_h1 {
    font-size: clamp(1.32rem, 6.7vw, 2rem);
    line-height: 1.22;
  }

  .section1 .hero-lead,
  .section1 .paragrafStyle {
    font-size: 0.94rem;
    line-height: 1.52;
  }

  .section1 .hero-eyebrow {
    font-size: 0.68rem;
  }
}

/* Auto-inserted hero decorative and benefit elements */
.auto-hero-eyebrow {
  margin: 0 auto 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 1rem);
  text-align: center;
}

.auto-hero-points {
  margin-top: 1rem;
}

.auto-hero-points li {
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 0.28rem 0.62rem;
}

@media (max-width: 767px) {
  .auto-hero-points {
    gap: 0.5rem;
  }

  .auto-hero-points li {
    font-size: 0.95rem;
    width: fit-content;
    margin: 0 auto;
  }
}

/* Homepage trust block redesign */
.trust-strip {
  margin-top: -18px;
  position: relative;
  z-index: 4;
}

.trust-wrap {
  background: linear-gradient(180deg, #ffffff 0%, #fcfcfd 100%);
  border: 1px solid #e8ecf2;
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(17, 24, 39, 0.08);
  padding: 1.1rem;
}

.trust-intro {
  text-align: center;
  margin-bottom: 1rem;
}

.trust-kicker {
  margin: 0 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7a7f88;
}

.trust-intro h2 {
  margin: 0;
  font-size: clamp(1.1rem, 2.1vw, 1.45rem);
  color: #0f172a;
  line-height: 1.35;
}

.trust-contact {
  display: inline-flex;
  margin-top: 0.7rem;
  padding: 0.48rem 0.9rem;
  border-radius: 999px;
  background: #111827;
  color: #ffffff !important;
  font-weight: 700;
  font-size: 0.9rem;
}

.trust-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

.trust-card {
  background: #ffffff;
  border: 1px solid #e9edf3;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(17, 24, 39, 0.06);
  padding: 0.9rem;
  display: grid;
  gap: 0.35rem;
  text-align: left;
}

.trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #111827;
  background: #ffc107;
  border-radius: 999px;
  padding: 0.22rem 0.58rem;
}

.trust-card strong {
  font-size: 1rem;
  color: #0f172a;
}

.trust-card span {
  font-size: 0.92rem;
  color: #495264;
  line-height: 1.48;
}

@media (min-width: 768px) {
  .trust-wrap {
    padding: 1.25rem;
  }

  .trust-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .trust-card {
    text-align: center;
    align-items: center;
  }
}

/* Keep highlighted hero badge same width/style on every page */
.hero-eyebrow,
.auto-hero-eyebrow,
.section1 .hero-eyebrow {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: calc(100% - 2rem) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .hero-eyebrow,
  .auto-hero-eyebrow,
  .section1 .hero-eyebrow {
    white-space: normal;
    text-align: center;
  }
}