/* ============================================================
   AZ PROMO — style.css
   Samostalan stylesheet, bez Mobirise frameworka
   ============================================================ */

/* ---------- 1) Varijable ---------- */
:root {
  --az-bg:               #ffffff;
  --az-bg-dark:          #073b4c;
  --az-bg-mid:           #0d5067;
  --az-surface:          #ffffff;
  --az-surface-soft:     #eef3f6;
  --az-border:           #dee6ec;
  --az-text:             #3a3f45;
  --az-text-mut:         #64727c;
  --az-text-light:       #e8f2f6;
  --az-accent:           #2371aa;
  --az-accent-2:         #2ea3c4;
  --az-accent-3:         #f4a72c;
  --az-radius:           12px;
  --az-shadow:           0 3px 18px rgba(7,59,76,.10);
  --az-font:             'Rubik','Segoe UI',Arial,sans-serif;
  --az-header-h-lg:      86px;
  --az-header-h-sm:      62px;
  --az-header-h:         var(--az-header-h-lg);
  --az-bg-img:           url("../images/-mg-6573-1724x1333.jpg");
}

/* ---------- 2) Reset / osnova ---------- */
*, *::before, *::after { box-sizing: border-box; }

figure {
  margin: 0;
  margin-block-start: 0;
  margin-block-end: 0;
  margin-inline-start: 0;
  margin-inline-end: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  margin: 0;
  font-family: var(--az-font);
  font-size: 17px;
  line-height: 1.7;
  color: var(--az-text);
  background: var(--az-bg);
  padding-top: var(--az-header-h);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}
body.az-no-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: var(--az-accent); text-decoration: none; }
a:hover { color: #18507d; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .9rem;
  font-weight: 600;
  color: var(--az-bg-dark);
}
p { margin: 0 0 1rem; }
ul, ol { margin: 0 0 1rem; padding-left: 1.4rem; }
strong { font-weight: 700; }
section { display: block; }
hr { border: 0; border-top: 1px solid rgba(0,0,0,.1); margin: 1.5rem 0; }
section[id] { scroll-margin-top: calc(var(--az-header-h) + 12px); }

/* ---------- 3) Layout ---------- */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
[class*="col-"] { padding: 0 15px; }

.col-12   { flex: 0 0 100%; }
.col-md-6 { flex: 0 0 50%; }
.col-md-7 { flex: 0 0 58.3333%; }
.col-lg-3 { flex: 0 0 25%; }
.col-lg-4 { flex: 0 0 33.3333%; }
.col-lg-8 { flex: 0 0 66.6667%; }

@media (max-width: 1199px) {
  .col-lg-4, .col-lg-3, .col-lg-8, .col-md-7 { flex: 0 0 50%; }
}
@media (max-width: 767px) {
  .col-md-6, .col-md-7, .col-lg-4, .col-lg-3, .col-lg-8 { flex: 0 0 100%; }
}

.media-container-row {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
}

/* ---------- 4) Pomoćne klase ---------- */
.text-center, .align-center { text-align: center; }
.align-right { text-align: right; }
.align-left  { text-align: left; }

.d-flex, .flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.justify-content-center { justify-content: center; }
.align-items-center { align-items: center; }
.m-auto { margin: auto; }

.py-2 { padding: .7rem 0; }
.py-3 { padding: 1rem 0; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.pb-3 { padding-bottom: 1rem; }
.pb-4 { padding-bottom: 1.5rem; }
.pb-5 { padding-bottom: 2.2rem; }
.pt-4 { padding-top: 1.5rem; }
.pt-5 { padding-top: 2.2rem; }
.mt-5 { margin-top: 3rem; }
.mb-5 { margin-bottom: 3rem; }
.mx-2 { margin: .5rem; }
.my-2 { margin: .5rem 0; }
.p-4  { padding: 1.5rem; }

/* ---------- 5) Tipografija (display-1..7) ---------- */
.display-1 { font-size: 3.1rem;  line-height: 1.15; font-weight: 700; letter-spacing: -.5px; }
.display-2 { font-size: 2.5rem;  line-height: 1.2;  font-weight: 700; }
.display-3 { font-size: 2.0rem;  line-height: 1.3;  font-weight: 600; }
.display-4 { font-size: 1.1rem;  line-height: 1.5; }
.display-5 { font-size: 1.45rem; line-height: 1.4;  font-weight: 500; }
.display-6 { font-size: 1.2rem;  line-height: 1.4; }
.display-7 { font-size: 1.0rem;  line-height: 1.65; }

@media (max-width: 767px) {
  .display-1 { font-size: 2.4rem; }
  .display-2 { font-size: 2.0rem; }
  .display-3 { font-size: 1.7rem; }
}

.mbr-fonts-style,
.mbr-fonts-style p,
.mbr-fonts-style h1, .mbr-fonts-style h2, .mbr-fonts-style h3,
.mbr-fonts-style h4, .mbr-fonts-style li { font-family: var(--az-font); }

.mbr-section-title    { margin-bottom: 1.2rem; }
.mbr-section-subtitle { margin-bottom: 1.5rem; color: var(--az-text-mut); }
.mbr-text             { margin-bottom: 1rem; }
.mbr-bold             { font-weight: 700; }
.mbr-light            { font-weight: 300; }
.mbr-white            { color: #fff; }

/* ---------- 6) Blockquote ---------- */
blockquote {
  position: relative;
  margin: 3rem 0;
  padding: 2rem 2rem 2rem 2.8rem;
  background: var(--az-surface);
  border-left: 4px solid var(--az-accent-2);
  border-radius: 0 var(--az-radius) var(--az-radius) 0;
  box-shadow: var(--az-shadow);
}
blockquote::before {
  content: "\201C";
  position: absolute; top: .1rem; left: .4rem;
  font-size: 2.6rem; line-height: 1;
  color: var(--az-accent-2);
  font-family: Georgia, serif;
}
blockquote p { margin: 0; }
blockquote p + p { margin-top: .6rem; }
blockquote strong { color: var(--az-bg-dark); }

/* ---------- 7) Početna sekcija (hero) ---------- */
.header15 {
  position: relative;
  background-color: var(--az-bg-dark);
  color: var(--az-text-light);
}

.header15 *, .header15 h1 { color: var(--az-text-light); }
.header15 .content-container,
.header15 .content-container h1,
.header15 .content-container p,
.header15 .content-container strong { color: #fff; }

.header15 .content-container {
  text-shadow: 0 1px 5px rgba(0,0,0,.45);
  text-align: right;
  padding-right: 40px;
  position: relative;
}
.header15 .col-lg-4 { padding-right: 40px; }

.header15 .mbr-arrow a,
.header15 .mbr-arrow svg { color: #fff; }

.mbr-fullscreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
section.header15 .container { z-index: 2; position: relative; }

/* Strelica u hero sekciji */
#header15-7a .mbr-arrow { margin: 1.1rem 0 0; text-align: center; }
#header15-7a .mbr-arrow a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  color: #fff;
  transition: .2s;
}
#header15-7a .mbr-arrow a:hover { background: rgba(255,255,255,.22); }
#header15-7a .mbr-arrow svg {
  width: 22px;
  height: 22px;
  animation: az-arrow-bounce 2s ease-in-out infinite;
}
@keyframes az-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ---------- 7) Početna sekcija (hero) ---------- */
.header15 {
  position: relative;
  background-color: var(--az-bg-dark);
  color: var(--az-text-light);
}

.header15 *, .header15 h1 { color: var(--az-text-light); }
.header15 .content-container,
.header15 .content-container h1,
.header15 .content-container p,
.header15 .content-container strong { color: #fff; }

.header15 .content-container {
  text-shadow: 0 1px 5px rgba(0,0,0,.45);
  text-align: right;
  padding-right: 40px;
  position: relative;
}
.header15 .col-lg-4 { padding-right: 40px; }

.header15 .mbr-arrow a,
.header15 .mbr-arrow svg { color: #fff; }

.mbr-fullscreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
}
section.header15 .container { z-index: 2; position: relative; }

/* Strelica u hero sekciji */
.header15 .mbr-arrow { margin: 1.1rem 0 0; text-align: center; }
.header15 .mbr-arrow a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  color: #fff;
  transition: .2s;
}
.header15 .mbr-arrow a:hover { background: rgba(255,255,255,.22); }
.header15 .mbr-arrow svg {
  width: 22px;
  height: 22px;
  animation: az-arrow-bounce 2s ease-in-out infinite;
}
@keyframes az-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}

