/* ==========================================================================
   Usluge (services) page
   ========================================================================== */
body.usluge{
  background:#F1F1F1 url('../../images/backgrounds/Background-lines-scaled.jpg') center center/cover no-repeat;
}
body.usluge main{max-width:1300px;margin:0 auto}

/* --- Hero ----------------------------------------------------------- */
.usluge-hero{padding:3% 0;text-align:center}
.usluge-hero h1{
  font-size:48px;line-height:52px;font-weight:600;color:var(--heading);
  padding-top:50px;margin-bottom:55px;
}
.usluge-hero p{
  width:fit-content;
  font-size:20px;font-weight:500;color:var(--body);
  padding:0 280px 20px;margin-bottom:65px;
}

/* --- Services grid (#whatwedo) -------------------------------------- */
.services{padding:3% 0}
.services__grid{display:flex;flex-wrap:wrap;gap:20px}
.service-card{
  flex:0 0 48%;min-height:515px;
  display:flex;
  border:1px solid;border-radius:12px;
  box-shadow:0 0 3px 0 rgba(0,0,0,.5);
  background:linear-gradient(180deg,rgba(0,171,78,.04) 0%,rgba(0,171,78,.04) 100%);
  padding:32px;
}
.service-card--purple{border-color:#6936F5}
.service-card--green{border-color:var(--green)}
.service-card__inner{
  flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;
  background:var(--white);border:1px solid #DFE1E4;border-radius:12px;
  padding:32px;
}
.service-card__icon{
  display:flex;align-items:center;justify-content:center;
  width:50px;height:50px;border-radius:12px;margin-bottom:32px;
}
.service-card--purple .service-card__icon{background:#6936F5}
.service-card--green .service-card__icon{background:var(--green)}
.service-card__icon .service-card__glyph{height:25px;width:auto;fill:var(--white)}
.service-card__icon--framed{width:56px;height:56px;margin:5px 0 27px}
.service-card__icon--img{background:none !important;border-radius:8px}
.service-card__icon--img svg{width:50px;height:50px}
.service-card__title{
  font-size:28px;line-height:35px;font-weight:600;color:var(--heading);
  margin-bottom:20px;
}
.service-card__title-link{
  color:inherit;text-decoration:none;transition:color .2s ease;
}
.service-card__title-link:hover,
.service-card__title-link:focus{
  color:var(--green);
}
.service-card__desc{
  flex-grow:1;
  font-size:18px;line-height:24px;font-weight:400;color:var(--body);
  margin-bottom:20px;
}
.service-card__btn{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-accent);font-size:18px;line-height:22px;font-weight:500;
  color:var(--white);
  border:1px solid #DFE1E4;border-radius:6px;
  box-shadow:0 1px 3px 0 rgba(0,0,0,.06);
  padding:11px 24px;
  transition:background-color .3s,color .3s,border-color .3s;
}
.service-card--purple .service-card__btn{background:#6936F5}
.service-card--green .service-card__btn{background:var(--green)}
.service-card__btn .icon-angle{height:14px;width:auto;fill:currentColor}
.service-card--purple .service-card__btn:hover{background:#F2F4F5;color:var(--gray);border-color:#6936F5}
.service-card--green .service-card__btn:hover{background:#F2F4F5;color:var(--gray);border-color:var(--green)}

/* --- Region (Podrška u regionu) -------------------------------------- */
.region{padding:3% 0 calc(3% + 50px);text-align:center}
.region h2{
  font-size:48px;line-height:52px;font-weight:600;color:var(--heading);
  padding-top:49px;margin-bottom:55px;
}
.region h2 .accent{color:var(--green)}
.region__text{
  font-size:20px;font-weight:500;color:var(--body);
  padding:0 180px 20px;margin-bottom:35px;
}
.region__map--desktop{
  border:1px solid var(--green);border-radius:8px;padding:10px;
  background:linear-gradient(180deg,rgba(0,171,78,.04) 0%,rgba(0,171,78,.04) 100%);
}
.region__hotspots{position:relative}
.region__hotspots img{display:block;width:100%;height:auto;border-radius:12px}
.pin{
  position:absolute;display:flex;align-items:center;gap:5px;
  transform:translate(-50%,-50%);
  color:var(--white);
}
.pin__icon{height:20px;width:auto;fill:var(--white);animation:pin-beat 2s infinite}
.pin__label{font-size:14px;font-weight:500;line-height:1.2;text-align:left;white-space:nowrap}
.pin--slovenija{left:29%;top:14%}
.pin--hrvatska{left:39%;top:20%}
.pin--bih{left:47%;top:46%}
.pin--srbija{left:62%;top:41%}
.pin--crna-gora{left:57%;top:70%}
.pin--makedonija{left:72%;top:86%}
@keyframes pin-beat{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.15)}
}
.region__map--mobile{display:none}

/* --- Industrije ------------------------------------------------------- */
.industries{
  background:#0C081A url('../../images/backgrounds/Background-1.png') center center/cover no-repeat;
}
.industries__inner{max-width:1300px;margin:0 auto;padding:3% 0 5%}
.industries h2{
  font-size:48px;line-height:52px;font-weight:600;color:var(--white);
  text-align:center;padding:50px 0 20px;margin-bottom:53px;
}
.industries__grid{display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:20px}
.industry-card{
  flex:0 0 32%;
  border:1px solid #6936F5;border-radius:16px;padding:16px;
}
.industry-card__inner{
  min-height:230px;display:flex;flex-direction:column;align-items:center;
  background:#0C081A url('../../images/backgrounds/Background-Card.png') center center/cover no-repeat;
  border:1px solid #E8EAEC14;border-radius:12px;padding:24px;
}
.industry-card h3{
  font-size:24px;line-height:31px;font-weight:500;color:var(--white);
  text-align:center;padding-top:60px;
}

/* --- Responsive ------------------------------------------------------- */
@media (max-width:1300px){
  body.usluge main{max-width:none}
}
@media (max-width:1024px){
  .industries__inner{padding:3%}
  .region__map--desktop{display:none}
  .industry-card{flex-basis:48%}
}
@media (max-width:767px){
  .usluge-hero{padding:10% 3%}
  .usluge-hero h1{font-size:38px}
  .usluge-hero p{font-size:18px;padding:0}
  .services{padding:10% 3%}
  .service-card{flex-basis:100%;padding:15px}
  .service-card__desc{font-size:16px}
  .service-card__btn{display:flex;width:100%;justify-content:center}
  .service-card__inner{padding:15px}
  .region{padding:10% 3%}
  .region h2{font-size:38px}
  .region__text{font-size:18px;padding:0}
  .region__map--mobile{display:block;border:1px solid var(--green);border-radius:8px;padding:15px;
    background:linear-gradient(180deg,rgba(0,171,78,.04) 0%,rgba(0,171,78,.04) 100%)}
  .region__map--mobile img{display:block;width:100%;height:auto}
  .industries__inner{padding:10% 3%}
  .industries h2{font-size:38px}
  .industry-card{flex-basis:100%}
}