/* Custom colors based on the vibrant theme */
        :root {
            --color-saffron: #FF9933;
            /* Vibrant saffron yellow */
            --color-teal: #008080;
            /* Deep teal */
            --color-gold: #FFD700;
            /* Gold */
            --color-turmeric: #FF8C00;
            /* Deep turmeric orange */
            --color-lush-green: #228B22;
            /* Lush forest green */
            --color-cream: #F5F5DC;
            /* Cream/Off-white */
            --color-dark-teal: #007A7A;
            /* Adjusted to match design image's top-left section */
            --color-dark-green: #1E701E;
            /* Adjusted to match design image's bottom-right section */
        }

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

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

        .bg-saffron {
            background-color: var(--color-saffron);
        }

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

        .bg-teal {
            background-color: var(--color-teal);
        }

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

        .bg-gold {
            background-color: var(--color-gold);
        }

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

        .bg-turmeric {
            background-color: var(--color-turmeric);
        }

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

        .bg-lush-green {
            background-color: var(--color-lush-green);
        }

        .text-lush-green {
            color: var(--color-lush-green);
        }

        .bg-cream {
            background-color: var(--color-cream);
        }

        .border-saffron {
            border-color: var(--color-saffron);
        }

        .border-teal {
            border-color: var(--color-teal);
        }

        .bg-dark-teal {
            background-color: var(--color-dark-teal);
        }

        .bg-dark-green {
            background-color: var(--color-dark-green);
        }

        /* Custom styles for hero section to match the design image */
        .hero-section-homepage {
            background-color: #000;
            /* Black background for the hero section */
            position: relative;
            width: 100%;
            height: 650px;
            /* Adjusted height to fit design */
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .hero-bg-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.7;
            /* Slight opacity for overlay effect */
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            color: white;
            text-align: center;
            padding: 2rem;
        }

        .hero-overlay-pattern-left {
            position: absolute;
            top: 0;
            left: 0;
            width: 30%;
            /* Adjust as needed */
            height: 100%;
            background-color: var(--color-saffron);
            /* Yellow/Saffron block */
            opacity: 0.7;
            /* To match design's subtle blend */
            z-index: 0;
            transform: skewX(-15deg) translateX(-10%);
            /* Skew and position */
            transform-origin: top left;
        }

        .hero-overlay-pattern-right {
            position: absolute;
            top: 0;
            right: 0;
            width: 30%;
            /* Adjust as needed */
            height: 100%;
            background-color: var(--color-lush-green);
            /* Green block */
            opacity: 0.7;
            /* To match design's subtle blend */
            z-index: 0;
            transform: skewX(15deg) translateX(10%);
            /* Skew and position */
            transform-origin: top right;
        }

        .featured-dish-block {
            position: relative;
            height: 300px;
            /* Consistent height for quotes */
            overflow: hidden;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            transition: transform 0.3s ease-in-out;
        }

        .featured-dish-block:hover {
            transform: translateY(-5px);
        }

        .featured-dish-block img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        .featured-dish-block .text-overlay {
            position: relative;
            z-index: 1;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
        }

        /* Background patterns for visual flair (similar to design image) */
        .bg-pattern-top-left {
            /* background-image: url('https://placehold.co/200x200/FF9933/FFFFFF?text=Pattern'); */
            /* Placeholder for a subtle pattern */
            background-repeat: no-repeat;
            background-position: top left;
            background-size: 150px;
        }

        .bg-pattern-bottom-right {
            /* background-image: url('https://placehold.co/200x200/228B22/FFFFFF?text=Pattern'); */
            /* Placeholder for a subtle pattern */
            background-repeat: no-repeat;
            background-position: bottom right;
            background-size: 150px;
        }

        /* Custom styles for hero section to match the design image */
        .hero-section-contact {
            position: relative;
            width: 100%;
            height: 600px;
            /* Adjust height as needed */
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #000;
            /* Fallback background */
        }

        .hero-bg-image-contact {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.7;
            /* Subtle opacity for overlay */
            z-index: 1;
        }

        .map-container {
            position: relative;
            z-index: 2;
            width: 70%;
            /* Adjust width of map container */
            max-width: 700px;
            /* Max width for map */
            height: 450px;
            /* Height of the map */
            border-radius: 0.75rem;
            /* rounded-xl */
            overflow: hidden;
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.3);
            /* shadow-xl */
        }

        .map-container iframe {
            width: 100%;
            height: 100%;
        }

        /* Custom styles for the reservation page background */
        .reservation-bg-pattern {
            background-image: url('../images/Namastey-Mix-veg-landscape.png');
            /* Placeholder for a subtle Indian pattern */
            background-size: cover;
            background-position: center;
            position: relative;
            z-index: 0;
        }

        .reservation-bg-pattern::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.4);
            /* Dark overlay for readability */
            z-index: 1;
        }

        .form-container {
            position: relative;
            z-index: 2;
            background-color: white;
            border-radius: 1.5rem;
            /* More rounded */
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.08);
            /* Stronger shadow */
            padding: 3rem;
            /* More padding */
            /* max-width: 3xl; /* Wider form - adjusted for grid */
            margin-left: auto;
            margin-right: auto;
        }

        .input-field {
            border: 1px solid var(--color-teal);
            border-radius: 0.5rem;
            padding: 0.75rem 1rem;
            width: 100%;
            transition: border-color 0.3s, box-shadow 0.3s;
        }

        .input-field:focus {
            outline: none;
            border-color: var(--color-saffron);
            box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.3);
            /* Saffron glow */
        }

        .error-message {
            color: #EF4444;
            /* Red-500 */
            font-size: 0.875rem;
            /* text-sm */
            margin-top: 0.25rem;
        }

        .message-box {
            background-color: #FEF2F2;
            /* Red-50 */
            border: 1px solid #EF4444;
            /* Red-500 */
            color: #EF4444;
            /* Red-500 */
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
            text-align: center;
            font-weight: 600;
        }

        .success-box {
            background-color: #ECFDF5;
            /* Green-50 */
            border: 1px solid #10B981;
            /* Green-500 */
            color: #10B981;
            /* Green-500 */
            padding: 1rem;
            border-radius: 0.5rem;
            margin-bottom: 1.5rem;
            text-align: center;
            font-weight: 600;
        }

        /* Loader Styling */
        .loader {
            border: 3px solid #f3f3f3;
            /* Light grey */
            border-top: 3px solid #c68620;
            /* Saffron color */
            border-radius: 50%;
            width: 24px;
            height: 24px;
            animation: spin 1s linear infinite;
            display: inline-block;
            margin-left: 10px;
            opacity: 1;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        #success-modal {
            transition: opacity 0.3s ease-in-out;
        }

        #success-modal.hidden {
            opacity: 0;
            pointer-events: none;
        }

        #success-modal:not(.hidden) {
            opacity: 1;
            pointer-events: auto;
        }

        /* Style for disabled button */
        button[type="submit"][disabled] {
            opacity: 0.6;
            /* Reduce opacity to indicate disabled state */
            cursor: not-allowed;
            /* Change cursor to indicate the button is inactive */
        }