/* ---------- Forma u hero sekciji ---------- */

/* Offset okvir oko forme — proziran, samo bijeli obrub */
.header15 .form-container {
  background: transparent !important;
  border: 2px solid rgba(255, 255, 255, .75);
  border-radius: 4px;
  box-shadow: none;
  padding: 1.6rem 1.4rem;
}

/* Svi unutarnji omoti — bez pozadine */
.header15 .form-container .media-container-column,
.header15 .form-container .mbr-form,
.header15 .form-container form,
.header15 .form-container .dragArea,
.header15 .form-container .row,
.header15 .form-container .form-group {
  background: transparent !important;
  box-shadow: none;
}

/* Reset negativnih margina Bootstrap redova unutar forme */
.header15 .form-container .row {
  margin-left: 0;
  margin-right: 0;
}
.header15 .form-container [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

/* Svaki col- unutar forme — puna širina */
.header15 .form-container .row > [class*="col-"] {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Form-group također puna širina */
.header15 .form-container .form-group {
  width: 100%;
  margin: 0;
}

/* Polja — bijela pozadina, puna širina */
.header15 .form-container input,
.header15 .form-container textarea,
.header15 .form-container .form-control {
  background: rgba(255, 255, 255, .92) !important;
  border: 0;
  border-radius: 6px;
  padding: .85rem 1rem;
  margin: 0 0 .9rem;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  box-sizing: border-box;
  display: block;
  font-size: 1rem;
  font-family: var(--az-font);
  color: var(--az-text);
}

.header15 .form-container input::placeholder,
.header15 .form-container textarea::placeholder {
  color: #7a8a95;
  opacity: 1;
}

/* Fokus — crvena (logo boja) */
.header15 .form-container input:focus,
.header15 .form-container textarea:focus,
.header15 .form-container .form-control:focus {
  outline: 2px solid #a81a1a;
  outline-offset: 0;
  background: #fff !important;
}

.header15 .form-container textarea {
  min-height: 130px;
  resize: vertical;
}

/* Gumb POŠALJI — crvena (logo boja), desno poravnan */
.header15 .form-container .btn,
.header15 .form-container .btn-form {
  background: #a81a1a !important;
  color: #fff !important;
  border: 0;
  border-radius: 999px;
  padding: .95rem 2.4rem;
  font-family: var(--az-font);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  width: auto;
  display: inline-block;
  text-shadow: none;
}

/* Wrapper oko gumba — poravnaj desno */
.header15 .form-container .input-group-btn,
.header15 .form-container .col-md-12.input-group-btn {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  padding: 0 !important;
  margin: 0;
}

.header15 .form-container .btn:hover,
.header15 .form-container .btn-form:hover {
  background: #8a1414 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(168, 26, 26, .45);
}

/* Ukloni eventualne ostale pozadine/obrube od starih stilova */
.header15 .form-container .input-group-btn,
.header15 .form-container .alert {
  background: transparent;
}

/* ---------- Mobilni razmaci u hero sekciji ---------- */
@media (max-width: 991px) {
  .header15 {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
  }

  .header15 .content-container {
    text-align: center;
    padding: 0 1rem;
    margin-bottom: 2rem;
  }
  .header15 .content-container h1 {
    margin-bottom: 1.2rem;
  }
  .header15 .content-container p {
    margin-bottom: 1.5rem;
  }

  /* Strelica — kad je unutar content-containera */
  .header15 .content-container .mbr-arrow {
    margin: 1.5rem 0 0;
  }

  /* Strelica — kad je premještena ispod forme */
  .header15 .col-lg-4 .mbr-arrow {
    margin: 2rem auto 0;
    text-align: center;
  }

  .header15 .form-container {
    margin: 0 auto 1.5rem;
    padding: 1.4rem 1.1rem;
    max-width: 100%;
  }

  .header15 .col-lg-8,
  .header15 .col-md-7,
  .header15 .col-lg-4,
  .header15 .col-md-5 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
  }

  .header15 .content-container {
    padding-right: 1rem;
  }
  .header15 .col-lg-4 {
    padding-right: 0;
  }
}

/* Manji mobiteli */
@media (max-width: 480px) {
  .header15 {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
  }

  .header15 .content-container h1 {
    font-size: 1.9rem;
    line-height: 1.25;
  }

  .header15 .content-container p {
    font-size: 1.05rem;
  }

  .header15 .form-container {
    padding: 1.2rem 1rem;
  }
}

/* ---------- 8) Header / navigacija ---------- */
.az-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1001;
  height: var(--az-header-h);
  background: var(--az-bg-dark);
  box-shadow: 0 2px 10px rgba(7,59,76,.35);
  transition: height .28s ease, box-shadow .28s ease;
}
.az-header.az-scrolled { --az-header-h: var(--az-header-h-sm); }

