/* --- 1. Global Styles & Variables --- */
:root {
    --bg-color: #0a0a0a;
    --text-color: #e0e0e0;
    --primary-color: #c9ab81; /* A soft gold */
    --surface-color: #1a1a1a;
    --font-serif: 'Cormorant Garamond', serif;
    --font-sans: 'Poppins', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--font-sans);
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
}
body::before {
    content: '';
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%231a1a1a' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.1;
}
h1, h2, h3 { font-family: var(--font-serif); font-weight: 700; }
.section-title {
    font-size: 3rem;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary-color);
    font-weight: 300;
}

/* --- 2. Hero Section, Slider & Navigation --- */
.hero { height: 100vh; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #fff; }
.slider-container { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; opacity: 0; z-index: 1; transform: scale(1.15); }
.slide.active { opacity: 1; z-index: 2; }
.slide::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0.1)); }
.slide-content { position: absolute; top: 50%; left: 10%; transform: translateY(-50%); z-index: 3; max-width: 600px; }
.slide-title { font-size: 5rem; font-weight: 300; line-height: 1.1; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); }
.slide-subtitle { font-family: var(--font-sans); font-size: 1rem; letter-spacing: 4px; text-transform: uppercase; margin-top: 1rem; color: var(--primary-color); }
.slide-stats { display: flex; gap: 3rem; margin-top: 2rem; border-left: 2px solid var(--primary-color); padding-left: 1.5rem; }
.slide-stats span { font-size: 2.5rem; font-family: var(--font-serif); font-weight: 700; line-height: 1; }
.slide-stats p { font-size: 0.9rem; font-weight: 300; }
nav { position: absolute; top: 0; left: 0; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 2rem 4rem; z-index: 10; }
.logo{display:flex;align-items:center;gap:1rem;text-decoration:none;}
.logo img{height:50px;width:60px;border-radius:60%;object-fit:cover;border:2px solid var(--primary-color);}
.logo span{font-family:var(--font-serif);font-size:2.2rem;font-weight:700;color:var(--primary-color);}
nav ul { list-style: none; display: flex; gap: 2rem; }
nav a { text-decoration: none; color: var(--text-color); font-weight: 900; transition: color 0.3s ease; }
nav a:hover { color: var(--primary-color); }
.slider-controls { position: absolute; bottom: 150px; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; align-items: center; gap: 1.5rem; }
.slider-nav button { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; transition: all 0.3s ease; backdrop-filter: blur(5px); }
.slider-nav button:hover { background: var(--primary-color); border-color: var(--primary-color); color: var(--bg-color); }
.slider-pagination { display: flex; gap: 10px; }
.pagination-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all 0.3s ease; }
.pagination-dot.active { background: #fff; transform: scale(1.2); }
.booking-bar{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);width:90%;max-width:900px;background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border-radius:12px;padding:1rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;z-index:10;border:1px solid rgba(255,255,255,0.2);gap:1rem}
.booking-field{flex:1 1 20%;min-width:120px}
.booking-field label{display:block;font-size:0.8rem;font-weight:300;margin-bottom:0.25rem;color:#ccc}
.booking-field input{width:100%;background:transparent;border:none;color:#fff;font-family:var(--font-sans,sans-serif);font-size:1rem;outline:none;padding:0.25rem 0}
.booking-field input::placeholder{color:rgba(255,255,255,0.7)}
.booking-field input[type="date"]::-webkit-calendar-picker-indicator{filter:invert(1)}
.search-btn{background:var(--primary-color,#ff5e5e);color:var(--bg-color,#fff);border:none;width:50px;height:50px;border-radius:50%;font-size:1.5rem;cursor:pointer;transition:transform 0.3s ease;flex-shrink:0}
.search-btn:hover{transform:scale(1.1)}@media(max-width:600px){.booking-bar{flex-direction:column;align-items:stretch}.search-btn{align-self:center;margin-top:1rem}}
.fab { position: fixed; bottom: 2rem; left: 2rem; width: 60px; height: 60px; background-color: #25D366; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 100; box-shadow: 0 4px 15px rgba(0,0,0,0.2); transition: transform 0.3s ease; }
.fab:hover { transform: scale(1.1); }
.fab svg { width: 30px; height: 30px; }

/* --- 3. Features Grid Section --- */
.features-grid-section { padding: 6rem 4rem; max-width: 1400px; margin: 0 auto; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; }
.feature-card { background-color: var(--surface-color); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.feature-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
.card-image-wrapper { height: 250px; overflow: hidden; }
.feature-card.large-image-card .card-image-wrapper { height: 480px; }
.feature-card.wide-card .card-image-wrapper { height: 250px; }
.card-image-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.feature-card:hover .card-image-wrapper img { transform: scale(1.05); }
.card-content { padding: 1.5rem; flex-grow: 1; display: flex; flex-direction: column; justify-content: space-between; }
.card-content h3 { font-size: 1.8rem; margin-bottom: 0.75rem; color: var(--primary-color); font-weight: 400; }
.card-content p { font-size: 0.95rem; line-height: 1.6; color: #b0b0b0; font-weight: 300; }

/* --- 4. Showcase Villa Slider Section (Updated for Pairs) --- */
.showcase-section {
    position: relative;
    background-color: #0a0a0a;
    background-image: url('https://www.transparenttextures.com/patterns/dark-matter.png');
    padding: 4.5rem 0 1.5rem 0;
    color: #fff;
    overflow: hidden;
}
.showcase-header { text-align: center; padding: 0 2rem 3rem 2rem; }
.showcase-header .section-title { font-size: 2.4rem; margin: 0 0 0.5rem 0; font-weight: 600; color: #fff; }
.showcase-header .section-subtitle { color: #b0b0b0; font-weight: 300; max-width: 600px; margin: 0 auto; }

.showcase-viewport { 
    height: 80vh; /* CHANGED: Large (90vh) se Medium (80vh) kiya */
    width: 100%; 
    overflow: hidden; 
    position: relative; 
}
.showcase-track { 
    display: flex; 
    height: 100%; 
    align-items: center; 
    will-change: transform; 
    width: 200%; /* Total pairs (2) * 100% */
}

/* NEW: For Villa Pairs */
.villa-pair {
    width: 100vw; /* Har pair poori screen ki width lega */
    height: 100%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw; /* Dono cards ke beech mein gap */
    padding: 0 5vw; /* Side se thodi padding */
}

.showcase-card { 
    flex-shrink: 0; 
    width: 45%; /* CHANGED: Card ki width pair ke hisaab se set ki */
    max-width: 550px; /* Thoda chota max-width */
    background: linear-gradient(180deg, #1a1a1a 0%, #111111 100%); 
    border: 1px solid #2a2a2a; 
    border-radius: 16px; 
    box-shadow: 0 20px 50px rgba(0,0,0,0.55); 
    overflow: hidden; 
    display: flex; 
    flex-direction: column; 
}
.card-image-container { height: 300px; /* Image height thodi kam ki */ border-radius: 16px 16px 0 0; overflow: hidden; position: relative; background-size: cover; background-position: center; }
.card-image-container::after { content: ''; position: absolute; bottom: -155px; left: 0; width: 100%; height: 150px; background: inherit; background-size: cover; background-position: bottom; transform: scaleY(-1); opacity: 0.32; mask-image: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 80%); pointer-events: none; }

.card-content-showcase { 
    padding: 1.2rem 1.4rem; /* CHANGED: Padding kam ki */
    display:flex; 
    flex-direction:column; 
    gap: 0.2rem; /* CHANGED: Main gap kam kiya */
}
.card-content-showcase h3 { font-size: 1.8rem; font-weight: 400; color: var(--primary-color); margin: 0; }
.location { color: #999; display:flex; align-items:center; gap:.4rem; margin: .2rem 0 0 0; /* Margin kam kiya */ }
.location svg { width: 15px; height: 15px; fill: #777; }
.specs-bar { display:flex; justify-content: space-between; align-items:center; padding: .6rem 0; border-top: 1px solid #222; border-bottom: 1px solid #222; margin: .6rem 0 .8rem 0; /* Margin kam kiya */ gap: .8rem; }
.specs-bar span { display:flex; align-items:center; gap:.5rem; color:#ddd; font-size:.9rem; flex:1; }
.specs-bar svg { width:18px; height:18px; fill: var(--primary-color); flex-shrink:0; }
.price-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-top:0; /* Margin kam kiya */ }
.price-tag { font-size:1.5rem; font-weight:700; color:#fff; white-space:nowrap; }
.price-tag span { font-size: .9rem; font-weight:300; color:#9b9b9b; margin-left:.4rem; }
.btn-book-showcase { background-color: var(--primary-color); color:#000; padding:.8rem 1rem; border-radius:10px; font-weight:700; text-transform:uppercase; letter-spacing: .8px; transition: transform .12s ease, box-shadow .12s ease; min-width:120px; text-align:center; text-decoration: none; font-size: 0.9rem; }
.btn-book-showcase:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,0.45); }
.showcase-floor { position:absolute; bottom:0; left:0; width:100%; height:220px; z-index:-1; background: linear-gradient(to top, rgba(10,10,10,1) 0%, transparent 100%); }

/* --- Map Icon for Showcase Card --- */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Aligns title to top, button to top */
    gap: 1rem;
    margin-bottom: 0.5rem; /* Adds a little space before specs-bar */
}

.card-map-btn {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid #333;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a0a0a0;
    transition: all 0.2s ease-in-out;
}

.card-map-btn:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #0a0a0a;
}

.card-map-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

@media (max-width: 900px) { .showcase-viewport { height:auto; } .showcase-track { width: auto; padding: 0 5vw; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:2rem; } .villa-pair { width: auto; } .showcase-card { width:80vw; margin-right:4vw; scroll-snap-align:center; } .card-image-container::after { display:none; } .section-title { font-size:1.6rem; } }


/* --- 5. Events Section --- */
.events-section {
    padding: 6rem 4rem;
    background-color: var(--surface-color);
}
.section-subtitle {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    font-weight: 300;
    color: #b0b0b0;
    margin-top: -1.5rem;
    margin-bottom: 3rem;
}
.events-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}
.event-card {
    background-color: var(--bg-color);
    border-radius: 20px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.3);
}
.event-image-wrapper {
    height: 300px;
    overflow: hidden;
}
.event-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.event-card:hover .event-image-wrapper img {
    transform: scale(1.05);
}
.event-content {
    padding: 1.5rem;
}
.event-content h3 {
    font-size: 1.5rem;
    font-weight: 400;
}
.event-content p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #b0b0b0;
    margin: 0.75rem 0 1.5rem 0;
}
.stat-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background-color: var(--surface-color);
    color: var(--text-color);
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 300;
}

/* --- 6. Privé Section (Horizontal Scroll) --- */
.prive-section {
    background: #0a0a0a; /* Dark background as per image */
    padding: 6rem 4rem; /* Adjust padding as needed */
    color: #fff;
    max-width: 100vw; /* Ensure it takes full viewport width */
    overflow: hidden; /* Hide scrollbar for controlled scrolling */
}

.prive-header {
    display: grid;
    grid-template-columns: 200px 1fr 180px; /* Logo, Text, Button */
    gap: 2rem;
    align-items: end; /* Align items to the bottom */
    margin-bottom: 3rem; /* Space below header before carousel */
    max-width: 1400px; /* Limit header width */
    margin-left: auto;
    margin-right: auto;
}

/* .prive-logo-container {
     Logo already has padding from prive-logo class
}  */

.prive-logo {
    font-family: var(--font-serif);
    color: var(--primary-color);
    background-color: #2b1f16; /* Dark brown background for logo */
    padding: 1rem 1.5rem;
    display: inline-block; /* Make it fit content */
    text-align: center;
    border-radius: 8px; /* Slightly rounded corners */
}
.prive-logo span {
    display: block;
    font-size: 0.8rem; /* Smaller font for "ELYSIAN" */
    letter-spacing: 3px;
    margin-bottom: 0.2rem;
    color: #b0b0b0; /* Lighter color for "ELYSIAN" */
}
.prive-logo {
    font-size: 1.5rem; /* "PRivé" text size */
    font-weight: 700;
}

.prive-intro-text h3 {
    font-size: 1.5rem; /* Adjust font size to match image */
    font-weight: 300;
    color: #e0e0e0;
    margin-left: 2rem; /* Indent to align with the start of the card content visually */
}

.prive-explore-btn {
    text-align: right;
}
.prive-btn {
    background-color: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 0.8rem 2rem;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 50px; /* More rounded */
}
.prive-btn:hover {
    background-color: var(--primary-color);
    color: var(--bg-color);
}


.prive-carousel-wrapper {
    position: relative;
    max-width: 100vw; /* Ensures full width, important for overflow */
    margin: 0 -4rem; /* Compensate for section padding to go edge-to-edge */
    padding: 0 4rem; /* Re-apply padding inside the wrapper for the carousel items */
}

.prive-scroller-container {
    overflow: hidden; /* Hide default scrollbar */
}

.prive-scroller {
    display: flex;
    gap: 2rem; /* Space between cards */
    padding-bottom: 1.5rem; /* Space for potential scrollbar or bottom margin */
    /* GSAP will control the transform: translateX */
}

.prive-card {
    position: relative;
    flex-shrink: 0;
    width: 380px; /* Fixed width for cards, adjust as needed for image */
    height: 500px; /* Fixed height for cards */
    background-color: var(--surface-color); /* Dark card background */
    border-radius: 16px;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
.prive-card img {
    width: 100%;
    height: 100%; /* Image fills the card height */
    object-fit: cover;
    display: block;
}
.prive-card-overlay {
    position: absolute;
    bottom: 80px; /* Position above the info box */
    left: 20px;
    right: 20px; /* Stretch across the card, with padding */
    display: flex;
    justify-content: space-around; /* Distribute items evenly */
    gap: 0.75rem; /* Smaller gap between items */
    background: rgba(0,0,0,0.6); /* Slightly darker overlay */
    backdrop-filter: blur(8px); /* Stronger blur */
    padding: 0.75rem 1rem;
    border-radius: 50px;
    font-size: 0.85rem; /* Slightly smaller text */
    text-align: center;
}
.prive-card-overlay span {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #eee;
}
.prive-card-overlay svg {
    width: 16px; /* Smaller icons */
    height: 16px;
    fill: var(--primary-color); /* Gold icons */
}
.prive-card-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1rem 1.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.6), transparent); /* Stronger gradient for visibility */
}
.prive-card-info h4 {
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 0.25rem;
    color: var(--primary-color); /* Gold color for villa names */
}
.prive-card-info p {
    font-weight: 300;
    color: #ccc;
    font-size: 0.9rem;
}

.prive-nav {
    display: flex;
    justify-content: center; /* Center the buttons below the carousel */
    gap: 1.5rem;
    margin-top: 3rem; /* Space between carousel and nav buttons */
}
.prive-nav button {
    background-color: var(--surface-color); /* Dark button background */
    border: 1px solid var(--primary-color); /* Gold border */
    color: var(--primary-color); /* Gold arrow */
    width: 45px;
    height: 45px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.prive-nav button:hover {
    background-color: var(--primary-color);
    color: var(--bg-color); /* Dark text on hover */
    transform: translateY(-2px);
}



/* --- 7. Partner Section --- */
.partner-section {
    padding: 6rem 2rem; /* Section ke upar-neeche space */
}

.partner-card {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Left aur Right, do columns */
    gap: 3rem;
    align-items: center;
    max-width: 100%; /* Section ki width 80% rahegi */
    margin: 0 auto; /* Section ko page ke center mein laane ke liye */
   background-color: #f5e7df; /* var(--surface-color) Aapka main dark background color */
    padding: 4rem;
    border-radius: 24px; /* Card ke corners ko round karne ke liye */
}

.partner-content .eyebrow-text {
    font-size: 0.9rem;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--primary-color);
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.partner-content h2 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    font-weight: 400;
}

.partner-content .description {
    color: #b0b0b0;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 450px; /* Paragraph ki width kam karne ke liye */
}

.btn-dark {
    background-color: #252525; /* Image jaisa dark button */
    color: #fff;
    border-color: #252525;
}
.btn-dark:hover {
    background-color: #333;
    border-color: #333;
}

.partner-image-wrapper {
    position: relative; /* Tags ko iske upar position karne ke liye */
    height: 500px;
}

.partner-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

/* Partner section ke text ko dark karne ke liye */
.partner-card .partner-content h2,
.partner-card .partner-content .description {
    color: #2b1f16; /* Ek dark brown color jo theme se match karega */
}

.partner-card .partner-content .eyebrow-text {
    color: #cbad83; /* Gold color ka thoda dark version */
}

/* Image ke upar wale 3 tags/headings ki styling */
.image-tag {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(8px);
    color: var(--primary-color); /* Image jaisa reddish text color */
    padding: 0.7rem 1.2rem;
    border-radius: 50px; /* Pill shape ke liye */
    font-size: 0.9rem;
    font-weight: 400;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Har tag ki alag position */
#tag-1 {
    top: 2rem;
    left: -3rem;
}
#tag-2 {
    top: 15rem;
    right: -4rem;
}
#tag-3 {
    bottom: 2rem;
    left: 4rem;
}

/* --- 8. Platforms & Partners Section --- */
.platforms-section {
    padding: 2rem 0; /* Upar neeche kam space */
}

.platforms-group {
    padding: 4rem 2rem;
    max-width: 1200px; /* Max width for content */
    margin: 0 auto; /* Center mein laane ke liye */
}

.platforms-title {
    text-align: center;
    font-family: var(--font-serif);
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 4rem;
    color: var(--primary-color);
}

.logo-grid {
    display: flex; /* Grid se Flex mein change karein */
    flex-wrap: wrap; /* Taaki logos neeche wali line mein aa sakein */
    justify-content: center; /* YEH LINE SAB KUCH CENTER KAR DEGI */
    gap: 4rem 2rem;
    align-items: center;
}

.logo-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px; /* YEH NAYI LINE ADD KAREIN */
}

.logo-item svg {
    height: 40px;
    width: auto;
    max-width: 150px;
    /* fill property yahan se hata di gayi hai */
    opacity: 0.7; /* Default mein thoda halka dikhega */
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.logo-item:hover svg {
    opacity: 1; /* Hover par poora color dikhega */
    transform: scale(1.1); /* Hover par halka sa zoom */
}

/* --- 9. Footer --- */
.footer {
    position: relative;
    overflow: hidden;
    background-color: #000;
    color: #a0a0a0;
    padding: 4rem 4rem 2rem 4rem;
    border-top: 1px solid #2a2a2a;
}

.footer::before {
    content: 'Udaipuri Villas';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-serif);
    font-weight: 700;
    font-size: 20vw;
    line-height: 1;
    color: rgba(255, 255, 255, 0.04);
    z-index: 1;
    pointer-events: none;
    /* YEH NAYI LINE ADD KAREIN (Golden Glow ke liye) */
    text-shadow: 0 -3px 20px rgba(201, 171, 129, 0.15);
    text-align: right;
}

.footer-main {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr; /* Center column ko zyada space di hai */
    gap: 2rem;
    align-items: start;
    padding-bottom: 3rem;
}

/* Left Column: Menus */
.footer-column h4 {
    font-family: var(--font-serif);
    font-size: 1.2rem;
    color: #fff;
    margin-bottom: 1.5rem;
    font-weight: 400;
}
.footer-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-column ul li {
    margin-bottom: 0.8rem;
}
.footer-column ul a {
    text-decoration: none;
    color: #a0a0a0;
    transition: color 0.3s ease;
}
.footer-column ul a:hover {
    color: var(--primary-color);
}

/* Center Column: CTA */
.footer-center-cta {
    text-align: center;
    padding-top: 1rem; /* Thoda neeche se start hoga */
}
.footer-center-cta h2 {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--primary-color);
}
.footer-center-cta p {
    font-weight: 300;
    margin-top: 1rem;
    color: #a0a0a0;
}
.footer-center-cta .email {
    margin-top: 1.5rem;
    font-size: 1.1rem;
    color: var(--primary-color);
}

/* Right Column: Social Icons */
.footer-social-column {
    display: flex;
    justify-content: flex-end; /* Icons ko right side mein push karega */
}
.footer-social {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
}
.footer-social a {
    color: #888;
    transition: color 0.3s ease;
}
.footer-social a:hover {
    color: #fff;
}
.footer-social svg {
    width: 24px;
    height: 24px;
}

/* Bottom Copyright Line */
.footer-copyright {
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: 0.85rem;
    color: #666;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #2a2a2a;
}
.footer-copyright p {
    margin: 0.25rem 0;
}

/* Mobile footer design */
@media (max-width: 900px) {
    .footer-main {
        grid-template-columns: 1fr; /* Sab kuch ek ke neeche ek (stack) */
        text-align: center;
    }
    .footer-social-column {
        justify-content: center; /* Icons ko center mein layega */
        margin: 2rem 0;
    }
    .footer-social {
        flex-direction: row; /* Social icons horizontal */
    }
}


/* --- 10. Responsiveness (UPDATED) --- */

/* For DESKTOPS and larger */
@media (min-width: 1024px) {
    /* Existing styles for Features Grid layout on large screens */
    .features-grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; }
    .feature-card:nth-child(1) { grid-column: 1 / 2; grid-row: 1 / 3; }
    .feature-card:nth-child(4) { grid-column: 2 / 4; grid-row: 2 / 3; flex-direction: row; align-items: center; text-align: left; }
    .feature-card:nth-child(4) .card-image-wrapper { width: 50%; height: 100%; border-radius: 0; border-top-left-radius: 12px; border-bottom-left-radius: 12px; }
    .feature-card:nth-child(4) .card-content { width: 50%; }

    /* Privé Specific Desktop Adjustments */
    .prive-scroller {
        /* On desktop, we want to hide overflow-x for the controlled scroll */
        overflow-x: hidden;
    }
}

