:root {
      --navy: #0b1f3f;
      --orange: #f97316;
      --gray: #6b7280;
      --light-gray: #f9fafb;
      --white: #ffffff;
    }
    body { font-family: 'Montserrat', sans-serif; }

    /* Hero Section */
    .abouthero {
      position: relative;
      min-height: 65vh;
      background: url('Images/City.jpeg') center center/cover no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
.featureshero {
      position: relative;
      min-height: 65vh;
      background: url('Images/City.jpeg') center center/cover no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }
 .homehero {
      position: relative;
      min-height: 65vh;
      background: url('Images/tech related image.jpeg') center center/cover no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      
    }
    .hero {
      position: relative;
      min-height: 65vh;
      background: url('Images/tech related image.jpeg') center center/cover no-repeat;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    /* Dark overlay */
    .hero::before {
      content: "";
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.55);
      z-index: 1;
    }

    .hero .container {
      position: relative;
      z-index: 2;
    }

    /* Button Colors (match pricing page orange) */
    .btn-primary {
      background-color: var(--orange) !important;
      border-color: var(--orange) !important;
    }
    .btn-primary:hover {
      background-color: #ea580c !important; /* darker orange on hover */
      border-color: #ea580c !important;
    }

    /* Responsive adjustments */
    @media (max-width: 576px) {
      .hero h1 { font-size: 2rem; }
      .hero p { font-size: 1rem; }
      .btn-lg { font-size: 1rem; padding: 0.6rem 1.2rem; }
    }

    .feature-icon { font-size: 2.5rem; margin-bottom: 15px; color: var(--orange); }

    .benefits { background: var(--light-gray); padding: 60px 20px; }
    .benefits ul { list-style: none; padding: 0; }
    .benefits li { margin: 10px 0; font-size: 1.1rem; }

    .cta {
     background: linear-gradient(135deg, #593701,#ff6145);

      color: #fff;
      text-align: center;
      padding: 60px 20px;
    }
    /*- Custom Footer Styles --*/

  .footer {
    background: #0b1f3f; /* Darker, elegant */
  }
  .footer-link {
    color: #ddd;
    text-decoration: none;
    transition: color 0.3s;
  }
  .footer-link:hover {
    color: orange;
  }

  .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; 
    height: 42px;
    border-radius: 50%;
    background: orange;
    color: #111; /* Dark icons instead of white */
    font-size: 1.2rem;
    transition: all 0.3s ease;
  }
  .social-icon:hover {
    background: #ff6600;
    color: #fff; /* Change to white on hover */
    transform: translateY(-3px);
  }