@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


:root {
    --pink: #FF5DB5;
    --font2: "Playfair Display", serif;
    --programi-width: 83vw;
    --landing-margin: auto;
    --tplava: #231C3E;
    --offset-vw: 8vw;
    --offset-px: 50px;
}


/* 10 - Efekat svjetlucanja */
.animacija {
    background: #ff007f;
    position: relative;
    overflow: hidden;
}
.animacija::before {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: rgba(255,255,255,0.5);
    transform: skewX(-25deg);
    animation: shine 2s infinite;
}
@keyframes shine {
    100% { left: 125%; }
}
@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}



.formavaucer{
    display:flex;
}

.vaucertekst{
    padding-left: 4vw;
    padding-right: 8vw;
    line-height: 35px;
    color: #4f4f4f;
    font-family: 'POPPINS';
}
.aviotekst {
    width: var(--programi-width);
    /* margin: var(--landing-margin); */
    width: 71vw;
    /* margin: auto; */
    /* padding-right: 0vw; */
    margin-left: 8vw;
    margin-bottom: 3vw;
    font-family: 'Poppins';
    color: #4f4f4f;
    line-height: 35px;
}
#openPopup22{
    color:#231D3E;
    font-size:15px;
    font-weight:500;
}

.hotel .section3 .active {
    background-color: #FF5DB5!important;
    color:white!important;
    border:none!important;
    
}



.hotelhide0 .section2 h1{
    color:#828282;
}

.hotelhide0 .section3 .stars{
    display:none;
}


.hotelhide0 .section3 h2, .hotelhide0 .section3 h3, .hotelhide0 .section3 p {
    display:none;
}

.hotelhide0 .section3 button {
    background-color: #EF4423!important;
    color:white!important;
    border:none!important;
}




.komentar-programa{
    color:var(--pink);
    font-size:0.7rem;
    font-weight:700;
    
}

.kontakt-main{
    display: flex;
    margin: var(--landing-margin);
    width: var(--programi-width);
}

.kontakt-main .main{
    width: 50%;
}

.kontakt-main .asidek form span{
    display:flex;
}

.kontakt-main .asidek form span input{
    width:20vw;
    height: 3vw;
    padding-left: 1vw;
    border: 1px solid #BDBDBD;
    border-radius: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 600;
}
.kontakt-main .asidek form  textarea{
    width:42.3vw;
    height: 8vw;
    padding-left: 1vw;
    padding-top: 1vw;
    border: 1px solid #BDBDBD;
    border-radius: 10px;
    margin-top: 1vw;
    font-family: "Poppins", sans-serif;
    font-size: 18px;
    font-weight: 600;
}
.kontakt-main .asidek form  button{
    width:12vw;
    height: 3vw;
    
    background-color: var(--pink);
    border: 1px solid var(--pink);
    color: white;
    border-radius: 10px;
    margin-top: 1vw;
    font-family: "Poppins", sans-serif;
    font-size: 20px;
    font-weight: 600;
}
.kontakt-main .asidek form span input:nth-child(2){
    
   margin-left: 1vw;
}
.kontakt-main .aside form textarea{
    display:block;
}

.kontakt-main .main h1{
    
    color: var(--tplava);
    font-weight: 600;
    font-size: 60px;
    margin-left: 5px;
    margin: var(--landing-margin);
    width: var(--programi-width);


}

.summer-2024k span {
    display: flex;
    /* margin: auto; */
    width: 41vw;
}


.summer-2024k{
    width: 72vw;
    height: 4vw;
    margin: auto;
    text-align: center;
    margin-top: 0vw;
}



.summer-2024k span .pinkline{
    
}
.summer-2024k span h2{
    font-family: "Playfair Display", serif;
    color: var(--pink);
    font-weight: 800;
    font-size: 15px;
    margin-left: 5px;

}
.summer-2024k h1{
    font-size: 2.86vw;
    color: #231D3E;
    margin-top: 0vw;
    font-weight: 700;
    
    
}




.hidemob{
    display:block!important;
    
}

.hidemobflex{
    display:flex !important;
    
}

.hidepc{
    display:none!important;
    
}


.hero-gallery1 .grid1 .grid1-img1 h1,
.hero-gallery1 .grid1 .grid1-img2 h1,
.hero-gallery1 .grid2 .grid2-img1 h1,
.hero-gallery1 .grid2 .grid2-img2 h1,
.hero-gallery1 .grid2 .grid2-img3 h1,
.hero-gallery2 .grid3-img h1 {

    position: absolute;
    bottom: 3vw;
    left: 2vw;
    font-size: 26px;
    color: white;
    z-index: 20;



}

.hero-gallery1 .grid1 .grid1-img1 p,
.hero-gallery1 .grid1 .grid1-img2 p,
.hero-gallery1 .grid2 .grid2-img1 p,
.hero-gallery1 .grid2 .grid2-img2 p,
.hero-gallery1 .grid2 .grid2-img3 p,
.hero-gallery2 .grid3-img p {

    position: absolute;
    z-index: 20;
    background-color: #FF5DB5;
    width: fit-content;
    padding: 5px 15px 5px 15px;
    border-radius: 9px;
    color: white;
    bottom: 1vw;
    font-size: 12px;
    left: 2vw;

}



.hero-gallery {
    width: 72vw;
    margin: auto;
    display: flex;
}

/* Grid 1 styles */
.hero-gallery1 .grid1 {
    display: flex;
}

.hero-gallery1 .grid1 div {
    width: 23vw;
    height: 17.3vw;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    position: relative; /* Ensure pseudo-element is positioned correctly */
    overflow: hidden; /* Hide overflow of the pseudo-element */
}

/* Overlay for Grid 1 */
.hero-gallery1 .grid1 div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 13, 13, 0.3); /* Color 0D0D0D with 30% opacity */
    transition: opacity 0.3s ease;
    z-index: 1; /* Ensure the overlay is above the background image */
    border-radius:10px;
}

.hero-gallery1 .grid1 div:hover::before {
    opacity: 0; /* Remove overlay on hover */
}

.hero-gallery1 .grid1 .grid1-img1 {
    background-image: url('./static/img/grid1img1.png');
    margin-right: 1.3vw;
}

.hero-gallery1 .grid1 .grid1-img2 {
    background-image: url('./static/img/grid1img2.png');
    margin-right: 1.3vw;
}

.hero-gallery1 .grid2 {
    display: flex;
    justify-content: space-between;
    margin-top: 1.3vw;
}

.hero-gallery1 .grid2 div {
    width: 14.8vw;
    height: 17.3vw;
    background-size: cover;
    background-position: center;
    position: relative; /* Ensure pseudo-element is positioned correctly */
    overflow: hidden; /* Hide overflow of the pseudo-element */
}

/* Overlay for Grid 2 */
.hero-gallery1 .grid2 div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 13, 13, 0.3); /* Color 0D0D0D with 30% opacity */
    transition: opacity 0.3s ease;
    z-index: 1; /* Ensure the overlay is above the background image */
    border-radius:10px;
}

.hero-gallery1 .grid2 div:hover::before {
    opacity: 0; /* Remove overlay on hover */
}

.hero-gallery1 .grid2 .grid2-img1 {
    background-image: url('./static/img/grid2img1.png');
}

.hero-gallery1 .grid2 .grid2-img2 {
    background-image: url('./static/img/grid2img2.png');
}

.hero-gallery1 .grid2 .grid2-img3 {
    background-image: url('./static/img/grid2img3.png');
    margin-right: 1.3vw;
}

/* Grid 3 styles */
.hero-gallery2 .grid3-img {
    width: 23vw;
    height: 36.02vw; /* Adjust height if needed */
    background-image: url('./static/img/grid3img.png');
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    position: relative; /* Ensure pseudo-element is positioned correctly */
    overflow: hidden; /* Hide overflow of the pseudo-element */
}

/* Overlay for Grid 3 */
.hero-gallery2 .grid3-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 13, 13, 0.3); /* Color 0D0D0D with 30% opacity */
    border-radius:10px;
    transition: opacity 0.3s ease;
    z-index: 1; /* Ensure the overlay is above the background image */
}

.hero-gallery2 .grid3-img:hover::before {
    opacity: 0; /* Remove overlay on hover */
}



/* For WebKit browsers (Chrome, Safari) */
::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: #fff; /* Background of the scrollbar track */
}

::-webkit-scrollbar-thumb {
    background-color: var(--pink); /* Pink color for the scrollbar */
    border-radius: 10px; /* Optional: Rounded corners for the scrollbar */
}

/* For Firefox */
.scrollable-element {
    scrollbar-width: thin;
    scrollbar-color: var(--pink) #fff; /* Pink scrollbar with white background */
}

/* For Internet Explorer and Edge */
.scrollable-element {
    -ms-overflow-style: scrollbar;
}

body{
    margin: 0;
    padding: 0;
    font-family: "Poppins", sans-serif;
    overflow-x: hidden;
    
}




.scrolling-text-container {
    width: 100%;
    overflow: hidden;
    background-color: #FF5DB5;
    color: #fff;
    white-space: nowrap;
    position:sticky;
    bottom:0vw;
    z-index:99999;
}

.scrolling-text {
    display: inline-block;
    padding: 10px;
    font-size: 14px;
    font-family: 'Poppins';
    font-weight: 500;
    animation: scroll-text 20s linear infinite;
}

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



/*-----------------HEADER------------------ */
header{
    
    
    padding: 0 0vw 0vw 0vw;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 1000;
   
}
.header-slider h1{
    
    position: absolute;
    top: 10vw;
    left: 35vw;
    width: 30vw;
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-size: 96px;

}

.header-slider img{
    width:100vw;
}

.header-single2{
    
    
    padding: 0 0vw 0vw 0vw;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 7vw;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 1000;
  
   
}

.slider2{
    text-align: center;
}

.slider2 h1{
    color: white;
    font-weight: 700;
    font-size: 96px;
    margin-top: 10vw;
    text-transform: uppercase;

}
.slide-slider-header .slider-txt{
    position:relative;
}


