@import url("https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Barlow+Condensed:wght@600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Carlito:wght@400;700&display=swap");

:root{--bg:#080b10;--bg2:#0f141a;--panel:#11171d;--panel2:#151c23;--line:#2a3138;--text:#f5f7fa;--muted:#aab1b8;--gold:#e89b16;--gold2:#ffb42b;--green:#20c865}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:linear-gradient(180deg,#070a0e,#0a0e13 35%,#080b10);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.55}a{color:inherit}.wrap{width:min(1180px,calc(100% - 32px));margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(5,8,11,.92);backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.06)}.nav-wrap{height:72px;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:max-content}.brand img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:1px solid var(--gold)}.brand span{font-weight:900;color:var(--gold);font-size:24px;line-height:1}.brand small{display:block;color:white;font-size:9px;letter-spacing:.12em;margin-top:4px}nav{display:flex;align-items:center;gap:24px;margin-left:auto}nav a{text-decoration:none;color:#dfe4e9;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}nav a:hover{color:var(--gold)}.nav-actions{display:flex;gap:10px;align-items:center}.lang-btn,.menu-btn{background:#11171d;border:1px solid var(--line);color:#fff;border-radius:10px;padding:10px 12px}.menu-btn{display:none;font-size:20px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:12px 18px;text-decoration:none;border:1px solid transparent;font-weight:800;text-transform:uppercase;letter-spacing:.03em;cursor:pointer}.btn-gold{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#111}.btn-outline{border-color:#9a6816;background:rgba(5,7,10,.58);color:white}.hero{position:relative;min-height:610px;background:url('../img/hero-bg.jpg') center/cover no-repeat;display:flex;align-items:center;overflow:hidden}.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,8,12,.96) 0%,rgba(5,8,12,.86) 42%,rgba(5,8,12,.45) 67%,rgba(5,8,12,.52) 100%),linear-gradient(0deg,rgba(5,8,12,.5),rgba(5,8,12,.08))}.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:48px;padding:60px 0}.eyebrow{color:var(--gold);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:14px}.hero h1{font-size:clamp(42px,6vw,76px);line-height:.96;margin:10px 0 20px;text-transform:uppercase}.hero h1 em{color:var(--gold);font-style:normal;font-size:.52em;letter-spacing:.08em}.hero p{max-width:620px;color:#d5dbe1;font-size:18px}.trust-row{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid rgba(232,155,22,.25);border-bottom:1px solid rgba(232,155,22,.25);padding:13px 0;margin:20px 0}.trust-row span{color:#e9edf1}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.vehicle-card{position:relative;border-radius:24px;overflow:hidden;border:1px solid rgba(232,155,22,.55);box-shadow:0 30px 80px rgba(0,0,0,.5)}.vehicle-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}.vehicle-badge{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(6,9,12,.86);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:12px 14px}.vehicle-badge strong{display:block;color:var(--gold);font-size:18px}.vehicle-badge span{font-size:13px;color:#e6eaee}.section{padding:72px 0}.dark-section{background:linear-gradient(180deg,#0b1015,#0e141a)}.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}.section h2{font-size:clamp(28px,4vw,44px);margin:4px 0 0}.text-link{color:var(--gold);text-decoration:none;font-weight:800}.dest-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.dest-card,.benefit-grid article{background:linear-gradient(180deg,#141b22,#0e1318);border:1px solid var(--line);border-radius:16px;padding:18px;min-height:150px}.dest-card{border-color:#4a3512}.dest-icon,.benefit-icon{font-size:27px;color:var(--gold)}.dest-card h3,.benefit-grid h3{margin:14px 0 4px}.dest-card p,.benefit-grid p,.lead{color:var(--muted);margin:0}.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px;align-items:center}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}.feature-grid div{background:#12181e;border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;gap:10px}.feature-grid span{color:var(--gold)}.gallery{display:grid;grid-template-columns:1.4fr .6fr;grid-template-rows:1fr 1fr;gap:10px}.gallery img{width:100%;height:100%;object-fit:cover;border-radius:16px;border:1px solid var(--line)}.gallery img:first-child{grid-row:1/3;min-height:430px}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.booking-section{background:linear-gradient(180deg,#0b1015,#070a0d)}.booking-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:34px;align-items:start}.booking-form{background:#10161c;border:1px solid var(--line);border-radius:18px;padding:22px}.booking-form label{display:flex;flex-direction:column;gap:6px;color:#dfe4e9;font-size:13px;font-weight:700}.booking-form input,.booking-form select,.booking-form textarea{width:100%;background:#0c1116;color:#fff;border:1px solid #39414a;border-radius:10px;padding:12px 13px;font:inherit}.two{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.booking-form>label{margin-bottom:12px}.full-btn{width:100%;margin-top:4px}.form-note{font-size:11px;color:#8e979f;margin-bottom:0}.hp{position:absolute!important;left:-9999px!important}.contact-mini{display:flex;flex-direction:column;gap:8px;margin-top:22px}.contact-mini a{text-decoration:none;color:#fff}.alert{margin-top:20px;padding:12px 14px;border-radius:10px}.success{background:#123b2b;color:#70e5a7}.error{background:#3a2025;color:#ff9a9a}.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:36px}.contact-list{list-style:none;padding:0;display:grid;gap:8px}.contact-list a{text-decoration:none;color:#fff}.social-buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.flyer-card{background:#10161c;border:1px solid var(--line);border-radius:18px;padding:12px}.flyer-card img{width:100%;display:block;border-radius:12px}.floating-wa{position:fixed;right:18px;bottom:18px;z-index:45;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#0a0;color:white;text-decoration:none;font-size:27px;border:2px solid #33e777;box-shadow:0 10px 26px rgba(0,0,0,.35)}footer{border-top:1px solid #20262d;background:#07090c;padding:22px 0;color:#8f98a1;font-size:12px}.footer-grid{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}footer a{text-decoration:none}@media(max-width:960px){nav{display:none;position:absolute;top:72px;left:0;right:0;background:#080b10;border-bottom:1px solid var(--line);padding:18px 22px;flex-direction:column;align-items:flex-start}nav.open{display:flex}.menu-btn{display:block}.desktop-cta{display:none}.nav-actions{margin-left:auto}.hero-grid,.split,.booking-grid,.contact-grid{grid-template-columns:1fr}.hero{min-height:auto}.hero-vehicle{max-width:680px}.dest-grid,.benefit-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.wrap{width:min(100% - 22px,1180px)}.site-header .brand span{display:none}.nav-wrap{height:64px}.brand img{width:46px;height:46px}.hero-grid{padding:38px 0 42px;gap:28px}.hero h1{font-size:42px}.hero p{font-size:16px}.trust-row{gap:10px 14px;font-size:13px}.hero-actions .btn{width:100%}.section{padding:54px 0}.section-head{align-items:flex-start;flex-direction:column}.dest-grid,.benefit-grid{grid-template-columns:1fr 1fr}.dest-card{min-height:130px}.split{gap:24px}.gallery{grid-template-columns:1fr 1fr;grid-template-rows:auto}.gallery img:first-child{grid-row:auto;grid-column:1/3;min-height:260px}.gallery img{height:180px}.two{grid-template-columns:1fr}.booking-form{padding:16px}.contact-grid{gap:22px}.footer-grid{flex-direction:column}.lang-btn{padding:9px 10px;font-size:12px}}

/* V2 vehicle image cleanup */
.gallery-clean{display:grid;grid-template-columns:1.5fr .5fr;gap:12px}
.gallery-clean img{width:100%;height:100%;object-fit:cover;border-radius:18px;border:1px solid var(--line)}
.gallery-clean img:first-child{min-height:420px}
.gallery-clean img:last-child{min-height:420px}
@media(max-width:620px){
  .gallery-clean{grid-template-columns:1fr}
  .gallery-clean img:first-child,.gallery-clean img:last-child{min-height:0;height:auto;aspect-ratio:16/10}
}

/* V3 hero refinement */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:
    linear-gradient(90deg,rgba(5,8,11,.97) 0%,rgba(5,8,11,.90) 36%,rgba(5,8,11,.48) 66%,rgba(5,8,11,.25) 100%),
    linear-gradient(0deg,rgba(5,8,11,.85),transparent 48%),
    url("../img/vito-hero-v3.jpg") center/cover no-repeat;
}
.hero .container{position:relative;z-index:1}
.service-area{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 4px}
.service-area span{
  padding:8px 11px;border:1px solid rgba(239,158,31,.42);
  background:rgba(8,13,18,.68);border-radius:999px;color:#f1f3f5;
  font-size:.82rem;font-weight:700;backdrop-filter:blur(5px)
}
@media(max-width:700px){
  .hero::before{
    background:
      linear-gradient(180deg,rgba(5,8,11,.54) 0%,rgba(5,8,11,.86) 48%,rgba(5,8,11,.98) 100%),
      url("../img/vito-hero-v3.jpg") 58% center/cover no-repeat;
  }
  .service-area{gap:6px}
  .service-area span{font-size:.74rem;padding:7px 9px}
}

