~NAXC~

File Content: `accessories.php`

<?php include("header.php"); ?>

<style>
/* ---- BASIC STYLES ---- */


.slider-container{
  width:100%;
  max-width:1800px;
  margin:auto;
  position:relative;
  overflow:hidden;
  background:#fff;
  border-radius:10px;
  padding:10px 0;
  box-shadow:0 3px 12px rgba(0,0,0,0.1);
}

.slider-track{
  display:flex;
  transition:transform 0.4s ease-in-out;
}

.slide{
  min-width:25%; /* 4 columns */
  padding:10px;
}

.slide .box{
  background:#fff;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,0.12);
  text-align:center;
  padding:10px;
}

.slide img{
  width:100%;
  height:350px;
  object-fit:cover;
  border-radius:6px;
}

/* ---- BUTTONS ---- */
.control-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:60px;
  height:60px;
  background:#000;
  color:#fff;
  border-radius:50%;
  display:flex;
  justify-content:center;
  align-items:center;
  cursor:pointer;
  opacity:0.7;
}
.prev{left:10px;}
.next{right:10px;}

/* ---- RESPONSIVE ---- */
@media(max-width:900px){
  .slide{min-width:50%;} /* 2 columns */
  .slide img{height:130px;}
}
@media(max-width:600px){
  .slide{min-width:100%;} /* 1 column */
  .slide img{height:160px;}
}
</style>
<!-- Page Content -->
<div class="page-heading about-heading header-text">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="text-content">
          <h4>Accessories</h4>
          <h2>Explore our specialized accessories</h2>
        </div>
      </div>
    </div>
  </div>
</div>


<!-- ================== END CAROUSEL ================== -->
<br><br>
<!-- Centered elegant heading with thin underline & subtitle -->
<div class="title-wrap">
  <h2 class="elegant">Accessories</h2>
  <p class="subtitle">Explore our specialized accessories — curated for style & quality</p>
</div>

<style>
.title-wrap{ text-align:center; margin: 18px 0; font-family: Georgia, "Times New Roman", serif; }