.az-header-inner {
  max-width: 1200px; margin: 0 auto; padding: 0 15px;
  height: var(--az-header-h);
  display: flex; align-items: center; justify-content: space-between;
}

.az-logo { display: flex; align-items: center; }
.az-logo a {
  display: flex; align-items: center;
  color: var(--az-text-light);
  font-weight: 700; font-size: 1.15rem;
  text-decoration: none;
}
.az-logo img { height: 2.6rem; transition: height .28s ease; }
.az-header.az-scrolled .az-logo img { height: 2.1rem; }

.az-nav-links {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.az-nav-links li { position: relative; margin-left: 6px; }
.az-nav-links a {
  display: block; padding: 10px 14px;
  color: var(--az-text-light);
  font-size: .98rem; font-weight: 500;
  border-radius: 999px;
  transition: background .2s, color .2s;
}
.az-nav-links a:hover,
.az-nav-links a.active { background: rgba(255,255,255,.16); color: #fff; }

.az-caret { font-size: .72rem; opacity: .85; margin-left: 2px; }

.az-nav-links .az-check {
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 5px;
  color: #57c96d;
  vertical-align: -1px;
  transition: transform .2s;
}
.az-nav-links .az-nav-check:hover .az-check { transform: scale(1.15); }

.az-dropbar {
  display: none;
  position: absolute; top: 100%; left: 0;
  min-width: 230px;
  background: var(--az-surface);
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius);
  box-shadow: var(--az-shadow);
  padding: 8px 0;
  list-style: none;
  margin: 0;
}
.az-nav-links .az-drop:hover > .az-dropbar { display: block; }
.az-dropbar a,
.az-dropbar a.active,
.az-dropbar a:focus {
  color: var(--az-text);
  background: transparent;
}
.az-dropbar a:hover {
  background: var(--az-surface-soft);
  color: var(--az-accent);
}

.az-btn-burger {
  display: none; cursor: pointer;
  border: 0; background: none; padding: 10px 4px;
}
.az-btn-burger span {
  display: block; width: 26px; height: 3px; margin: 5px 0;
  background: #fff; border-radius: 3px;
  transition: .25s;
}
.az-btn-burger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.az-btn-burger.open span:nth-child(2) { opacity: 0; }
.az-btn-burger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 991px) {
  .az-header-inner { flex-wrap: wrap; }
  .az-btn-burger { display: block; }
  .az-nav-links {
    display: none; width: 100%;
    flex-direction: column; align-items: stretch;
    background: var(--az-bg-dark);
    padding: 10px 8px 16px;
    border-top: 1px solid rgba(255,255,255,.12);
  }
  .az-nav-links.open { display: flex; }
  .az-nav-links a { border-radius: 10px; padding: 12px 14px; }
  .az-dropbar {
    position: static; box-shadow: none; border: 0;
    border-left: 2px solid var(--az-accent-2);
    margin: 2px 0 6px 14px; min-width: 0;
  }
  .az-nav-links .az-drop:hover > .az-dropbar { display: none; }
  .az-nav-links .az-drop.open > .az-dropbar { display: block; }
}

