<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sovarel Village</title>
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Cormorant+Garamond:ital,wght@1,400;1,500&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">

<!-- Bootstrap Icons CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<!-- Remix Icons CDN -->
<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
<body>
    <body>

<header class="site-header">
    <div class="header-inner">

        <a href="#" class="logo">
            <img src="images/logo.png" alt="Sovarel Village">
        </a>

        <nav class="main-nav" id="mainNav">
            <a href="#">Our Concept</a>
            <a href="#">Phylosophy</a>
            <a href="#">Rituals</a>
            <a href="#">Gift Wellness</a>
            <a href="#">Five Senses</a>
            <a href="#">Sanctuaries</a>
        </nav>

        <a href="#" class="reserve-btn">Reserve A Ritual</a>

        <button class="menu-toggle" id="menuToggle">
            ☰
        </button>

    </div>
</header>

    <!-- Hero Banner -->
    <section class="hero">

        <div class="hero-content">

        <div class="hero-subtitle">
    <span class="line"></span>
    <span class="subtitle-text">
        GURUGRAM'S SACRED WELLNESS SANCTUARY · EST. 2015
    </span>
    <span class="line"></span>
</div>

       <h1 class="hero-title">
    <span class="title-line">
        <span class="cap">W</span>HERE
        <span class="cap">A</span>NCIENT
    </span>

    <span class="title-line india-line">
        <span class="cap">I</span>NDIA
    </span>
</h1>
            

            <div class="hero-highlight">
                Heals the Modern Soul
            </div>

           <p class="hero-description">
        Five thousand years of Ayurvedic wisdom. Seven chakras aligned<br>
        through sacred ritual. Five senses attended to with complete intention.<br>
        One experience unlike anything else in this space.
    </p>

            <div class="hero-buttons">
                <a href="#" class="btn-gold">Discover Our Ritual</a>
                <a href="#" class="btn-outline">Gift An Experience</a>
            </div>

        </div>

    </section>

