:root {
  --max: 1180px;
  --text: #222;
  --muted: #6e6e6e;
  --line: #e6e6e6;
  --accent: #e05a44;
  --drop: #4a4a4a;
  --footerTop: #7b8679;
  --footerBottom: #3f5667;
  --bg: #fff;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Montserrat", ui-sans-serif, system-ui, -apple-system, Segoe UI,
    Roboto, Arial;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
a {
  color: inherit;
  text-decoration: none;
}
.container {
  width: min(var(--max), calc(100% - 48px));
  margin: 0 auto;
}
@media (max-width: 720px) {
  .container {
    width: calc(100% - 28px);
  }
}

/* topline */
.topline {
  font-size: 12px;
  color: var(--muted);
  padding: 8px 0;
  background: #fff;
}
.toplineRow {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.openHours {
  color: var(--accent);
  font-weight: 600;
  margin-left: 6px;
}

/* header */
.header {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--line);
}
.headerRow {
  display: grid;
  grid-template-columns: 260px 1fr 170px;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
}
@media (max-width: 980px) {
  .headerRow {
    grid-template-columns: 1fr auto;
  }
}

/* Mobile menu toggle */
.menuToggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 30px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 110;
}
.menuToggle span {
  width: 100%;
  height: 3px;
  background: #2b2b2b;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center;
}
.menuToggle.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.menuToggle.active span:nth-child(2) {
  opacity: 0;
}
.menuToggle.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}
@media (max-width: 980px) {
  .menuToggle {
    display: flex;
  }
}

.logo svg {
  margin-top: -20px;
  padding: 3px;
  height: 70px;
  display: block;
  margin-bottom: 10px;
}
.logo .cls-1 {
  fill: #111;
}

.nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}
@media (max-width: 980px) {
  /* topline like expected (red bar) */
  .topline {
    background: var(--accent) !important;
    color: #fff !important;
    padding: 10px 0 !important;
  }
  .toplineRow { justify-content: center !important; }
  .openLabel { color: #fff !important; }
  .openHours { color: #fff !important; margin-left: 6px !important; font-weight: 700 !important; }

  /* header layout: logo left + mobile icons + burger */
  .headerRow {
    grid-template-columns: 1fr auto auto auto !important;
    gap: 12px !important;
  }
  .logo svg {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 54px !important;
  }

  /* show mobile icons before hamburger */
  .headerIcons {
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  
  /* hide desktop icons on mobile */
  .icons {
    display: none !important;
  }

  /* Full screen menu overlay */
  .nav {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: rgba(0,0,0,0.65) !important;
    backdrop-filter: blur(4px) !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    overflow-y: auto !important;

    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease !important;
    z-index: 105 !important;
    gap: 0 !important;
  }
  .nav.active {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .navLink {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 40px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #fff !important;
    border: none !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
  }
  .navLink:hover { 
    color: var(--accent) !important; 
    text-decoration: none !important; 
  }

  .navSep { display: none !important; }

  .navItem { 
    width: 100% !important;
    max-width: 400px !important;
    text-align: center !important;
  }
  .navItem::after { display: none !important; }

  /* caret for dropdown parents */
  .navItem > .navLink {
    position: relative !important;
  }
  .navItem > .navLink::after {
    content: "" !important;
    width: 10px !important;
    height: 10px !important;
    border-right: 2px solid currentColor !important;
    border-bottom: 2px solid currentColor !important;
    transform: rotate(45deg) !important;
    position: absolute !important;
    right: 80px !important;
    top: 50% !important;
    margin-top: -7px !important;
    transition: transform 0.3s ease !important;
    opacity: 0.8 !important;
  }
  .navItem.open > .navLink::after {
    transform: rotate(-135deg) !important;
    margin-top: -3px !important;
  }

  /* dropdown inside overlay */
  .dropdown {
    position: static !important;
    background: rgba(255,255,255,0.05) !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 8px !important;

    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease !important;

    opacity: 1 !important;
    transform: none !important;
  }
  .navItem.open .dropdown { 
    max-height: 500px !important;
    margin-bottom: 8px !important;
  }

  .dropdown a {
    color: rgba(255,255,255,0.85) !important;
    padding: 14px 20px !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    text-decoration: none !important;
    display: block !important;
    transition: color 0.2s ease !important;
  }
  .dropdown a:hover {
    background: transparent !important;
    color: #fff !important;
    text-decoration: none !important;
  }

  /* burger / X */
  .menuToggle { display: flex !important; z-index: 110 !important; }
  .menuToggle.active span { background: var(--accent) !important; }

  /* prevent page scroll while menu open */
  body.navOpen { overflow: hidden !important; }

  /* hide icons block inside nav if exists */
  .nav .icons { display: none !important; }
}

.navItem {
  position: relative;
}
.navItem::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 20px;
  background: transparent;
}
.navLink {
  display: inline-block;
  padding: 10px 6px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2b2b2b;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
}
.navLink:hover {
  color: #000;
  text-decoration: none;
}
.navLink.active {
  color: var(--accent);
}
.navSep {
  margin: 0 6px;
  opacity: 0.65;
}

.dropdown {
  position: absolute;
  min-width: 100%;
  top: 100%;
  left: 0;
  white-space: normal;
  background: var(--drop);
  --tw-bg-opacity: 0.8;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  max-height: 0px;
  --tw-scale-y: 0;
  transform: scaleY(var(--tw-scale-y));
  transform-origin: top;
  opacity: 0;
  z-index: 120;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}
.dropdown a {
  display: block;
  padding: 12px 18px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  transition: background-color 0.2s ease;
  text-decoration: none;
}
.dropdown a:hover {
  opacity: 0.9;
  background-color: #FFF;
  color: var(--accent);
  text-decoration: none;
}
.navItem:hover .dropdown {
  opacity: 1;
  max-height: 500px;
  --tw-scale-y: 1;
  transform: scaleY(1);
}
.dropdown:hover {
  opacity: 1;
  max-height: 500px;
  --tw-scale-y: 1;
  transform: scaleY(1);
}
.navItem:hover > .navLink {
  color: var(--accent);
}

/* icons */
.icons {
  display: flex;
  /* gap: 10px; */
  justify-content: flex-start !important;
  align-items: center;
}

/* hide mobile headerIcons on desktop */
.headerIcons {
  display: none;
}

.iconBtn {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #333;
  padding: 0;
}
.iconBtn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.iconBtn:hover {
  color: var(--accent);
}

/* user panel via target */
.panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  z-index: 130;
  pointer-events: none;
}
.panelInner {
  background: rgba(60, 60, 60, 0.96);
  color: #fff;
  padding: 32px 28px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  text-align: center;
  width: 420px;
  max-width: calc(100vw - 40px);
  position: absolute;
  top: 110px;
  right: calc((100vw - min(var(--max), calc(100% - 48px))) / 2);
  pointer-events: auto;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (max-width: 980px) {
  .panelInner {
    right: 20px;
  }
}
.panelTitle {
  font-family: "Playfair Display", Georgia, serif;
  font-size: 42px;
  margin: 0 0 14px;
  line-height: 1.15;
  font-weight: 400;
}
.panelText {
  opacity: 0.92;
  font-size: 14px;
  margin: 0 0 22px;
  line-height: 1.65;
}
.ctaBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 46px;
  padding: 0 30px;
  background: var(--accent);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  font-weight: 600;
  transition: background 0.25s ease, transform 0.2s ease;
  border-radius: 2px;
}
.ctaBtn:hover {
  background: #d14a35;
  transform: translateY(-1px);
}
#user-panel:target {
  display: block;
}
#user-panel:target .panelInner {
  transform: translateY(0);
  opacity: 1;
}