.slide-slider-header .slider-txt h3{
    font-size: 5vw;
    font-weight: 700;
    color: white;
    text-align: center;
    text-transform: uppercase;
    text-align: center;
    margin-top: 1vw;
    z-index:25;
   
    width: 100vw;
    margin: auto;
    padding: 0.2vw 2vw 0.2vw 2vw;
    border-radius: 10px;
    position: absolute;
   
    top: -28vw;
    left: 50%;
    transform: translateX(-50%);
 
}

.slide-slider-header .slider-txt h2{
    font-family: "Playfair Display", serif;
    font-size:1.77vw;
    font-weight: 800;
    color: white;
    text-align: center;
    margin-top: 1vw;
    background-color: rgb(255,93,181,0.7);
    width: fit-content;
    margin: auto;
    padding: 0.2vw 2vw 0.2vw 2vw;
    border-radius: 10px;
    position: absolute;
    
    top: -20vw;
    z-index:25;
    left: 50%;
    transform: translateX(-50%);
    
}
header .line{
    border-bottom: 1px solid rgb(256, 256, 256,0.6);
}

.header-single2 .line{
    border-bottom: 1px solid rgb(256, 256, 256,0.6);
}
.upper-header{
    height: 2.3vw;
    
    display: flex;
    padding: 0 8vw 0vw 8vw;
    background:#231D3E;

}
.upper-header .info{
    width: 50%;
    display: flex;
    
}

.upper-header .socials{
    width: 50%;
    display: flex;
    justify-content: flex-end;

}

.upper-header .info span a{
    font-size: 13px;
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
}
.upper-header .info span{
    display: flex;
    place-items: center;
}
.upper-header .info span img{
    margin-right: 0.5vw;
}
.upper-header .info span:nth-child(2){
    margin-left: 3vw;
}
.upper-header .socials{
    display: flex;
    place-items: center;
}
.upper-header .socials img{
    width: 1vw;
    height: 1vw;
}
.upper-header .socials img:nth-child(2){
    margin-left: 1vw;
}



.upper-header-scroll{
    height: 2.3vw;
    background-color: #231D3E;
    
    display: flex;
    padding: 0 8vw 0vw 8vw;

}
.upper-header-scroll .info{
    width: 50%;
    display: flex;
    
}

.upper-header-scroll .socials{
    width: 50%;
    display: flex;
    justify-content: flex-end;

}

.upper-header-scroll .info span a{
    font-size: 13px;
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
}
.upper-header-scroll .info span{
    display: flex;
    place-items: center;
}
.upper-header-scroll .info span img{
    margin-right: 0.5vw;
}
.upper-header-scroll .info span:nth-child(2){
    margin-left: 3vw;
}
.upper-header-scroll .socials{
    display: flex;
    place-items: center;
}
.upper-header-scroll .socials img{
    width: 1vw;
    height: 1vw;
}
.upper-header-scroll .socials img:nth-child(2){
    margin-left: 1vw;
}



.main-menu{
    display: flex;
    
    padding: 2vw 8vw 2vw 8vw;
    background:white;
}
.main-menu img{
    width: 10vw;
}
.main-menu nav{
    width: 90vw;
}
.main-menu nav ul{
    display: flex;
    list-style-type: none;
    justify-content: space-evenly;
    
}
.main-menu nav ul li a{
    color: #231D3E;
    font-weight:600 ;
    font-size: 0.78vw;
    text-decoration: none;
    padding: 0px 16px 0px 0px;

}
.main-menu nav ul li .dropbtn{
    color: #231D3E;
    font-weight:600 ;
    font-size: 0.78vw;
    text-decoration: none;
    padding: 0px 16px 30px 0px;

}


.main-menu-scroll{
    display: flex;
    
    padding: 2vw 8vw 2vw 8vw;
    background-color: white;
    box-shadow: 4px 4px 6.1px 0 rgba(0, 0, 0, 0.05);

}
.main-menu-scroll img{
    width: 10vw;
}
.main-menu-scroll nav{
    width: 90vw;
}
.main-menu-scroll nav ul{
    display: flex;
    list-style-type: none;
    justify-content: space-evenly;
    
}
.main-menu-scroll nav ul li a{
    color: #231D3E;
    padding: 0px 16px 20px 0px;
    font-weight:600 ;
    font-size: 0.78vw;
    text-decoration: none;
    padding-bottom:0px;

}

.main-menu-scroll nav ul li .dropbtn{
    
    padding-bottom:40px;

}
header .slider h1{
    font-size:5vw;
    font-weight: 700;
    color: white;
    text-align: center;
    text-transform: uppercase;
    margin-top: 12vw;
    margin-bottom: 1vw;
}

header .slider h2{
    font-family: "Playfair Display", serif;
    font-size:1.77vw;
    font-weight: 800;
    color: white;
    text-align: center;
    margin-top: 1vw;
    background-color: rgb(255,93,181,0.7);
    width: fit-content;
    margin: auto;
    padding: 0.2vw 2vw 0.2vw 2vw;
    border-radius: 10px;
    
}

/* ------------------------- SEARCH -------------------------*/


.main-filter{
    width: 72vw;
    height: 8vw;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0px 4px 22.5px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    background-color: white;
    border-radius: 1vw 1vw 1vw 1vw;
    margin-top:4vw;
    position: relative;

}
.main-filter img{
    width: 16vw;
    height: 8vw;
    border-radius: 1vw 0vw 0vw 1vw;
}
.main-filter form{
    display: flex;
    padding: 2vw 2vw 2vw 2vw;
    width: 57vw;
    height: 4vw;
    justify-content: space-between;
}

.styled-input {
    border: 1px solid gray;
    border-radius: 5px;
    padding: 10px;
    box-sizing: border-box;
    width: 10vw;
    height: 3.2vw;
    color:#BDBDBD;
    font-family:'Poppins';
    font-size:14px;
    font-weight:400;
}

.form-group {
    margin-bottom: 10px;
}




.pretrazi{
    
        display: flex;
        align-items: center;
        width: 10vw;
        
        border: none;
        border-radius: 4px;
        
        color: white;
        cursor: pointer;
        background-image: url('./static/img/pretrazi.svg');
        background-repeat: no-repeat;
        background-size: cover;
        
        
        height: 3.33vw;
    
}

/* ---------------ljeto 2024----------------*/


.summer-2024{
    width: 72vw;
    height: 8vw;
    margin: auto;
    text-align: center;
    margin-top: 5vw;
}
.summer-2024 span{
    display: flex;
    margin: auto;
    width: fit-content;
}


.summer-2024 span .pinkline{
    
}
.summer-2024 span h2{
    font-family: "Playfair Display", serif;
    color: var(--pink);
    font-weight: 800;
    font-size: 15px;
    margin-left: 5px;

}
.summer-2024 h1{
    font-size: 2.86vw;
    color: #231D3E;
    margin-top: -1vw;
    font-weight: 700;
    
    
}



/*----------------Programi Landing-------------------*/







.program-div{
    width: var(--programi-width);
    margin: var(--landing-margin);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap:20px;
    margin-bottom:2vw;
}
.program-kartica{
    width:19.3vw;
    box-shadow: 4px 4px 6.1px rgba(0, 0, 0, 0.05);
    border-radius: 20px 20px 20px 20px;
    margin-bottom:3vw;
    
}

.program-naslov{
    font-family:'Poppins';
    font-weight:600;
    font-size:1.2vw;
    color:#231D3E;
    margin-bottom:0;
}

.image-kartica{
    border-radius: 20px 20px 0 0;
    background-size: cover;
    border-bottom: 5px solid #FF5DB5;
    height: 13.5vw;
    position: relative;
    
    background-position: center;
}

.jadran{
    height:24vw;
}

.gif-overlay {
  position: absolute;
  left: 50%;
  top: 39%;
  transform: translate(-50%, -50%);
  z-index: 9;
  pointer-events: none; /* omogućava klikove kroz overlay; ukloni ako želiš da blokira */
  display: flex;
  align-items: center;
  justify-content: center;
}

.gif-overlay img {
  max-width: 3vw;
  max-height: 13vh;
  width: auto;
  height: auto;
  display: block;
}


/* Osigurava da je .program-kartica referentna točka za apsolutno pozicioniranje */
.program-kartica2 {
    position: relative;
    overflow: hidden; /* Može biti korisno za skrivanje dijelova koji prelaze */
    /* ... ostali stilovi za karticu ... */
}

/* Osigurava da je .image-kartica referentna točka za preklop (overlay) */
.image-kartica2 {
    position: relative;
    /* ... ostali stilovi za sliku ... */
}

/* Stil za preklop (overlay) koji pokriva cijelu sliku */
.kartica-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Dodavanje blagog tamnog sloja preko slike za bolju vidljivost gumba */
    background-color: rgba(0, 0, 0, 0.4); 
    /* Centriranje gumba unutar overlay-a */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Inicijalno sakrivanje overlay-a */
    opacity: 1;
    transition: opacity 0.3s ease; /* Glatka animacija prikaza */
    pointer-events: none; /* Omogućuje klik na elemente ispod ako overlay postane potpuno transparentan */
}

/* Stil za gumb */
.pogledaj-pdf-button {
    background-color: var(--pink); /* Boja po želji */
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: bold;
    /* Dodatni stil za gumb koji će se pojaviti */
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 1; /* Inicijalno sakriven */
}

/* Prikaz overlay-a pri hoveru na .program-kartica */
.program-kartica:hover .kartica-overlay {
    opacity: 1;
    pointer-events: auto; /* Ponovno omogućuje interakciju s elementima unutar overlay-a (npr. gumb) */
}

/* Prikaz gumba pri hoveru na .program-kartica */
.program-kartica:hover .pogledaj-pdf-button {
    opacity: 1;
    transform: translateY(0); /* Vraća gumb u početni položaj */
}

.image-kartica span{
    display: flex;
    background-color: #FF5DB5;
    height: 32px;
    margin-top: 10px;
    position: absolute;
    padding-top: 0.42vw;
    padding-left: 2vw;
    padding-right: 2vw;
    border-radius: 14px;
    right: 0;
    
    
}


