/* --- Global Styles & Tailwind Prep --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* Sets the background and font for the entire page */
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    line-height: 1.5;
    background-color: #f7f7f7; 
}

/* --- Header & Title Styling Fix --- */
/* The header text is white, but the background image/color is missing from your screenshot */
header {
    /* Ensures the background color from the HTML (bg-delhi-dark) is respected */
    background-color: #0b2d49; 
    color: white;
    padding: 3rem 1.5rem; /* Match the p-6 class in Tailwind for padding */
    text-align: center;
}

header h1 {
    font-size: 2.5rem; /* Make the title large */
    font-weight: 800; /* Extra bold */
    letter-spacing: -0.05em; /* Tracking tight */
}

/* Fixes the intro section margins */
.intro {
    margin-left: auto;
    margin-right: auto;
    max-width: 64rem; /* max-w-4xl */
    padding: 1rem;
    text-align: center;
}

/* --- Packages Grid Layout --- */
.packages {
    max-width: 80rem; /* max-w-7xl */
    margin: 0 auto;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: 3rem;
    
    /* Ensure the grid layout is working */
    display: grid;
    gap: 2rem; /* gap-8 */
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    /* lg:grid-cols-3 */
    .packages {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    /* md:grid-cols-2 */
    .packages {
        grid-template-columns: 1fr;
    }
}


/* --- Package Card Styling --- */
.package {
    background: white;
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-lg */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 450px; /* Ensures a minimum height for list items to align */
    position: relative;
    transition: transform 0.3s, box-shadow 0.3s;
}

.package:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Recommended Package Fix */
.package.scale-\[1\.03\] {
    transform: scale(1.03);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-2xl */
}


/* --- List and Text Cleanup --- */
.package ul {
    list-style: disc; /* Use a bullet point style */
    padding-left: 1.2rem;
    margin-bottom: 2rem;
    list-style-position: outside; /* Ensure bullets don't push text */
}

.package ul li {
    margin-bottom: 0.5rem;
    color: #4b5563;
}

.price {
    margin-bottom: 1.5rem; /* mb-6 */
    display: block; /* To ensure price components are inline but the block itself is centered */
}


/* --- Button Styling --- */
.button {
    /* Default button styling for the "View Details & Book" buttons */
    display: block;
    text-align: center;
    padding: 0.75rem 1rem; /* py-3 */
    border-radius: 0.5rem; /* rounded-lg */
    font-weight: 600; /* font-semibold */
    text-transform: uppercase;
    transition: background-color 0.3s;
}

/* Specific styling for the left (Classic Delhi) button */
.package:nth-child(1) .button {
    background-color: #4b5563; /* Gray-600 */
    color: white;
}
.package:nth-child(1) .button:hover {
    background-color: #374151; /* Gray-700 */
}


/* Specific styling for the middle (Heritage & Bazaar) button - THIS IS THE MISSING ONE IN YOUR SCREENSHOT */
/* The color #1e88e5 is the --delhi-accent bright blue */
.package.scale-\[1\.03\] .button {
    background-color: #1e88e5; 
    color: white;
    padding: 1rem; /* py-4 */
    font-weight: 800; /* font-extrabold */
}
.package.scale-\[1\.03\] .button:hover {
    background-color: #0d47a1; /* hover-delhi-accent-dark */
}

/* Specific styling for the right (Luxury Gateway) button */
.package:nth-child(3) .button {
    background-color: #f59e0b; /* Yellow-600 (Gold accent) */
    color: white;
}
.package:nth-child(3) .button:hover {
    background-color: #d97706; /* Yellow-700 */
}


/* --- Footer Styling Fix --- */
footer {
    /* Ensures the footer sticks to the bottom and has correct coloring */
    background-color: #0b2d49; /* bg-delhi-dark */
    color: #d1d5db; /* gray-300 */
    padding: 1.5rem; /* p-6 */
    text-align: center;
    margin-top: auto; /* Pushes the footer to the bottom of the viewport */
}

footer span {
    color: #1e88e5; /* text-delhi-accent for contact details */
}