/* search overlay via target */
.searchOverlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  z-index: 130;
  pointer-events: none;
}
#search-panel:target {
  display: block;
}
.overlayClose {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  pointer-events: auto;
  cursor: pointer;
}
.searchOverlayInner {
  background: rgba(50, 50, 50, 0.75);
  backdrop-filter: blur(8px);
  padding: 28px 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  max-width: 1180px;
  margin: 0 auto;
  position: relative;
  top: 110px;
  pointer-events: auto;
  transform: translateY(-15px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#search-panel:target .searchOverlayInner {
  transform: translateY(0);
  opacity: 1;
}
.searchOverlayInner input {
  display: block;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  outline: 0;
  height: 50px;
  padding: 0 20px;
  font-size: 15px;
  color: #fff;
  text-align: center;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
  border-radius: 3px;
}
.searchOverlayInner input:focus {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.45);
  transform: scale(1.01);
}
.searchOverlayInner input::placeholder {
  color: rgba(255, 255, 255, 0.75);
}
.searchLine {
  display: none;
}

/* hero */
.hero {
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.heroImg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(0.95);
}
.heroShade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.08));
}
.heroTitle {
  position: absolute;
  left: calc((100vw - min(var(--max), calc(100% - 48px))) / 2);
  bottom: 120px;
  color: #fff;
  font-family: "Playfair Display", Georgia, serif;
  font-size: 72px;
  letter-spacing: 0.02em;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
@media (max-width: 980px) {
  .hero {
    height: 320px;
  }
  .heroTitle {
    left: 14px;
    font-size: 46px;
    bottom: 84px;
  }
}

/* home blocks */
.section {
  /* padding: 32px 0; */
}

/* Events Section with Background */
.eventsSection {
  position: relative;
  padding: 80px 0 90px;
  overflow: hidden;
}
.eventsBg {
  position: absolute;
  inset: 0;
  background-image: url('https://images.unsplash.com/photo-1516802273409-68526ee1bdd6?auto=format&fit=crop&w=2400&q=70');
  background-size: cover;
  background-position: center;
  opacity: 0.08;
  filter: blur(1px);
}
.eventsSection .container {
  position: relative;
  z-index: 1;
}

.tiles2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* gap: 12px; */
}
@media (max-width: 980px) {
  .tiles2 {
    grid-template-columns: 1fr;
  }
}
.tile {
  position: relative;
  height: 440px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.tileBg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tile:hover .tileBg {
  transform: scale(1.08);
}
.tileMask {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.1));
}
.tileLabel {
  position: absolute;
  left: 18px;
  bottom: 16px;
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  text-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.tileLabelRight {
  left: auto;
  right: 18px;
}

.centerBlock {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 34px 0;
  text-align: center;
}
.centerTitle {
  font-size: 18px;
  font-weight: 600;
}
.centerSub {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #444;
  margin-top: 2px;
}
.centerText {
  max-width: 620px;
  margin: 10px auto 16px;
  font-size: 11px;
  color: #666;
}
.centerBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 26px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.cards3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 980px) {
  .cards3 {
    grid-template-columns: 1fr;
  }
}
.card {
  border: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.cardTop {
  height: 200px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.card:hover .cardTop {
  transform: scale(1.08);
}
.cardBody {
  padding: 12px 14px;
}
.cardKicker {
  font-size: 12px;
  font-weight: 600;
  margin: 0 0 3px;
}
.cardMeta {
  font-size: 11px;
  color: #777;
  margin: 0;
}

.banner {
  margin-top: 22px;
  height: 240px;
  border: 1px solid var(--line);
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
}
.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.bannerInner {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  color: #fff;
}
.bannerTitle {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.bannerSub {
  font-size: 12px;
  margin: 4px 0 10px;
}
.bannerBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 18px;
  border: 1px solid rgba(255, 255, 255, 0.85);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.follow {
  padding: 30px 0 40px;
}
.followTitle {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}
.followHandle {
  font-size: 12px;
  color: #777;
  text-align: center;
  margin-top: 2px;
}
.igGrid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 980px) {
  .igGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.igImg {
  height: 200px;
  border: 1px solid var(--line);
  display: block;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}
.igImg:hover {
  transform: translateY(-4px);
}
.igImgBg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.igImg:hover .igImgBg {
  transform: scale(1.1);
}
.igOverlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px 16px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.igImg:hover .igOverlay {
  opacity: 1;
}
.igContent {
  width: 100%;
  color: #fff;
}
.igTitle {
  font-size: 15px;
  font-weight: 600;
  color: #ff6b6b;
  margin-bottom: 12px;
  text-align: left;
}
.igCaption {
  font-size: 13px;
  line-height: 1.6;
  color: #fff;
  text-align: left;
}

/* inner pages */
.page {
  padding: 18px 0 38px;
}
.pageHeading {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid #bdbdbd;
  padding-bottom: 8px;
  margin: 0 0 16px;
}
.pageHeading h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.filtersRow {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 10px 0 0;
}

.filterDropdown {
  position: relative;
  width: 260px;
}
.filterBtn {
  width: 100%;
  height: 42px;
  background: #4a90e2;
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.filterBtn:hover {
  background: #3a7bc8;
}
.filterMenu {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: white;
  border: 1px solid #d0d0d0;
  border-top: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
}
.filterMenu.active {
  max-height: 300px;
}
.filterOption {
  padding: 12px 16px;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
  color: #4e6478;
}
.filterOption:hover {
  background: #f5f5f5;
}
.filterOption.selected {
  background: #e8f4ff;
  color: #4a90e2;
}

.selectBox {
  width: 210px;
  height: 36px;
  border: 1px solid #b9c8d6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4e6478;
}
.searchBox {
  flex: 1;
  border-bottom: 1px solid #bdbdbd;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 0 6px 6px;
}
.searchBox input {
  border: 0;
  outline: 0;
  width: 100%;
  font-size: 12px;
}
.searchBox .miniIcon {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.storeGrid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
@media (max-width: 980px) {
  .storeGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.storeCell {
  position: relative;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.storeCell:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.storeImage {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: #f0f0f0;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.storeCell:hover .storeImage {
  transform: scale(1.08);
}
.storeInfo {
  padding: 16px;
  background: white;
}
.storeCell .storeName {
  font-size: 15px;
  font-weight: 600;
  color: #222;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}
.storeDesc {
  font-size: 12px;
  color: #888;
  letter-spacing: 0.01em;
}
.badge {
  position: absolute;
  left: 12px;
  top: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.offerRow {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid #bdbdbd;
}
.offerLogo {
  width: 110px;
  height: 80px;
  border: 1px solid var(--line);
  background: #e8e3db;
  display: grid;
  place-items: center;
  font-weight: 700;
}
.offerTitle {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}
.offerMeta {
  margin: 2px 0 6px;
  font-size: 11px;
  color: #777;
}
.offerLink {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.02em;
}

/* footer */
.footerTop {
  background: var(--footerTop);
  color: #fff;
  padding: 34px 0;
}
@media (max-width: 768px) {
  .footerTop {
    padding: 30px 0;
  }
}
.footerGrid {
  display: grid;
  grid-template-columns: 280px 1fr 300px;
  gap: 40px;
  align-items: flex-start;
}
@media (max-width: 980px) {
  .footerGrid {
    grid-template-columns: 1fr;
    gap: 35px;
  }
}
.footerCol {
  position: relative;
  padding-left: 28px;
}
.footerCol:first-child {
  padding-left: 0;
}
.footerCol:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
}
@media (max-width: 980px) {
  .footerCol {
    padding-left: 0;
  }
  .footerCol:not(:first-child)::before {
    display: none;
  }
}
@media (max-width: 768px) {
  .footerCol {
    text-align: center;
  }
}
.footerCol h4 {
  margin: 0 0 12px;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
@media (max-width: 768px) {
  .footerCol h4 {
    font-size: 15px;
    margin: 0 0 16px;
  }
}
.footerText {
  font-size: 14px;
  opacity: 0.95;
  margin: 3px 0;
}
@media (max-width: 768px) {
  .footerText {
    font-size: 15px;
    margin: 5px 0;
  }
}
.footerLink {
  display: block;
  margin: 10px 0 0;
  color: #fff;
  opacity: 0.95;
  font-size: 13px;
  letter-spacing: 0.04em;
}
@media (max-width: 768px) {
  .footerLink {
    font-size: 14px;
    margin: 12px 0 0;
  }
}
.footerLink:hover {
  opacity: 1;
  text-decoration: underline;
}
.footerBadge {
  display: inline-block;
  margin-top: 14px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  font-size: 13px;
  opacity: 0.95;
}
@media (max-width: 768px) {
  .footerBadge {
    margin-top: 18px;
  }
}
.footerLinks3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 980px) {
  .footerLinks3 {
    grid-template-columns: 1fr;
    gap: 25px;
  }
}
.footerLogo {
  position: relative;
  padding-left: 28px;
}
.footerLogo::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.3);
  height: 160px;
}
@media (max-width: 980px) {
  .footerLogo {
    padding-left: 0;
    text-align: center;
  }
  .footerLogo::before {
    display: none;
  }
}
.footerLogoWrap {
  display: flex;
  /* justify-content: flex-end; */
  margin-top: 60px;
}
@media (max-width: 980px) {
  .footerLogoWrap {
    justify-content: center;
    margin-top: 10px;
  }
}
.footerLogoWrap .siteLogo {
    height: 70px;
}
@media (max-width: 768px) {
  .footerLogoWrap .siteLogo {
    height: 60px;
  }
}

.footerLogoWrap .cls-1 {
  fill: #fff;
}
.footerBottom {
  background: var(--footerBottom);
  color: #fff;
  padding: 16px 0;
}
@media (max-width: 768px) {
  .footerBottom {
    padding: 20px 0;
  }
}
.footerBottomRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
@media (max-width: 768px) {
  .footerBottomRow {
    flex-direction: column;
    gap: 18px;
    text-align: center;
  }
}
.footerCopy {
  font-size: 13px;
  letter-spacing: 0.04em;
}
@media (max-width: 768px) {
  .footerCopy {
    font-size: 14px;
  }
}
.footerLegal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}
.footerLegal a {
  color: #fff;
  letter-spacing: 0.04em;
  font-size: 13px;
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .footerLegal a {
    font-size: 12px;
  }
}
.pipe {
  margin: 0 10px;
  opacity: 0.8;
}
@media (max-width: 480px) {
  .pipe {
    display: none;
  }
  .footerLegal {
    flex-direction: column;
    gap: 10px;
  }
}
.footerSocial {
  display: flex;
  gap: 12px;
  align-items: center;
}
.socialBtn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
}

/* Opening Hours Page Styles */
.openingSection {
  margin-bottom: 50px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line);
}
.openingSection:last-child {
  border-bottom: none;
}
.openingSubtitle {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 20px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.todayOpening {
  background: #f8f8f8;
  padding: 20px 24px;
  border-left: 3px solid var(--accent);
}
.todayDate {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 6px;
  text-transform: capitalize;
}
.todayHours {
  font-size: 18px;
  font-weight: 600;
  color: var(--text);
}
.storeSearchBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: transparent;
  border: 2px solid var(--text);
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.25s ease;
}
.storeSearchBtn:hover {
  background: var(--text);
  color: #fff;
}
.weekRange {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 20px;
}
.weekSchedule {
  margin-bottom: 30px;
}
.daySchedule {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.daySchedule:first-child {
  padding-top: 0;
}
.dayName {
  font-size: 14px;
  color: var(--text);
  text-transform: capitalize;
}
.dayHours {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.weekNav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}
.weekNavBtn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: white;
  border: 1px solid #ddd;
  cursor: pointer;
  transition: all 0.2s;
}
.weekNavBtn:hover {
  background: #f5f5f5;
  border-color: #bbb;
}
.weekNavBtn svg {
  width: 16px;
  height: 16px;
}
.weekDots {
  display: flex;
  gap: 8px;
}
.weekDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  transition: all 0.3s;
}
.weekDot.active {
  background: var(--accent);
  transform: scale(1.3);
}

/* Store Detail Page */
.storeHero {
  position: relative;
  height: 400px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.storeHeroImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0.3;
}
.storeHeroOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
}
.storeHeroContent {
  padding: 40px 0;
  color: white;
}
.storeBreadcrumb {
  font-size: 13px;
  margin-bottom: 12px;
  opacity: 0.9;
}
.storeBreadcrumb a {
  color: white;
  text-decoration: none;
  transition: opacity 0.2s;
}
.storeBreadcrumb a:hover {
  opacity: 0.8;
}
.storeBreadcrumb span {
  margin: 0 8px;
}
.storeTitle {
  font-family: 'Playfair Display', serif;
  font-size: 48px;
  font-weight: 600;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}
.storeCategory {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.9;
}

.storeDetailGrid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 40px;
  margin-top: 40px;
}
@media (max-width: 980px) {
  .storeDetailGrid {
    grid-template-columns: 1fr;
  }
}