.image-kartica .kartica-overlay span{
    display: flex;
    background-color: #FF5DB5;
    height: 32px;
    margin-top: 0px;
    position: absolute;
    padding-top: 4px;
    padding-left: 2vw;
    padding-right: 2vw;
    border-radius: 14px;
    right: 0;
    
    font-size:13px;
        
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    justify-content: center;
}


.image-kartica span h1{
    text-decoration: line-through;
    font-weight: 300;
    font-size: 15px;
    color: white;
    margin: 0;
    padding-top: 3px;
    padding-right: 14px;
}
.image-kartica span p{
    
    font-weight: 500;
    font-size: 19px;
    color: white;
    margin: 0;
}

.image-kartica h3{
    display:none;
    position: absolute;
    background-color: #FF5DB5;
    color: white;
    top: 2vw;
    right: 0;
    padding: 2px 12px 2px 12px;
    border-radius: 5px;

}
.program-detalji{
    display: flex;
    justify-content: space-between;
    margin-right: 2vw;
}
.program-detalji span{
    display: flex;
}
.program-detalji span img{
    width:16px;
}
.program-detalji span p{
    margin-left: 0.5vw;
    font-weight:500;
    font-size:0.78vw;
}
.datum-span{
    display: flex;
}
.datum-span p{
    margin-left: 0.5vw;
    font-weight:500;
    font-size:0.78vw;

}

.program-kartica-datum{
    background-color: #FF5DB5;
    color: white;
    font-weight: 600;
    width: fit-content;
    padding-left: 0.52vw;
    padding-right: 0.52vw;
    border-radius: 5px;
    margin-top:0;
    font-size:0.68vw;
}
.program-datumi{
    display: flex;
}
.program-kartica-datum:not(:first-child){
    margin-left: 0.78vw;
}

.program-text{
    padding-left:1.3vw ;
}
.dodatne-usluge{
    display: flex;
    justify-content: space-between;
    width: 49vw;
    margin: auto;
    margin-top:3vw;
    margin-bottom:3vw;
    
}
.dodatne-usluge-kartica{
    width: 11vw;
    text-align: center;
    border: 0.5px solid rgb(43, 39, 65, 0.4);
    border-radius:10px;
    box-shadow: 0px 4px 22.5px 0px rgba(0, 0, 0, 0.25);
    padding: 1.77vw 1.77vw 0 1.77vw ;
}
.dodatne-usluge-kartica img{
    width: 5.2vw;
    
}
.dodatne-usluge-kartica p{
    font-size: 14px;
    color: #777777;
    
}
.dodatne-usluge-kartica h1{
    font-size: 22px;
    
    
}

footer{
    background-color:var(--tplava) ;
    border-top: 5px solid var(--pink);
    
}
.airline-logos{
    width: 100vw;
    padding-top: 3vw;
    padding-bottom: 3vw;
    display: flex;
    
}

.airline-logos img{
    margin: 0 1vw 0 1vw;
    width: 280px;
}

.footer-main{
    display: flex;
    padding:6vw ;
    justify-content: space-around;
}
.footer-main .footer-first p{
    color: #A5A4B2;
    font-size: 15px;
    width: 17.6vw;
}
.footer-main .footer-first .icons-div span{
    display: block;
    margin-top: 1vw;
}

.footer-main .footer-first .icons-div span img{
    
    margin-right: 0.5vw;
}
.footer-main .footer-first .icons-div span a{
    
    text-decoration: none;
    color: #A5A4B2;
    font-size: 13px;
}

.working-hours h1,.fast-links h1,.footer-special h1, .newsletter h1{
    font-weight: 600;
    color: white;
    font-size: 20px;

}
.working-hours p{
    font-weight: 400;
    color: #A5A4B2;
    font-size: 15px;

}
.working-hours h2{
    font-weight: 600;
    color: #A5A4B2;
    font-size: 15px;

}
.footer-main .fast-links  a, .footer-main .footer-special a{
    
    text-decoration: none;
    color: #A5A4B2;
    font-size: 15px;
    display: block;
    margin-bottom: 0.5vw;
}
.newsletter form button{
    display: block;
}
.newsletter form button{
    width: 19.7vw;
    height:3.5vw ;
    border-radius: 10px;
    outline: none;
    border: none;
    color: white;
    background-color: var(--pink);
    font-weight: 700;

}

.newsletter form input{
    width: 19.5vw;
    height:3.5vw ;
    border-radius: 10px;
    outline: none;
    border: none;
    background-color:#1C1631 ;
    font-family: 'Poppins';
    

}
.newsletter form input::placeholder{
    text-align: center;
    

}


.form-group input::placeholder{
    color:#BDBDBD;
    font-size:14px;
    font-weight:400;
    font-family:'Poppins';
    

}
.breadc{
    width: var(--programi-width);
    margin: var(--landing-margin);
    margin-top: 3vw;
    margin-bottom: 3vw;
}

.breadc span{
    color: #FF5DB5;
}


.program-single{
    width: var(--programi-width);
    margin: var(--landing-margin);

}
.program-single .program-heading{
   margin-top:7vw;

}

.gallery-masonry{
    display: flex;
}
.gallery-masonry .gmsection1{
    margin-right: 15px;
}

.gallery-masonry .gmsection2 .gmsection22 img:nth-child(2){
    
    border-radius:0  0 15px 0 ;
}
.gallery-masonry .gmsection2 .gmsection22 img:nth-child(1){
    
    border-radius:0 15px 0  0 ;
}

.gallery-masonry .gmsection1 img{
    border-radius: 15px 0 0px 15px;
}

.gallery-masonry .gmsection2 .gmsection21 img{
    border-radius:0 15px 0 0 ;
}

.main-card{
    display: flex;
    justify-content: space-between;
    width: 62vw;
    margin: 2vw 0 2vw 0;
}
.info span:nth-child(1){
    display: flex;
   
}

.info span span{
    display: block;
    margin-left: 10px;
    
}

.info span span h2{
    margin: 0;
    margin-top: 3px;
    font-size: 16px;
    font-weight: 500;
}

.info span span h3{
    margin: 0;
    font-size:13px ;
    color: #828282;
    font-weight: 400;
}
.slidedate{
    width: 130px!important;
    height: 130px;
    border: #828282 1px solid;
    border-radius: 20px;
    text-align: center;
}
.slidedate p:nth-child(1){
    font-size: 24px;
    font-weight: 400;
    color: #231D3E;

}
.slidedate p:nth-child(2){
    font-size: 27px;
    font-weight: 600;
    color: #231D3E;

}
.slidedate p:nth-child(3){
    font-size: 14px;
    font-weight: 400;
    color: #231D3E;

}
.slidedate p{
    margin-top: 7px;
    margin-bottom: 0;
}

.dateslider {
    width: 48vw; /* or a fixed width */
    margin-left: 5vw;
    margin-top: 50px;
    margin-bottom: 50px;
   
}

.slidedate {
    padding: 10px; /* optional padding for spacing */
    box-sizing: border-box; /* include padding in width */
    margin-left: 1vw;
    position:relative;
}
.datumhide{
     position: absolute;
    top: 76%;
    left: 29%;
    transform: translate(-50%, -50%);
    background-color: #EF4423;
    color: white;
    padding: 1px;
    display:none;
    border-radius: 20px;
    rotate: 43deg;
    width: 142px;
}

.hidedate0 .datumhide{
    display:block!important;
}



.hoteli{
    border: 1px solid #E0E0E0 ;
    border-radius: 25px;
    width: 55vw;
    padding: 2vw;
    margin-bottom: 50px;
    
    box-shadow: 2px 1px 8px -1px rgba(0, 0, 0, 0.05);
    
}

.hotel{
    display: flex;
    width: 54vw;
    padding: 1vw;
    justify-content: space-between;
}
.hotel .section1 img{
    width: 16vw;
}
.hotel .section2{
    margin-left: 2vw;
}

.hotel .section2 span{
    display: flex;
}

.hotel .section2 h1{
    margin-bottom: 0;
    max-width:20vw;
    min-width:14vw;
}

.hotel .section2 span {
    height: 2vw;
}

.hotel .section2 span img{
    width: 20px;
    margin-top: 20px;
    margin-right: 10px;
}


.hotel .section2 h3{
    margin-bottom: 0px;
}
.section2 .counter p{
    margin-top: 0;
    margin-bottom: 0;
}

.hotel .section3{
    margin-left: 5vw;
    text-align: center;
}

.hotel .section3{
    margin-top: 1vw;
}

.hotel .section3 h2{
    font-size: 10px;
    color: #828282;
    font-weight: 400;
    margin-top: 5px;
}


.hotel .section3 h3{
    font-size: 12px;
    color: #4F4F4F;
    font-weight: 600;
    margin-top: 25px;
    margin-bottom: 0;
   
}



.hotel .section3 h4{
    font-size: 12px;
    color: #4F4F4F;
    font-weight: 400;
    margin-top: 5px;
    text-decoration: line-through;
}


.hotel .section3 p{
    font-size: 26px;
    color: #231D3E;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 0;
}


.hotel .section3 button{
   width: 10vw;
   background: transparent;
   color: var(--pink);
   border: 1px solid var(--pink);
   border-radius: 15px;
   height: 3vw;
   font-size: 15px;
   font-weight: 600;
   margin-top:2vw;
}





.main-content{
    display: flex;
}

.main-content .main{
    width: 61vw;
}

.counter input{
    border: none;
    outline: none;
}

.counter button{
    border-radius: 20px;
    border: 1px solid black;
    background: transparent;
}

.counter p{
    width: 10vw;
    margin-top: 0;
    margin-bottom: 0;
}
.dpmega{
    display: flex;
}
.dpmega img{
    width:380px!important;
    height:322px!important;
        border-radius: 26px;
    margin-right: 11px;
}

.megalinks {
    display: flex;
    flex-wrap: wrap;
    max-height: 320px /* Controls the max height of each column (50px per item for 8 items) */;
    flex-direction: column;
    gap: 5px; /* Optional: adds spacing between items */;
    padding-top: 20px;
    
}

