/* Complete stylesheet implementing requested redesign:
   - site-wide color from provided image (warm sand)
   - full-bleed section background photos for hero and services
   - fonts applied site-wide (Seven Day Signature declared with fallback to Great Vibes)
   - footer two-row layout and large signature slogan
   - gallery landscape-focused with mixed sizes and lightbox-ready styles
*/

/* Variables and font stacks */
:root{
  --bg-sand: #f3ead6; /* color sampled from provided image */
  --deep-sea: #0b2b3a;
  --accent: #d4a35a;
  --muted: #6b6b6b;
  --white: #ffffff;
  --max-width: 1200px;
  --radius: 12px;
  --transition: 0.32s;

  /* Font families: user requested fonts applied site-wide.
     Seven Day Signature may not be available via Google Fonts;
     declared first so if installed it will be used; fallback to Great Vibes.
  */
  --font-head: "Seven Day Signature", "Great Vibes", "Playfair Display", Georgia, serif;
  --font-section: "Great Vibes", "Pinyon Script", "Playfair Display", serif;
  --font-nav: "Playfair Display", "Trajan", "Playfair Display", serif;
  --font-body: "Montserrat", "Lato", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font-body);
  color:#111;
  background: linear-gradient(180deg, var(--bg-sand) 0%, #fbfbfb 60%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

/* Container */
.container{max-width:var(--max-width);margin:0 auto;padding:0 20px}

/* Header */
.site-header{
  position:sticky;
  top:0;
  z-index:1200;
  background:rgba(255,255,255,0.98);
  border-bottom:1px solid rgba(11,43,58,0.06);
  backdrop-filter: blur(6px);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 20px;
  max-width:var(--max-width);
  margin:0 auto;
}
.logo img{height:54px;width:auto;display:block}
.brand-title{font-family:var(--font-nav);font-size:18px;margin:0;color:var(--deep-sea)}
.subhead{font-size:13px;color:var(--muted);margin:0}

/* Nav */
#nav-toggle{display:none}
.nav{display:flex;align-items:center;gap:18px}
.nav-menu{display:flex;gap:10px;list-style:none;margin:0;padding:0;align-items:center}
.nav-menu li a{
  font-family:var(--font-nav);
  font-size:16px;
  color:var(--deep-sea);
  text-decoration:none;
  padding:10px 12px;
  border-radius:8px;
  transition: background var(--transition), color var(--transition);
}
.nav-menu li a:hover{background:rgba(11,43,58,0.06)}

/* Buttons */
.btn{
  background:var(--deep-sea);
  color:var(--white);
  padding:12px 18px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  transition: transform var(--transition), box-shadow var(--transition);
  box-shadow: 0 8px 20px rgba(11,43,58,0.08);
}
.btn:hover{transform:translateY(-3px)}

/* HERO: full-bleed background image with overlay */
.hero-bg{
  background-image: url('../images/mr-travel-small-boats-hvar-photo.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 120px 0;
  position: relative;
}
.hero-overlay{
  background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.06));
  padding: 40px 0;
}
.hero-inner{max-width:var(--max-width);margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:center}
.hero-text{color:#fff;text-align:center;max-width:980px}
.hero-headline{
  font-family:var(--font-head);
  font-size:64px;
  line-height:0.95;
  font-weight:700;
  margin:0 0 12px;
  letter-spacing:0.6px;
  text-shadow: 0 6px 18px rgba(0,0,0,0.45);
}
.hero-sub{font-size:20px;margin:0 0 8px;font-weight:600;color:#fff}
.tagline{display:inline-block;margin-top:12px;color:var(--accent);font-weight:700;letter-spacing:1px}

/* SERVICES: full-width landscape background image */
.services-bg{
  background-image: url('../images/mr-travel-hvar-fleet-on-duty.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 64px 0;
  position: relative;
}
.services-overlay{
  background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,255,255,0.85));
  padding: 40px 0;
}
.section-title{
  font-family:var(--font-section);
  font-size:36px;
  margin:0 0 6px;
  color:var(--deep-sea);
}
.section-sub{
  font-family:var(--font-body);
  color:var(--muted);
  margin:0 0 18px;
}

/* Service cards grid (8 cards) */
.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:22px;
  max-width:var(--max-width);
  margin:18px auto;
  padding:0 20px;
}
.service-card{
  background:var(--white);
  padding:22px;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(11,43,58,0.06);
  transition:transform var(--transition);
}
.service-card:hover{transform:translateY(-8px)}
.service-card h3{margin:0 0 8px;color:var(--deep-sea);font-size:18px}
.service-card p{margin:0 0 12px;color:#333}

/* Meet & Greet */
.meet{padding:36px 0;background:linear-gradient(180deg, rgba(212,163,90,0.03), rgba(11,43,58,0.01))}
.meet-inner{max-width:var(--max-width);margin:0 auto;padding:20px;border-radius:12px}

/* Planning form */
.planning{padding:36px 0}
.planning-form{max-width:720px;margin:0 auto;display:grid;gap:12px;padding:0 20px}
.planning-form label{font-weight:700}
.planning-form input, .planning-form select, .planning-form textarea{padding:12px;border-radius:8px;border:1px solid #e9e9e9;background:#fff}
.planning-form button{width:160px;padding:12px}

/* About */
.about{padding:36px 0}
.about-inner{display:grid;grid-template-columns:1fr;gap:18px;max-width:var(--max-width);margin:0 auto;padding:0 20px}
.about-text h2{font-family:var(--font-section);font-size:26px;color:var(--deep-sea);margin:0}
.about-image img{width:100%;border-radius:12px;display:block}

/* Gallery: landscape-focused, mixed sizes */
.gallery{padding:36px 0}
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 140px;
  gap:12px;
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px;
}
.g-item{overflow:hidden;border-radius:10px}
.g-item img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .35s}
.g-item:hover img{transform:scale(1.04)}
/* wide items span more columns for landscape emphasis */
.g-wide{grid-column: span 3; grid-row: span 1;}
.g-item:nth-child(2n){grid-column: span 2;}
@media (max-width: 900px){
  .gallery-grid{grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px;}
  .g-wide{grid-column: span 2;}
}