/* V3 visual fix */
#vehicle .split{
  grid-template-columns:1fr;
  max-width:900px;
}
#vehicle .feature-grid{
  grid-template-columns:repeat(4,1fr);
}
.hero-vehicle .vehicle-card img{
  object-fit:cover;
  object-position:center;
}
@media(max-width:760px){
  #vehicle .feature-grid{grid-template-columns:1fr 1fr}
}

/* V5: exact user-provided main visual; no overlay text */
.vehicle-card-clean{
  background:#090d12;
  padding:0;
  overflow:hidden;
}
.vehicle-card-clean img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain !important;
  object-position:center !important;
}
.vehicle-card-clean .vehicle-badge{display:none!important}


/* ===== V6.1 HEADER FIX ===== */
.site-header .nav-wrap{
  display:flex;
  align-items:center;
}
.site-header .brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.site-header .brand-title{
  display:flex !important;
  flex-direction:column;
  color:#e89b16;
  font-weight:900;
  font-size:18px;
  line-height:1;
  white-space:nowrap;
}
.site-header .brand-title small{
  display:block !important;
  margin-top:4px;
  color:#fff;
  font-size:8px;
  line-height:1.1;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.site-header .header-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  order:3;
}
.site-header nav{
  order:2;
  margin-left:auto;
}
.site-header .brand{order:1}
.site-header .header-right .menu-btn{
  margin:0;
}
@media(max-width:960px){
  .site-header nav{
    order:4;
    margin-left:0;
  }
  .site-header .header-right{
    margin-left:auto;
  }
}
@media(max-width:620px){
  .site-header .nav-wrap{
    height:64px;
    gap:7px;
  }
  .site-header .brand{
    gap:7px;
    margin-right:4px;
  }
  .site-header .brand img{
    width:43px;
    height:43px;
    flex:0 0 43px;
  }
  .site-header .brand span.brand-title{
    display:flex !important;
    font-size:14px;
  }
  .site-header .brand span.brand-title small{
    display:block !important;
    font-size:6.5px;
    letter-spacing:.035em;
  }
  .site-header .header-right{
    gap:6px;
  }
  .site-header .lang-btn{
    padding:8px 8px;
    font-size:11px;
    white-space:nowrap;
  }
  .site-header .menu-btn{
    display:block;
    padding:7px 10px;
    font-size:20px;
  }
}
@media(max-width:380px){
  .site-header .brand-title{font-size:12px !important}
  .site-header .brand-title small{font-size:5.8px !important}
  .site-header .brand img{width:39px;height:39px;flex-basis:39px}
  .site-header .lang-btn{font-size:10px;padding:7px 6px}
  .site-header .menu-btn{padding:6px 8px}
}


