:root{
  --ink:#151a2d;
  --muted:#6b7280;
  --accent:#6c63ff;
  --accent-soft:#eceaff;
  --pill-bg:#eef0f5;
  --card-radius:18px;
}

body{
  font-family: "Inter", sans-serif;
  color: #171A23;
}

a:link { text-decoration: none; }
a:visited { text-decoration: none; }
a:hover { text-decoration: none; }

h1, h2, h3 {
    font-family: "Sora", sans-serif;
}

.idk_margin_top30 { margin-top: 30px; }
.idk_margin_top50 { margin-top: 50px; }
.idk_margin_top100 { margin-top: 100px; }
.idk_margin_top200 { margin-top: 200px; }

h3 {
    font-size: 26px;
    font-weight: 500;
}



header {
    padding: 30px 0px;
}

.list-inline {
    margin: 0px;
}

.idk_btn_link:link {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid #E5E7EB;
    border-radius: 32px;
    color: #171A23;
    text-decoration: none;
    font-weight: 500;
}

.idk_btn_link:visited {
    color: #171A23;
    border: 1px solid #E5E7EB;
    text-decoration: none;
}

.idk_icon_holder {
    position: relative;
    display: inline-block;
    padding: 12px 16px;
    background-color: #F8F9FA;
    border-radius: 100%;
}

.idk_icon_holder .idk_icon_dot {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    background-color: red;
}

.menu-wrapper {
    position: relative;
    display: inline-block;
}

.custom-menu {
    position: absolute;
    top: calc(100% + 16px);
    right: 0;
    width: 300px;
    background: #fff;
    border-radius: 18px;
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.08),
        0 2px 8px rgba(0, 0, 0, 0.04);
    padding: 18px 25px;
    z-index: 9999;
    display: none;
    text-align: left;
}

.custom-menu.show {
    display: block;
}

.list-group-item img {
    width: 24px;
    height: 24px;
    border-radius: 100%;
    object-fit: cover;
    margin-right: 5px;
}

.list-group-item h3 {
    font-size: 16px;
    font-weight: 700;
}

.list-group-item p {
    font-size: 14px;
    margin: 0px;
}

.modal-title {
    font-size: 18px;
}

.slider-arrow {
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.slider-arrow img {
    display: block;
}

.idk_slider1 {
    margin-top: 20px;
}

.idk_slider2 {
    margin-top: 20px;
}

.idk_slider3 {
    margin-top: 20px;
}

.slick-slide {
    margin-right: 20px;
}

.slick-list {
    margin-left: 0;
    margin-right: 0;
}

.slick-track {
    display: flex;
}

.slick-slide {
    height: auto;
}

.idk_slide_box img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 10px;
}

.idk_slide_box h5 {
    font-size: 20px;
    color: #171A23;
    margin-top: 10px;
    margin-bottom: 0px;
}

.idk_slide_box p {
    font-size: 16px;
    color: #171A23;
}

.idk_section_bg {
    width: 100%;
    height: auto;
    margin-top: 50px;
    padding: 80px 0px;
    background-color: #F7F7F7;
}

.idk_slide_box1 .idk_slide_box1_img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
}

.idk_slide_box1 h5 {
    font-size: 20px;
    color: #171A23;
    margin-top: 10px;
    margin-bottom: 5px;
}

.idk_slide_box1 p {
    font-size: 14px;
    color: #555555;
}

.idk_slide_box1 p {
    display: flex;
    gap: 5px;
}

.idk_slide_box1 p img {
    width: 20px;
    height: 20px;
}

p.idk_text_end {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}

footer {
    width: 100%;
    background-color: #0E1526;
    color: #FFFFFF;
    padding: 50px 0px;
    margin-top: 100px;
    font-size: 14px;
}

footer span {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
}

footer a:link { color: #FFFFFF; }
footer a:visited { color: #FFFFFF; }









































































































/* Važno: parent inputa mora biti relative */
.flex-grow-1 {
    position: relative;
    text-align: left !important;
}


/* DROPDOWN - zaseban floating box */
#locationSuggestions {
    display: none;

    position: absolute;

    /* ispod cijelog search boxa */
    top: calc(100% + 25px);

    /* pozicija dropdowna */
    left: 0;

    width: 420px;
    max-width: calc(100vw - 30px);

    background: #ffffff;

    border: 1px solid #eceef2;
    border-radius: 18px;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.12),
        0 4px 14px rgba(0, 0, 0, 0.05);

    padding: 8px;

    z-index: 99999;
}


/* JEDAN REZULTAT */
.location-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.location-suggestion:hover {
    background: #f6f7f9;
}


/* MALA IKONA - BEZ POZADINE */
.location-suggestion-icon {
    width: 26px;
    height: 26px;
    min-width: 26px;

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

    background: transparent;
}

.location-suggestion-icon svg {
    width: 19px;
    height: 19px;

    stroke: #6c63ff;
}


