body { scroll-behavior: smooth; }

    /* Navbar */
    .navbar { background: #343a40; }
    .navbar .nav-link { color: #fff !important; font-weight: 500; position: relative; }
    .navbar .nav-link.active { color: #28a745 !important; }

    .navbar .nav-link::after {
      content:'';
      position:absolute;
      left:0;
      bottom:-5px;
      width:0;
      height:2px;
      background:#28a745;
      transition:width 0.3s;
    }
    .navbar .nav-link:hover::after,
    .navbar .nav-link.active::after { width:100%; }

    .navbar-brand {
      color:#28a745;
      font-weight:700;
      font-size:1.8rem;
      font-family:'Montserrat',sans-serif;
      
    }

    .brand-title  {
      color:#28a745;
    }

    /* Hero */
    .hero {
      background:linear-gradient(rgba(0,0,0,0.65),rgba(0,0,0,0.65)),
      url('it-services-hero-background.jpg') center/cover no-repeat;
      min-height:100vh;
      display:flex;
      align-items:center;
      color:#fff;
      text-align:center;
    }

    .hero h1 { font-size:3rem; font-weight:700; letter-spacing:1px; }
    .hero p { max-width:900px; margin:20px auto; font-size:1.2rem; opacity:0.9; }

    section { padding:80px 0; }
    .section-title { font-size:2.4rem; font-weight:700; margin-bottom:35px; }

    /* Services */
    .icon-md { font-size:3rem; color:#28a745; margin-bottom:15px; }
    .service-box {
      padding:30px;
      border:1px solid #e0e0e0;
      border-radius:10px;
      transition:all 0.3s;
      height:100%;
    }
    .service-box:hover {
      transform:translateY(-8px);
      box-shadow:0 10px 25px rgba(0,0,0,0.15);
    }







    /* extra service */
    .extra-service-box {
  background: #f0f8f5; /* soft green tint */
  border-radius: 12px;
  padding: 30px 20px;
  text-align: center;
  height: 100%;
  border: 1px solid #d4edda;
  transition: all 0.3s ease;
}

.extra-service-box:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.extra-service-box i {
  font-size: 3rem;
  color: #28a745;
  margin-bottom: 15px;
  transition: transform 0.3s;
}

.extra-service-box:hover i {
  transform: rotate(10deg) scale(1.1);
  transition: all 0.3s ease;
}



.process-step {
  background: #ffffff;
  border-radius: 12px;
  padding: 30px 20px;
  position: relative;
  border: 1px solid #e6e6e6;
  height: 100%;
}


/* Process steps */ 
.process-line {
  position: relative;
  margin-top: 50px;
}

.process-line:before {
  content: "";
  position: absolute;
  top: 35px;
  left: 0;
  right: 0;
  height: 3px;
  background: #d4edda;
}

.process-item {
  position: relative;
  z-index: 1;
}
.process-item:hover .process-circle {
  background: #198754;
  transform: scale(1.2);
}




.process-circle {
  width: 70px;
  height: 70px;
  background: #28a745;
  color: #fff;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.process-item h5 {
  font-weight: 600;

}

.process-item h3 {
  font-weight: 600;
  font-size: 1.1rem;
  
}





    /* Portfolio */
    .portfolio-box {
      background:#f8f9fa;
      padding:30px;
      border-radius:10px;
      transition:all 0.3s;
    }
    .portfolio-box:hover { box-shadow:0 10px 25px rgba(0,0,0,0.2); }

    /* Footer */
    footer {
      background:#343a40;
      color:#fff;
      padding:25px 0;
    }


    .section-separator svg {
  width: 100%;
  height: 90px;
  display: block;
}





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