.megalinks .a {
    width: 100%; /* Ensures links take the full width of the column */
    padding: 10px;
    background-color: transparent; /* Background color for each link */
    color: #333; /* Text color */
    text-decoration: none; /* Removes underline from links */
    display: block; /* Ensures each link is block-level */
    font-weight: 600;
}

/* Adjusts the flex-basis to ensure 8 items per column */
.megalinks .a:nth-child(9) ~ .a {
    margin-left: 0px; /* Adds spacing between the columns */
}


/* Main dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown content (megamenu) */
.dropdown-content {
    display: none;
    position: fixed; /* Changed to fixed to align with the full screen */
    background-color: rgba(256, 256, 256, 1);
    width: 100vw; /* Full width of the viewport */
    height: 320px; /* Set height to 500px */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    left: 0; /* Align to the left edge of the screen */
    top: 7.5vw /* Position below the trigger element */;
    padding:2vw 8vw 2vw 8vw;
}

/* Links inside the dropdown */
.dropdown-content a {
    color: #231D3E;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    font-weight: 400;
}

/* Hover effects for links */


/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Additional dropdown-scroll styles (if used) */
.dropdown-scroll {
    position: relative;
    display: inline-block;
}

.dropdown-scroll .dropdown-content {
    display: none;
    position: fixed; /* Changed to fixed to align with the full screen */
    background-color: white;
    width: 100vw; /* Full width of the viewport */
    height: 320px /* Set height to 500px */;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    left: 0; /* Align to the left edge of the viewport */
    top: 7.5vw; /* Position below the trigger element */
}

.dropdown-scroll .dropdown-content a {
    color: #2B2741;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 14px;
    font-weight: 600;
}

.dropdown-scroll .dropdown-content a:hover {
    
    color: #231D3E;
}

/* Show dropdown on hover */
.dropdown-scroll:hover .dropdown-content {
    display: block;
}
.megaimage h2{
    position: absolute;
    top: 203px;
    left: calc(var(--offset-vw) + var(--offset-px));
    color: #FFFFFF;
    font-size: 25px;
    font-weight: 700;
    text-transform:uppercase;
}
.megaimage a{
    position: absolute;
    top: 269px;
    background: white;
    border-radius: 32px;
    width: 100px;
    text-align: center;
    left: calc(var(--offset-vw) + var(--offset-px));
    height: 22px;
    padding: 8px!important;

}
.ui-accordion-header{
    border: 1px solid black;
    padding: 10px;
    border-radius: 10px;
}



.accordion-arrow {
    float: right;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #000; /* Boja strelice */
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.ui-accordion .ui-accordion-header .accordion-arrow {
    border-top: 5px solid #000; /* Početna boja strelice (gore) */
}

.ui-accordion .ui-accordion-header.ui-state-active .accordion-arrow {
    transform: rotate(180deg); /* Rotiraj strelicu kada je akordeon otvoren */
    border-top: none;
    border-bottom: 7px solid #FFFFFF;
    margin-top: 12px;
    margin-right: 20px;
}
.ui-accordion .ui-accordion-header .accordion-arrow {
    transform: rotate(180deg); /* Rotiraj strelicu kada je akordeon otvoren */
    border-top: 5px solid #000;
    border-bottom: 7px solid #FFFFFF;
    margin-top: 12px;
    margin-right: 20px;
}


.ui-accordion-header-active{
    background-color: var(--pink);
    color: white;
    padding: 15px 0 15px 10px;
    border-radius: 10px;
    border:none;

}

.ui-accordion-content-active{
    color: #4F4F4F;
    font-size: 16px;
    font-weight: 400;
    
}

.preuzmipdf{
    background: transparent;
    border: none;
    margin-top: 50px;
}


.aside .double span input {
    width: 8vw;
    height: 2.5vw;
    color: #BDBDBD;
    font-size: 16px;
    font-weight: 400;
    border-radius: 10px;
    border: 1px solid #BDBDBD;
    padding-left: 1vw;
    margin-bottom: 2vw;
    margin-top: 15px;
}

.aside .double {
    display: flex;
}


.aside   input:not(.counterinput) {
    width: 17vw;
    height: 2.5vw;
    color: #BDBDBD;
    font-size: 16px;
    font-weight: 400;
    border-radius: 10px;
    border: 1px solid #BDBDBD;
    padding-left: 1vw;
    margin-bottom: 2vw;
    margin-top: 15px;
    display: block;
}

.aside2  .input2 {
    width: 17vw;
    height: 2.5vw;
    color: #BDBDBD;
    font-size: 16px;
    font-weight: 400;
    border-radius: 10px;
    border: 1px solid #BDBDBD;
    padding-left: 1vw;
    margin-bottom: 2vw;
    margin-top: 15px;
    display: block;
}

.aside2 select{
    width: 17vw;
    height: 2.5vw;
    color: #BDBDBD;
    font-size: 16px;
    font-weight: 400;
    border-radius: 10px;
    border: 1px solid #BDBDBD;
    padding-left: 1vw;
    margin-bottom: 0vw;
    margin-top: 15px;
    display: block;
}
.aside  label, .aside .double span label, .aside h3 {
    
    color: #231C3E;
    font-size: 16px;
    font-weight: 600;
    
    
    
    
}



.program-submit{

    background-color: var(--pink);
    color: white;

text-align: center;
width: 204px;
height: 68px;
margin: auto;
margin-left: 5vw;
border-radius: 20px;
border: none;
margin-top: 1vw;
font-family: 'Poppins';
font-size: 20px;
font-weight: 700;

}
.aside{
    margin-left: 3vw;
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.05);
    height: fit-content;
    padding: 0 3vw 3vw 3vw;
    border-radius: 20px;
    width: 24vw;
    margin-top: 2vw;
}


.aside2{
    margin-right: 3vw;
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.05);
    height: fit-content;
    padding: 0 0 3vw 3vw;
    border-radius: 20px;
    width: 24vw;
    margin-top: 2vw;
}



.aside form h1{
    background-color: var(--pink);
    padding: 1vw;
    text-align: center;
    color: white;
    font-weight: 700;
    border-radius: 10px 10px 0 0;
}




.copyright{

    background-color:#231D3E ;
    box-shadow: 0px -2px 17.4px 0 rgba(0, 0, 0, 0.23);
    display: flex;
    justify-content: space-between;
    padding: 2vw 6vw 1vw 8vw;
   
}

.copyright span:nth-child(2){
    display: flex;
    gap: 30px;
    margin-right: 130px;
}
.copyright span:nth-child(2) img{
    width:36px ;
}

.copyright p{
    font-weight: 500;
    font-size: 13px;
    color: #BDBDBD;

}

.menu-link:hover{
    border-bottom: 3px solid white;
    padding-bottom: 0px;
}




/* Popup Overlay */
.popup-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 1000; /* Sit on top */
    overflow: auto; /* Enable scroll if needed */
    
}

/* Popup Content */
.popup-content {
    background-color: #fff;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 438px; /* Set the width */
    height: 260px; /* Set the height */
    position: relative;
    border-radius:25px;
}

/* Close Button */
.popup-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.popup-close:hover,
.popup-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.popup-content ul {
    margin: 0;
    padding: 0vw 2vw 0 2vw;
    list-style-type: disc;
}



.popup-content h2{
    box-shadow: 4px 4px 6.1 0 rgba(0,0,0,0.05);
    color:#231D3E;
    font-size:20px;
    font-weight:600;
    
    
}


.popup-content ul li a{
    
      color:#231D3E;
    font-size:16px;
    font-weight:400;
    margin-bottom:10px;
    
    
}

.gallery-masonry {
    
    width: 84vw; /* Širina galerije */
    height: 600px;
    display: flex;
    margin: auto;
   
}

/* Sekcija 1 */
.gmsection1 {
    width: 70%;
    height: 100%;
    margin-right:15px;
}
.gmsection2 {
    width: 30%;
    height: 100%;
}

.gmsection1 img {
    width: 100%; /* Širina slike u sekciji 1 */
    height: 100%; /* Visina slike u sekciji 1 */
    object-fit: cover; /* Pokrijte cijelu oblast */
}

/* Sekcija 21 */
.gmsection21 {
    width: 100%;
    height: 50%;
}

.gmsection21 img {
    width: 100%; /* Širina slike u sekciji 21 */
    height: 100%; /* Visina slike u sekciji 21 */
    object-fit: cover; /* Pokrijte cijelu oblast */
}

/* Sekcija 22 */
.gmsection22 {
    width: 100%;
    height: 50%;
    display: block;
    
}

.gmsection22 img {
    width: 100%;
    height: 99%;
    object-fit: cover;
}