/* ===== V6.2 MOBILE HEADER + CENTERED HERO ===== */

/* Header business name: one line, B&T orange, Transfers & Tours white */
.site-header .brand-title{
  display:flex !important;
  flex-direction:row !important;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
  line-height:1;
  font-weight:900;
}
.site-header .brand-title strong{
  color:var(--gold);
  font-size:20px;
  font-weight:950;
}
.site-header .brand-title > span{
  color:#fff;
  font-size:20px;
  font-weight:800;
}

/* Keep language and menu together on the right */
.site-header .header-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
}

/* Center the headline block in the hero */
.hero-copy{
  text-align:center;
}
.hero-copy .eyebrow{
  text-align:center;
}
.hero-copy h1{
  text-align:center;
}
.hero-copy p{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.hero-copy .trust-row{
  justify-content:center;
}
.hero-copy .service-area{
  justify-content:center;
}
.hero-copy .hero-actions{
  justify-content:center;
}

/* Keep layout readable on mobile */
@media(max-width:960px){
  .site-header .nav-wrap{
    display:flex;
    align-items:center;
    gap:8px;
  }
  .site-header .brand{
    margin-right:auto;
    min-width:0;
  }
}

@media(max-width:620px){
  .site-header .nav-wrap{
    height:68px;
    gap:6px;
  }
  .site-header .brand{
    gap:7px;
    min-width:0;
    flex:1 1 auto;
  }
  .site-header .brand img{
    width:43px;
    height:43px;
    flex:0 0 43px;
  }
  .site-header .brand-title{
    gap:4px;
    min-width:0;
  }
  .site-header .brand-title strong{
    font-size:17px;
  }
  .site-header .brand-title > span{
    font-size:17px;
  }
  .site-header .header-right{
    gap:5px;
  }
  .site-header .lang-btn{
    padding:8px 8px;
    font-size:11px;
  }
  .site-header .menu-btn{
    padding:7px 9px;
    font-size:19px;
  }
  .hero-copy h1{
    margin-left:auto;
    margin-right:auto;
  }
}

@media(max-width:430px){
  .site-header .brand img{
    width:40px;
    height:40px;
    flex-basis:40px;
  }
  .site-header .brand-title strong,
  .site-header .brand-title > span{
    font-size:15px;
  }
  .site-header .lang-btn{
    font-size:10px;
    padding:7px 6px;
  }
  .site-header .menu-btn{
    padding:6px 8px;
    font-size:18px;
  }
}

@media(max-width:380px){
  .site-header .brand-title strong,
  .site-header .brand-title > span{
    font-size:13px;
  }
  .site-header .brand{
    gap:5px;
  }
}


/* ===== V7 NIGHT BACKGROUND / NO VEHICLE PHOTOS ===== */
.hero{
  background:none !important;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(180deg,rgba(4,8,12,.38) 0%,rgba(4,8,12,.56) 48%,rgba(4,8,12,.86) 100%),
    url("../img/sibenik-night-v7.jpg") center center / cover no-repeat !important;
}
.hero .wrap,
.hero .hero-grid{
  position:relative;
  z-index:1;
}
.hero-grid{
  grid-template-columns:1fr !important;
  max-width:980px;
  margin:auto;
}
.hero-vehicle{display:none !important;}

/* Vehicle section stays text/features only */
#vehicle .split{
  grid-template-columns:1fr !important;
  max-width:900px;
}
#vehicle .gallery,
#vehicle .gallery-clean{display:none !important;}

