/* --- RESET & BASICS --- */
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: #f9f9f9;
      color: #333;
      overflow-x: hidden; /* Prevent horizontal scrollbar */
    }

    /* --- HEADER --- */
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 5%; /* Adjusted padding for image logo */
      background: #ffffff;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    
    /*New Logo Styles */
    .logo-link {
      display: flex;
      align-items: center;
      text-decoration: none;
    }
    .logo-img {
      height: 70px; /* Controls the logo size - adjust as needed */
      width: auto;  /* Maintains aspect ratio */
      display: block;
    }

    /* =========================================
   MOBILE RESPONSIVENESS (Hamburger Menu)
   ========================================= */

/* 1. Default State (Desktop): Hide the Hamburger */
.hamburger {
  display: none;
  font-size: 2rem;
  cursor: pointer;
  color: #333;
}

/* 2. Mobile View: When screen is less than 768px wide */
@media (max-width: 768px) {
  
  /* Show the Hamburger Icon */
  .hamburger {
    display: block;
  }

  /* Adjust Header padding */
  header {
    padding: 15px 20px;
  }

  /* Hide the Nav links by default */
  header nav {
    display: none; /* Hidden initially */
    position: absolute;
    top: 100%; /* Push it right below the header */
    left: 0;
    width: 100%;
    background: #ffffff;
    flex-direction: column; /* Stack links vertically */
    align-items: center;
    box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    padding: 20px 0;
  }

  /* Style the links inside the dropdown */
  header nav a {
    margin: 15px 0; /* Add space between vertical links */
    font-size: 1.2rem;
    display: block;
  }

  /* The Class we add with JS to show the menu */
  header nav.active {
    display: flex;
  }
}
    
    header nav a {
      margin-left: 20px;
      text-decoration: none;
      font-weight: 600;
      color: #555;
      transition: color 0.3s;
    }
    header nav a:hover { color: #008cff; }

    /* --- HERO SECTION --- */
    .hero-section {
      display: flex;
      padding: 80px 5%;
      gap: 40px;
      align-items: center;
      background: linear-gradient(135deg, #e0f7fa 0%, #ffffff 100%);
      flex-wrap: wrap; /* For mobile responsiveness */
    }
    .hero-left {
      flex: 1;
      min-width: 300px;
    }
    .hero-left h1 {
      font-size: 2.5rem;
      color: #222;
      margin-bottom: 20px;
    }
    .hero-left p {
      font-size: 1.1rem;
      line-height: 1.6;
      color: #555;
      margin-bottom: 30px;
    }
    .btn-primary {
      padding: 12px 25px;
      background: #008cff;
      color: white;
      text-decoration: none;
      border-radius: 5px;
      font-weight: bold;
      box-shadow: 0 4px 6px rgba(0,140,255,0.3);
    }
    .hero-right {
      flex: 1;
      display: flex;
      justify-content: center;
      min-width: 300px;
    }
    .hero-right img {
      width: 100%;
      max-width: 450px;
      border-radius: 15px;
      box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    }

    /* --- ACHIEVEMENTS --- */
    .section-title {
      text-align: center;
      margin-top: 60px;
      font-size: 2rem;
      font-weight: 700;
      color: #222;
    }
    .achievements {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 30px;
      margin: 40px 5%;
    }
    .stat-card {
      background: white;
      padding: 20px;
      border-radius: 10px;
      text-align: center;
      width: 200px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      border-top: 4px solid #008cff;
    }
    .stat-number {
      font-size: 1.8rem;
      font-weight: bold;
      color: #008cff;
      margin: 10px 0;
    }

    /* --- NEW: PROJECT GALLERY CAROUSEL --- */
    .project-section {
        padding: 20px 5%;
        position: relative;
    }
    .carousel-container {
        position: relative;
        max-width: 1000px; /* Adjust width of gallery here */
        margin: 40px auto;
        overflow: hidden; /* Hides images off-screen */
        border-radius: 15px;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    }
    .carousel-track {
        display: flex;
        transition: transform 0.5s ease-in-out; /* Smooth sliding effect */
    }
    .carousel-slide {
        min-width: 100%; /* Shows 1 image at a time. Change to 50% for 2, 33.3% for 3 */
        height: 500px;   /* Fixed height for consistency */
        position: relative;
    }
    .carousel-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures image fills box without stretching */
    }
    /* Carousel Buttons */
    .carousel-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.5);
        color: white;
        border: none;
        padding: 15px 20px;
        font-size: 2rem;
        cursor: pointer;
        z-index: 10;
        border-radius: 50%;
        transition: background 0.3s;
    }
    .carousel-btn:hover { background: rgba(0, 89, 255, 0.8); }
    .btn-left { left: 20px; }
    .btn-right { right: 20px; }


    /* --- INFINITE BRAND SLIDER (THE CORE TASK) --- */
    .brand-section {
      background: #fff;
      padding: 40px 0;
      margin-top: 50px;
      box-shadow: 0 0 20px rgba(0,0,0,0.05);
    }
    .slider {
      height: 100px;
      margin: auto;
      overflow: hidden;
      position: relative;
      width: 100%;
    }
    .slide-track {
      display: flex;
      width: max-content; /* Allows track to be as wide as needed */
      animation: scroll 30s linear infinite; /* 30s controls speed */
    }
    .slide {
      height: 100px;
      width: 200px; /* Fixed width for consistency */
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 20px;
    }
    .slide img {
      max-width: 100%;
      max-height: 80px;
      /*filter: grayscale(100%); /* Makes logos grey */
      transition: filter 0.3s;
      /* TEMPORARY: Border to see logos if images are missing */
      /* border: 1px dashed #ccc; */
    }
    .slide img:hover {
      filter: grayscale(0%); /* Color on hover */
    }

    /* The Math: Move exactly 50% left if we doubled the items */
    @keyframes scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(-50%); } 
    }

    /* --- QUOTE FORM --- */
    .quote-form {
      max-width: 600px;
      margin: 60px auto;
      background: #fff;
      padding: 40px;
      border-radius: 12px;
      box-shadow: 0 5px 25px rgba(0,0,0,0.1);
    }
    .form-group input {
      width: 100%;
      padding: 12px;
      margin: 10px 0;
      border: 1px solid #ddd;
      border-radius: 6px;
      font-size: 1rem;
    }
    .quote-form button {
      width: 100%;
      padding: 14px;
      background: #008cff;
      border: none;
      color: #fff;
      border-radius: 6px;
      font-size: 1.1rem;
      font-weight: bold;
      cursor: pointer;
      margin-top: 10px;
      transition: background 0.3s;
    }
    .quote-form button:hover { background: #006bbd; }

    /* --- FOOTER --- */
    .contact-section {
      padding: 50px 20px;
      background: #222;
      color: #fff;
      text-align: left;
    }
    .contact-info {
      margin-top: 20px;
      font-size: 1.1rem;
    }