.hero_section {
    background: url(https://waglovepets.com/wp-content/uploads/2025/08/services-banner-01.jpeg) center center / cover no-repeat;
    height: 413px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: end;
     flex-direction: column;
    color: white;
    text-align: center;
    margin-top: -130px;
}
.hero_section h2 {
    color: #fff;
    font-family: Raleway;
    font-size: 35px;
    font-weight: 700;
      position: relative;
      margin-bottom:0;
    
}
.listing-custom {
  padding-left: 40px;
}
.hero_section p {
    font-family: "Public Sans", sans-serif;
    font-weight: 400;
    margin-top:40px;
    font-size: 18px;
    line-height: 36px;
      position: relative;
      margin-bottom: 85px;
}
.hero_section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    /*z-index: 1;*/
}
  .pet-toggle-section {
            background: #FAEDE2;
            padding-top: 58px;
            padding-bottom: 90px;
            text-align: center;
        }

        .pet-toggle {
            display: inline-flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto;
  background: #fff;
  border-radius: 5px;
  padding: 12px 10px;
  align-content: center;
  width: 100%;
  max-width: 466px;
        }

        .toggle-option {
           flex: 1;
  padding: 12px 24px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 700;
  color: #3b3b3b;
  font-size: 22px;
  font-family: Raleway;
  max-width: 233px;
  width: 100%;
        }

        .toggle-option.active {
            background: #65abc4;
            color: white;
            box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
        }  
        .swiper-container {
        width: 100%;
       overflow:hidden;
       margin:50px auto;
       padding:26px 0;
       position: relative;
      }
   

        .service-scroll-card {
             border-radius: 10px;
            border: 1px solid #EAECEF;
            background: rgb(255 255 255 / 50%);
            padding:40px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            display: flex;
  flex-direction: column;
  justify-content: space-between;
            /*height:345px;*/
        }

       

        .service-scroll-card:hover, .service-scroll-card.selected {
            background: #FFF;
            box-shadow: 0 11px 44px 0 rgba(0, 0, 0, 0.25);
        }

        .service-category {
            color: #23252B;
            text-align: center;
            font-family: "Public Sans";
            font-size: 18px;
            font-style: normal;
            font-weight: 400;
            line-height: 36px; 
            letter-spacing: 0.72px;
            display: flex;
            align-items: center;
            justify-content: center;
            
        }

        .service-scroll-title {
            color: #4E5260;
            text-align: center;
            font-family: Raleway;
            font-size: 22px !important;
            font-weight: 700;
            padding-top: 5px;
            overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
           line-clamp: 2; 
   -webkit-box-orient: vertical;
   min-height:68px;
        }
.h-auto-slide{
    height:auto !important;
}
        .service-type-label {
            border-radius: 5px;
                background: #FAEDE2;
                color: #23252B;
                text-align: center;
                font-size: 22px;
                font-weight: 700;
                height: 74px;
                display: flex;
                align-items: center;
                justify-content: center;
                 margin: 20px 0;
        }

        .service-scroll-description {
            font-size: 15px !important;
              color: #4E5260;
              line-height: 1.5;
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
              margin: 0 !important;
              min-height:56px;
              font-family: "Public Sans" !important;
        }
        
        .swiper-button-next:after, .swiper-button-prev:after{
            font-size:20px !important;
        }
        .services-section{
          background:#FAEDE2;
        }
        .services-section h2{
            color: #65abc4;
            font-size: 35px;
            font-weight: 700;
            text-align: center;
            font-family: Raleway;
            margin-bottom: 26px;
            margin-top: 0;
        }
        .services-section p{
            text-align: center;
            font-size: 18px;
            font-weight: 400;
            line-height: 28px;
            letter-spacing: 0.72px;
            font-family: "Public Sans";
        }
            .swiper-button-prev, .swiper-button-next {
    padding:22px;
}
  /* Service Detail */
        .service-detail {
            border-radius: 16px;
             margin-bottom: 60px;
        }

        .detail-header {
            text-align: center;
            margin-bottom: 70px;
        }
.listing-custom .included-title {
  margin-bottom: 20px !important;
}
.listing-custom .included-list {
  padding-left: 40px !important;
}
.listing-custom .included-list li::marker {
  color: #07B1EF; /* change to any color you want */
}
        .detail-title {
            color: #65abc4;
            text-align: center;
            font-family: Raleway;
            font-size: 35px;
            font-weight: 700;
            margin-bottom: 15px;
        }

        .detail-subtitle {
            font-size: 18px;
            color: #6b7280;
            font-family: Raleway;
        }

        .detail-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 50px;
            align-items: start;
            margin-bottom: 40px;
        }

        .service-image {
           width: 100%;
            height: 642px;
            border-radius: 30px;
        }

        .service-image img{
            width: 100%;
            height: 100% !important;
            object-fit: cover;
            border-radius: 30px;
        }

        .service-info {
            padding: 20px;
        }

        .detail-description {
             color: #4E5260;
            font-family: "Public Sans";
            font-size: 18px;
            font-weight: 400;
            line-height: 36px; 
            letter-spacing: 0.72px;
            margin-bottom: 30px;
        }

        .included-title {
            color: #65abc4;
            font-family: Raleway;
            font-size: 22px;
            font-weight: 700;
        }

       .included-list li{
            color: #4E5260;
            font-family: "Public Sans";
            font-size: 18px;
            font-weight: 400;
            line-height: 36px; 
            letter-spacing: 0.72px;
            margin-bottom: 10px;
       }


        .book-section {
            text-align: center;
            padding:60px;
        }

        .book-description {
            color: #A4ACBC;
            text-align: center;
            font-family: Raleway;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            letter-spacing: 0.72px;
             margin-bottom: 60px;
        }

        .btn-book {
            background:#65abc4;
            color: white;
            padding: 16px 40px;
            border-radius: 4px;
            border: none;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        .groom-fev{
           background: #FAEDE2; 
        }
        
        .booking{
           background: var(--Medium-Dark, #4E5260);
        }
        .container{
            width:90% !important;
        }
        @media (max-width: 768px) {
            .detail-content{
               grid-template-columns: 1fr;
            }
            .swiper-container{
                /*padding:12px;*/
            }
            .container{
            width:100% !important;
        }
        .book-section{
            padding:12px;
        }
        .book-description{
            margin-bottom:30px;
        }
        .hero_section{
           margin-top: -130px; 
        }
        }