/* icon-only social links */
.social-icons{
  display:flex;
  gap:14px;
  margin-top:18px;
}
.social-icon{
  width:64px;
  height:64px;
  border-radius:16px;
  display:grid;
  place-items:center;
  text-decoration:none;
  font-size:34px;
  font-weight:900;
  background:#10161c;
  border:1px solid #3b4650;
}
.wa-icon{
  color:#25D366;
  border-color:#2f7b4a;
}
.ig-icon{
  color:#ff4f9a;
  border-color:#7f3758;
}

/* QR codes only */
.flyer-card{
  max-width:640px;
  margin-left:auto;
  background:#0d1318;
}
.flyer-card img{
  width:100%;
  height:auto;
  object-fit:contain;
}

@media(max-width:620px){
  .hero::before{
    background:
      linear-gradient(180deg,rgba(4,8,12,.34) 0%,rgba(4,8,12,.56) 48%,rgba(4,8,12,.90) 100%),
      url("../img/sibenik-night-v7.jpg") center center / cover no-repeat !important;
  }
  .social-icon{
    width:58px;
    height:58px;
    font-size:30px;
  }
}


/* ===== V8 TYPOGRAPHY ===== */
html, body, button, input, select, textarea {
  font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.brand-name, .eyebrow, .btn, nav, label {
  font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif !important;
}


/* ===== V9 MOBILE FONT FIX ===== */
/* Force the same Calibri-style stack everywhere, including mobile media queries. */
html,
body,
body *,
button,
input,
select,
textarea,
option {
  font-family: Calibri, Carlito, "Segoe UI", Arial, sans-serif !important;
}

/* Keep icon-like glyphs from breaking layout */
.social-icon {
  font-family: Arial, sans-serif !important;
}

/* ===== V9 QR PAIR ===== */
.qr-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  align-items:start;
}
.qr-card{
  display:block;
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  border:1px solid #303942;
  text-decoration:none;
}
.qr-card img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  background:#fff;
}
@media(max-width:620px){
  .qr-pair{
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .qr-card{
    border-radius:13px;
  }
}


/* ===== V10: REAL MOBILE WEB FONT ===== */
/* Calibri is usually not installed on Android. Carlito is a metrically compatible
   web font and is loaded from Google Fonts, so mobile and desktop now match. */
html,
body,
body *,
button,
input,
select,
textarea,
option {
  font-family: "Carlito", Calibri, Arial, sans-serif !important;
}

/* Slightly normalize weights so mobile doesn't look too heavy */
body { font-weight: 400; }
h1,h2,h3,h4,h5,h6,
.eyebrow,
.btn,
nav a,
label,
.brand-title,
.trust-row b {
  font-weight: 700 !important;
}

/* ===== V11 HOME BACKGROUND VISIBILITY ===== */
.hero{
 position:relative !important;
 background-position:center center !important;
 background-size:cover !important;
 background-repeat:no-repeat !important;
 background-attachment:scroll !important;
}
.hero::before{
 content:"" !important;
 position:absolute !important;
 inset:0 !important;
 background:linear-gradient(90deg,rgba(4,8,12,.56),rgba(4,8,12,.38),rgba(4,8,12,.24)) !important;
 pointer-events:none !important;
 z-index:0 !important;
}
.hero > *{position:relative !important;z-index:1 !important;}
@media(max-width:700px){
 .hero{background-position:center center !important;background-size:cover !important;}
 .hero::before{background:rgba(4,8,12,.40) !important;}
}


/* ===== V12 DEFINITIVE HOME BACKGROUND FIX ===== */
#home,
.hero,
section#home.hero {
  background-image:
    linear-gradient(rgba(3,7,11,.36), rgba(3,7,11,.36)),
    url("../img/sibenik-night-v7.jpg") !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-color: #071019 !important;
}