/* Lightbox */
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.92);align-items:center;justify-content:center;z-index:2200}
.lightbox .lightbox-content{max-width:92%;max-height:86%;text-align:center}
.lightbox img{max-width:100%;max-height:78vh;border-radius:10px}
.lightbox-close, .lightbox-prev, .lightbox-next{position:fixed;background:transparent;border:none;color:#fff;font-size:30px;cursor:pointer}
.lightbox-close{top:18px;right:18px}
.lightbox-prev{left:18px;top:50%}
.lightbox-next{right:18px;top:50%}

/* Contact & Partners (upper footer area) */
.contact{padding:48px 0;background: linear-gradient(180deg, rgba(243,234,214,0.6), rgba(255,255,255,0.0));border-top:1px solid rgba(11,43,58,0.04)}
#contact .container{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:start;max-width:1100px;margin:0 auto;padding:0 20px}
#contact address{background:rgba(255,255,255,0.95);padding:20px;border-radius:10px;box-shadow:0 10px 30px rgba(11,43,58,0.06);line-height:1.6;font-size:16px}
#contact address strong{display:block;font-size:18px;margin-bottom:6px;font-family:var(--font-head);color:var(--deep-sea)}
#contact address a{color:var(--deep-sea);text-decoration:none;font-weight:700}
.contact-actions{display:flex;gap:12px;margin-top:12px}
.contact-actions .btn{padding:10px 14px;border-radius:10px;font-weight:700;box-shadow:0 8px 20px rgba(11,43,58,0.06)}
.contact-actions .btn:first-child{background:#25D366;color:#fff}
.contact-actions .btn:last-child{background:var(--deep-sea);color:#fff}

/* Partners row */
.partners-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:1100px;margin:28px auto;padding:0 20px 28px}
.partner-card{background:#fff;padding:18px;border-radius:10px;box-shadow:0 10px 30px rgba(11,43,58,0.06)}
.partner-card h3{margin:0 0 8px;font-family:var(--font-section);color:var(--deep-sea)}
.partner-card p{margin:0 0 12px;color:#333;line-height:1.5}
.partner-card .btn{background:var(--deep-sea);color:#fff;padding:10px 12px;border-radius:8px}

/* FOOTER: two rows layout and large signature slogan */
.footer{background:linear-gradient(180deg, rgba(11,43,58,0.02), rgba(243,234,214,0.02));padding:36px 0;border-top:1px solid rgba(11,43,58,0.04)}
.footer-top{max-width:var(--max-width);margin:0 auto;padding:0 20px}
.footer-row{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.footer-row-1 .footer-block{flex:1 1 48%;background:rgba(255,255,255,0.95);padding:18px;border-radius:10px;box-shadow:0 10px 30px rgba(11,43,58,0.06)}
.footer-row-2{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
.footer-row-2 .footer-block{flex:1 1 22%;min-width:220px}
.footer-slogan{font-family:var(--font-head);color:var(--deep-sea);font-size:36px;line-height:1;letter-spacing:0.6px}
.slogan-line{display:block}
.slogan-line-1{font-size:44px}
.slogan-line-2{font-size:44px}
.brand-desc{margin-top:8px;color:#333}

/* Footer map */
.footer-map iframe{width:100%;height:160px;border:0;border-radius:8px;box-shadow:0 8px 20px rgba(11,43,58,0.08)}

/* Footer bottom */
.footer-bottom{text-align:center;margin-top:18px;color:var(--muted);font-size:14px}

/* Responsive adjustments */
@media (max-width: 1100px){
  .footer-row-2 .footer-block{flex:1 1 45%}
  .footer-row-1 .footer-block{flex:1 1 100%}
  .g-wide{grid-column: span 2;}
}
@media (max-width: 900px){
  #nav-toggle{display:inline-block}
  .nav-menu{display:none;position:absolute;right:20px;top:72px;background:var(--white);padding:12px;border-radius:10px;box-shadow:0 12px 30px rgba(11,43,58,0.08)}
  .nav-menu.show{display:flex;flex-direction:column}
  .header-inner{padding:14px 16px}
  .hero-headline{font-size:32px}
  .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:120px}
  #contact .container{grid-template-columns:1fr}
  .footer-row-2{flex-direction:column}
  .footer-row-1{flex-direction:column}
  .footer-slogan{font-size:28px}
  .slogan-line-1,.slogan-line-2{font-size:32px}
  .footer-map iframe{height:200px}
}

/* Minor helpers */
img{max-width:100%;height:auto;display:block}
a{cursor:pointer}
button{cursor:pointer}