/* Services Section Layout */
.services-section {
    /* display: grid;
    grid-template-columns: repeat(4, 1fr);
    background-color: #fff; */
    display: flex;
    width: 100%;
  }

  article.service-card {
    position: relative;
    overflow: hidden;
  }

  .grid-image {
    position: absolute;
    height: auto;
    top: 0;
    left: 10px;
  }

  .service_banner_01{
    width: 500px;
    right: 0px;
    top: 0px;
    left: auto;
  }

  .service_banner_02{
    width: 350px;
    right: 0px;
    top: 0px;
    left: auto;
  }

  .service_banner_03{
    width: 300px;
    right: 0px;
    top: 0px;
    left: auto;
  }

  button.service-arrow {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transform: translateX(-10px);
  }

  /* .service_banner_04{
    
  } */
  
  /* Service Card Base Styles */
  .service-card {
    padding: 40px;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    transition: all 0.3s ease-in-out; /* Add smooth transition */
    flex: 1; /* Make cards equally sized by default */
  }
  
  /* Service Card Color Variants */
  .yellow-card {
    background-color: #ebff03;
  }
  
  .blue-card {
    background-color: #9ee0fa;
  }
  
  .red-card {
    background-color: #fd4f2e;
    color: #fff;
  }
  
  .purple-card {
    background-color: #4b46b9;
    color: #fff;
  }

  .service-card-content {
    z-index: 9;
    transform: translateY(90px);
  }

  .service-card:hover .service-card-content {
    transform: translateY(0px);
    transition: all 0.3s ease-in-out;
  }

  .black_txt{
    color: #000 !important;
  }
  
  /* Service Content Styles */
  .service-number-white {
    font-family: "Druk Text Trial", sans-serif;
    font-size: 70px;
    margin-bottom: 20px;
    font-weight: 700;
    -webkit-text-stroke: 2px #ffffff;
    color: transparent;
  }

  .service-number-black {
    font-family: "Druk Text Trial", sans-serif;
    font-size: 70px;
    margin-bottom: 20px;
    font-weight: 700;
    -webkit-text-stroke: 2px #000000;
    color: transparent;
  }

  .services-section .service-card:hover .service-number-black {
    color: black;
  }

  .services-section .service-card:hover .service-number-white {
    color: rgb(255, 255, 255);
  }
  
  .service-title {
    font-family: "FONTSPRING DEMO - Tenon Medium", sans-serif;
    font-size: 24px;
    margin-bottom: 20px;
    font-weight: normal;
  }
  
  .service-description {
    font-family: "FONTSPRING DEMO - Tenon Medium", sans-serif;
    font-size: 18px;
    opacity: 0.6;
    margin: 0;
    padding-bottom: 15px;
  }
  
  /* Responsive Breakpoints */
  @media (max-width: 991px) {
    .services-section {
      grid-template-columns: repeat(2, 1fr);
    }
  }
  
  @media (max-width: 900px) {
    .services-section {
      display: block !important;
      grid-template-columns: 1fr;
    }
  
    .service-card {
      height: 400px !important;
      padding: 40px 20px;
      justify-content: center;
    }

    .grid-image {
      position: absolute;
      height: auto;
      right: -40px !important;
      width: 250px !important;
      top: unset !important;
      left: unset !important;
    }
    .service-card-content {
      z-index: 9;
      width: 60% !important;
      transform: none !important;
    }
  }

/* Service Card Hover Animation */
.services-section:hover .service-card {
  flex: 1; /* Reset other cards when hovering section */
}

.services-section .service-card:hover {
  flex: 2; /* Make hovered card twice as wide */
}

/* Adjust hover effect for responsive layouts */
@media (max-width: 991px) {
  .services-section .service-card:hover {
    flex: 1.5; /* Slightly reduce expansion on tablets */
  }
}

@media (max-width: 900px) {
  .services-section .service-card:hover {
    flex: 1; /* Disable width expansion on mobile */
  }
}