/* For TABLETS in portrait and smaller (up to 1023px) */
@media (max-width: 1023px) {
    /* Existing styles for Features Grid */
    .features-grid-section { padding: 4rem 2rem; }
    .features-grid { grid-template-columns: 1fr; gap: 2rem; }
    .feature-card.large-image-card .card-image-wrapper, .feature-card.wide-card .card-image-wrapper { height: 250px; }
    .feature-card.wide-card { flex-direction: column; }
    .feature-card.wide-card .card-image-wrapper, .feature-card.wide-card .card-content { width: 100%; border-radius: 0; }
    .feature-card.wide-card .card-image-wrapper { border-top-left-radius: 12px; border-top-right-radius: 12px; }
    .feature-card.wide-card .card-content { text-align: left; }

    /* Existing styles for Events Grid */
    .events-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Privé Section responsive adjustments */
    .prive-section {
        padding: 4rem 0; /* Remove horizontal padding, carousel will handle it */
    }
    .prive-header {
        grid-template-columns: 1fr; /* Stack elements */
        text-align: center;
        padding: 0 2rem; /* Add back horizontal padding for header content */
        margin-bottom: 2rem;
    }
    .prive-logo-container {
        display: flex; /* Center logo container */
        justify-content: center;
        margin-bottom: 1rem;
    }
    .prive-intro-text h3 {
        font-size: 1.3rem; /* Adjust font size */
        margin-left: 0; /* Remove indent */
        margin-bottom: 1.5rem;
    }
    .prive-explore-btn {
        text-align: center; /* Center button */
    }
    .prive-carousel-wrapper {
        margin: 0; /* No negative margins */
        padding: 0 2rem; /* Add consistent padding for mobile scroll */
    }
    .prive-scroller-container {
        overflow-x: auto; /* Enable native touch scroll on mobile */
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory; /* Enable smooth snapping to cards */
    }
    .prive-scroller-container::-webkit-scrollbar {
        display: none; /* Hide scrollbar for cleaner look */
    }
    .prive-card {
        scroll-snap-align: start; /* Snap to the start of each card */
        width: 300px; /* Make cards slightly smaller on mobile */
        height: 450px; /* Adjust height */
    }
    .prive-nav {
        /* On mobile, we might want to hide the buttons if using native scroll, or keep them */
        /* For now, keep them but centered */
        margin-top: 2rem;
    }
}

