/* Media queries for different screen sizes */

@media only screen and (min-width: 768px) {  /* Desktop */
  .sm-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three columns of equal width */
    grid-template-rows: repeat(2, auto);  /* Two rows with automatic height */
    gap: 10px;  /* Gap between columns and rows */
  }
}

@media only screen and (min-width: 480px) and (max-width: 767px) {  /* Tablet */
  .sm-services {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns of equal width */
    grid-template-rows: repeat(3, auto);  /* Three rows with automatic height */
    gap: 10px;  /* Gap between columns and rows */
  }
}

@media only screen and (max-width: 479px) {  /* Mobile */
  .sm-services {
    display: grid;
    grid-template-columns: 1fr;  /* One column */
    grid-template-rows: repeat(6, auto);  /* Six rows with automatic height */
    gap: 10px;  /* Gap between columns and rows */
  }
}

/* Container styles (common for all screen sizes) */

.sm-services {
  width: 80%;  /* Adjust width as needed */
  margin: 45px auto 0px;  /* Center the container horizontally */
  padding: 10px;  /* Add some padding */
  border: 1px solid #ddd;  /* Optional border */
}

/* Add styles for your content within the container grid cells */

.sm-services > * {
  background-color: #eee;  /* Optional background color for each grid cell */
  padding: 5px;  /* Add some padding to content */
  text-align: center;  /* Center content within cells (optional) */
  font-weight:600;
  min-height:80px;
  align-content:center;
}

.card {
  position: relative; /* Needed for desktop hover */
  display: inline-block; /* Allow side-by-side cards on desktop */
  margin: 10px; /* Adjust spacing between cards */
}

.card-content {
  position: absolute;
  bottom: 0; /* Position content below card initially */
  left: 0;
  background-color: #eee;
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  padding: 10px;
  display: none; /* Hide content initially */
  opacity: 0; /* Set initial opacity to 0 */
  transition: all 0.3s ease-in-out; /* Smooth transition on hover */
  z-index:999;
  list-style:none;
}

.card:hover .card-content {
  display: block; /* Show content on hover (desktop) */
  opacity: 1; /* Set full opacity on hover */
}

/* Mobile Styles */
@media only screen and (max-width: 768px) {
  .card {
    display: block; /* Stack cards vertically on mobile */
    /*width: 100%;*/
  }

  .card-content {
    position: relative; /* Remove absolute positioning on mobile */
    top: auto; /* Remove top positioning */
    display: none; /* Hide content initially */
    padding: 0; /* Remove padding for better mobile view */
  }

  .card.active .card-content {
    display: block; /* Show content on tap (mobile) */
  }
}

.card-content li {
  cursor: pointer; /* Highlight list items on hover */
  font-weight:400;
  padding:15px 0;
}

.card-content li:hover {
  background-color: #f5f5f5; /* Light background on hover */
}