:root{
  --hatch-red:#8f0c16;
  --sun-cream:#fff6e5;
  --sage:#e7f3ee;
  --nav-bg: rgba(255, 246, 229, 0.9);   /* translucent on load */
  --nav-bg-solid: #fff6e5;               /* solid after scroll */
  --nav-border: rgba(143, 12, 22, 0.12); /* subtle red-tinted border */
  --desert-gold:#fbc02d;
  --app-bg:#0a0402;
}

/* ---------- NAVBAR ---------- */
#hatchNav{
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(8px);
  -webkit-backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  transition:
    background-color .25s ease,
    box-shadow .25s ease,
    padding .2s ease,
    border-color .25s ease;
  padding-top:.6rem;
  padding-bottom:.6rem;
}

#hatchNav.scrolled{
  background: var(--nav-bg-solid);
  border-bottom-color: rgba(143, 12, 22, 0.18);
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  padding-top:.35rem!important;
  padding-bottom:.35rem!important;
}

/* Brand */
.navbar-brand{
  font-size:1.15rem;
}
.navbar-brand span:first-of-type{
  color: var(--hatch-red);
  font-weight: 800;
  letter-spacing:.08em;
}
.navbar-brand span:nth-of-type(2){
  font-size:.8rem;
}

/* Links */
.navbar .nav-link{
  color: #333;
  font-weight: 600;
  position: relative;
  padding-top:.4rem;
  padding-bottom:.4rem;
}
.navbar .nav-link:hover{
  color: var(--hatch-red);
}