/* ---------- 9) Gumbi ---------- */
.btn {
  display: inline-block;
  padding: .7rem 1.5rem;
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600; font-size: 1rem;
  text-align: center;
  cursor: pointer;
  transition: .2s;
}
.btn-primary   { background: var(--az-accent);   color: #fff; }
.btn-primary:hover   { background: #18507d; color: #fff; }
.btn-secondary { background: var(--az-accent-2); color: #fff; }
.btn-secondary:hover { background: #2389a7; color: #fff; }
.btn-warning   { background: var(--az-accent-3); color: #3a2f00; }
.btn-warning:hover   { background: #e2962a; color: #3a2f00; }
.btn-success   { background: #5cb85c; color: #fff; }
.btn-success:hover   { background: #4a9a4a; color: #fff; }
.btn-danger    { background: #d9534f; color: #fff; }
.btn-white     { background: #fff; color: var(--az-accent); }
.btn-white:hover     { background: #e6f2fa; }

.btn-primary-outline   { background: transparent; color: var(--az-accent);   border: 2px solid var(--az-accent); }
.btn-primary-outline:hover   { background: var(--az-accent);   color: #fff; }
.btn-secondary-outline { background: transparent; color: var(--az-accent-2); border: 2px solid var(--az-accent-2); }
.btn-secondary-outline:hover { background: var(--az-accent-2); color: #fff; }
.btn-success-outline   { background: transparent; color: #5cb85c;            border: 2px solid #5cb85c; }
.btn-success-outline:hover   { background: #5cb85c;            color: #fff; }
.btn-warning-outline   { background: transparent; color: var(--az-accent-3); border: 2px solid var(--az-accent-3); }
.btn-warning-outline:hover   { background: var(--az-accent-3); color: #3a2f00; }

.btn-sm { padding: .45rem 1rem; font-size: .9rem; }

.mbr-section-btn { margin-top: 1rem; }
.mbr-section-btn a.btn { margin-right: .4rem; }

/* ---------- 10) Kartice i features ---------- */
.card {
  display: flex; flex-direction: column;
  background: var(--az-surface);
  color: var(--az-text);
  border-radius: var(--az-radius);
  box-shadow: var(--az-shadow);
  padding: 1.5rem 1.4rem;
}
.card-title { font-weight: 600; color: var(--az-bg-dark); margin-bottom: .5rem; font-size: 1.3rem; }
.card-img   { display: flex; justify-content: center; margin-bottom: .75rem; }
.card-box, .card-box p, .card .mbr-text { color: var(--az-text-mut); }

.az-feat-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 68px; height: 68px;
  border-radius: 18px;
  background: var(--az-surface-soft);
}
.az-feat-ic svg { width: 34px; height: 34px; color: var(--az-accent); }

/* Features "Ne morate..." (8 kartica) */
#features1-6k { margin: 4.5rem 0; }
#features1-6k .media-container-row { align-items: stretch; gap: 3rem; }
#features1-6k [class*="col-"] { padding: 0; }
#features1-6k .col-lg-3 { flex: 0 0 calc(25% - 2.25rem); }
#features1-6k .card {
  text-align: center; align-items: center; justify-content: center;
  min-height: 320px; padding: 2.2rem 2.1rem;
}
#features1-6k .card-title { max-width: 260px; }

@media (max-width: 1199px) {
  #features1-6k .col-lg-3 { flex: 0 0 calc(50% - 1.5rem); }
}
@media (max-width: 767px) {
  #features1-6k .col-md-6, #features1-6k .col-lg-3 { flex: 0 0 100%; }
}

/* Features "Brzo / SEO / Fokus" (3 kartice) */
#features11-76 {
  background: #eee;
  margin: 4.5rem 0 6.5rem;
  padding: 4.5rem 0;
}
#features11-76 .media-container-row { align-items: stretch; gap: 3rem; }
#features11-76 [class*="col-"] { padding: 0; }
#features11-76 .col-md-6 { flex: 0 0 calc(50% - 1.5rem); }
#features11-76 .col-lg-4 { flex: 0 0 calc(33.333% - 2rem); }
#features11-76 .card {
  text-align: center; align-items: center; justify-content: center;
  min-height: 320px; padding: 2.2rem 2.1rem;
}

@media (max-width: 991px) {
  #features11-76 .col-lg-4 { flex: 0 0 calc(50% - 1.5rem); }
}
@media (max-width: 767px) {
  #features11-76 .col-md-6, #features11-76 .col-lg-4 { flex: 0 0 100%; }
}

/* ---------- 10b) Aplikacije — tamna sekcija (negativ) ---------- */
#content4-apps,
#features11-apps,
#content8-apps {
  background: var(--az-bg-dark);
  color: #eeeeee;
}

/* --- Naslov --- */
#content4-apps {
  padding: 6rem 0 2.5rem;
}
#content4-apps h2,
#content4-apps h3,
#content4-apps .mbr-section-title { color: #eeeeee; }
#content4-apps .mbr-section-subtitle { color: #c8d6de; }

/* --- Kartice: grid 3 × 2, sve iste visine prema najvišoj --- */
#features11-apps {
  padding: 2rem 0 5rem;
}

#features11-apps .media-container-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 2rem;
  margin: 0;
  align-items: stretch;
}

/* VAŽNO: ne diramo padding ovdje!
   Globalni [class*="col-"] { padding: 0 15px } ima specifičnost (0,1,0),
   a #features11-apps .card (1,1,0) — pa .card pravilo niže pobjeđuje. */
#features11-apps .media-container-row > [class*="col-"] {
  margin: 0;
  max-width: none;
  flex: none;
  display: block;
}

#features11-apps .card {
  width: 100%;
  height: 100%;
  padding: 3rem 2.2rem;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: none;
  border-radius: var(--az-radius);
  text-align: center;
  align-items: center;
  justify-content: flex-start;
  transition: background .25s, border-color .25s, transform .25s;
}
#features11-apps .card:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-3px);
}

#features11-apps .card-img { margin-bottom: 1.1rem; }

#features11-apps .card-title {
  color: #eeeeee;
  font-size: 1.2rem;
  margin-bottom: .7rem;
}

#features11-apps .card-box,
#features11-apps .card-box p,
#features11-apps .mbr-text {
  color: #c8d6de;
  margin: 0;
  font-size: .98rem;
}

#features11-apps .az-feat-ic {
  background: rgba(255,255,255,.08);
}
#features11-apps .az-feat-ic svg {
  color: var(--az-accent-2);
}

/* Responzivno: tablet 2 u redu, mobitel 1 */
@media (max-width: 991px) {
  #features11-apps .media-container-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  #features11-apps .media-container-row {
    grid-template-columns: 1fr;
  }
}

/* --- Gumb: outline, centriran, hover ispuna --- */
#content8-apps {
  padding: 0 0 6rem;
  margin-bottom: 6rem;
}

#content8-apps .media-container-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
#content8-apps .col-12,
#content8-apps .col-md-8 {
  flex: 0 0 auto;
  max-width: 100%;
  padding: 0;
  text-align: center;
}
#content8-apps .mbr-section-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
#content8-apps .mbr-section-btn a.btn { margin: 0; }

.btn-outline-light {
  display: inline-block;
  padding: 1rem 2.6rem;
  font-family: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: transparent;
  color: #eeeeee;
  border: 2px solid #eeeeee;
  border-radius: 999px;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.btn-outline-light:hover,
.btn-outline-light:focus-visible {
  background: #eeeeee;
  color: var(--az-bg-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,.3);
  outline: none;
}
/* Ukloni sve border-e i hr-ove unutar Aplikacije bloka */
#features11-apps,
#content8-apps {
  border: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
}
#features11-apps hr,
#content8-apps hr {
  display: none !important;
}

/* ---------- 11) Cjenik ---------- */
.plan { display: flex; flex-direction: column; }
.plan-header { text-align: center; padding: 1.4rem 1rem .6rem; }
.plan-body   { padding: 0 1.4rem 1.6rem; }
.plan-title  { font-size: 1.4rem; font-weight: 700; color: var(--az-bg-dark); }
.plan-price  { margin: .6rem 0; }
.price-value, .price-figure { font-weight: 800; color: var(--az-accent); }
.price-value  { font-size: 1.1rem; vertical-align: super; }
.price-figure { font-size: 2.9rem; }
.price-term   { color: var(--az-text-mut); }
.plan-list    { margin-bottom: .8rem; }
.plan .btn    { margin-top: .5rem; }

.list-group { list-style: none; padding: 0; margin: 0; }
.list-group-item {
  padding: .65rem 0;
  border-bottom: 1px dashed var(--az-border);
}
.list-group-item:last-child { border-bottom: 0; }

/* ---------- 11b) Cijene paketa — prostor i boje gumba ---------- */
#pricing-tables1-k3 {
  padding: 4rem 0 8rem;
  margin-bottom: 0rem;
}

/* Standard — tamno sivi */
#pricing-tables1-k3 .btn-warning {
  background: #3a3f45;
  color: #fff;
}
#pricing-tables1-k3 .btn-warning:hover {
  background: #22262a;
  color: #fff;
}

