.services-section {
  position: relative;
  width: 100%;
  background: 
    linear-gradient(rgba(255, 250, 245, 0.5), rgba(255, 250, 245, 0.5))
  , #FFFAF5;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center; /* center everything horizontally */
  justify-content: flex-start; /* keep heading at top */
  overflow: hidden;
  object-fit: cover;
  padding: 60px 20px 40px;
}

.services-section h2 {
  position: relative;
  font-family: 'Denton Text';
  font-weight: 420;
  font-style: normal;
  font-size: 48px;
  line-height: 100%;
  text-transform: capitalize;
  color: #000;
  text-align: center;
  margin: 0 auto 20px; /* center and add space below */
  z-index: 2;
}

/* Add horizontal lines on both sides */
.services-section h2::before,
.services-section h2::after {
  content: "";
  position: absolute;
  top: 50%; /* center vertically with text */
  width: 100px; /* length of line */
  border-bottom: 2px solid #70724F;
  transform: translateY(-50%);
}

.services-section h2::before {
  left: -140px; /* space between text and line */
}

.services-section h2::after {
  right: -140px;
}

.services-container{
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    z-index: 2;
    max-width:1200px;
}
.services-row {
  display: flex;
  justify-content: center;
  align-items: center;
  /* gap: 30px; space between services */
  flex-wrap: wrap; /* optional if screen gets smaller */
}

.service {
  display: flex;
  flex-direction: column; /* stack image on top, text below */
  align-items: center;    /* center content horizontally */
  justify-content: center;
  text-align: center;
  width: 200px;
  min-height:180px;
  height: auto; /* let height adjust to content */
  /* gap: 10px;    space between image and text */
   opacity: 0;
  transform: translateY(30px); /* start slightly below */
  animation-fill-mode: forwards; /* retain final state */
  padding:5px;
}


.service-image {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  padding: 10px;
  object-fit: cover; /* fits image, preserving aspect ratio and filling container */
  image-rendering: auto; /* ensures smooth scaling */
}

.service-title{
    font-family: 'DM Sans';
font-weight: 500;
font-style: Medium;
font-size: 15px;
line-height: 1.2;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;
width: 150px;
height: 46px;
opacity: 1;

}


/* Animation keyframes */
@keyframes fadeSlideUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Apply animation to each service with staggered delay */
/* .services-row .service:nth-child(1) { animation: fadeSlideUp 0.6s ease forwards 0s; }
.services-row .service:nth-child(2) { animation: fadeSlideUp 0.6s ease forwards 0.1s; }
.services-row .service:nth-child(3) { animation: fadeSlideUp 0.6s ease forwards 0.2s; }
.services-row .service:nth-child(4) { animation: fadeSlideUp 0.6s ease forwards 0.3s; }
.services-row .service:nth-child(5) { animation: fadeSlideUp 0.6s ease forwards 0.4s; }
.services-row .service:nth-child(6) { animation: fadeSlideUp 0.6s ease forwards 0.5s; }
.services-row:nth-child(2) .service:nth-child(1) { animation: fadeSlideUp 0.6s ease forwards 0.6s; }
.services-row:nth-child(2) .service:nth-child(2) { animation: fadeSlideUp 0.6s ease forwards 0.7s; }
.services-row:nth-child(2) .service:nth-child(3) { animation: fadeSlideUp 0.6s ease forwards 0.8s; }
.services-row:nth-child(2) .service:nth-child(4) { animation: fadeSlideUp 0.6s ease forwards 0.9s; }
.services-row:nth-child(2) .service:nth-child(5) { animation: fadeSlideUp 0.6s ease forwards 1s; }
.services-row:nth-child(2) .service:nth-child(6) { animation: fadeSlideUp 0.6s ease forwards 1.1s; } */

.service {
  /* ...other styles */
  opacity: 0;
  transform: translateY(30px);
  /* remove animation-fill-mode and animation here */
}

.service.animate {
  animation: fadeSlideUp 0.6s cubic-bezier(.42,0,.58,1) forwards;
}



@media screen and (max-width: 1240px) {

.services-section {
    height: auto; /* let content define height */
    padding: 40px 20px 30px;
  }

.service-title {
    text-align: center;    /* center the text */
    white-space: normal;   /* allow wrapping */
    line-height: 1.2;
    overflow-wrap: break-word;
    margin: 0 auto;
  }
}

/* Mobile responsive: screens up to 768px */
/* Medium screens: tablets, 768px - 992px */
@media screen and (max-width: 992px) {

  .services-section {
    height: auto; /* let content define height */
    padding: 40px 20px 30px;
  }

  .services-section h2 {
    font-size: 36px;
    margin: 20px auto;
  }

  .services-section h2::before,
  .services-section h2::after {
    width: 80px;
    border-bottom: 2px solid #70724F;
  }
  .services-section h2::before { left:-110px; }
  .services-section h2::after { right:-110px; }

}

/* Small screens: phones, max-width 768px */
@media screen and (max-width: 768px) {

  .services-section {
    padding: 30px 15px 20px;
  }

  .services-section h2 {
    font-size: 28px;
    margin: 15px auto;
  }

  .services-section h2::before,
  .services-section h2::after {
    width: 60px;
    border-bottom: 1.5px solid #70724F;
  }

  .service {
    width:50%;
    margin-right:0px;
  }


.service-title {
    width: 100%;           /* take full width of card */
    text-align: center;    /* center the text */
    white-space: normal;   /* allow wrapping */
    line-height: 1.2;
    overflow-wrap: break-word;
    margin: 0 auto;
  }
  .services-section h2::before { left:-70px; }
  .services-section h2::after { right:-70px; }
}

/* Extra small screens: phones, max-width 480px */
@media screen and (max-width: 480px) {
  .services-section {
    padding: 20px 10px 15px;
  }
  .services-section h2::before, .services-section h2::after { width:30px; }
  .services-section h2::before { left:-40px; }
  .services-section h2::after { right:-40px; }
  .services-section h2 {
    font-size:24px;
    margin: 10px auto;
  }
}

/* Hide scrollbar for all mobile views */
.services-container::-webkit-scrollbar {
  display: none;
}
.services-container {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;     /* Firefox */
}