/* Gallery */
.storeGallery {
  margin-bottom: 40px;
}
.galleryMain {
  width: 100%;
  height: 500px;
  background: #f5f5f5;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
}
.galleryMain img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.galleryThumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.galleryThumb {
  height: 100px;
  background: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  border: 2px solid transparent;
}
.galleryThumb:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.galleryThumb.active {
  border-color: var(--accent);
}
.galleryThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Store Sections */
.storeSection {
  margin-bottom: 40px;
}
.storeSection h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #222;
}
.storeSection p {
  line-height: 1.8;
  color: #555;
  font-size: 15px;
}

.productTags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.productTag {
  padding: 8px 16px;
  background: #f0f0f0;
  border-radius: 20px;
  font-size: 13px;
  color: #555;
  transition: all 0.2s;
}
.productTag:hover {
  background: #e0e0e0;
}

.storeOffers {
  display: grid;
  gap: 16px;
}
.offerCard {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.2s;
}
.offerCard:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.offerImage {
  width: 120px;
  height: 80px;
  background: #f5f5f5;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
}
.offerInfo h5 {
  font-size: 16px;
  margin: 0 0 8px 0;
  color: #222;
}
.offerInfo p {
  font-size: 13px;
  color: #888;
  margin: 0;
}

/* Sidebar */
.storeSidebar {
  position: sticky;
  top: 20px;
}
.sidebarCard {
  background: white;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
}
.sidebarCard h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 20px 0;
  color: #222;
}

