@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&display=swap');


:root {
    --inter: "Inter", serif;
    --outfit: "Outfit", serif;
    --primary: #0F1A1E;
    --secondary: #1F363C;
    --light: #878F57;
    --textwhite: #F6F8EB;
    --landing-width: 70vw;
    --landing-width-mobile: 86vw;
    --d16: 0.89vw;
    --d18: 0.94vw;
    --d20: 1.04vw;
    --d24: 1.25vw;
    --d25: 1.3vw;
    --d48: 2.5vw;
    --d80: 4.17vw;
    --d120: 6.25vw;


    --m10: 2.78vw;
    --m11: 3.06vw;
    --m12: 3.33vw;
    --m13: 3.61vw;
    --m14: 3.89vw;
    --m15: 4.17vw;
    --m16: 4.44vw;
    --m18: 5vw;
    --m20: 5.56vw;
    --m24: 6.67vw;
    --m25: 6.94vw;
    --m32: 8.89vw;
    --m34: 9.44vw;
    --m36: 10vw;
    --m40: 11.11vw;
    --m44: 12.22vw;
    --m48: 13.33vw;
    --m64: 17.78vw;
    --m100: 27.78vw;


}

/* width */
::-webkit-scrollbar {
    width: 10px;
    font-size: var(--outfit);

}

/* Track */
::-webkit-scrollbar-track {
    background: var(--light);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--primary);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

.pcshow {
    display: block;
}

.pchide {
    display: none;
}

.mobile-header-only {
    display: none !important;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--inter);
    overflow-x: hidden;
}

header {
    background-color: var(--primary);
    display: flex;
    justify-content: space-between;
    width: 84vw;
    padding-left: 8vw;
    padding-right: 8vw;
    height: 6.25vw;
    place-items: center;
    position: sticky;
    top: 0;
    z-index: 105;
}

header .left-header img {
    width: 10.63vw;

}

header .center-header nav {
    display: flex;
    gap: 2.55vw;
}

header .center-header nav a {
    text-decoration: none;
    color: var(--textwhite);
    font-family: var(--inter);
    font-weight: 500;
    font-size: var(--d16);
    padding-bottom: 7px;
    padding-left: 7px;
    padding-right: 7px;

}

header .center-header nav a.active {
    text-decoration: none;
    color: var(--textwhite);
    font-family: var(--inter);
    font-weight: 500;
    font-size: var(--d16);
    padding-bottom: 7px;
    padding-left: 7px;
    padding-right: 7px;
    border-bottom: 1px solid var(--light);
}

header .center-header nav a {
    text-decoration: none;
    color: var(--textwhite);
    font-family: var(--inter);
    font-weight: 500;
    font-size: var(--d16);
    padding-bottom: 7px;
    padding-left: 7px;
    padding-right: 7px;
    position: relative;
}

header .center-header nav a::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background-color: var(--light);
    transition: width 0.3s ease, left 0.3s ease;
    transform: translateX(-50%);
}

header .center-header nav a:hover::after,
header .center-header nav a.active::after {
    width: 100%;
    left: 50%;
}


header .right-header button {
    width: 12.19vw;
    height: 2.4vw;
    background-color: var(--light);
    color: white;
    font-size: var(--d16);
    font-family: var(--inter);
    font-weight: 600;
    border-radius: 10px;
    border: none;
    outline: none;

}