.elegant{
  margin:0;
  font-size:30px;
  font-weight:700;
  color:#111827;
  position:relative;
  display:inline-block;
  padding-bottom:10px;
}
.elegant::after{
  content:"";
  display:block;
  height:4px;
  width:84px;
  margin:8px auto 0;
  border-radius:4px;
  background: linear-gradient(90deg,#f59e0b,#ef4444);
  box-shadow: 0 6px 18px rgba(239,68,68,0.12);
}

.subtitle{
  margin:8px 0 0;
  font-size:14px;
  color:#6b7280;
}
</style>

<br><br>
<div class="slider-container">

  <div class="slider-track" id="track">
    
    <!-- Slide 1 -->
    <div class="slide">
      <div class="box">
        <img src="assets/images/carousel1.jpeg">
        
      </div>
    </div>

    <!-- Slide 2 -->
    <div class="slide">
      <div class="box">
        <img src="assets/images/carousel2.jpeg">
        
      </div>
    </div>

    <!-- Slide 3 -->
    <div class="slide">
      <div class="box">
        <img src="assets/images/carousel3.jpeg">
        
      </div>
    </div>

    <!-- Slide 4 -->
    <div class="slide">
      <div class="box">
        <img src="assets/images/carousel4.jpeg">
        
      </div>
    </div>

    <!-- Slide 5 -->
    <div class="slide">
      <div class="box">
        <img src="assets/images/carousel5.jpeg">
        
      </div>
    </div>

    <!-- Slide 6 -->
    <div class="slide">
      <div class="box">
        <img src="assets/images/carousel6.jpeg">
        
      </div>
    </div>
    
    <!-- Slide 6 -->
    <div class="slide">
      <div class="box">
        <img src="assets/images/carousel7.jpeg">
        
      </div>
    </div>
    
    <!-- Slide 6 -->
    <div class="slide">
      <div class="box">
        <img src="assets/images/carousel8.jpeg">
       
      </div>
    </div>

  </div>

  <!-- BUTTONS -->
  <div class="control-btn prev" id="prev">&#10094;</div>
  <div class="control-btn next" id="next">&#10095;</div>

</div>




<!-- ================== ACCESSORIES SECTION ================== -->
<div class="best-features" style="background-color: #f8f9fa; padding: 60px 0;">
  <div class="container">
    
    <div class="text-center mb-5">
      <h2 style="font-size: 36px; font-weight: 700; color: #333; margin-bottom: 15px;">Accessories</h2>
      <h4 style="color: #555; margin-bottom: 15px;">Explore our specialized accessories</h4>
      <p style="color: #666; line-height: 1.7; max-width: 700px; margin: 0 auto;">
        We provide high-quality accessories for modeling, games, and educational setups.
      </p>
    </div>

    <div class="row align-items-start">
      <div class="col-lg-6">
        <ul class="featured-list" style="list-style: none; padding: 0; margin-top: 0;">
          <li style="background:#fff; padding:15px 20px; margin-bottom:15px; border-left:5px solid #007bff; border-radius:8px; box-shadow:0 3px 8px rgba(0,0,0,0.05);">
            <strong>Location Triangle:</strong> Vertical acrylic triangle, 2-inch sides, 9-inch height.
          </li>

          <li style="background:#fff; padding:15px 20px; margin-bottom:15px; border-left:5px solid #28a745; border-radius:8px; box-shadow:0 3px 8px rgba(0,0,0,0.05);">
            <strong>Altitude Triangle:</strong> Acrylic triangle, 4-inch sides.
          </li>

          <li style="background:#fff; padding:15px 20px; margin-bottom:15px; border-left:5px solid #ffc107; border-radius:8px; box-shadow:0 3px 8px rgba(0,0,0,0.05);">
            <strong>Grid Triangle:</strong> Acrylic open-ended triangle.
          </li>

          <li style="background:#fff; padding:15px 20px; margin-bottom:15px; border-left:5px solid #17a2b8; border-radius:8px; box-shadow:0 3px 8px rgba(0,0,0,0.05);">
            <strong>Steel Pins:</strong> 12-inch GI steel rods for model support.
          </li>
        </ul>
      </div>

      <div class="col-lg-6">
        <ul style="list-style:none; padding:0;">
          <li style="background:#fff; padding:15px 20px; margin-bottom:15px; border-left:5px solid #6f42c1; border-radius:8px; box-shadow:0 3px 8px rgba(0,0,0,0.05);">
            <strong>Toys:</strong> Houses, trees & vehicle models.
          </li>

          <li style="background:#fff; padding:15px 20px; margin-bottom:15px; border-left:5px solid #fd7e14; border-radius:8px; box-shadow:0 3px 8px rgba(0,0,0,0.05);">
            <strong>North Arrow:</strong> 18-inch acrylic direction indicator.
          </li>

          <li style="background:#fff; padding:15px 20px; margin-bottom:15px; border-left:5px solid #dc3545; border-radius:8px; box-shadow:0 3px 8px rgba(0,0,0,0.05);">
            <strong>Elliptical Rounds:</strong> Acrylic red & blue rounds.
          </li>

          <a href="https://wa.me/9826072036" class="filled-button" 
             style="display:inline-block; margin-top:20px; padding:12px 30px; background-color:#f33f3f; color:#fff; border-radius:50px; text-decoration:none; font-weight:600;">
            Contact Us
          </a>
        </ul>
      </div>
    </div>
  </div>
</div>
<!-- ================== END ACCESSORIES SECTION ================== -->

<script>
let track = document.getElementById("track");
let prev = document.getElementById("prev");
let next = document.getElementById("next");

let index = 0;
const slides = document.querySelectorAll(".slide");
const total = slides.length;

function updateSlider() {
  const width = slides[0].offsetWidth;
  track.style.transform = `translateX(-${index * width}px)`;
}

next.onclick = () => {
  if (index < total - 1) index++;
  else index = 0;
  updateSlider();
};

prev.onclick = () => {
  if (index > 0) index--;
  else index = total - 1;
  updateSlider();
};

// Auto Play
setInterval(() => {
  if (index < total - 1) index++;
  else index = 0;
  updateSlider();
}, 3000);
</script>

<?php include("footer.php"); ?>
File Content: accessories.php

File Content: `accessories.php`
