<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Kanchan Chemicals - Herbal Gulal Manufacturer</title>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js" defer></script>
</head>
<body>
  <!-- Header Section with Logo and Navbar -->
  <header>
    <div class="nav-container">
      <a href="index.html">
        <img src="kanchan-logo.png" alt="Kanchan Chemicals Logo" class="logo" />
      </a>
      <nav>
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#products">Products</a></li>
          <li><a href="#about">About Us</a></li>
          <li><a href="#contact">Contact</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <!-- Home Section with Highlights -->
  <section id="home">
    <div class="container">
      <h1>Welcome to Kanchan Chemicals</h1>
      <p>We manufacture herbal holi gulal, rangoli colors, roli chawal tilak, stationary glue, craft glue, tile adhesive etc.</p>

      <!-- Instagram-Style Highlights -->
      <div class="insta-highlights">
        <div class="highlight-circle">
          <img src="images/gulal.jpg" alt="Herbal Gulal">
          <p>Herbal Gulal</p>
        </div>
        <div class="highlight-circle">
          <img src="images/rangoli.jpg" alt="Rangoli">
          <p>Rangoli</p>
        </div>
        <div class="highlight-circle">
          <img src="images/glue.jpg" alt="Glue">
          <p>Glue</p>
        </div>
        <div class="highlight-circle">
          <img src="images/pooja.jpg" alt="Pooja Items">
          <p>Roli-Haldi</p>
        </div>
      </div>
    </div>
  </section>

  <!-- Products Section -->
  <section id="products">
    <h2>Our Products</h2>
    <div class="product-list">
      <div class="product-item">
        <img src="images/product1.jpg" alt="Herbal Holi Gulal">
        <h3>Herbal Holi Gulal</h3>
        <p>Natural and skin-safe gulal for a safe and colorful Holi celebration.</p>
      </div>
      <div class="product-item">
        <img src="images/product2.jpg" alt="Rangoli Colors">
        <h3>Rangoli Colors</h3>
        <p>Bright and beautiful colors perfect for traditional art and decoration.</p>
      </div>
      <div class="product-item">
        <img src="images/product3.jpg" alt="Roli Chawal Tilak">
        <h3>Roli Chawal Tilak</h3>
        <p>Pure roli and chawal for religious rituals and festivals.</p>
      </div>
      <div class="product-item">
        <img src="images/product4.jpg" alt="Stationary Glue">
        <h3>Stationary Glue</h3>
        <p>Strong and quick-drying glue for office and school use.</p>
      </div>
      <div class="product-item">
        <img src="images/product5.jpg" alt="Craft Glue">
        <h3>Craft Glue</h3>
        <p>Perfect for DIY projects, crafts, and hobbies.</p>
      </div>
      <div class="product-item">
        <img src="images/product6.jpg" alt="Tile Adhesive">
        <h3>Tile Adhesive</h3>
        <p>Durable adhesive for tiles, ideal for home improvement projects.</p>
      </div>
    </div>
  </section>

  <!-- About Us Section -->
  <section id="about">
    <h2>About Us</h2>
    <p>
      Kanchan Chemicals is a trusted manufacturer of herbal holi gulal, rangoli colors,
      roli chawal tilak, stationary glue, craft glue, tile adhesive and more. Our commitment to quality and
      tradition ensures that every product brings color and festivity into your life.
    </p>
    <img src="images/about-us.jpg" alt="About Kanchan Chemicals">
    <video src="videos/about.mp4" controls></video>
  </section>

  <!-- Footer Section -->
  <footer id="contact">
    <p>&copy; 2025 Kanchan Chemicals. All rights reserved.</p>
    <div class="footer-contact">
      <p>Contact: +91 7014967994 | Email: kanchanchemicals15@gmail.com | Location: Jaipur, Rajasthan</p>
    </div>
  </footer>
</body>
</html>

/* General Reset and Fonts */
body {
  margin: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f9f9f9;
  color: #333;
}

/* Header and Navbar */
header {
  background-color: #004d40;
  padding: 10px 20px;
  color: white;
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  height: 60px;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

nav ul li a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

/* Home Section */
#home {
  background: linear-gradient(to right, #e0f2f1, #ffffff);
  padding: 40px 20px;
  text-align: center;
}

.insta-highlights {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.highlight-circle {
  text-align: center;
}

.highlight-circle img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 4px solid #004d40;
  object-fit: cover;
}

/* Products Section */
#products {
  background-color: #ffffff;
  padding: 50px 20px;
  text-align: center;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
}

.product-item {
  width: 250px;
  background: #e0f2f1;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.product-item img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
}

/* About Us Section */
#about {
  background-color: #f1f8e9;
  padding: 50px 20px;
  text-align: center;
}

#about img {
  max-width: 80%;
  border-radius: 10px;
  margin: 20px 0;
}

#about video {
  max-width: 90%;
  margin-top: 10px;
  border-radius: 8px;
}

/* Footer */
footer {
  background-color: #004d40;
  color: white;
  text-align: center;
  padding: 20px 10px;
}

.footer-contact p {
  margin: 5px 0;
  font-size: 0.9rem;
}

/* Hover Zoom Effect */
.product-item:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Animation when in view */
.product-item.animate {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease-in-out;
}
.insta-highlights {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
  flex-wrap: wrap;
}

.highlight-circle {
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.highlight-circle img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 50%;
  border: 3px solid #e91e63;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.highlight-circle p {
  margin-top: 8px;
  font-weight: bold;
  color: #333;
  transition: color 0.3s;
}

/* Hover effect */
.highlight-circle:hover img {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.highlight-circle:hover p {
  color: #e91e63;
}
.gmb-button {
  display: inline-block;
  background-color: #4285F4;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-weight: bold;
  transition: background-color 0.3s ease;
  margin-top: 10px;
}

.gmb-button:hover {
  background-color: #3367D6;
}