/* Underline for hover + active */
.navbar .nav-link::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-6px;
  height:2px;
  background: var(--hatch-red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.navbar .nav-link:hover::after,
.navbar .nav-link.active::after{
  transform: scaleX(1);
}

/* Buttons aligned with brand */
.btn-outline-dark{
  border-color: var(--hatch-red);
  color: var(--hatch-red);
}
.btn-outline-dark:hover,
.btn-outline-dark:focus{
  background: var(--hatch-red);
  border-color: var(--hatch-red);
  color: #fff;
}

/* Toggler (hamburger) */
.navbar-light .navbar-toggler{
  border: 0;
  padding:.1rem .25rem;
}
.navbar-light .navbar-toggler-icon{
  width: 1.6rem;
  height: 1.6rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='%238f0c16' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Offcanvas (mobile menu) */
.offcanvas{
  background: #fffefb;
  border-left: 1px solid var(--nav-border);
}
.offcanvas-header{
  border-bottom:1px solid rgba(0,0,0,.05);
}
.offcanvas .nav-link{
  font-size:1.05rem;
}
/* ---------- MOBILE APP BOTTOM NAV ---------- */
.app-tabbar{
  position:fixed;
  left:50%;
  bottom:10px;
  transform:translateX(-50%);
  width:100%;
  max-width:480px;
  padding:.35rem .45rem;
  display:flex;
  justify-content:space-between;
  gap:.15rem;
  background:rgba(10,3,1,0.94);
  border-radius:999px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  border:1px solid rgba(255,255,255,0.12);
  z-index:1000;
}

/* Only show this on mobile */
@media (min-width: 768px){
  .app-tabbar{
    display:none;
  }
}

.app-tab{
  flex:1;
  min-width:0;
  text-decoration:none;
  color:rgba(255,255,255,.7);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:.05rem;
  padding:.15rem .1rem;
  font-size:.7rem;
}

.app-tab-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:30px;
  height:30px;
  border-radius:999px;
  background:transparent;
  transition:
    background .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.app-tab i{
  font-size:1.15rem;
  line-height:1;
}

.app-tab-label{
  font-size:.62rem;
  letter-spacing:.03em;
}

/* Active / current page state */
.app-tab.active{
  color:var(--desert-gold);
}

.app-tab.active .app-tab-icon{
  background:rgba(251,192,45,0.16);
  box-shadow:0 0 12px rgba(251,192,45,0.7);
  transform:translateY(-1px);
}

/* Tap feedback */
.app-tab:active .app-tab-icon{
  transform:scale(0.94);
}

/* Tighten for very small phones */
@media (max-width: 360px){
  .app-tab-icon{
    width:26px;
    height:26px;
  }
  .app-tab i{
    font-size:1rem;
  }
  .app-tab-label{
    font-size:.58rem;
  }
}
/* ---------- LAYOUT / GLOBAL ---------- */

body{
  margin:0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.desktop-main{
  padding-top:72px;
}
/* Section wrapper you can use anywhere */
.page-section{
  padding: 4rem 2rem;
  border-radius: 1.25rem;
}
.page-section.alt{
  background: var(--sun-cream);
}
.page-section.primary{
  background: #fff;
}
.shell-mobile{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  background: radial-gradient(circle at top, #1b0803 0%, #070203 55%, #000 100%);
  color:#fff;
}
/* Top bar */
.app-topbar{
  position: relative;
  display: flex;
  align-items: center;
  height: 56px;
  padding: 0 .75rem;
  background: #1a0d00;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  z-index: 1100;
}


/* Focus states for a11y */
a:focus-visible,
button:focus-visible,
.form-control:focus-visible{
  outline: 3px solid var(--desert-gold);
  outline-offset: 2px;
}

/* ---------- HERO (HOME) ---------- */
.logo-round{
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 999px;
  background:#fff;
  padding:.5rem;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

.hero-wrap {
  position: relative;
  min-height: 60vh;
  display: flex;
  align-items: center;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.7) 100%);
  color: #fff;
}
.hero-wrap .container {
  position: relative;
  z-index: 1;
}
.hero-bg {
  pointer-events: none; 
  background: url("../img/hero-bg.jpg") center/cover no-repeat;
  position: absolute;
  inset: 0;
  z-index: 0;
  filter: brightness(0.55);
}
.hero-logo {
  max-width: 260px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,0.2);
  box-shadow: 0 0 30px rgba(0,0,0,0.6);
  transition: transform 0.3s ease;
}
.hero-logo:hover {
  transform: scale(1.05);
}

/* ---------- OTHER HERO VARIANTS (menu/location/story/etc) ---------- */

.hero-wrap-menu,
.hero-wrap-loc,
.hero-wrap-story,
.hero-wrap-catering,
.hero-wrap-contact{
  min-height: 60vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  color:#fff;
}

.hero-wrap-menu {
  background: radial-gradient(circle at center, rgba(0,0,0,0.3), rgba(0,0,0,0.7));
}
.hero-bg-menu {
  background: url("../img/menu-hero.jpg") center/cover no-repeat;
  position: absolute;
  inset: 0;
  filter: brightness(0.5);
  pointer-events: none;
}
.hero-wrap-menu .accent-bar {
  width: 80px;
  height: 5px;
  margin: 0 auto 20px;
  background: linear-gradient(90deg, #ff7043, #fbc02d);
  border-radius: 2px;
}
.hero-wrap-menu .btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hero-wrap-menu .btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}

/* Location & Hours hero */
.hero-wrap-loc{
  background: radial-gradient(circle at center, rgba(0,0,0,.28), rgba(0,0,0,.72));
}
.hero-bg-loc{
  position:absolute; inset:0;
  background:url("../img/location-hero.jpg") center/cover no-repeat;
  filter: brightness(.55);
  pointer-events:none;
}
.hero-wrap-loc .accent-bar{
  width: 90px; height: 5px; margin: 0 auto 10px;
  background: linear-gradient(90deg, #ff7043, #fbc02d);
  border-radius: 2px;
}
.hero-wrap-loc .cta-btn{
  transition: transform .2s ease, box-shadow .2s ease;
}
.hero-wrap-loc .cta-btn:hover{
  transform: translateY(-3px);
  box-shadow:0 8px 16px rgba(0,0,0,.35);
}

/* Story */
.hero-wrap-story {
  background: radial-gradient(circle at 20% 20%, #3e1e00, #1a0d00 80%);
}
.hero-bg-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at bottom right, rgba(255,112,67,0.25), rgba(0,0,0,0.85));
  pointer-events: none;
  animation: subtleGlow 12s ease-in-out infinite alternate;
}
@keyframes subtleGlow {
  0% {opacity: 0.85;}
  100% {opacity: 1;}
}

/* Catering */
.hero-wrap-catering {
  background: linear-gradient(135deg, #331400 0%, #5a2600 50%, #1a0d00 100%);
}
.hero-bg-catering {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top left, rgba(255,112,67,0.15), rgba(0,0,0,0.8) 70%);
  animation: gentlePulse 10s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes gentlePulse {
  0% {opacity: 0.85;}
  100% {opacity: 1;}
}

/* Contact */
.hero-wrap-contact {
  background: linear-gradient(160deg, #432100 0%, #261000 60%, #1a0d00 100%);
}
.hero-bg-contact {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top right, rgba(255,167,38,0.15), rgba(0,0,0,0.8) 70%);
  animation: glowShift 10s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes glowShift {
  0% {opacity: 0.9;}
  100% {opacity: 1;}
}

/* Shared hero bits */
.text-shadow{
  text-shadow:0 2px 6px rgba(0,0,0,.6);
}
.hero-video {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 4 / 5;
  border-radius: 0.75rem;
  object-fit: cover;
  opacity: 0.9;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}
.hero-video:hover {
  transform: scale(1);
}
.cta-btn {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 12px rgba(0,0,0,0.3);
}

/* ---------- TRI-ROW / FEATURE CARDS / MISC ---------- */

.hatch-badge{
  color: var(--hatch-red);
  font-weight:700;
  letter-spacing:.06em;
}
.tri-row{
  height:14px;
  display:flex;
  gap:10px;
  justify-content:center;
}
.tri-row span{
  width:0;height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-top:14px solid var(--hatch-red);
}

.feature-card{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 1rem;
  transition: transform .2s ease, box-shadow .2s ease;
  background: linear-gradient(145deg, #fff 0%, rgba(212,240,240,.55) 100%);
  box-shadow: 0 6px 18px rgba(0,0,0,.07);
}
.feature-card:hover{
  transform: translateY(-3px);
  box-shadow:0 12px 28px rgba(0,0,0,.08);
}

.photo-strip img{
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius:.75rem;
  transform: translateZ(0);
  will-change: transform;
}
.photo-strip img:hover{
  transform: scale(1.02);
}

.hours td{
  padding:.25rem .5rem;
}
.map-embed{
  border:0;
  width:100%;
  height:260px;
  border-radius: .75rem;
}
.section-title{
  font-weight:800;
  letter-spacing:.02em;
}

.accent-bar{
  width:60px;
  height:4px;
  background: var(--desert-gold);
  margin: 0 auto 1rem;
  border-radius: 2px;
}

/* ---------- MOBILE TWEAKS ---------- */
/* Mobile-only: make standard sections tighter if you reuse desktop content */
@media (max-width: 767.98px){
  .page-section{
    padding: 1.75rem 1rem;
    border-radius:.9rem;
    background:#1a0904;
    margin-bottom:1rem;
  }
}

/* Desktop padding only applied on larger screens */
@media (min-width: 768px){
  body{
    padding-top:0; /* handled by .desktop-main */
  }
}
/* iOS notch safe area support */
@supports(padding-top: env(safe-area-inset-top)){
  .app-topbar{
    padding-top: env(safe-area-inset-top);
    height: calc(56px + env(safe-area-inset-top));
  }
}
/* LEFT: PNG + Hatch in a row */
.app-topbar-brand{
  display: flex;
  align-items: center;
  gap: .4rem;
}
.app-brand-pill{
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .05em;
}
.app-topbar-cta::before{
  content:"★";
  font-size:.7rem;
}
.app-topbar-cta:active{
  transform: translateY(1px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.7);
}

/* Scrollable area between top bar and bottom nav */
.app-main{
  flex:1;
  padding: 64px .9rem 82px; /* top bar + bottom pill */
  overflow-y:auto;
}

/* respect safe areas for modern phones */
@supports(padding-top: env(safe-area-inset-top)){
  .app-main{
    padding-top: calc(64px + env(safe-area-inset-top));
    padding-bottom: calc(82px + env(safe-area-inset-bottom));
  }
}

/* Sections inside app shell (if you reuse .page-section) */
.shell-mobile .page-section{
  background:#fffaf3;               /* soft cream */
  color:#2b1a10;                    /* dark brown text */
  border-radius:1rem;
  border:1px solid rgba(0,0,0,0.04);
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}
/* Headings in mobile menu */
.shell-mobile .page-section h1,
.shell-mobile .page-section h2,
.shell-mobile .page-section h3,
.shell-mobile .page-section h4{
  color:#2b1a10;
}
/* Tone down Bootstrap's gray in this section */
.shell-mobile .page-section .text-muted{
  color:#6b4b3a !important;       /* warm muted brown instead of cold gray */
}
.menu-card{
  background:#ffffff;
  border-radius:.85rem;
  border:1px solid rgba(0,0,0,0.06);
  padding:.6rem .8rem;
  font-size:.9rem;
  box-shadow:0 3px 10px rgba(0,0,0,0.06);
}
.menu-card:hover,
.menu-card:active{
  background:#fff4dd;
}
.modal-content .form-label {
    color: #2b1a10 !important;   /* rich dark brown */
    font-weight: 600;
}
.modal-content .form-text {
    color: #6b4b3a !important;   /* warm muted brown */
}
/* "View" badge on the right */
.menu-card .badge{
  background:#ffe3a7;
  color:#5b3415;
}
/* Fix modal input borders for mobile theme */
.modal-content .form-control {
    border: 1px solid rgba(0,0,0,0.2);
    background: #fff;
    color: #2b1a10;
}
/* Detail view wrapper */
#menuDetailView{
  color:#2b1a10;
}

/* Each menu item container */
.menu-item-card{
  background:#ffffff;
  border-radius:.75rem;
  border:1px solid rgba(0,0,0,0.05);
  padding:.55rem .6rem;
  box-shadow:0 2px 6px rgba(0,0,0,0.04);
}

/* Item name */
.menu-item-card .fw-semibold{
  color:#2b1a10;
}

/* Item description */
.menu-item-card .text-muted{
  color:#7a5a46 !important;
}

/* Prices */
.menu-item-card .fw-semibold,
.menu-item-card .fw-semibold small{
  color:#3d2413;
}

/* Section separators less harsh */
#menuDetailView .border-bottom{
  border-color:rgba(0,0,0,0.05) !important;
}

/* Back button tweaks */
#menuBackButton{
  border-color:#c9a27a;
  color:#3a2412;
  background:#fff7e8;
}
#menuBackButton:hover{
  background:#ffe9c2;
}

/* Only show app shell on small screens */
@media (min-width: 768px){
  .shell-mobile{
    display:none;
  }
}
/* Mobile homepage video */
.mobile-video-wrapper{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.mobile-teaser-video{
  width:100%;
  height:auto;
  max-height:100vh;
  object-fit:cover;
  border-radius:0;
}
/* Pills for badges */
.badges-row .badge-pill{
    display:inline-block;
    background:#ffe4c7;
    color:#7a3f12;
    padding:2px 6px;
    border-radius:12px;
    margin-right:4px;
    font-size:0.7rem;
    font-weight:600;
}

/* Variants aligned perfectly */
.variant-row{
    padding:3px 0;
}

.variant-price{
    min-width:55px;       /* keeps prices lined up */
    text-align:right;
    color:#3a2412;
    font-weight:600;
}

.menu-item-card{
    background:#ffffff;
    border-radius:0.7rem;
    padding:0.75rem;
    border:1px solid rgba(0,0,0,0.06);
    box-shadow:0 3px 9px rgba(0,0,0,0.05);
}
/* ---------- MOBILE CATERING ---------- */

.catering-mobile{
  background:#fffaf3;
}

.cater-card{
  background:#ffffff;
  border-radius:1rem;
  padding:.9rem .9rem;
  border:1px solid rgba(0,0,0,0.04);
  box-shadow:0 4px 14px rgba(0,0,0,0.06);
  margin-bottom:1rem;
}

.cater-list{
  padding-left:1.1rem;
}

.cater-space-row{
  display:flex;
  justify-content:space-between;
  padding:.25rem 0;
  border-bottom:1px solid rgba(0,0,0,0.03);
}
.cater-space-row:last-child{
  border-bottom:none;
}
.cater-space-row .label{
  font-weight:500;
  color:#3a2412;
}
.cater-space-row .value{
  color:#5b4634;
}

/* Reuse your existing button styles from location page */
.btn-direction{
  background:#1a4c39;
  color:#fff;
  border:none;
}
.btn-direction:hover{
  background:#173f30;
  color:#fff;
}
.btn-call{
  background:#fff7e2;
  color:#5b3415;
  border:1px solid #f3c87a;
}
.btn-call:hover{
  background:#ffeac2;
  color:#5b3415;
}
/* Right stack: roadrunner + button */
.app-topbar-right{
  display: flex;
  align-items: center;
  gap: .5rem;
}
.app-topbar-logo{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

/* Roadrunner color tint */
.topbar-roadrunner{
  height: 70px;
  width: auto;
  opacity: .95;
  filter:
    invert(83%)
    sepia(32%)
    saturate(820%)
    hue-rotate(355deg)
    brightness(96%)
    contrast(90%);
}
.app-brand-wordmark{
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--desert-gold);
}
.app-topbar-spacer{
  flex: 1;
}
/* Order button you already have */
.app-topbar-cta{
  padding: 4px 10px;
  background: #fff7e2;
  color: #6a3b18;
  border: 1px solid #f3c87a;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.mobile-hiring-card{
  background:#fffaf3;
  border-radius:1.1rem;
  padding:1.2rem 1rem;
  margin:1.3rem .2rem 2rem;
  border:1px solid rgba(0,0,0,0.05);
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

.hiring-inner{
  text-align:center;
  color:#3a2412;
}

.hiring-title{
  font-size:1.3rem;
  font-weight:800;
  letter-spacing:.03em;
  margin-bottom:.4rem;
}

.hiring-text{
  font-size:.95rem;
  color:#6b4b3a;
  margin-bottom:1rem;
}

.hiring-btn{
  display:inline-block;
  padding:.55rem 1rem;
  border-radius:.6rem;
  background:#1a4c39;
  color:#fff;
  font-weight:600;
  letter-spacing:.05em;
  text-decoration:none;
  box-shadow:0 3px 10px rgba(0,0,0,0.15);
  transition:background .2s ease, transform .2s ease;
}

.hiring-btn:hover{
  background:#173f30;
  transform: translateY(-1px);
}

/* ---------- MOBILE CAREERS ---------- */

.careers-mobile{
  background:#fffaf3;
}

.career-card-link{
  text-decoration:none;
  color:inherit;
}

.career-card{
  background:#ffffff;
  border-radius:1rem;
  padding:.85rem .9rem;
  border:1px solid rgba(0,0,0,0.05);
  box-shadow:0 4px 14px rgba(0,0,0,0.06);
  margin-bottom:.9rem;
}

.career-card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:.35rem;
}

.career-pill{
  display:inline-block;
  padding:3px 10px;
  border-radius:999px;
  background:#1a4c39;
  color:#fff;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.career-card-text{
  font-size:.9rem;
  color:#6b4b3a;
  margin-bottom:.55rem;
}

.career-card-cta-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:.8rem;
  color:#3a2412;
  opacity:.9;
}

.career-card-cta-row i{
  font-size:.9rem;
}
/* ---------- MOBILE FOH CAREERS ---------- */

.foh-mobile{
  background:#fffaf3;
}

.foh-job-card{
  background:#ffffff;
  border-radius:1rem;
  padding:.85rem .9rem;
  border:1px solid rgba(0,0,0,0.05);
  box-shadow:0 4px 14px rgba(0,0,0,0.06);
  margin-bottom:.9rem;
}

.foh-job-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:.35rem;
}

