{"id":49,"date":"2025-05-22T04:39:49","date_gmt":"2025-05-22T04:39:49","guid":{"rendered":"https:\/\/pif.workspaces.company\/?page_id=49"},"modified":"2025-11-18T07:34:52","modified_gmt":"2025-11-18T07:34:52","slug":"home","status":"publish","type":"page","link":"https:\/\/pif.workspaces.company\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"49\" class=\"elementor elementor-49\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1bb13df e-con-full e-flex e-con e-parent\" data-id=\"1bb13df\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2922b80 elementor-widget elementor-widget-html\" data-id=\"2922b80\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Lora:wght@400;700&family=Manrope:wght@300;400;700&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n    \/* ============================================\r\n    PRELOADER STYLES START\r\n    ============================================\r\n    *\/\r\n    .preloader {\r\n        position : fixed;\r\n        top: 0px;\r\n        left: 0px;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-color: #ffffff; \/* White background for entrance *\/\r\n        z-index: 9999;\r\n        display: flex;\r\n        justify-content: center;\r\n        align-items: center;\r\n        opacity: 1;\r\n        \/* UPDATED: Added transition for background fade *\/\r\n        transition: background-color 1s ease-in-out;\r\n    }\r\n\r\n    \r\n\r\n    .preloader-content {\r\n        position: fixed;\r\n        top: 50%;\r\n        left: 50%;\r\n        opacity: 0;\r\n        animation: content-sequence 5s ease-in-out forwards;\r\n        text-align: center;\r\n    }\r\n    \r\n    .preloader-logo {\r\n        width: 350px;\r\n    }\r\n\r\n    .preloader-text {\r\n        width: 340px;\r\n        opacity: 0; \/* Text starts hidden *\/\r\n        animation: text-reveal-sequence 5s ease-in-out forwards;\r\n        padding-left: 40px;\r\n    }\r\n\r\n    @keyframes content-sequence {\r\n        0%      { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }\r\n        20%     { opacity: 1; transform: translate(-50%, -50%) scale(1); } \/* 1s: Appear *\/\r\n        40%     { transform: translate(-50%, -50%) scale(1) translateY(-40px); } \/* 2s: Move up *\/\r\n        60%     { transform: translate(-50%, -50%) scale(1.2) translateY(-40px); } \/* 3s: Zoom in *\/\r\n        80%     { transform: translate(-50%, -50%) scale(1.2) translateY(-40px); } \/* 4s: Hold zoom *\/\r\n        100%    { opacity: 1; transform: translate(-50%, -50%) scale(1.2) translateY(0); } \/* 5s: Move down *\/\r\n    }\r\n\r\n    @keyframes text-reveal-sequence {\r\n        0%, 40%  { opacity: 0; clip-path: inset(0 0 100% 0); }\r\n        60%      { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1); } \/* 3s: Reveal *\/\r\n        80%      { opacity: 1; clip-path: inset(0 0 0 0); transform: scale(1.2); } \/* 4s: Hold zoom *\/\r\n        100%     { opacity: 0; clip-path: inset(0 0 0 0); transform: translateY(40px) scale(1.2); } \/* 5s: Kicked down *\/\r\n    }\r\n\r\n    \/* State 1: Moving to corner *\/\r\n    .preloader.is-moving-to-corner {\r\n        \/* UPDATED: Background becomes transparent *\/\r\n        background-color: transparent;\r\n        pointer-events: none;\r\n       \r\n        \/* Allow clicks to pass through *\/\r\n    }\r\n    .preloader.is-moving-to-corner .preloader-content {\r\n        animation: move-to-corner-anim 1s ease-in-out forwards;\r\n        pointer-events: auto;\r\n        \r\n        \r\n        \/* The logo itself can be interacted with *\/\r\n    }\r\n    .preloader.is-moving-to-corner .preloader-text {\r\n        \/* UPDATED: Text now animates its opacity to stay visible *\/\r\n        animation: text-move-with-logo 1s ease-in-out forwards;\r\n    }\r\n    \r\n    \/* UPDATED: Dedicated animation for the final move *\/\r\n    @keyframes move-to-corner-anim {\r\n        from {\r\n            top: 50%;\r\n            left: 50%;\r\n            transform: translate(-50%, -50%) scale(1.2);\r\n            opacity: 1;\r\n        }\r\n        to {\r\n            top: -90px;\r\n            left: 90px;\r\n            transform: translate(0, 0) scale(0.3); \/* Final size and position *\/\r\n            opacity: 1;\r\n        }\r\n    }\r\n    \r\n    \/* UPDATED: Ensures text stays visible during the move *\/\r\n    @keyframes text-move-with-logo {\r\n        from { opacity: 0; }\r\n        to { opacity: 1; }\r\n    }\r\n\r\n\r\n    \/* ============================================\r\n    PRELOADER STYLES END\r\n    ============================================\r\n    *\/\r\n\r\n\r\n    \/*\r\n     * Main Slider Styles\r\n     *\/\r\n    .slider-container {\r\n        position: relative;\r\n        width: 100%;\r\n        height: 100vh;\r\n        overflow: hidden;\r\n        background-color: #1a1a1a;\r\n        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;\r\n        opacity: 0;\r\n        transition: opacity 0.75s ease;\r\n    }\r\n\r\n    .slider-container.is-visible {\r\n        opacity: 1;\r\n    }\r\n\r\n    \/*\r\n     * Video Background Styling\r\n     *\/\r\n    .slide-video-bg {\r\n        position: absolute;\r\n        top: 50%;\r\n        left: 50%;\r\n        transform: translate(-50%, -50%);\r\n        min-width: 100%;\r\n        min-height: 100%;\r\n        width: auto;\r\n        height: auto;\r\n        z-index: 1;\r\n        object-fit: cover;\r\n    }\r\n\r\n    .slide {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        opacity: 0;\r\n        visibility: hidden;\r\n        transform-origin: center center;\r\n        z-index: 5;\r\n    }\r\n\r\n    \/*\r\n     * Foreground Image Layer\r\n     *\/\r\n    .slide-foreground {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        z-index: 2;\r\n        transform: scale(1.15);\r\n    }\r\n\r\n    .slide.active .slide-foreground {\r\n        animation: kenBurns 12s ease-out forwards;\r\n    }\r\n\r\n    .slide-foreground img {\r\n        width: 100%;\r\n        height: 100%;\r\n        object-fit: contain;\r\n        opacity: 0.9;\r\n        filter: drop-shadow(0 10px 30px rgba(0,0,0,0.4));\r\n    }\r\n\r\n    @keyframes kenBurns {\r\n        0% { transform: scale(1.15) rotate(0.001deg); }\r\n        100% { transform: scale(1.3) rotate(0.001deg); }\r\n    }\r\n\r\n    \/*\r\n     * Unified Content Block (Title, Desc, Button)\r\n     *\/\r\n    .md\\:text-5xl { font-size: 2.5rem; line-height: 1.2; }\r\n    .text-lg { font-size: 1.325rem; }\r\n\r\n    .slide-content {\r\n        position: absolute;\r\n        top: 0;\r\n        left: 0;\r\n        width: 100%;\r\n        height: 100%;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        justify-content: center;\r\n        z-index: 4;\r\n        color: white;\r\n        text-align: center;\r\n        opacity: 0;\r\n        transform: translateY(40px); \r\n        transition: opacity 1s ease-out, transform 1s ease-out;\r\n    }\r\n\r\n    .slide.active .slide-content {\r\n        opacity: 1;\r\n        transform: translateY(0);\r\n        transition-delay: 0.2s; \r\n    }\r\n\r\n    .slide.is-exiting .slide-content {\r\n        opacity: 0;\r\n        transform: translateY(-40px);\r\n        transition-delay: 0s;\r\n        transition-duration: 1s;\r\n    }\r\n    \r\n    .slide-content h2 {\r\n        font-size: 8rem;\r\n        font-weight: 900;\r\n        margin: 0;\r\n        text-transform: uppercase;\r\n        letter-spacing: 2px;\r\n        text-shadow: 0 4px 20px rgba(0,0,0,0.5);\r\n    }\r\n    \r\n    .slide-content p {\r\n        font-size: 1.2rem;\r\n        line-height: 1.6;\r\n        text-shadow: 0 2px 5px rgba(0,0,0,0.7);\r\n        max-width: 600px;\r\n        margin: 1rem 0;\r\n    }\r\n\r\n    .explore-btn {\r\n        display: inline-block;\r\n        margin-top: 1rem;\r\n        padding: 12px 30px;\r\n        border: 2px solid white;\r\n        border-radius: 50px;\r\n        color: white;\r\n        text-decoration: none;\r\n        font-weight: bold;\r\n        text-transform: uppercase;\r\n        letter-spacing: 1px;\r\n        background-color: rgba(0,0,0,0.2);\r\n        backdrop-filter: blur(5px);\r\n        transition: background-color 0.3s ease, color 0.3s ease;\r\n        animation: heartbeat 2s infinite ease-out;\r\n    }\r\n\r\n    .explore-btn:hover {\r\n        background-color: white;\r\n        color: black;\r\n        animation-play-state: paused;\r\n    }\r\n\r\n    @keyframes heartbeat {\r\n        0%, 100% { transform: scale(1); }\r\n        10%, 30% { transform: scale(1.05); }\r\n        20% { transform: scale(1); }\r\n    }\r\n    \r\n    \/*\r\n     * Bottom UI Styling\r\n     *\/\r\n    .bottom-ui {\r\n        position: absolute;\r\n        bottom: 2.5rem;\r\n        left: 2.5rem;\r\n        right: 2.5rem;\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: flex-end;\r\n        z-index: 10;\r\n        color: white;\r\n    }\r\n\r\n    .slide-counter { display: flex; align-items: baseline; gap: 0.5rem; }\r\n    .slide-counter .current-slide { font-size: 2.5rem; font-weight: 700; }\r\n    .slide-counter .total-slides { font-size: 1rem; font-weight: 300; padding-bottom: 0.3rem; }\r\n    .vertical-nav { display: flex; gap: 1rem; }\r\n    .v-nav-btn { width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 5px; background-color: transparent; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s ease, border-color 0.3s ease; }\r\n    .v-nav-btn:hover { background-color: rgba(255, 255, 255, 0.1); border-color: white; }\r\n    .v-nav-btn svg { width: 20px; height: 20px; }\r\n\r\n    .progress-bar-container { position: absolute;  left: 0; width: 100%; height: 3px; background-color: rgba(255, 255, 255, 0.2); z-index: 11; }\r\n    .progress-bar { width: 0%; height: 100%; background-color: white; }\r\n    .progress-bar.is-filling { animation-name: fill-progress; animation-timing-function: linear; animation-fill-mode: forwards; }\r\n    @keyframes fill-progress { from { width: 0%; } to { width: 100%; } }\r\n\r\n    \/*\r\n    * Foreground\/Background Transition Keyframes\r\n    *\/\r\n    @keyframes background-in {\r\n        from { transform: scale(0.8); opacity: 0; }\r\n        to { transform: scale(1); opacity: 1; }\r\n    }\r\n    @keyframes foreground-out {\r\n        from { transform: scale(1); opacity: 1; }\r\n        to { transform: scale(1.2); opacity: 0; }\r\n    }\r\n    .slide.active {\r\n        visibility: visible;\r\n        animation: background-in 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;\r\n        z-index: 8;\r\n    }\r\n    .slide.is-exiting {\r\n        visibility: visible;\r\n        animation: foreground-out 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;\r\n        z-index: 9;\r\n    }\r\n\r\n    \/*\r\n     * Hamburger Menu Styles\r\n     *\/\r\n    .hamburger-menu {\r\n        position: absolute;\r\n        top: 3.5rem;\r\n        right: 5.5rem;\r\n        width: 35px;\r\n        height: 22px;\r\n        cursor: pointer;\r\n        z-index: 100;\r\n        display: flex;\r\n        flex-direction: column;\r\n        justify-content: space-between;\r\n        \/* UPDATED: Align bars to the right *\/\r\n        align-items: flex-end;\r\n    }\r\n    .hamburger-menu .bar {\r\n        \/* UPDATED: Thinner bars *\/\r\n        height: 2px;\r\n        background-color: white;\r\n        border-radius: 2px;\r\n        transition: all 0.3s ease-in-out;\r\n        transform-origin: center;\r\n    }\r\n    .hamburger-menu .bar:nth-child(1) {\r\n        width: 100%;\r\n    }\r\n    .hamburger-menu .bar:nth-child(2) {\r\n        width: 70%; \/* Shorter middle bar *\/\r\n    }\r\n    .hamburger-menu .bar:nth-child(3) {\r\n        width: 100%;\r\n    }\r\n    \r\n    \/* UPDATED: Hover effect for bars *\/\r\n    .hamburger-menu:hover .bar {\r\n        width: 100%;\r\n    }\r\n\r\n    .hamburger-menu.is-active .bar {\r\n        width: 100%; \/* Ensure bars are full-width for a symmetrical 'X' *\/\r\n    }\r\n    .hamburger-menu.is-active .bar:nth-child(1) {\r\n        transform: translateY(10px) rotate(45deg);\r\n    }\r\n    .hamburger-menu.is-active .bar:nth-child(2) {\r\n        opacity: 0;\r\n    }\r\n    .hamburger-menu.is-active .bar:nth-child(3) {\r\n        transform: translateY(-10px) rotate(-45deg);\r\n    }\r\n\r\n    \/* Menu Overlay Styles *\/\r\n    .menu-overlay {\r\n        position: fixed;\r\n        top: 0;\r\n        right: 0;\r\n        width: 30%;\r\n        height: 100%;\r\n        background-color: rgba(0, 0, 0, 0.9);\r\n        backdrop-filter: blur(10px);\r\n        z-index: 99;\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: flex-start;\r\n        justify-content: flex-end;\r\n        padding: 4rem;\r\n        visibility: hidden;\r\n        transform: translateX(100%);\r\n        transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1), visibility 0.5s ease;\r\n        overflow: hidden;\r\n    }\r\n    .menu-overlay.is-open { visibility: visible; transform: translateX(0); }\r\n    .menu-nav { list-style: none; padding: 0; margin: 0; text-align: left; }\r\n    .menu-nav li { opacity: 0; transform: translateY(20px); transition: opacity 0.4s ease, transform 0.4s ease; }\r\n    .menu-overlay.is-open .menu-nav li { opacity: 1; transform: translateY(0); }\r\n    .menu-overlay.is-open .menu-nav li:nth-child(1) { transition-delay: 0.2s; }\r\n    .menu-overlay.is-open .menu-nav li:nth-child(2) { transition-delay: 0.3s; }\r\n    .menu-overlay.is-open .menu-nav li:nth-child(3) { transition-delay: 0.4s; }\r\n    .menu-overlay.is-open .menu-nav li:nth-child(4) { transition-delay: 0.5s; }\r\n    .menu-overlay.is-open .menu-nav li:nth-child(5) { transition-delay: 0.6s; }\r\n    .menu-nav a { color: white; text-decoration: none; font-size: 2.5rem; font-weight: bold; line-height: 1.5; transition: color 0.3s ease; }\r\n    .menu-nav a:hover, .menu-nav a.active-link { color: #f59e0b; }\r\n    .social-links { margin-top: 2rem; display: flex; gap: 1.5rem; }\r\n    .social-links a { color: white; transition: color 0.3s ease; }\r\n    .social-links a:hover { color: #f59e0b; }\r\n    .social-links svg { width: 24px; height: 24px; }\r\n\r\n    \/* Styles for Menu Background Slideshow *\/\r\n    .menu-bg-slider { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-color: rgba(0,0,0,0.5); }\r\n    .menu-bg-img {\r\n        position: absolute;\r\n        width: 100%;\r\n        height: 100%;\r\n        background-size: cover;\r\n        background-position: center;\r\n        \/* UPDATED: Static background *\/\r\n        opacity: 0.7;\r\n    }\r\n\r\n    @media (max-width: 768px) { \r\n        .slide-content h2 { font-size: 4rem; } \r\n        .slide-content p { font-size: 1rem; } \r\n        .bottom-ui { left: 1.5rem; right: 1.5rem; bottom: 1.5rem; }\r\n        .slide-counter .current-slide { font-size: 2rem; }\r\n        .hamburger-menu { top: 1.5rem; right: 1.5rem; }\r\n        .menu-nav a { font-size: 2rem; }\r\n        .menu-overlay { width: 80%; padding: 2.5rem; }\r\n    }\r\n\r\n    \/*\r\n     * Heritage Hero Section Styles\r\n     *\/\r\n    .heritage-section { background-color: #FDFBF8; font-family: 'Manrope', sans-serif; color: #333; }\r\n    .heritage-title { font-family: 'Lora', serif; }\r\n    .heritage-collage-container { position: relative; height: 100%; min-height: 500px; }\r\n    .collage-item { position: absolute; border-radius: 0.75rem; overflow: hidden; box-shadow: 0 20px 25px -5px rgb(0 0 0 \/ 0.1), 0 8px 10px -6px rgb(0 0 0 \/ 0.1); transition: transform 0.3s ease; }\r\n    .collage-item:hover { transform: scale(1.05) rotate(0deg) !important; z-index: 30; }\r\n    .collage-item img { width: 100%; height: 100%; object-fit: cover; }\r\n    .collage-item-1 { top: 5%; left: 0; width: 45%; height: 50%; transform: rotate(-12deg); z-index: 10; }\r\n    .collage-item-2 { top: 0; right: 0; width: 50%; height: 45%; transform: rotate(10deg); z-index: 10; }\r\n    .collage-item-3 { bottom: 5%; left: 5%; width: 50%; height: 40%; transform: rotate(8deg); z-index: 10; }\r\n    .collage-item-4 { bottom: 0; right: 5%; width: 40%; height: 55%; transform: rotate(-6deg); z-index: 10; }\r\n    .collage-item-5 { top: 50%; left: 50%; width: 55%; height: 60%; transform: translate(-50%, -50%) rotate(1deg); z-index: 20; border: 4px solid white; }\r\n    .bg-amber-600 { --tw-bg-opacity: 1; background-color: #005656; }\r\n    .bg-amber-600:hover { --tw-bg-opacity: 1; background-color: #005656; color:#ffffff; }\r\n<\/style>\r\n\r\n<!-- PRELOADER HTML START -->\r\n<div class=\"preloader\">\r\n    <div class=\"preloader-content\">\r\n        <img decoding=\"async\" src=\"https:\/\/pif.workspaces.company\/wp-content\/uploads\/2025\/05\/Pleach-Logo.png\" alt=\"Loading Logo\" class=\"preloader-logo\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/200x150\/ffffff\/000000?text=Logo+Error';\">\r\n        <img decoding=\"async\" src=\"https:\/\/pif.workspaces.company\/wp-content\/uploads\/2025\/08\/pleach-logo-text.webp\" alt=\"Loading Text\" class=\"preloader-text\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/300x50\/ffffff\/000000?text=Text+Error';\">\r\n    <\/div>\r\n<\/div>\r\n<!-- PRELOADER HTML END -->\r\n\r\n\r\n<!-- SLIDER SECTION -->\r\n<div class=\"slider-container\" id=\"my-slider\">\r\n    \r\n    <!-- This is no longer needed as the preloader becomes the logo -->\r\n    <!-- <div class=\"permanent-logo-container\">\r\n        <img decoding=\"async\" src=\"https:\/\/pif.workspaces.company\/wp-content\/uploads\/2025\/05\/Pleach-Logo.png\" alt=\"Site Logo\" class=\"logo-img\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/150x100\/1a1a1a\/ffffff?text=Logo';\">\r\n        <img decoding=\"async\" src=\"https:\/\/pif.workspaces.company\/wp-content\/uploads\/2025\/08\/pleach-logo-text.webp\" alt=\"Site Text\" class=\"text-img\" onerror=\"this.onerror=null;this.src='https:\/\/placehold.co\/150x30\/1a1a1a\/ffffff?text=Text';\">\r\n    <\/div> -->\r\n\r\n    <!-- Slide 1 -->\r\n    <div class=\"slide active\">\r\n        <video class=\"slide-video-bg\" src=\"https:\/\/pleachindia.com\/dev\/wp-content\/uploads\/2025\/08\/854002-hd_1920_1080_24fps.mp4\" autoplay muted loop playsinline><\/video>\r\n        <div class=\"slide-foreground\"><img decoding=\"async\" src=\"https:\/\/pleachindia.com\/dev\/wp-content\/uploads\/2025\/07\/2.png\" alt=\"Grand temple with multiple spires\"><\/div>\r\n        <div class=\"slide-content\">\r\n            <h2>Divinity<\/h2>\r\n            <p>Explore the timeless architectural marvels that have stood for centuries as beacons of faith and artistry.<\/p>\r\n            <a href=\"#\" class=\"explore-btn\">Explore<\/a>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Slide 2 -->\r\n    <div class=\"slide\">\r\n        <video class=\"slide-video-bg\" src=\"https:\/\/pleachindia.com\/dev\/wp-content\/uploads\/2025\/08\/5200649-hd_1920_1080_30fps.mp4\" autoplay muted loop playsinline><\/video>\r\n        <div class=\"slide-foreground\"><img decoding=\"async\" src=\"https:\/\/pleachindia.com\/dev\/wp-content\/uploads\/2025\/07\/3.png\" alt=\"Intricate South Indian temple gopuram\"><\/div>\r\n        <div class=\"slide-content\">\r\n            <h2>Spires<\/h2>\r\n            <p>Witness the sacred spires and gopurams, intricately carved to tell stories that reach for the heavens.<\/p>\r\n            <a href=\"#\" class=\"explore-btn\">Explore<\/a>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Slide 3 -->\r\n    <div class=\"slide\">\r\n        <video class=\"slide-video-bg\" src=\"https:\/\/pleachindia.com\/dev\/wp-content\/uploads\/2025\/08\/854002-hd_1920_1080_24fps.mp4\" autoplay muted loop playsinline><\/video>\r\n        <div class=\"slide-foreground\"><img decoding=\"async\" src=\"https:\/\/pleachindia.com\/dev\/wp-content\/uploads\/2025\/07\/6.png\" alt=\"Ornate golden temple structure\"><\/div>\r\n        <div class=\"slide-content\">\r\n            <h2>Sanctuary<\/h2>\r\n            <p>Discover golden sanctuaries, where intricate design and profound spirituality unite in a display of serene beauty.<\/p>\r\n            <a href=\"#\" class=\"explore-btn\">Explore<\/a>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <!-- Bottom UI container -->\r\n    <div class=\"bottom-ui\">\r\n        <div class=\"slide-counter\" id=\"slide-counter\">\r\n            <!-- JS will populate this -->\r\n        <\/div>\r\n        <div class=\"vertical-nav\">\r\n            <div class=\"v-nav-btn\" id=\"up-arrow\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m4.5 15.75 7.5-7.5 7.5 7.5\" \/><\/svg><\/div>\r\n            <div class=\"v-nav-btn\" id=\"down-arrow\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"2\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m19.5 8.25-7.5 7.5-7.5-7.5\" \/><\/svg><\/div>\r\n        <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"progress-bar-container\">\r\n        <div class=\"progress-bar\" id=\"progress-bar\"><\/div>\r\n    <\/div>\r\n\r\n    <!-- Hamburger Menu -->\r\n    <div class=\"hamburger-menu\" id=\"hamburger-menu\">\r\n        <span class=\"bar\"><\/span>\r\n        <span class=\"bar\"><\/span>\r\n        <span class=\"bar\"><\/span>\r\n    <\/div>\r\n\r\n    <!-- Menu Overlay -->\r\n    <div class=\"menu-overlay\" id=\"menu-overlay\">\r\n        <div class=\"menu-bg-slider\">\r\n            <!-- UPDATED: Single background image -->\r\n            <div class=\"menu-bg-img\" style=\"background-image: url('https:\/\/pleachindia.com\/dev\/wp-content\/uploads\/2025\/08\/1.jpg');\"><\/div>\r\n        <\/div>\r\n        <div class=\"menu-content-wrapper\">\r\n            <ul class=\"menu-nav\">\r\n                <li><a href=\"#\" class=\"active-link\">Home<\/a><\/li>\r\n                <li><a href=\"#\">About Us<\/a><\/li>\r\n                <li><a href=\"#\">Explore<\/a><\/li>\r\n                <li><a href=\"#\">Media<\/a><\/li>\r\n                <li><a href=\"#\">Blog<\/a><\/li>\r\n            <\/ul>\r\n            <div class=\"social-links\">\r\n                <a href=\"#\" aria-label=\"Facebook\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z\"><\/path><\/svg><\/a>\r\n                <a href=\"#\" aria-label=\"Twitter\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5a4.5 4.5 0 0 0-.08-.83A7.72 7.72 0 0 0 23 3z\"><\/path><\/svg><\/a>\r\n                <a href=\"#\" aria-label=\"Instagram\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"5\" ry=\"5\"><\/rect><path d=\"M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z\"><\/path><line x1=\"17.5\" y1=\"6.5\" x2=\"17.51\" y2=\"6.5\"><\/line><\/svg><\/a>\r\n                <a href=\"#\" aria-label=\"YouTube\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z\"><\/path><polygon points=\"9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02\"><\/polygon><\/svg><\/a>\r\n                <a href=\"#\" aria-label=\"LinkedIn\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z\"><\/path><rect x=\"2\" y=\"9\" width=\"4\" height=\"12\"><\/rect><circle cx=\"4\" cy=\"4\" r=\"2\"><\/circle><\/svg><\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- HERITAGE HERO SECTION -->\r\n<section class=\"heritage-section\">\r\n    <div class=\"container mx-auto px-6 py-24 lg:py-32\">\r\n        <div class=\"grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-24 items-center\">\r\n            <!-- Left Side: Text Content -->\r\n            <div class=\"text-center lg:text-left\">\r\n                <h1 class=\"heritage-title text-4xl md:text-5xl font-bold leading-tight text-gray-800\">\r\n                    She carries the weight of millennia with grace, yet her spirit remains timeless \u2013 for <span style=\"color: #005656\">Bharath<\/span> is the Land of Eternal Heritage.\r\n                <\/h1>\r\n                <p class=\"mt-8 text-lg text-gray-600 leading-relaxed\">\r\n                    At <b>Pleach<\/b>, we keep this legacy alive with <b>authentic, unbiased & engaging storytelling.<\/b>\r\n                    <br><br>\r\n                    We embrace <b>inclusivity, innovation & collaboration<\/b>, ensuring heritage remains relevant for all.\r\n                    <br><br>\r\n                    By bridging <b>past, present,<\/b> and <b>future,<\/b> we make history a living experience.\r\n                <\/p>\r\n                <a href=\"#\" class=\"inline-block mt-10 px-8 py-3 bg-amber-600 text-white font-bold rounded-lg shadow-lg hover:bg-amber-700 transition-colors duration-300\">\r\n                    About Us\r\n                <\/a>\r\n            <\/div>\r\n\r\n            <!-- Right Side: 5-image collage -->\r\n            <div class=\"heritage-collage-container\">\r\n                \r\n                <div class=\"collage-item collage-item-2\"><img decoding=\"async\" src=\"https:\/\/i.pinimg.com\/736x\/22\/4e\/aa\/224eaa3b9bf018e24353a6c899e4cdf4.jpg\" alt=\"Konark Sun Temple Carvings\"><\/div>\r\n                <div class=\"collage-item collage-item-3\"><img decoding=\"async\" src=\"https:\/\/images.pexels.com\/photos\/2426400\/pexels-photo-2426400.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1\" alt=\"Hampi Stone Chariot\"><\/div>\r\n                <div class=\"collage-item collage-item-4\"><img decoding=\"async\" src=\"https:\/\/images.indiatvnews.com\/mainnational\/2014\/1415805666m3.jpg\" alt=\"Intricate Temple Sculpture\"><\/div>\r\n                <div class=\"collage-item collage-item-5\"><img decoding=\"async\" src=\"https:\/\/thumbs.dreamstime.com\/b\/ancient-indian-temple-carvings-sunlight-intricate-detail-historical-architecture-cultural-heritage-ancient-indian-temple-carvings-356711464.jpg\" alt=\"Detailed Temple Entrance\"><\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/section>\r\n\r\n\r\n<script>\r\n\/\/ <!-- PRELOADER SCRIPT START -->\r\nwindow.addEventListener('load', function() {\r\n    const preloader = document.querySelector('.preloader');\r\n    const sliderContainer = document.querySelector('.slider-container');\r\n    \r\n    \/\/ UPDATED: Faster animation time\r\n    const initialAnimationTime = 5000; \r\n    const moveToCornerTime = 1000;     \r\n\r\n    \/\/ After the initial 5s animation...\r\n    setTimeout(() => {\r\n        sliderContainer.classList.add('is-visible');\r\n        preloader.classList.add('is-moving-to-corner');\r\n    }, initialAnimationTime);\r\n\r\n    \/\/ After the move to the corner is complete, fade out the white background\r\n    setTimeout(() => {\r\n        preloader.classList.add('is-finished');\r\n    }, initialAnimationTime + moveToCornerTime);\r\n});\r\n\/\/ <!-- PRELOADER SCRIPT END -->\r\n\r\n\r\n\/\/ This script runs after the main HTML document has been parsed.\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    \r\n    const AUTOPLAY_INTERVAL = 7000;\r\n    const slider = document.getElementById('my-slider');\r\n    if (!slider) return;\r\n\r\n    const slides = slider.querySelectorAll('.slide');\r\n    const upArrow = document.getElementById('up-arrow');\r\n    const downArrow = document.getElementById('down-arrow');\r\n    const counterElement = document.getElementById('slide-counter');\r\n    const progressBar = document.getElementById('progress-bar');\r\n    const hamburgerMenu = document.getElementById('hamburger-menu');\r\n    const menuOverlay = document.getElementById('menu-overlay');\r\n\r\n    let currentSlide = 0;\r\n    let isAnimating = false;\r\n\r\n    function restartProgressBar() {\r\n        if (!progressBar) return;\r\n        progressBar.classList.remove('is-filling');\r\n        void progressBar.offsetWidth; \r\n        progressBar.style.animationDuration = `${AUTOPLAY_INTERVAL}ms`;\r\n        progressBar.classList.add('is-filling');\r\n    }\r\n\r\n    function showSlide(index) {\r\n        if (isAnimating) return;\r\n        isAnimating = true;\r\n\r\n        const oldIndex = currentSlide;\r\n        const newIndex = (index + slides.length) % slides.length;\r\n        const oldSlide = slides[oldIndex];\r\n        const newSlide = slides[newIndex];\r\n\r\n        if (oldSlide) { oldSlide.classList.add('is-exiting'); }\r\n        if (newSlide) {\r\n            newSlide.classList.add('active');\r\n            const video = newSlide.querySelector('video');\r\n            if (video) {\r\n                video.currentTime = 0;\r\n                const playPromise = video.play();\r\n                if (playPromise !== undefined) {\r\n                    playPromise.catch(error => {\r\n                        if (error.name !== 'AbortError') { console.error(\"Video play failed:\", error); }\r\n                    });\r\n                }\r\n            }\r\n        }\r\n        \r\n        if (counterElement) {\r\n            const current = String(newIndex + 1).padStart(2, '0');\r\n            const total = `\/ ${String(slides.length).padStart(2, '0')}`;\r\n            counterElement.innerHTML = `<span class=\"current-slide\">${current}<\/span><span class=\"total-slides\">${total}<\/span>`;\r\n        }\r\n        \r\n        currentSlide = newIndex;\r\n        restartProgressBar();\r\n\r\n        setTimeout(() => {\r\n            if (oldSlide) {\r\n                oldSlide.classList.remove('active', 'is-exiting');\r\n                const oldVideo = oldSlide.querySelector('video');\r\n                if (oldVideo) { oldVideo.pause(); }\r\n            }\r\n            isAnimating = false;\r\n        }, 1200); \/\/ Match the animation duration\r\n    }\r\n\r\n    function nextSlide() { showSlide(currentSlide + 1); }\r\n    function prevSlide() { showSlide(currentSlide - 1); }\r\n\r\n    function init() {\r\n        if (slides.length > 0) {\r\n            slides[0].classList.add('active');\r\n            const video = slides[0].querySelector('video');\r\n            if (video) video.play().catch(e => {});\r\n            if (counterElement) {\r\n                const current = '01';\r\n                const total = `\/ ${String(slides.length).padStart(2, '0')}`;\r\n                counterElement.innerHTML = `<span class=\"current-slide\">${current}<\/span><span class=\"total-slides\">${total}<\/span>`;\r\n            }\r\n            restartProgressBar();\r\n        }\r\n    }\r\n\r\n    if (upArrow) { upArrow.addEventListener('click', prevSlide); }\r\n    if (downArrow) { downArrow.addEventListener('click', nextSlide); }\r\n    if (progressBar) { progressBar.addEventListener('animationend', nextSlide); }\r\n    document.addEventListener('keydown', (e) => { \r\n        if (e.key === 'ArrowDown') { nextSlide(); } \r\n        else if (e.key === 'ArrowUp') { prevSlide(); } \r\n    });\r\n    if (hamburgerMenu && menuOverlay) {\r\n        hamburgerMenu.addEventListener('click', () => {\r\n            hamburgerMenu.classList.toggle('is-active');\r\n            menuOverlay.classList.toggle('is-open');\r\n        });\r\n    }\r\n    init();\r\n});\r\n<\/script>\r\n\r\n<script>\r\ndocument.addEventListener(\"DOMContentLoaded\", () => {\r\n  const preloader = document.querySelector(\".preloader\");\r\n  const slider = document.querySelector(\".slider-container\");\r\n\r\n  \/\/ Step 1: Wait until content-sequence + text-sequence finish (5s)\r\n  setTimeout(() => {\r\n    preloader.classList.add(\"is-moving-to-corner\");\r\n  }, 5000);\r\n\r\n  \/\/ Step 2: After logo moves to corner (1s), hide preloader background and show slider\r\n  setTimeout(() => {\r\n    \/\/ Keep logo visible in corner\r\n    preloader.style.background = \"transparent\";\r\n    preloader.style.pointerEvents = \"none\";\r\n\r\n    \/\/ Show slider\r\n    slider.classList.add(\"is-visible\");\r\n  }, 6000);\r\n});\r\n<\/script>\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2b8b05f e-con-full e-flex e-con e-parent\" data-id=\"2b8b05f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-722e102 elementor-widget elementor-widget-html\" data-id=\"722e102\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n    <title>About Us Section<\/title>\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n    <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Dancing+Script:wght@700&family=Cinzel+Decorative:wght@700&family=Montserrat:wght@400;700&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        \/* Custom font classes *\/\r\n        .font-dancing-script {\r\n            font-family: 'Dancing Script', cursive;\r\n        }\r\n        .font-cinzel-decorative {\r\n            font-family: 'Cinzel Decorative', cursive;\r\n        }\r\n        .font-montserrat {\r\n            font-family: 'Montserrat', sans-serif;\r\n        }\r\n        \/* Style to exactly match the image: gradient fill + shadow *\/\r\n        .font-vintage-gradient {\r\n            \/* Gradient text for the main heading *\/\r\n            background: linear-gradient(to bottom, #8d7a6e, #5c4d41);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            text-fill-color: transparent;\r\n            \/* Custom text shadow for depth *\/\r\n            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body class=\"bg-[#FBF5E8]\">\r\n    <!-- Main container for the section -->\r\n    <div class=\"relative min-h-screen w-full flex items-center justify-center p-4\">\r\n        \r\n        <!-- Main Content -->\r\n        <div class=\"relative z-10 text-center max-w-4xl mx-auto flex flex-col items-center space-y-8\">\r\n            \r\n            <!-- Top Text Block -->\r\n            <div>\r\n                <h2 class=\"font-dancing-script text-3xl md:text-4xl lg:text-5xl text-[#3A322F]\">\r\n                    Some see it as history\r\n                <\/h2>\r\n                <p class=\"font-montserrat text-sm md:text-base lg:text-lg tracking-widest text-[#5C524E] mt-2\">\r\n                    A TALE OF RUINS AND KINGS.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <!-- Main Heading Block -->\r\n            <div>\r\n                <span class=\"font-montserrat font-normal text-2xl md:text-3xl text-[#5C524E] tracking-widest mb-4 inline-block\">BUT<\/span>\r\n                <h1 class=\"font-cinzel-decorative font-bold font-vintage-gradient text-5xl sm:text-6xl md:text-7xl lg:text-8xl leading-tight\">\r\n                    WE SEE A LIVING SOUL\r\n                <\/h1>\r\n            <\/div>\r\n\r\n            <!-- Bottom Paragraph -->\r\n            <div class=\"max-w-3xl\">\r\n                <p class=\"font-montserrat text-xl md:text-2xl text-[#5C524E] leading-relaxed mb-6\">\r\n                    She carries the weight of millennia with grace, yet her spirit remains timeless \u2013 for Bharath is the Land of <strong class=\"font-semibold text-[#4a413c]\">Eternal Heritage<\/strong>.\r\n                <\/p>\r\n                <p class=\"font-montserrat text-lg md:text-xl text-[#5C524E] leading-relaxed\">\r\n                    At <strong class=\"font-semibold text-[#4a413c]\">Pleach<\/strong>, we keep this legacy alive with <strong class=\"font-semibold text-[#4a413c]\">authentic, unbiased & engaging storytelling<\/strong>. We embrace <strong class=\"font-semibold text-[#4a413c]\">inclusivity, innovation & collaboration<\/strong>, ensuring heritage remains relevant for all. By bridging <strong class=\"font-semibold text-[#4a413c]\">past, present, and future<\/strong>, we make history a <strong class=\"font-semibold text-[#4a413c]\">living experience<\/strong>.\r\n                <\/p>\r\n            <\/div>\r\n\r\n            <!-- About Us Button -->\r\n            <div class=\"mt-8\">\r\n                <a href=\"#\" class=\"font-montserrat bg-[#3A322F] text-[#FBF5E8] py-2 px-6 rounded-full text-sm tracking-wider hover:bg-[#5c4d41] transition-colors duration-300\">\r\n                    About Us\r\n                <\/a>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Divinity Explore the timeless architectural marvels that have stood for centuries as beacons of faith and artistry. Explore Spires Witness the sacred spires and gopurams, intricately carved to tell stories that reach for the heavens. Explore Sanctuary Discover golden sanctuaries, where intricate design and profound spirituality unite in a display of serene beauty. Explore Home [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-49","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pif.workspaces.company\/index.php?rest_route=\/wp\/v2\/pages\/49","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pif.workspaces.company\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pif.workspaces.company\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pif.workspaces.company\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pif.workspaces.company\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=49"}],"version-history":[{"count":719,"href":"https:\/\/pif.workspaces.company\/index.php?rest_route=\/wp\/v2\/pages\/49\/revisions"}],"predecessor-version":[{"id":80250,"href":"https:\/\/pif.workspaces.company\/index.php?rest_route=\/wp\/v2\/pages\/49\/revisions\/80250"}],"wp:attachment":[{"href":"https:\/\/pif.workspaces.company\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}