:root {
          --accent-color: #1976d2;
          --accent-light: #63a4ff;
          --background-color: #f9f9f9;
          --text-color: #212121;
          --secondary-text: #616161;
          --secondary-bg: #e0e0e0;
          --navbar-bg: #ffffff;
          --header-height: 100vh;
        }

        * {
          box-sizing: border-box;
        }

        body {
          font-family: 'Roboto', sans-serif;
          color: #333333;
          background-color: #f5f5f5;
          margin: 0;
          padding: 0;
          display: flex;
          flex-direction: column;
          min-height: 100vh;
          overflow-x: hidden;
        }

        main {
          flex: 1 0 auto;
        }

        .container-fluid {
          padding-left: 15px;
          padding-right: 15px;
          max-width: 100%;
        }

        /* Center all headings */
        h1,
        h2,
        h3,
        h4 {
          text-align: center;
        }

        /* Preloader */
        #preloader {
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: var(--background-color);
          z-index: 9999;
        }

        #preloader:after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: 40px;
          height: 40px;
          border: 4px solid var(--accent-color);
          border-top: 4px solid transparent;
          border-radius: 50%;
          animation: spin 1s linear infinite;
        }

        @keyframes spin {
          0% {
            transform: translate(-50%, -50%) rotate(0deg);
          }

          100% {
            transform: translate(-50%, -50%) rotate(360deg);
          }
        }

        /* Navbar - Fixed positioning issues */
        .header {
          background-color: var(--secondary-bg);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
          transition: all 0.3s ease;
          width: 100%;
          z-index: 1030;
        }

        .header.scrolled {
          background-color: rgba(224, 224, 224, 0.95);
          backdrop-filter: blur(10px);
          box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
        }

        .navbar {
          padding: 0.5rem 0;
        }

        .navbar-brand {
          font-family: 'Poppins', sans-serif;
          font-size: 1.5rem;
          font-weight: 700;
          color: var(--accent-color);
          text-decoration: none;
          white-space: nowrap;
        }

        .navbar-brand:hover {
          color: var(--accent-color);
        }

        .sprint-text {
          font-weight: 700;
          color: var(--accent-color);
        }

        .elevators-text {
          font-weight: 400;
          color: #6c757d;
        }

        .navbar-nav .nav-link {
          font-size: 1rem;
          color: var(--text-color);
          padding: 10px 15px;
          position: relative;
          transition: color 0.3s ease;
          white-space: nowrap;
        }

        .navbar-nav .nav-link:hover,
        .navbar-nav .nav-link.active {
          color: var(--accent-color);
          background: transparent;
        }

        .navbar-toggler {
          border: none;
          padding: 0.25rem 0.5rem;
        }

        .mobile-nav-toggle {
          font-size: 1.5rem;
          color: var(--text-color);
        }

        /* Hero Section */
        .hero {
          background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
            url('../img/hero.avif') no-repeat center center/cover;
          min-height: 100vh;
          color: #ffffff;
          text-align: center;
          display: flex;
          align-items: center;
          width: 100%;
          overflow: hidden;
        }

        .hero .hero-content {
          padding: 2rem 1rem;
          width: 100%;
        }

        .hero h1 {
          font-family: 'Poppins', sans-serif;
          font-size: clamp(2rem, 8vw, 3.5rem);
          font-weight: 700;
          margin-bottom: 1rem;
        }

        .hero h2 {
          font-size: clamp(1rem, 4vw, 1.5rem);
          font-weight: 300;
          letter-spacing: 1px;
          margin: 20px 0;
        }

        /* Section spacing and container fixes */
        section {
          width: 100%;
          overflow: hidden;
        }

        .section-title h2 {
          font-size: clamp(1.8rem, 5vw, 2.5rem);
          font-weight: 700;
          color: var(--text-color);
          margin-bottom: 20px;
        }

        .section-title p {
          font-size: 1.1rem;
          color: var(--secondary-text);
          margin-bottom: 30px;
        }

        /* Services Section */
        .service-item {
          padding: 25px;
          border: 1px solid var(--secondary-bg);
          border-radius: 8px;
          background: white;
          transition: all 0.3s ease;
          text-align: center;
          height: 100%;
        }

        .service-item:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
          border-color: var(--accent-color);
        }

        .service-img {
          width: 100%;
          height: 200px;
          object-fit: cover;
          border-radius: 8px;
          margin-bottom: 20px;
        }

        .service-item h4 {
          font-size: 1.5rem;
          font-weight: 600;
          color: var(--text-color);
          margin-bottom: 15px;
        }

        .service-item p {
          font-size: 1rem;
          color: var(--secondary-text);
          line-height: 1.6;
        }

        /* About Section */
        .about {
          padding: 80px 0;
        }

        .about .section-title {
          font-size: clamp(1.8rem, 5vw, 2.5rem);
          font-weight: 700;
          color: var(--text-color);
        }

        .about p {
          font-size: 1.05rem;
          color: #5f5f5f;
          line-height: 1.8;
        }

        .about-img {
          width: 100%;
          height: auto;
          border-radius: 12px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        /* Stats styling */
        .stats-row {
          margin-top: 3rem;
        }

        .counter {
          font-size: 2.5rem;
          font-weight: bold;
         
        }

        .clients {
          padding: 60px 0;
          background-color: #f9f9f9;
        }

        .client-item {
          padding: 8px;
          /* reduced padding to give logos more room */
          text-align: center;
          background-color: white;
          border-radius: 8px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
          transition: transform 0.3s ease;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 140px;
          /* increased height for bigger cards */
          overflow: hidden;
          /* ensures zoomed images don't break container */
        }

        .client-item:hover {
          transform: translateY(-2px);
        }

        .client-item img {
          max-height: 120px;
          /* increased to utilize the bigger card height */
          max-width: 95%;
          /* ensures images don't overflow horizontally */
          width: auto;
          object-fit: contain;
          transform: scale(1.1);
          /* additional zoom effect */
        }

        /* Projects Section */
        .projects {
          padding: 60px 0;
        }

        .project-item {
          margin-bottom: 2rem;
        }

        .video-wrapper {
          position: relative;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
        }

        .project-video {
          width: 100%;
          height: auto;
          display: block;
        }

        /* Contact Section */
        .contact {
          padding: 60px 0;
        }

        .contact .contact-item {
          padding: 20px;
          text-align: center;
          background: white;
          border-radius: 8px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
          margin-bottom: 2rem;
        }

        .contact .contact-item h4 {
          font-size: 1.5rem;
          font-weight: 600;
          margin-bottom: 15px;
         
        }

        .contact .contact-item p {
          color: var(--secondary-text);
          line-height: 1.7;
          margin-bottom: 10px;
        }

        .map-container {
          margin: 2rem 0;
        }

        .map-container iframe {
          width: 100%;
          height: 300px;
          border: none;
          border-radius: 8px;
        }

        /* Footer */
        .footer {
          background-color: var(--secondary-bg);
          padding: 40px 0 20px;
          color: var(--text-color);
          margin-top: auto;
        }

        .footer h3,
        .footer h4 {
          color: var(--text-color);
          font-weight: 600;
          margin-bottom: 20px;
        }

        .footer p {
          color: var(--secondary-text);
          line-height: 1.6;
          margin-bottom: 15px;
        }

        .footer .social-links a {
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 40px;
          height: 40px;
          background-color: var(--accent-color);
          color: white;
          border-radius: 50%;
          margin-right: 10px;
          transition: all 0.3s ease;
        }

        .footer .social-links a:hover {
          background-color: var(--accent-light);
          transform: scale(1.1);
        }

        .footer .footer-links ul {
          list-style: none;
          padding: 0;
          margin: 0;
        }

        .footer .footer-links ul li {
          margin-bottom: 10px;
        }

        .footer .footer-links ul a {
          text-decoration: none;
          color: var(--text-color);
          transition: color 0.3s;
        }

        .footer .footer-links ul a:hover {
          color: var(--accent-color);
        }

        .footer .copyright {
          text-align: center;
          margin-top: 30px;
          padding-top: 20px;
          border-top: 1px solid #ccc;
          font-size: 0.9rem;
          color: var(--secondary-text);
        }

        /* Floating buttons */
        .whatsapp-float {
          position: fixed;
          bottom: 90px;
          right: 20px;
          background-color: #25D366;
          color: white;
          width: 50px;
          height: 50px;
          border-radius: 50%;
          font-size: 24px;
          z-index: 1000;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
          transition: all 0.3s ease;
          text-decoration: none;
        }

        .whatsapp-float:hover {
          background-color: #1ebe5d;
          color: white;
        }

        .back-to-top {
          position: fixed;
          bottom: 20px;
          right: 20px;
          background-color: var(--accent-color);
          color: white;
          width: 50px;
          height: 50px;
          font-size: 24px;
          border-radius: 50%;
          z-index: 999;
          display: flex;
          align-items: center;
          justify-content: center;
          opacity: 0;
          pointer-events: none;
          transition: all 0.3s ease;
          box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
          text-decoration: none;
        }

        .back-to-top.active {
          opacity: 1;
          pointer-events: auto;
        }

        .back-to-top:hover {
          background: var(--accent-light);
          color: white;
          transform: translateY(-2px);
        }

        /* Mobile Responsive Fixes */
        @media (max-width: 768px) {
          body {
            overflow-x: hidden;
          }

          .container {
            max-width: 100%;
            padding-left: 15px;
            padding-right: 15px;
          }

          .navbar-brand {
            font-size: 1.3rem;
          }

          .navbar-brand img {
            height: 40px;
          }

          .navbar-collapse {
            margin-top: 1rem;
          }

          .navbar-nav {
            text-align: center;
            width: 100%;
          }

          .navbar-nav .nav-link {
            padding: 12px 15px;
            margin: 2px 0;
            border-radius: 5px;
          }

          .hero {
            min-height: 100vh;
            padding-top: 80px;
          }

          .hero .hero-content {
            padding: 1rem;
          }

          .about,
          .services,
          .clients,
          .projects,
          .contact {
            padding: 40px 0;
          }

          .service-item {
            margin-bottom: 2rem;
          }

          .contact .contact-item {
            margin-bottom: 1.5rem;
          }

          .map-container iframe {
            height: 250px;
          }

          .footer {
            text-align: center;
            padding: 30px 0 15px;
          }

          .footer .social-links {
            justify-content: center;
            margin: 1rem 0;
          }

          .whatsapp-float,
          .back-to-top {
            width: 45px;
            height: 45px;
            font-size: 20px;
          }

          .whatsapp-float {
            bottom: 80px;
            right: 15px;
          }

          .back-to-top {
            bottom: 15px;
            right: 15px;
          }
        }

        @media (max-width: 576px) {
          .hero h1 {
            font-size: 2rem;
          }

          .hero h2 {
            font-size: 1rem;
            letter-spacing: 0.5px;
          }

          .section-title h2 {
            font-size: 1.8rem;
          }

          .service-item,
          .contact .contact-item {
            padding: 20px 15px;
          }
        }