.contactItem {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
}
.contactItem:last-child {
  margin-bottom: 0;
}
.contactItem svg {
  flex-shrink: 0;
  color: var(--accent);
  margin-top: 2px;
}
.contactLabel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  margin-bottom: 4px;
}
.contactValue {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.openingHours {
  display: grid;
  gap: 12px;
}
.hourRow {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}
.hourDay {
  color: #555;
}
.hourTime {
  font-weight: 500;
  color: #222;
}
.hourRow.today {
  color: var(--accent);
  font-weight: 600;
}

.socialLinks {
  display: flex;
  gap: 12px;
}
.socialLink {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: #f5f5f5;
  border-radius: 50%;
  color: #555;
  transition: all 0.2s;
}
.socialLink:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-2px);
}

.visitStoreBtn {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--accent);
  color: white;
  text-align: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border-radius: 8px;
  transition: all 0.2s;
  letter-spacing: 0.02em;
}
.visitStoreBtn:hover {
  background: #d32f2f;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}

/* News Page */
.newsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 40px;
}
@media (max-width: 980px) {
  .newsGrid {
    grid-template-columns: 1fr;
  }
}
.newsCard {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}
.newsCard:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
.newsCard.featured {
  grid-column: 1 / -1;
  flex-direction: row;
}
@media (max-width: 980px) {
  .newsCard.featured {
    flex-direction: column;
  }
}
.newsCard.featured .newsImage {
  width: 50%;
  height: 400px;
}
@media (max-width: 980px) {
  .newsCard.featured .newsImage {
    width: 100%;
    height: 300px;
  }
}
.newsImage {
  width: 100%;
  height: 240px;
  background-size: cover;
  background-position: center;
  background-color: #f0f0f0;
  position: relative;
  overflow: hidden;
}
.newsCard:hover .newsImage::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.1);
}
.newsContent {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.newsCategory {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
}
.newsTitle {
  font-size: 22px;
  font-weight: 600;
  color: #222;
  margin: 0 0 12px 0;
  line-height: 1.3;
}
.newsCard.featured .newsTitle {
  font-size: 32px;
  margin-bottom: 16px;
}
.newsExcerpt {
  color: #666;
  line-height: 1.7;
  margin-bottom: 20px;
  flex: 1;
  font-size: 15px;
}
.newsMeta {
  display: flex;
  gap: 20px;
  font-size: 13px;
  color: #888;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
}
.newsDate::before {
  content: '📅 ';
  margin-right: 4px;
}
.newsRead::before {
  content: '⏱ ';
  margin-right: 4px;
}

/* Events Page */
.eventsGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 40px;
}
@media (max-width: 980px) {
  .eventsGrid {
    grid-template-columns: 1fr;
  }
}
.eventCard {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}
.eventCard:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
.eventCard.featured {
  grid-column: 1 / -1;
}
.eventCard.featured .eventImage {
  height: 400px;
}
.eventImage {
  width: 100%;
  height: 240px;
  background-size: cover;
  background-position: center;
  background-color: #f0f0f0;
  position: relative;
}
.eventCard:hover .eventImage::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.1);
}
.eventBadge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--accent);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.eventContent {
  padding: 24px;
  display: flex;
  gap: 20px;
}
.eventDate {
  flex-shrink: 0;
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--accent) 0%, #d32f2f 100%);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}
.eventDay {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.eventMonth {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
}
.eventInfo {
  flex: 1;
}
.eventTitle {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  margin: 0 0 10px 0;
  line-height: 1.3;
}
.eventCard.featured .eventTitle {
  font-size: 28px;
}
.eventDesc {
  color: #666;
  line-height: 1.7;
  margin-bottom: 16px;
  font-size: 14px;
}
.eventMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.eventMetaItem {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #888;
}
.eventMetaItem svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Article Detail Page */
.articleHero {
  position: relative;
  height: 500px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.articleHeroImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}
.articleHeroOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.8) 100%);
}
.articleHeroContent {
  position: relative;
  z-index: 2;
  padding: 60px 0;
  color: white;
  max-width: 900px;
}
.articleBreadcrumb {
  font-size: 13px;
  margin-bottom: 16px;
  opacity: 0.9;
}
.articleBreadcrumb a {
  color: white;
  text-decoration: none;
}
.articleBreadcrumb a:hover {
  opacity: 0.8;
}
.articleBreadcrumb span {
  margin: 0 8px;
}
.articleCategory {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
  color: var(--accent);
}
.articleTitle {
  font-family: 'Playfair Display', serif;
  font-size: 52px;
  font-weight: 600;
  margin: 0 0 20px 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.articleMeta {
  display: flex;
  gap: 24px;
  font-size: 14px;
  opacity: 0.9;
}
.articleBody {
  max-width: 800px;
  margin: 60px auto;
  padding: 0 20px;
}
.articleBody p {
  font-size: 17px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 24px;
}
.articleBody h2 {
  font-size: 32px;
  font-weight: 600;
  margin: 48px 0 24px 0;
  color: #222;
}
.articleBody h3 {
  font-size: 24px;
  font-weight: 600;
  margin: 36px 0 20px 0;
  color: #222;
}
.articleBody img {
  width: 100%;
  border-radius: 12px;
  margin: 40px 0;
}
.articleBody blockquote {
  border-left: 4px solid var(--accent);
  padding-left: 24px;
  margin: 32px 0;
  font-size: 20px;
  font-style: italic;
  color: #555;
}
.articleShare {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 2px solid #f0f0f0;
  text-align: center;
}
.articleShare h4 {
  font-size: 18px;
  margin-bottom: 20px;
  color: #222;
}
.shareButtons {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.shareBtn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #f5f5f5;
  color: #555;
  transition: all 0.2s;
}
.shareBtn:hover {
  background: var(--accent);
  color: white;
  transform: translateY(-2px);
}

/* About Page */
.aboutIntro {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
}
.aboutIntro h2 {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #222;
}
.lead {
  font-size: 18px;
  line-height: 1.7;
  color: #666;
}
.aboutStats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  margin-bottom: 80px;
}
@media (max-width: 980px) {
  .aboutStats {
    grid-template-columns: repeat(2, 1fr);
  }
}
.statCard {
  text-align: center;
  padding: 30px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.statNumber {
  font-size: 48px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 8px;
}
.statLabel {
  font-size: 14px;
  color: #666;
}
.aboutSection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 60px;
}
@media (max-width: 980px) {
  .aboutSection {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}
.aboutSection.reverse {
  direction: rtl;
}
.aboutSection.reverse > * {
  direction: ltr;
}
.aboutContent h3 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #222;
}
.aboutContent p {
  font-size: 16px;
  line-height: 1.8;
  color: #666;
  margin-bottom: 16px;
}
.aboutImage {
  height: 350px;
  background-size: cover;
  background-position: center;
  border-radius: 12px;
}
.aboutValues {
  margin-top: 80px;
  padding: 60px 0;
  background: #f9f9f9;
  border-radius: 12px;
}
.valuesGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
@media (max-width: 980px) {
  .valuesGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.valueCard {
  text-align: center;
  padding: 30px 20px;
}
.valueIcon {
  font-size: 48px;
  margin-bottom: 16px;
}
.valueCard h4 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #222;
}
.valueCard p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* Contact Page */
.contactGrid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  margin: 40px 0 60px;
}
@media (max-width: 980px) {
  .contactGrid {
    grid-template-columns: 1fr;
  }
}
.contactInfo h2 {
  font-size: 32px;
  margin-bottom: 16px;
  color: #222;
}
.contactIntro {
  font-size: 16px;
  color: #666;
  margin-bottom: 40px;
  line-height: 1.7;
}
.contactMethod {
  display: flex;
  gap: 16px;
  margin-bottom: 32px;
}
.contactMethodIcon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: #f5f5f5;
  border-radius: 8px;
  display: grid;
  place-items: center;
  color: var(--accent);
}
.contactMethod h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #222;
}
.contactMethod p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}
.socialMedia h4 {
  font-size: 16px;
  margin-bottom: 16px;
  color: #222;
}
.contactForm {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.contactForm h3 {
  font-size: 24px;
  margin-bottom: 24px;
  color: #222;
}
.formGroup {
  margin-bottom: 20px;
}
.formGroup label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  margin-bottom: 8px;
}
.formGroup input,
.formGroup select,
.formGroup textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  transition: all 0.2s;
}
.formGroup input:focus,
.formGroup select:focus,
.formGroup textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1);
}
.formRow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.checkbox input {
  width: auto;
}
.checkbox span {
  font-size: 14px;
  color: #666;
}
.submitBtn {
  width: 100%;
  padding: 14px 32px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.submitBtn:hover {
  background: #d32f2f;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(244, 67, 54, 0.3);
}
.mapSection {
  margin-top: 60px;
}
.mapSection h3 {
  font-size: 28px;
  margin-bottom: 24px;
  color: #222;
}

/* Offers Page */
.offersGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-top: 40px;
}
@media (max-width: 980px) {
  .offersGrid {
    grid-template-columns: 1fr;
  }
}
.offerCardNew {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: all 0.3s;
  position: relative;
}
.offerCardNew:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.offerCardNew.featured {
  grid-column: 1 / -1;
}
.offerBadge {
  position: absolute;
  top: 16px;
  right: 16px;
  background: var(--accent);
  color: white;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  z-index: 2;
}
.offerImageNew {
  height: 240px;
  background-size: cover;
  background-position: center;
}
.offerCardNew.featured .offerImageNew {
  height: 320px;
}
.offerContentNew {
  padding: 24px;
}
.offerStore {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.offerTitleNew {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  margin: 0 0 12px 0;
}
.offerCardNew.featured .offerTitleNew {
  font-size: 28px;
}
.offerDesc {
  font-size: 15px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 16px;
}
.offerMetaNew {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  font-size: 13px;
  color: #888;
  margin-bottom: 20px;
}
.offerBtn {
  display: inline-block;
  padding: 10px 24px;
  background: var(--accent);
  color: white;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s;
}
.offerBtn:hover {
  background: #d32f2f;
  transform: translateY(-2px);
}
.offersInfo {
  margin-top: 60px;
  padding: 40px;
  background: #f9f9f9;
  border-radius: 12px;
}
.offersInfo h3 {
  font-size: 28px;
  margin-bottom: 30px;
  text-align: center;
  color: #222;
}
.tipsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 980px) {
  .tipsGrid {
    grid-template-columns: 1fr;
  }
}
.tipCard {
  text-align: center;
  padding: 24px;
}
.tipIcon {
  font-size: 48px;
  margin-bottom: 16px;
}
.tipCard h4 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #222;
}
.tipCard p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}