/* Disable older overlay layers that were making the mobile hero black */
#home::before,
#home::after,
.hero::before,
.hero::after,
section#home.hero::before,
section#home.hero::after {
  background: transparent !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Keep content above the background */
#home > *,
.hero > *,
section#home.hero > * {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 900px) {
  #home,
  .hero,
  section#home.hero {
    background-image:
      linear-gradient(rgba(3,7,11,.30), rgba(3,7,11,.30)),
      url("../img/sibenik-night-v7.jpg") !important;
    background-size: cover !important;
    background-position: 50% 50% !important;
    background-repeat: no-repeat !important;
  }
}


/* ===== V13: TOURS + CONTACT ===== */

/* Tours section: remove all photographic/background images and overlays. */
#tours,
.tours,
.tours-section,
section#tours {
  background-image: none !important;
  background: #070b10 !important;
}

#tours::before,
#tours::after,
.tours::before,
.tours::after,
.tours-section::before,
.tours-section::after,
section#tours::before,
section#tours::after {
  background-image: none !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* Contact: center the textual content. */
#contact,
.contact,
.contact-section,
section#contact {
  text-align: center !important;
}

#contact .section-head,
#contact .contact-info,
#contact .contact-details,
#contact .contact-copy,
#contact .contact-actions,
.contact .section-head,
.contact .contact-info,
.contact .contact-details,
.contact .contact-copy,
.contact .contact-actions {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
}

