.elementor-1001 .elementor-element.elementor-element-396aa3c{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:90px;--padding-bottom:120px;--padding-left:15px;--padding-right:15px;}@media(max-width:1024px){.elementor-1001 .elementor-element.elementor-element-396aa3c{--padding-top:30px;--padding-bottom:60px;--padding-left:15px;--padding-right:15px;}}@media(min-width:768px){.elementor-1001 .elementor-element.elementor-element-396aa3c{--content-width:95%;}}/* Start custom CSS for konstic-service-grid-widget, class: .elementor-element-4f5c9c7 *//* Make all service boxes the same height and improve layout */
  .service-box-items {
    height: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    transition: transform 0.3s ease;
  }
  
  /* Make the content section grow to fill available space */
  .service-box-items .service-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }
  
  /* Push the button to the bottom */
  .service-box-items .service-content a.theme-btn {
    margin-top: auto;
  }
  
  /* Make service thumbnails same height with image coverage */
  .service-box-items .service-thumb {
    position: relative;
    height: 0;
    padding-bottom: 65%; /* Aspect ratio for the images */
    overflow: visible !important; /* Critical change - allow the icon to be visible outside */
  }
  
  /* Make images cover their container */
  .service-box-items .service-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
  
  /* Completely reset icon styling to match original */
  .service-box-items .service-thumb .icon {
    position: absolute;
    right: 30px;
    bottom: -40px; /* Position half outside the container */
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
  }
  
  /* Keep icon image at original size */
  .service-box-items .service-thumb .icon img {
    position: static;
    width: 40px;
    height: 40px;
    object-fit: contain;
  }
  
  /* Ensure titles have consistent height */
  .service-box-items .service-content h3 {
    min-height: 50px; /* Adjust based on your design */
    display: flex;
    align-items: center;
    margin-top: 30px; /* Space for the icon */
  }
  
  /* Hover effect */
  .service-box-items:hover {
    transform: translateY(-5px);
  }
  
  /* Desktop: 4 columns 1 row */
  @media (min-width: 1200px) {
    .col-xl-4 {
      width: 25% !important; /* Force 4 columns instead of 3 */
      flex: 0 0 25% !important;
      max-width: 25% !important;
    }
  }
  
  /* Tablet: 2 columns 2 rows */
  @media (min-width: 768px) and (max-width: 1199px) {
    .col-md-6 {
      width: 50% !important;
      flex: 0 0 50% !important;
      max-width: 50% !important;
    }
  }
  
  /* Mobile: 1 column 4 rows */
  @media (max-width: 767px) {
    .col-md-6 {
      width: 100% !important;
      flex: 0 0 100% !important;
      max-width: 100% !important;
    }
    
    /* Adjust icon size on mobile for better proportions */
    .service-box-items .service-thumb .icon {
      width: 70px;
      height: 70px;
      right: 20px;
      bottom: -35px;
    }
  }
  
  /* Additional spacing adjustments for mobile */
  @media (max-width: 767px) {
    .service-box-items {
      margin-bottom: 20px;
    }
    
    .service-box-items .service-thumb {
      padding-bottom: 60%; /* Slightly shorter aspect ratio for mobile */
    }
  }/* End custom CSS */