<section class="chakra-section">
    <div class="chakra-container">

        <div class="chakra-top">
            <div class="chakra-heading">
                <div class="section-label">
                    <span></span> THE SOVAREL CONCEPT
                </div>

                <h2>
                    Healing Through
                    <em>The Seven Chakras</em>
                </h2>
            </div>

            <div class="chakra-intro">
                <p>
                    The city is extraordinary at one thing - turning one person into many.
                    It gives you a title. A role. A calendar full of other people's needs.
                    It asks you to be a professional before 9, a parent by evening, a friend on
                    weekends, and somewhere in the relentless middle of all of it - the real you
                    quietly takes the back seat.
                </p>
            </div>
        </div>

        <div class="chakra-tabs-wrap">

            <div class="chakra-tabs">
                <button class="chakra-tab active" data-tab="muladhara">
                    <span class="chakra-icon red">☷</span>
                    <strong>Muladhara</strong>
                    <small>Root Chakra</small>
                </button>

                <button class="chakra-tab" data-tab="svadhisthana">
                    <span class="chakra-icon orange">☷</span>
                    <strong>Svadhisthana</strong>
                    <small>Sacral Chakra</small>
                </button>

                <button class="chakra-tab" data-tab="manipura">
                    <span class="chakra-icon yellow">☷</span>
                    <strong>Manipura</strong>
                    <small>Solar Plexus</small>
                </button>

                <button class="chakra-tab" data-tab="anahata">
                    <span class="chakra-icon green">☷</span>
                    <strong>Anahata</strong>
                    <small>Heart Chakra</small>
                </button>

                <button class="chakra-tab" data-tab="vishuddha">
                    <span class="chakra-icon cyan">☷</span>
                    <strong>Vishuddha</strong>
                    <small>Throat Chakra</small>
                </button>

                <button class="chakra-tab" data-tab="ajna">
                    <span class="chakra-icon blue">☷</span>
                    <strong>Ajna</strong>
                    <small>Third Eye</small>
                </button>

                <button class="chakra-tab" data-tab="sahasrara">
                    <span class="chakra-icon purple">☷</span>
                    <strong>Sahasrara</strong>
                    <small>Crown Chakra</small>
                </button>
            </div>

            <div class="chakra-content">

                <div class="chakra-panel active" id="muladhara">
                    <div class="chakra-panel-head">
                        <div class="chakra-title-left">
                            <span class="chakra-icon big red">☷</span>
                            <div>
                                <h3>Muladhara</h3>
                                <p>Root Chakra · मूलाधार</p>
                            </div>
                        </div>
                        <em>Grounded · Stable · Safe</em>
                    </div>

                    <div class="divider"></div>

                    <h4>— This chakra governs</h4>
                    <p>Your sense of safety, belonging, physical health, and connection to the earth and body.</p>

                    <h4>— Signs of imbalance in daily life</h4>
                    <div class="tags">
                        <span>Chronic anxiety</span>
                        <span>Feeling unsafe</span>
                        <span>Lower back pain</span>
                        <span>Fatigue & lethargy</span>
                        <span>Financial fear</span>
                        <span>Disconnection from body</span>
                    </div>

                    <h4>— How Sovarel restores this chakra</h4>
                    <div class="restore-box">
                        Warm, deeply grounding oil work. Sesame oil applied to the feet, sacrum, and base of spine.
                        Slow, rhythmic strokes that mirror the earth's own pace. Heat therapy to return warmth to a
                        body that has been holding itself rigid with tension.
                    </div>

                    <p class="quote">
                        "The body cannot heal above the level of the ground it stands on. We return you to earth first."
                    </p>

                    <a href="#" class="chakra-btn">Book A Ritual For This Chakra In Energy Exchange</a>
                </div>

                <div class="chakra-panel" id="svadhisthana">
                    <div class="chakra-panel-head">
                        <div class="chakra-title-left">
                            <span class="chakra-icon big orange">☷</span>
                            <div>
                                <h3>Svadhisthana</h3>
                                <p>Sacral Chakra · स्वाधिष्ठान</p>
                            </div>
                        </div>
                        <em>Creative · Flowing · Sensual</em>
                    </div>

                    <div class="divider"></div>

                    <h4>— This chakra governs</h4>
                    <p>Your emotions, creativity, pleasure, intimacy, and ability to move with life.</p>

                    <h4>— Signs of imbalance in daily life</h4>
                    <div class="tags">
                        <span>Emotional numbness</span>
                        <span>Creative block</span>
                        <span>Guilt</span>
                        <span>Low pleasure</span>
                        <span>Hip tension</span>
                    </div>

                    <h4>— How Sovarel restores this chakra</h4>
                    <div class="restore-box">
                        Gentle abdominal and hip-focused therapies, warm oils, fluid strokes, and breath-led release
                        to invite softness back into the body.
                    </div>

                    <p class="quote">"When the body feels safe to soften, life begins to flow again."</p>

                    <a href="#" class="chakra-btn">Book A Ritual For This Chakra In Energy Exchange</a>
                </div>

                <div class="chakra-panel" id="manipura">
                    <div class="chakra-panel-head">
                        <div class="chakra-title-left">
                            <span class="chakra-icon big yellow">☷</span>
                            <div>
                                <h3>Manipura</h3>
                                <p>Solar Plexus · मणिपुर</p>
                            </div>
                        </div>
                        <em>Power · Fire · Confidence</em>
                    </div>

                    <div class="divider"></div>

                    <h4>— This chakra governs</h4>
                    <p>Your confidence, digestion, willpower, self-belief, and personal fire.</p>

                    <h4>— Signs of imbalance in daily life</h4>
                    <div class="tags">
                        <span>Low confidence</span>
                        <span>Digestive issues</span>
                        <span>Overthinking</span>
                        <span>Control issues</span>
                        <span>Burnout</span>
                    </div>

                    <h4>— How Sovarel restores this chakra</h4>
                    <div class="restore-box">
                        Heat therapies, core oil work, breath awareness, and rhythmic touch to restore inner fire
                        without forcing the body.
                    </div>

                    <p class="quote">"Your power does not need pressure. It needs presence."</p>

                    <a href="#" class="chakra-btn">Book A Ritual For This Chakra In Energy Exchange</a>
                </div>

                <div class="chakra-panel" id="anahata">
                    <div class="chakra-panel-head">
                        <div class="chakra-title-left">
                            <span class="chakra-icon big green">☷</span>
                            <div>
                                <h3>Anahata</h3>
                                <p>Heart Chakra · अनाहत</p>
                            </div>
                        </div>
                        <em>Love · Open · Compassionate</em>
                    </div>

                    <div class="divider"></div>

                    <h4>— This chakra governs</h4>
                    <p>Your love, grief, compassion, relationships, forgiveness, and emotional openness.</p>

                    <h4>— Signs of imbalance in daily life</h4>
                    <div class="tags">
                        <span>Chest tightness</span>
                        <span>Grief</span>
                        <span>Emotional guarding</span>
                        <span>Loneliness</span>
                        <span>Resentment</span>
                    </div>

                    <h4>— How Sovarel restores this chakra</h4>
                    <div class="restore-box">
                        Heart-opening rituals, gentle chest and shoulder work, calming breath, and aromatic oils
                        designed to soften emotional holding.
                    </div>

                    <p class="quote">"The heart opens when it no longer has to protect itself."</p>

                    <a href="#" class="chakra-btn">Book A Ritual For This Chakra In Energy Exchange</a>
                </div>

                <div class="chakra-panel" id="vishuddha">
                    <div class="chakra-panel-head">
                        <div class="chakra-title-left">
                            <span class="chakra-icon big cyan">☷</span>
                            <div>
                                <h3>Vishuddha</h3>
                                <p>Throat Chakra · विशुद्ध</p>
                            </div>
                        </div>
                        <em>Truth · Voice · Expression</em>
                    </div>

                    <div class="divider"></div>

                    <h4>— This chakra governs</h4>
                    <p>Your voice, truth, communication, listening, and expression.</p>

                    <h4>— Signs of imbalance in daily life</h4>
                    <div class="tags">
                        <span>Throat tightness</span>
                        <span>Fear of speaking</span>
                        <span>Over-explaining</span>
                        <span>Suppressed emotions</span>
                    </div>

                    <h4>— How Sovarel restores this chakra</h4>
                    <div class="restore-box">
                        Neck and shoulder release, cooling oils, breath awareness, and sound-led stillness to restore
                        the freedom of expression.
                    </div>

                    <p class="quote">"The voice returns when the body feels heard."</p>

                    <a href="#" class="chakra-btn">Book A Ritual For This Chakra In Energy Exchange</a>
                </div>

                <div class="chakra-panel" id="ajna">
                    <div class="chakra-panel-head">
                        <div class="chakra-title-left">
                            <span class="chakra-icon big blue">☷</span>
                            <div>
                                <h3>Ajna</h3>
                                <p>Third Eye · आज्ञा</p>
                            </div>
                        </div>
                        <em>Intuition · Clarity · Vision</em>
                    </div>

                    <div class="divider"></div>

                    <h4>— This chakra governs</h4>
                    <p>Your intuition, clarity, imagination, inner vision, and mental focus.</p>

                    <h4>— Signs of imbalance in daily life</h4>
                    <div class="tags">
                        <span>Mental fog</span>
                        <span>Headaches</span>
                        <span>Overthinking</span>
                        <span>Poor focus</span>
                        <span>Disconnected intuition</span>
                    </div>

                    <h4>— How Sovarel restores this chakra</h4>
                    <div class="restore-box">
                        Forehead oil work, cooling rituals, silence, gentle pressure points, and guided stillness to
                        quiet the noise of the mind.
                    </div>

                    <p class="quote">"When the mind becomes still, inner sight returns."</p>

                    <a href="#" class="chakra-btn">Book A Ritual For This Chakra In Energy Exchange</a>
                </div>

                <div class="chakra-panel" id="sahasrara">
                    <div class="chakra-panel-head">
                        <div class="chakra-title-left">
                            <span class="chakra-icon big purple">☷</span>
                            <div>
                                <h3>Sahasrara</h3>
                                <p>Crown Chakra · सहस्रार</p>
                            </div>
                        </div>
                        <em>Connected · Peaceful · Infinite</em>
                    </div>

                    <div class="divider"></div>

                    <h4>— This chakra governs</h4>
                    <p>Your spiritual connection, surrender, stillness, wisdom, and sense of unity.</p>

                    <h4>— Signs of imbalance in daily life</h4>
                    <div class="tags">
                        <span>Disconnection</span>
                        <span>Restlessness</span>
                        <span>Lack of meaning</span>
                        <span>Spiritual fatigue</span>
                    </div>

                    <h4>— How Sovarel restores this chakra</h4>
                    <div class="restore-box">
                        Crown oiling, meditation, silence, breath rituals, and deeply restorative stillness to return
                        the body to quiet awareness.
                    </div>

                    <p class="quote">"The highest healing begins with surrender."</p>

                    <a href="#" class="chakra-btn">Book A Ritual For This Chakra In Energy Exchange</a>
                </div>

            </div>

        </div>
    </div>