/* Business — plavi (ista boja kao NAJPOPULARNIJI i okvir kartice) */
#pricing-tables1-k3 .btn-primary {
  background: #2371ae;
  color: #fff;
}
#pricing-tables1-k3 .btn-primary:hover {
  background: #1a5a8c;
  color: #fff;
}

/* Premium — zeleni */
#pricing-tables1-k3 .btn-success {
  background: #4a9a4a;
  color: #fff;
}
#pricing-tables1-k3 .btn-success:hover {
  background: #3a7d3a;
  color: #fff;
}

/* Ultimate — magenta */
#pricing-tables1-k3 .btn-secondary {
  background: #c2185b;
  color: #fff;
}
#pricing-tables1-k3 .btn-secondary:hover {
  background: #a01449;
  color: #fff;
}
#pricing-tables1-k3 .btn {
  font-weight: 700;
  letter-spacing: .03em;
}

/* ---------- 12) Koraci ---------- */
.step2 {
  padding: 5.5rem 0;
  margin: 3rem 0;
}

.step2 .mbr-section-title    { margin-bottom: .6rem; }
.step2 .mbr-section-subtitle { margin-bottom: 3rem; }

.step2 .step-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 2rem;
  margin: 0;
}

.step2 .step-container .card {
  flex: 0 1 calc(33.333% - 1.334rem);
  max-width: calc(33.333% - 1.334rem);
  min-width: 260px;
  padding: 2.4rem 1.8rem;
  text-align: center;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
}

.step2 .step-element { width: 100%; }

.step2 .step-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.step2 .step {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--az-accent);
  color: #fff;
  font-weight: 700;
  font-size: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  line-height: 1;
}

.step2 .mbr-step-title {
  margin: 0 0 .7rem;
  font-size: 1.25rem;
  line-height: 1.3;
}
.step2 .mbr-step-text {
  color: var(--az-text-mut);
  margin: 0;
}

@media (max-width: 991px) {
  .step2 .step-container .card {
    flex: 0 1 calc(50% - 1rem);
    max-width: calc(50% - 1rem);
  }
}
@media (max-width: 640px) {
  .step2 .step-container .card {
    flex: 0 1 100%;
    max-width: 100%;
  }
}

/* ---------- 13) FAQ / Accordion ---------- */
#faq {
  padding: 5rem 0 9rem;
  margin-bottom: 0;
}

.accordion .card { margin-bottom: .6rem; padding: 0; }
.accordion .card-header {
  background: var(--az-surface);
  border-radius: var(--az-radius);
}
.panel-title {
  display: block;
  padding: 1rem 1.2rem;
  font-weight: 600;
  color: var(--az-bg-dark);
  cursor: pointer;
}
.panel-title h4 { margin: 0; }
.panel-collapse { display: none; }
.panel-collapse.show { display: block; }
.panel-collapse .panel-body {
  padding: .2rem 1.2rem 1.2rem;
  color: var(--az-text-mut);
}

/* --- Strelice: veće, samo crte, bez ispune --- */
.sign {
  display: inline-block;
  width: 18px;
  height: 18px;
  font-size: 0;
  vertical-align: middle;
  margin-right: 10px;
  margin-top: -2px;
  position: relative;
  transition: transform .25s ease;
}
.sign::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea3c4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.panel-title.collapsed .sign { transform: rotate(-90deg); }

/* ---------- 14) Sekcije s #eee pozadinom ---------- */
#content4-6h,
#content3-6n {
  background: #eee;
  margin: 4rem 0;
  padding: 4.5rem 1rem;
}
#content3-6n { margin: 4.5rem 0; padding: 5rem 0; }

#content4-70 .title p {
  font-size: 1.15rem;
  line-height: 2;
  margin-bottom: 3.5rem;
}

#content4-77 {
  margin: 5.5rem 0;
  border-top: 1px solid #ccc;
}
#content4-77 h2 { padding-top: 3.5rem; }

/* ---------- 14b) "A što to znači?" — centrirane crte ---------- */
#content9-6l {
  padding: 2rem 0;
}
#content9-6l .inner-container {
  text-align: center;
}
#content9-6l .line {
  border: 0;
  border-top: 1px solid var(--az-border);
  margin: 1.2rem auto;
  height: 0;
}

/* ---------- 15) Info traka ---------- */
.info1 {
  background: var(--az-bg-dark);
  color: var(--az-text-light);
}
.info1 * { color: var(--az-text-light); }

/* ---------- 15b) Održavanje — #eee traka ---------- */
#info1-78 {
  background: #eee;
  color: #333333;
  margin: 0;
  padding: 4rem 0;
}

#info1-78 h2,
#info1-78 p,
#info1-78 .mbr-fonts-style,
#info1-78 .media-container-column { color: #333333; }

#info1-78 .btn {
  font-weight: 700;
  letter-spacing: .03em;
}

@media (max-width: 767px) {
  #info1-78 { padding: 3rem 0; }
  #info1-78 .mbr-section-btn { text-align: center !important; padding: .8rem 0 0; }
}

/* ---------- 15c) Završni CTA — #eee blok ---------- */
#content4-7b,
#content3-6z,
#content8-7j {
  background: #eee;
  color: #333333;
  margin: 0;
}

/* Naslov */
#content4-7b {
  padding: 5rem 0 1rem;
}
#content4-7b h2,
#content4-7b .mbr-section-title { color: #333333; }

/* Tekst */
#content3-6z {
  padding: 0;
}
#content3-6z .mbr-text,
#content3-6z .mbr-text p,
#content3-6z .mbr-text strong,
#content3-6z .mbr-text a { color: #333333; }
#content3-6z .mbr-text a { text-decoration: underline; }

/* Gumb — veći, bold, donji padding i margina */
#content8-7j {
  padding: 1rem 0 7rem;
  margin-bottom: 6rem;
}

#content8-7j .media-container-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
#content8-7j .col-12,
#content8-7j .col-md-8 {
  flex: 0 0 auto;
  max-width: 100%;
  padding: 0;
  text-align: center;
}
#content8-7j .mbr-section-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
}
#content8-7j .mbr-section-btn a.btn {
  margin: 0;
  padding: 1rem 2.6rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
#content8-7j .mbr-section-btn a.btn:hover {
  color: #fff;
}

