.elementor-8 .elementor-element.elementor-element-57d7ed8{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-42474b8{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;border-radius:0px 0px 0px 0px;}.elementor-8 .elementor-element.elementor-element-b53de77{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-8 .elementor-element.elementor-element-308084b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:100px;--padding-bottom:100px;--padding-left:0px;--padding-right:0px;}.elementor-8 .elementor-element.elementor-element-037830b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-8 .elementor-element.elementor-element-e57eaf1{padding:0100px 0px 100px 0px;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-42474b8 */<!--
  ════════════════════════════════════════════════════
  DIJELJENI CSS — dodaj ovo u Elementor > Custom CSS
  ili u WordPress > Appearance > Additional CSS
  ════════════════════════════════════════════════════
-->
<style>
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --cream:      #F5F0E8;
  --sand:       #E8DDD0;
  --terracotta: #C4714A;
  --rust:       #A0492A;
  --dusk:       #2C3E50;
  --slate:      #1A2433;
  --text:       #3A3228;
  --muted:      #7A6E66;
  --white:      #FFFFFF;
}

/* Tipografija */
.ab-tag {
  font-family: 'DM Sans', sans-serif;
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--terracotta);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .8rem;
}
.ab-tag::before {
  content: '';
  display: inline-block;
  width: 20px; height: 2px;
  background: var(--terracotta);
  flex-shrink: 0;
}

.ab-h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900;
  color: var(--slate);
  line-height: 1.1;
  margin-bottom: 1.2rem;
}

.ab-h2 em {
  font-style: italic;
  color: var(--terracotta);
}

/* Gumbi */
.ab-btn-primary {
  display: inline-block;
  background: var(--terracotta);
  color: var(--white) !important;
  text-decoration: none;
  padding: .85rem 2rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background .3s, transform .2s;
  border: none; cursor: pointer;
}
.ab-btn-primary:hover { background: var(--rust); transform: translateY(-2px); }

.ab-btn-outline {
  display: inline-block;
  border: 1.5px solid var(--dusk);
  color: var(--dusk) !important;
  text-decoration: none;
  padding: .85rem 2rem;
  font-family: 'DM Sans', sans-serif;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-radius: 2px;
  transition: background .3s, color .3s;
}
.ab-btn-outline:hover { background: var(--dusk); color: var(--white) !important; }

/* Fade-in animacija */
.ab-fade {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.ab-fade.visible {
  opacity: 1;
  transform: translateY(0);
}
.ab-hero-bg {
    width: 100%;
    height: 100%;
    background-image: url(https://split.e-tomic.hr/wp-content/uploads/2026/06/Soboslikar-copy.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
</style>/* End custom CSS */