/* Customer Club Page */
.clubHero {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}
.clubHero h2 {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #222;
}
.clubLead {
  font-size: 18px;
  color: #666;
  margin-bottom: 32px;
  line-height: 1.7;
}
.clubSignupBtn {
  display: inline-block;
  padding: 16px 48px;
  background: var(--accent);
  color: white;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.2s;
}
.clubSignupBtn:hover {
  background: #d32f2f;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(244, 67, 54, 0.3);
}
.clubBenefits {
  margin-bottom: 80px;
}
.clubBenefits h3 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
  color: #222;
}
.benefitsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 980px) {
  .benefitsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.benefitCard {
  text-align: center;
  padding: 32px 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: all 0.3s;
}
.benefitCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.benefitIcon {
  font-size: 56px;
  margin-bottom: 16px;
}
.benefitCard h4 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #222;
}
.benefitCard p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}
.clubLevels {
  margin-bottom: 80px;
}
.clubLevels h3 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
  color: #222;
}
.levelsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}
@media (max-width: 980px) {
  .levelsGrid {
    grid-template-columns: 1fr;
  }
}
.levelCard {
  background: white;
  border-radius: 12px;
  padding: 32px 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: all 0.3s;
}
.levelCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.levelCard.featured {
  border: 2px solid var(--accent);
  transform: scale(1.05);
}
.levelBadge {
  display: inline-block;
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.levelBadge.bronze {
  background: #cd7f32;
  color: white;
}
.levelBadge.silver {
  background: #c0c0c0;
  color: #333;
}
.levelBadge.gold {
  background: #ffd700;
  color: #333;
}
.levelCard h4 {
  font-size: 22px;
  margin-bottom: 8px;
  color: #222;
}
.levelReq {
  font-size: 13px;
  color: #888;
  margin-bottom: 20px;
}
.levelPerks {
  list-style: none;
  padding: 0;
}
.levelPerks li {
  font-size: 14px;
  color: #666;
  padding: 8px 0;
  border-top: 1px solid #f0f0f0;
}
.clubSignup {
  background: #f9f9f9;
  padding: 60px 40px;
  border-radius: 12px;
  margin-bottom: 60px;
}
.clubSignup h3 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
  color: #222;
}
.signupForm {
  max-width: 700px;
  margin: 0 auto;
  background: white;
  padding: 40px;
  border-radius: 12px;
}
.clubFaq {
  margin-top: 60px;
}
.clubFaq h3 {
  font-size: 32px;
  text-align: center;
  margin-bottom: 40px;
  color: #222;
}
.faqGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}
@media (max-width: 980px) {
  .faqGrid {
    grid-template-columns: 1fr;
  }
}
.faqItem {
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.faqItem h4 {
  font-size: 16px;
  margin-bottom: 12px;
  color: #222;
}
.faqItem p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
}
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 50%;
  cursor: pointer;
  color: var(--text);
  transition: all 0.2s ease;
}
.weekNavBtn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.weekDots {
  display: flex;
  gap: 8px;
  align-items: center;
}
.weekDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.2s ease;
}
.weekDot.active {
  background: var(--text);
}