.foh-job-title{
  font-weight:600;
  font-size:.98rem;
  color:#2b1a10;
}

.foh-job-meta{
  color:#7a5a46;
}

.foh-job-dept-badge{
  padding:2px 8px;
  border-radius:999px;
  background:#fff1d0;
  color:#5b3415;
  font-size:.7rem;
  font-weight:600;
}

.foh-job-summary{
  color:#6b4b3a;
  margin-bottom:.6rem;
}

.foh-job-button{
  width:100%;
  border:none;
  border-radius:.7rem;
  padding:.55rem;
  font-size:.86rem;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  background:#1a4c39;
  color:#fff;
  box-shadow:0 3px 10px rgba(0,0,0,0.2);
}

.foh-job-button:active{
  transform:translateY(1px);
  box-shadow:0 1px 5px rgba(0,0,0,0.35);
}

.foh-empty{
  text-align:center;
  background:#fffaf3;
  border-radius:1rem;
  padding:1.1rem 1rem;
  border:1px solid rgba(0,0,0,0.05);
  box-shadow:0 4px 14px rgba(0,0,0,0.06);
}
/* -------- MOBILE CONTACT PAGE -------- */

.contact-mobile {
  padding: 1.25rem .75rem;
}

.contact-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .9rem 1rem;
  border-radius: .85rem;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  margin-bottom: .75rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
  border: 1px solid rgba(0,0,0,0.1);
}