/* ---------- 16) Footer ---------- */
#footer2-k2 {
  background: var(--az-bg-dark);
  color: #eeeeee;
  padding: 4rem 0 2.5rem;
}

/* --- Tri kolone: flex, ravnomjerno preko cijele širine --- */
#footer2-k2 .footer-columns {
  display: flex;
  justify-content: space-between;
  gap: 0;
  margin-bottom: 3rem;
  width: 100%;
}

#footer2-k2 .footer-col {
  flex: 1 1 0;
  min-width: 0;
  text-align: left;
  padding: 0 2.5rem;
  position: relative;
}

/* Prva kolona — bez lijevog paddinga */
#footer2-k2 .footer-col:first-child {
  padding-left: 0;
}

/* Zadnja kolona — bez desnog paddinga */
#footer2-k2 .footer-col:last-child {
  padding-right: 0;
}

/* Vertikalna crta između kolona */
#footer2-k2 .footer-col + .footer-col::before {
  content: "";
  position: absolute;
  left: 0;
  top: .3rem;
  bottom: .3rem;
  width: 1px;
  background: rgba(255,255,255,.15);
}

#footer2-k2 .footer-col p {
  margin: 0;
  line-height: 1.9;
  color: #eeeeee;
}

#footer2-k2 .footer-heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: #eeeeee;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 1.1rem;
}

#footer2-k2 .footer-col a {
  color: #eeeeee;
  transition: color .2s;
}
#footer2-k2 .footer-col a:hover {
  color: var(--az-accent-2);
}

/* --- Linkovi sa strelicama --- */
#footer2-k2 .footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}
#footer2-k2 .footer-links li { margin-bottom: .35rem; }

#footer2-k2 .footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-left: 0;
}
#footer2-k2 .footer-links a::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232ea3c4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 6 15 12 9 18'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .2s;
}
#footer2-k2 .footer-links a:hover::before {
  transform: translateX(3px);
}

/* --- Solid crta 1px, svjetlija od pozadine --- */
#footer2-k2 .footer-divider {
  border: 0;
  border-top: 1px solid rgba(255,255,255,.15);
  margin: 0 0 1.5rem;
}

/* --- Donji red: copyright lijevo, ikone desno --- */
#footer2-k2 .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

#footer2-k2 .copyright {
  margin: 0;
  font-size: .92rem;
  color: #eeeeee;
  opacity: .8;
}

/* --- Social ikone u kvadratnim kontejnerima --- */
#footer2-k2 .social-list {
  display: flex;
  gap: 10px;
}

#footer2-k2 .social-list a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  color: #eeeeee;
  transition: background .2s, color .2s, transform .2s;
}
#footer2-k2 .social-list a:hover {
  background: rgba(255,255,255,.15);
  color: var(--az-accent-2);
  transform: translateY(-2px);
}
#footer2-k2 .social-list svg {
  width: 22px;
  height: 22px;
}

/* --- Responzivno --- */
@media (max-width: 767px) {
  #footer2-k2 { padding: 3rem 0 2rem; }

  #footer2-k2 .footer-columns {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
  }

  #footer2-k2 .footer-col {
    padding: 0;
  }

  #footer2-k2 .footer-col + .footer-col::before {
    display: none;
  }

  #footer2-k2 .footer-bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}

/* ---------- 17) Forme ---------- */
.form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  padding: .7rem .9rem;
  margin: 0 0 .8rem;
  border: 1px solid var(--az-border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: var(--az-font);
  background: var(--az-surface);
  color: var(--az-text);
}
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
  outline: 2px solid var(--az-accent-2);
  border-color: transparent;
}
.form-group { margin-bottom: .2rem; }