@media only screen and (max-width: 600px) {
    .program-kartica-datum:not(:first-child) {
    margin-left: 3.78vw;
}
    .datum-span p{
    
    font-size:3.61vw;

}
    
    
    .program-div{
        width:86vw;
        display:block;
    }
    .program-kartica{
        width:86vw;
        margin-top:5vw;
    }
    .image-kartica{
        height:56vw;
    }
    .hero-gallery {
    width: 86vw;
    margin: auto;
    display: block;
}
.hero-gallery1 .grid1 {
    display: block;
}
.hero-gallery1 .grid1 div {
    width: 86vw;
    height: 84.3vw;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    margin-top: 5vw;
}
.hero-gallery1 .grid2 {
    display: block;
    justify-content: space-between;
    margin-top: 1.3vw;
}
.hero-gallery1 .grid2 div {
    width: 86.8vw;
    height: 84.3vw;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    margin-top: 5vw;
}
.hero-gallery2 .grid3-img {
    width: 86vw;
    height: 84.52vw;
    background-image: url(./static/img/grid3img.png);
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    margin-top: 5vw;
}
.hero-gallery1 .grid1 .grid1-img1 h1, .hero-gallery1 .grid1 .grid1-img2 h1, .hero-gallery1 .grid2 .grid2-img1 h1, .hero-gallery1 .grid2 .grid2-img2 h1, .hero-gallery1 .grid2 .grid2-img3 h1, .hero-gallery2 .grid3-img h1 {
    position: absolute;
    bottom: 11vw;
    left: 2vw;
    font-size: 26px;
    color: white;
    z-index: 20;
}
.hero-gallery1 .grid1 .grid1-img1 p, .hero-gallery1 .grid1 .grid1-img2 p, .hero-gallery1 .grid2 .grid2-img1 p, .hero-gallery1 .grid2 .grid2-img2 p, .hero-gallery1 .grid2 .grid2-img3 p, .hero-gallery2 .grid3-img p {
    position: absolute;
    z-index: 20;
    background-color: #FF5DB5;
    width: fit-content;
    padding: 5px 15px 5px 15px;
    border-radius: 9px;
    color: white;
    bottom: 4vw;
    font-size: 12px;
    left: 2vw;
}
.dodatne-usluge {
    display: block;
    justify-content: space-between;
    width: 86vw;
    margin: auto;
    margin-top: 5vw;
    margin-bottom: 3vw;
}
.dodatne-usluge-kartica {
    width: 82vw;
    text-align: center;
    border: 0.5px solid rgb(43, 39, 65, 0.4);
    border-radius: 10px;
    box-shadow: 0px 4px 22.5px 0px rgba(0, 0, 0, 0.25);
    padding: 1.77vw 1.77vw 0 1.77vw;
    margin-top: 5vw;
    height: 86vw;
}
.dodatne-usluge-kartica img {
    width: 26.2vw;
    margin-top: 8vw;
}
.footer-main {
    display: block;
    padding: 6vw;
    justify-content: space-around;
}
.airline-logos {
    width: 100vw;
    padding-top: 3vw;
    padding-bottom: 3vw;
    display: flex;
    box-shadow: 0px 4px 17.4px 0 rgba(0, 0, 0, 0.3);
}
.footer-main .footer-first p {
    color: #A5A4B2;
    font-size: 15px;
    width: 86.6vw;
}
.newsletter form button {
    width: 86.7vw;
    height: 15.5vw;
    border-radius: 10px;
    outline: none;
    border: none;
    color: white;
    background-color: var(--pink);
    font-weight: 700;
}
.newsletter form input {
    width: 86.5vw;
    height: 15.5vw;
    border-radius: 10px;
    outline: none;
    border: none;
    background-color: #1C1631;
    font-family: 'Poppins';
}
.summer-2024 {
    width: 86vw;
    height: 26vw;
    margin: auto;
    text-align: center;
    margin-top: 9vw;
}
.hidemob,.hidemobflex{
    display:none!important;
    
}

.header-slider-mobile{
    width:100vw;
}

.slide-slider-header-mobile{
    width:100vw;
    position:relative;
    
}
.slide-slider-header-mobile img{
    width:100vw;
    
    
}
.slide-slider-header-mobile .slider-txt h3{
           font-size: 42px;
        font-weight: 700;
        color: white;
        /* text-align: center; */
        text-transform: uppercase;
        text-align: center;
        margin-top: 1vw;
        width: 65vw;
        margin: auto;
        padding: 0.2vw 2vw 0.2vw 2vw;
        border-radius: 10px;
        position: absolute;
         left: 50%; /* Postavljanje lijeve strane elementa na sredinu roditelja */
    transform: translateX(-50%); /* Pomicanje elementa ulijevo za 50% svoje širine */
        top: 71vw;
        line-height: 48px;
    }
    
    
    .slide-slider-header-mobile .slider-txt h2{
         font-family: "Playfair Display", serif;
        font-size: 15px;
        font-weight: 800;
        color: white;
        text-align: center;
        margin-top: 1vw;
        background-color: rgb(255, 93, 181, 0.7);
        width: 64vw;
        margin: auto;
        padding: 0.5vw 5vw 0.5vw 5vw;
        border-radius: 10px;
        position: absolute;
        left: 50%; /* Postavljanje lijeve strane elementa na sredinu roditelja */
    transform: translateX(-50%); /* Pomicanje elementa ulijevo za 50% svoje širine */
        top: 98vw;
    
    
    
}

.hidepc{
    display:block!important;
    
}

.upper-header-mobile{
    position:fixed;
    z-index:1000;
    top:0vw;
    display:flex;
    justify-content:space-between;
    width:86vw;
    padding:3vw 7vw 3vw 7vw;
     background-color: transparent; /* Initial background color */
    transition: background-color 0.3s;
    
}
.upper-header-mobile span a {
    font-size: 10px;
    text-decoration: none;
    color: #ECEDEE;
    font-weight: 300;
     z-index:1000;
}
    .upper-header-mobile span img {
   width:10px;
}
.header-line-mobile {
    border-bottom: 1px solid rgb(256, 256, 256, 0.6);
    position:fixed;
    width:100vw;
     z-index:1000;
    top:14vw;
     display: block; /* Initial display */
            transition: opacity 0.3s; /* Smooth transition for hiding */
}
.header-bottom-mobile{
    position:fixed;
    top:16vw;
    display:flex;
    justify-content:space-between;
    width:86vw;
     z-index:1000;
    padding:3vw 7vw 3vw 7vw;
    background-color: transparent; /* Initial background color */
    transition: background-color 0.3s;
     
    
}


body {
    margin: 0;
    font-family: Arial, sans-serif;
}

.side-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 80vw;
    height: 100vh;
    background-color: #231D3E;
    padding: 10vw 10vw 10vw 10vw;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    z-index: 1000000;
    display:none;
}

.side-nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.side-nav li {
    margin-bottom: 1vw;
    position: relative;
}

.side-nav ul li a {
    border-top: 1px solid #BDBDBD;
    padding-top: 4vw;
    
    text-decoration:none;
    color:#ECEDEE;
    font-weight:600;
    font-size:3.61vw;
    line-height:50px;
    font-family:'Poppins';
}
.side-nav ul li  .submenu a {
    border-top: 0px solid #BDBDBD;
    padding-top: 3vw;
    
    text-decoration:none;
    color:#ECEDEE;
    font-weight:400;
    font-size:13px;
    line-height:50px;
    font-family:'Poppins';
}


.program-detalji span p {
    margin-left: 0.5vw;
    font-weight: 500;
    font-size:3.61vw;
}
.nav-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #000;
    padding: 1vw 0;
    transition: background-color 0.3s, color 0.3s;
}

.nav-link:hover {
    
    color: #fff;
}

.arrow {
    margin-left: auto;
    margin-right: 0.5vw;
    transition: transform 0.3s;
}

.submenu {
    display: none;
   
    left: 0;
    top: 100%;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    padding: 1vw;
    width: 100%;
    max-height: 0;
    overflow: auto;
    transition: max-height 0.3s ease-out;
    z-index: 999; /* Ensure submenu is above other content */
    max-height: 60vh; /* Postavlja maksimalnu visinu za podmeni */
    overflow-y: auto; /* Omogućava skrolanje unutar podmenija */
    
}

.submenu-link {
    display: block;
    padding: 0.5vw 0;
    text-decoration: none;
    color: #000;
    transition: background-color 0.3s;
}

.submenu-link:hover {
    background-color: #f0f0f0;
}

.has-submenu.open .submenu {
    display: block;
    max-height: 70vh; /* Adjust based on your submenu content */
    transition: max-height 0.5s ease-in;
    background-color: #231D3E;
}

.has-submenu.open .arrow {
    transform: rotate(-90deg);
}
.nav-barlogo{
    
    
    display:flex;
    justify-content:space-between;
    width:66vw;
    padding:3vw 7vw 3vw 7vw;
    margin-bottom:7vw;
}
.main-filter {
    width: 89vw;
    height: 132vw;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0px 4px 22.5px 0px rgba(0, 0, 0, 0.15);
    display: block;
    background-color: white;
    border-radius: 8vw 8vw 1vw 1vw;
    margin-top: -4vw;
    position: relative;
}
.main-filter form {
    display: block;
    padding: 2vw 2vw 2vw 8vw;
    width: 90vw;
    height: 4vw;
    justify-content: space-between;
}
.styled-input {
    border: 1px solid gray;
    border-radius: 19px;
    padding:  0px 35px 0 35px;
    box-sizing: border-box;
    width: 75vw;
    height: 16.2vw;
    background-color:white;
    color: #BDBDBD;
}
input[type="date"] {
    background-color: white !important;
    color: #BDBDBD !important;
}

input[type="date"]::placeholder { /* Standardni placeholder */
    color: #BDBDBD !important;
}

input[type="date"]::-webkit-input-placeholder { /* Placeholder za Webkit pregledače (Chrome, Safari) */
    color: #BDBDBD !important;
}

input[type="date"]:-ms-input-placeholder { /* Placeholder za Internet Explorer */
    color: #BDBDBD !important;
}

input[type="date"]::-ms-input-placeholder { /* Placeholder za Microsoft Edge */
    color: #BDBDBD !important;
}