/* Icons */
.contact-btn i {
  font-size: 1.3rem;
}

/* Call */
.contact-call {
  background: #1a4c39;
  color: #fff;
}
.contact-call:hover {
  background:#173f30;
  color:#fff;
}

/* Instagram */
.contact-ig {
  background:#fff1fa;
  color:#b02a8c;
}

/* Facebook */
.contact-fb {
  background:#e7f0ff;
  color:#0a3d91;
}

/* TikTok */
.contact-tt {
  background:#f5f5f5;
  color:#111;
}

/* Directions */
.contact-directions {
  background:#fff7e2;
  color:#5b3415;
  border:1px solid #f3c87a;
}

/* Cards */
.contact-card {
  background:#ffffff;
  border-radius:.9rem;
  border:1px solid rgba(0,0,0,0.06);
  padding:1rem;
  box-shadow:0 3px 10px rgba(0,0,0,0.06);
}
  .mobile-login-wrapper {
    padding: 40px 20px;
  }

  .login-card {
    color: black;
    background: #ffffff;
    border-radius: 18px;
    padding: 28px 22px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.12);
  }

  .login-title {
    color: black;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 4px;
    text-align: center;
  }

  .login-subtitle {
    color: black;
    font-size: 13px;
    text-align: center;
    margin-bottom: 20px;
    opacity: 0.6;
  }

  label.form-label {
    font-size: 14px;
    font-weight: 600;
  }

  .form-control-lg {
    border-radius: 12px;
    padding: 14px;
    font-size: 16px;
  }

  .btn-lg {
    border-radius: 12px;
    padding: 14px;
    font-size: 17px;
  }