.service-section {
  padding: 40px 20px;
  background-color: #fff;
}

.service-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: 1200px;
  margin: auto;
  gap: 40px;
}

.service-text {
  flex: 1 1 500px;
}

.service-text h2 {
  font-family: 'MyCustomFont';
  font-size: 32px;
  color: #c0cfae;
  margin-bottom: 20px;
  text-transform: uppercase;
}

.service-text p {
  /* background: #d9e3cf; */
  font-size: 19px;
  color: #000000;
  line-height: 1.8;
  margin-bottom: 15px;
  font-weight: 500;
}

.service-image {
  flex: 1 1 400px;
}

.service-image img {
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}


/*.alt-bg {*/
/*  background-color: #d9e3cf;*/
/*}*/

.reverse {
  flex-direction: row-reverse;
}
.service-p{
  text-align: center;
  margin: 30px 10px;
  color: #a7b395;
}
.slider-panel {
      position: fixed;
      top: 0;
      right: -100%;
      width: 80%;
      height: 100vh;
      background-color: #fff;
      box-shadow: -2px 0 15px rgba(0,0,0,0.2);
      padding: 30px;
      overflow-y: auto;
      z-index: 1000;
      transition: right 0.4s ease;
    }
    .slider-panel.active {
      right: 0;
      background: #d9e3cf;
    }
    .slider-panel .close-btn {
      position: absolute;
      top: 20px;
      right: 25px;
      font-size: 24px;
      cursor: pointer;
      color: #333;
    }
#panelContent{
      width: 80%;
    margin: 0px auto;
}
.more-button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 15px; /* Optional: spacing from content above */
}

.more-button {
  text-align: center;
  padding: 10px 20px;
  color: #aebd9d;
  text-decoration: none;
  border-radius: 5px;
  transition: background 0.3s ease;
  border: 1px dashed;
}

.more-button:hover {
  background-color: #aebd9d; /* On hover */
  color: #fff;
}