.pretrazi {
    display: flex;
    align-items: center;
    width: 79vw;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    background-image: url(./static/img/pretrazi.svg);
    background-repeat: no-repeat;
    background-size: cover;
    height: 25.33vw;
}
.summer-2024 span {
    display: flex;
    margin: auto;
    width: 90vw;
    justify-content: center;
}
.summer-2024 span h2 {
    font-family: "Playfair Display", serif;
    color: var(--pink);
    font-weight: 800;
    font-size: 13px;
    margin-left: 5px;
}
.summer-2024 h1 {
    font-size: 5.86vw;
    color: #231D3E;
    margin-top: 0vw;
    font-weight: 700;
    margin-top: -1vw;
    
}
.hero-gallery {
    width: 90vw;
    margin: auto;
    display: block;
}
.hero-gallery1 .grid1 {
    display: block;
}
.hero-gallery1 .grid1 div {
    width: 90vw;
    height: 62.3vw;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
    
    .hero-gallery1 .grid2 {
    display: block;
    justify-content: space-between;
    margin-top: 1.3vw;
}


.hero-gallery1 .grid2 div {
    width: 90vw;
    height: 62.3vw;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}


.hero-gallery2 .grid3-img {
    width: 90vw;
    height: 62.52vw;
    background-image: url(./static/img/grid3img.png);
    background-size: cover;
    

}
.hero-gallery1 .grid1 .grid1-img1 h1, .hero-gallery1 .grid1 .grid1-img2 h1, .hero-gallery1 .grid2 .grid2-img1 h1, .hero-gallery1 .grid2 .grid2-img2 h1, .hero-gallery1 .grid2 .grid2-img3 h1, .hero-gallery2 .grid3-img h1 {
    position: absolute;
    bottom: 10vw;
    left: 6vw;
    font-size: 26px;
    color: white;
    z-index: 20;
}

.hero-gallery1 .grid1 .grid1-img1 p, .hero-gallery1 .grid1 .grid1-img2 p, .hero-gallery1 .grid2 .grid2-img1 p, .hero-gallery1 .grid2 .grid2-img2 p, .hero-gallery1 .grid2 .grid2-img3 p, .hero-gallery2 .grid3-img p {
    position: absolute;
    z-index: 20;
    background-color: #FF5DB5;
    width: fit-content;
    padding: 5px 15px 5px 15px;
    border-radius: 9px;
    color: white;
    bottom: 3vw;
    font-size: 12px;
    left: 6vw;
}

.airline-logos .slick-list .slick-track img{
    width:20vw!important;
}
.copyright {
    background-color: #231D3E;
    box-shadow: 0px -2px 17.4px 0 rgba(0, 0, 0, 0.23);
    display: block;
    justify-content: space-between;
    padding: 2vw 3vw 1vw 8vw;
    text-align: center;
}
.copyright span:nth-child(2) {
    display: flex;
    gap: 30px;
    margin-right: 0;
    /* margin: auto; */
    justify-content: center;
    margin-top: 9vw;
    order:1;
}
.copyright span:nth-child(3) {
   display: flex;
    justify-content: center;
    margin-top: 3vw;
    order:0;
}
.main-filter img {
    width: 90vw;
    height:31vw;
    border-radius: 8vw 8vw 0vw 1vw;
    content: url('./static/img/pronadjiputmov.png');
}
.pretrazi {
        display: flex;
        align-items: center;
        width: 74vw;
        border: none;
        border-radius: 20px;
        color: white;
        cursor: pointer;
        background-image: url(./static/img/pretrazimob.svg);
        background-repeat: no-repeat;
        background-size: cover;
        height: 16.33vw;
    }
.program-single .program-heading {
    margin-top: 24vw;
}

.program-text {
    padding-left: 4.3vw;
}
.gallery-masonry {
    width: 86vw;
    height: 500px;
    display: flex;
    margin: auto;
}
.gmsection22 img {
    width: 93%;
    height: 50%;
    object-fit: cover;
}
.gmsection21 img {
    width: 93%;
    height: 100%;
    object-fit: cover;
}

.main-card {
    display: flex;
    justify-content: space-between;
    width: 87vw;
    margin: 10vw 0 10vw 0;
    flex-wrap: wrap;
    
}

.main-content {
    display: block;
}

.main-card .info:nth-child(2){
    margin-right:12px;
}

.main-content .main {
    width: 90vw;
}

.popup-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 90vw;
    height: 260px;
    position: relative;
    border-radius: 25px;
}
.aside {
    margin-left: 0vw;
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.05);
    height: fit-content;
    padding: 0 0vw 3vw 0vw;
    border-radius: 20px;
    width: 87vw;
    margin-top: 2vw;
}

.aside form h1 {
    background-color: var(--pink);
    padding: 4vw;
    text-align: center;
    color: white;
    font-weight: 700;
    border-radius: 10px 10px 0 0;
}

.aside input:not(.counterinput) {
    width: 84vw;
    height: 10.5vw;
    color: #BDBDBD;
    font-size: 16px;
    font-weight: 400;
    border-radius: 10px;
    border: 1px solid #BDBDBD;
    padding-left: 1vw;
    margin-bottom: 2vw;
    margin-top: 15px;
    display: block;
}
.aside .double span input {
    width: 40vw;
    height: 10.5vw;
    color: #BDBDBD;
    font-size: 16px;
    font-weight: 400;
    border-radius: 10px;
    border: 1px solid #BDBDBD;
    padding-left: 1vw;
    margin-bottom: 2vw;
    margin-top: 15px;
}
.counter p {
    width: 44vw;
    margin-top: 0;
    margin-bottom: 0;
}

.program-submit {
    background-color: var(--pink);
    color: white;
    text-align: center;
    width: 50vw;
    height: 68px;
    margin: auto;
    margin-left: 18vw;
    border-radius: 20px;
    border: none;
    margin-top: 1vw;
    font-family: 'Poppins';
    font-size: 20px;
    font-weight: 700;
}
.dateslider {
    width: 73vw;
    margin-left: 5vw;
    margin-top: 50px;
    margin-bottom: 50px;
}

.header-slider h1 {
    position: absolute;
    top: 10vw;
    left: 31vw;
    width: 30vw;
    text-align: center;
    color: white;
    text-transform: uppercase;
    font-size: 26px;
}

.aside2 {
    margin-right: 3vw;
    box-shadow: 4px 4px 6px 0px rgba(0, 0, 0, 0.05);
    height: fit-content;
    padding: 0 0 3vw 3vw;
    border-radius: 20px;
    width: 85vw;
    margin-top: 26vw;
}
.aside2 select {
    width: 78vw;
    height: 16.5vw;
    color: #BDBDBD;
    font-size: 16px;
    font-weight: 400;
    border-radius: 10px;
    border: 1px solid #BDBDBD;
    padding-left: 1vw;
    margin-bottom: 0vw;
    margin-top: 15px;
    display: block;
}
.aside2 .input2 {
    width: 78vw;
    height: 16.5vw;
    color: #BDBDBD;
    font-size: 16px;
    font-weight: 400;
    border-radius: 10px;
    border: 1px solid #BDBDBD;
    padding-left: 1vw;
    margin-bottom: 2vw;
    margin-top: 15px;
    display: block;
}
.hoteli {
    border: 1px solid #E0E0E0;
    border-radius: 25px;
    width: 86vw;
    padding: 0vw;
    margin-bottom: 50px;
    box-shadow: 2px 1px 8px -1px rgba(0, 0, 0, 0.05);
}

.hotel {
    display: block!important;
    width: 86vw;
    padding: 0vw 0vw 13vw 0vw;
}
.hotel .section1 img {
    width: 86vw;
    border-radius: 20px 20px 0 0;
}
.hotel .section2 span img {
    width: 16px;
    margin-top: -13px;
    margin-right: 10px;
}
.hotel .section2 span p {
    
    margin-top: 5px;
    
}

.hotel .section2 span {
    height: 10vw;
}

    .hotel .section3 button {
        width: 72vw;
        background: transparent;
        color: var(--pink);
        border: 1px solid var(--pink);
        border-radius: 10px;
        height: 13vw;
        font-size: 15px;
        font-weight: 600;
        margin-top: 4vw;
    }

.hotel .section2 h1 {
   margin-bottom: 3vw;
        max-width: 75vw;
        min-width: 14vw;
        font-size: 18px;
        font-family: 'Poppins';
        color: #231D3E;
        font-weight: 600;
    }
    .hotel .section3 {
    margin-left: 1vw;
    text-align: center;
}

.ui-accordion .ui-accordion-header .accordion-arrow {
    transform: rotate(180deg);
    border-top: 5px solid #000;
    border-bottom: 7px solid #FFFFFF;
    margin-top: 1px;
    margin-right: 20px;
}
.ui-accordion-header {
    border: 1px solid black;
    padding: 10px;
    border-radius: 10px;
    width: 77vw;
    height: 7vw;
    padding-top: 4vw;
    font-size: 15px;
}

.breadc {
    width: var(--programi-width);
    margin: var(--landing-margin);
    margin-top: 30vw;
    margin-bottom: 18vw;
    text-align:center;
}

.kontakt-main .main h1 {
    color: var(--tplava);
    font-weight: 600;
    font-size: 25px;
    margin-left: 5px;
    margin: var(--landing-margin);
    width: var(--programi-width);
    margin-top: 7vw;
    margin-bottom:7vw;
}
.rent-a-car-form {
    margin-left: 8vw;
    margin-top: 2vw;
    width: 83vw;
    box-shadow: var(--shadow);
    padding: 2vw;
}

.rent-a-car-form .double span input {
    width: 36vw;
    height: 12vw;
    color: #BDBDBD;
    font-size: 12px;
    font-weight: 400;
    border-radius: 25px;
    border: 1px solid #BDBDBD;
    padding-left: 1vw;
    margin-bottom: 4vw;
    margin-top: 20px;
}
.rent-a-car-form .double span label, .rent-a-car-form label {
    width: 15vw;
    height: 3vw;
    border-radius: 25px;
    color: var(--tplava);
    font-size: 15px;
    font-weight: 600;
}

.custom-button {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    background-color: var(--pink);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
    margin-top: 1.5vw;
    justify-content: center;
    margin-left: 1vw;
    height: 10vw;
    font-family: 'Poppins';
    font-weight: 600;
}


.kontakt-main {
    display: block;
    margin: var(--landing-margin);
    width: var(--programi-width);
}


.kontakt-main .asidek form span input {
    width: 43vw;
    height: 12vw;
    padding-left: 1vw;
    border: 1px solid #BDBDBD;
    border-radius: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
}
.kontakt-main .asidek form button {
    width: 37vw;
    height: 12vw;
    background-color: var(--pink);
    border: 1px solid var(--pink);
    color: white;
    border-radius: 10px;
    margin-top: 0vw;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
    display: block;
}
.kontakt-main .asidek form span input:nth-child(2) {
    margin-left: 0vw;
}
.kontakt-main .asidek form textarea {
    width: 84.3vw;
    height: 11vw;
    padding-left: 1vw;
    padding-top: 1vw;
    border: 1px solid #BDBDBD;
    border-radius: 10px;
    margin-top: 1vw;
    font-family: "Poppins", sans-serif;
    font-size: 13px;
    font-weight: 600;
}

   .summer-2024k span {
    display: flex;
    /* margin: auto; */
    width: 68vw;
}
.summer-2024k span .pinkline {
    width: 42vw;
}

