/* Reset */
/* Minimal reset for modern browsers */
* { box-sizing: border-box; margin: 0; padding: 0; }
html,body{height:100%;}
body{
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; 
  line-height:1.5; 
  color:#113234; 
  background: url('/img/site-bg.jpg') center center fixed;
  background-size: cover;
  position: relative;
}

/* Add overlay for better readability and postcard contrast */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(35, 33, 32, 0.85);
  z-index: -1;
}

/* Base */
.container{max-width:1100px; margin:0 auto; padding:2rem;}
.section{padding:3rem 0;}

.brand{display:flex; align-items:center; gap:0.6rem; font-weight:700; color:#057d8c; font-size:1.1rem}
.brand-logo{height:40px; width:auto; display:block}
.brand-text{font-weight:700; color:#057d8c}

/* Navbar */
.navbar{display:flex; align-items:center; justify-content:space-between; padding:1.1rem 2rem; background:transparent; position:relative; z-index:999; transition:background .28s ease, padding .22s ease, box-shadow .22s ease, transform .22s ease;}

/* Sticky navbar for postcard mode - always visible and compact */
body.postcard-mode .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

/* Compact navbar styling */
body.postcard-mode .navbar {
  padding: 0.5rem 1.5rem;
  background: transparent;
}

/* Ensure logo stays compact */
body.postcard-mode .nav-logo {
  height: var(--logo-compact);
}

/* No padding needed for body since postcards handle their own spacing */
body.postcard-mode {
  padding-top: 0;
}
.nav-group { list-style:none; display:flex; gap:1.25rem; margin:0; padding:0; align-items:center; background:transparent;}
.nav-group a { color:#04464b; text-decoration:none; font-weight:600; padding:0.25rem 0.35rem }
.nav-logo{height:40px; display:block}

/* center navigation visually while keeping .brand at the left */
.navbar{display:flex; align-items:center;}
.navbar::before{content:''; flex:1}
.navbar > .nav-links{flex:0 1 auto}
.navbar > .brand{flex:0 0 auto}
.navbar::after{content:''; flex:1}


/* Use grid to reserve a center column for the logo so nav groups sit immediately left/right */
.navbar{position:relative}

/* Compact logo for sticky navbar */
:root{
  --logo-compact: 32px;
  --logo-small:40px;
  --logo-large:140px; /* adjust if your logo is wider/taller */
}

.nav-center{ 
  display: grid; 
  grid-template-columns: 1fr var(--logo-compact) 1fr; 
  align-items: center; 
  gap: 1rem; 
  width: 100%; 
  max-width: 1100px; 
  margin: 0 auto; 
}

.nav-logo{
  grid-column: 2; 
  height: var(--logo-compact); 
  justify-self: center; 
  transition: height 0.3s ease;
}

.nav-left{ grid-column:1; display:flex; justify-content:flex-end }
.nav-right{ grid-column:3; display:flex; justify-content:flex-start }

/* Remove the complex floating navbar behavior for postcard mode */
/* Keep nav links styled consistently */
.nav-group { 
  list-style: none; 
  display: flex; 
  gap: 1.25rem; 
  margin: 0; 
  padding: 0; 
  align-items: center; 
  background: transparent;
}

.nav-group a { 
  color: #04464b; 
  text-decoration: none; 
  font-weight: 600; 
  padding: 0.25rem 0.35rem;
  transition: color 0.3s ease;
}

.nav-group a:hover { 
  color: #057d8c;
  text-decoration: underline;
}

/* Mobile navbar adjustments */
@media(max-width:900px){
  .nav-left, .nav-right{ margin:0; }
  .nav-logo{position:relative; transform:none; left:auto; display:block; margin:0 auto;}
  .navbar{padding:0.5rem 1rem}
  
  /* Hide some nav items on smaller screens to save space */
  .nav-left .nav-group li:nth-child(3),
  .nav-right .nav-group li:nth-child(2) {
    display: none;
  }
}

/* Remove the floating header behavior - keep it simple and sticky */
/* Simple sticky header styling */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.site-header .navbar { 
  background: transparent; 
  padding: 0.5rem 1.5rem;
}

.nav-group a{ color: #04464b }
.nav-group a:hover{ color: #057d8c; text-decoration: underline }
.nav-logo{ box-shadow: none; }
.navbar.scrolled .nav-right a{
  color: #04464b;
  text-shadow: none;
}
body.nav-scrolled .nav-logo,
.navbar.scrolled .nav-logo{
  box-shadow: none;
}
/* remove nav-group shadows when scrolled (navbar becomes opaque) */
body.nav-scrolled .nav-group,
.navbar.scrolled .nav-group{
  box-shadow: none; background:transparent; padding:0; border-radius:0;
}

/* Ensure subtle transition for link color */
.nav-left a, .nav-right a{ transition: color .18s ease, text-shadow .18s ease }

/* make sure logo doesn't overlap nav links on small screens */
@media(max-width:900px){
  .nav-logo{height:32px}
}
.nav-toggle{display:none; background:none; border:none; font-size:1.25rem}

/* Hero */
.hero{height:100vh; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center}
.parallax-bg{position:absolute; left:0; right:0; top:0; bottom:0; background-size:cover; background-position:center; transform:translate3d(0,0,0); will-change:transform;}
.parallax-shape{position:absolute; right:-10%; bottom:-10%; width:60vmax; height:60vmax; border-radius:50%; background:radial-gradient(circle at 30% 30%, rgba(6,183,176,0.12), rgba(255,255,255,0)); mix-blend-mode:overlay; filter:blur(40px); transform:translate3d(0,0,0);}
.section-parallax{position:absolute; left:0; right:0; top:0; bottom:0; background-size:cover; background-position:center; opacity:0.22; transform:translate3d(0,0,0); will-change:transform; z-index:1}
.container.section{position:relative; z-index:2}
.section .hero-overlay{position:relative; z-index:3}
.hero-overlay{position:relative; z-index:10; background:linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,255,255,0.72)); padding:2.25rem 3.5rem; text-align:center; border-radius:16px; box-shadow:0 10px 40px rgba(6,91,91,0.08); max-width:900px}
.hero-title{font-size:3rem; color:#054f50; margin-bottom:0.5rem; opacity:0; transform:translateY(14px); transition:opacity .8s cubic-bezier(.2,.9,.2,1), transform .8s cubic-bezier(.2,.9,.2,1);}
.hero-sub{font-size:1.1rem; color:#076a67; margin-bottom:1rem}

.btn.primary{background:linear-gradient(90deg,#05c7be,#049e9a); box-shadow:0 8px 24px rgba(5,199,190,0.16); border:none}
.hero-sub{color:#064b4d; margin-bottom:1rem}

.btn{display:inline-block; padding:0.75rem 1.25rem; border-radius:8px; background:#fff; color:#055c5f; text-decoration:none; border:2px solid transparent; cursor:pointer}
.btn.primary{background:#06b7b0; color:#fff}

/* Animated navbar book button */
.nav-group .btn.book-link {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #05c7be, #049e9a);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(5, 199, 190, 0.3);
  transform: scale(0.95);
  opacity: 0.8;
  animation: navBookEnter 1.0s ease forwards;
  animation-delay: 1.2s;
  transition: all 0.3s ease;
}

.nav-group .btn.book-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  animation: navShimmer 3s infinite;
  animation-delay: 2s;
}

.nav-group .btn.book-link:hover {
  transform: scale(1.05) translateY(-2px);
  box-shadow: 0 8px 20px rgba(5, 199, 190, 0.4);
  filter: brightness(1.1);
}

@keyframes navBookEnter {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes navShimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* About */
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:center}
.about-grid img{width:100%; border-radius:12px; box-shadow:0 10px 30px rgba(8,44,44,0.06)}
.about-grid img{width:100%; border-radius:10px}

/* Cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.card{background:linear-gradient(180deg,#ffffff,#fbfbfb); border-radius:12px; overflow:hidden; box-shadow:0 8px 30px rgba(8,44,44,0.06); transition:transform .32s cubic-bezier(.2,.9,.2,1), box-shadow .32s cubic-bezier(.2,.9,.2,1);}
.card img{width:100%; height:160px; object-fit:cover}
.card h3{padding:0.85rem 1rem}
.card p{padding:0 1rem 1rem; color:#345656}
.card:hover{transform:translateY(-10px); box-shadow:0 20px 50px rgba(8,44,44,0.12)}
.card img{width:100%; height:140px; object-fit:cover}
.card h3{padding:0.75rem 1rem}
.card p{padding:0 1rem 1rem}
.card:hover{transform:translateY(-6px); box-shadow:0 10px 30px rgba(5,92,95,0.12)}

/* Gallery */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:0.6rem}
.gallery-grid img{width:100%; height:180px; object-fit:cover; border-radius:8px; transition:transform .35s ease, filter .35s ease}
.gallery-grid img:hover{transform:scale(1.03); filter:brightness(.98)}

/* Contact */
.contact-info{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.5rem; margin-bottom:2rem; padding:1.5rem; background:linear-gradient(135deg, #f8f9fa, #e9ecef); border-radius:12px; border:1px solid #dee2e6}
.contact-item{text-align:center; padding:1rem}
.contact-item h3{margin-bottom:0.5rem; color:#057d8c; font-size:1rem}
.contact-item p{margin:0}
.contact-item a{color:#113234; text-decoration:none; font-weight:500; transition:color .2s ease}
.contact-item a:hover{color:#057d8c}

.contact-form{display:grid; gap:0.75rem; max-width:640px}
.contact-form label{display:block}
.contact-form input, .contact-form textarea{width:100%; padding:0.75rem; border-radius:10px; border:1px solid #e6e6e6; background:#fff}

/* small decorative underline for headings */
h2{position:relative; padding-bottom:0.75rem}
h2:after{content:''; position:absolute; left:0; bottom:0; width:48px; height:4px; background:linear-gradient(90deg,#06b7b0,#049e9a); border-radius:8px}

/* Offers section */
.offers .muted{color:#6b8b88; margin-bottom:1rem}
.offers-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:1rem}
.offer-card{background:linear-gradient(180deg,#fff,#fbfbfb); border-radius:12px; overflow:hidden; box-shadow:0 12px 36px rgba(8,44,44,0.06); display:flex; flex-direction:column}
.offer-card img{width:100%; height:180px; object-fit:cover}
.offer-body{padding:1rem; display:flex; flex-direction:column; gap:0.5rem; flex:1}
.offer-price{font-weight:700; color:#049e9a}
.offer-body .btn{align-self:start}

@media(max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .offers-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .offers-grid{grid-template-columns:1fr}
}

/* Footer */
.site-footer{background:#fff; padding:1rem 0; margin-top:2rem}
.footer-grid{display:flex; justify-content:space-between; align-items:center}

/* Utilities */
.slide-in{opacity:0; transform:translateY(16px); transition:opacity .72s cubic-bezier(.2,.9,.2,1), transform .72s cubic-bezier(.2,.9,.2,1)}
.slide-in.visible{opacity:1; transform:translateY(0)}

/* subtle floating animation for parallax shape */
@keyframes floaty { 0%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-12px,0)}100%{transform:translate3d(0,0,0)} }
.parallax-shape{animation:floaty 8s ease-in-out infinite}

/* Responsive */
@media(max-width:900px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
}
/* Mobile Navigation - Hamburger Menu and Slide-in */
.hamburger-btn{
  display:none;
  background:none;
  border:none;
  position:fixed;
  top:1rem;
  left:1rem;
  z-index:10001;
  width:44px;
  height:44px;
  cursor:pointer;
  border-radius:8px;
  background:rgba(255,255,255,0.9);
  box-shadow:0 4px 12px rgba(8,44,44,0.1);
}

.hamburger{
  display:block;
  width:20px;
  height:2px;
  background:#04464b;
  margin:0 auto;
  position:relative;
  transition:all 0.3s ease;
}

.hamburger::before,
.hamburger::after{
  content:'';
  position:absolute;
  width:100%;
  height:2px;
  background:#04464b;
  transition:all 0.3s ease;
}

.hamburger::before{top:-6px}
.hamburger::after{top:6px}

/* Hamburger animation when active */
.nav-open .hamburger{background:transparent}
.nav-open .hamburger::before{transform:rotate(45deg); top:0}
.nav-open .hamburger::after{transform:rotate(-45deg); top:0}

/* Mobile slide-in menu */
.mobile-nav{
  position:fixed;
  top:0;
  left:-300px;
  width:280px;
  height:100vh;
  background:#fff;
  z-index:10000;
  transition:left 0.3s ease;
  box-shadow:2px 0 12px rgba(8,44,44,0.15);
  display:flex;
  flex-direction:column;
  padding:1rem 0;
}

.nav-open .mobile-nav{left:0}

.mobile-nav-logo{
  text-align:center;
  padding:1rem;
  border-bottom:1px solid #eee;
  margin-bottom:1rem;
}

.mobile-nav-logo img{
  height:60px;
  max-width:200px;
}

.mobile-nav-links{
  list-style:none;
  padding:0;
  margin:0;
}

.mobile-nav-links li{
  border-bottom:1px solid #f5f5f5;
}

.mobile-nav-links a{
  display:block;
  padding:1rem 1.5rem;
  color:#04464b;
  text-decoration:none;
  font-weight:600;
  transition:background 0.2s ease;
}

.mobile-nav-links a:hover,
.mobile-nav-links a.active{
  background:#f7efe6;
  color:#057d8c;
}

.mobile-nav-links .btn{
  margin:1rem 1.5rem;
  text-align:center;
  display:block;
}

/* Overlay for mobile nav */
.mobile-nav-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:9999;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.3s ease, visibility 0.3s ease;
}

.nav-open .mobile-nav-overlay{
  opacity:1;
  visibility:visible;
}

@media(max-width:600px){
  .hamburger-btn{display:block}
  .nav-center{display:none}
  .about-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr}
  .hero-title{font-size:1.5rem}
  .brand-logo{height:32px}
  
  /* Hide desktop nav on mobile */
  .navbar .nav-center{display:none}
  
  /* Hide site-header completely on mobile */
  .site-header{
    display:none !important;
  }
  
  /* Hide scrolled navbar completely on mobile */
  body.nav-scrolled .site-header,
  body.nav-scrolled .navbar,
  .site-header.scrolled,
  .navbar.scrolled{
    height:0;
    overflow:hidden;
    padding:0;
    opacity:0;
    visibility:hidden;
  }
  
  /* Remove top padding when navbar is hidden */
  body.nav-scrolled{
    padding-top:0;
  }
  
  /* Add padding to main container on mobile */
  main{
    padding-left:1rem;
    padding-right:1rem;
  }
  
  /* Also add padding to container elements */
  .container{
    padding-left:1rem;
    padding-right:1rem;
  }
}

/* Animations */
.hero-title.visible{opacity:1; transform:translateY(0)}


/* Offerings page overrides */
.offerings-page .site-header{ position:relative !important; left:auto !important; right:auto !important; transform:none !important; width:100% !important; margin:0; background:transparent; box-shadow:none; }
.offerings-page .navbar{ padding:1rem 1.25rem; background:transparent; position:relative }

/* responsive center container: use width 70% up to max 900px, but cap overall at 1000px and fallback to 100% on small screens */
.offerings-page main > .services-section > .container{
  width: 70%;
  max-width: 1000px;
  min-width: 320px;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* ensure the grid inside adapts: single column on small screens, two on medium, three on wide but constrained by the container */
.offerings-page .services-grid{ display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.offerings-page .service-card{ max-width:100%; }

@media (min-width: 700px){
  .offerings-page .services-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px){
  .offerings-page main > .services-section > .container{ width: 70%; }
  .offerings-page .services-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px){
  .offerings-page main > .services-section > .container{ width: 100%; padding: 0 1rem; }
}

/* simplified footer for offerings page */
.offerings-page .site-footer.simple-footer{ background: transparent; box-shadow: none; padding: 0; }
.offerings-page .site-footer.simple-footer .container{ max-width:1100px; margin:0 auto; }

/* white panel under navbar */
.offerings-page .page-panel{
  background: #ffffff;
  width: 70%;
  max-width: 1100px;
  margin: 3rem auto 0; /* increased from 1.25rem to 3rem */
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(8,44,44,0.06);
  min-height: 48px;
}

@media (max-width: 900px){
  .offerings-page .page-panel{ width: calc(100% - 2rem); margin: 2rem auto 0; } /* increased from 0.75rem to 2rem */
}

/* panel inner and cards */
.offerings-page .panel-inner{ padding: 1rem 1.25rem; }
.offerings-page .panel-content{ max-width:100%; }
.offerings-page .offer-cards{ display:grid; grid-template-columns: 1fr; gap:2rem; margin-top:0.75rem }
.offerings-page .offer-cards .service-card{ display:block; border-radius:12px; overflow:hidden; box-shadow:0 4px 20px rgba(8,44,44,0.1); background:#fff; }
.offerings-page .offer-cards .service-image{ width:100%; height:300px; object-fit:cover; border-radius:0; }
.offerings-page .offer-cards .service-content{ padding:1.5rem; }
.offerings-page .offer-cards .service-content h3{ margin-bottom:1rem; color:#113234; font-size:1.5rem; }
.offerings-page .offer-cards .service-content p{ margin-bottom:1rem; line-height:1.6; color:#2c5858; }
.offerings-page .offer-cards .service-content .call-info{ margin-top:1.5rem; padding-top:1rem; border-top:1px solid #e6e6e6; font-weight:600; color:#057d8c; }

@media(min-width:700px){
  .offerings-page .offer-cards{ grid-template-columns: 1fr }
}

@media(min-width:1100px){
  .offerings-page .offer-cards{ grid-template-columns: 1fr }
}

/* Accommodation page styles - copied from offerings page */
.accommodation-page .site-footer.simple-footer{ background: transparent; box-shadow: none; padding: 0; }
.accommodation-page .site-footer.simple-footer .container{ max-width:1100px; margin:0 auto; }

/* white panel under navbar */
.accommodation-page .page-panel{
  background: #ffffff;
  width: 70%;
  max-width: 1100px;
  margin: 5rem auto 0; /* increased from 3rem to 5rem for more spacing from navbar */
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(8,44,44,0.06);
  min-height: 48px;
}

@media (max-width: 900px){
  .accommodation-page .page-panel{ width: calc(100% - 2rem); margin: 3rem auto 0; } /* increased from 2rem to 3rem */
}

/* panel inner and cards */
.accommodation-page .panel-inner{ padding: 1rem 1.25rem; }
.accommodation-page .panel-content{ max-width:100%; }
.accommodation-page .offer-cards{ display:grid; grid-template-columns: 1fr; gap:2rem; margin-top:0.75rem }
.accommodation-page .offer-cards .service-card{ display:block; border-radius:12px; overflow:hidden; box-shadow:0 4px 20px rgba(8,44,44,0.1); background:#fff; }
.accommodation-page .offer-cards .service-image{ width:100%; height:300px; object-fit:cover; border-radius:0; }
.accommodation-page .offer-cards .service-content{ padding:1.5rem; }
.accommodation-page .offer-cards .service-content h3{ margin-bottom:1rem; color:#113234; font-size:1.5rem; }
.accommodation-page .offer-cards .service-content p{ margin-bottom:1rem; line-height:1.6; color:#2c5858; }
.accommodation-page .offer-cards .service-content .call-info{ margin-top:1.5rem; padding-top:1rem; border-top:1px solid #e6e6e6; font-weight:600; color:#057d8c; }

@media(min-width:700px){
  .accommodation-page .offer-cards{ grid-template-columns: 1fr }
}

@media(min-width:1100px){
  .accommodation-page .offer-cards{ grid-template-columns: 1fr }
}

/* Menu page overrides */
.menu-page .site-header{ position:relative !important; left:auto !important; right:auto !important; transform:none !important; width:100% !important; margin:0; background:transparent; box-shadow:none; }
.menu-page .navbar{ padding:1rem 1.25rem; background:transparent; position:relative }

/* responsive center container: use width 70% up to max 900px, but cap overall at 1000px and fallback to 100% on small screens */
.menu-page main > .services-section > .container{
  width: 70%;
  max-width: 1000px;
  min-width: 320px;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* ensure the grid inside adapts: single column on small screens, two on medium, three on wide but constrained by the container */
.menu-page .services-grid{ display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.menu-page .service-card{ max-width:100%; }

@media (min-width: 700px){
  .menu-page .services-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px){
  .menu-page main > .services-section > .container{ width: 70%; }
  .menu-page .services-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px){
  .menu-page main > .services-section > .container{ width: 100%; padding: 0 1rem; }
}

/* simplified footer for menu page */
.menu-page .site-footer.simple-footer{ background: transparent; box-shadow: none; padding: 0; }
.menu-page .site-footer.simple-footer .container{ max-width:1100px; margin:0 auto; }

/* white panel under navbar */
.menu-page .page-panel{
  background: #ffffff;
  width: 70%;
  max-width: 1100px;
  margin: 3rem auto 0; /* increased from 1.25rem to 3rem */
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(8,44,44,0.06);
  min-height: 48px;
}

@media (max-width: 900px){
  .menu-page .page-panel{ width: calc(100% - 2rem); margin: 2rem auto 0; } /* increased from 0.75rem to 2rem */
}

/* panel inner and cards */
.menu-page .panel-inner{ padding: 1rem 1.25rem; }
.menu-page .panel-content{ max-width:100%; }
.menu-page .offer-cards{ display:grid; grid-template-columns: 1fr; gap:2rem; margin-top:0.75rem }
.menu-page .offer-cards .service-card{ display:block; border-radius:12px; overflow:hidden; box-shadow:0 4px 20px rgba(8,44,44,0.1); background:#fff; }
.menu-page .offer-cards .service-image{ width:100%; height:300px; object-fit:cover; border-radius:0; }
.menu-page .offer-cards .service-image-menu{ width:100%; height:auto; object-fit:contain; border-radius:0; }
.menu-page .offer-cards .service-content{ padding:1.5rem; }
.menu-page .offer-cards .service-content h3{ margin-bottom:1rem; color:#113234; font-size:1.5rem; }
.menu-page .offer-cards .service-content p{ margin-bottom:1rem; line-height:1.6; color:#2c5858; }
.menu-page .offer-cards .service-content .call-info{ margin-top:1.5rem; padding-top:1rem; border-top:1px solid #e6e6e6; font-weight:600; color:#057d8c; }

@media(min-width:700px){
  .menu-page .offer-cards{ grid-template-columns: 1fr }
}

@media(min-width:1100px){
  .menu-page .offer-cards{ grid-template-columns: 1fr }
}

/* Price styling for menu items */
.menu-page .price, .offerings-page .price, .events-page .price{ font-weight:700; color:#057d8c; background:linear-gradient(90deg, rgba(5,199,190,0.08), rgba(4,158,154,0.04)); padding:0.35rem 0.6rem; border-radius:8px; font-size:1rem }

/* Events page overrides (identical to menu page) */
.events-page .site-header{ position:relative !important; left:auto !important; right:auto !important; transform:none !important; width:100% !important; margin:0; background:transparent; box-shadow:none; }
.events-page .navbar{ padding:1rem 1.25rem; background:transparent; position:relative }

/* responsive center container: use width 70% up to max 900px, but cap overall at 1000px and fallback to 100% on small screens */
.events-page main > .services-section > .container{
  width: 70%;
  max-width: 1000px;
  min-width: 320px;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* ensure the grid inside adapts: single column on small screens, two on medium, three on wide but constrained by the container */
.events-page .services-grid{ display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.events-page .service-card{ max-width:100%; }

@media (min-width: 700px){
  .events-page .services-grid{ grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px){
  .events-page main > .services-section > .container{ width: 70%; }
  .events-page .services-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 700px){
  .events-page main > .services-section > .container{ width: 100%; padding: 0 1rem; }
}

/* simplified footer for events page */
.events-page .site-footer.simple-footer{ background: transparent; box-shadow: none; padding: 0; }
.events-page .site-footer.simple-footer .container{ max-width:1100px; margin:0 auto; }

/* white panel under navbar */
.events-page .page-panel{
  background: #ffffff;
  width: 70%;
  max-width: 1100px;
  margin: 3rem auto 0; /* increased from 1.25rem to 3rem */
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(8,44,44,0.06);
  min-height: 48px;
}

@media (max-width: 900px){
  .events-page .page-panel{ width: calc(100% - 2rem); margin: 2rem auto 0; } /* increased from 0.75rem to 2rem */
}

/* panel inner and cards */
.events-page .panel-inner{ padding: 1rem 1.25rem; }
.events-page .panel-content{ max-width:100%; }
.events-page .offer-cards{ display:grid; grid-template-columns: 1fr; gap:2rem; margin-top:0.75rem }
.events-page .offer-cards .service-card{ display:block; border-radius:12px; overflow:hidden; box-shadow:0 4px 20px rgba(8,44,44,0.1); background:#fff; }
.events-page .offer-cards .service-image{ width:100%; height:300px; object-fit:cover; border-radius:0; }
.events-page .offer-cards .service-image-menu{ width:100%; height:auto; object-fit:contain; border-radius:0; }
.events-page .offer-cards .service-content{ padding:1.5rem; }
.events-page .offer-cards .service-content h3{ margin-bottom:1rem; color:#113234; font-size:1.5rem; }
.events-page .offer-cards .service-content p{ margin-bottom:1rem; line-height:1.6; color:#2c5858; }
.events-page .offer-cards .service-content .call-info{ margin-top:1.5rem; padding-top:1rem; border-top:1px solid #e6e6e6; font-weight:600; color:#057d8c; }

@media(min-width:700px){
  .events-page .offer-cards{ grid-template-columns: 1fr }
}

@media(min-width:1100px){
  .events-page .offer-cards{ grid-template-columns: 1fr }
}

/* ========================================
   POSTCARD STYLES - Full Page Scroll Snap
   ======================================== */

/* Main container with scroll snap */
.postcard-container {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  /* Add small top margin to account for sticky navbar */
  padding-top: 60px;
}

/* Individual postcard sections */
.postcard {
  height: calc(100vh - 60px);
  scroll-snap-align: start;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.postcard.visible {
  opacity: 1;
  transform: translateY(0);
}

.postcard.loaded {
  opacity: 1;
  transform: translateY(0);
}

/* Postcard front face */
.postcard-front {
  width: 100%;
  max-width: 1000px;
  height: calc(75vh - 30px);
  background: #fff;
  border-radius: 20px;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 8px 25px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  border: 4px solid #e8e8e8;
}

.postcard-front:hover {
  transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) scale(1.02);
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.2),
    0 12px 35px rgba(0, 0, 0, 0.15);
}

/* Background image for postcards */
.postcard-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.15;
  z-index: 1;
  transition: opacity 0.3s ease;
}

.postcard-front:hover .postcard-bg {
  opacity: 0.2;
}

.postcard-front:hover .postcard-hero {
  opacity: 0.2;
}

/* Postcard content */
.postcard-content {
  position: relative;
  z-index: 2;
  padding: 3rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Postcard stamp */
.postcard-stamp {
  position: absolute;
  top: 2rem;
  right: 2rem;
  background: #057d8c;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 1px;
  border: 2px dashed rgba(255, 255, 255, 0.7);
  transform: rotate(12deg);
  z-index: 3;
  transition: transform 0.3s ease;
}

.postcard-front:hover .postcard-stamp {
  transform: rotate(8deg) scale(1.05);
}

/* Postcard title */
.postcard-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #113234;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.8s ease forwards;
  animation-delay: 0.3s;
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Postcard message */
.postcard-message {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #2c5858;
  margin-bottom: 2rem;
  max-width: 600px;
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.8s ease forwards;
  animation-delay: 0.5s;
}

/* Postcard address (bottom right) */
.postcard-address {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  text-align: right;
  font-style: italic;
  color: #666;
  z-index: 3;
  opacity: 0;
  transform: translateX(20px);
  animation: slideInRight 0.8s ease forwards;
  animation-delay: 0.7s;
}

@keyframes slideInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.address-line {
  font-size: 0.9rem;
  line-height: 1.3;
}

/* CTA Button for postcards */
.postcard-cta {
  align-self: flex-start;
  margin-top: auto;
  font-size: 1.1rem;
  padding: 1rem 2rem;
  border-radius: 12px;
  text-transform: none;
  box-shadow: 0 8px 25px rgba(5, 125, 140, 0.3);
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.8s ease forwards;
  animation-delay: 0.9s;
}

.postcard-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 35px rgba(5, 125, 140, 0.4);
}

/* Specific postcard variations */
.postcard-hero .postcard-bg {
  opacity: 0.9;
}

/* Hero postcard layout with prominent logo */
.hero-content-wrapper {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3rem;
  align-items: center;
  height: 100%;
  width: 100%;
}

.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-container {
  background: rgba(214, 214, 214, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 25px;
  padding: 0.5rem;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 10px 20px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  opacity: 0;
  transform: scale(0.8) translateY(20px);
  animation: containerEnter 1.2s ease forwards;
  animation-delay: 0.6s;
  position: relative;
  overflow: hidden;
}

.logo-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: shimmer 2s infinite;
  animation-delay: 1.5s;
}

@keyframes containerEnter {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 100%; }
}

.gold-logo {
  max-width: 280px;
  max-height: 350px;
  width: auto;
  height: auto;
  filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
  opacity: 0;
  transform: scale(0.9);
  animation: logoEnter 1.0s ease forwards;
  animation-delay: 1.0s;
  transition: transform 0.3s ease;
}

.logo-container:hover .gold-logo {
  transform: scale(1.05);
}

@keyframes logoEnter {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.postcard-hero .postcard-title {
  margin-bottom: 1.5rem;
  max-width: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.postcard-hero .postcard-message {
  max-width: 500px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.postcard-about .postcard-bg {
  opacity: 1;
}

.postcard-about .postcard-content {
  color: white !important;
  transition: color 0.3s ease;
}

.postcard-about .postcard-content * {
  color: white !important;
  transition: color 0.3s ease;
}

.postcard-about .postcard-front:hover .postcard-content {
  color: #2c5858 !important;
}

.postcard-about .postcard-front:hover .postcard-content * {
  color: #2c5858 !important;
}

.postcard-about .postcard-front:hover .postcard-bg {
  opacity: 0.3;
}

.postcard-about .postcard-front:hover::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 1;
  transition: all 0.3s ease;
}

.postcard-offers .postcard-bg {
  opacity: 0.1;
}

.postcard-contact .postcard-bg {
  opacity: 0.15;
}

/* Different background patterns for variety */
.postcard-gallery .postcard-front {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.postcard-services .postcard-front {
  background: linear-gradient(135deg, #5FFB17 0%, #046307 100%);
  color: white;
  border: none;
}

.postcard-services .postcard-title,
.postcard-services .postcard-message {
  color: white;
}

.postcard-services .postcard-stamp {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Offer highlights */
.offer-highlights {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

.offer-item {
  background: linear-gradient(135deg, rgba(5, 125, 140, 0.1), rgba(5, 199, 190, 0.05));
  padding: 1rem;
  border-radius: 12px;
  border-left: 4px solid #057d8c;
  font-weight: 600;
  transform: translateX(-30px);
  opacity: 0;
  animation: slideInLeft 0.6s ease forwards;
}

.offer-item:nth-child(1) { animation-delay: 0.6s; }
.offer-item:nth-child(2) { animation-delay: 0.8s; }
.offer-item:nth-child(3) { animation-delay: 1.0s; }

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Services grid in postcard */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.service-item {
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  padding: 1.5rem;
  border-radius: 15px;
  border: 2px solid rgba(255, 255, 255, 0.5);
  transition: transform 0.3s ease;
  backdrop-filter: blur(10px);
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.6s ease forwards;
  text-decoration: none;
  color: inherit;
  display: block;
}

.service-item:nth-child(1) { animation-delay: 0.6s; }
.service-item:nth-child(2) { animation-delay: 0.8s; }
.service-item:nth-child(3) { animation-delay: 1.0s; }
.service-item:nth-child(4) { animation-delay: 1.2s; }

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  color: inherit;
}

.service-item img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 1rem;
}

.service-item h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #113234;
}

.service-item p {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.4;
}

/* Gallery grid in postcard */
.postcard .gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  max-height: 300px;
  overflow: hidden;
}

.postcard .gallery-grid img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.3s ease;
  opacity: 0;
  transform: scale(0.8);
  animation: zoomIn 0.6s ease forwards;
}

.postcard .gallery-grid img:nth-child(1) { animation-delay: 0.5s; }
.postcard .gallery-grid img:nth-child(2) { animation-delay: 0.6s; }
.postcard .gallery-grid img:nth-child(3) { animation-delay: 0.7s; }
.postcard .gallery-grid img:nth-child(4) { animation-delay: 0.8s; }
.postcard .gallery-grid img:nth-child(5) { animation-delay: 0.9s; }
.postcard .gallery-grid img:nth-child(6) { animation-delay: 1.0s; }

@keyframes zoomIn {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.postcard .gallery-grid img:hover {
  transform: scale(1.05);
  cursor: pointer;
}

/* Gallery images clickable styling */
.gallery-image {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.gallery-image::after {
  content: '🔍';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 0.5rem;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 1.2rem;
  pointer-events: none;
}

.gallery-image:hover::after {
  opacity: 1;
}

/* Lightbox Modal Styles */
.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.lightbox-overlay.active {
  opacity: 1;
  visibility: visible;
}

.lightbox-container {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-image {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
  position: absolute;
  top: -50px;
  right: -10px;
  background: none;
  border: none;
  color: white;
  font-size: 3rem;
  cursor: pointer;
  z-index: 10001;
  transition: color 0.3s ease;
  padding: 0.5rem;
  line-height: 1;
}

.lightbox-close:hover {
  color: #057d8c;
}

.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 2rem;
  cursor: pointer;
  padding: 1rem;
  border-radius: 50%;
  transition: all 0.3s ease;
  z-index: 10001;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-prev {
  left: -80px;
}

.lightbox-next {
  right: -80px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
  background: rgba(5, 125, 140, 0.8);
  border-color: rgba(5, 125, 140, 0.8);
  transform: translateY(-50%) scale(1.1);
}

.lightbox-caption {
  position: absolute;
  bottom: -60px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 500;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.75rem 1.5rem;
  border-radius: 25px;
  backdrop-filter: blur(10px);
}

.lightbox-counter {
  position: absolute;
  top: -50px;
  left: 0;
  color: white;
  font-size: 1rem;
  background: rgba(0, 0, 0, 0.5);
  padding: 0.5rem 1rem;
  border-radius: 20px;
  backdrop-filter: blur(10px);
}

/* Mobile lightbox adjustments */
@media (max-width: 768px) {
  .lightbox-prev {
    left: 10px;
    top: 10px;
    transform: none;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
  
  .lightbox-next {
    right: 10px;
    top: 10px;
    transform: none;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
  
  .lightbox-close {
    top: 10px;
    right: 50%;
    transform: translateX(50%);
    font-size: 2rem;
  }
  
  .lightbox-caption {
    bottom: 20px;
    font-size: 1rem;
    padding: 0.5rem 1rem;
  }
  
  .lightbox-counter {
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.9rem;
  }
  
  .gallery-image::after {
    font-size: 1rem;
    padding: 0.4rem;
  }
}

/* Contact wrapper for side-by-side layout */
.contact-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
  width: 100%;
}

/* Contact image styling */
.contact-image {
  display: flex;
  align-items: start;
  justify-content: center;
  height: 100%;
}

.reception-image {
  width: 100%;
  max-width: 400px;
  height: 300px;
  border-radius: 20px;
  border: 3px solid rgba(255, 255, 255, 0.8);
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.2),
    0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  opacity: 0;
  transform: translateX(20px);
  animation: slideInRight 0.8s ease forwards;
  animation-delay: 0.9s;
}

.reception-image:hover {
  transform: translateY(-5px);
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.25),
    0 6px 20px rgba(0, 0, 0, 0.15);
}

@keyframes slideInRight {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Contact form in postcard */
.postcard .contact-form {
  max-width: 500px;
  margin-top: 0;
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.8s ease forwards;
  animation-delay: 0.8s;
  width: 100%;
}

.postcard .contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.postcard .contact-form label {
  display: block;
  margin-bottom: 1rem;
}

.postcard .contact-form span {
  display: block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: #113234;
  font-size: 0.9rem;
}

.postcard .contact-form input,
.postcard .contact-form textarea {
  width: 100%;
  padding: 0.6rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  font-family: inherit;
  transition: border-color 0.3s ease;
  font-size: 0.9rem;
}

.postcard .contact-form textarea {
  resize: vertical;
  min-height: 60px;
}

.postcard .contact-form input:focus,
.postcard .contact-form textarea:focus {
  outline: none;
  border-color: #057d8c;
}

/* Form message styles */
.form-message {
  margin-top: 0.5rem;
  padding: 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  transition: all 0.3s ease;
}

.form-message.success {
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}

.form-message.error {
  background-color: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}

.postcard .contact-info {
  margin-bottom: 2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: slideInUp 0.8s ease forwards;
  animation-delay: 0.6s;
}

.postcard .contact-item {
  margin-bottom: 1rem;
}

.postcard .contact-item h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: #113234;
}

/* Footer postcard styles */
.postcard-footer .postcard-front {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border: 3px solid #dee2e6;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 2rem;
  width: 100%;
}

.footer-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #113234;
  margin-bottom: 1rem;
  border-bottom: 2px solid #057d8c;
  padding-bottom: 0.5rem;
}

.footer-logo {
  width: 80px;
  height: auto;
  margin-bottom: 1rem;
}

.footer-tagline {
  font-style: italic;
  color: #666;
  font-size: 0.9rem;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-links a {
  color: #2c5858;
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: #057d8c;
}

.social-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.social-links a {
  color: #2c5858;
  text-decoration: none;
  transition: color 0.3s ease;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.social-links a:hover {
  color: #057d8c;
}

.social-logo {
  width: 20px;
  height: 20px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.social-links a:hover .social-logo {
  transform: scale(1.1);
}

.footer-contact p {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  color: #2c5858;
}

.footer-bottom {
  margin-top: 2rem;
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid #dee2e6;
}

.footer-bottom p {
  margin-bottom: 0.5rem;
  color: #666;
}

.footer-subtitle {
  font-style: italic;
  font-size: 0.9rem;
}

/* Navigation dots */
.postcard-nav {
  position: fixed;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.nav-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid #057d8c;
  background: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  padding: 0;
  text-indent: -9999px;
  overflow: hidden;
}

.nav-dot:hover {
  background: rgba(5, 125, 140, 0.3);
  transform: scale(1.2);
}

.nav-dot.active {
  background: #057d8c;
  transform: scale(1.3);
  box-shadow: 0 0 20px rgba(5, 125, 140, 0.6);
}

.nav-dot::after {
  content: attr(data-section);
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
  background: #113234;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  text-indent: 0;
  text-transform: capitalize;
}

.nav-dot:hover::after {
  opacity: 1;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .postcard-container {
    padding-top: 50px;
  }
  
  .postcard {
    padding: 1rem;
    height: calc(100vh - 50px);
  }
  
  .postcard-front {
    height: calc(80vh - 25px);
  }
  
  .postcard-content {
    padding: 2rem 1.5rem;
  }
  
  /* Hero mobile layout */
  .hero-content-wrapper {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  
  .logo-container {
    padding: 2rem;
    border-radius: 20px;
  }
  
  .gold-logo {
    max-width: 200px;
    max-height: 250px;
  }
  
  /* Contact mobile layout */
  .contact-wrapper {
    margin-top: 1rem;
  }
  
  .postcard .contact-form {
    max-width: 100%;
  }
  
  .postcard .contact-form .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  
  .reception-image {
    max-width: 300px;
    border-radius: 15px;
    border-width: 2px;
  }
  
  /* Footer mobile layout */
  .footer-content {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .postcard-title {
    font-size: 2rem;
  }
  
  .postcard-message {
    font-size: 1rem;
  }
  
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  
  .service-item {
    padding: 1rem;
  }
  
  .postcard .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .postcard-nav {
    right: 1rem;
    gap: 0.75rem;
  }
  
  .nav-dot {
    width: 10px;
    height: 10px;
  }
  
  .postcard-stamp {
    top: 1rem;
    right: 1rem;
    padding: 0.4rem 0.8rem;
    font-size: 0.7rem;
  }
  
  .postcard-address {
    bottom: 1rem;
    right: 1rem;
  }
}

@media (max-width: 480px) {
  .postcard-title {
    font-size: 1.75rem;
  }
  
  /* Hero mobile layout for small screens */
  .logo-container {
    padding: 1.5rem;
    border-radius: 15px;
  }
  
  .gold-logo {
    max-width: 150px;
    max-height: 180px;
  }
  
  .hero-content-wrapper {
    gap: 1.5rem;
  }
  
  /* Footer mobile layout for small screens */
  .footer-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  .offer-highlights {
    gap: 0.75rem;
  }
  
  .offer-item {
    padding: 0.75rem;
  }
  
  .postcard .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  
  .postcard .gallery-grid img {
    height: 100px;
  }
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Hide navbar when in postcard mode (optional) */
body.postcard-mode .site-header {
  opacity: 0.95;
  backdrop-filter: blur(10px);
}

/* Pause animations when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .postcard-title,
  .postcard-message,
  .postcard-address,
  .postcard-cta,
  .offer-item,
  .service-item,
  .postcard .gallery-grid img,
  .postcard .contact-form,
  .postcard .contact-info {
    animation: none;
    opacity: 1;
    transform: none;
  }
  
  .postcard {
    opacity: 1;
    transform: none;
  }
}

/* Simple Header Styles for Legal Pages */
.simple-header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.simple-header .container {
  padding: 0 2rem;
}

.simple-header .brand {
  font-size: 1.2rem;
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.simple-header .brand:hover {
  opacity: 0.8;
}

/* Terms & Conditions Styling */
.terms-section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.terms-section h2 {
  color: #057d8c;
  font-size: 1.4rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #f1e8dc;
  font-weight: 600;
}

.terms-section p {
  color: #113234;
  line-height: 1.7;
  font-size: 1rem;
}

/* Main content area for legal pages */
main.container.section {
  background: transparent;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Page title styling */
main h1 {
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 3rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}