.header15 .form-container {
  background: var(--az-surface);
  border-radius: var(--az-radius);
  box-shadow: var(--az-shadow);
  padding: 1.1rem;
}
.header15 .form-container,
.header15 .form-control,
.header15 input,
.header15 textarea { color: var(--az-text); }
.header15 input::placeholder,
.header15 textarea::placeholder { color: var(--az-text-mut); opacity: 1; }
.header15 .btn { color: #fff; text-shadow: none; }
.header15 .btn-warning { color: #3a2f00; }

.alert {
  padding: .8rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.alert-success { background: #dff5e1; color: #256029; border: 1px solid #a8d8b9; }
.alert-danger  { background: #fde8e8; color: #8a1f1f; border: 1px solid #f5b7b7; }

.btn-loading { opacity: .7; cursor: wait; }

/* ---------- 18) Scroll-to-top ---------- */
.az-scroll-top {
  position: fixed;
  left: 50%;
  bottom: 22px;
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--az-accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(7,59,76,.25);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s, background .2s;
  z-index: 999;
}
.az-scroll-top:hover {
  background: #18507d;
  transform: translate(-50%, -2px);
}
.az-scroll-top.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.az-scroll-top svg { width: 20px; height: 20px; }

/* Sakrij scroll-to-top na mobitelu i tabletu */
@media (max-width: 991px) {
  .az-scroll-top,
  .az-scroll-top.show {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* ============================================================
   20) Moderni efekti — 2026
   ============================================================ */

/* --- Glassmorphism header --- */
.az-header {
  background: rgba(7, 59, 76, .88);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  box-shadow: none;
  transition: height .28s ease, background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.az-header.az-scrolled {
  background: rgba(7, 59, 76, .72);
  box-shadow: 0 6px 28px rgba(7, 59, 76, .35);
  border-bottom-color: rgba(255,255,255,.12);
}

/* --- Scroll progress bar --- */
.az-progress {
  position: fixed;
  top: var(--az-header-h);
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--az-accent), var(--az-accent-2) 45%, var(--az-accent-3));
  z-index: 1000;
  transition: width .08s linear, top .28s ease;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(46,163,196,.6);
}

/* --- Hero: Ken Burns (transform-based, GPU akcelerirano) --- */
.header15 {
  isolation: isolate;
  position: relative;
  z-index: 1;
  background-color: var(--az-bg-dark);
  overflow: hidden;
}

/* Fotografija ide na ::after sloj — animira se transformom, ne background-sizeom */
.header15::after {
  content: "";
  position: absolute;
  inset: -5%;                    /* margina za zoom bez praznih rubova */
  z-index: 0;
  background-image: var(--az-bg-img);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  animation: az-kenburns 14s ease-out infinite alternate;
  transform-origin: center center;
  will-change: transform;        /* GPU layer — kreće odmah */
  pointer-events: none;
  backface-visibility: hidden;
}

@keyframes az-kenburns {
  0%   { transform: scale(1)    translate3d(0, 0, 0); }
  100% { transform: scale(1.18) translate3d(-2.5%, -1.5%, 0); }
}

/* --- Hero: animirani gradient mesh — plava paleta, bleeds 100px dolje --- */
.header15::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: -100px;      /* produžetak 100px ispod hero sekcije */
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 28%, rgba(46,163,196,.32), transparent 45%),
    radial-gradient(circle at 82% 72%, rgba(35,113,170,.28), transparent 50%),
    radial-gradient(circle at 55% 15%, rgba(7,59,76,.30), transparent 48%);
  animation: az-mesh 22s ease-in-out infinite alternate;

  /* mekani fade na dnu da produžetak izgleda kao prirodan prijelaz */
  -webkit-mask-image: linear-gradient(to bottom,
    #000 0%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom,
    #000 0%, #000 82%, transparent 100%);
}

@keyframes az-mesh {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2.5%, 1.5%, 0) scale(1.05); }
  100% { transform: translate3d(2%, -1.5%, 0) scale(1.02); }
}

/* Hero sadržaj mora biti iznad Ken Burnsa i mesha */
.header15 .container { position: relative; z-index: 2; }

/* --- Reveal on scroll: sekcije --- */
.az-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.az-reveal.az-in {
  opacity: 1;
  transform: translateY(0);
}

/* --- Reveal on scroll: grupe (kartice s delayem) --- */
.az-reveal-group > * {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .7s cubic-bezier(.22,.61,.36,1),
    transform .7s cubic-bezier(.22,.61,.36,1);
}
.az-reveal-group.az-in > * { opacity: 1; transform: translateY(0); }

.az-reveal-group.az-in > *:nth-child(1) { transition-delay: .05s; }
.az-reveal-group.az-in > *:nth-child(2) { transition-delay: .13s; }
.az-reveal-group.az-in > *:nth-child(3) { transition-delay: .21s; }
.az-reveal-group.az-in > *:nth-child(4) { transition-delay: .29s; }
.az-reveal-group.az-in > *:nth-child(5) { transition-delay: .37s; }
.az-reveal-group.az-in > *:nth-child(6) { transition-delay: .45s; }
.az-reveal-group.az-in > *:nth-child(7) { transition-delay: .53s; }
.az-reveal-group.az-in > *:nth-child(8) { transition-delay: .61s; }

/* --- Shine efekt na gumbima --- */
.btn-primary,
.btn-secondary,
.btn-warning,
.btn-success,
.btn-white,
.btn-outline-light {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after,
.btn-secondary::after,
.btn-warning::after,
.btn-success::after,
.btn-white::after,
.btn-outline-light::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg,
    transparent 30%,
    rgba(255,255,255,.28) 50%,
    transparent 70%);
  transform: translateX(-130%);
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.btn-primary:hover::after,
.btn-secondary:hover::after,
.btn-warning:hover::after,
.btn-success:hover::after,
.btn-white:hover::after,
.btn-outline-light:hover::after {
  transform: translateX(130%);
}

/* --- Kartice: jači hover lift --- */
.card {
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(7, 59, 76, .14);
}

/* Plan kartice u cjeniku — poseban hover */
.plan .card,
.pricing-table1 .plan { transition: transform .3s ease, box-shadow .3s ease; }
.pricing-table1 .plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(7, 59, 76, .16);
}

/* --- Smooth FAQ otvaranje --- */
.panel-collapse.show {
  animation: az-faq-in .32s cubic-bezier(.22,.61,.36,1);
}
@keyframes az-faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Focus ring za pristupačnost (tipkovnica) --- */
:focus-visible {
  outline: 2px solid var(--az-accent-2);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible,
.az-nav-links a:focus-visible {
  outline-offset: 4px;
}

/* --- Respekt za prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .az-reveal,
  .az-reveal-group > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .header15::after,
  .header15::before { animation: none; }
}

/* ============================================================
   22) Share buttons (Dijelite ovu stranicu)
   ============================================================ */
.az-share {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.az-share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  color: #fff;
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.az-share-btn svg { width: 22px; height: 22px; }
.az-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.2);
  color: #fff;
}
.az-share-fb { background: #1877F2; }
.az-share-x  { background: #000; }
.az-share-li { background: #0077b5; }
.az-share-wa { background: #25d366; }

/* Share sekcija iznad footera */
#social-buttons3-ai {
  padding: 4rem 0 5rem;
  background: #fff;
}
#social-buttons3-ai h2 {
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
}

/* ============================================================
   23) Specifične stranice — razmaci i obrubi
   ============================================================ */

/* Veća top margina iznad "Dizajn web stranica" */
#content4-9m {
  margin-top: 6rem;
}

/* Veća top margina iznad "Najčešće greške pri optimizaciji stranica" */
#content4-fd {
  margin-top: 6rem;
}

/* 1px #eee top border na sekciji Koraci */
#step2-9w {
  border-top: 1px solid #eeeeee;
  padding-top: 5rem;
  margin-top: 5rem;
}

/* Responzivno — manje margine na mobitelu */
@media (max-width: 767px) {
  #content4-9m,
  #content4-fd {
    margin-top: 4rem;
  }
  #step2-9w {
    padding-top: 3.5rem;
    margin-top: 3.5rem;
  }
}
/* Hero pozadina za izrada_web_stranica.html */
#header15-9l::after {
  background-image: url("../images/bg-1-2000x1333.jpg");
}

/* Veće top margine za internet_marketing.html */
#content4-fi {
  margin-top: 6rem;
}

/* 1px #eee top border na Koracima ove stranice */
#step2-aw {
  border-top: 1px solid #eeeeee;
  padding-top: 5rem;
  margin-top: 5rem;
}

/* Features18 kartice (Branding, Copywriting, itd.) */
#features18-ji,
#features18-jl {
  margin: 4rem 0;
}
#features18-ji .media-container-row,
#features18-jl .media-container-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
  align-items: stretch;
}
#features18-ji .card,
#features18-jl .card {
  padding: 0;
  background: #fff;
  border-radius: var(--az-radius);
  box-shadow: var(--az-shadow);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}