/* TEKST */
.location-suggestion-content {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.location-suggestion-title {
    font-size: 14px;
    line-height: 1.3;
    font-weight: 600;
    color: #171A23;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.location-suggestion-subtitle {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 400;
    color: #747b87;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* MOBILE */
@media (max-width: 600px) {

    #locationSuggestions {
        left: 0;

        width: 100%;

        top: calc(100% + 15px);

        border-radius: 16px;
    }

}

.hero-section{
  min-height:80vh;
  display:flex;
  align-items:center;
}

.hero-title{
  font-size:clamp(2.4rem, 4.6vw, 3.6rem);
  font-weight:600;
  line-height:1.12;
  letter-spacing:-0.02em;
  margin-bottom:1.3rem;
}

.hero-subtitle{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.6;
  max-width:480px;
  margin-bottom:2.2rem;
  min-height:76px;
}

.tab-group{
  display:flex;
  gap:0.6rem;
  margin-bottom:1.6rem;
  flex-wrap:wrap;
}

.tab-btn{
  display:inline-flex;
  align-items:center;
  gap:0.55rem;
  border:none;
  background:var(--pill-bg);
  color:var(--muted);
  font-weight:500;
  font-size:0.95rem;
  padding:0.55rem 1.1rem 0.55rem 0.6rem;
  border-radius:999px;
  cursor:pointer;
  transition:background .35s ease, color .35s ease, box-shadow .35s ease;
}

.tab-btn .dot{
  width:18px;
  height:18px;
  border-radius:50%;
  background:#d7d9e2;
  flex:0 0 auto;
  transition:background .35s ease, transform .35s ease;
}

.tab-btn.active{
  color:var(--ink);
  background:#fff;
  box-shadow:0 4px 18px rgba(20,20,50,0.08);
}

.tab-btn.active .dot{
  background:var(--accent);
  transform:scale(1.05);
}

.tab-btn:hover{
  color:var(--ink);
}

.search-box{
  display:flex;
  align-items:center;
  gap:0.9rem;
  background:#fff;
  border:1px solid #eef0f5;
  border-radius:20px;
  padding:1rem 1.3rem;
  box-shadow:0 12px 30px rgba(20,20,60,0.06);
  max-width:520px;
  transition:box-shadow .35s ease;
}

.search-box:hover{
  box-shadow:0 16px 36px rgba(20,20,60,0.1);
}

.search-box .icon-wrap{
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--accent-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:var(--accent);
}

.search-box .label{
  font-weight:600;
  font-size:0.95rem;
  margin-bottom:2px;
}

.search-box input{
  border:none;
  outline:none;
  color:var(--muted);
  font-size:0.92rem;
  width:100%;
  background:transparent;
}

.search-box input::placeholder{
  color:#a7abb8;
}

.fade-target{
  transition:opacity .35s ease;
}

.fade-out{
  opacity:0;
}


.collage{
  position:relative;
  display:flex;
  gap:1.4rem;
  justify-content:center;
  align-items:flex-start;
}

.collage-col{
  display:flex;
  flex-direction:column;
  gap:1.4rem;
}

.collage img{
  display:block;
  width:100%;
  object-fit:cover;
  border-radius:var(--card-radius);
  box-shadow:0 20px 45px rgba(20,20,60,0.12);
}

.collage-col .frame:nth-child(1) img{
  height:260px;
}

.collage-col .frame:nth-child(2) img{
  height:260px;
}

.collage-tall img{
  height:556px;
}

.collage-tall{
  align-self:flex-start;
}

.frame{
  transition:opacity .4s ease;
  will-change: transform;
}

@keyframes floatY{
  0%   { transform:translateY(0px); }
  50%  { transform:translateY(-16px); }
  100% { transform:translateY(0px); }
}

.float-a{ animation:floatY 6.5s ease-in-out infinite; }
.float-b{ animation:floatY 7.5s ease-in-out infinite; animation-delay:1.2s; }
.float-c{ animation:floatY 8.5s ease-in-out infinite; animation-delay:0.4s; }

@media (prefers-reduced-motion: reduce){
  .float-a, .float-b, .float-c{ animation:none; }
}

@media (max-width: 991.98px){
  .hero-section{ padding:3rem 0; text-align:center; }
  .hero-subtitle{ margin-left:auto; margin-right:auto; }
  .tab-group{ justify-content:center; }
  .search-box{ margin-left:auto; margin-right:auto; }
  .collage{ margin-top:3rem; }
  .collage-tall img{ height:420px; }
  .collage-col .frame img{ height:200px; }
}

@media (max-width: 767px){
  .idk_margin_top30m { margin-top: 30px; }
}

@media (max-width: 575.98px){
  .collage{ flex-direction:column; align-items:center; }
  .collage-col{ flex-direction:row; width:100%; }
  .collage-col .frame{ flex:1; }
  .collage-col .frame img{ height:150px; }
  .collage-tall{ width:100%; }
  .collage-tall img{ height:260px; }
}