* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Lato', sans-serif;
     overflow-x: hidden;
 }

 .hero-section {
     background: linear-gradient(to bottom, #2a1810 0%, #1a0f0a 100%);
     min-height: 100vh;
     padding: 40px 0;
     position: relative;
 }

 .hero-content {
     background: #f5f1e8;
     border-radius: 0;
     padding: 0;
     margin: 0 auto;
     max-width: 1200px;
     box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
 }

 .navigation {
     background: #f5f1e8;
     padding: 30px 40px;
     border-bottom: 1px solid #d4c5a9;
 }

 .nav-menu {
     display: flex;
     justify-content: space-between;
     align-items: center;
     list-style: none;
     margin: 0;
     padding: 0;
 }

 .nav-menu li {
     margin: 0 15px;
 }

 .nav-menu a {
     color: #2a1810;
     text-decoration: none;
     font-size: 13px;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     font-weight: 400;
     transition: color 0.3s ease;
     position: relative;
 }

 .nav-menu a:hover {
     color: #8b4513;
 }

 .nav-menu a::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 1px;
     background: #8b4513;
     transition: width 0.3s ease;
 }

 .nav-menu a:hover::after {
     width: 100%;
 }




 .mobile-menu-toggle {
     display: none;
     background: none;
     border: none;
     font-size: 24px;
     color: #2a1810;
     cursor: pointer;
     padding: 10px;
 }

 .mobile-menu {
     display: none;
     flex-direction: column;
     position: absolute;
     top: 100%;
     left: 0;
     right: 0;
     background: #f5f1e8;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
     padding: 20px;
     z-index: 1000;
 }

 .mobile-menu a {
     padding: 15px;
     text-decoration: none;
     color: #2a1810;
     font-size: 13px;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     border-bottom: 1px solid #e0dac8;
     transition: color 0.3s ease;
 }

 .mobile-menu a:hover {
     color: #8b4513;
     background: rgba(139, 69, 19, 0.05);
 }

 .mobile-menu.active {
     display: flex;
 }

 .navigation {
     position: relative;
 }

 @media (max-width: 768px) {
     .mobile-menu-toggle {
         display: block;
     }

     .nav-menu {
         display: none;
     }
 }

 @media (min-width: 769px) {
     .mobile-menu {
         display: none !important;
     }
 }















 .logo-text {
     font-family: 'Playfair Display', serif;
     font-size: 32px;
     font-weight: 400;
     color: #2a1810;
     letter-spacing: 2px;
 }

 .hero-main {
     padding: 80px 60px 60px;
     text-align: center;
     background: #f5f1e8;
 }

 .tagline {
     font-size: 13px;
     letter-spacing: 2px;
     color: #6b5d52;
     margin-bottom: 30px;
     text-transform: uppercase;
     font-weight: 400;
 }

 .hero-title {
     font-family: 'Playfair Display', serif;
     font-size: 72px;
     line-height: 1.2;
     color: #2a1810;
     margin-bottom: 50px;
     font-weight: 400;
 }

 .hero-title .subtitle {
     display: block;
     font-size: 72px;
 }

 .reserve-btn {
    text-decoration: none;
     background: #a0412f;
     color: #f5f1e8;
     border: none;
     padding: 20px 45px;
     border-radius: 50%;
     font-size: 12px;
     letter-spacing: 2px;
     text-transform: uppercase;
     cursor: pointer;
     transition: all 0.3s ease;
     width: 160px;
     height: 160px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     font-weight: 600;
     box-shadow: 0 10px 30px rgba(160, 65, 47, 0.3);
     position: relative;
     z-index: 10;
 }

 .reserve-btn:hover {
    text-decoration: none;
     background: #8b3525;
     transform: scale(1.05);
     box-shadow: 0 15px 40px rgba(160, 65, 47, 0.4);
 }

 .reserve-btn::before {
    text-decoration: none;
     content: '↓';
     display: block;
     font-size: 20px;
     margin-bottom: 5px;
 }

 .image-gallery {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     gap: 0;
     margin-top: -80px;
     position: relative;
     z-index: 1;
 }

 .gallery-item {
     height: 280px;
     overflow: hidden;
     position: relative;
 }

 .gallery-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.5s ease;
 }

 .gallery-item:hover img {
     transform: scale(1.1);
 }

 .gallery-item::after {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: rgba(42, 24, 16, 0.2);
     opacity: 0;
     transition: opacity 0.3s ease;
 }

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

 /* Mobile Menu Toggle */
 .mobile-menu-toggle {
     display: none;
     background: none;
     border: none;
     font-size: 28px;
     color: #2a1810;
     cursor: pointer;
     padding: 5px;
 }

 .mobile-menu {
     display: none;
 }

 /* Tablet Styles */
 @media (max-width: 992px) {
     .hero-title {
         font-size: 56px;
     }

     .hero-title .subtitle {
         font-size: 56px;
     }

     .image-gallery {
         grid-template-columns: repeat(3, 1fr);
         gap: 2px;
     }

     .gallery-item {
         height: 220px;
     }

     .navigation {
         padding: 25px 30px;
     }

     .nav-menu li {
         margin: 0 10px;
     }

     .nav-menu a {
         font-size: 11px;
     }

     .logo-text {
         font-size: 28px;
     }

     .hero-main {
         padding: 70px 40px 50px;
     }
 }

 /* Mobile Styles */
 @media (max-width: 768px) {
     .mobile-menu-toggle {
         display: block;
         position: absolute;
         top: 25px;
         right: 30px;
         z-index: 1000;
     }

     .navigation {
         padding: 20px 25px;
         position: relative;
     }

     .nav-menu {
         display: none;
     }

     .mobile-menu {
         display: none;
         flex-direction: column;
         background: #f5f1e8;
         padding: 20px;
         position: absolute;
         top: 100%;
         left: 0;
         right: 0;
         box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
         z-index: 999;
     }

     .mobile-menu.active {
         display: flex;
     }

     .mobile-menu li {
         margin: 12px 0;
         text-align: center;
     }

     .mobile-menu a {
         color: #2a1810;
         text-decoration: none;
         font-size: 13px;
         letter-spacing: 1.5px;
         text-transform: uppercase;
         font-weight: 400;
         display: block;
         padding: 8px;
     }

     .logo-text {
         font-size: 32px;
         text-align: center;
         display: block;
     }

     .hero-title {
         font-size: 38px;
     }

     .hero-title .subtitle {
         font-size: 38px;
     }

     .image-gallery {
         grid-template-columns: repeat(2, 1fr);
         gap: 2px;
         margin-top: -60px;
     }

     .gallery-item {
         height: 180px;
     }

     .hero-main {
         padding: 50px 25px 35px;
     }

     .reserve-btn {
         width: 130px;
         height: 130px;
         font-size: 10px;
         padding: 15px 30px;
     }

     .tagline {
         font-size: 11px;
         margin-bottom: 25px;
     }
 }

 /* Small Mobile Styles */
 @media (max-width: 576px) {
     .hero-section {
         padding: 20px 0;
     }

     .hero-content {
         margin: 0 10px;
     }

     .navigation {
         padding: 15px 20px;
     }

     .mobile-menu-toggle {
         top: 20px;
         right: 20px;
         font-size: 24px;
     }

     .logo-text {
         font-size: 28px;
     }

     .hero-title {
         font-size: 32px;
         margin-bottom: 35px;
     }

     .hero-title .subtitle {
         font-size: 32px;
     }

     .hero-main {
         padding: 40px 20px 30px;
     }

     .tagline {
         font-size: 10px;
         margin-bottom: 20px;
     }

     .reserve-btn {
         width: 120px;
         height: 120px;
         font-size: 9px;
         padding: 12px 25px;
     }

     .reserve-btn::before {
         font-size: 16px;
     }

     .image-gallery {
         grid-template-columns: 1fr;
         margin-top: -50px;
     }

     .gallery-item {
         height: 220px;
     }
 }

 /* Extra Small Mobile */
 @media (max-width: 400px) {
     .hero-title {
         font-size: 28px;
     }

     .hero-title .subtitle {
         font-size: 28px;
     }

     .reserve-btn {
         width: 110px;
         height: 110px;
         font-size: 8px;
     }
 }









 /* About Section */
 .about {
     padding: 5rem 5%;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 5rem;
     align-items: center;
     background: #FFF8F0;
 }

 .about-content h3 {
     display: inline-block;
     border: 2px solid #8B4513;
     border-radius: 30px;
     padding: 0.5rem 1.5rem;
     margin-bottom: 2rem;
     font-size: 0.85rem;
     color: #5D4E37;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: normal;
 }

 .about-content h2 {
     font-size: 3.5rem;
     line-height: 1.3;
     color: #2C1810;
     margin-bottom: 2rem;
     font-weight: normal;
 }

 .about-cta {
     display: inline-block;
     background: #D2691E;
     color: white;
     padding: 0.9rem 2.5rem;
     border-radius: 50px;
     text-decoration: none;
     margin-top: 1.5rem;
     transition: all 0.3s;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .about-cta:hover {
     background: #8B4513;
 }

 .customer-badges {
     display: flex;
     align-items: center;
     gap: 1rem;
     margin-top: 2rem;
 }

 .avatars {
     display: flex;
     margin-left: -10px;
 }

 .avatar {
     width: 45px;
     height: 45px;
     border-radius: 50%;
     border: 3px solid #FFF8F0;
     background: #D2A679;
     margin-left: -15px;
 }

 .badge-text {
     color: #5D4E37;
 }

 .badge-text strong {
     display: block;
     font-size: 1.1rem;
 }







 .about-image {
     width: 100%;
     aspect-ratio: 4 / 3;
     /* keeps nice proportion */
     background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
         url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 500"><rect fill="%23C19A6B" width="600" height="500"/><circle cx="300" cy="250" r="100" fill="%23FFF" opacity="0.3"/></svg>');
     background-size: cover;
     background-position: center;
     border-radius: 12px;
 }


 .image-box {
     width: 100%;
     height: 400px;
     /* adjust as needed */
     border-radius: 20px;
     overflow: hidden;
     /* IMPORTANT */
     background: #eee;
 }

 .image-box img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* fits image properly */
     object-position: center;
     /* centers the image */
     display: block;
 }



 @media (max-width: 992px) {
     .about {
         grid-template-columns: 1fr;
         gap: 3rem;
         padding: 4rem 5%;
     }

     .about-content h2 {
         font-size: 2.8rem;
     }

     .about-image {
         aspect-ratio: 16 / 9;
     }
 }

 @media (max-width: 576px) {
     .about {
         padding: 3rem 1.5rem;
         text-align: center;
     }

     .about-content h3 {
         margin: 0 auto 1.5rem;
     }

     .about-content h2 {
         font-size: 2.2rem;
     }

     .customer-badges {
         justify-content: center;
         flex-wrap: wrap;
     }

     .about-cta {
         padding: 0.8rem 2rem;
         font-size: 0.85rem;
     }
 }



 /* Menu Section */
 .menu-section {
     padding: 5rem 5%;
     background: #FFF8F0;
     text-align: center;
 }

 .section-label {
     display: inline-block;
     border: 2px solid #8B4513;
     border-radius: 30px;
     padding: 0.5rem 1.5rem;
     margin-bottom: 2rem;
     font-size: 0.85rem;
     color: #5D4E37;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .menu-section h2 {
     font-size: 4rem;
     color: #2C1810;
     margin-bottom: 4rem;
     font-weight: normal;
 }

 .menu-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
     max-width: 1400px;
     margin: 0 auto;
 }

 .menu-card {
     background: white;
     border-radius: 15px;
     overflow: hidden;
     transition: transform 0.3s;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
 }

 .menu-card:hover {
     transform: translateY(-10px);
 }

 .menu-card.featured {
     background: #4A3428;
     color: white;
 }

 .menu-icon {
     font-size: 3rem;
     margin: 2rem 0 1rem;
 }

 .menu-card h3 {
     font-size: 1.8rem;
     margin-bottom: 0.5rem;
     padding: 0 1.5rem;
 }

 .menu-card p {
     font-size: 0.95rem;
     color: #8B7355;
     padding: 0 1.5rem 1rem;
     line-height: 1.6;
 }

 .menu-card.featured p {
     color: #D2A679;
 }

 .menu-items {
     text-align: left;
     padding: 1.5rem;
     border-top: 1px solid rgba(139, 69, 19, 0.1);
 }

 .menu-card.featured .menu-items {
     border-top: 1px solid rgba(210, 166, 121, 0.2);
 }

 .menu-items li {
     list-style: none;
     padding: 0.6rem 0;
     color: #5D4E37;
 }

 .menu-card.featured .menu-items li {
     color: #E8D5C4;
 }

 /* Reservation Section */
 .reservation {
     padding: 5rem 5%;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 3rem;
     align-items: center;
     background: #FFF8F0;
 }

 .reservation-content h3 {
     display: inline-block;
     border: 2px solid #8B4513;
     border-radius: 30px;
     padding: 0.5rem 1.5rem;
     margin-bottom: 2rem;
     font-size: 0.85rem;
     color: #5D4E37;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-weight: normal;
 }

 .reservation-content h2 {
     font-size: 3.5rem;
     line-height: 1.3;
     color: #2C1810;
     margin-bottom: 2rem;
     font-weight: normal;
 }

 .reservation-images {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
 }




 .res-image {
     width: 100%;
     height: 200px;
     background: #D2A679;
     border-radius: 10px;
     overflow: hidden;
     /* prevents image overflow */
 }

 .res-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     /* keeps image proportional */
     display: block;
 }

 .reservation-images {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 1rem;
 }


 .reservation-content h3 a {
     text-decoration: none;
     color: inherit;
     cursor: pointer;
 }

 .reservation-content h3 a:hover {
     color: #8B4513;
     /* Change to your brand color */
     text-decoration: underline;
 }

 @media (max-width: 768px) {
     .reservation-images {
         grid-template-columns: repeat(2, 1fr);
     }
 }



 /* Gallery Section */
 .gallery {
     padding: 5rem 5%;
     background: #3D2817;
     text-align: center;
 }

 .gallery h3 {
     display: inline-block;
     border: 2px solid #D2A679;
     border-radius: 30px;
     padding: 0.5rem 1.5rem;
     margin-bottom: 2rem;
     font-size: 0.85rem;
     color: #E8D5C4;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .gallery h2 {
     font-size: 4rem;
     color: #FFF8F0;
     margin-bottom: 3rem;
     font-weight: normal;
 }

 .gallery-scroll {
     display: flex;
     gap: 1.5rem;
     overflow-x: auto;
     padding: 1rem 0;
     scroll-behavior: smooth;
 }




 .gallery {
     padding: 2rem 0;
     text-align: center;
 }

 .gallery-wrapper {
     position: relative;
     max-width: 100%;
     margin: 0 auto;
 }

 .gallery-scroll {
     display: flex;
     gap: 1.5rem;
     overflow-x: auto;
     padding: 1rem 0;
     scroll-behavior: smooth;

     /* Hide scrollbar */
     -ms-overflow-style: none;
     /* IE and Edge */
     scrollbar-width: none;
     /* Firefox */
 }

 .gallery-scroll::-webkit-scrollbar {
     display: none;
     /* Chrome, Safari, Opera */
 }

 .gallery1-item {
     flex: 0 0 300px;
     /* Adjust width as needed */
     height: 300px;
     /* Adjust height as needed */
     background: #ccc;
     /* Placeholder – replace with your images */
     border-radius: 12px;
     background-size: cover;
     background-position: center;
 }

 /* Arrow buttons */
 .gallery-arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 50px;
     height: 50px;
     background: rgba(255, 255, 255, 0.7);
     border: none;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     transition: opacity 0.3s ease, background 0.3s ease;
     z-index: 10;
     color: #333;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
 }

 .gallery-arrow:hover {
     background: rgba(255, 255, 255, 0.95);
 }

 .gallery-arrow-left {
     left: 20px;
 }

 .gallery-arrow-right {
     right: 20px;
 }

 /* Show arrows on hover over the gallery */
 .gallery-wrapper:hover .gallery-arrow {
     opacity: 1;
 }











 .gallery1-item {
     min-width: 350px;
     height: 400px;
     background: #5D4E37;
     border-radius: 15px;
     transform: rotate(-2deg);
     transition: transform 0.3s;
     border: 8px solid white;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
     width: 100%;

     background-size: cover;
     background-position: center;
     border-radius: 12px;
 }

 .gallery1-item:nth-child(even) {
     transform: rotate(2deg);
 }

 .gallery1-item:hover {
     transform: rotate(0deg) scale(1.05);
 }



 /* Reviews Section */
 .reviews {
     padding: 5rem 5%;
     background: #FFF8F0;
 }

 .reviews h3 {
     display: inline-block;
     border: 2px solid #8B4513;
     border-radius: 30px;
     padding: 0.5rem 1.5rem;
     margin-bottom: 2rem;
     font-size: 0.85rem;
     color: #5D4E37;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .reviews h2 {
     font-size: 3.5rem;
     color: #2C1810;
     margin-bottom: 3rem;
     font-weight: normal;
 }

 .review-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
 }

 .review-card {
     background: white;
     padding: 2rem;
     border-radius: 15px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
 }

 .review-card.featured {
     background: #4A3428;
     color: white;
 }

 .review-text {
     font-size: 1.1rem;
     line-height: 1.8;
     margin-bottom: 1.5rem;
     color: #5D4E37;
     font-style: italic;
 }

 .review-card.featured .review-text {
     color: #E8D5C4;
 }

 .reviewer-name {
     font-weight: bold;
     color: #2C1810;
     margin-bottom: 0.3rem;
 }

 .review-card.featured .reviewer-name {
     color: #FFF8F0;
 }

 .reviewer-location {
     font-size: 0.9rem;
     color: #8B7355;
 }

 .review-card.featured .reviewer-location {
     color: #D2A679;
 }

 .rating {
     color: #D2691E;
     margin-top: 0.5rem;
 }

 /* Footer */

 /* ---------- Responsive Footer Fix ---------- */

 @media (max-width: 992px) {
     .footer-content {
         grid-template-columns: 1fr;
         gap: 3rem;
         text-align: center;
     }

     .social-links {
         justify-content: center;
     }

     .footer-links {
         grid-template-columns: 1fr 1fr;
         justify-items: center;
     }

     .newsletter-form {
         flex-direction: column;
         align-items: center;
     }

     .newsletter-form input,
     .newsletter-form button {
         width: 100%;
         max-width: 400px;
     }
 }

 @media (max-width: 576px) {
     footer {
         padding: 3rem 1.5rem 2rem;
     }

     .footer-logo {
         font-size: 2.8rem;
     }

     .social-icon {
         width: 38px;
         height: 38px;
         font-size: 0.9rem;
     }

     .footer-links {
         grid-template-columns: 1fr;
         gap: 0.8rem;
     }

     .footer-bottom {
         flex-direction: column;
         gap: 1rem;
         text-align: center;
     }

     .footer-bottom a {
         margin-left: 0;
     }
 }

 footer {
     background: #3D2817;
     padding: 4rem 5% 2rem;
     color: #E8D5C4;
 }

 .footer-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     margin-bottom: 3rem;
 }

 .footer-logo {
     font-size: 4rem;
     color: #FFF8F0;
     margin-bottom: 2rem;
     letter-spacing: 3px;
 }

 .social-links {
     display: flex;
     gap: 1rem;
     margin-top: 2rem;
 }

 .social-icon {
     width: 45px;
     height: 45px;
     border: 2px solid #D2A679;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #D2A679;
     text-decoration: none;
     transition: all 0.3s;
 }

 .social-icon:hover {
     background: #D2A679;
     color: #3D2817;
 }

 .newsletter h3 {
     font-size: 1.8rem;
     color: #FFF8F0;
     margin-bottom: 1rem;
 }

 .newsletter p {
     margin-bottom: 1.5rem;
     line-height: 1.6;
 }

 .newsletter-form {
     display: flex;
     gap: 1rem;
     margin-bottom: 2rem;
 }

 .newsletter-form input {
     flex: 1;
     padding: 1rem;
     border-radius: 50px;
     border: none;
     background: rgba(255, 255, 255, 0.1);
     color: white;
 }

 .newsletter-form button {
     padding: 1rem 2.5rem;
     border-radius: 50px;
     border: none;
     background: #D2691E;
     color: white;
     cursor: pointer;
     transition: all 0.3s;
     text-transform: uppercase;
     letter-spacing: 1px;
 }

 .newsletter-form button:hover {
     background: #8B4513;
 }

 .footer-links {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1rem;
 }

 .footer-links a {
     color: #D2A679;
     text-decoration: none;
     transition: color 0.3s;
 }

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

 .footer-bottom {
     border-top: 1px solid rgba(210, 166, 121, 0.2);
     padding-top: 2rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .footer-bottom a {
     color: #D2A679;
     text-decoration: none;
     margin-left: 2rem;
 }

 @media (max-width: 768px) {
     .nav-menu {
         display: none;
     }

     .hero-title {
         font-size: 3rem;
     }

     .about,
     .reservation,
     .footer-content {
         grid-template-columns: 1fr;
         gap: 3rem;
     }

     .menu-grid,
     .review-grid {
         grid-template-columns: 1fr;
         gap: 2rem;
     }
 }

 /* Logo Styles */
 .nav-logo {
     width: 60px;
     /* Adjust size as needed */
     height: 60px;
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid white;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 .logo-img-container {
     display: flex;
     align-items: center;
     justify-content: center;
     padding: 0 15px;
 }

 /* Mobile Logo Styles */
 .mobile-logo-container {
     display: none;
 }

 @media (max-width: 768px) {
     .mobile-logo-container {
         display: block;
         position: absolute;
         top: 20px;
         left: 50%;
         transform: translateX(-50%);
         z-index: 1000;
     }

     .nav-logo {
         width: 50px;
         /* Slightly smaller on mobile */
         height: 50px;
     }
 }