@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;
}

.slider-container {
  overflow: hidden;
  position: relative;
  width: 100%;
}

.slider-track {
  display: flex;
  transition: transform 0.5s ease-in-out;
  width: 300%; /* 3 slajda */
}

.home-stanovi {
  width: 100%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slider-dots {
  text-align: center;
  margin-top: 20px;
}

.slider-dots .dot {
  height: 12px;
  width: 12px;
  margin: 0 6px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.slider-dots .dot.active {
  background-color: #333;
}

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

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;
  cursor:pointer;

}
.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;
  text-align: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: 1vw;
  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: 1.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{
        width: 40vw;
    }

    /* Promijenjeno: custom-slider-container umjesto korak-right */
    .custom-slider-container {
        margin-left: 10vw;
        width: 50vw;
        margin-top: 6.61vw;
        overflow: hidden; /* KLJUČNO: Sakrij sadržaj van vidljivog okvira */
        position: relative; /* Važno za pozicioniranje tracka */
    }

    .custom-slider-container .slider-track {
        display: flex; /* Osigurava da se slajdovi poredaju u red */
        /* TRASITION NE STAVLJAMO OVDE, GSAP RADI ANIMACIJU */
        will-change: transform; /* Hint pregledaču za performanse animacije */
        transition:none;
    }

    .korak h1{
        font-size: var(--d48); /* Treba definisati --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); /* Treba definisati --outfit */
    }
    .korak p{
        font-size: var(--d18); /* Treba definisati --d18 */
        color: white;
        font-weight:500;
        position: absolute;
        width: 26.09vw;
        line-height: var(--d25); /* Treba definisati --d25 */
        top: 16.25vw;
        left: 15.05vw;
        margin: 0;
        font-family: var(--inter); /* Treba definisati --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); /* Treba definisati --light */
        height: 2.55vw;
        outline: none;
        border: none;
        border-radius: 10px;
    }

    .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;
        /* Širina slajda: 20.21vw + 1.46vw (margin-right) = 21.67vw */
        width: 20.21vw; /* Samo širina slajda, margin se dodaje preko JS-a ili je implicitna */
        margin-right: 1.46vw; /* Ovo je tvoja postojeća margina */
        flex-shrink: 0; /* Važno: sprečava da se slajdovi skupljaju */
    }

    /* CSS za točkice (dots) - Moramo kreirati nove, ne koristiti Slickove */
    .custom-dots {
        position: absolute;
        bottom: 4.7vw; /* Prilagodi poziciju */
        left: 50.5vw; /* Prilagodi poziciju */
        width: auto;
        display: flex;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .custom-dots li {
        margin: 0 11px; 
        width: 3.33vw; 
        height: 0px; 
        background-color: #ffffff; 
        border: 2px solid white;
        border-radius: 0%; 
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    .custom-dots li.active {
        background-color: var(--light); 
        border-color: var(--light); 
    }

.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.focus{
    border:none;
    outline:none;
}
.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;
  cursor:pointer;
}
.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: none;
 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: 1.77vw;
}

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


}
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: var(--d16);
  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:-19.5vw;
}
.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 {
  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;
  }

#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(--m100);
    }
    .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:fixed;
      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: 300;
      font-family: var(--inter);
      margin: auto;
      margin-top:0 ;
      margin-bottom: var(--m40);
      width: 75.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:0;
  display: block;
  text-decoration: none;
}
footer .lower-footer .lower-section span {
     margin-bottom: var(--m20);
}

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: var(--m20);
  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;
}




    

    
  }