#features18-ji .card:hover,
#features18-jl .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(7,59,76,.14);
}
#features18-ji .card-img,
#features18-jl .card-img {
  margin: 0;
  overflow: hidden;
}
#features18-ji .card-img img,
#features18-jl .card-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform .4s;
}
#features18-ji .card:hover .card-img img,
#features18-jl .card:hover .card-img img {
  transform: scale(1.05);
}
#features18-ji .card-box,
#features18-jl .card-box {
  padding: 1.4rem 1.3rem 1.6rem;
}
#features18-ji .card-title,
#features18-jl .card-title {
  color: var(--az-bg-dark);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .7rem;
  padding: 0;
}
#features18-ji .mbr-text,
#features18-jl .mbr-text {
  color: var(--az-text-mut);
  font-size: .95rem;
  margin: 0;
}
#features18-ji .mbr-overlay,
#features18-jl .mbr-overlay {
  display: none;
}

@media (max-width: 991px) {
  #features18-ji .media-container-row,
  #features18-jl .media-container-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  #features18-ji .media-container-row,
  #features18-jl .media-container-row {
    grid-template-columns: 1fr;
  }
  #content4-fi { margin-top: 4rem; }
  #step2-aw {
    padding-top: 3.5rem;
    margin-top: 3.5rem;
  }
}
/* Hero pozadina za internet_marketing.html */
#header15-al::after {
  background-image: url("../images/bg-4-2000x1333.jpg");
}

/* ============================================================
   23b) Mobilne prilagodbe za izrada_web_stranica.html
   ============================================================ */
@media (max-width: 767px) {

  /* 1) Druga hero fotografija na mobitelu */
  #header15-9l::after {
    background-image: url("../images/bg-1-mobile-2000x1333.jpg");
    /* Ako nemaš mobilnu verziju, ostavi istu:
       background-image: url("../images/bg-1-2000x1333.jpg"); */
  }

  /* 2) Veći razmak ispod hero sekcije do "Dizajn web stranica" */
  #content4-9m {
    margin-top: 4rem !important;
  }

  /* 4) Border iznad Koraka + veći razmak */
  #step2-9w {
    border-top: 1px solid #eeeeee;
    margin-top: 4rem;
    padding-top: 4rem;
  }

  /* 5) Top margin na "Dijelite ovu stranicu" */
  #social-buttons3-ai {
    margin-top: 3rem;
    padding: 3rem 1rem 4rem;
  }
  #social-buttons3-ai h2 {
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
  }

  /* 6) Share ikone — manje i sve 4 u jedan red */
  .az-share {
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: center;
  }
  .az-share-btn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    flex: 0 0 auto;
  }
  .az-share-btn svg {
    width: 18px;
    height: 18px;
  }
}

/* Manji mobiteli (<400px) — još manje ikone */
@media (max-width: 400px) {
  .az-share-btn {
    width: 40px;
    height: 40px;
  }
  .az-share-btn svg {
    width: 16px;
    height: 16px;
  }
}

/* ---------- Internet marketing specifično ---------- */

/* Hero pozadina */
#header15-al::after {
  background-image: url("../images/bg-4-2000x1333.jpg") !important;
}

/* Veća top margina iznad "Zašto je SEO potreban..." */
#content4-fi {
  margin-top: 6rem;
}

/* Veća bottom margina ispod podnaslova "Pokušat ćemo to objasniti..." */
#content4-fi .mbr-section-subtitle {
  margin-bottom: 4rem;
}

/* Veća top margina iznad "SEO u doba umjetne inteligencije" */
#content1-ai {
  padding-top: 6rem;
}

/* Kartice objava — ujednačene visine, veće margine */
#features18-ji,
#features18-jl {
  margin: 6rem 0;
}

#features18-ji .media-container-row,
#features18-jl .media-container-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: stretch;
  padding: 0 !important;
  margin: 0 !important;
}

#features18-ji .card,
#features18-jl .card {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--az-radius);
  box-shadow: var(--az-shadow);
  overflow: hidden;
  transition: transform .3s, box-shadow .3s;
}

#features18-ji .card:hover,
#features18-jl .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(7,59,76,.14);
}

#features18-ji .card-wrapper,
#features18-jl .card-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}

#features18-ji .card-box,
#features18-jl .card-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.4rem 1.3rem 1.6rem;
}

#features18-ji .card-title,
#features18-jl .card-title {
  color: var(--az-bg-dark);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: .7rem;
  padding: 0;
}

#features18-ji .mbr-text,
#features18-jl .mbr-text {
  color: var(--az-text-mut);
  font-size: .95rem;
  margin: 0;
}

#features18-ji .card-img,
#features18-jl .card-img {
  margin: 0;
  overflow: hidden;
}

#features18-ji .card-img img,
#features18-jl .card-img img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-radius: 0;
  transition: transform .4s;
}

#features18-ji .card:hover .card-img img,
#features18-jl .card:hover .card-img img {
  transform: scale(1.05);
}

#features18-ji .mbr-overlay,
#features18-jl .mbr-overlay {
  display: none;
}

/* Top border iznad Koraka */
#step2-aw {
  border-top: 1px solid #eeeeee;
  padding-top: 5rem;
  margin-top: 5rem;
}

/* Responzivno */
@media (max-width: 991px) {
  #features18-ji .media-container-row,
  #features18-jl .media-container-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  #content4-fi {
    margin-top: 4rem;
  }
  #content4-fi .mbr-section-subtitle {
    margin-bottom: 2.5rem;
  }
  #content1-ai {
    padding-top: 4rem;
  }
  #features18-ji,
  #features18-jl {
    margin: 4rem 0;
  }
  #features18-ji .media-container-row,
  #features18-jl .media-container-row {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  #step2-aw {
    padding-top: 3.5rem;
    margin-top: 3.5rem;
  }
}

/* ============================================================
   24) Slika aikido — puna širina (svi ekrani)
   ============================================================ */
#image2-ff {
  padding: 0 !important;
  margin: 0 !important;
  margin-block: 0 !important;
  margin-inline: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden;
}

#image2-ff .mbr-figure,
#image2-ff figure.mbr-figure {
  padding: 0 !important;
  margin: 0 !important;
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-inline-start: 0 !important;
  margin-inline-end: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

#image2-ff .image-block {
  padding: 0 !important;
  margin: 0 !important;
  margin-block: 0 !important;
  margin-inline: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

#image2-ff img {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto;
  display: block;
  border-radius: 0 !important;
}