<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->
<!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Punarapi India</title>
    <link rel="icon" href="/resource/media/general/Logo_hero_icon.png" type="image/png" sizes="32*32">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

    <link rel="stylesheet" href="/css/root.css">
    <link rel="stylesheet" href="/css/navbar.css">
    <link rel="stylesheet" href="/css/footer.css">
    <link rel="stylesheet" href="/css/product-color.css">
    <link rel="stylesheet" href="/css/product-opening.css">
    <link rel="stylesheet" href="/css/product-gallery.css">
    <link rel="stylesheet" href="/css/product-specs.css">
    <link rel="stylesheet" href="/css/product-radio.css">
    <link rel="stylesheet" href="/css/product-page.css">

    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>

<body>
    <%- include('partials/_navbar.ejs'); %>

    <section class="radio-parent">
        <div class="radio-buttons">
            <label id="MTl" class="radio-label"><input id="MT" type="radio" name="e" checked>Manglore Tiles</label><!--remove the checked later-->
            <label id="RTl" class="radio-label inactive-radio"><input id="RT" type="radio" name="e">Roman Tiles</label>
            <label id="CTl" class="radio-label inactive-radio"><input id="CT" type="radio" name="e">Ridge Tiles</label>
        </div>
    </section>
    
    <section class="products">
        <ul class="products-3">
            <li class="mang-til" id="mang-ti">
                <section class="opening" id="openingSection">
                    <img src="resource\media\product page\opening\mang_open.jpg" alt="Loading" class="opening-img">
                    <div class="overlay"></div>
                    <div class="intro">
                        <h2>Mangalore Tiles</h2>
                        <p>Classic yet eco-friendly, our recycled plastic Mangalore tiles embody timeless charm while contributing to sustainability, combining traditional aesthetics with modern responsibility.</p>
                        <button class="request-button"><a href="\request.ejs">Request Sample  <span class="arrow">&rarr;</span></a></button>
                    </div>
                    <div class="slide"></div>
                </section>
                <section class="colours">
                    <h2>
                        Colours
                    </h2>
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\mang_colour (1).jpg" alt="Loading">
                            <p>Aged Red</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\mang_colour (2).jpg" alt="Loading">
                            <p>Baran Orange</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\mang_colour (3).jpg" alt="Loading">
                            <p>Nature brown</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\mang_colour (4).jpg" alt="Loading">
                            <p>Night Red</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\mang_colour (5).jpg" alt="Loading">
                            <p>Fox Blue</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\mang_colour (3).jpg" alt="Loading">
                            <p>Nature brown</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\mang_colour (4).jpg" alt="Loading">
                            <p>Night Red</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\mang_colour (5).jpg" alt="Loading">
                            <p>Fox Blue</p>
                          </div>
                        </div>
                        <div class="swiper-scrollbar">
                          <div class="swiper-scrollbar-drag"></div>
                        </div>
                      </div>
                </section>
                <section class="gallery">
                    <h2>
                        Gallery
                    </h2>
                    <div class="pictures">
                        <ul class="set">
                            <li>
                                <img src="resource\media\product page\gal\mang_gal (1).jpg" alt="Loading">
                                <div class="spot">
                                    <p>Malpe Haven Retreat</p>
                                </div>
                            </li>
                            <li>
                                <img src="resource\media\product page\gal\mang_gal (2).jpg" alt="Loading">
                                <div class="spot">
                                    <p>Tuluva Beach House</p>
                                </div>
                            </li>
                        </ul>
                        <ul class="set">
                            <li>
                                <img src="resource\media\product page\gal\mang_gal (3).jpg" alt="Loading">
                                <div class="spot">
                                    <p>Surathkal Seaview Villa</p>
                                </div>
                            </li>
                            <li>
                                <img src="resource\media\product page\gal\mang_gal (4).jpg" alt="Loading">
                                <div class="spot">
                                    <p>Kadri Hillside Cottage</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </section>
                <section class="specs">
                    <h2>Specs</h2>
                    <div class="test-12">
                        <div class="test-1">
                            <h3>Dimensions</h3>
                            <div class="res-1">
                                <div class="alldiv">
                                    <h4 class="qspe-1">Length</h4>
                                    <p class="aspe-1">405mm</p>
                                </div>
                                <div class="alldiv">
                                    <h4 class="qspe-1">Width</h4>
                                    <p class="aspe-1">230mm</p>
                                </div>
                                <div class="alldiv">
                                    <h4 class="qspe-1">Thickness</h4>
                                    <p class="aspe-1">20mm</p>
                                </div>
                            </div>
                        </div>
                        <div class="test-2">
                            <div class="test-2-Wrapper">
                                <h3>Technical Specifications</h3>
                                <div class="res-1">
                                    <div class="alldiv">
                                        <h4 class="qspe-2">Weight</h4>
                                        <p class="aspe-2">2.7kg</p>
                                    </div>
                                    <div class="alldiv">
                                        <h4 class="qspe-2">Water Absorption (% by weight)</h4>
                                        <p class="aspe-2">0.33%</p>
                                    </div>
                                    <div class="alldiv">
                                        <h4 class="qspe-2">Breaking Strength</h4>
                                        <p class="aspe-2">2.23kN</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="test-3">
                        <h3>Physical Resistance Limits</h3>
                        <div class="res-1">
                            <div class="alldiv">
                                <h4 class="qspe-3">Impact Resistance</h4>
                                <p class="aspe-3">No cracks observed when dropped 2.5 kg from a height of 2.0 m</p>
                            </div>
                            <div class="alldiv">
                                <h4 class="qspe-3">Fire resistance</h4>
                                <p class="aspe-3">Does not catch fire</p>
                            </div>
                            <div class="alldiv">
                                <h4 class="qspe-3">Heat Resistance at thirty minutes</h4>
                                <p class="aspe-3">Temperature at Top: 66.4&deg;C</p>
                            </div>
                            <div class="alldiv">
                                <h4 class="qspe-3"></h4>
                                <p class="aspe-3">Temperature at Bottom: 55.3&deg;C</p>
                            </div>
                        </div>
                    </div>
                </section>                
            </li>
            <li class="rom-til" id="rom-ti">
                <section class="opening">
                    <img src="resource\media\product page\opening\rom_open.jpg" alt="Loading" class="opening-img">
                    <div class="overlay"></div>
                    <div class="intro">
                        <h2>Roman Tiles</h2>
                        <p>Redefining elegance sustainably, our recycled plastic Roman tiles offer enduring style and strength, seamlessly blending timeless design with an eco-conscious twist.</p>
                        <button class="request-button"><a href="#">Request Sample   <span class="arrow">&rarr;</span></a></button>
                    </div>
                    <div class="slide"></div>
                </section>
                <section class="colours">
                    <h2>
                        Colours
                    </h2>
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\rid_colour (1).jpg" alt="Loading">
                            <p>Aged Red</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\rid_colour (2).jpg" alt="Loading">
                            <p>Baran Orange</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\rid_colour (3).jpg" alt="Loading">
                            <p>Nature brown</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\rid_colour (4).jpg" alt="Loading">
                            <p>Night Red</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\rid_colour (5).jpg" alt="Loading">
                            <p>Fox Blue</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\rid_colour (3).jpg" alt="Loading">
                            <p>Nature brown</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\rid_colour (4).jpg" alt="Loading">
                            <p>Night Red</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\rid_colour (5).jpg" alt="Loading">
                            <p>Fox Blue</p>
                          </div>
                        </div>
                        <div class="swiper-scrollbar">
                          <div class="swiper-scrollbar-drag"></div>
                        </div>
                      </div>
                </section>
                <section class="gallery">
                    <h2>
                        Gallery
                    </h2>
                    <div class="pictures">
                        <ul class="set">
                            <li>
                                <img src="resource\media\product page\gal\roman_gal (1).jpg" alt="Loading">
                                <div class="spot">
                                    <p>Mulki Riverside Hideaway</p>
                                </div>
                            </li>
                            <li>
                                <img src="resource\media\product page\gal\roman_gal (2).jpg" alt="Loading">
                                <div class="spot">
                                    <p>Udupi Harbor Breeze</p>
                                </div>
                            </li>
                        </ul>
                        <ul class="set">
                            <li>
                                <img src="resource\media\product page\gal\roman_gal (3).jpg" alt="Loading">
                                <div class="spot">
                                    <p>Bajpe Sunset Villa</p>
                                </div>
                            </li>
                            <li>
                                <img src="resource\media\product page\gal\roman_gal (4).jpg" alt="Loading">
                                <div class="spot">
                                    <p>Panambur Bayview Mansion</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </section>
                <section class="specs">
                    <h2>Specs</h2>
                    <div class="test-12">
                        <div class="test-1">
                            <h3>Dimensions</h3>
                            <div class="res-1">
                                <div class="alldiv">
                                    <h4 class="qspe-1">Length</h4>
                                    <p class="aspe-1">385mm</p>
                                </div>
                                <div class="alldiv">
                                    <h4 class="qspe-1">Width</h4>
                                    <p class="aspe-1">305mm</p>
                                </div>
                                <div class="alldiv">
                                    <h4 class="qspe-1">Thickness</h4>
                                    <p class="aspe-1">18mm</p>
                                </div>
                            </div>
                        </div>
                        <div class="test-2">
                            <div class="test-2-Wrapper">
                                <h3>Technical Specifications</h3>
                                <div class="res-1">
                                    <div class="alldiv">
                                        <h4 class="qspe-2">Weight</h4>
                                        <p class="aspe-2">3.5kg</p>
                                    </div>
                                    <div class="alldiv">
                                        <h4 class="qspe-2">Water Absorption (% by weight)</h4>
                                        <p class="aspe-2">0.27%</p>
                                    </div>
                                    <div class="alldiv">
                                        <h4 class="qspe-2">Breaking Strength</h4>
                                        <p class="aspe-2">4.40kN</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="test-3">
                        <h3>Physical Resistance Limits</h3>
                        <div class="res-1">
                            <div class="alldiv">
                                <h4 class="qspe-3">Impact Resistance</h4>
                                <p class="aspe-3">Crack observed when dropped 2.5 kg from a height of 1.5 m</p>
                            </div>
                            <div class="alldiv">
                                <h4 class="qspe-3">Fire resistance</h4>
                                <p class="aspe-3">Does not catch fire</p>
                            </div>
                            <div class="alldiv">
                                <h4 class="qspe-3">Heat Resistance at thirty minutes</h4>
                                <p class="aspe-3">Temperature at Top: 73&deg;C</p>
                            </div>
                            <div class="alldiv">
                                <h4 class="qspe-3"></h4>
                                <p class="aspe-3">Temperature at Bottom: 49.9&deg;C</p>
                            </div>
                        </div>
                    </div>
                </section>                
            </li>
            <li class="rig-til" id="rig-ti">
                <section class="opening">
                    <img src="resource\media\product page\opening\rid_open.jpg" alt="Loading" class="opening-img">
                    <div class="overlay"></div>
                    <div class="intro">
                        <h2>Ridge Tiles</h2>
                        <p> Elevate your roof sustainably with our recycled plastic Ridge tiles, providing a finishing touch that combines style and environmental consciousness for a sophisticated architectural statement.</p>
                        <button class="request-button"><a href="#">Request Sample   <span class="arrow">&rarr;</span></a></button>
                    </div>
                    <div class="slide"></div>
                </section>
                <section class="colours">
                    <h2>
                        Colours
                    </h2>
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\roman_colour (1).jpg" alt="Loading">
                            <p>Aged Red</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\roman_colour (2).jpg" alt="Loading">
                            <p>Baran Orange</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\roman_colour (3).jpg" alt="Loading">
                            <p>Nature brown</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\roman_colour (4).jpg" alt="Loading">
                            <p>Night Red</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\roman_colour (5).jpg" alt="Loading">
                            <p>Fox Blue</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\roman_colour (3).jpg" alt="Loading">
                            <p>Nature brown</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\roman_colour (4).jpg" alt="Loading">
                            <p>Night Red</p>
                          </div>
                          <div class="swiper-slide">
                            <img src="resource\media\product page\colour-tile\roman_colour (5).jpg" alt="Loading">
                            <p>Fox Blue</p>
                          </div>
                        </div>
                        <div class="swiper-scrollbar">
                          <div class="swiper-scrollbar-drag"></div>
                        </div>
                      </div>
                </section>
                <section class="gallery">
                    <h2>
                        Gallery
                    </h2>
                    <div class="pictures">
                        <ul class="set">
                            <li>
                                <img src="resource\media\product page\gal\rid_gal (1).jpeg" alt="Loading">
                                <div class="spot">
                                    <p>Moodabidri Mango Grove</p>
                                </div>
                            </li>
                            <li>
                                <img src="resource\media\product page\gal\rid_gal (1).jpg" alt="Loading">
                                <div class="spot">
                                    <p>Karkala Heritage Haven</p>
                                </div>
                            </li>
                        </ul>
                        <ul class="set">
                            <li>
                                <img src="resource\media\product page\gal\rid_gal (2).jpg" alt="Loading">
                                <div class="spot">
                                    <p>Kudroli Tranquil Retreat</p>
                                </div>
                            </li>
                            <li>
                                <img src="resource\media\product page\gal\rid_gal (3).jpg" alt="Loading">
                                <div class="spot">
                                    <p>Mangala Residency Estate</p>
                                </div>
                            </li>
                        </ul>
                    </div>
                </section>
                <section class="specs">
                    <h2>Specs</h2>
                    <div class="test-12">
                        <div class="test-1">
                            <h3>Dimensions</h3>
                            <div class="res-1">
                                <div class="alldiv">
                                    <h4 class="qspe-1">Length</h4>
                                    <p class="aspe-1">305mm</p>
                                </div>
                                <div class="alldiv">
                                    <h4 class="qspe-1">Width</h4>
                                    <p class="aspe-1">218mm</p>
                                </div>
                                <div class="alldiv">
                                    <h4 class="qspe-1">Thickness</h4>
                                    <p class="aspe-1">10mm</p>
                                </div>
                            </div>
                        </div>
                        <div class="test-2">
                            <div class="test-2-Wrapper">
                                <h3>Technical Specifications</h3>
                                <div class="res-1">
                                    <div class="alldiv">
                                        <h4 class="qspe-2">Weight</h4>
                                        <p class="aspe-2">1.9kg</p>
                                    </div>
                                    <div class="alldiv">
                                        <h4 class="qspe-2">Water Absorption (% by weight)</h4>
                                        <p class="aspe-2">0.31%</p>
                                    </div>
                                    <div class="alldiv">
                                        <h4 class="qspe-2">Breaking Strength</h4>
                                        <p class="aspe-2">3.25kN</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="test-3">
                        <h3>Physical Resistance Limits</h3>
                        <div class="res-1">
                            <div class="alldiv">
                                <h4 class="qspe-3">Impact Resistance</h4>
                                <p class="aspe-3">Crack observed when dropped 2.5 kg from a height of 1.5 m</p>
                            </div>
                            <div class="alldiv">
                                <h4 class="qspe-3">Fire resistance</h4>
                                <p class="aspe-3">Does not catch fire</p>
                            </div>
                            <div class="alldiv">
                                <h4 class="qspe-3">Heat Resistance at thirty minutes</h4>
                                <p class="aspe-3">Temperature at Top: 64.1&deg;C</p>
                            </div>
                            <div class="alldiv">
                                <h4 class="qspe-3"></h4>
                                <p class="aspe-3">Temperature at Bottom: 62.9&deg;C</p>
                            </div>
                        </div>
                    </div>
                </section>                
            </li>
        </ul>
    </section>
    
    <%- include('partials/_footer.ejs'); %>
    
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="/js/navbar.js" async defer></script>
    <script src="/js/product-color.js" async defer></script>
    <script src="/js/product-radio.js"></script>
</body>

</html>