:root {
     --primary-blue: #1e3a8a;
     --secondary-blue: #3b82f6;
     --light-blue: #dbeafe;
     --accent-blue: #60a5fa;
     --dark-blue: #1e293b;
     --gold: #f59e0b;
 }

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

 body {
     font-family: 'Poppins', sans-serif;
     color: #333;
     overflow-x: hidden;
 }

 /* Navbar Styles */
 .navbar {
     background: rgba(30, 58, 138, 0.95) !important;
     backdrop-filter: blur(10px);
     box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
 }

 .navbar-brand {
     font-family: 'Playfair Display', serif;
     font-size: 1.8rem;
     font-weight: 700;
     color: white !important;
 }

 .navbar-nav .nav-link {
     color: rgba(255, 255, 255, 0.9) !important;
     font-weight: 500;
     margin: 0 10px;
     transition: all 0.3s ease;
     position: relative;
 }

 .navbar-nav .nav-link:hover {
     color: var(--gold) !important;
 }

 .navbar-nav .nav-link::after {
     content: '';
     position: absolute;
     bottom: -5px;
     left: 0;
     width: 0;
     height: 2px;
     background: var(--gold);
     transition: width 0.3s ease;
 }

 .navbar-nav .nav-link:hover::after {
     width: 100%;
 }

 /* Hero Section */
 .hero {
     min-height: 100vh;
     background: linear-gradient(135deg, rgb(46, 62, 126), rgba(112, 124, 144, 0.26)), url('/src/asserts/images/cafe-bg.png') center/cover;
     display: flex;
     align-items: center;
     position: relative;
     overflow: hidden;
 }

 .hero::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="2" fill="rgba(255,255,255,0.1)"/></svg>') repeat;
     animation: float 20s infinite linear;
 }

 @keyframes float {
     0% {
         transform: translateY(0);
     }

     100% {
         transform: translateY(-100px);
     }
 }

 .hero-content {
     position: relative;
     z-index: 1;
 }

 .hero h1 {
     font-family: 'Playfair Display', serif;
     font-size: 4rem;
     color: white;
     margin-bottom: 20px;
     animation: fadeInUp 1s ease;
 }

 .hero p {
     font-size: 1.3rem;
     color: rgba(255, 255, 255, 0.9);
     margin-bottom: 30px;
     animation: fadeInUp 1s ease 0.2s;
     animation-fill-mode: both;
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

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

 .btn-custom {
     background: var(--gold);
     color: white;
     padding: 12px 35px;
     border-radius: 50px;
     font-weight: 600;
     text-decoration: none;
     display: inline-block;
     transition: all 0.3s ease;
     border: none;
     cursor: pointer;
     animation: fadeInUp 1s ease 0.4s;
     animation-fill-mode: both;
 }

 .btn-custom:hover {
     background: #d97706;
     transform: translateY(-3px);
     box-shadow: 0 10px 30px rgba(245, 158, 11, 0.3);
     color: white;
 }

 /* Section Styles */
 .section {
     padding: 80px 0;
 }

 .section-title {
     font-family: 'Playfair Display', serif;
     font-size: 3rem;
     color: var(--primary-blue);
     text-align: center;
     margin-bottom: 20px;
     position: relative;
 }

 .section-subtitle {
     text-align: center;
     color: #64748b;
     margin-bottom: 50px;
     font-size: 1.1rem;
 }

 /* About Section */
 .about {
     background: var(--light-blue);
 }

 .about-content {
     background: white;
     padding: 40px;
     border-radius: 20px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
     transform: translateY(-50px);
 }

 .feature-box {
     text-align: center;
     padding: 30px;
     background: white;
     border-radius: 15px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     height: 100%;
 }

 .feature-box:hover {
     transform: translateY(-10px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }

 .feature-icon {
     width: 80px;
     height: 80px;
     background: var(--light-blue);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 20px;
     font-size: 2rem;
     color: var(--primary-blue);
 }

 /* Menu Section */
 .menu-item {
     background: white;
     border-radius: 15px;
     overflow: hidden;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
     transition: all 0.3s ease;
     margin-bottom: 30px;
 }

 .menu-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
 }

 .menu-item img {
     width: 100%;
     height: 200px;
     object-fit: cover;
 }

 .menu-content {
     padding: 20px;
 }

 .menu-title {
     font-size: 1.3rem;
     font-weight: 600;
     color: var(--primary-blue);
     margin-bottom: 10px;
 }

 .menu-description {
     color: #64748b;
     font-size: 0.95rem;
     margin-bottom: 15px;
 }

 .menu-price {
     font-size: 1.2rem;
     font-weight: 600;
     color: var(--gold);
 }

 .menu-category {
     background: var(--primary-blue);
     color: white;
     padding: 8px 20px;
     border-radius: 50px;
     display: inline-block;
     margin-bottom: 30px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .menu-category:hover,
 .menu-category.active {
     background: var(--gold);
     transform: scale(1.05);
 }

 /* Specials Section */
 .specials {
     background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
     color: white;
 }

 .specials .section-title {
     color: white;
 }

 .specials .section-subtitle {
     color: rgba(255, 255, 255, 0.8);
 }

 .special-card {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border-radius: 20px;
     padding: 30px;
     text-align: center;
     transition: all 0.3s ease;
     border: 1px solid rgba(255, 255, 255, 0.2);
 }

 .special-card:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-10px);
 }

 .special-icon {
     font-size: 3rem;
     color: var(--gold);
     margin-bottom: 20px;
 }

 /* Testimonials */
 .testimonial-card {
     background: white;
     padding: 30px;
     border-radius: 15px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
     margin-bottom: 30px;
 }

 .testimonial-text {
     font-style: italic;
     color: #64748b;
     margin-bottom: 20px;
 }

 .testimonial-author {
     display: flex;
     align-items: center;
 }

 .author-avatar {
     width: 50px;
     height: 50px;
     border-radius: 50%;
     margin-right: 15px;
 }

 .author-info h5 {
     color: var(--primary-blue);
     margin-bottom: 0;
 }

 .author-info p {
     color: #64748b;
     margin-bottom: 0;
     font-size: 0.9rem;
 }

 /* Contact Section */
 .contact {
     background: var(--light-blue);
 }

 .contact-info {
     background: white;
     padding: 40px;
     border-radius: 15px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
 }

 .contact-item {
     display: flex;
     align-items: center;
     margin-bottom: 20px;
 }

 .contact-icon {
     width: 50px;
     height: 50px;
     background: var(--light-blue);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-right: 20px;
     color: var(--primary-blue);
     font-size: 1.2rem;
 }

 /* Footer */
 footer {
     background: var(--dark-blue);
     color: white;
     padding: 50px 0 30px;
 }

 .footer-widget h4 {
     color: white;
     margin-bottom: 20px;
     font-weight: 600;
 }

 .footer-widget ul {
     list-style: none;
     padding: 0;
 }

 .footer-widget ul li {
     margin-bottom: 10px;
 }

 .footer-widget ul li a {
     color: rgba(255, 255, 255, 0.7);
     text-decoration: none;
     transition: color 0.3s ease;
 }

 .footer-widget ul li a:hover {
     color: var(--gold);
 }

 .social-links a {
     display: inline-block;
     width: 40px;
     height: 40px;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 50%;
     text-align: center;
     line-height: 40px;
     color: white;
     margin-right: 10px;
     transition: all 0.3s ease;
 }

 .social-links a:hover {
     background: var(--gold);
     transform: translateY(-3px);
 }

 /* Responsive */
 @media (max-width: 768px) {
     .hero h1 {
         font-size: 2.5rem;
     }

     .hero p {
         font-size: 1.1rem;
     }

     .section-title {
         font-size: 2rem;
     }
 }

 /* Loading Animation */
 .loader {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--primary-blue);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     transition: opacity 0.5s ease;
 }

 .loader.hidden {
     opacity: 0;
     pointer-events: none;
 }

 .loader-spinner {
     width: 50px;
     height: 50px;
     border: 3px solid rgba(255, 255, 255, 0.3);
     border-top-color: var(--gold);
     border-radius: 50%;
     animation: spin 1s linear infinite;
 }

 @keyframes spin {
     to {
         transform: rotate(360deg);
     }
 }

 #testimonials {
     background: linear-gradient(135deg, var(--primary-blue), var(--secondary-blue));
 }

.map-responsive {
    position: relative;
    width: 100%;
    height: 100%; /* fill the parent column height */
    overflow: hidden;
}

.map-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.testimonial-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: transform 0.2s ease-in-out;
}

.testimonial-card:hover {
    transform: translateY(-5px);
}

.testimonial-text {
    flex-grow: 1;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
}

.testimonial-author {
    display: flex;
    align-items: center;
    margin-top: 20px;
}

.author-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-right: 15px;
    object-fit: cover;
}

.author-info h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.author-info p {
    margin: 0;
    font-size: 14px;
    color: #777;
}
.footer {
  background-color: #0e1b2a; /* Dark navy background */
  color: #ffffff;
  text-align: center;
  padding: 20px 10px;
  font-size: 0.95rem;
  letter-spacing: 0.3px;
}

.footer-link {
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
}

.footer-link:hover {
  color: #ffcc00;
  text-decoration: underline;
  transition: 0.3s ease;
}

.text-warning {
  color: #ffb400 !important;
}

.text-danger {
  color: #ff3b3b !important;
}