.slider-home {
    background-image: url('./img/bacgkground-slider.svg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100vw;
    display: flex;
    gap: 7vw;
    margin-bottom: 0 !important;


}

.slider-home .slick-dots li {
    margin: 0 11px;
}

.slider-home .slick-dots .slick-active {
    background-color: var(--light);
}

.slider-home .slick-dots li:nth-child(1),
.slider-home .slick-dots li:nth-child(3) {
    border: 0px solid black;
    border-radius: 50%;
    content: '';
    width: 3.33vw;
    height: 2px;
}

.slider-home .slick-dots li:nth-child(2) {
    border: 0px solid black;
    border-radius: 50%;
    content: '';
    width: 3.33vw;
    height: 2px;

}

.slider-home .slick-dots li:not(.slick-active) {
    background-color: #ffffff !important;
    height: 2px;
}

.slider-home .slick-dots li.slick-active button:before,
.slick-dots li button:before {
    opacity: .75;
    color: transparent !important;
}

.slider-home .slick-dots {
    bottom: 7.7vw !important;
    left: 29vw;
}

.slider-home .slide-home {
    width: 84vw !important;

    position: relative !important;
    margin-left: 8vw;
    margin-right: 8vw;
}

.slider-home .slide-home-img {
    width: 84.06vw;
}

.slide-home h1 {
    position: absolute !important;
    color: white;
    font-size: var(--d80);
    font-weight: 700;
    font-family: var(--outfit);
    z-index: 5;
    top: 12vw;
    width: 38vw;
    left: 7.92vw;
    line-height: 4.58vw;
}

.slide-home p {
    position: absolute !important;
    color: white;
    font-size: var(--d18);
    font-weight: 500;
    font-family: var(--inter);
    z-index: 5;
    top: 24.42vw;
    width: 26.35vw;
    left: 7.92vw;
    line-height: var(--d25);
}

.slide-home button {
    position: absolute !important;
    color: white;
    font-size: var(--d18);
    font-weight: 600;
    font-family: var(--outfit);
    z-index: 5;
    top: 31.42vw;
    width: 11.67vw;
    height: 2.4vw;
    left: 7.92vw;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color: var(--light);


}

.slide-home .play-a-video {
    position: absolute !important;
    top: 16.25vw;
    width: 5.63vw;
    height: 5.63vw;
    right: 9.48vw;
    z-index: 10;

}

.slide-home .pause-a-video {
    position: absolute !important;
    top: 16.25vw;
    width: 5.63vw;
    height: 5.63vw;
    right: 9.48vw;
    z-index: 10;
    display: none;

}

.overlay-vidoe-div {
    background: linear-gradient(180deg, rgba(15, 26, 30, 0) 10.14%, rgba(15, 26, 30, 0.3) 42.28%, rgba(15, 26, 30, 0.6) 74.95%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
}


.oaza {
    display: flex;
    width: 100vw;
    margin: auto;
    background-color: var(--textwhite);
    justify-content: space-between;
    padding-bottom: 6.25vw;
}

.oaza .oaza-left {
    margin-left: 8vw;
}

.oaza .oaza-right {
    margin-right: 8vw;
}

.oaza .oaza-left h1 {
    color: var(--secondary);
    font-size: var(--d48);
    font-weight: 700;
    font-family: var(--outfit);
    margin-top: 6.25vw;
    margin-bottom: 2.29vw;
}

.oaza .oaza-left .oaza-tekst {
    color: #4f4f4f;
    font-size: var(--d18);
    font-weight: 400;
    font-family: var(--inter);
    margin-top: 0vw;
    margin-bottom: 0vw;
    width: 48.49vw;
    line-height: var(--d25);

}

.oaza-infos {
    display: flex;
    justify-content: space-between;
    width: 48.49vw;
    margin-top: 4.38vw;
}

.oaza-info {

    height: 8.75vw;
    border: 1px solid var(--light);
    border-radius: 24px;
    place-items: center;
    place-content: center;

}

.oaza-info.dr {
    width: 13.13vw;
}

.oaza-info.pr {
    width: 9.74vw;

}

.oaza-info strong {
    color: var(--secondary);
    font-family: var(--inter);
    font-weight: 600;
    font-size: var(--d48);
    margin-bottom: 0vw;
}

.oaza-info p {
    color: var(--secondary);
    font-family: var(--inter);
    font-size: var(--d18);
    margin-top: 0.5vw;

}

.oaza .oaza-right img {
    width: 27.34vw;
    margin-top: -2.7vw;
    position: relative;
}

.about {
    width: 100vw;

    background: var(--primary);
    text-align: center;

}

.about h1 {
    color: white;
    font-size: var(--d48);
    font-family: var(--outfit);
    font-weight: 700;
    margin: 0;
    padding-top: 5.21vw;

}

.about-gallery {
    width: var(--landing-width);
    margin: auto;
    display: flex;
    gap: 2.92vw;
    margin-top: 4.38vw;

}

.about-gallery img {
    width: 33.49vw;
}

.about-infos {
    display: flex;
    width: var(--landing-width);
    margin: auto;
    gap: 5.89vw;
    padding-bottom: 6.25vw;
}

.about-infos .about-info {
    width: 19.38vw;
    border: 1px solid #F6F8EB26;
    border-radius: 14px;
}

.about-info:nth-child(odd) {
    margin-top: 3.33vw;
}

.about-info img {
    width: 3.33vw;
    margin-top: 2.29vw;
}

.about-info h2 {
    color: var(--textwhite);
    font-weight: 600;
    font-size: var(--d24);
    margin-top: 1.77vw;
    margin-bottom: 1.77vw;
    font-family: var(--outfit);
}

.about-info p {
    color: var(--textwhite);
    font-weight: 200;
    font-family: var(--inter);
    width: 72%;
    text-align: center;
    margin: auto;
    padding-bottom: 2.71vw;
}

.korak {
    background-image: url('./img/korakbg.png');
    height: 33.44vw;
    width: 100vw;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
}

.korak-left,
.korak-right {
    width: 50vw;
}

.korak h1 {
    font-size: var(--d48);
    color: white;
    font-weight: 700;
    position: absolute;
    width: 18.8vw;
    line-height: 2.75vw;
    top: 8.96vw;
    left: 15.05vw;
    margin: 0;
    font-family: var(--outfit);


}

.korak p {
    font-size: var(--d18);
    color: white;
    font-weight: 500;
    position: absolute;
    width: 26.09vw;
    line-height: var(--d25);
    top: 16.25vw;
    left: 15.05vw;
    margin: 0;
    font-family: var(--inter);


}

.korak .korak-btn {
    font-size: var(--d18);
    color: white;
    font-weight: 500;
    position: absolute;
    width: 10.31vw;
    line-height: var(--d25);
    top: 21.93vw;
    left: 15.05vw;
    margin: 0;
    font-family: var(--outfit);
    background-color: var(--light);
    height: 2.55vw;
    outline: none;
    border: none;
    border-radius: 10px;


}

.korak-right {
    display: flex;
    margin-top: 6.61vw;

}

.home-stan {
    width: 20.21vw;
    height: 16.88vw;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;

}

.home-stan:hover .home-stan-bg-hide {
    opacity: 1;

}


.home-stan-bg-hide {
    width: 18.87vw;
    height: 15.54vw;
    position: absolute;
    top: 0.68vw;
    left: 0.68vw;
    opacity: 0;
    transition: opacity 1s ease;


}

.home-stanovi button {
    width: 5.57vw;
    background-color: var(--light);
    height: 2.03vw;
    border-radius: 24px;
    border: none;
    outline: none;
    position: absolute;
    left: 14.64vw;
    top: 14.84vw;
    justify-items: center;
}

.home-stanovi button img {
    width: 2.29vw;
}

.home-stanovi {
    position: relative;
    width: 20.21vw !important;
    margin-left: 1.46vw;

}

.pogodnosti {
    width: 100vw;
    background-color: var(--primary);
    text-align: center;
    padding-bottom: 6.25vw;
}

.pogodnosti h1 {
    color: white;
    font-size: var(--d48);
    font-family: var(--outfit);
    font-weight: 700;
    margin: 0;
    padding-top: 5.21vw;
    padding-bottom: 4.38vw;
}


.slider-container {
    position: relative;
    width: var(--landing-width);
    margin: 0 auto;


}

.slider {
    display: flex;
    gap: 20px;

}

.card {
    flex: 0 0 10.78vw;
    /* Širina svake kartice */

    color: #fff;

    text-align: center;
    margin-left: 1vw;


}

.slider-line {
    position: absolute;
    bottom: 0;
    top: 17.17vw;
    left: 4vw;
    height: 1px;
    width: 45vw !important;
    background-color: var(--textwhite);
    transition: all 0.3s ease-in-out;
}


.kontakt-home {
    display: flex;
    width: 63.34vw;
    margin: auto;
    background-color: var(--secondary);
    border-radius: 24px;
    padding: 3.85vw 3.33vw 3.85vw 3.33vw;
    margin-top: 6.25vw;
}

.kontakt-home-left h2 {
    font-family: var(--outfit);
    color: var(--textwhite);
    font-weight: 700;
    font-size: var(--d48);
    text-align: left;
    margin: 0;
    margin-bottom: 1.77vw;
}

.kontakt-home-left form {
    display: block;
}

.kontakt-home-left form input {
    display: block;
    width: 20.05vw;
    height: 2.29vw;
    border: 1px solid #F6F8EB33;
    background: transparent;
    border-radius: 12px;
    margin-bottom: var(--d24);
    font-family: var(--inter);
    font-weight: 400;
    color: #F6F8EBCC;
    padding-left: 1.04vw;


}

.kontakt-home-left form input::placeholder,
.kontakt-home-left form textarea::placeholder {
    font-family: var(--inter);
    font-weight: 400;
    color: #F6F8EBCC;
}


.kontakt-home-left form textarea {
    display: block;
    width: 20.05vw;
    height: 6.72vw;
    border: 1px solid #F6F8EB33;
    background: transparent;
    border-radius: 12px;
    margin-bottom: var(--d24);
    font-family: var(--inter);
    font-weight: 400;
    color: #F6F8EBCC;
    padding-left: 1.04vw;
    padding-top: 0.5vw;

}

input[name=email] {
    width: 100% !important;
    box-sizing: border-box !important;


    background-image: url('./img/email-form.svg') !important;
    background-position: 18.5vw 0.7vw !important;
    background-repeat: no-repeat !important;
    font-family: var(--inter);
    font-weight: 400;
    color: #F6F8EBCC;

}

input[name=ime-prezime] {
    width: 100% !important;
    box-sizing: border-box !important;


    background-image: url('./img/ime-prezime-form.svg') !important;
    background-position: 18.5vw 0.7vw !important;
    background-repeat: no-repeat !important;

}


input[name=number] {
    width: 100% !important;
    box-sizing: border-box !important;


    background-image: url('./img/phone-form.svg') !important;
    background-position: 18.5vw 0.7vw !important;
    background-repeat: no-repeat !important;

}


textarea[name=poruka] {
    width: 100% !important;
    box-sizing: border-box !important;


    background-image: url('./img/message-form.svg') !important;
    background-position: 18.5vw 0.7vw !important;
    background-repeat: no-repeat !important;

}

.kontakt-home-left button {
    width: 11.56vw;
    height: 2.55vw;
    background: var(--light);
    color: white;
    border-radius: 12px;
    font-family: var(--outfit);
    font-size: var(--d18);
    font-weight: 600;
    float: left;
    border: none;
    outline: none;
    margin-top: 1.77vw;
}

.kontakt-home-right iframe {
    border-radius: 12px;
    margin-left: 7.5vw;
    width: 34.64vw;
    height: 28vw;
}


footer {
    background-color: var(--secondary);
    width: 100vw;

}

footer .upper-footer {
    display: flex;
    justify-content: space-between;
    width: var(--landing-width);
    margin: auto;
    padding-top: 3.33vw;
    padding-bottom: 3.33vw;
    border-bottom: 1px solid #F6F8EB
}

footer .upper-footer .upper-left img {
    width: 12.5vw;
}

footer .upper-footer .upper-right {
    display: flex;
    gap: 2.66vw;
}

footer .upper-footer .upper-right img {
    width: 2.66vw;
}


footer .lower-footer {
    display: flex;
    justify-content: space-between;
    width: var(--landing-width);
    margin: auto;
    padding-top: 3.33vw;
    padding-bottom: 3.33vw;


}

footer .lower-footer .lower-info p {
    font-size: 2.08vw;
    font-family: var(--outfit);
    font-weight: 400;
    color: var(--textwhite);
    line-height: 2.66vw;
    width: 19vw;
    margin: 0;
}

footer .lower-footer .lower-section h1 {
    font-size: var(--d24);
    font-family: var(--outfit);
    font-weight: 400;
    color: white;


    margin: 0;
    margin-top: 0.35vw;
    margin-bottom: 2.14vw;
}

footer .lower-footer .lower-section span {
    display: flex;
    margin-bottom: var(--d18);


}

footer .lower-footer .lower-section span img {
    width: 0.83vw;


}

footer .lower-footer .lower-section a {

    font-size: var(--d16);
    font-family: var(--inter);
    font-weight: 400;
    color: #CBD1C8;


    margin: 0;

    margin-bottom: 1.04vw;
    display: block;
    text-decoration: none;

}

footer .lower-footer .lower-section span a {

    font-size: var(--d16);
    font-family: var(--inter);
    font-weight: 400;
    color: #CBD1C8;


    margin: 0;
    margin-left: 1vw;

    margin-bottom: 0vw;
    display: block;
    text-decoration: none;

}


.korak-right .slick-dots li:nth-child(2) {
    border: 0px solid black;
    border-radius: 50%;
    content: '';
    width: 3.33vw;
    height: 2px;
}

.korak-right .slick-dots li:nth-child(1),
.korak-right .slick-dots li:nth-child(3) {
    border: 0px solid black;
    border-radius: 50%;
    content: '';
    width: 3.33vw;
    height: 2px;
}

.korak-right .slick-dots {
    bottom: 2.7vw !important;
    left: -17vw;
}

.korak-right .slick-dots li {
    margin: 0 11px;
}

.korak-right .slick-dots li:not(.slick-active) {
    background-color: #ffffff !important;
}

.korak-right .slick-dots .slick-active {
    background-color: var(--light)
}

.korak-right .slick-dots li button:before {
    display: none;
}

.video-home {
    width: 84vw;
    height: 40.31vw;
    position: absolute;
    overflow: hidden;
    z-index: -85;

    -webkit-mask-image: url('./img/maska.png');
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;

    mask-image: url('./img/maska.png');
    mask-size: cover;
    mask-repeat: no-repeat;
    top: 0vw;
}

.video-home video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}


@media screen and (max-width:900px) {

    .pcshow {
        display: none;
    }

    .pchide {
        display: block;

    }

    .pconly {
        display: none !important;
    }

    #mobileMenu.show {
        display: block;
        transform: translateX(0);
        transition: transform 0.8s ease;
    }

    #mobileMenu.hide {
        transform: translateX(-100%);
    }

    header {
        width: 81.11vw;
        height: 100vh;
        display: none;
        place-items: normal;
        box-sizing: border-box;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 103;
        transform: translateX(-100%);
        transition: transform 0.3s ease;

    }

    header .center-header {
        margin-top: var(--m44);
    }

    header .left-header img {
        width: 46.11vw;
        margin-left: 0vw;
        margin-top: 6.11vw;
    }

    header .center-header nav {
        display: block;
    }

    header .center-header nav a,
    header .center-header nav a.active {
        display: block;
        font-size: var(--m15);
        padding: 0;
        padding-top: var(--m20);
        padding-bottom: var(--m20);
        border-bottom: 1px solid #878F5780;
        width: 45.56vw;

    }

    header .center-header nav a.active {
        font-size: var(--m15);

    }

    header .center-header nav a.active::after {
        border: none;
        background-color: transparent;
    }

    header .right-header {
        margin-top: var(--m64);
        margin-bottom: var(--m64);
    }

    .right-header .lower-section span {
        display: flex;
        margin-bottom: var(--m18);
    }

    .right-header .lower-section span img {
        width: var(--m14);
    }

    .right-header .lower-section span a {
        font-size: var(--m14);
        font-family: var(--inter);
        font-weight: 400;
        color: #CBD1C8;
        margin: 0;
        margin-left: 4vw;
        margin-bottom: 2vw;
        display: block;
        text-decoration: none;
    }

    .xbutton {
        width: 5.83vw !important;
        position: absolute;
        right: var(--m20);
        top: 2.3vw;
        display: block !important;
    }


    .header-mob {
        background-color: var(--primary);
        height: 22.22vw;
        display: flex !important;
        width: 100vw;
        justify-content: space-between;
        position: static;
        top: 0;
        z-index: 102;
    }

    .logo-mob-header {
        width: 46.11vw;
        margin-left: 7vw;
    }

    .hamburger-mob {
        width: 7.22vw;
        margin-right: 7vw;
    }

    .hero-mob {
        background-color: var(--primary);
        width: 100vw;
        position: relative;
        z-index: 1;
        margin-top: 22.22vw;
    }

    .hero-mob-mask {
        width: var(--landing-width-mobile);
        margin: auto;
        border-radius: var(--m24);
        background-image: url('../static/img/mobile-hero-background.png');
        background-repeat: no-repeat;
        background-size: cover;
        height: 181.39vw;
        position: relative;
        z-index: 3;

    }

    .hero-mob-mask h1 {
        color: white;
        font-size: var(--m48);
        font-family: var(--outfit);
        font-weight: 700;
        margin: auto;
        text-align: center;
        width: 67vw;
        line-height: 14.44vw;
        padding-top: 23.33vw;
    }

    .hero-mob-mask p {
        color: white;
        font-size: var(--m15);
        font-family: var(--inter);
        font-weight: 500;
        margin: auto;
        text-align: center;
        width: 72.17vw;
        line-height: 5.83vw;
        padding-top: 9.44vw;
    }

    .hero-mob-mask button {
        color: white;
        font-size: var(--m16);
        font-family: var(--outfit);
        background-color: var(--light);
        border-radius: var(--m10);
        font-weight: 600;
        margin: auto;
        text-align: center;
        width: 47.50vw;
        height: 12.22vw;
        outline: none;
        border: none;

        margin-top: 9.44vw;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mobile-hero-play-img {
        width: 23.33vw;
        margin-left: 31.67vw;
        margin-top: 9.44vw;
    }

    .mobile-hero-pause-img {
        width: 23.33vw;
        margin-left: 31.67vw;
        margin-top: 9.44vw;
        display: none;
    }

    .oaza-mob {
        background-color: var(--textwhite);
        margin-top: -44.44vw;
        position: relative;
        z-index: 2;
        padding-bottom: 17.78vw;

    }

    .oaza-mob h1 {
        padding-top: 60.56vw;
        color: var(--secondary);
        font-family: var(--outfit);
        font-size: var(--m32);
        margin: 0;
        font-weight: 700;
        width: var(--landing-width-mobile);
        margin: auto;
    }

    .oaza-mob p {
        padding-top: var(--m24);
        color: #4F4F4F;
        font-family: var(--inter);
        font-size: var(--m15);
        margin: 0;
        font-weight: 400;
        width: var(--landing-width-mobile);
        margin: auto;
        line-height: 6.25vw;
    }

    .oaza-home-img {
        width: var(--landing-width-mobile);
        border-radius: var(--m24);
        margin: auto;
        margin-top: 12.22vw;
        margin-left: 7vw;
        margin-bottom: 12.22vw;
    }

    .oaza-rounded-text {
        border-radius: var(--m24);
        border: 1px solid var(--light);
        width: var(--landing-width-mobile);
        margin: auto;
        text-align: center;
        margin-bottom: var(--m14);
        padding-top: var(--m20);
        padding-bottom: var(--m20);
    }

    .oaza-rounded-text strong {
        font-size: var(--m36);
        color: var(--secondary);
        font-weight: 600;
        font-family: var(--inter);
        padding-top: var(--m20);

    }

    .oaza-rounded-text p {
        font-size: var(--m15);
        color: var(--secondary);
        font-weight: 400;
        font-family: var(--inter);
        padding-top: 0.72vw;

    }

    .o-nama-mob {
        padding-bottom: var(--m64);
    }

    .o-nama-mob h1 {
        text-align: center;
        color: var(--textwhite);
        font-weight: 700;
        font-family: var(--outfit);
        font-size: var(--m32);
        margin: 0;
        margin-top: 17.78vw;
        margin-bottom: 12.22vw;
    }

    .o-nama-mob .kartica {
        width: var(--landing-width-mobile);
        margin: auto;
        border-radius: var(--m14);
        border: 1px solid #F6F8EB26;
        text-align: center;
        margin-bottom: 7.78vw;

    }

    .o-nama-mob .kartica img {
        width: 17.78vw;
        margin-top: var(--m40);
    }

    .o-nama-mob .kartica h2 {
        color: var(--textwhite);
        font-size: var(--m20);
        font-weight: 600;
        font-family: var(--outfit);
        margin-top: var(--m24);
        margin-bottom: var(--m24);
    }

    .o-nama-mob .kartica p {
        color: var(--textwhite);
        font-size: var(--m15);
        font-weight: 200;
        font-family: var(--inter);
        margin: auto;
        margin-top: 0;
        margin-bottom: var(--m40);
        width: 73.33vw;
        text-align: center;

    }

    .korak-mob {
        width: 100vw;

    }

    .korak-mob .slick-list .slick-track {
        min-width: 1500px;
    }

    .korak-mob-maska {
        background-image: url('..//static/img/korakmobbg.png');
        width: 100vw;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
        z-index: 10;
        height: 207.22vw;


    }

    .korak-mob-maska h1 {
        color: white;
        font-size: var(--m40);
        font-weight: 700;
        width: var(--landing-width-mobile);
        margin: auto;
        padding-top: 27.78vw;
        font-family: var(--outfit);
    }

    .korak-mob-maska p {
        color: white;
        font-size: var(--m15);
        font-weight: 500;
        width: var(--landing-width-mobile);
        margin: auto;
        padding-top: 5.56vw;
        font-family: var(--inter);
        line-height: 5.83vw;
    }

    .korak-mob-maska button {
        color: white;
        font-size: var(--m16);
        font-weight: 600;
        width: 41.11vw;
        margin-left: var(--m24);

        font-family: var(--outfit);
        line-height: 5.83vw;
        display: flex;
        background-color: var(--light);
        border-radius: 2.78vw;
        border: none;
        outline: none;
        justify-content: center;
        height: 12.22vw;
        align-items: center;
        margin-top: var(--m24);

    }

    .korak-mob-slide {
        position: relative;
        width: 86.67vw !important;
        height: 72.78vw !important;
        margin-right: 6.7vw;
    }

    .korak-mob-slide .sobni-slika {
        position: absolute;
        top: 0;
        left: 0;
        width: 86.67vw;
        height: 72.78vw;
    }

    .korak-mob-slide .sobni-maska {
        position: absolute;
        top: 3.11vw;
        left: 2.9vw;
        width: 80.92vw;
        height: 66.63vw;
        opacity: 0;
    }

    .korak-mob-slide .sobni-strelica {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 23.89vw;
        height: 8.89vw;
    }

    .korak-mob-slider {
        margin-top: 15.56vw;
        margin-left: 6.67vw;

    }

    .korak-mob-slide:hover .sobni-maska {
        opacity: 1;
        transition: opacity 1s ease;

    }

    .pogodnosti-mob {
        width: 100vw;
        background-color: var(--primary);
        padding-bottom: 27.78vw;
        position: relative;
    }

    .pogodnosti-mob h1 {
        font-family: var(--outfit);
        font-weight: 700;
        font-size: var(--m32);
        color: var(--textwhite);
        margin: auto;
        text-align: center;
        padding-top: 17.78vw;
        padding-bottom: 12.22vw;
    }

    .pogodnosti-slider {
        margin-left: var(--m24);
        width: var(--landing-width-mobile);

    }

    .pogodnosti-slider img {
        width: 41.39vw !important;
        height: 49.44vw;
        margin-right: 0.6vw;


    }

    .kontakt-home {
        display: block;
        width: 77.79vw;
        margin: auto;
        background-color: var(--secondary);
        border-radius: 24px;
        padding: 0vw 4.44vw 3vw 4.44vw;
        margin-top: 24.25vw;

    }

    .kontakt-home-left h2 {
        padding-top: 12.22vw;
        font-family: var(--outfit);
        color: var(--textwhite);
        font-weight: 700;
        font-size: var(--m32);
        text-align: center;
        margin: 0;
        margin-bottom: 1.77vw;
        padding-bottom: 9.44vw;
    }

    .kontakt-home-left form input {
        display: block;
        width: 77.78vw !important;
        height: 12.22vw;
        border: 1px solid #F6F8EB33;
        background: transparent;
        border-radius: 12px;
        margin-bottom: 4.44vw;
        font-family: var(--inter);
        font-weight: 400;
        color: #F6F8EBCC;
        padding-left: 3.04vw;
    }

    .kontakt-home-left form textarea {
        display: block;
        width: 77.78vw !important;
        height: 35.83vw;
        border: 1px solid #F6F8EB33;
        background: transparent;
        border-radius: 12px;
        margin-bottom: var(--d24);
        font-family: var(--inter);
        font-weight: 400;
        color: #F6F8EBCC;
        padding-left: 3.04vw;
        padding-top: 2.5vw;
    }

    input[name=ime-prezime] {
        width: 100% !important;
        box-sizing: border-box !important;
        background-image: url(./img/ime-prezime-form.svg) !important;
        background-position: 70.5vw 3.7vw !important;
        background-repeat: no-repeat !important;
    }

    input[name=email] {
        width: 100% !important;
        box-sizing: border-box !important;
        background-image: url(./img/email-form.svg) !important;
        background-position: 70.5vw 3.7vw !important;
        background-repeat: no-repeat !important;
    }

    input[name=number] {
        width: 100% !important;
        box-sizing: border-box !important;
        background-image: url(./img/phone-form.svg) !important;
        background-position: 70.5vw 3.7vw !important;
        background-repeat: no-repeat !important;
    }

    textarea[name=poruka] {
        width: 100% !important;
        box-sizing: border-box !important;
        background-image: url(./img/message-form.svg) !important;
        background-position: 70.5vw 3.7vw !important;
        background-repeat: no-repeat !important;
    }

    .kontakt-home-left button {
        width: 78vw;
        height: 12.22vw;
        background: var(--light);
        color: white;
        border-radius: 12px;
        font-family: var(--outfit);
        font-size: var(--m16);
        font-weight: 600;
        float: left;
        border: none;
        outline: none;
        margin-top: var(--m24);
    }

    .kontakt-home-right iframe {
        border-radius: 12px;

        width: 78vw;
        height: 95.56vw;
        margin-left: 0;
        margin-top: 12vw;
    }


    footer .upper-footer {
        display: flex;
        justify-content: space-between;
        width: var(--landing-width-mobile);
        margin: auto;
        padding-top: 15.56vw;
        padding-bottom: 9.44vw;
        border-bottom: 1px solid #F6F8EB;
    }

    footer .upper-footer .upper-left img {
        width: 51.11vw;
    }

    footer .lower-footer {
        display: block;
        justify-content: space-between;
        width: var(--landing-width-mobile);
        margin: auto;
        padding-top: 7.44vw;
        padding-bottom: 12.22vw;
    }

    footer .lower-footer .lower-info p {
        font-size: 7.78vw;
        font-family: var(--outfit);
        font-weight: 400;
        color: var(--textwhite);
        line-height: 9.72vw;
        width: 70vw;
        margin: 0;
    }


    footer .lower-footer .lower-section h1 {
        font-size: var(--m20);
        font-family: var(--outfit);
        font-weight: 400;
        color: white;
        margin: 0;
        margin-top: 12.22vw;
        margin-bottom: 7.78vw;
    }

    footer .lower-footer .lower-section span img {
        width: var(--m14);
    }

    footer .lower-footer .lower-section span a {
        font-size: var(--m14);
        font-family: var(--inter);
        font-weight: 400;
        color: #CBD1C8;
        margin: 0;
        margin-left: 4vw;
        margin-bottom: 2vw;
        display: block;
        text-decoration: none;
    }

    footer .lower-footer .lower-section a {
        font-size: var(--m14);
        font-family: var(--inter);
        font-weight: 400;
        color: #CBD1C8;
        margin: 0;
        margin-left: 0vw;
        margin-bottom: 2vw;
        display: block;
        text-decoration: none;
    }

    .upper-right {
        margin-top: 9.44vw;
        gap: var(--m24);
    }

    .upper-right .social {
        width: var(--m32);
    }

    footer {
        position: relative;
    }

    .btt-mobile {
        position: absolute;
        right: var(--m24);
        bottom: 9.44vw;
        display: block !important;

    }

    .slider-container {
        position: relative;
        width: var(--landing-width);
        margin: 0 auto;


    }

    .pogodnosti-slider {
        gap: 20px;

    }

    .card {
        flex: 0 0 10.78vw;
        /* Širina svake kartice */

        color: #fff;

        text-align: center;
        margin-left: 1vw;


    }

    .slider-line {
        position: absolute;
        bottom: 0;
        top: 99vw;
        left: 9vw;
        height: 1px;
        width: 23.89vw !important;
        background-color: var(--textwhite);
        transition: all 0.7s ease-in-out;
    }

    .slider-line-back {
        position: absolute;
        bottom: 0;
        top: 99vw;
        left: 9vw;
        height: 1px;
        width: 80vw !important;
        background-color: #F6F8EB26;


    }


    .video-home-mobile {
        width: 86vw;
        height: 181.39vw;
        position: absolute;
        overflow: hidden;
        z-index: -85;


        mask-size: cover;
        mask-repeat: no-repeat;
        top: 0vw;
    }

    .video-home-mobile video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        opacity: 0;

        border-radius: 7vw;
    }


    .overlay-vidoe-div-mobile {
        background: linear-gradient(180deg, rgba(15, 26, 30, 0.21) 1.65%, rgba(15, 26, 30, 0.42) 44.48%, rgba(15, 26, 30, 0.7) 72.59%);


        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 4;
        border-radius: 7vw;
    }
    #mobileMenu {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
}