.main h1 .socials{
    margin-top:8vw;
}

.avio-karte-form .basic span input:nth-child(2) {
    width: 32vw;
    height: 10vw;
    padding-left: 1vw;
    border: 1px solid #BDBDBD;
    border-radius: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 400;
    margin-top: 1vw;
    margin-bottom: 1vw;
}
.avio-karte-form .basic span:nth-child(2) input {
    width: 32vw;
    height: 10vw;
    padding-left: 1vw;
    border: 1px solid #BDBDBD;
    border-radius: 10px;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 400;
    margin-top: 1vw;
    margin-bottom: 1vw;
    margin-left: 1vw;
}

.direction {
    height: 100%;
    display: block;
}
.direction input {
    margin-top: 3.2vw;
    display: block;
    margin-left: 2vw;
    margin-bottom: 4vw;
}

.form-block {
    flex: 1 1 40%;
    min-width: 100px;
    max-width: 226px;
    height: 3vw;
    margin-left: 10px;
}

.avio-ticket-form {
    background: #fff;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2vw;
    height: 56vw;
}

.form-block select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 9vw;
    border: 1px solid var(--pink);
}

.form-block input {
    width: 88%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 2vw;
    border: 1px solid var(--pink);
}
.inn {
    display: block;
    width: 58vw;
    height: 11vw;
    color: #BDBDBD;
    font-size: 13px;
    font-weight: 400;
    border-radius: 25px;
    border: 1px solid #BDBDBD;
    padding-left: 1vw;
    font-family: 'Poppins';
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.rent-a-car-form textarea {
    display: block;
    width: 74vw;
    height: 22vw;
    color: #BDBDBD;
    font-size: 13px;
    font-weight: 400;
    border-radius: 25px;
    border: 1px solid #BDBDBD;
    padding-left: 1vw;
    padding-top: 1vw;
    font-family: 'Poppins';
    margin-top: 1vw;
}
#pret{
    width:85vw;
}
.gmsection22 {
    width: 100%;
    height: 99%;
    display: block;
}
.gallery-masonry .gmsection2 .gmsection22 img:nth-child(2) {
    margin-left: 0px;
    border-radius: 0 0 15px 0;
}
.program-naslov {
    font-family: 'Poppins';
    font-weight: 600;
    font-size: 5.6vw;
    color: #231D3E;
}
.gmsection2 {
    width: 60%;
    height: 100%;
}
.responsive-image {
  max-width: 100%;
  height: auto;
}
.program-detalji{
    padding-right:9vw;
}
.program-kartica-datum{
    padding: 7px;
    margin-bottom: 7vw;
    font-size:3.33vw;
}
.image-kartica span {
    height:26px;
}

.main-card .info{
    margin-bottom: 3vw;
}
.info span span h3 {
    margin: 0;
    font-size: 13px;
    color: #828282;
    font-weight: 400;
    margin-top: 6px;
}
.main .about h1{
    font-weight:700;
    color: #231D3E;
    font-family:'Poppins';

}
.main .about p{
    font-family: Poppins;
font-size: 13px;
font-weight: 400;
line-height: 29px;
text-align: left;
color:#4F4F4F;



}


.aviotekst {
    width: var(--programi-width);
    /* margin: var(--landing-margin); */
    width: 88vw;
    /* margin: auto; */
    /* padding-right: 0vw; */
    margin-left: 8vw;
    margin-bottom: 20vw;
    font-family: 'Poppins';
    color: #4f4f4f;
    line-height: 35px;
}

.formavaucer {
    display: block;
}
.vaucertekst {
    padding-left: 10vw;
    padding-right: 6vw;
    line-height: 35px;
    color: #4f4f4f;
    font-family: 'POPPINS';
}


  


}

    /* Stil za pop-up prozor */
.popup {
    display: none; /* Skriveno po defaultu */
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.5);
}

.popup-content2 {
    background-color: #fff;
    margin: 15% auto;
    
   
    width: 90%;
    max-width: 767px;
}

.popup-header {
    display: flex;
    justify-content: stretch;
    align-items: center;
    border-bottom: 1px solid #ccc;
    padding: 10px;
    
    box-shadow: 4px 4px 6.1px rgba(0,0,0,0.5);
}
.popup-body{
    padding: 25px;
    box-sizing: border-box;
    background-color: #FAFAFA;
}

.popup-header h2 {
    margin: 0;
    margin-left: 300px;
    color: #231D3E;
    font-weight: 600;
    font-size: 16px;
}

.close-btn {
    font-size: 28px;
    cursor: pointer;
}

/* Mobilni uređaji (manje od 768px širine) */
@media screen and (max-width: 767px) {
    
    .gif-overlay {
  position: absolute;
  left: 54%;
  top: 27%;
  transform: translate(-50%, -50%);
  z-index: 9;
  pointer-events: none; /* omogućava klikove kroz overlay; ukloni ako želiš da blokira */
  display: flex;
  align-items: center;
  justify-content: center;
}

.gif-overlay img {
  max-width: 16vw;
  max-height: 80vh;
  width: auto;
  height: auto;
  display: block;
}


.image-kartica .kartica-overlay span {
    display: flex;
    background-color: #FF5DB5;
    height: 18px;
    margin-top: 0px;
    position: absolute;
    padding-top: 1.42vw;
    padding-left: 2vw;
    padding-right: 2vw;
    border-radius: 14px;
    right: 0;
    font-size: 13px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    justify-content: center;
    
    
    
    
}
    .popup-content2 {
        width: 100%;
        max-width: 100%;
        margin: 0;
        top: 0;
        height: 100%;
        overflow-y: auto;
        margin-top: 25vw;
    }

    .popup-header {
        padding: 10px;
    }

    .popup-body {
        padding: 10px;
    }
    .popup-header h2 {
    margin: 0;
    margin-left: 135px;
    color: #231D3E;
    font-weight: 600;
    font-size: 16px;
}
}


    