/* For smaller TABLETS (up to 900px) */
@media (max-width: 900px) {
    /* Existing styles for Hero Slider */
    .slide-title { font-size: 3.5rem; }
    .slide-content { left: 5%; right: 5%; max-width: none; }
    .booking-bar { flex-direction: column; width: 90%; bottom: 20px; padding: 1.5rem; gap: 1rem; align-items: stretch; }
    .booking-field { border-right: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 0.5rem 0; }
    .booking-bar .booking-field:last-of-type { border-bottom: none; }
    .search-btn { width: 100%; border-radius: 8px; margin-top: 1rem; }
    .slider-controls { bottom: 280px; }
}

/* For MOBILE devices (up to 768px) */
@media (max-width: 768px) {
    /* Existing styles for general layout */
    nav { padding: 1.5rem 2rem; }
    nav ul { display: none; }
    .section-title { font-size: 2.5rem; }
   .features-grid-section { padding: 4rem 2rem; }

    /* Existing style for Events Grid on mobile */
    .events-grid {
        grid-template-columns: 1fr;
    }

    /* Privé Section further mobile adjustments */
    .prive-card {
        width: 280px; /* Even smaller cards on very small screens */
        height: 400px;
    }
}

/* --- Responsiveness for 7 --- */
@media (max-width: 1200px) {
    .partner-card {
        max-width: 95%; /* Chhote desktop par thoda bada */
        padding: 3rem;
        grid-template-columns: 1fr; /* Mobile/Tablet par stack ho jayega */
    }
    .partner-content {
        text-align: center; /* Content center mein aa jayega */
    }
    .partner-content .description {
        margin-left: auto;
        margin-right: auto;
    }
    .partner-image-wrapper {
        margin-top: 2rem;
        height: 400px;
    }
    #tag-1, #tag-2, #tag-3 {
        position: static; /* Tags ab image ke upar nahi, neeche aayenge */
        display: inline-block;
        margin: 0.5rem;
    }
    .partner-image-wrapper {
        text-align: center;
    }
}


/* extra designd */
/* 1) partner image zoom effect */
.partner-image-wrapper{border-radius:16px;}.partner-image-wrapper img{transition:transform .5s ease;}.partner-card:hover .partner-image-wrapper img{transform:scale(1.05);}


/* --- 2) Mobile Padding Fix for Events & Partner Sections --- */
@media (max-width: 768px) {
    .events-section,
    .partner-section {
        padding-left: 1.5rem;  /* Side ki padding kam ki */
        padding-right: 1.5rem; /* Side ki padding kam ki */
    }
}
/* Date input  */
input[type="date"] {
    position: relative;
}

/* date inut */
input[type="date"]::before {
    content: attr(placeholder);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none; /* Isse click kaam karega */
}

/* sure */
input[type="date"]:focus::before,
input[type="date"]:valid::before {
    display: none;
}