.elementor-kit-8{--e-global-color-primary:#7B0000;--e-global-color-secondary:#460606;--e-global-color-text:#000000;--e-global-color-accent:#BF9751;--e-global-typography-primary-font-family:"Cinzel";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Cormorant Garamond";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Montserrat";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Dancing Script";--e-global-typography-accent-font-weight:500;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */export default function Home() {
  return (
    <div className="font-sans text-gray-900">
      {/* Header */}
      <header className="fixed top-0 left-0 w-full bg-white shadow-md flex justify-between items-center px-8 py-4 z-50">
        <h1 className="text-2xl font-bold text-maroon-700">Rani Sati Events</h1>
        <nav className="space-x-6 hidden md:flex">
          <a href="#home" className="hover:text-yellow-600">Home</a>
          <a href="#about" className="hover:text-yellow-600">About Us</a>
          <a href="#services" className="hover:text-yellow-600">Services</a>
          <a href="#gallery" className="hover:text-yellow-600">Gallery</a>
          <a href="#contact" className="hover:text-yellow-600">Contact</a>
        </nav>
        <a href="https://wa.me/91XXXXXXXXXX" className="bg-green-600 text-white px-4 py-2 rounded-lg">WhatsApp</a>
      </header>

      {/* Hero Section */}
      <section id="home" className="relative h-screen flex items-center justify-center bg-cover bg-center" style={{backgroundImage: 'url(https://source.unsplash.com/1600x900/?wedding)'}}>
        <div className="bg-black bg-opacity-50 text-center p-8 rounded-xl">
          <h2 className="text-4xl md:text-6xl font-bold text-yellow-400 mb-4">We Create Memories That Last Forever</h2>
          <a href="#contact" className="bg-yellow-500 text-white px-6 py-3 rounded-lg text-lg">Book Now</a>
        </div>
      </section>

      {/* About Section */}
      <section id="about" className="py-16 px-8 text-center bg-white">
        <h3 className="text-3xl font-bold text-maroon-700 mb-6">Welcome to Rani Sati Events</h3>
        <p className="max-w-2xl mx-auto text-lg text-gray-700">
          We are Jaipur’s trusted wedding & event management team, turning your dreams into unforgettable celebrations. From intimate ceremonies to grand weddings, we handle every detail with perfection.
        </p>
      </section>

      {/* Services Section */}
      <section id="services" className="py-16 px-8 bg-gray-50 text-center">
        <h3 className="text-3xl font-bold text-maroon-700 mb-10">Our Services</h3>
        <div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
          <div className="bg-white p-6 rounded-2xl shadow-lg">
            <h4 className="text-xl font-semibold mb-2">Wedding Planning</h4>
            <p>Complete management with elegance, from venue to décor.</p>
          </div>
          <div className="bg-white p-6 rounded-2xl shadow-lg">
            <h4 className="text-xl font-semibold mb-2">Ring Ceremony</h4>
            <p>Elegant and personalized engagement events.</p>
          </div>
          <div className="bg-white p-6 rounded-2xl shadow-lg">
            <h4 className="text-xl font-semibold mb-2">Mehendi & Sangeet</h4>
            <p>Vibrant celebrations with music, colors & joy.</p>
          </div>
          <div className="bg-white p-6 rounded-2xl shadow-lg">
            <h4 className="text-xl font-semibold mb-2">Birthday & Anniversary</h4>
            <p>Special moments made unforgettable.</p>
          </div>
          <div className="bg-white p-6 rounded-2xl shadow-lg">
            <h4 className="text-xl font-semibold mb-2">Festival Celebrations</h4>
            <p>Grand traditional décor & arrangements.</p>
          </div>
          <div className="bg-white p-6 rounded-2xl shadow-lg">
            <h4 className="text-xl font-semibold mb-2">Corporate Events</h4>
            <p>Professional events, perfectly managed.</p>
          </div>
        </div>
      </section>

      {/* Gallery Section */}
      <section id="gallery" className="py-16 px-8 text-center bg-white">
        <h3 className="text-3xl font-bold text-maroon-700 mb-10">Gallery</h3>
        <div className="grid md:grid-cols-3 gap-4 max-w-5xl mx-auto">
          <img src="https://source.unsplash.com/400x400/?wedding,decor" className="rounded-lg shadow"/>
          <img src="https://source.unsplash.com/400x400/?bride,groom" className="rounded-lg shadow"/>
          <img src="https://source.unsplash.com/400x400/?event,celebration" className="rounded-lg shadow"/>
        </div>
      </section>

      {/* Contact Section */}
      <section id="contact" className="py-16 px-8 bg-gray-50 text-center">
        <h3 className="text-3xl font-bold text-maroon-700 mb-6">Contact Us</h3>
        <p className="mb-4">📲 WhatsApp: +91 XXXXX XXXXX</p>
        <p className="mb-4">☎️ Phone: +91 XXXXX XXXXX</p>
        <p className="mb-4">📧 Email: info@ranisatievents.com</p>
        <form className="max-w-lg mx-auto space-y-4">
          <input type="text" placeholder="Name" className="w-full border rounded-lg p-3" required />
          <input type="tel" placeholder="Phone Number" className="w-full border rounded-lg p-3" required />
          <input type="date" className="w-full border rounded-lg p-3" />
          <select className="w-full border rounded-lg p-3">
            <option>Type of Event</option>
            <option>Wedding</option>
            <option>Ring Ceremony</option>
            <option>Mehendi & Sangeet</option>
            <option>Birthday & Anniversary</option>
            <option>Corporate Event</option>
            <option>Festival Celebration</option>
          </select>
          <textarea placeholder="Message" className="w-full border rounded-lg p-3"></textarea>
          <button type="submit" className="bg-yellow-500 text-white px-6 py-3 rounded-lg">Send Inquiry</button>
        </form>
      </section>

      {/* Footer */}
      <footer className="bg-maroon-700 text-white py-6 text-center">
        <p>© {new Date().getFullYear()} Rani Sati Events. All Rights Reserved.</p>
      </footer>
    </div>
  );
}/* End custom CSS */