<?php 
/**
 * Template Name: bit page
 
 */
get_header(); ?>

<!-- HERO WITH IMAGE -->
<section class="bit-hero">
  <div class="container hero-grid animate">
    <div>
      <span class="badge">KU Affiliated</span>
      <h1>Bachelor of Information Technology (BIT)</h1>
      <p>
        Build a strong foundation in modern IT, software development, and computing
        technologies at South City College of Science and Technology.
      </p>
      <a href="#" class="btn-primary">Apply Now</a>
    </div>

    <div class="hero-image">
      <img src="http://localhost/sccst/wp-content/uploads/2025/12/bit.png" alt="BIT Students">
    </div>
  </div>
</section>

<!-- OVERVIEW -->
<section class="bit-details">
  <div class="container grid">
    
    <div class="content animate">
      <h2>Program Overview</h2>
      <p>
        The BIT program focuses on developing skilled IT professionals with strong
        analytical thinking, programming skills, and real-world problem-solving ability.
      </p>

      <h3>Why Choose BIT at South City?</h3>
      <ul>
        <li><i class="bi bi-check2"></i> Hands-on practical learning</li>
        <li><i class="bi bi-check2"></i> Modern computer labs</li>
        <li><i class="bi bi-check2"></i> Project & research-based education</li>
        <li><i class="bi bi-check2"></i> Experienced faculty members</li>
      </ul>
    </div>

    <div class="image-card animate">
      <img src="http://localhost/sccst/wp-content/uploads/2025/12/lab.png" alt="Computer Lab">
      <span>Modern Computer Labs</span>
    </div>

  </div>
</section>

<!-- FEATURES WITH ICON STYLE -->
<section class="bit-features">
  <div class="container">
    <h2 class="animate">Key Learning Areas</h2>

    <div class="features-grid">
      <div class="feature-box animate">
        <img src="images/programming.jpg" alt="">
        <h4>Programming</h4>
        <p>C, Java, Python & modern frameworks</p>
      </div>

      <div class="feature-box animate">
        <img src="images/web.jpg" alt="">
        <h4>Web Development</h4>
        <p>HTML, CSS, JS & backend technologies</p>
      </div>

      <div class="feature-box animate">
        <img src="images/database.jpg" alt="">
        <h4>Database Systems</h4>
        <p>SQL, data modeling & management</p>
      </div>

      <div class="feature-box animate">
        <img src="images/network.jpg" alt="">
        <h4>Networking</h4>
        <p>Computer networks & security basics</p>
      </div>
    </div>
  </div>
</section>

<!-- CAREER + IMAGE -->
<section class="bit-career">
  <div class="container career-grid">
   <div class="career-image animate video-box">
  <video autoplay muted loop playsinline>
    <source src="http://localhost/sccst/wp-content/uploads/2025/12/bit-video.mp4" type="video/mp4">
    Your browser does not support the video tag.
  </video>
</div>

    <div class="career-content animate">
      <h2>Career Opportunities</h2>
      <ul>
        <li><i class="bi bi-check2"></i> Software Developer</li>
        <li><i class="bi bi-check2"></i> Web & Mobile App Developer</li>
        <li><i class="bi bi-check2"></i> System Analyst</li>
        <li><i class="bi bi-check2"></i> Database Administrator</li>
        <li><i class="bi bi-check2"></i> IT Trainer</li>
      </ul>
    </div>
  </div>
</section>
<?php get_footer(); ?>