/* Keep contact links/buttons/icons centered as a group. */
#contact a,
.contact a {
  text-align: center;
}

/* QR images removed from markup; hide any legacy QR/flyer containers as safeguard. */
#contact .qr-pair,
#contact .qr-card,
#contact .flyer-card,
.contact .qr-pair,
.contact .qr-card,
.contact .flyer-card {
  display: none !important;
}


/* ===== V14 TRANSFER PHOTO CARDS ===== */

/* Remove any old blue/background fragment from the whole Transfers section. */
#transfers,
section#transfers {
  background: #070b10 !important;
  background-image: none !important;
  position: relative;
}
#transfers::before,
#transfers::after,
section#transfers::before,
section#transfers::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Real-location photo cards. */
#transfers .dest-card {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background-color: #101820 !important;
  background-size: cover !important;
  background-position: center center !important;
  border: 1px solid rgba(232,155,22,.58) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,.24);
  isolation: isolate;
}

#transfers .dest-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg,
      rgba(5,9,13,.15) 0%,
      rgba(5,9,13,.35) 42%,
      rgba(5,9,13,.92) 100%);
}

#transfers .dest-card h3,
#transfers .dest-card p,
#transfers .dest-card .dest-icon {
  position: relative;
  z-index: 2;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
}

#transfers .dest-card h3 {
  color: #fff !important;
}
#transfers .dest-card p {
  color: #e6ebef !important;
}
#transfers .dest-card .dest-icon {
  color: #ffab1a !important;
}

#transfers .dest-split-airport { background-image: url("../img/transfer-split-airport.jpg") !important; }
#transfers .dest-zadar-airport { background-image: url("../img/transfer-zadar-airport.jpg") !important; }
#transfers .dest-vodice { background-image: url("../img/transfer-vodice.jpg") !important; }
#transfers .dest-tisno { background-image: url("../img/transfer-tisno.jpg") !important; }
#transfers .dest-split { background-image: url("../img/transfer-split.jpg") !important; }
#transfers .dest-dubrovnik { background-image: url("../img/transfer-dubrovnik.jpg") !important; }
#transfers .dest-krka { background-image: url("../img/transfer-krka.jpg") !important; }
#transfers .dest-plitvice { background-image: url("../img/transfer-plitvice.jpg") !important; }

/* Center WhatsApp / Instagram icons in Contact. */
#contact .social-buttons,
#contact .social-icons,
.contact-section .social-buttons,
.contact-section .social-icons {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Photo credit block kept intentionally discreet. */
.photo-credits {
  width: min(1180px, calc(100% - 32px));
  margin: 12px auto 0;
  color: #737c85;
  font-size: 10px;
  line-height: 1.4;
}
.photo-credits summary {
  cursor: pointer;
  text-align: center;
}
.photo-credits p {
  text-align: center;
  margin: 8px auto 0;
  max-width: 980px;
}

@media (max-width: 620px) {
  #transfers .dest-card {
    min-height: 205px;
    padding: 18px;
  }
  #transfers .dest-card::before {
    background:
      linear-gradient(180deg,
        rgba(5,9,13,.12) 0%,
        rgba(5,9,13,.30) 40%,
        rgba(5,9,13,.94) 100%);
  }
}


/* ===== V15 HOME / TYPE / TRANSFER PRICES ===== */

/* Font direction inspired by the approved mockup */
html, body, body *, button, input, select, textarea, option {
  font-family: "Barlow", Arial, sans-serif !important;
}
h1, h2, h3, h4, h5, h6,
.eyebrow, .btn, nav a, .brand-title {
  font-family: "Barlow Condensed", "Barlow", Arial, sans-serif !important;
}