/* Bus Schedule Page */
.busIntro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}
.busIntro h2 {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #222;
}
.linesGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 32px;
  margin-bottom: 60px;
}
@media (max-width: 768px) {
  .linesGrid {
    grid-template-columns: 1fr;
  }
}
.busLine {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.busNumber {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: white;
  font-size: 28px;
  font-weight: 700;
  flex-shrink: 0;
}
.busInfo h4 {
  font-size: 18px;
  margin-bottom: 6px;
  color: #222;
}
.busInfo p {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}
.busFreq {
  font-size: 13px;
  color: #999;
}
.busSchedule {
  margin-bottom: 60px;
}
.busSchedule h3 {
  font-size: 28px;
  margin-bottom: 24px;
  color: #222;
}
.scheduleNote {
  background: #f8f9fa;
  padding: 24px;
  border-radius: 8px;
  margin-bottom: 32px;
}
.scheduleNote p {
  margin-bottom: 8px;
  color: #333;
}
.quickSchedule h4 {
  font-size: 20px;
  margin-bottom: 20px;
  color: #222;
}
.departuresList {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.departure {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: white;
  border-radius: 8px;
  border-left: 4px solid var(--accent);
  font-size: 18px;
  font-weight: 600;
  color: #222;
}
.platform {
  font-size: 14px;
  font-weight: 400;
  color: #666;
}
.busTickets {
  margin-bottom: 60px;
}
.busTickets h3 {
  font-size: 28px;
  margin-bottom: 32px;
  text-align: center;
  color: #222;
}
.ticketsInfo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}
@media (max-width: 980px) {
  .ticketsInfo {
    grid-template-columns: 1fr;
  }
}
.ticketCard {
  text-align: center;
  padding: 32px 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.ticketCard h4 {
  font-size: 18px;
  margin-bottom: 16px;
  color: #222;
}
.ticketCard .price {
  font-size: 36px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 12px;
}
.ticketCard p {
  font-size: 14px;
  color: #666;
}
.busLinks {
  margin-bottom: 40px;
}
.busLinks h3 {
  font-size: 28px;
  margin-bottom: 32px;
  text-align: center;
  color: #222;
}
.linksGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) {
  .linksGrid {
    grid-template-columns: 1fr;
  }
}
.linkCard {
  text-align: center;
  padding: 32px 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: all 0.3s;
  color: inherit;
}
.linkCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.linkIcon {
  font-size: 48px;
  margin-bottom: 16px;
}
.linkCard h4 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #222;
}
.linkCard p {
  font-size: 14px;
  color: #666;
}

/* Directions/Find Us Page */
.directionsIntro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}
.directionsIntro h2 {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #222;
}
.addressCard {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px;
  background: linear-gradient(135deg, var(--accent) 0%, #d32f2f 100%);
  border-radius: 16px;
  margin-bottom: 60px;
  color: white;
}
.addressIcon {
  font-size: 48px;
}
.addressInfo h3 {
  font-size: 24px;
  margin-bottom: 8px;
}
.addressInfo p {
  font-size: 18px;
  margin-bottom: 16px;
}
.getDirections {
  color: white;
  text-decoration: underline;
  font-size: 16px;
}
.transportOptions {
  margin-bottom: 60px;
}
.transportOptions h3 {
  font-size: 32px;
  margin-bottom: 32px;
  text-align: center;
  color: #222;
}
.transportGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 980px) {
  .transportGrid {
    grid-template-columns: 1fr;
  }
}
.transportCard {
  padding: 28px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.transportIcon {
  font-size: 40px;
  margin-bottom: 16px;
}
.transportCard h4 {
  font-size: 20px;
  margin-bottom: 16px;
  color: #222;
}
.transportCard p {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 12px;
}
.mapSection {
  margin-bottom: 60px;
}
.mapSection h3 {
  font-size: 28px;
  margin-bottom: 24px;
  color: #222;
}
.mapPlaceholder {
  margin-bottom: 24px;
}
.landmarksSection {
  margin-bottom: 60px;
}
.landmarksSection h3 {
  font-size: 28px;
  margin-bottom: 32px;
  text-align: center;
  color: #222;
}
.landmarksGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) {
  .landmarksGrid {
    grid-template-columns: 1fr;
  }
}
.landmark {
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.landmarkDist {
  font-size: 24px;
  margin-bottom: 12px;
}
.landmark h4 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #222;
}
.landmark p {
  font-size: 14px;
  color: #666;
}
.directionsCTA {
  text-align: center;
  padding: 60px 0;
}
.directionsCTA h3 {
  font-size: 28px;
  margin-bottom: 16px;
  color: #222;
}
.directionsCTA p {
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
}