</section>
<section>
<div class="video-banner" onclick="playBannerVideo(this)">
    <img src="images/video.png" alt="Spa Video">

    <div class="video-overlay"></div>

    <div class="banner-play-btn">
        <span><img src="images/playicon.png"></span>
    </div>

    <video controls style="display:none;">
        <source src="videos/spa-video.mp4" type="video/mp4">
    </video>
</div>
<section class="gift-section">
    <div class="gift-container">

        <div class="gift-top">
            <div>
                <div class="small-title"><span></span> THE GIFT OF WELLNESS</div>
                <h2>Give Someone <em>The Rarest Thing.</em></h2>
            </div>

            <p>
                The most meaningful gift is not something they will put on a shelf. It is a
                moment they will carry inside them — long after everything else is forgotten.
                Every Sovarel gift arrives as a beautifully printed ritual card with hand
                crafted box, a personalised welcome drink chosen for your recipient.
            </p>
        </div>

        <div class="gift-box">

            <div class="gift-tabs">
                <button class="gift-tab active" data-tab="mother">For Your Mother</button>
                <button class="gift-tab" data-tab="father">For Your Father</button>
                <button class="gift-tab" data-tab="partner">For Your Partner</button>
                <button class="gift-tab" data-tab="friend">For Your Friend</button>
            </div>

            <div class="gift-content active" id="mother">
                <div class="gift-left">
                    <span>A Gift For</span>
                    <h3>Your Mother</h3>
                    <em>The woman who never stopped giving</em>

                    <blockquote>
                        She has spent a lifetime making sure everyone else was
                        taken care of. This is one afternoon that is entirely,
                        completely, unapologetically hers.
                    </blockquote>

                    <p>
                        She will say she doesn’t need it. She will say you shouldn’t have.
                        Book it anyway.
                    </p>

                    <p>
                        The Sovarel <strong>Maternal Ritual</strong> begins with warm saffron milk and nutmeg —
                        chosen to replenish what decades of giving have quietly taken.
                        A full Abhyanga with rose and sandalwood oils follows.
                    </p>
                </div>

                <div class="gift-right">
                    <div class="package-title"><span></span> Choose Her Package</div>

                    <div class="package-card active">
                        <div>
                            <h4>The Birthday Love</h4>
                            <p>Abhyanga · Rose & Sandalwood · Head Marma · Welcome Drink · Gift Card</p>
                        </div>
                        <strong>₹6,500</strong>
                    </div>

                    <div class="package-card">
                        <div>
                            <h4>Maternal Ritual + Sauna</h4>
                            <p>Abhyanga · Rose & Sandalwood · Head Marma · Welcome Drink · Gift Card</p>
                        </div>
                        <strong>₹8,500</strong>
                    </div>

                    <div class="package-card">
                        <div>
                            <h4>The Supreme Mother’s Day</h4>
                            <p>Abhyanga · Rose & Sandalwood · Head Marma · Welcome Drink · Gift Card</p>
                        </div>
                        <strong>₹9,500</strong>
                    </div>

                    <a href="#" class="book-btn">Book Now</a>
                </div>
            </div>


  <div class="gift-content" id="father">
                <div class="gift-left">
                    <span>A Gift For father</span>
                    <h3>Your Mother</h3>
                    <em>The woman who never stopped giving</em>

                    <blockquote>
                        She has spent a lifetime making sure everyone else was
                        taken care of. This is one afternoon that is entirely,
                        completely, unapologetically hers.
                    </blockquote>

                    <p>
                        She will say she doesn’t need it. She will say you shouldn’t have.
                        Book it anyway.
                    </p>

                    <p>
                        The Sovarel <strong>Maternal Ritual</strong> begins with warm saffron milk and nutmeg —
                        chosen to replenish what decades of giving have quietly taken.
                        A full Abhyanga with rose and sandalwood oils follows.
                    </p>
                </div>

                <div class="gift-right">
                    <div class="package-title"><span></span> Choose Her Package</div>

                    <div class="package-card active">
                        <div>
                            <h4>The Birthday Love</h4>
                            <p>Abhyanga · Rose & Sandalwood · Head Marma · Welcome Drink · Gift Card</p>
                        </div>
                        <strong>₹6,500</strong>
                    </div>

                    <div class="package-card">
                        <div>
                            <h4>Maternal Ritual + Sauna</h4>
                            <p>Abhyanga · Rose & Sandalwood · Head Marma · Welcome Drink · Gift Card</p>
                        </div>
                        <strong>₹8,500</strong>
                    </div>

                    <div class="package-card">
                        <div>
                            <h4>The Supreme Mother’s Day</h4>
                            <p>Abhyanga · Rose & Sandalwood · Head Marma · Welcome Drink · Gift Card</p>
                        </div>
                        <strong>₹9,500</strong>
                    </div>

                    <a href="#" class="book-btn">Book Now</a>
                </div>
            </div>
        </div>

    </div>