/* New HOME background */
.hero {
  background-image:
    linear-gradient(rgba(3,7,11,.28), rgba(3,7,11,.54)),
    url("../img/sibenik-home-v15.jpg") !important;
  background-position:center center !important;
  background-size:cover !important;
  background-repeat:no-repeat !important;
}
.hero::before,
.hero::after {
  background:none !important;
  background-image:none !important;
  opacity:0 !important;
}

/* Six destination cards only. No old icons. */
#transfers .dest-card .dest-icon {
  display:none !important;
}

#transfers .dest-grid {
  grid-template-columns:repeat(3, 1fr) !important;
  gap:16px;
}

#transfers .dest-card {
  min-height:230px !important;
  padding:20px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:stretch !important;
}

#transfers .dest-card h3 {
  margin:0 !important;
  padding:0 !important;
  color:#fff !important;
  font-size:30px !important;
  line-height:1.05 !important;
  text-transform:uppercase;
  letter-spacing:.01em;
  text-align:center;
  align-self:stretch;
}

#transfers .transfer-price {
  margin-top:auto;
  text-align:center;
  color:#f3a21b;
  font-family:"Barlow Condensed","Barlow",Arial,sans-serif !important;
  font-weight:800;
  font-size:34px;
  line-height:1;
  text-shadow:0 2px 9px rgba(0,0,0,.9);
}

#transfers .transfer-price span {
  color:#fff;
  font-weight:500;
  font-size:23px;
  margin-right:5px;
}

/* slightly stronger lower gradient behind the price */
#transfers .dest-card::before {
  background:
    linear-gradient(
      180deg,
      rgba(4,7,10,.48) 0%,
      rgba(4,7,10,.12) 28%,
      rgba(4,7,10,.16) 54%,
      rgba(4,7,10,.92) 100%
    ) !important;
}

@media(max-width:960px) {
  #transfers .dest-grid {
    grid-template-columns:repeat(2,1fr) !important;
  }
}

@media(max-width:620px) {
  .hero {
    background-image:
      linear-gradient(rgba(3,7,11,.28), rgba(3,7,11,.58)),
      url("../img/sibenik-home-v15.jpg") !important;
    background-position:center center !important;
  }
  #transfers .dest-grid {
    grid-template-columns:repeat(2,1fr) !important;
    gap:12px !important;
  }
  #transfers .dest-card {
    min-height:220px !important;
    padding:16px !important;
  }
  #transfers .dest-card h3 {
    font-size:25px !important;
  }
  #transfers .transfer-price {
    font-size:31px;
  }
  #transfers .transfer-price span {
    font-size:20px;
  }
}

@media(max-width:390px) {
  #transfers .dest-card h3 {
    font-size:22px !important;
  }
  #transfers .transfer-price {
    font-size:28px;
  }
  #transfers .transfer-price span {
    font-size:18px;
  }
}

/* ===== V16: user-provided Split and Dubrovnik photos ===== */
#transfers .dest-card.dest-split {
  background-image:url("../img/split-city-v16.jpg") !important;
  background-position:center center !important;
  background-size:cover !important;
}
#transfers .dest-card.dest-dubrovnik {
  background-image:url("../img/dubrovnik-v16.jpg") !important;
  background-position:center center !important;
  background-size:cover !important;
}


/* ===== V17: transfer pricing note ===== */
#transfers .transfer-price-note {
  margin: 22px auto 0 !important;
  padding: 0 12px !important;
  max-width: 900px;
  text-align: center;
  color: rgba(255,255,255,.72) !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

@media(max-width:620px) {
  #transfers .transfer-price-note {
    margin-top: 18px !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
}


/* ===== V18 FINAL TEST POLISH ===== */
html { scroll-behavior: smooth; }
body { text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #f3a21b !important;
  outline-offset: 3px;
}

/* Price note: neutral and readable */
#transfers .transfer-price-note {
  font-family: "Barlow", Arial, sans-serif !important;
  font-weight: 400 !important;
  color: rgba(255,255,255,.72) !important;
}

/* Prevent accidental horizontal scrolling on mobile */
html, body { max-width: 100%; overflow-x: hidden; }

