html { scroll-behavior: smooth; }
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: "Roboto Condensed", Arial, sans-serif;
  font-style: normal; font-weight: 400; line-height: 1.5;
  color: #333; background-color: #fff;
  opacity: 0; transition: opacity 0.6s ease-in-out;
}
body.loaded { opacity: 1; }

/* NAVBAR */
nav {
  background: #ffffff; padding: 15px 30px; position: relative; top: 0; z-index: 100;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.navbar-container {
  max-width: 1600px; margin: auto; padding-inline: 60px;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: nowrap;
}
.logo img { height: 55px; }
@media (max-width: 480px){ .logo img { height: 45px; }}

/* Hamburger */
.menu-toggle { display: none; width: 30px; height: 22px; position: relative; cursor: pointer; z-index: 101; }
.menu-toggle span { position: absolute; height: 3px; width: 100%; background: #1b3b6f; border-radius: 2px; left:0; transition: all 0.3s; }
.menu-toggle span:nth-child(1){ top: 0; }
.menu-toggle span:nth-child(2){ top: 9px; }
.menu-toggle span:nth-child(3){ top: 18px; }
.menu-toggle.active span:nth-child(1){ transform: rotate(45deg); top: 9px; }
.menu-toggle.active span:nth-child(2){ opacity: 0; }
.menu-toggle.active span:nth-child(3){ transform: rotate(-45deg); top: 9px; }

/* Nav links */
.nav-links { display: flex; gap: 25px; align-items: center; white-space: nowrap; }
.nav-links a { color: #5e6366; text-decoration: none; font-size: 16px; text-transform: uppercase; transition: all 0.3s; }
.cta-button {
  background: transparent; color: #5e6366; padding: 8px 20px; border: 2px solid #5e6366;
  border-radius: 25px; font-weight: 700; text-decoration: none; text-transform: uppercase; transition: all 0.3s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
@media (min-width: 1025px){
  .nav-links a:hover { color: #2d9cdb; transform: scale(1.05); }
  .cta-button:hover { background: #1b3b6f; color:#fff; transform: scale(1.05); }
}

/* Mobile nav */
@media (max-width: 1024px){
  .navbar-container { flex-direction: column; align-items: stretch; padding-inline: 20px; }
  .menu-toggle { display: block; }
  .top-bar { width: 100%; display: flex; justify-content: space-between; align-items: center; }
  .nav-links {
    display: none; flex-direction: column; position: absolute; top: 100%; left: 0; width: 100%;
    background: #ffffff; padding:0; gap:0; text-align:left; border-top: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); opacity:0; transform: translateY(-10px);
    transition: all 0.3s; z-index: 99;
  }
  .nav-links.active { display:flex; opacity:1; transform: translateY(0); }
  .nav-links a { width: 100%; padding: 18px 20px; font-size: 16px; border-bottom: 1px solid #f0f0f0; }
  .cta-button { display:block; width:100%; padding:18px 20px; border-radius:0; border:none; background: transparent; text-align:left; }
  .nav-links a, .cta-button { transition: none !important; }
  .nav-links a:active, .cta-button:active { background-color: rgba(27,59,111,0.05); }
}

/* HERO VIDEO */
.hero-video { position: relative; width:100%; height: 90.7vh; overflow:hidden; display:flex; align-items:center; justify-content:center; }
.hero-video video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:0; }
.hero-video .overlay { position:absolute; inset:0; background: rgba(80,80,80,0.3); z-index:1; }

@media (max-width: 1024px){ .hero-video{ height:70vh; } }
@media (max-width: 768px){ .hero-video{ height:60vh; } }
@media (max-width: 480px){ .hero-video{ height:50vh; } }

.scroll-down-indicator {
  position:absolute; bottom:28px; left:50%; transform: translateX(-50%); z-index:2;
  opacity:1; transition: opacity 0.6s, transform 0.6s;
  pointer-events:auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px;
}
.scroll-down-indicator.hidden { opacity:0; pointer-events:none; transform: translateX(-50%) translateY(10px); }
.scroll-line { display:flex; align-items:center; gap:16px; }
.scroll-line::before, .scroll-line::after { content:""; display:block; height:1.1px; width:100px; background:#fff; opacity:.4; }
.scroll-text { font-family:"Roboto Condensed"; font-size:17px; text-transform:uppercase; letter-spacing:3px; color:#fff; opacity:.7; }
.arrow-only { width:12px; height:12px; border-left:1.5px solid #fff; border-bottom:1.5px solid #fff; transform: rotate(-45deg); animation: pulseArrow 1.8s infinite ease-in-out; opacity:.7; }
@keyframes pulseArrow { 0%,100%{ transform: rotate(-45deg) scale(1);} 50%{ transform: rotate(-45deg) scale(1.2);} }
@media (max-width: 768px){ .scroll-line::before, .scroll-line::after{ width:36px;} .scroll-text{ font-size:16px;} .arrow-only{ width:18px; height:18px;} }
@media (max-width: 480px){ .scroll-line::before, .scroll-line::after{ width:26px;} .scroll-text{ font-size:14px;} .arrow-only{ width:12px; height:12px;} .scroll-down-indicator{ display:none;} }

/* INTRO TEXT */
.intro-text { background:#6c7a89; color:#fff; padding:80px 20px; text-align:center; display:flex; align-items:center; justify-content:center; }
.text-wrapper {
  max-width:950px; margin:0 auto; font-family:"Playfair Display", serif; font-size:1.5rem; line-height:1.75; font-style:italic; color:#f1f1f1;
  letter-spacing:.15px; padding:0 15px; opacity:0; transform: translateY(20px); transition: opacity 1.3s ease-out, transform 1.4s ease-out;
}
.text-wrapper.visible { opacity:1; transform: translateY(0); }
@media (max-width: 1024px){ .text-wrapper{ font-size:1.3rem; } }
@media (max-width: 768px){ .text-wrapper{ font-size:1.2rem; } }
@media (max-width: 480px){ .text-wrapper{ font-size:1rem; } }

.book-now-btn {
  display:inline-block; margin-top:2.5rem; padding:12px 32px; font-family:"Roboto Condensed", sans-serif; font-size:1.1rem; font-weight:600;
  text-transform:uppercase; color:#fff; background: rgba(30,85,180,0.2); backdrop-filter: blur(8px); border:1px solid rgba(255,255,255,0.2);
  border-radius:32px; box-shadow:0 6px 16px rgba(0,50,100,0.15); text-decoration:none; transition: all 0.3s;
}
.book-now-btn:hover { background: rgba(30,85,180,0.4); box-shadow:0 8px 20px rgba(0,50,100,0.25); transform: translateY(-2px) scale(1.03); }
.book-now-btn:active { transform: scale(0.97); box-shadow:0 4px 12px rgba(0,50,100,0.15); }
@media (max-width: 768px){ .book-now-btn{ padding:10px 28px; } }
@media (max-width: 480px){ .book-now-btn{ padding:8px 24px; font-size:.95rem; } }

/* SCROLL TO TOP */
.scroll-to-top {
  position:fixed; bottom:30px; right:30px; width:48px; height:48px; border-radius:50%;
  background:#1b3b6f; color:#fff; border:none; font-size:22px; cursor:pointer; opacity:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center; box-shadow:0 4px 12px rgba(0,0,0,0.15); z-index:999; transition: opacity .4s, transform .3s;
}
.scroll-to-top.visible { opacity:1; pointer-events:auto; }
.scroll-to-top:hover { background:#2d9cdb; transform: scale(1.1); }
@media (max-width: 480px){ .scroll-to-top{ bottom:20px; right:20px; width:40px; height:40px; font-size:18px; } }

/* CONTACT MODAL */
.contact-modal {
  display:none; position:fixed; inset:0; width:100%; height:100%; background: rgba(0,0,0,0.6);
  justify-content:center; align-items:center; z-index:9999;
}
.contact-modal.active { display:flex; }
.contact-modal-content {
  background:#fff; padding:40px 25px; border-radius:8px; width:100%; max-width:460px; text-align:center;
  box-shadow:0 10px 40px rgba(0,0,0,0.2); position:relative; animation: scaleIn .4s ease;
}
@keyframes scaleIn { from{ transform: scale(.9); opacity:0;} to{ transform: scale(1); opacity:1;} }
.contact-modal-content h2 { margin-bottom:15px; color:#1b3b6f; }
.contact-modal-content p { margin:10px 0; color:#333; font-size:16px; }
.contact-modal-content a { color:#2d9cdb; text-decoration:none; }
.contact-modal-content a:hover { color:#1b3b6f; }
.map-container { margin-top:20px; border-radius:10px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,0.1); height:350px; }
.map-container iframe { width:100%; height:100%; border:none; }
.social-icons { margin-top:20px; display:flex; justify-content:center; gap:24px; }
.close-btn { position:absolute; right:15px; top:15px; font-size:26px; color:#aaa; cursor:pointer; transition: color .3s; }
.close-btn:hover { color:#000; }
body.modal-open { overflow:hidden; }
body.modal-open::before { content:""; position:fixed; inset:0; backdrop-filter: blur(5px); background: rgba(0,0,0,0.2); z-index:9998; animation: fadeInBlur .3s ease-out forwards; opacity:0; }
@keyframes fadeInBlur { to{ opacity:1; } }
.divider { border:none; height:1px; background:#ccc; margin:15px 0; opacity:.5; }
.contact-modal-content svg { vertical-align: middle; margin-right:8px; margin-top:-2px; }

/* CAROUSEL */
.carousel-container { position:relative; overflow:hidden; max-width:1200px; margin:60px auto; }
.carousel-track { display:flex; transition: transform .5s ease-in-out; will-change: transform; cursor: grab; }
.carousel-track.dragging { cursor: grabbing; }
.carousel-slide { margin-top:40px; min-width: calc(100% / 3); padding:10px; opacity:0; transform: translateY(20px); transition: opacity .6s, transform .6s; }
.carousel-slide.fade-in { opacity:1; transform: translateY(0); }
.carousel-slide img { width:100%; height:300px; object-fit:cover; border-radius:12px; box-shadow:0 6px 20px rgba(0,0,0,0.15); display:block; }
.carousel-slide:hover img { transform: scale(1.03); transition: transform .3s; }
.carousel-dots { display:flex; justify-content:center; align-items:center; margin-top:25px; gap:12px; height:20px; }
.carousel-dots span { width:13px; height:13px; background:#bbb; border-radius:50%; cursor:pointer; transition: background .3s, transform .3s; display:inline-block; }
.carousel-dots span.active { background:#1b3b6f; transform: scale(1.2); }

@media (max-width: 1024px){ .carousel-slide{ min-width: calc(100% / 2); } }
@media (max-width: 768px){ .carousel-slide{ min-width: 100%; } .carousel-slide img{ height:240px; } }
.carousel-title { text-align:center; font-size:2rem; font-weight:600; margin-bottom:30px; color:#1b3b6f; font-family:'Roboto Condensed', sans-serif; }
@media (max-width: 768px){ .carousel-title{ font-size:1.5rem; margin-bottom:20px; } }
.carousel-subtitle { font-size:1.1rem; font-weight:400; color:#444; text-align:center; margin-top:8px; max-width:700px; margin-inline:auto; font-family:'Roboto', sans-serif; line-height:1.5; }

/* PARALLAX */
.parallax-section {
  position:relative; background-image:url('../slike/slikaPocetnaSmall_mark3.jpeg'); background-attachment: fixed; background-size:cover; background-position:center;
  height:55vh; display:flex; justify-content:center; align-items:center; text-align:center;
}
.parallax-overlay { background: rgba(0,0,0,0.5); padding:20px; max-width:700px; width:100%; text-align:center; }
.parallax-overlay h2 { font-size:2.2em; color:#fff; font-weight:bold; margin-bottom:10px; line-height:1.2; }
.parallax-overlay p { color:#fff; font-size:1.2em; margin-bottom:20px; line-height:1.5; }
.cta-button2 { background:#0066cc; padding:12px 30px; color:#fff; text-decoration:none; border-radius:5px; font-size:1.2em; font-weight:bold; transition: all .3s; display:inline-block; }
.cta-button2:hover { background:#004a99; transform: scale(1.05); }

/* LOCATION SECTION */
.location-section { text-align:center; margin:50px auto; max-width:1200px; padding:0 20px; animation: revealLocationSection 1s ease-out; }
.location-section h2 { font-size:2.2rem; color:#1b3b6f; margin-bottom:20px; }
.location-section p { font-size:1.1rem; color:#444; margin-bottom:30px; max-width:800px; margin-inline:auto; line-height:1.6; padding-bottom:30px; }
.location-map { opacity:0; transition: opacity 1s ease-out; margin-bottom:30px; }
.location-map.visible { opacity:1; }
.location-map img { width:100%; max-width:1000px; border-radius:8px; box-shadow:0 6px 15px rgba(0,0,0,0.1); transition: all .3s; cursor: zoom-in; }
.location-map img:hover { transform: scale(1.05); }

/* FOOTER */
footer { background:#f2f2f2; padding:80px 0; color:#333; border-top:1px solid #e0e0e0; }
.footer-container { display:flex; justify-content:space-between; gap:50px; max-width:1200px; margin:0 auto; flex-wrap:wrap; }
.footer-section { flex:1 1 30%; min-width:280px; padding:25px; text-align:left; }
.footer-section h3 { font-size:1.7rem; font-weight:700; margin-bottom:20px; color:#1b3b6f; }
.footer-section p, .footer-section a { font-size:1.1rem; line-height:1.6; color:#333; margin-bottom:12px; }
.footer-section a { text-decoration:none; transition: color .3s; }
.footer-section a:hover { color:#0066cc; }
.social-media { display:flex; justify-content:center; gap:25px; margin-top:30px; }
.social-media a { display:inline-flex; justify-content:center; align-items:center; width:50px; height:50px; transition: transform .3s; }
.social-media a:hover { transform: scale(1.15); }
footer iframe { width:100%; height:350px; border:none; }
.footer-bottom { text-align:center; margin-top:50px; font-size:1.1rem; color:#666; }
.footer-logo { max-width:150px; margin-bottom:20px; }

@keyframes revealLocationSection { 0%{ opacity:0; transform: translateY(100px);} 100%{ opacity:1; transform: translateY(0);} }

/* MAP LIGHTBOX (zoom on click) */
.map-lightbox {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,0.8); z-index: 10000;
}
.map-lightbox.active { display: flex; }
.map-lightbox img {
  max-width: min(1200px, 92vw); max-height: 90vh; width: auto; height: auto;
  border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.map-lightbox-close {
  position: absolute; top: 14px; right: 18px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,0.9); color: #333; font-size: 26px; line-height: 40px; text-align: center; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.map-lightbox-close:hover { background: #fff; }

/* Overlay + layout */
.contact-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background-color: rgba(0,0,0,.6);
  justify-content: center;
  align-items: center;
}
.contact-modal.active { display: flex; }

.contact-modal-content {
  background: #fff;
  padding: 40px 25px;
  border-radius: 8px;
  width: 100%;
  max-width: 460px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
  position: relative;
  animation: scaleIn .4s ease;
}

@keyframes scaleIn {
  from { transform: scale(.9); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.contact-modal-content h2 { margin-bottom: 15px; color: #1b3b6f; }
.contact-modal-content p  { margin: 10px 0; color: #333; font-size: 16px; }
.contact-modal-content a  { color: #2d9cdb; text-decoration: none; }
.contact-modal-content a:hover { color: #1b3b6f; }

.divider { border: none; height: 1px; background: #ccc; margin: 15px 0; opacity: .5; }

.map-container {
  margin-top: 20px; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.1); height: 350px;
}
.map-container iframe { width: 100%; height: 100%; border: 0; }

.social-icons {
  margin-top: 20px; display: flex; justify-content: center; gap: 24px;
}
.social-icons svg {
  width: 32px; height: 32px; color: #1b3b6f;
  transition: transform .3s ease, color .3s ease;
}
.social-icon:hover svg { transform: scale(1.2); color: #2d9cdb; }

.close-btn {
  position: absolute; right: 15px; top: 15px;
  font-size: 26px; color: #aaa; cursor: pointer; background: none; border: 0;
}
.close-btn:hover { color: #000; }

/* Spriječi scroll pozadine kada je modal otvoren */
body.modal-open { overflow: hidden; }
body.modal-open::before {
  content: ""; position: fixed; inset: 0;
  backdrop-filter: blur(5px); background: rgba(0,0,0,.2);
  z-index: 9998; animation: fadeInBlur .3s ease-out forwards; opacity: 0;
}
@keyframes fadeInBlur { to { opacity: 1; } }

/* Responsive */
@media (max-width: 480px) {
  .contact-modal-content { padding: 25px 15px; border-radius: 6px; }
  .contact-modal-content p { font-size: 14px; }
  .contact-modal-content h2 { font-size: 18px; }
  .map-container { height: 240px; }
  .social-icons svg { width: 38px; height: 38px; }
  .close-btn { font-size: 22px; top: 10px; right: 10px; }
}

/* Poravnaj inline SVG ikone u tekstu */
.contact-modal-content svg { vertical-align: middle; margin-right: 8px; margin-top: -2px; }
/* ===== MOBILE FIXES ===== */
@media (max-width: 480px) {

  /* CONTACT MODAL */
  .contact-modal {
    padding: 10px; /* manje paddinga da modal stane na ekran */
  }
  .contact-modal-content {
    width: 100%;
    max-width: 360px; /* smanjena širina za mobitele */
    padding: 20px;
    margin: 0 auto; /* horizontalno centriranje */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center; /* sve stavke centrirane */
  }
  .map-container { height: 240px; }
  .social-icons {
    flex-direction: row; /* ostaje u jednom redu */
    justify-content: center;
    gap: 16px;
  }
  .social-icons svg { width: 32px; height: 32px; }

  /* FOOTER */
  .footer-container {
    flex-direction: column; /* stack sekcija jedna ispod druge */
    align-items: center; /* centriraj horizontalno */
    text-align: center;
    gap: 20px; /* razmak između sekcija */
    padding: 0 10px;
  }
  .footer-section {
    flex: unset;
    width: 100%;
    max-width: 360px;
    padding: 10px 0;
    text-align: center;
  }
  .social-media {
    justify-content: center;
  }
  .footer-logo { margin: 0 auto 15px; display: block; }

  /* FOOTER BOTTOM */
  .footer-bottom {
    text-align: center;
    font-size: 1rem;
    margin-top: 30px;
  }
}