.services-grid, .portfolio-grid { width: 100%; padding: 60px 0; }
.services-grid .container, .portfolio-grid .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }


/* service/Portfolio items */

.services-grid-inner {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
  .services-grid-inner {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
  }
  
  @media(max-width: 768px) {
    .services-grid-inner {
      grid-template-columns: 1fr;
    }
    .services-grid-inner {
      grid-template-columns: 1fr;
    }
    
  }
  
  .service-item-link {
      display: block;
      text-decoration: none;
      color: inherit;
  }
  
  .service-item {
      position: relative;
      background-size: cover;
      background-position: center;
      height: 250px;
      overflow: hidden;
      border-radius: 8px;
  }
  
  .service-item-name {
      position: absolute;
      top: 10px;             
      left: 10px;
      z-index: 2;
      color: #ffffff !important;       
      background-color: rgba(0,0,0,0.4); 
      padding: 5px 10px;
      border-radius: 4px;
      font-weight: 600;
      max-width: calc(100% - 10px);
  }
  
  .service-item-name * {
      color: #ffffff !important;  
  }
  
  .service-item-overlay {
      position: absolute;
      bottom: -100%;
      left: 0;
      width: 100%;
      padding: 15px;
      box-sizing: border-box;
      color: #222; 
      transition: bottom 0.3s ease;
  }
  
  .service-item:hover .service-item-overlay {
      bottom: 0;
  }