</section>

<section class="philosophy-section">
    <div class="philosophy-left">

        <div class="section-label">
            <span></span> OUR PHILOSPHY
        </div>

        <h2>
            Rooted In
            <em>Ancient Truth</em>
        </h2>

        <div class="quote-box">
            <p>"Aarogyam Paramam Bhagyam - Health is the greatest fortune."</p>
            <small>- Charaka Samhita, 600 BCE</small>
        </div>

        <div class="philosophy-text">
            <p>
                For fifteen years, Sovarel has been Gurugram's keeper of India's most
                sacred healing traditions — translating texts written on palm leaves into
                rituals performed in spaces of modern luxury. We do not approximate
                ancient wisdom. We honour it.
            </p>

            <p>
                Every therapist trains for eighteen months in Ayurvedic anatomy before
                touching a guest. Every oil is cold-pressed from single-origin Indian
                plants. Every touch is an act of complete, unhurried attention.
            </p>
        </div>

    </div>

    <div class="philosophy-right">
        <div class="mandala"></div>

        <div class="mantra-text">
            <h3>Sarve Bhavantu Sukhinah</h3>
            <h4>सर्वे भवन्तु सुखिनः</h4>
            <p>May All Beings Be Happy</p>
        </div>
    </div>
</section>

<section class="ritual-section">
    <div class="ritual-container">

        <div class="ritual-top">
            <div>
                <div class="ritual-label">
                    <span></span> ENERGY EXCHANGE
                </div>

                <h2 class="ritual-title">
                    Reserve Your
                    <em>Sacred Ritual</em>
                </h2>

                <div class="book-tabs">
                    <p>Book By</p>
                    <button class="active">Ritual</button>
                    <button>Chakra</button>
                </div>
            </div>

            <div class="ritual-info">
                <p>
                    Book directly from our ritual collection, or let your dominant chakra guide
                    you to the treatment your body truly needs today. Book directly from our
                    ritual collection, or let your dominant chakra guide you to the treatment
                    your body truly needs today.
                </p>

                <div class="scroll-text">
                    Scroll To Explore All Rituals <span></span>
                </div>
            </div>
        </div>

        <div class="ritual-scroll">

            <div class="ritual-card active-card">
                <div class="card-inner">
                    <div class="ritual-tag">
                        <span></span> Signature
                    </div>

                    <h3>Golden Infinity</h3>
                    <em>The Supreame Ritual</em>

                    <p class="ritual-desc">
                        Two therapists in perfect synchrony, warm Ksheerabala oil, ancient
                        marma-point therapy in silence. Ends with Shirodhara — 20 minutes
                        of pure dissolution across the third eye
                    </p>

                    <div class="ritual-meta">
                        <div>
                            <small>Duration</small>
                            <strong>120 Min</strong>
                        </div>

                        <div>
                            <small>Tradition</small>
                            <strong>Ayurvedic</strong>
                        </div>

                        <div>
                            <small>Included</small>
                            <strong>Sauna + Steame</strong>
                        </div>

                        <div class="price">
                            ₹12,500
                        </div>
                    </div>

                    <a href="#" class="ritual-btn">Reserve This Ritual</a>
                </div>
            </div>

            <div class="ritual-card small-card">
                <div class="card-inner">
                    <div class="ritual-tag">
                        <span></span> Signature
                    </div>

                    <h3>Golden Infinity</h3>
                    <em>The Supreame Ritual</em>

                    <p class="ritual-desc">
                        Two therapists in perfect synchrony, warm Ksheerabala oil, ancient
                        marma-point therapy in silence. Ends with Shirodhara 
                    </p>

                    <div class="ritual-meta">
                        <div>
                            <small>Duration</small>
                            <strong>120 Min</strong>
                        </div>

                        <div>
                            <small>Tradition</small>
                            <strong>Ayurvedic</strong>
                        </div>

                        <div>
                            <small>Included</small>
                            <strong>Sauna</strong>
                        </div>
                    </div>

                    <a href="#" class="ritual-btn">Reserve This Ritual</a>
                </div>
            </div>

        </div>

    </div>
