:root {
     --primary: #c9122e;
     --orange: #e67e22;
     --soft-bg: #fbf3db;
 }

 body {
     font-family: 'Inter', sans-serif;
     background-color: #fcfcfc;
 }

 h1,
 h2,
 h3,
 h4 {
     font-family: 'Playfair Display', serif;
 }

 .soft {
     color: var(--soft-bg);
 }

 .text-orange {
     color: var(--orange);
 }

 /* Custom Styles */
 .navbar {
     background-color: #0000001f;
     padding: 0;
     backdrop-filter: blur(5px);
     z-index: 9999;
 }

 .navbar-brand img {
     width: 140px;
 }

 .btn-primary-orange {
     background-color: var(--orange);
     border-color: var(--orange);
     color: white;
     border-radius: 50px;
     padding: 10px 25px;
     font-weight: 500;
 }

 .btn-outline-dark {
     border-radius: 50px;
     padding: 10px 25px;
     font-weight: 500;
     border-color: var(--orange);
     color: var(--orange);
 }
.nav-link:hover{
    color: var(--primary) !important;
}
 .btn-primary-orange:hover {
     background-color: var(--primary);
     color: white;
 }

 .hero-section {
     background: linear-gradient(70deg, rgb(255, 255, 255), rgba(255, 255, 255, 0.69), rgba(255, 255, 255, 0)), url(../images/banner.webp);
     background-size: cover;
     background-position: center;
     min-height: 100vh;
     display: flex;
     align-items: center;
     position: relative;
 }

 .hero-section::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 30%;
     left: 0;
     bottom: 0;
     background: linear-gradient(0deg, rgb(255, 255, 255), rgba(255, 255, 255, 0));
     z-index: 1;
 }

 .feature-card {
     border: none;
     border-radius: 15px;
     transition: transform 0.3s ease;
     background: white;
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
 }

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

 .service-item {
     border: 1px solid #eee;
     border-radius: 12px;
     padding: 15px;
     background: white;
 }

 .menu-highlight-card {
     border: none;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 }

 .circle-number {
     width: 40px;
     height: 40px;
     background-color: var(--orange);
     color: white;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 15px;
     font-weight: bold;
 }

 .timing-card {
     border-radius: 20px;
     overflow: hidden;
     border: none;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
 }

 .cta-gradient {
     background: var(--orange);
     color: white;
     padding: 80px 0;
 }

 .nav-logo-circle {
     width: 35px;
     height: 35px;
     background: var(--orange);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: white;
     font-weight: bold;
 }

 .feature-card img {
     width: 65px;
     height: 65px;
     background-color: var(--primary);
     border-radius: 12px;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 10px;
     margin: 10px auto;
 }

 .order_online_btn {
     display: flex;
     align-items: center;
     gap: 20px;
 }

 .order_online_btn img {
     width: 140px;
 }

 .footer-logo {
     margin-top: -78px;

 }

 .footer-logo img {
     width: 150px;
     border-radius: 50%;
 }

 .bg-black {
     background-color: #000;
 }

 .order-whatsapp {
     padding: 10px 20px 10px 8px;
     background-color: #25d366;
     display: flex;
     font-size: 14px;
     border-radius: 16px;
     align-items: center;
     font-weight: bold;
     gap: 10px;
     color: #fff;
     justify-content: center;
     text-transform: uppercase;
     box-shadow: 6px 6px 0px #25d36659;
     transition: .3s all ease;
 }

 .order-whatsapp:hover {
     box-shadow: none;
 }

 .order-whatsapp svg {
     fill: #fff;
     height: 25px;
     width: 25px;
 }

 @media screen and (max-width:600px) {
     .order_online_btn img {
         width: 70px;
     }

     .order-whatsapp {
         font-size: 10px;
     }

     .order_online_btn {
         gap: 10px;
     }

     .hero-section {
         min-height: 60vh;
         padding-top: 140px;
         padding-bottom: 40px;
     }

     .navbar-brand img {
         width: 105px;
     }

     .hero-section::after {
         height: 10%;
     }
 }