/* Lost and Found Page */
.lostFoundIntro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}
.lostFoundIntro h2 {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #222;
}
.lostFoundSteps {
  margin-bottom: 60px;
}
.lostFoundSteps h3 {
  font-size: 28px;
  margin-bottom: 32px;
  text-align: center;
  color: #222;
}
.stepCard {
  text-align: center;
  padding: 32px 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.stepNumber {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 700;
  margin: 0 auto 20px;
}
.stepCard h4 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #222;
}
.stepCard p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}
.lostFoundInfo {
  margin-bottom: 60px;
}
.infoGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) {
  .infoGrid {
    grid-template-columns: 1fr;
  }
}
.infoCard {
  padding: 28px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.infoIcon {
  font-size: 40px;
  margin-bottom: 16px;
}
.infoCard h4 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #222;
}
.infoCard p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 8px;
}
.commonItems {
  margin-bottom: 60px;
}
.commonItems h3 {
  font-size: 28px;
  margin-bottom: 24px;
  text-align: center;
  color: #222;
}
.itemsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 980px) {
  .itemsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.itemTag {
  padding: 16px;
  background: white;
  border-radius: 8px;
  text-align: center;
  font-size: 14px;
  color: #333;
  border: 1px solid #e0e0e0;
}
.lostFoundTips {
  margin-bottom: 60px;
  padding: 32px;
  background: #f8f9fa;
  border-radius: 12px;
}
.lostFoundTips h3 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #222;
}
.lostFoundTips ul {
  list-style: none;
  padding: 0;
}
.lostFoundTips li {
  padding: 12px 0;
  padding-left: 32px;
  position: relative;
  color: #333;
  line-height: 1.6;
}
.lostFoundTips li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}
.lostFoundCTA {
  text-align: center;
  padding: 60px 0;
}
.lostFoundCTA h3 {
  font-size: 28px;
  margin-bottom: 16px;
  color: #222;
}
.lostFoundCTA p {
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Feedback Page */
.feedbackIntro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}
.feedbackIntro h2 {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #222;
}
.feedbackForm {
  max-width: 800px;
  margin: 0 auto 60px;
  padding: 40px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.feedbackOptions {
  margin-bottom: 60px;
}
.feedbackOptions h3 {
  font-size: 28px;
  margin-bottom: 32px;
  text-align: center;
  color: #222;
}
.optionsGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 980px) {
  .optionsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.optionCard {
  text-align: center;
  padding: 28px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.optionIcon {
  font-size: 40px;
  margin-bottom: 16px;
}
.optionCard h4 {
  font-size: 16px;
  margin-bottom: 12px;
  color: #222;
}
.optionCard p {
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}
.feedbackGuarantee {
  max-width: 700px;
  margin: 0 auto;
  padding: 32px;
  background: #f8f9fa;
  border-radius: 12px;
}
.feedbackGuarantee h3 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #222;
}
.feedbackGuarantee ul {
  list-style: none;
  padding: 0;
}
.feedbackGuarantee li {
  padding: 12px 0;
  padding-left: 32px;
  position: relative;
  color: #333;
  line-height: 1.6;
}
.feedbackGuarantee li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: 700;
}

/* Jobs Page */
.jobsIntro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}
.jobsIntro h2 {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #222;
}
.jobsGrid {
  display: grid;
  gap: 24px;
  margin-bottom: 60px;
}
.jobCard {
  padding: 32px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: all 0.3s;
}
.jobCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.jobHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.jobHeader h3 {
  font-size: 22px;
  color: #222;
}
.jobType {
  padding: 6px 16px;
  background: var(--accent);
  color: white;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
}
.jobDesc {
  font-size: 15px;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}
