/* --- CSS Custom Properties (Variables) --- */
:root {
    --primary-dark: #1a1a1a;
    --accent-red: #e3342f;
    --off-white: #f7f7f7;
    --gray-700: #4b5563;
    --gray-800: #2d3748;
    --gray-600: #4a5568;
    --max-width-4xl: 896px; /* max-w-4xl */
    --max-width-md: 448px;  /* max-w-md */
}

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

body {
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    background-color: var(--primary-dark);
    color: var(--off-white);
}

/* --- Header Styles --- */
.main-header {
    padding: 1rem;
    border-bottom: 1px solid var(--gray-800);
    background-color: var(--primary-dark);
    position: sticky;
    top: 0;
    z-index: 30;
}

.header-content {
    max-width: var(--max-width-4xl);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

.logo-img {
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-lg */
    border: 2px solid var(--accent-red);
}

.logo-text {
    font-size: 1.25rem; /* text-xl */
    font-weight: 800; /* font-extrabold */
    letter-spacing: 0.05em; /* tracking-wider */
    color: var(--off-white);
}

.cta-button {
    font-size: 0.875rem; /* text-sm */
    font-weight: 600; /* font-semibold */
    padding: 0.25rem 0.75rem; /* px-3 py-1 */
    border-radius: 9999px; /* rounded-full */
    border: 2px solid var(--accent-red);
    color: var(--accent-red);
    transition: all 200ms ease-in-out; /* transition duration-200 */
    text-decoration: none;
}

.cta-button:hover {
    background-color: var(--accent-red);
    color: white;
}

/* --- Hero Section Styles --- */
.hero-section {
    position: relative;
    max-width: var(--max-width-4xl);
    margin: 0 auto;
    padding: 1rem;
    padding-top: 2.5rem; /* pt-10 */
}

.hero-title {
    font-size: 2.25rem; /* text-4xl */
    font-weight: 800; /* font-extrabold */
    color: white;
    text-align: center;
    margin-bottom: 2rem; /* mb-8 */
    letter-spacing: -0.025em; /* tracking-tight */
    text-transform: uppercase;
}

/* Responsive adjustment for Hero Title (sm:text-5xl) */
@media (min-width: 640px) {
    .hero-title {
        font-size: 3rem; /* sm:text-5xl equivalent for a good desktop scale */
    }
}

.hero-image-container {
    position: relative;
    width: 100%; /* w-full */
    border-radius: 0.75rem; /* rounded-xl */
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */
}

.hero-image {
    width: 100%; /* w-full */
    height: auto; /* h-auto */
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0; /* inset-0 */
    background-color: black;
    opacity: 0.2;
}

.dots-container {
  display: flex;
  justify-content: center; /* Center the dots horizontally */
  margin-top: 20px; /* Add some space above the dots */
}

.dots {
  list-style: none; /* Remove default list bullets */
  padding: 0;
  display: flex; /* Arrange dots horizontally */
}

.dot {
  width: 10px; /* Size of the dot */
  height: 10px;
  background-color: #ccc; /* Default dot color */
  border-radius: 50%; /* Make it a circle */
  margin: 0 5px; /* Space between dots */
  cursor: pointer; /* Indicate it's clickable */
}

.dot.active {
  background-color: #333; /* Color for the active dot */
}

/* --- Gallery Section Styles --- */
.gallery-section {
    max-width: var(--max-width-4xl);
    margin: 0 auto;
    padding: 1rem;
    margin-top: 4rem; /* mt-16 */
    padding-bottom: 4rem; /* pb-16 */
}

.gallery-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 800; /* font-extrabold */
    color: white;
    text-align: center;
    margin-bottom: 2.5rem; /* mb-10 */
    letter-spacing: 0.025em; /* tracking-wide */
    text-transform: uppercase;
}

/* Responsive adjustment for Gallery Title (sm:text-4xl) */
@media (min-width: 640px) {
    .gallery-title {
        font-size: 2.25rem; /* sm:text-4xl */
    }
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */
    gap: 1rem; /* gap-4 */
}

/* Responsive adjustment for Gallery Grid (sm:grid-cols-3) */
@media (min-width: 640px) {
    .gallery-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.gallery-item {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */
    border-radius: 0.5rem;
    overflow: hidden;
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- Booking Section Styles --- */
.booking-section {
    background-color: var(--primary-dark);
    padding: 4rem 1rem; /* py-16 px-4 */
    border-top: 1px solid var(--gray-800); /* Added subtle separator */
}

.booking-content {
    max-width: var(--max-width-md);
    margin: 0 auto;
}

.booking-title {
    font-size: 1.875rem; /* text-3xl */
    font-weight: 700; /* font-bold */
    text-align: center;
    color: var(--accent-red);
    margin-bottom: 2rem; /* mb-8 */
}

.booking-form {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* space-y-4 */
}

.form-input {
    width: 100%; /* w-full */
    padding: 0.75rem; /* p-3 */
    border-radius: 0.5rem; /* rounded-lg */
    background-color: var(--gray-700);
    color: white;
    border: 1px solid var(--gray-600);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.form-input:focus {
    outline: none;
    border-color: var(--accent-red); /* focus:border-accent-red */
    box-shadow: 0 0 0 1px var(--accent-red); /* focus:ring-1 focus:ring-accent-red */
}

.form-textarea {
    resize: vertical;
    min-height: 8rem; /* approximate the feel of rows="4" */
}

.submit-button {
    /* w-full p-3 rounded-lg text-lg font-bold text-white transition duration-300 */
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: white;
    transition: background-color 300ms ease, transform 150ms ease;
    border: none;
    cursor: pointer;
    
    /* cta-gradient equivalent - making it look striking */
    background: linear-gradient(90deg, var(--accent-red) 0%, #ff524d 100%);
    box-shadow: 0 4px 15px rgba(227, 52, 47, 0.4);
}

.submit-button:hover {
    background: linear-gradient(90deg, #ff524d 0%, var(--accent-red) 100%);
    transform: translateY(-1px);
}

.submit-button:active {
    transform: translateY(0);
}

/* --- Footer Styles --- */
.main-footer {
    padding: 1.5rem; /* p-6 */
    text-align: center;
    font-size: 0.875rem; /* text-sm */
    color: var(--gray-600); /* text-gray-500 equivalent */
    border-top: 1px solid var(--gray-800);
}