/* =========================================================
   homePage.css — cleaned & organized (index.html)
   Sections: HERO / SERVICES / ABOUT / PORTFOLIO / TESTIMONIALS
   Note: .eyebrow je globalno u style.css (ne dupliramo ovde).
   ======================================================= */


/* =========================
   HERO
   ========================= */
.hero_section {
  position: relative;
  padding: 60px 0 88px;
  background:
    radial-gradient(900px 500px at 80% 10%, rgba(111,196,184,.18), transparent 60%),
    linear-gradient(180deg, #fff 0%, rgba(111,196,184,.06) 100%);
}

.hero_title {
  font-family: "Sen", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.1;
  margin: 14px 0 10px;
  color: var(--color-primary);
  font-size: clamp(34px, 4.2vw, 56px);
}

.hero_subtitle {
  color: var(--color-text);
  opacity: .9;
  font-size: clamp(16px, 1.4vw, 18px);
  margin: 0 0 25px 0;
}

/* CTA dugmad */
.hero_cta .btn {
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
}
.btn-outline-dark {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background: transparent;
  box-shadow: none;
}
.btn-outline-dark:hover {
  background: var(--color-primary);
  color: #fff;
}

/* trust lista */
.hero_trust {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 8px 16px;
}
.hero_trust li { color: var(--color-text); }
.hero_trust i { color: var(--color-secondary); margin-right: 6px; }

/* vizual desno */
.hero_visual {
  position: relative;
  max-width: 560px;
  margin-left: auto;
}
.hero_img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(7,44,53,.22);
  display: block;
}

/* responsive (HERO) */
@media (max-width: 991.98px) {
  .hero_section { padding: 48px 0 64px; }
  .hero_visual { margin: 24px auto 0; }
  .hero_trust { grid-template-columns: 1fr; }
}


/* =========================
   SERVICES
   ========================= */
.services_section {
  position: relative;
  padding: 72px 0 40px;
}

/* Pozadinska slika */
.services_section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../../assets/img/services_section.webp") center/cover no-repeat;
  z-index: 0;
}

/* Bela poluprozirna maska */
.services_section::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.6); 
  z-index: 1;
}

/* Sav sadržaj iznad overlaya */
.services_section > .container,
.services_section_2 {
  position: relative;
  z-index: 2;
}


/* naslov + lead */
.services_taital{
  font-family:"Sen",system-ui,sans-serif;
  font-weight:800;
  color:var(--color-primary);
  font-size:clamp(28px,3.2vw,40px);
  margin:12px 0 8px;
}
.services_lead{
  color:var(--color-text);
  opacity:.9;
  max-width:720px;
  margin:0 auto 22px;
}

/* grid spacing */
.services_section_2 .row > [class*="col-"]{ margin-bottom:24px; }

/* kartica */
.service_card{
  background:#fff;
  border:1px solid rgba(7,44,53,.06);
  border-radius:18px;
  padding:22px 20px;
  height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 26px rgba(7,44,53,.06);
  transition:transform .18s ease, box-shadow .22s ease, border-color .2s ease;
}
.service_card::before{
  content:"";
  position:absolute;
  inset:auto -30% -30% -30%;
  height:70%;
  background:radial-gradient(60% 60% at 50% 100%, rgba(252,133,60,.12), transparent 60%);
  pointer-events:none;
}
.service_card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 48px rgba(7,44,53,.12);
  border-color:rgba(11,96,110,.18);
}

/* featured */
.service_card.is-featured{
  border-color:rgba(252,133,60,.35);
  box-shadow:0 20px 52px rgba(252,133,60,.16);
}
.service_card.is-featured::after{
  content:"";
  position:absolute;
  left:0; top:0; right:0; height:4px;
  background:linear-gradient(90deg,var(--color-orange),var(--color-yellow));
}

/* badge */
.sc_badge{
  position:absolute;
  top:14px; right:14px;
  font-weight:800; font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  color:#222;
  background:linear-gradient(90deg,var(--color-yellow),var(--color-orange));
  box-shadow:0 6px 16px rgba(252,133,60,.25);
}

/* ikonica */
.sc_icon{
  width:64px; height:64px; border-radius:16px; margin-bottom:6px;
  display:grid; place-items:center;
  background:rgba(111,196,184,.16);
}
.sc_icon img{ width:36px; height:36px; object-fit:contain; }

