.sectionstart {
    width: 100vw;
    height: 100vh;
    background-position: center center;
    background-size: cover;
    transition: background-image 0.5s ease-in-out; /* fade efekt */
    position:relative;
}

    .sectionstart #myVideo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40vw;
        height: 40vw; /* ista vrednost kao width */
        border-radius: 100%;
        object-fit: cover;
        opacity: 1;
        filter: blur(4px);
    }

    .sectionstart .video-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40.5vw;
        height: 40.5vw;
        border-radius: 100%;
        background: rgba(230, 210, 186, 0.62); 
        pointer-events: none; 
        filter:blur(5px);
    }

    .sectionstart .textstart {
        max-width: 34vw;
        text-align: center;
        position: absolute;
        top: 52%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-family: Garet;
        color: #3d2b1a;
    }
        .sectionstart .textstart h1 {
        font-weight:900;
        font-size:2.5vw;
        padding-top:3px;
        text-transform:uppercase;
        }
        .sectionstart .textstart h2 {
            font-size: 1.2vw;
            color: white;
            font-weight: 500;
            background: linear-gradient(to right, transparent, #d0b2ed,#c0d1ae);
            padding: 3px 8px;
            border-radius: 50px 0 50px 0;
            margin-bottom: 20px;
            letter-spacing: 1px;
        }

    .sectionstart img {
    width:5vw;
    }

    .sectionstart p {
        font-size: 1vw;
        font-style: italic;
        color:black;
    }

.secondsection {
    background: linear-gradient(to top, #fff7f7, #dbc3a9);
    width: 100vw;
    height: 130vh;
    text-align:center;
}

    .secondsection span {
        font-family: Garet;
        color: white;
        background-color: black;
        font-size:1.1vw;
        padding: 2px 0;
    }

.gloweffect {
    font-family: SilverPersonal;
    text-shadow: 0px 0px 5px #d0b2ed;
    padding: 0 50px 0 5px;
}

.ticker-wrapper {
    width: 100%;
    overflow: hidden;
    border-top: 2px solid #d0b2ed;
    border-bottom: 2px solid #d0b2ed;
}

.ticker {
    display: flex;
    width: max-content;
    animation: ticker-animation 14s linear infinite;
}

    .ticker span {
        white-space: nowrap;
        padding-right: 300px; /* razmak između ponavljanja teksta */
        font-weight: bold;
        font-size: 1.1vw;
    }

@keyframes ticker-animation {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
    /* pomera pola širine, pošto je tekst dupliran */
}


.secondsection h3 {
    margin: 15vh 0 5vh 3vw;
    font-family: hourglass;
    font-size: 3.2vw;
    color: #3d2b1a;
    text-align:start;
}

.row {
    display: flex;
    justify-content: space-between; /* ravnomeran razmak između divova */
    padding: 0 40px; /* razmak od ivica */
    gap: 15px; /* dodatni razmak između divova */
}

.box {
    flex: 1; /* svi divovi zauzimaju isti prostor */
    background: linear-gradient(to bottom, transparent 35%, #c0d1ae);
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: column;
    border-bottom: solid 6px #6e825a;
}

    .box:last-child {
        background: linear-gradient(to bottom, transparent 35%, #d0b2ed);
        border-bottom: solid 8px #6c4a8c;
    }

    .box img {
    width:100%;
    border-radius:100%;
    margin-bottom:15px;
    }

    .box h4 {
    font-family:Garet;
    text-transform:uppercase;
    text-align:center;
    font-size:1vw;
    font-weight:900;
    margin-bottom:20px;
    }

    .box span {
        position: absolute;
        top: 9px;
        left: 5px;
        background: linear-gradient(to right, #d0b2ed, transparent);
        padding: 7px 10px 0px 10px;
        font-family: Hourglass;
        font-weight: 900;
        border-left: #6c4a8c solid 2px;
    }

    .box p {
    font-size:0.9vw;
    text-align:start;
    margin-bottom:80px;
    }

.secondsection h5 {
    text-align: center;
    margin-top: 50px;
    font-family: Garet;
    color: #3d2b1a;
    opacity:0.7;
}

    .secondsection h5 strong {
        border-top: 1.5px solid #3d2b1a;
        border-bottom: 1.5px solid #3d2b1a;
        padding: 10px 5px;
        letter-spacing: 1px;
        font-weight:900;
    }

.box .btnmore{
    margin:30px 0 0 0;
    font-family:Garet !important;
    position:absolute;
    bottom:20px;
}


.thirdsection {
    width: 100vw;
    height: 100vh;
    background-color: #fff7f7;
    position: relative;
    color: #3d2b1a;
    font-family:Garet;
}

    .thirdsection img {
    position:absolute;
    bottom:0;
    right:0;
    z-index:0 !important;
    }

    .thirdsection h5{
        font-family: Garet;
        padding: 120px 30px 5px 30px;
        font-size: 2.3vw;

    }
    .thirdsection h6 {
        font-family: Garet;
        font-size: 1.8vw;
        padding: 0 30px;
    }
        .thirdsection h6 strong {
            background: linear-gradient( to right, transparent, #d0b2ed);
            padding: 5px 45px 5px 0px;
            border-radius: 0 0 100px 0;
        }

#map {
margin: 30px 0 20px 0px;
}

.worktime {
    z-index:99 !important;
    text-align:center;
    padding-top:95px;
    font-family:Garet
}

    .worktime h5 {
        padding: 0 !important;
        font-size: 3.2vw;
        font-family: Hourglass;
    }

    .worktime h6 {
        font-size: 2.8vw;
        font-family: Hourglass;
        padding-top:5px;
    }

    .worktime p strong {
        padding: 2px 30px;
        border-radius:100px 0  100px 0;
        color: white;
        font-weight: 900;
        background: linear-gradient(to left, #d0b2ed, #b8a89c);
        text-transform:uppercase;
    }

        .subota{
            background: linear-gradient(to left, #c0d1ae, #b8a89c) !important;
        }

.forthsection {
    text-align: center;
    overflow: hidden; /* sakriva sve što izlazi van */
    background-color: #b8a89c;
    width: 100vw;
    padding-bottom: 25.5vh;
    background-image: url(/media/holisticbg.png);
    background-size:cover;
}

.gloweffect1 .glow-scroll {
    display: flex;
    width: max-content; /* širina zavisi od sadržaja */
    animation: scroll 10s linear infinite; /* animacija stalnog kretanja */
    background-color: black;
    border-top: 2px solid #c0d1ae;
    border-bottom: 2px solid #c0d1ae;
    padding: 2px 0;
}

    .gloweffect1 .glow-scroll span {
        font-family: SilverPersonal;
        text-shadow: 0px 0px 5px #c0d1ae;
        margin-right: 80px;
        font-size: 1vw;
        color: white;
        font-weight: 900;
    }

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}


.forthsection h5{
    font-family:Hourglass;
    font-size:2.7vw;
    margin-top:25.5vh;
    margin-bottom:5vh;
    color:#fcfaf8;
}

    .forthsection h5 i {
        color: black;
    }

.forthsection p {
font-family: Garet;
padding: 0 50px;
text-align:justify;
}

.forthsection h6 {
    text-align: center;
    text-transform: uppercase;
    margin: 30px 0;
}

    .forthsection h6 strong {
        background: linear-gradient(to right, transparent, #d0b2ed, #c0d1ae);
        padding: 2px 25px;
        border-radius: 0 0 100px 0;
        color:white;
        font-weight:400 !important;
    }

.fifthsection {
    width: 100vw;
    height: 70vh;
    background-color: black;
    position: relative;
    /* centriranje svih sadržaja unutar sekcije */
    display: flex;
    justify-content: center; /* horizontalno centriranje */
    align-items: center; /* vertikalno centriranje */
    flex-direction: column;
    margin-bottom:-20px;
}

.reviews-container {
    position: relative;
    width: 33%;
    height: 50%;
    /* centriranje review kartice u container-u */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 50px;
}

/* svaka pojedinačna recenzija */
.review {
    width: 100%;
    height: 100%;
    background-color: white;
    border-radius: 50px;
    text-align: center;
    font-family: Garet;
    padding: 10px 30px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 0;
}

    .review.active {
        opacity: 1;
        z-index: 1;
    }

    .review::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 5px;
        border-radius: 50px;
        background: linear-gradient(45deg, #d0b2ed, #c0d1ae);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: destination-out;
        mask-composite: exclude;
        z-index: -1;
    }

    .review img {
        width: 30%;
        margin-bottom: 10px;
        margin-top: 20px;
    }

    .review .komentar {
        margin: 0;
        font-size: 11px;
        line-height: 1.5;
        height: 125px;
        text-align: justify;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 7;
        -webkit-box-orient: vertical;
    }

    .review .klijent {
        font-size:1.4vw;
        margin-top: 20px;
        font-family: Elephant;
        letter-spacing: 1px;
        color: #3d2b1a;
    }

/* Navigaciona dugmad bliže recenziji */
button.prev,
button.next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    color: white;
    border: none;
    font-size: 2vw;
    padding: 10px 23px;
    cursor: pointer;
    border-radius: 100%;
    z-index: 3;
}

button.prev {
    left: 27%; /* bliže recenziji */
    color: #d0b2ed !important;
}

button.next {
    right: 27%; /* bliže recenziji */
    color: #c0d1ae;
}


.review::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background-image: url('/media/reviewoverlay.png'); /* tvoja slika */
    background-size: cover;
    background-position: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1s ease; /* traje 1 sekundu */
    z-index: 2;
}

.review.overlay-active::after {
    opacity: 1;
}


.instagram {
    width: 100%;
    text-align:center;
    position: absolute;
    left: 50%;
    bottom: 4%;
    color: white;
    transform: translate(-50%,-4%);
    font-family: Garet;
    color: #e3d9d2;
}

.ingimg {
position:absolute;
z-index:0;
height:63%;
right:4%;
bottom:13%;
}




@media (max-width: 750px) {

    .sectionstart {
    width:100vw;
    background-image:none;
    }

        .sectionstart #myVideo {
            width: 100%;
            height: 100vh; 
            border-radius: 0 !important;
        }

    .sectionstart .video-overlay {
        width: 100%;
        height: 100%;
        border-radius: 0 !important;
        background: rgba(230, 210, 186, 0.6);
    }

        .sectionstart .textstart {
            max-width: 100vw;
            text-align: center;
            position: relative;
            
        }

            .sectionstart .textstart h1 {
                font-size: 7vw;
                padding-top: 15px;
                margin: 0 20px;
            }

            .sectionstart .textstart h2 {
                font-size: 4.4vw;
                padding: 3px 8px;
                border-radius: 50px 0 50px 0;
                letter-spacing: 1px;
                margin:7px 20px 20px 15px;
            }

        .sectionstart img {
            width: 40vw;
            opacity: 0.9 !important;
        }

        .sectionstart p {
            font-size: 3.7vw;
            margin: 0 7vw;
            text-align:start;
        }


    .secondsection {
        background: linear-gradient(to top, #fff7f7, #dbc3a9);
        width: 100vw;
        height: auto;
        text-align: center;
        padding:20px 0;
        pointer-events:none;
    }

        .secondsection span {
            font-size: 3.8vw !important;
            padding: 3px 0;
        }

        .ticker span {
            padding-right: 100px; 
            font-size: 3.8vw;
        }

    .secondsection h3 {
        margin: 9vh 0 4vh 0;
        font-size: 8vw;
        color: #3d2b1a;
        text-align: center;
    }

    .row {
        display: flex;
        flex-direction: column;
        padding: 0 20px 0 10px;
        gap: 30px; 
    }

    .box {
        width: 100%;
        display: flex;
        flex-direction: row; 
        align-items: center;
        justify-content: space-between; 
        background: linear-gradient(to right, transparent 35%, #c0d1ae);
        position: relative;
        border-right: solid 6px #6e825a;
        border-bottom: none;
        padding: 20px; 
    }

        .box:last-child {
            background: linear-gradient(to right, transparent 35%, #d0b2ed);
            border-right: solid 8px #6c4a8c;
            border-bottom: none;
        }

        .box img {
            width: 33vw;
        }

        .box h4 {
            text-align: center;
            font-size: 4vw;
            margin: 0 0 5vw 5vw;
        }

        .box span {
            position: absolute;
            top: 25%;
            left: 5px;
            background: linear-gradient(to right, #d0b2ed, transparent);
            padding: 7px 10px 0px 10px;
            font-family: Hourglass;
            font-weight: 900;
            border-left: #6c4a8c solid 2px;
        }

        .box p {
            font-size: 3vw;
            text-align: end;
            margin-bottom: 0px;
            margin: 0 0 0 5vw;
        }

    .secondsection h5 {
    padding: 0 10px;
    }

        .secondsection h5 strong {
           border:none;
        }

    .box .btnmore {
        display:none;
    }


    .thirdsection {
        width: 100vw;
        height: auto;
        background-color: #fff7f7;
        position: relative;
        color: #3d2b1a;
        font-family: Garet;
        padding-bottom:200px;
    }

        .thirdsection h5 {
            text-align:center;
            padding: 30px 15px 10px 15px;
            font-size: 5vw;
        }

        .thirdsection h6 {
            text-align:center;
            font-size: 3vw;
            padding: 0 2vw;
        }

            .thirdsection h6 strong {
                padding: 5px 20px 5px 10px;
            }

    #map {
        margin: 30px auto 20px auto;
        width: 95vw !important;
    }

    .kontaktpodaci {
    z-index:999 !important;
    text-align:end;
    }

    .thirdsection img {
       opacity:0.9;
    }

    .worktime {
        z-index: 99 !important;
        text-align: center;
        padding-top: 95px;
        font-family: Garet
    }

        .worktime h5 {
            font-size: 8vw;
            margin-bottom:20px;
        }

        .worktime h6 {
            font-size: 10vw;
            font-family: Hourglass;
            padding-top: 10px;
        }

        .worktime p strong {
            padding: 2px 5vw;
            border-radius: 100px 0 100px 0;
            color: white;
            font-weight: 900;
            background: linear-gradient(to left, #d0b2ed, #b8a89c);
            text-transform: uppercase;
            font-size:4vw;
        }

    .subota {
        background: linear-gradient(to left, #c0d1ae, #b8a89c) !important;
    }



    .forthsection {
        text-align: center;
        overflow: hidden; /* sakriva sve što izlazi van */
        background-color: #b8a89c;
        width: 100vw;
        height:auto;
        padding-bottom: 15vh;
        background-image: url(/media/holisticbg.png);
        background-size: cover;
    }

    .gloweffect1 .glow-scroll {
        padding: 3px 0;
    }

        .gloweffect1 .glow-scroll span {
            font-size: 3.8vw;
        }


    .forthsection h5 {
        font-size: 6.5vw;
        margin-top: 15vh;
    }

    .forthsection p {
        padding: 0 30px;
    }

    .forthsection h6 {
        text-align: justify;
        margin: 30px 30px;
        line-height:2;
    }
        .forthsection h6 strong {
            background: none;
        }

    .fifthsection {
        width: 100vw;
        height: 80vh;
    }

    .reviews-container {
        position: relative;
        width: 80vw;
        height: 50%;
    }

    /* svaka pojedinačna recenzija */
    .review {
        padding: 10px 20px;
    }

        .review img {
            width: 50%;
            margin-bottom: 10px;
            margin-top: 20px;
        }

        .review .komentar {
            margin: 0;
            font-size: 2.6vw;
            line-height: 1.5;
            height: 60%;
        }

        .review .klijent {
            font-size: 3vw;
            margin-top: 0;
            font-family: Elephant;
            letter-spacing: 1px;
            color: #3d2b1a;
        }

    /* Navigaciona dugmad bliže recenziji */
    button.prev,
    button.next {
        font-size: 7vw;
        padding: 0;
    }

    button.prev {
        left: 2.5%; /* bliže recenziji */
    }

    button.next {
        right: 2.5%; /* bliže recenziji */
    }

    .instagram {
        width: 100%;
        text-align: center;
        position: absolute;
        left: 50%;
        bottom: 4%;
        color: white;
        transform: translate(-50%,-4%);
        font-family: Garet;
        color: #e3d9d2;
        font-size:3vw;
        padding:0 10vw !important;
    }

    .ingimg {
        position: absolute;
        z-index: 0;
        height: 25vh;
        right: 4%;
        top: 5%;
    }

}



@media (min-width: 750px) and (max-width: 1024px) and (orientation: portrait) {
    .sectionstart {
    width:100vw;
    background-image:none;
    }

        .sectionstart #myVideo {
            width: 100% !important;
            height: 100vh !important; 
            border-radius: 0 !important;
        }

    .sectionstart .video-overlay {
        width: 100%;
        height: 100%;
        border-radius: 0 !important;
        background: rgba(230, 210, 186, 0.7);
    }

        .sectionstart .textstart {
            max-width: 100vw;
            text-align: center;
            position: relative;
            
        }

            .sectionstart .textstart h1 {
                font-size: 6vw;
                padding-top: 15px;
                margin: 0 20px;
            }

            .sectionstart .textstart h2 {
                font-size: 3.5vw;
                padding: 3px 8px;
                border-radius: 50px 0 50px 0;
                letter-spacing: 1px;
                margin:7px 20px 20px 15px;
            }

        .sectionstart img {
            width: 20vw;
            opacity: 0.9 !important;
        }

        .sectionstart p {
            font-size: 3vw;
            margin: 0 7vw;
            text-align:start;
        }

    .secondsection {
        background: linear-gradient(to top, #fff7f7, #dbc3a9);
        width: 100vw;
        height: auto;
        text-align: center;
        padding: 20px 0;
        pointer-events:none;
    }

        .secondsection span {
            font-size: 2.7vw !important;
            padding: 3px 0;
        }

    .ticker span {
        padding-right: 100px;
        font-size: 2.7vw;
    }

    .secondsection h3 {
        margin: 9vh 0 4vh 0;
        font-size: 6vw;
        color: #3d2b1a;
        text-align: center;
    }

    .row {
        display: flex;
        flex-direction: column;
        padding: 0 40px 0 20px;
        gap: 30px;
    }

    .box {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        background: linear-gradient(to right, transparent 35%, #c0d1ae);
        position: relative;
        border-right: solid 6px #6e825a;
        border-bottom: none;
        padding: 20px;
    }

        .box:last-child {
            background: linear-gradient(to right, transparent 35%, #d0b2ed);
            border-right: solid 8px #6c4a8c;
            border-bottom: none;
        }

        .box img {
            width: 25vw;
        }

        .box h4 {
            text-align: center;
            font-size: 4vw;
            margin: 0 0 2vw 5vw;
        }
        .box span {
            position: absolute;
            top: 25%;
            left: 5px;
            background: linear-gradient(to right, #d0b2ed, transparent);
            padding: 7px 10px 0px 10px;
            font-family: Hourglass;
            font-weight: 900;
            border-left: #6c4a8c solid 2px;
        }

        .box p {
            font-size: 2.2vw;
            text-align: end;
            margin-bottom: 0px;
            margin: 0 0 0 5vw;
        }

    .secondsection h5 {
        padding: 0 10px;
    }

        .secondsection h5 strong {
            border: none;
        }

    .box .btnmore {
        display: none;
    }


    .thirdsection {
        width: 100vw;
        height: auto;
        background-color: #fff7f7;
        position: relative;
        color: #3d2b1a;
        font-family: Garet;
        padding-bottom: 200px;
    }

        .thirdsection h5 {
            text-align: center;
            padding: 30px 15px 10px 15px;
            font-size: 3.5vw;
        }

        .thirdsection h6 {
            text-align: center;
            font-size: 3vw;
            padding: 0 10px;
        }

            .thirdsection h6 strong {
                padding: 5px 20px 5px 10px;
            }

    #map {
        margin: 30px 0px 20px 0px !important;
        width: 100vw !important;
    }

    .kontaktpodaci {
        z-index: 999 !important;
        text-align: end;
    }

    .thirdsection img {
        opacity: 0.9;
    }

    .worktime {
        z-index: 99 !important;
        text-align: center;
        padding-top: 95px;
        font-family: Garet
    }

        .worktime h5 {
            font-size: 6vw;
            margin-bottom: 20px;
        }

        .worktime h6 {
            font-size: 7.5vw;
            font-family: Hourglass;
            padding-top: 20px;
        }

        .worktime p strong {
            padding: 2px 20vw;
            border-radius: 100px 0 100px 0;
            color: white;
            font-weight: 900;
            background: linear-gradient(to left, #d0b2ed, #b8a89c);
            text-transform: uppercase;
            font-size: 3vw;
        }

    .subota {
        background: linear-gradient(to left, #c0d1ae, #b8a89c) !important;
    }



    .forthsection {
        text-align: center;
        overflow: hidden; /* sakriva sve što izlazi van */
        background-color: #b8a89c;
        width: 100vw;
        height: auto;
        padding-bottom: 15vh;
        background-image: url(/media/holisticbg.png);
        background-size: cover;
    }

    .gloweffect1 .glow-scroll {
        padding: 3px 0;
    }

        .gloweffect1 .glow-scroll span {
            font-size: 2.7vw;
        }


    .forthsection h5 {
        font-size: 6vw;
        margin-top: 15vh;
    }

    .forthsection p {
        padding: 0 30px;
    }

    .forthsection h6 {
        text-align: justify;
        margin: 30px 30px;
        line-height: 2;
    }

        .forthsection h6 strong {
            background: none;
        }

    .fifthsection {
        width: 100vw;
        height: 80vh;
    }

    .reviews-container {
        position: relative;
        width: 80vw;
        height: 40%;
    }

    /* svaka pojedinačna recenzija */
    .review {
        padding: 10px 20px;
    }

        .review img {
            width: 40%;
            margin-bottom: 10px;
            margin-top: 20px;
        }

        .review .komentar {
            margin: 0;
            font-size: 2vw;
            line-height: 1.5;
            height: 60%;
        }

        .review .klijent {
            font-size: 2.7vw;
            margin-top: 0;
            font-family: Elephant;
            letter-spacing: 1px;
            color: #3d2b1a;
        }

    /* Navigaciona dugmad bliže recenziji */
    button.prev,
    button.next {
        font-size: 7vw;
        padding: 0;
    }

    button.prev {
        left: 5%; /* bliže recenziji */
    }

    button.next {
        right: 5%; /* bliže recenziji */
    }

    .instagram {
        width: 100%;
        text-align: center;
        position: absolute;
        left: 50%;
        bottom: 4%;
        color: white;
        transform: translate(-50%,-4%);
        font-family: Garet;
        color: #e3d9d2;
        font-size: 2.4vw;
        padding: 0 10vw !important;
    }

    .ingimg {
        position: absolute;
        z-index: 0;
        height: 25vh;
        right: 4%;
        top: 5%;
    }

}


@media (min-width: 750px) and (max-width: 1024px) and (orientation: landscape) {

}