/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
  
  /* Ensure the whole box is clickable */
   display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  padding: 15px;
  transition: transform 0.3s ease-in-out;
}

/* Service title below the image */
.service-title {
  font-family: var(--nav-font); /* Match hero h4 font */
  font-size: 16px; /* Reduce size from hero h4 */
  font-weight: 700; /* Keep it bold but slightly lighter */
  color: var(--heading-color); /* Match hero h4 color */
  text-align: center;
  margin-top: 10px;
  white-space: normal; /* Allow text to wrap */
  overflow: visible;
  text-overflow: unset;
  line-height: 1.4; /* Improve readability */
}

.fixed-image1{
  width: 300px; /* Set fixed width */
  height: 200px; /* Set fixed height */
  object-fit: cover; /* Ensures proper cropping without stretching */
  border-radius: 10px; /* Optional: Adds rounded corners */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Optional: Adds a slight shadow */
    margin-top: 30px; /* fine-tunes alignment */
}

/* Hover effect to make it interactive */
.service-item:hover {
  transform: scale(1.05);
}

/* Style the service list */
.service-list {
  list-style: none;
  padding: 0;
  font-size: 12px;
    background-color: #e6f7ff; /* Light sky blue */
}

/* Ensure list items are in one line */
.service-list li {
  display: flex;
  align-items: flex-start;
  font-size: 12px;
  line-height: 1.6;
  color: #333;
  margin-bottom: 12px;
  flex-wrap: wrap; 
}

.service-list p {
  margin: 6px 0 0 26px; /* Align paragraph under the heading */
  line-height: 1.6;
  font-family: var(--nav-font);
  color: var(--heading-color);
}


/* Keep side heading and content together */
.service-list li strong {
  font-weight: 500;
  color: var(--heading-color);
}

/* Apply stylish-text style to all list items inside service lists */
 
.service-list li,
.sub-list li {
  font-family: var(--nav-font); /* Match Home & About Us font */
  font-size: 16px; /* Adjust size for readability */
  font-weight: 400; /* Keep it clean and professional */
  text-align: left; /* Align text nicely */  
  color: var(--heading-color);
}

/* Ensure strong (bold) text in list items follows the style */
.service-list li strong,
.sub-list li strong {
  font-weight: 600;
  color: var(--heading-color); /* Match heading color */
}

/* Adjust icon size and alignment */
.service-list li i,
.sub-list li i {
  font-size: 16px; /* Make icons stand out */
  margin-right: 10px; /* Space between icon and text */
  color: var(--primary-color); /* Keep it visually aligned */
  flex-shrink: 0;
}

.service-li-header {
  display: flex;
  align-items: flex-start;
  gap: 8px; /* Optional spacing between icon and text */
  flex-wrap: nowrap;
}