.efis-image-separator {
    position: relative;
    overflow: hidden;
    display: block;
    box-sizing: border-box;

    /* Full width - probija Enfold container */
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* ============================================================
   ENFOLD PADDING FIX
   Enfold stavlja padding-top/bottom: 50px na .content i
   .sidebar wrappere. Koristimo negativne margine na outer
   wrapu da ponistimo taj razmak SAMO za nas element.

   Ako Enfold separator je PRVI element u sekciji:
   efis-first-in-section klasa uklanja top razmak.
   Ako je ZADNJI: efis-last-in-section uklanja bottom razmak.
   Ako je JEDINI ili zelis ukloniti OBA: efis-no-padding.
   ============================================================ */

/* Outer wrap - uklanja Enfold padding za sve pozicije */
.efis-outer-wrap {
    margin-left:  0 !important;
    margin-right: 0 !important;
    padding:      0 !important;
    width:        100% !important;
}

/* Ukloni padding iznad (element je prvi u sekciji) */
.efis-outer-wrap:first-child {
    margin-top: -50px !important;
}

/* Ukloni padding ispod (element je zadnji u sekciji) */
.efis-outer-wrap:last-child {
    margin-bottom: -50px !important;
}

/* Ako je i prvi i zadnji (jedini element u sekciji) */
.efis-outer-wrap:first-child:last-child {
    margin-top:    -50px !important;
    margin-bottom: -50px !important;
}

/* ============================================================
   Specificni selektori za Enfold strukture
   .entry-content, .avia-builder-el su Enfold wrappers
   koji takodje mogu dodavati razmake
   ============================================================ */
.entry-content .efis-outer-wrap:first-child,
.avia-builder-el .efis-outer-wrap:first-child,
.flex_column > .efis-outer-wrap:first-child {
    margin-top: -50px !important;
}

.entry-content .efis-outer-wrap:last-child,
.avia-builder-el .efis-outer-wrap:last-child,
.flex_column > .efis-outer-wrap:last-child {
    margin-bottom: -50px !important;
}

/* Overlay */
.efis-image-separator .efis-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Shape wrapper */
.efis-image-separator .efis-shape {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 2;
    line-height: 0;
    pointer-events: none;
}
.efis-image-separator .efis-shape svg {
    display: block;
    width: 100%;
    height: auto;
    min-height: 28px;
}
.efis-image-separator .efis-shape-top {
    top: -1px;
    transform: rotate(180deg);
    transform-origin: center center;
}
.efis-image-separator .efis-shape-bottom {
    bottom: -1px;
}

/* Parallax */
.efis-has-parallax {
    will-change: background-position-y;
    background-attachment: scroll !important;
}

/* Mobitel */
@media (max-width: 768px) {
    .efis-image-separator {
        min-height: 150px !important;
    }
    .efis-outer-wrap:first-child {
        margin-top: -50px !important;
    }
    .efis-outer-wrap:last-child {
        margin-bottom: -50px !important;
    }
}


/* ============================================================
   RESPONSIVE VISIBILITY
   Iste breakpoint vrijednosti kao Enfold Color Section:
   - Large:  > 990px  (Desktop)
   - Medium: 768-989px (Tablet Landscape)
   - Small:  480-767px (Tablet Portrait)
   - XSmall: < 479px  (Smartphone Portrait)
   ============================================================ */

/* Sakrij na large (Desktop > 990px) */
@media only screen and (min-width: 990px) {
    .efis-outer-wrap.efis-hide-large {
        display: none !important;
    }
}

/* Sakrij na medium (Tablet Landscape 768-989px) */
@media only screen and (min-width: 768px) and (max-width: 989px) {
    .efis-outer-wrap.efis-hide-medium {
        display: none !important;
    }
}

/* Sakrij na small (Tablet Portrait 480-767px) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .efis-outer-wrap.efis-hide-small {
        display: none !important;
    }
}

/* Sakrij na xsmall (Smartphone < 479px) */
@media only screen and (max-width: 479px) {
    .efis-outer-wrap.efis-hide-xsmall {
        display: none !important;
    }
}