#mobileMenu::-webkit-scrollbar {
  display: none; /* Chrome, Safari i Edge */
}


 header {
    height: 100vh;
    overflow-y: auto;
  }


}

@media (orientation: landscape) and (max-width:1104px) {

    .logo-mob-header {
        width: 20.75vw !important;
        margin-left: 7vw;
    }

    .kontakt-home {
        display: flex !important;
        width: 85.20vw !important;
        margin-top: 8.00vw !important;
        justify-content: space-between;
        margin-bottom: 12.50vw !important;

    }

    .kontakt-home-left {
        width: 35.00vw;
    }

    .kontakt-home-left h2 {
        font-size: 4vw !important;
        padding-bottom: 4.25vw !important;
        margin: 0 !important;
        text-align: left !important;
        padding-top: 3vw !important;
    }

    .kontakt-home-left form input {
        width: 35vw !important;
        height: 5.5vw !important;
        margin-bottom: 2vw !important;
    }

    .kontakt-home-left form textarea {
        width: 35vw !important;
        height: 16.13vw !important;
    }

    .kontakt-home-left button {
        width: 35vw !important;
        height: 5.5vw !important;
        font-size: 2.00vw !important;
        margin-top: 3vw !important;

    }

    .kontakt-home-right iframe {
        width: 47.50vw !important;
        height: 55.75vw !important;
        margin-top: 4.7vw !important;
    }

    footer .upper-footer {
        width: 94vw !important;
        padding-top: 7vw !important;
        padding-bottom: 5.5vw !important;
    }

    footer .upper-footer .upper-left img {
        width: 23vw !important;
    }

    footer .lower-footer {
        display: flex;
        width: 94vw !important;
    }

    footer .lower-footer .lower-info p {
        font-size: 3.5vw !important;
        width: 31.13vw !important;
        line-height: normal !important;
    }

    footer .lower-footer .lower-section h1 {
        margin-top: 0.7vw !important;
        font-size: 2.5vw !important;
        margin-bottom: 3.5vw !important;
        line-height: normal !important;
    }

    footer .lower-footer .lower-section span img {
        width: 1.75vw!important;
    }
    footer .lower-footer .lower-section span a {
        font-size: 1.75vw!important;
        margin-bottom:0!important;
        margin-left:2vw!important;
    }
    footer .lower-footer .lower-section a {
        font-size: 1.75vw!important;
    }
    .btt-mobile {
        right:inherit!important;
        left:3vw!important;
        bottom:4.5vw!important;
    }
    footer .lower-footer .lower-section span {
        margin-bottom:2vw!important;
    }
    header{
        width:36.50vw!important;
        padding-left:3.00vw!important;
        padding-right:3.00vw!important;
    }
        header .left-header img:nth-child(1) {
            width:20.75vw!important;
            margin-top:2.75vw!important;
        }
.xbutton{
    width:2.63vw!important;
    margin-top:1.62vw!important;
}


    header .center-header nav a, header .center-header nav a.active {
       
        font-size: 1.88vw!important;
       
        padding-top: 2.75vw!important;
        padding-bottom: 2.75vw!important;
        
        width: 20.25vw!important;
    }
        header .center-header {
        margin-top:8vw!important;
    }
    .right-header .lower-section span a {
        font-size: 1.75vw!important;
        font-family: var(--inter);
        font-weight: 400;
        color: #CBD1C8;
        margin: 0;
        margin-left: 2vw;
        margin-bottom: 2vw;
        display: block;
        text-decoration: none;
    }
    
        .right-header .lower-section span img {
        width: 1.75vw!important;
    }
    
        header .right-header {
        margin-top: 8.25vw!important;
        margin-bottom:  8.25vw!important;
    }
    
        .right-header .lower-section span {
        display: flex;
        margin-bottom: 2.50vw!important;
    }
}