/*--------------------------------------------------------------
Hero + Stats + Panels (unified)
--------------------------------------------------------------*/

/* =========================
   HERO
   ========================= */
.hero-hero{
  position: relative;
  height: 1080px;
  overflow: hidden;
  margin-top: -8rem;
}

/* generic hero background layers */
.hero-hero__bg,
.hero-hero__bg__capabilities{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* default images (če se kje uporablja) */
.hero-hero__bg{
  background-image: url(https://armdesign.agency/projekti/rok/sibo/wp-content/uploads/2025/08/15-orodje-deyajl-01-scaled.png);
}
.hero-hero__bg__capabilities{
  background-image: url(https://armdesign.agency/projekti/rok/sibo/wp-content/uploads/2025/05/Rectangle-72.png);
}

/* overlay vedno deluje za vse hero bg variante */
.hero-hero__bg::after,
.hero-hero__bg__capabilities::after{
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.30);
  z-index: 1;
}

/* overlay container */
.hero-hero__overlay{
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center
}

/* title */
.hero-hero__title{
  font-size: 60px;
  line-height: 80px;
  font-weight: var(--fw-regular);
  margin-bottom: 1.5rem;
  color: #fff;
}
.hero-hero__title strong{
  display: block;
  font-weight: var(--fw-bold);
}

/* VIDEO hero support (homepage) */
.hero-hero--video .hero-hero__bg{
  background: none !important;
}
.hero-hero__bg--video{
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-hero__video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* responsive hero */
@media (max-width: 800px){
  .hero-hero{height: 650px;}
  .hero-hero__title{
    font-size: 36px !important;
    line-height: 50px;
  }
}

/* =========================
   CONTAINERS
   ========================= */
.site-container-1160{
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* =========================
   STATS BY NUMBERS
   ========================= */
.stats-by-numbers{
  padding: 3rem 0;
  background: #fff;
  color: var(--eerie-black);
}

.stats-by-numbers__title{
  font-size: 60px;
  line-height: 80px;
  font-weight: 700;
  margin-bottom: 1rem;
}
.stats-by-numbers__title span{
  display: block;
  font-weight: var(--fw-regular);
}

.stats-by-numbers__intro{
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 1.5rem;
}

.stat{margin-bottom: 2rem;}
.stat__label{
  font-size: 24px;
  line-height: 36px;
  font-weight: 500;
  color: var(--red-pantone);
  text-align: left;
}
.stat__value{
  font-size: 90px;
  line-height: 80px;
  font-weight: 100;
  margin: 0;
}
.stat__desc{
  font-size: 16px;
  line-height: 30px;
  color: var(--eerie-black);
}

@media (max-width: 991.98px){
  .stats-by-numbers .row.gx-5{flex-direction: column;}
  .stat{margin-bottom: 3rem;}
}
@media (max-width: 800px){
  .stat{
    margin: 0 !important;
    margin-bottom: 0rem !important;
    padding-right: 0px !important;
  }
  .stat__label{
    font-size: 17.5px;
    line-height: 36px;
    font-weight: 500;
    color: var(--red-pantone);
    text-align: left;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}

/* =========================
   PANELS
   ========================= */
.panels-section{
  margin-top: 4rem;
  margin-bottom: 6rem;
}

/* panel base */
.panels-section .panel{
  display: block;
  position: relative;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: transparent !important;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  transition: background-position 0.6s ease;
}

.panels-section .panel--small{height: 441px;}
.panels-section .panel--large{height: 912px;}

.panels-section .panel:hover{background-position: center top;}

.panels-section .row.gx-4{--bs-gutter-x: 1rem;}

.panels-section .panel__label{
  position: absolute;
  bottom: 1.5rem;
  left: 2rem;
  color: #fff;
  font-size: 36px;
  line-height: 48px;
  font-weight: var(--fw-regular);
}

/* layout2 special gutters */
.panels-section--layout2 .row.gx-3{--bs-gutter-x: 2rem;}
.panels-section--layout2 .row.gy-3{--bs-gutter-y: 2rem;}

/* mobile tightening */
@media (max-width: 800px){
  .panels-section{
    margin-top: 0px !important;
    margin-bottom: 0px !important;
  }
  .panels-section--count4 .col-md-6.d-grid.gap-4{
    margin-top: 30px;
  }
}