/* naslov/tekst */
.sc_title{
  font-family:"Sen",system-ui,sans-serif;
  font-weight:800;
  font-size:20px;
  color:var(--color-primary);
  margin:6px 0 2px;
}
.sc_text{ color:var(--color-text); opacity:.9; line-height:1.6; font-size:15px; margin-bottom:6px; }

/* tagovi */
.sc_tags{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:2px 0 10px; padding:0; list-style:none;
}
.sc_tags li{
  font-size:12px; font-weight:700; letter-spacing:.02em;
  padding:6px 10px; border-radius:999px;
  color:var(--color-primary);
  background:rgba(111,196,184,.16);
}

/* CTA link */
.sc_link{
  margin-top:auto;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; text-decoration:none;
  color:var(--color-secondary);
  transition:color .2s ease, transform .15s ease;
}
.sc_link:hover{ color:var(--color-primary); transform:translateX(2px); }

/* responsive (SERVICES) */
@media (max-width: 991.98px){
  .services_section{ padding:56px 0 28px; }
}


/* =========================
   ABOUT (index blok)
   ========================= */
.about_section {
  position: relative;
  padding: 72px 0;
  background:
    radial-gradient(900px 520px at 110% -10%, rgba(0, 60, 114, 0.1), transparent 60%),
    linear-gradient(180deg, #fff 0%, rgba(0, 60, 114, 0.04) 100%);
}
.about_title {
  font-family: "Sen", system-ui, sans-serif;
  font-weight: 800;
  color: var(--color-primary);
  font-size: clamp(28px, 3.2vw, 40px);
  margin: 12px 0 10px;
}
.about_text {
  color: var(--color-text);
  opacity: 0.95;
  font-size: 16px;
  line-height: 1.75;
  margin-bottom: 10px;
}
.about_image_wrapper {
  position: relative;
  max-width: 560px;
  margin: 24px auto 0;
}
.about_img {
  width: 100%;
  display: block;
  border-radius: 20px;
  box-shadow: 0 22px 60px rgba(3, 21, 58, 0.24);
  background: #f6f8fb;
}

/* dugme (koristi globalni .btn-ld) */
#about .btn-ld {
  margin-top: 6px;
  border-radius: 12px;
  padding: 12px 18px;
  font-weight: 700;
  box-shadow: 0 10px 22px rgba(242, 86, 46, 0.18);
}
#about .btn-ld:hover { box-shadow: 0 12px 26px rgba(0, 60, 114, 0.22); }

/* responsive (ABOUT) */
@media (max-width: 991.98px) {
  .about_section { padding: 56px 0; }
  .about_image_wrapper { margin-top: 18px; }
}


/* =========================
   PORTFOLIO (homepage grid)
   ========================= */
.portfolio_section {
  position: relative;
  padding: 72px 0 40px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 100%),
    radial-gradient(900px 520px at -10% 10%, rgba(0,60,114,.10), transparent 80%),
    url("../assets/img/portfolio_section.jpeg") center/cover no-repeat;
}

.portfolio_title{
  font-family:"Sen",system-ui,sans-serif;
  font-weight:800;
  color:var(--color-primary);
  font-size:clamp(28px,3.2vw,40px);
  margin:12px 0 8px;
}
.portfolio_lead{
  color:var(--color-text);
  opacity:.9;
  max-width:760px;
  margin:0 auto 18px;
}

/* Filteri */
.pf_filters{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
  margin:18px 0 8px;
}
.pf_filter{
  appearance:none; border:none; cursor:pointer; outline:0;
  background:rgba(0,60,114,.10);
  color:var(--color-primary);
  font-weight:700; font-size:13px;
  padding:8px 14px; border-radius:999px;
  transition:background .2s ease, color .2s ease, transform .1s ease;
}
.pf_filter:hover{ background:rgba(0,60,114,.16); }
.pf_filter.is-active{
  background:var(--color-secondary);
  color:#fff;
}

/* Grid + kartice */
.pf_grid > [class*="col-"]{ margin-bottom:22px; display:flex; }
.pf_card{
  background:#fff;
  border:1px solid rgba(3,21,58,.08);
  border-radius:18px;
  overflow:hidden;
  width:100%;
  box-shadow:0 14px 34px rgba(3,21,58,.10);
  transition:transform .18s ease, box-shadow .22s ease, border-color .2s ease;
  display:flex; flex-direction:column;
}
.pf_card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 52px rgba(3,21,58,.16);
  border-color:rgba(0,60,114,.18);
}