/* Program badges: public code + Last minute */
.program-last-minute-badge{position:absolute;left:12px;top:14px;z-index:3;display:inline-flex;padding:7px 11px;border-radius:999px;background:#231d3e;color:#fff;font:800 11px/1 Poppins,Arial,sans-serif;letter-spacing:.07em;box-shadow:0 8px 18px rgba(35,29,62,.2)}.program-public-code{margin-top:5px;color:#8a8493;font:600 11px/1.4 Poppins,Arial,sans-serif}.program-public-code strong{color:#231d3e}.program-last-minute-badge+span{margin-top:15px}
@media(max-width:768px){.side-nav .mobile-nav-row{display:flex;align-items:stretch;border-top:1px solid #BDBDBD}.side-nav .mobile-nav-row .nav-link{flex:1;border-top:0!important;padding-top:4vw;min-width:0}.side-nav .mobile-submenu-toggle{width:54px;flex:0 0 54px;border:0;border-left:1px solid rgba(255,255,255,.12);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}.side-nav .mobile-submenu-toggle .arrow{margin:0;width:18px;height:18px;object-fit:contain;transition:transform .3s}.side-nav .has-submenu.open .mobile-submenu-toggle .arrow{transform:rotate(-90deg)}}
.public-search-select{position:relative;width:100%}.public-search-select__native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.public-search-select__panel{position:absolute;z-index:5000;left:0;right:0;top:calc(100% + 6px);max-height:290px;overflow:auto;background:#fff;border:1px solid #e4dfeb;border-radius:12px;box-shadow:0 18px 45px rgba(35,29,62,.16);padding:6px}.public-search-select__option{display:block;width:100%;border:0;background:#fff;text-align:left;padding:11px 12px;border-radius:8px;font:inherit;color:#302b3e;cursor:pointer}.public-search-select__option:hover,.public-search-select__option.is-selected{background:#fff0f8;color:#231d3e}.public-search-select__empty{padding:12px;color:#777184;font-size:13px}.public-search-select__input.is-invalid{border-color:#d53f4f!important;box-shadow:0 0 0 3px rgba(213,63,79,.12)!important}


/* Final frontend polish: Last minute must remain visible regardless of image cropping. */
.program-last-minute-inline{display:none;align-items:center;width:max-content;margin:0 0 7px;padding:6px 10px;border-radius:999px;background:#ff5db5;color:#fff;font:800 10px/1 Poppins,Arial,sans-serif;letter-spacing:.07em;text-transform:uppercase;box-shadow:0 6px 14px rgba(255,93,181,.18)}
.program-last-minute-badge{background:#ff5db5!important;color:#fff!important}


/* Mobile: scrollbar ne smije ostavljati bijeli gutter desno */
@media only screen and (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        scrollbar-width: none;      /* Firefox */
        -ms-overflow-style: none;   /* stari Edge */
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    header,
    .header-single2,
    .header-slider-mobile,
    .slide-slider-header-mobile,
    .header-line-mobile {
        width: 100%;
        max-width: 100%;
    }
}



@media only screen and (max-width: 768px) {
    .scrolling-text-container {
        position: static !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100%;
        z-index: auto;
    }
}



/* ========================================
   CITY TRAVEL - PROGRAM PAGINATION
======================================== */

.city-pagination {
    width: var(--programi-width);
    margin: 15px auto 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
}

.city-pagination__button {
    width: 44px;
    height: 44px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(35, 29, 62, 0.15);
    border-radius: 12px;

    background: #fff;
    color: var(--tplava);

    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease,
        box-shadow .2s ease;
}

.city-pagination__button:hover:not(:disabled) {
    background: rgba(255, 93, 181, 0.08);
    border-color: var(--pink);
    color: var(--pink);

    transform: translateY(-2px);

    box-shadow:
        0 7px 18px rgba(35, 29, 62, 0.08);
}

.city-pagination__button.is-active {
    background: var(--pink);
    border-color: var(--pink);
    color: #fff;

    box-shadow:
        0 7px 20px rgba(255, 93, 181, 0.28);
}

.city-pagination__arrow {
    background: var(--tplava);
    border-color: var(--tplava);
    color: #fff;

    font-size: 25px;
    font-weight: 400;
}

.city-pagination__arrow:hover:not(:disabled) {
    background: var(--pink);
    border-color: var(--pink);
    color: #fff;
}

.city-pagination__button:disabled {
    opacity: .28;
    cursor: default;
}

.city-pagination__dots {
    width: 30px;
    text-align: center;

    color: #9993a5;
    font-size: 12px;
    letter-spacing: 2px;
}


/* MOBILE */

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

    .city-pagination {
        width: 90vw;
        margin-top: 8vw;
        margin-bottom: 12vw;
        gap: 6px;
    }

    .city-pagination__button {
        width: 40px;
        height: 40px;

        border-radius: 10px;
        font-size: 13px;
    }

    .city-pagination__arrow {
        font-size: 23px;
    }
}




.program-kartica {
    position: relative;
    overflow: hidden;
}

.program-new-ribbon {
    position: absolute;
    right: -35px;
    bottom: 22px;

    width: 140px;
    padding: 8px 0;

    background: #FF5DB5;
    color: #fff;

    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-align: center;

    transform: rotate(-45deg);

    z-index: 50;
    pointer-events: none;

    box-shadow: 0 5px 16px rgba(255, 93, 181, 0.35);
}


@media only screen and (max-width: 768px) {
    .program-new-ribbon {
        right: -32px;
        bottom: 20px;
        width: 130px;
        padding: 7px 0;
        font-size: 10px;
    }
}




/* =========================================================
   SINGLE PROGRAM - GALERIJA FIX
   uredan prikaz za 1, 2, 3 i vise slika
   ========================================================= */

@media (min-width: 769px) {

    .gallery-masonry {
        display: grid;
        grid-template-columns: minmax(0, 2.25fr) minmax(240px, 1fr);
        gap: 12px;
        width: 84vw;
        height: clamp(380px, 38vw, 600px);
        margin: auto;
    }

    .gallery-masonry .gmsection1,
    .gallery-masonry .gmsection2 {
        width: auto;
        height: 100%;
        margin: 0;
        min-width: 0;
        min-height: 0;
    }

    .gallery-masonry .gmsection1 {
        overflow: hidden;
        border-radius: 15px 0 0 15px;
    }

    .gallery-masonry .gmsection1 img {
        width: 100% !important;
        height: 100% !important;
        display: block;
        object-fit: cover;
        border-radius: 15px 0 0 15px;
    }

    /* desna kolona */
    .gallery-masonry .gmsection2 {
        display: grid;
        grid-template-rows: 1fr 1fr;
        gap: 12px;
    }

    .gallery-masonry .gmsection21,
    .gallery-masonry .gmsection22 {
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: hidden;
    }

    .gallery-masonry .gmsection21 img {
        width: 100% !important;
        height: 100% !important;
        display: block;
        object-fit: cover;
        border-radius: 0 15px 0 0;
    }



    .gallery-masonry .gmsection22 img {
        width: 100% !important;
        height: 100% !important;
        min-width: 0;
        display: block;
        object-fit: cover;
        border-radius: 0 !important;
    }

    .gallery-masonry .gmsection22 img:last-child {
        border-radius: 0 0 15px 0 !important;
    }

    /* ako je samo jedna slika dole */
    .gallery-masonry .gmsection22 img:only-child {
        grid-column: 1 / -1;
        border-radius: 0 0 15px 0 !important;
    }

    /* ako postoje ukupno samo 2 slike:
       glavna + jedna desno */
    .gallery-masonry .gmsection2:not(:has(.gmsection22 img)) {
        grid-template-rows: 1fr;
    }

    .gallery-masonry .gmsection2:not(:has(.gmsection22 img)) .gmsection21 img {
        border-radius: 0 15px 15px 0;
    }

    /* ako postoji samo glavna slika */
    .gallery-masonry:not(:has(.gmsection2 img)) {
        grid-template-columns: 1fr;
    }

    .gallery-masonry:not(:has(.gmsection2 img)) .gmsection2 {
        display: none;
    }

    .gallery-masonry:not(:has(.gmsection2 img)) .gmsection1,
    .gallery-masonry:not(:has(.gmsection2 img)) .gmsection1 img {
        border-radius: 15px;
    }
}





/* =========================================================
   NOVO! - kosi banner na novim programima
   ========================================================= */

.program-kartica {
    position: relative;
    overflow: hidden;
}

.program-new-ribbon {
    
   
    position: absolute;
    right: -35px;
    bottom: 22px;

    width: 140px;
    padding: 8px 0;

    background: #FF5DB5;
    color: #fff;

    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-align: center;

    transform: rotate(-45deg);

    z-index: 50;
    pointer-events: none;

    box-shadow: 0 5px 16px rgba(255, 93, 181, 0.35);
}










/* =========================================================
   SINGLE PROGRAM - DESNE SLIKE FIKSNI CROP
   ========================================================= */

@media (min-width: 769px) {

    .gallery-masonry .gmsection2 {
        height: 100%;
        display: grid;
        grid-template-rows: 1fr 1fr;
        gap: 12px;
        overflow: hidden;
    }

    .gallery-masonry .gmsection21,
    .gallery-masonry .gmsection22 {
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow: hidden;
        position: relative;
    }

    .gallery-masonry .gmsection21 img,
    .gallery-masonry .gmsection22 img {
        width: 100% !important;
        height: 100% !important;

        display: block;

        object-fit: cover !important;
        object-position: center center;

        margin: 0 !important;
    }

    .gallery-masonry .gmsection21 {
        border-radius: 0 15px 0 0;
    }

    .gallery-masonry .gmsection22 {
        border-radius: 0 0 15px 0;
    }

    .gallery-masonry .gmsection21 img {
        border-radius: 0 !important;
    }

    .gallery-masonry .gmsection22 img {
        border-radius: 0 !important;
    }
}




/* =========================================================
   SINGLE PROGRAM - HERO GALERIJA
   glavna slika + 2 fiksne slike desno
   ========================================================= */

@media (min-width: 769px) {

    .program-gallery {
        width: 80vw;
        height: clamp(420px, 38vw, 600px);
        margin: 0 auto;

        display: grid;
        grid-template-columns: minmax(0, 2.3fr) minmax(260px, 1fr);
        gap: 12px;

        overflow: hidden;
    }

    /* velika lijeva slika */
    .program-gallery__main {
        width: 100%;
        height: 100%;
        min-width: 0;

        display: block;
        object-fit: cover;
        object-position: center;

        border-radius: 15px 0 0 15px;
    }

    /* desna kolona - UVIJEK dvije jednake zone */
    .program-gallery__side {
        width: 100%;
        height: 100%;
        min-width: 0;

        display: grid;
        grid-template-rows: repeat(2, minmax(0, 1fr));
        gap: 12px;

        overflow: hidden;
    }

    /* bilo portrait, square ili landscape */
    .program-gallery__side img {
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;

        display: block;

        object-fit: cover;
        object-position: center;

        overflow: hidden;
    }

    .program-gallery__side img:first-child {
        border-radius: 0 15px 0 0;
    }

    .program-gallery__side img:last-child {
        border-radius: 0 0 15px 0;
    }
}





/* =========================================================
   SINGLE PROGRAM - STABILNA GALERIJA
   ========================================================= */

.program-gallery {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;

    display: grid !important;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) !important;
    gap: 10px;

    aspect-ratio: 16 / 9;

    margin-left: auto;
    margin-right: auto;

    box-sizing: border-box;
    overflow: hidden;
    border-radius: 15px;
}

/* velika lijeva slika */
.program-gallery__main {
    width: 100% !important;
    height: 100% !important;

    min-width: 0;
    min-height: 0;

    display: block;

    object-fit: cover !important;
    object-position: center center !important;
}

/* desna kolona */
.program-gallery__side {
    width: 100% !important;
    height: 100% !important;

    min-width: 0;
    min-height: 0;

    display: grid !important;
    grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;

    overflow: hidden;
}

/* obje desne slike imaju IDENTIČAN okvir */
.program-gallery__side img {
    width: 100% !important;
    height: 100% !important;

    min-width: 0;
    min-height: 0;

    display: block;

    object-fit: cover !important;
    object-position: center center !important;
}

/* manji ekrani */
@media only screen and (max-width: 768px) {

    .program-gallery {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;
        gap: 6px;

        aspect-ratio: 16 / 10;
    }

    .program-gallery__side {
        gap: 6px;
    }
}



/* =========================================================
   SINGLE PROGRAM GALERIJA - MOBILE FIX
   dvije desne slike uvijek jedna ispod druge
   ========================================================= */

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

    .program-gallery {
        width: 100% !important;
        max-width: 100% !important;

        display: grid !important;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) !important;

        gap: 6px !important;

        aspect-ratio: 16 / 10;
        overflow: hidden;
    }

    .program-gallery__main {
        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        object-fit: cover !important;
        object-position: center !important;

        display: block !important;
    }

    .program-gallery__side {
        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        display: grid !important;

        /* KLJUČNO */
        grid-template-columns: 1fr !important;
        grid-template-rows: repeat(2, minmax(0, 1fr)) !important;

        gap: 6px !important;

        overflow: hidden !important;
    }

    .program-gallery__side img {
        width: 100% !important;
        height: 100% !important;

        min-width: 0 !important;
        min-height: 0 !important;

        display: block !important;

        object-fit: cover !important;
        object-position: center center !important;

        margin: 0 !important;
    }
}



.scrolling-text {
    animation-duration: 40s !important;
}


.destination-hero {
    position: relative;
    width: 100%;
    height: clamp(340px, 34vw, 520px);
    margin-top: 8vw;
    overflow: hidden;
    background: #231d3e;
}


.destination-hero h1 {
    z-index: 2;
    top: 50%;
    left: 50%;
    width: min(86%, 980px);
    margin: 0;
    transform: translate(-50%, -50%);
    font-size: clamp(34px, 5vw, 76px);
    line-height: 1.08;
    text-shadow: 0 4px 24px rgba(0, 0, 0, .28);
}









.itinerary-day strong{
    font-weight:600;
}