</section>
<script>
    const tabs = document.querySelectorAll(".gift-tab");
const contents = document.querySelectorAll(".gift-content");

tabs.forEach(tab => {
    tab.addEventListener("click", function () {

        // Active tab
        tabs.forEach(t => t.classList.remove("active"));
        this.classList.add("active");

        // Hide all contents
        contents.forEach(content => {
            content.classList.remove("active");
        });

        // Show selected content
        document.getElementById(this.dataset.tab).classList.add("active");
    });
});
</script>
<script>
function playVideo(box){
    const img = box.querySelector("img");
    const icon = box.querySelector(".play-icon");
    const video = box.querySelector("video");

    img.style.display = "none";
    icon.style.display = "none";
    video.style.display = "block";

    video.play();
}
</script>
</section>
<script>
const menuToggle = document.getElementById("menuToggle");
const mainNav = document.getElementById("mainNav");

menuToggle.addEventListener("click", function(){
    mainNav.classList.toggle("active");

    if(mainNav.classList.contains("active")){
        menuToggle.innerHTML = "×";
    }else{
        menuToggle.innerHTML = "☰";
    }
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function () {

    const chakraTabs = document.querySelectorAll(".chakra-tab");
    const chakraPanels = document.querySelectorAll(".chakra-panel");

    chakraTabs.forEach(function(tab){
        tab.addEventListener("click", function(){

            const target = tab.getAttribute("data-tab");

            chakraTabs.forEach(function(item){
                item.classList.remove("active");
            });

            chakraPanels.forEach(function(panel){
                panel.classList.remove("active");
            });

            tab.classList.add("active");

            const activePanel = document.getElementById(target);
            if(activePanel){
                activePanel.classList.add("active");
            }
        });
    });

});
</script>
<script>
    function playBannerVideo(box){
    const img = box.querySelector("img");
    const video = box.querySelector("video");

    box.classList.add("playing");
    img.style.display = "none";
    video.style.display = "block";
    video.play();
}
</script>
</body>
</html>