/* Slika + overlay */
.pf_link{ position:relative; display:block; overflow:hidden; }
.pf_img{
  width:100%; height:260px; object-fit:cover; display:block;
  transition:transform .35s ease;
  background:#f1f4f7;
}
.pf_card:hover .pf_img{ transform:scale(1.03); }

.pf_overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(3,21,58,.55) 100%);
  opacity:0; display:flex; align-items:flex-end; justify-content:center;
  transition:opacity .25s ease;
  padding:12px;
}
.pf_action{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--color-secondary);
  color:#fff; font-weight:800; font-size:12px; letter-spacing:.02em;
  padding:8px 12px; border-radius:10px;
  box-shadow:0 10px 22px rgba(242,86,46,.22);
}
.pf_card:hover .pf_overlay{ opacity:1; }

/* Meta */
.pf_meta{
  padding:14px 14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.pf_title{
  margin:0; font-weight:800; font-size:18px; color:var(--color-primary);
}
.pf_tag{
  font-size:12px; font-weight:800; letter-spacing:.02em;
  color:var(--color-primary);
  background:rgba(0,60,114,.10);
  padding:6px 10px; border-radius:999px;
}

/* responsive (PORTFOLIO) */
@media (max-width: 991.98px){
  .portfolio_section{ padding:56px 0 28px; }
  .pf_img{ height:220px; }
}


/* =========================
   TESTIMONIALS
   ========================= */
.customer_section {
  position: relative;
  padding: 72px 0;
  background:
    radial-gradient(800px 500px at 10% 20%, rgba(0, 60, 114, 0.08), transparent 70%),
    linear-gradient(180deg, #fff 0%, rgba(0, 60, 114, 0.04) 100%);
}
.customer_taital {
  font-family: "Sen", system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 3vw, 38px);
  color: var(--color-primary);
  margin: 12px 0 8px;
}
.customer_lead {
  font-size: 16px;
  color: var(--color-text);
  opacity: 0.9;
  max-width: 720px;
  margin: 0 auto 32px;
}

/* kutija */
.customer_section_2 { max-width: 900px; margin: 0 auto; }
.client_box {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: #fff;
  border-radius: 18px;
  padding: 28px;
  border: 1px solid rgba(3, 21, 58, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.client_left { flex: 0 0 80px; }
.client_img img {
  width: 72px; height: 72px; object-fit: cover; border-radius: 50%;
  border: 3px solid var(--color-secondary);
  box-shadow: 0 6px 14px rgba(242, 86, 46, 0.2);
}
.client_middle { flex: 0 0 160px; }
.client_text {
  margin: 0;
  font-weight: 800;
  color: var(--color-primary);
  font-size: 18px;
}
.consectetur_text {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-secondary);
}
.client_right { flex: 1; }
.lorem_text {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  opacity: 0.9;
  position: relative;
  padding-left: 0;
}
.lorem_text:before {
  content: "“";
  position: absolute;
  left: -14px;
  top: -6px;
  font-size: 32px;
  line-height: 1;
  color: rgba(0, 60, 114, 0.25);
}

/* strelice karusela */
#main_slider .carousel-control-prev,
#main_slider .carousel-control-next {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--color-secondary); color: #fff; opacity: 1; font-size: 20px;
  top: 50%; transform: translateY(-50%);
  box-shadow: 0 6px 14px rgba(242, 86, 46, 0.25);
  transition: background 0.2s ease;
}
#main_slider .carousel-control-prev:hover,
#main_slider .carousel-control-next:hover { background: var(--color-primary); }

/* responsive (TESTIMONIALS) */
@media (max-width: 768px) {
  .client_box { flex-direction: column; text-align: center; align-items: center; }
  .client_middle, .client_right { flex: unset; }
  .client_right { margin-top: 12px; }
  #main_slider .carousel-control-prev,
  #main_slider .carousel-control-next { width: 38px; height: 38px; margin: 0 10px; }
  .client_box { height: 200px; } /* ostavljeno kao u originalu */
}

/* bez slike: sakrij prazan levi stubac i poravnaj */
.client_left:empty { display: none; }
.customer_section .client_box { gap: 16px; }
.client_left:empty + .client_middle { flex: 0 0 auto; }