/* Slightly reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ===== V19: BOOK CONTACT + FOOTER ALIGNMENT ===== */

/* Book your transfer contact rows:
   keep icon and phone/email text on the same horizontal line. */
#booking .booking-contact a,
#booking .booking-contact-row,
#booking .contact-line,
#booking .contact-item,
#book .booking-contact a,
#book .booking-contact-row,
#book .contact-line,
#book .contact-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  vertical-align: middle !important;
}

#booking .booking-contact,
#book .booking-contact {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

#booking .booking-contact a *,
#book .booking-contact a *,
#booking .contact-line *,
#book .contact-line * {
  vertical-align: middle !important;
}

/* Also cover the existing contact info markup if it uses simple p/a rows. */
#booking .section-head p a[href^="tel:"],
#booking .section-head p a[href^="mailto:"],
#book .section-head p a[href^="tel:"],
#book .section-head p a[href^="mailto:"] {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

/* Footer text centered below separator */
footer,
.site-footer,
.footer {
  text-align: center !important;
}

footer .container,
.site-footer .container,
.footer .container,
footer .footer-inner,
.site-footer .footer-inner {
  text-align: center !important;
  align-items: center !important;
  justify-content: center !important;
}

footer p,
footer address,
footer a,
.site-footer p,
.site-footer address,
.site-footer a {
  text-align: center !important;
}

@media(max-width:620px) {
  #booking .booking-contact,
  #book .booking-contact {
    align-items: flex-start !important;
  }
}


/* ===== V20 EXACT BOOKING CONTACT ALIGNMENT ===== */
#booking .booking-contact-fixed {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin-top: 18px !important;
}

#booking .booking-contact-fixed .booking-contact-link {
  display: grid !important;
  grid-template-columns: 28px auto !important;
  align-items: center !important;
  column-gap: 10px !important;
  width: fit-content !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.25 !important;
  text-decoration: none;
}

#booking .booking-contact-fixed .booking-contact-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
  text-align: center !important;
}

#booking .booking-contact-fixed .booking-contact-link > span:last-child {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 28px !important;
}

@media(max-width:620px) {
  #booking .booking-contact-fixed {
    align-items: flex-start !important;
  }
  #booking .booking-contact-fixed .booking-contact-link {
    grid-template-columns: 26px auto !important;
    column-gap: 9px !important;
  }
  #booking .booking-contact-fixed .booking-contact-icon {
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
  }
  #booking .booking-contact-fixed .booking-contact-link > span:last-child {
    line-height: 26px !important;
  }
}


/* FINAL SEO: explanatory airport direction text */
#transfers .airport-direction-note{
  max-width: 920px;
  margin: 10px auto 0;
  padding: 0 14px;
  text-align: center;
  font-family: "Barlow", Arial, sans-serif !important;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  color: rgba(255,255,255,.68);
}
@media(max-width:620px){
  #transfers .airport-direction-note{
    font-size: 13px;
    line-height: 1.45;
  }
}

/* ===== V21 DEFINITIVE HOME HERO — NO BACKGROUND PHOTO ===== */
/* This block intentionally comes last so it overrides all older V7/V11/V12/V15 hero photo rules. */
.hero,
#home .hero,
main#home > .hero {
  background: linear-gradient(115deg, #0b2034 0%, #071523 52%, #030b13 100%) !important;
  background-image: linear-gradient(115deg, #0b2034 0%, #071523 52%, #030b13 100%) !important;
  background-color: #071523 !important;
}

.hero::before,
.hero::after,
#home .hero::before,
#home .hero::after,
main#home > .hero::before,
main#home > .hero::after {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
  opacity: 0 !important;
}

/* Do not put a background image on the <main id="home"> wrapper either. */
main#home,
#home {
  background-image: none !important;
}

@media (max-width: 900px) {
  .hero,
  #home .hero,
  main#home > .hero {
    background: linear-gradient(180deg, #0b2034 0%, #071523 55%, #030b13 100%) !important;
    background-image: linear-gradient(180deg, #0b2034 0%, #071523 55%, #030b13 100%) !important;
  }
}