.jobDetails {
  margin-bottom: 20px;
}
.jobDetail {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
}
.jobBtn {
  display: inline-block;
  padding: 12px 32px;
  background: var(--accent);
  color: white;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  transition: all 0.2s;
}
.jobBtn:hover {
  background: #d32f2f;
  transform: translateX(4px);
}
.jobBenefits {
  margin-bottom: 60px;
}
.jobBenefits h3 {
  font-size: 28px;
  margin-bottom: 32px;
  text-align: center;
  color: #222;
}
.jobStores {
  text-align: center;
  padding: 40px;
  background: #f8f9fa;
  border-radius: 12px;
  margin-bottom: 40px;
}
.jobStores h3 {
  font-size: 24px;
  margin-bottom: 16px;
  color: #222;
}
.jobStores p {
  font-size: 16px;
  color: #666;
  margin-bottom: 24px;
}
.jobApplication {
  text-align: center;
  padding: 60px 0;
}
.jobApplication h3 {
  font-size: 28px;
  margin-bottom: 16px;
  color: #222;
}
.jobApplication p {
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Become Tenant Page */
.tenantIntro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}
.tenantIntro h2 {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #222;
}
.tenantStats {
  margin-bottom: 80px;
}
.statGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 980px) {
  .statGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.tenantBenefits {
  margin-bottom: 80px;
}
.tenantBenefits h3 {
  font-size: 32px;
  margin-bottom: 32px;
  text-align: center;
  color: #222;
}
.tenantProcess {
  margin-bottom: 80px;
}
.tenantProcess h3 {
  font-size: 28px;
  margin-bottom: 40px;
  text-align: center;
  color: #222;
}
.processSteps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 980px) {
  .processSteps {
    grid-template-columns: repeat(2, 1fr);
  }
}
.processStep {
  text-align: center;
}
.stepNum {
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: white;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 700;
  margin: 0 auto 20px;
}
.processStep h4 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #222;
}
.processStep p {
  font-size: 14px;
  color: #666;
  line-height: 1.6;
}
.availableSpaces {
  margin-bottom: 80px;
}
.availableSpaces h3 {
  font-size: 28px;
  margin-bottom: 32px;
  text-align: center;
  color: #222;
}
.spacesGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) {
  .spacesGrid {
    grid-template-columns: 1fr;
  }
}
.spaceCard {
  padding: 28px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.spaceCard h4 {
  font-size: 18px;
  margin-bottom: 20px;
  color: #222;
  padding-bottom: 16px;
  border-bottom: 2px solid #f0f0f0;
}
.spaceInfo {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.spaceDetail {
  font-size: 14px;
  color: #555;
}
.tenantContact {
  text-align: center;
  padding: 60px 0;
}
.tenantContact h3 {
  font-size: 28px;
  margin-bottom: 16px;
  color: #222;
}
.tenantContact > p {
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.tenantContact .contactInfo {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 32px;
}
.tenantContact .contactCard {
  text-align: center;
}
.tenantContact .contactCard h4 {
  font-size: 16px;
  margin-bottom: 8px;
  color: #222;
}
.tenantContact .contactCard p {
  font-size: 18px;
  color: var(--accent);
  font-weight: 600;
}

/* Map Overview Page */
.mapIntro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}
.mapIntro h2 {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #222;
}
.floorMap {
  margin-bottom: 60px;
}
.floorMap h3 {
  font-size: 28px;
  margin-bottom: 24px;
  color: #222;
}
.mapLegend {
  margin-top: 24px;
}
.mapLegend h4 {
  font-size: 18px;
  margin-bottom: 16px;
  color: #222;
}
.legendGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 980px) {
  .legendGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.legendItem {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #555;
}
.legendColor {
  width: 20px;
  height: 20px;
  border-radius: 4px;
}
.mapFeatures {
  margin-bottom: 60px;
}
.mapFeatures h3 {
  font-size: 28px;
  margin-bottom: 32px;
  text-align: center;
  color: #222;
}
.featuresGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) {
  .featuresGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.featureCard {
  text-align: center;
  padding: 28px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.featureIcon {
  font-size: 40px;
  margin-bottom: 12px;
}
.featureCard h4 {
  font-size: 16px;
  margin-bottom: 8px;
  color: #222;
}
.featureCard p {
  font-size: 13px;
  color: #666;
}
.mapDownload {
  text-align: center;
  margin-bottom: 40px;
}
.mapDownload h3 {
  font-size: 24px;
  margin-bottom: 16px;
  color: #222;
}
.mapDownload p {
  font-size: 16px;
  color: #666;
  margin-bottom: 24px;
}
.mapHelp {
  text-align: center;
  padding: 60px 0;
}
.mapHelp h3 {
  font-size: 28px;
  margin-bottom: 16px;
  color: #222;
}
.mapHelp p {
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
}

/* Dining/Spisesteder Page */
.diningIntro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
}
.diningIntro h2 {
  font-size: 40px;
  font-weight: 600;
  margin-bottom: 16px;
  color: #222;
}
.diningCTA {
  margin-bottom: 60px;
}
.diningHighlights {
  margin-bottom: 60px;
}
.diningHighlights h3 {
  font-size: 28px;
  margin-bottom: 32px;
  text-align: center;
  color: #222;
}
.highlightsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 980px) {
  .highlightsGrid {
    grid-template-columns: 1fr;
  }
}
.highlightCard {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: all 0.3s;
}
.highlightCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.highlightCard h4 {
  font-size: 18px;
  margin: 20px 20px 12px;
  color: #222;
}
.highlightCard p {
  font-size: 14px;
  color: #666;
  margin: 0 20px 20px;
}
.diningTypes {
  margin-bottom: 60px;
}
.diningTypes h3 {
  font-size: 28px;
  margin-bottom: 32px;
  text-align: center;
  color: #222;
}
.typesGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 980px) {
  .typesGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.typeCard {
  text-align: center;
  padding: 32px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  transition: all 0.3s;
  color: inherit;
}
.typeCard:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
.typeIcon {
  font-size: 48px;
  margin-bottom: 16px;
}
.typeCard h4 {
  font-size: 18px;
  margin-bottom: 8px;
  color: #222;
}
.typeCard p {
  font-size: 13px;
  color: #666;
}
.diningInfo {
  margin-bottom: 60px;
}
.diningInfo h3 {
  font-size: 28px;
  margin-bottom: 24px;
  text-align: center;
  color: #222;
}
.openingTable {
  max-width: 600px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.openingRow {
  display: flex;
  justify-content: space-between;
  padding: 20px 32px;
  border-bottom: 1px solid #f0f0f0;
}
.openingRow:last-child {
  border-bottom: none;
}
.openingDay {
  font-size: 16px;
  color: #333;
  font-weight: 500;
}
.openingHours {
  font-size: 16px;
  color: var(--accent);
  font-weight: 600;
}
.diningFeatures {
  margin-bottom: 40px;
}
.diningFeatures h3 {
  font-size: 28px;
  margin-bottom: 32px;
  text-align: center;
  color: #222;
}

/* Directions/Veibeskrivelse Page */
.directionsCards {
  margin-bottom: 60px;
}
.directionCard {
  background: white;
  border-radius: 12px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.directionHeader {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.directionIcon {
  font-size: 36px;
}
.directionHeader h3 {
  font-size: 22px;
  color: #222;
}
.directionSteps {
  padding-left: 20px;
  margin-bottom: 20px;
}
.directionSteps li {
  font-size: 15px;
  color: #555;
  line-height: 1.8;
  margin-bottom: 8px;
}
.directionTime {
  font-size: 14px;
  color: var(--accent);
  font-weight: 600;
}
.mapContainer {
  margin-bottom: 24px;
}
.gpsInfo {
  padding: 28px;
  background: #f8f9fa;
  border-radius: 12px;
  text-align: center;
}
.gpsInfo h4 {
  font-size: 20px;
  margin-bottom: 16px;
  color: #222;
}
.gpsInfo p {
  font-size: 15px;
  color: #555;
  margin-bottom: 8px;
}
.parkingReminder {
  text-align: center;
  padding: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16px;
  margin-bottom: 60px;
}
.parkingReminder h3 {
  font-size: 28px;
  margin-bottom: 16px;
}
.parkingReminder p {
  font-size: 16px;
  margin-bottom: 24px;
  opacity: 0.95;
}
.helpSection {
  margin-bottom: 40px;
}
.helpSection h3 {
  font-size: 28px;
  margin-bottom: 16px;
  text-align: center;
  color: #222;
}
.helpSection > p {
  text-align: center;
  font-size: 16px;
  color: #666;
  margin-bottom: 32px;
}
.helpContact {
  display: flex;
  justify-content: center;
  gap: 40px;
}
.helpCard {
  text-align: center;
  padding: 24px 32px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.helpCard h4 {
  font-size: 16px;
  margin-bottom: 8px;
  color: #222;
}
.helpCard p {
  font-size: 18px;
  color: var(--accent);
  font-weight: 600;
}

.nav ul{
	list-style: none;
	margin-bottom:0px;
	margin-top:0px;
	padding-left: 0px;
}

.nav ul > li{
display: inline-block;
margin-left: 16px;
}

.nav ul > li .sub-menu li{
display: block;
margin-left: 0px;

}

.nav ul > li .sub-menu{
position: absolute;
  white-space: normal;
  background: var(--drop);
  --tw-bg-opacity: 0.8;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
  --tw-scale-y: 0;
  transform: scaleY(var(--tw-scale-y));
  transform-origin: top;
  opacity: 0;
  z-index: 120;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
}


.nav ul .menu-item-has-children:hover .sub-menu {
  opacity: 1;
  max-height: 500px;
  --tw-scale-y: 1;
  transform: scaleY(1);
}


.sub-menu a {
  display: block;
  padding: 12px 18px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  transition: background-color 0.2s ease;
  text-decoration: none;
}


.sub-menu a:hover {
  opacity: 0.9;
  background-color: #FFF;
  color: var(--accent);
  text-decoration: none;
}


.nav ul > li .navLink:hover{
  color: var(--accent);
}